﻿/* GOTTA v2 — SKU / Per-Category Page
   Layout based on per-category reference:
   Hero → Full image → Notes → Info L/R → Gallery → Related */

body { background: var(--color-onyx); color: var(--color-ivory); }

/* ── Hero wrapper — pulls up behind fixed nav ── */
.sku-hero-wrap {
    position: relative;
    overflow: hidden;
    background: var(--color-onyx);
    margin-top: -82px;
    padding-top: 82px;
}

/* Smoke video behind hero */
.sku-hero-wrap .sku-smoke {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.22;
    pointer-events: none;
    z-index: 0;
}

/* ── Hero ── */
.sku-hero {
    position: relative;
    z-index: 1;
    padding: clamp(5rem,9vw,7rem) var(--gutter) clamp(4rem,7vw,6rem);
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem,6vw,6rem);
    align-items: start;
    min-height: calc(100vh - 82px);
}

@media(max-width:768px){ .sku-hero{ grid-template-columns:1fr; min-height:0; } }

/* Deliberate spacing between meta items */
.sku-hero__meta {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: clamp(1rem,3vw,2.5rem);
}

.sku-hero__crumb {
    font-family: var(--ff-text);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(140,138,132,0.5);
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
.sku-hero__crumb a { color:rgba(140,138,132,0.5); text-decoration:none; }
.sku-hero__crumb a:hover { color: var(--color-fog); }

.sku-hero__eyebrow {
    font-family: var(--ff-text);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-crown-gold);
    display: block;
    margin-bottom: 1rem;
}

.sku-hero__name {
    font-family: var(--ff-display);
    font-size: clamp(3.2rem, 5.6vw, 7.2rem);
    font-weight: 400;
    line-height: 0.92;
    color: var(--color-ivory);
    letter-spacing: -0.02em;
    margin: 0 0 1.5rem;
}
.sku-hero__name em { font-style:italic; color:var(--color-crown-gold); }

.sku-hero__mnemonic {
    font-family: var(--ff-display);
    font-style: italic;
    font-size: clamp(1.4rem, 1.4vw + 0.9rem, 1.9rem);
    color: rgba(201,165,104,0.9);
    line-height: 1.35;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(201,165,104,0.15);
}

.sku-hero__desc {
    font-family: var(--ff-display);
    font-size: clamp(1.25rem, 1.1vw + 0.85rem, 1.7rem);
    line-height: 1.65;
    color: rgba(246,241,232,0.78);
    max-width: 44ch;
    font-weight: 400;
    margin-bottom: 2.5rem;
}

.sku-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--ff-text);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-crown-gold);
    background: transparent;
    text-decoration: none;
    border-bottom: 1px solid var(--color-crown-gold);
    padding-bottom: 3px;
    align-self: flex-start;
    transition: letter-spacing 0.3s, opacity 0.2s;
}
.sku-hero__cta:hover { letter-spacing: 0.26em; opacity: 0.75; color: var(--color-crown-gold); }

.sku-hero__note {
    font-family: var(--ff-text);
    font-size: 0.68rem;
    color: rgba(140,138,132,0.55);
    line-height: 1.5;
}

/* Hero photo — tall portrait, cinematic */
.sku-hero__photo {
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--color-onyx);
    align-self: start;
}
.sku-hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.9s cubic-bezier(0.22,1,0.36,1);
}
.sku-hero__photo:hover img { transform: scale(1.03); }

/* ── Rule ── */
.sku-rule {
    border: 0;
    border-top: 1px solid rgba(201,165,104,0.12);
    margin: 0;
}

/* ── Main image — full width, full viewport height ── */
.sku-main-photo {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: var(--color-onyx);
}
.sku-main-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ── Notes / Description ── */
.sku-notes {
    max-width: 860px;
    margin: 0 auto;
    padding: clamp(5rem,10vw,9rem) var(--gutter);
}
.sku-notes__label {
    font-family: var(--ff-text);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-crown-gold);
    display: block;
    margin-bottom: 2rem;
}
.sku-notes__text {
    font-family: var(--ff-display);
    font-size: clamp(1.5rem, 1.5vw + 1rem, 2.1rem);
    line-height: 1.65;
    color: rgba(246,241,232,0.85);
    margin: 0 0 2rem;
    font-weight: 400;
}
.sku-notes__pull {
    font-family: var(--ff-display);
    font-style: italic;
    font-size: clamp(1.15rem, 1.3vw + 0.8rem, 1.8rem);
    line-height: 1.3;
    color: var(--color-ivory);
    border-left: 2px solid var(--color-crown-gold);
    padding-left: clamp(1.5rem,3vw,2.5rem);
    margin: 2.5rem 0 0;
}

/* ── Lab data / Batch info ── */
.sku-info {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    border-top: 1px solid rgba(201,165,104,0.12);
    max-width: 1440px;
    margin: 0 auto;
}
@media(max-width:768px){ .sku-info{ grid-template-columns:1fr; } }

.sku-info__left {
    padding: clamp(4rem,8vw,7rem) var(--gutter) clamp(4rem,8vw,7rem) var(--gutter);
    border-right: 1px solid rgba(201,165,104,0.1);
}
.sku-info__right {
    padding: clamp(4rem,8vw,7rem) var(--gutter);
    background: rgba(201,165,104,0.04);
}

.sku-info__label {
    font-family: var(--ff-text);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-crown-gold);
    display: block;
    margin-bottom: 2rem;
}
.sku-info__title {
    font-family: var(--ff-display);
    font-size: clamp(2.5rem, 3.5vw + 1.2rem, 4.5rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--color-ivory);
    margin: 0 0 2rem;
}
.sku-info__title em { font-style:italic; color:var(--color-crown-gold); }

.sku-spec-list { list-style:none; padding:0; margin:0; }
.sku-spec-item {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 1rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(201,165,104,0.09);
    align-items: baseline;
}
.sku-spec-item:first-child { border-top: 1px solid rgba(201,165,104,0.09); }
.sku-spec-key { font-family:var(--ff-text); font-size:0.68rem; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; color:var(--color-crown-gold); }
.sku-spec-val { font-family:var(--ff-display); font-size:clamp(1.2rem, 0.8vw + 0.9rem, 1.6rem); color:rgba(246,241,232,0.85); line-height:1.35; font-weight:400; }

/* ── Lab data — Specimen Sheet (Officine apothecary, type-driven)
   v2 of .sku-info--card. Restrained: no card border, hairline section
   rules, asymmetric body (title left / data right), typeset COA footer.
   Scoped to .sku-info--card so legacy PDPs render unchanged. */
.sku-info--card {
    display: block;
    border-top: 0;
    padding: clamp(4.5rem, 8vw, 7.5rem) var(--gutter);
    max-width: 1100px;
}
.sku-info--card .sku-info__card {
    border: 0;
    padding: 0;
    background: transparent;
}

/* Header — eyebrow flanked by hairline rules */
.sku-info--card .sku-info__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    margin-bottom: clamp(3.5rem, 6vw, 5rem);
    text-align: center;
}
.sku-info--card .sku-info__head::before,
.sku-info--card .sku-info__head::after {
    content: "";
    flex: 1 1 auto;
    max-width: 200px;
    height: 1px;
    background: rgba(201,165,104,0.3);
}
.sku-info--card .sku-info__label { margin: 0; flex: 0 0 auto; }
.sku-info--card .sku-info__head .sku-info__title { display: none; }

/* Body — asymmetric: title block left, data table right */
.sku-info--card .sku-info__body {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
}
@media (max-width: 768px) {
    .sku-info--card .sku-info__body {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}
.sku-info__body-title {
    font-family: var(--ff-display);
    font-size: clamp(2.5rem, 3.5vw + 1.2rem, 4.25rem);
    font-weight: 400;
    line-height: 1.05;
    color: var(--color-ivory);
    margin: 0;
}
.sku-info__body-title em {
    font-style: italic;
    color: var(--color-crown-gold);
}

/* Spec rows — stacked label/value (label eyebrow, value display serif) */
.sku-info--card .sku-spec-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sku-info--card .sku-spec-item {
    display: block;
    padding: clamp(1.25rem, 1.8vw, 1.75rem) 0;
    border-bottom: 1px solid rgba(201,165,104,0.13);
    grid-template-columns: none;
}
.sku-info--card .sku-spec-item:first-child {
    border-top: 1px solid rgba(201,165,104,0.13);
}
.sku-info--card .sku-spec-key {
    display: block;
    font-family: var(--ff-text);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--color-crown-gold);
    margin-bottom: 0.6rem;
}
.sku-info--card .sku-spec-val {
    display: block;
    font-family: var(--ff-display);
    font-size: clamp(1.35rem, 1.1vw + 1rem, 1.85rem);
    color: var(--color-ivory);
    line-height: 1.3;
    font-weight: 400;
}

/* COA footer — typeset block, no thumbnail */
.sku-info__coa {
    margin-top: clamp(4rem, 7vw, 6rem);
    padding-top: clamp(2.5rem, 4vw, 3.5rem);
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(201,165,104,0.18);
    text-align: center;
}
.sku-info__coa-label {
    display: inline-block;
    position: relative;
    font-family: var(--ff-text);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--color-crown-gold);
    margin-bottom: 1.75rem;
    padding: 0 1.85em;
}
.sku-info__coa-label::before,
.sku-info__coa-label::after {
    content: "·";
    position: absolute;
    top: 50%;
    transform: translateY(-55%);
    color: rgba(201,165,104,0.8);
    font-size: 1.4em;
    line-height: 1;
}
.sku-info__coa-label::before { left: 0; }
.sku-info__coa-label::after { right: 0; }

.sku-info__coa-thumb,
.sku-info__coa-mono { display: none; }

.sku-info__coa-batch {
    display: block;
    font-family: var(--ff-text);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--color-ivory);
    margin-bottom: 0.7rem;
}
.sku-info__coa-meta {
    font-family: var(--ff-display);
    font-style: italic;
    font-size: clamp(1.1rem, 0.5vw + 0.95rem, 1.3rem);
    color: rgba(246,241,232,0.78);
    margin: 0 auto 1.75rem;
    line-height: 1.5;
    max-width: 58ch;
}
.sku-info__coa-link {
    display: inline-block;
    font-family: var(--ff-text);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-crown-gold);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 3px;
    transition: opacity var(--dur-fast) var(--ease-quiet), letter-spacing var(--dur-med) var(--ease-soft);
}
.sku-info__coa-link:hover {
    opacity: 0.85;
    letter-spacing: 0.28em;
}

/* ── Format Gallery — Corto-style large horizontal scroll ── */
.sku-gallery {
    overflow: hidden;
    padding: clamp(3rem,5vw,5rem) 0 clamp(4rem,8vw,7rem);
    border-top: 1px solid rgba(201,165,104,0.12);
}

.sku-gallery__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 var(--gutter) 2rem;
}

.sku-gallery__label {
    font-family: var(--ff-text);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-crown-gold);
}

.sku-gallery__hint {
    font-family: var(--ff-display);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--color-fog);
    letter-spacing: 0;
}

.sku-gallery__track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    /* First item flush with left edge, last has right breathing room */
    padding: 0 var(--gutter);
    scrollbar-width: none;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    /* No scroll-behavior — let JS handle momentum */
    user-select: none;
}
.sku-gallery__track::-webkit-scrollbar { display: none; }
.sku-gallery__track.is-dragging { cursor: grabbing; scroll-behavior: auto; }

/* Corto-style: large uniform items ~50vw × 80vh */
.sku-gallery__item {
    flex-shrink: 0;
    width: 50vw;
    height: 80vh;
    overflow: hidden;
    background: var(--color-onyx);
    pointer-events: none; /* prevent image drag interfering */
}

.sku-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    transition: transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
.sku-gallery__item:hover img { transform: scale(1.03); }

@media(max-width:768px) {
    .sku-gallery__item { width: 85vw; height: 55vh; }
    .sku-gallery__track { gap: 12px; }
}

.sku-gallery__item__label {
    padding: 0.85rem 1rem;
    font-family: var(--ff-text);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-fog);
}

/* ── Related moods ── */
.sku-related {
    border-top: 1px solid rgba(201,165,104,0.12);
    padding: clamp(4rem,8vw,7rem) var(--gutter);
    max-width: 1440px;
    margin: 0 auto;
}
.sku-related__label {
    font-family: var(--ff-text);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-crown-gold);
    display: block;
    margin-bottom: 2.5rem;
}
.sku-related__grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 3px;
}
.sku-related__card {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1.5rem;
    align-items: center;
    padding: 1.75rem;
    border: 1px solid rgba(201,165,104,0.12);
    text-decoration: none;
    color: var(--color-ivory);
    transition: border-color 0.2s, background 0.2s;
}
.sku-related__card:hover { border-color:rgba(201,165,104,0.4); background:rgba(201,165,104,0.04); }
.sku-related__card img { width:100%; aspect-ratio:4/5; object-fit:cover; display:block; }
.sku-related__card__period {
    display: block;
    font-family: var(--ff-text);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-crown-gold);
    margin-bottom: 0.55rem;
}
.sku-related__card__mood { font-family:var(--ff-display); font-size:clamp(1.5rem, 2vw + 0.6rem, 2.25rem); color:var(--color-ivory); font-style: italic; line-height:1; margin-bottom:0.4rem; font-weight:400; }
.sku-related__card__why { font-family:var(--ff-text); font-size:0.82rem; color:rgba(246,241,232,0.6); line-height:1.5; margin: 0; }

@media(max-width:600px){ .sku-related__grid{grid-template-columns:1fr;} }

/* ── Footer ── */
.sku-footer {
    border-top: 1px solid rgba(201,165,104,0.12);
    padding: 3rem var(--gutter);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.sku-footer__brand { font-family:var(--ff-display); font-size:1.4rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--color-crown-gold); text-decoration:none; }
.sku-footer__nav { display:flex; gap:2rem; list-style:none; padding:0; margin:0; }
.sku-footer__nav a { font-family:var(--ff-text); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--color-fog); text-decoration:none; transition:color 0.2s; }
.sku-footer__nav a:hover { color:var(--color-crown-gold); }
.sku-footer__legal { width:100%; font-family:var(--ff-text); font-size:0.6rem; letter-spacing:0.06em; color:rgba(140,138,132,0.45); border-top:1px solid rgba(201,165,104,0.08); padding-top:1.25rem; margin-top:0.5rem; }

.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ── State availability chips (top of PDP) ── */
.sku-availability {
    display: flex;
    gap: 0.5rem;
    margin: 0.75rem 0 1.25rem;
    flex-wrap: wrap;
    align-items: center;
}
.sku-availability__label {
    font-family: var(--ff-text);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(140,138,132,0.75);
    margin-right: 0.4rem;
}
.sku-state-chip {
    font-family: var(--ff-text);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(201,165,104,0.35);
    color: var(--color-ivory);
    border-radius: 999px;
}
.sku-state-chip--live {
    background: rgba(201,165,104,0.12);
    border-color: var(--color-crown-gold);
    color: var(--color-crown-gold);
}
.sku-state-chip--soon {
    color: rgba(246,241,232,0.45);
    border-color: rgba(201,165,104,0.18);
}

/* ── PDP compliance block (bottom) ── */
.sku-compliance {
    border-top: 1px solid rgba(201,165,104,0.1);
    background: #050505;
    padding: clamp(2rem, 4vw, 3rem) var(--gutter);
}
.sku-compliance__inner {
    max-width: 920px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.sku-compliance__label {
    font-family: var(--ff-text);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-crown-gold);
    margin-bottom: 0.4rem;
}
.sku-compliance p {
    font-family: var(--ff-text);
    font-size: 0.72rem;
    color: rgba(140,138,132,0.75);
    line-height: 1.65;
    margin: 0;
    letter-spacing: 0.02em;
}
.sku-compliance__licenses {
    color: rgba(201,165,104,0.7) !important;
}
