:root{
    --orange:#f9572b;
    --orange-soft:#fff0eb;
    --black:#111111;
    --dark:#1a1a1a;
    --white:#ffffff;
    --cream:#f7f6f3;
    --soft:#f1f0ed;
    --gray:#777777;
    --light-gray:#a7a7a7;
    --border:#deddd9;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-snap-type:y mandatory}
body{font-family:'Inter',sans-serif;background:var(--cream);color:var(--black);overflow-x:hidden;overscroll-behavior-y:none}
body::-webkit-scrollbar{width:7px}
body::-webkit-scrollbar-thumb{background:var(--orange)}
body::-webkit-scrollbar-track{background:#eee}
.hero h1,.section-content h2{font-family:'Archivo Black',sans-serif}

.topbar{position:fixed;top:0;left:0;width:100%;height:90px;padding:0 55px;display:flex;align-items:center;justify-content:space-between;z-index:100}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{width:180px;height:auto;display:block}

.menu-button{
    position:relative;

    z-index:auto;

    flex:none;

    margin:0;
    padding:0;

    border:0;
    background:none;

    color:var(--black);

    font-family:'Inter',sans-serif;

    font-size:11px;
    font-weight:700;

    line-height:1;

    letter-spacing:3px;

    cursor:pointer;

    transition:color .3s ease;
}

.menu-button:hover{
    color:var(--orange);
}

.section-number{position:absolute;top:105px;right:55px;color:#aaa;font-size:11px;font-weight:600;letter-spacing:3px;z-index:10}
.hero-symbol{position:absolute;width:32vw;max-width:550px;opacity:.04;transform:rotate(-10deg);z-index:0}
.hero-product-image{position:relative;z-index:2;width:auto;height:auto;max-width:100%;max-height:72vh;object-fit:contain;display:block;filter:drop-shadow(0 35px 35px rgba(0,0,0,.12));}

.side-nav{position:fixed;left:55px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:17px;z-index:90}
.nav-link{display:flex;gap:14px;align-items:center;color:#aaa;text-decoration:none;font-size:11px;font-weight:700;letter-spacing:2px;transition:.3s}
.nav-link span{width:25px}
.nav-link:hover,.nav-link.active{color:var(--black)}
.nav-link.active span{color:var(--orange)}

.panel{min-height:100vh;height:100vh;scroll-snap-align:start;scroll-snap-stop:always;position:relative;padding:130px 8% 100px 230px;display:flex;align-items:center;background:var(--cream);border-bottom:1px solid var(--border)}
.panel:nth-child(even){background:var(--white)}
.hero{overflow:hidden}
.hero-content{max-width:700px;position:relative;z-index:5}
.eyebrow{color:var(--orange);font-size:12px;font-weight:700;letter-spacing:5px}
.hero h1{margin-top:20px;font-size:clamp(65px,7.6vw,145px);line-height:.78;letter-spacing:-7px;font-weight:400;color:var(--black)}
.hero h1 span{color:var(--orange);display:block}
.hero p{margin-top:38px;max-width:480px;color:var(--gray);font-size:16px;line-height:1.8}
.cta{display:inline-flex;margin-top:35px;border:1px solid #bbb;color:var(--black);text-decoration:none;padding:18px 28px;font-size:11px;font-weight:700;letter-spacing:2px;transition:.3s}
.cta:hover{background:var(--orange);border-color:var(--orange);color:#fff}

.hero-art{position:absolute;right:6%;top:50%;transform:translateY(-50%);width:36vw;height:70vh;display:flex;align-items:center;justify-content:center}
.orange-ring{position:absolute;width:34vw;height:34vw;border:80px solid var(--orange);border-radius:50%;opacity:.10}
.product-placeholder{width:190px;height:500px;background:linear-gradient(145deg,#fff,#e6e4df);border:1px solid #d0cec9;border-radius:35px;display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:3px;transform:rotate(5deg);box-shadow:0 40px 80px rgba(0,0,0,.14);color:#555}
.scroll-indicator{position:absolute;bottom:40px;right:55px;font-size:10px;color:#aaa;letter-spacing:3px}
.scroll-indicator span{color:var(--orange);margin-left:8px}

.section-content{max-width:900px}
.section-content h2{margin-top:15px;font-size:clamp(50px,7vw,110px);line-height:.9;letter-spacing:-4px;color:var(--black)}
.section-content p{max-width:650px;margin-top:30px;color:var(--gray);line-height:1.8;font-size:17px}

/* =========================
   TOPBAR ACTIONS
========================= */

.topbar-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;

    gap:30px;

    height:100%;
    line-height:1;
}

.member-nav,
.cart-trigger,
.menu-button{
    align-self:center;
}

.about-panel{
    align-items:center;
    overflow:hidden;
}

.about-watermark{
    position:absolute;
    width:42vw;
    max-width:720px;
    left:48%;
    top:50%;
    transform:translate(-50%,-50%) rotate(-7deg);
    opacity:.035;
    pointer-events:none;
    z-index:0;
}

.about-layout{
    position:relative;
    z-index:2;
    width:100%;
    display:grid;
    grid-template-columns:minmax(480px,1.15fr) minmax(360px,.85fr);
    gap:100px;
    align-items:center;
}

.about-heading h2{
    margin-top:18px;
    font-family:'Archivo Black',sans-serif;
    font-size:clamp(62px,6.2vw,112px);
    line-height:.84;
    letter-spacing:-6px;
    color:var(--black);
}

.about-heading h2 span{
    color:var(--orange);
}

.about-content{
    max-width:540px;
}

.about-lead{
    margin:0;
    color:var(--black);
    font-size:20px;
    font-weight:500;
    line-height:1.6;
}

.about-description{
    margin-top:24px;
    color:var(--gray);
    font-size:14px;
    line-height:1.8;
}

.about-values{
    margin-top:38px;
    border-top:1px solid var(--border);
}

.about-value{
    display:grid;
    grid-template-columns:42px 1fr;
    gap:18px;
    padding:18px 0;
    border-bottom:1px solid var(--border);
}

.about-value > span{
    color:var(--orange);
    font-size:10px;
    font-weight:700;
    letter-spacing:2px;
}

.about-value strong{
    display:block;
    color:var(--black);
    font-size:11px;
    letter-spacing:2px;
}

.about-value p{
    margin-top:6px;
    color:var(--gray);
    font-size:12px;
    line-height:1.6;
}

.products-panel{display:block;padding-top:120px}
.products-heading{position:absolute;left:230px;top:120px;z-index:5}
.products-heading h2{margin-top:14px;font-family:'Archivo Black',sans-serif;font-size:clamp(45px,5vw,88px);line-height:.88;letter-spacing:-4px;color:var(--black)}
.products-showcase{width:100%;height:100%;display:grid;grid-template-columns:260px 1fr;align-items:center;gap:70px}

.product-stage{position:relative;height:clamp(460px,68vh,680px);margin-top:100px;}
.product-slide{position:absolute;inset:0;display:grid;grid-template-columns:1fr .9fr;align-items:center;gap:50px;opacity:0;visibility:hidden;pointer-events:none}
.product-slide.active{opacity:1;visibility:visible;pointer-events:auto}
.product-visual{position:relative;min-height:0;height:100%;display:flex;align-items:center;justify-content:center;}
.product-glow{position:absolute;width:420px;height:420px;border-radius:50%;background:var(--orange);opacity:.10;filter:blur(5px)}
.product-visual img{position:relative;z-index:2;width:auto;height:clamp(320px,58vh,570px);max-width:82%;object-fit:contain;}
.product-bottle-placeholder{position:relative;z-index:2;width:220px;height:520px;border:1px solid #d7d4cf;border-radius:40px;background:linear-gradient(145deg,#fff,#ddd9d2);box-shadow:0 40px 80px rgba(0,0,0,.15);display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(4deg)}
.product-bottle-placeholder span{color:var(--orange);font-family:'Archivo Black',sans-serif;font-size:35px}
.product-bottle-placeholder strong{width:80%;margin-top:15px;color:#555;font-size:10px;letter-spacing:2px;text-align:center;text-transform:uppercase}
.product-info{max-width:440px}
.product-category{color:var(--orange);font-size:10px;font-weight:700;letter-spacing:4px;text-transform:uppercase}
.product-info h3{margin-top:15px;font-family:'Archivo Black',sans-serif;font-size:clamp(45px,4.5vw,75px);line-height:.9;letter-spacing:-3px;color:var(--black)}
.product-info p{margin-top:24px;color:var(--gray);line-height:1.8}
.product-meta{margin-top:35px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;padding-top:25px;border-top:1px solid var(--border)}
.product-meta small{display:block;margin-bottom:8px;color:#aaa;font-size:8px;letter-spacing:2px}
.product-meta strong{color:#444;font-size:10px;line-height:1.5}

/* =========================
   PRODUCT SHOP FIX
========================= */
.product-list{
    display:flex;
    flex-direction:column;

    gap:0;

    margin-top:210px;

    max-height:410px;

    overflow-y:auto;

    padding-right:12px;
}

.product-list::-webkit-scrollbar{
    width:3px;
}

.product-list::-webkit-scrollbar-track{
    background:transparent;
}

.product-list::-webkit-scrollbar-thumb{
    background:#ddd;
}

.product-list::-webkit-scrollbar-thumb:hover{
    background:var(--orange);
}

.product-tab{
    width:100%;

    display:grid;

    grid-template-columns:35px 1fr;

    gap:15px;

    align-items:center;

    flex:none;

    padding:15px 0;

    border:0;

    border-bottom:1px solid var(--border);

    background:none;

    color:#aaa;

    font-family:'Inter',sans-serif;

    text-align:left;

    cursor:pointer;

    transition:
        color .3s ease,
        opacity .3s ease;
}

.product-index{
    color:#aaa;

    font-size:10px;
}

.product-tab-content{
    display:block;
}

.product-tab-content small{
    display:block;

    margin-bottom:5px;

    color:#aaa;

    font-size:9px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;
}

.product-tab-content strong{
    display:block;

    color:inherit;

    font-size:12px;

    font-weight:600;

    line-height:1.45;

    letter-spacing:.5px;
}

.product-tab:hover,
.product-tab.active{
    color:var(--black);
}

.product-tab.active .product-index,
.product-tab.active .product-tab-content small{
    color:var(--orange);
}

/* =========================
   PRODUCT PURCHASE
========================= */

.product-purchase{
    margin-top:30px;

    padding-top:24px;

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:25px;

    border-top:1px solid var(--border);
}

.product-purchase-price small{
    display:block;

    margin-bottom:8px;

    color:#aaa;

    font-size:8px;

    font-weight:700;

    letter-spacing:2px;
}

.product-purchase-price strong{
    display:block;

    color:var(--black);

    font-family:'Archivo Black',sans-serif;

    font-size:26px;

    line-height:1;
}

.product-purchase .add-to-cart{
    flex:none;

    min-width:155px;

    justify-content:space-between;

    padding:15px 18px;

    border:1px solid var(--black);

    background:transparent;

    color:var(--black);

    font-family:'Inter',sans-serif;

    font-size:9px;

    font-weight:800;

    letter-spacing:2px;

    cursor:pointer;

    transition:
        background .3s ease,
        color .3s ease;
}

.product-purchase .add-to-cart span{
    color:var(--orange);
}

.product-purchase .add-to-cart:hover{
    background:var(--black);

    color:#fff;
}

.product-purchase .add-to-cart:disabled{
    opacity:.45;

    cursor:wait;
}

.collections-panel{display:block;overflow:hidden;padding-top:110px}
.collections-header{position:absolute;left:230px;top:115px;z-index:5}
.collections-header h2{margin-top:12px;font-family:'Archivo Black',sans-serif;font-size:clamp(45px,5vw,85px);line-height:.88;letter-spacing:-4px;color:var(--black)}
.collections-stage{position:absolute;left:230px;right:55px;top:280px;bottom:120px}
.collection-slide{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none}
.collection-slide.active{opacity:1;visibility:visible;pointer-events:auto}
.collection-slide img{width:100%;height:100%;object-fit:cover;display:block}
.collection-number{position:absolute;top:20px;left:20px;z-index:4;padding:8px 10px;background:#fff;color:var(--orange);font-size:10px;font-weight:700;letter-spacing:2px;box-shadow:0 4px 18px rgba(0,0,0,.1)}
.collection-caption{position:absolute;left:35px;bottom:30px;z-index:4;padding:20px 25px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);box-shadow:0 10px 35px rgba(0,0,0,.12)}
.collection-caption span{color:var(--orange);font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase}
.collection-caption h3{margin:7px 0 0;font-family:'Archivo Black',sans-serif;font-size:32px;color:var(--black)}
.collection-controls{position:absolute;left:230px;right:55px;bottom:45px;display:flex;align-items:center;justify-content:flex-end;gap:20px}
.collection-controls button{border:0;background:none;color:#999;font-family:'Inter',sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;cursor:pointer}
.collection-controls button:hover{color:var(--orange)}
.collection-counter{color:#aaa;font-size:11px;letter-spacing:2px}
.collection-counter span:first-child{color:var(--orange)}

/* =========================
   FLAVORS
========================= */

.flavors-panel{
    overflow:hidden;
    padding-top:120px;
    padding-bottom:70px;
}

.flavors-watermark{
    position:absolute;
    width:34vw;
    max-width:600px;
    right:10%;
    top:50%;
    transform:translateY(-50%) rotate(8deg);
    opacity:.025;
    pointer-events:none;
    z-index:0;
}

.flavors-layout{
    position:relative;
    z-index:2;

    width:100%;
    height:100%;

    display:grid;
    grid-template-columns:minmax(390px,430px) minmax(0,1fr);
    gap:55px;

    align-items:center;
}


/* =========================
   HEADING
========================= */

.flavors-heading{
    min-width:0;
}

.flavors-heading h2{
    margin-top:18px;

    font-family:'Archivo Black',sans-serif;
    font-size:clamp(46px,4vw,72px);

    line-height:.90;
    letter-spacing:-4px;

    color:var(--black);
}

.flavors-heading h2 span{
    color:var(--orange);
}

.flavors-heading > p{
    margin-top:28px;

    max-width:350px;

    color:var(--gray);

    font-size:14px;
    line-height:1.8;
}


/* =========================
   CAROUSEL CONTROLS
========================= */

.flavor-controls{
    margin-top:38px;

    display:flex;
    align-items:center;

    gap:20px;
}

.flavor-controls button{
    padding:0;

    border:0;
    background:none;

    color:#999;

    font-family:'Inter',sans-serif;
    font-size:10px;
    font-weight:700;

    letter-spacing:2px;

    cursor:pointer;

    transition:.25s ease;
}

.flavor-controls button:hover{
    color:var(--orange);
}

.flavor-counter{
    color:#aaa;

    font-size:10px;
    font-weight:600;

    letter-spacing:2px;
}

.flavor-counter span:first-child{
    color:var(--orange);
}


/* =========================
   FLAVOR STAGE
========================= */

.flavors-stage{
    position:relative;

    width:100%;

    /*
     * Satu baris saja.
     * Ini yang membuat flavor aman
     * di viewport pendek.
     */
    height:clamp(390px,56vh,590px);

    min-width:0;
}


/* setiap halaman carousel */

.flavor-slide{
    position:absolute;
    inset:0;

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:14px;

    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.flavor-slide.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}


/* =========================
   CARD
========================= */

.flavor-card{
    height:100%;

    display:grid;
    grid-template-rows:minmax(0,1fr) auto;

    min-width:0;

    background:#fff;

    border:1px solid var(--border);

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.flavor-card:hover{
    transform:translateY(-7px);

    border-color:#ccc;

    box-shadow:0 22px 45px rgba(0,0,0,.08);
}


/* =========================
   IMAGE
========================= */

.flavor-image{
    min-height:0;

    padding:22px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    background:#faf9f7;
}

.flavor-image img{
    display:block;

    width:100%;
    height:100%;

    max-height:320px;

    object-fit:contain;

    transition:transform .5s ease;
}

.flavor-card:hover .flavor-image img{
    transform:scale(1.06);
}

.flavor-image-empty{
    color:#ddd;

    font-family:'Archivo Black',sans-serif;
    font-size:30px;
}


/* =========================
   CONTENT
========================= */

.flavor-card-content{
    min-height:115px;

    padding:20px;

    border-top:1px solid var(--border);
}

.flavor-card-content h3{
    color:var(--black);

    font-size:11px;
    font-weight:800;

    line-height:1.4;
    letter-spacing:1px;

    text-transform:uppercase;
}

.flavor-card-content p{
    margin-top:9px;

    color:var(--gray);

    font-size:11px;

    line-height:1.6;
}

.flavors-empty{
    color:#aaa;

    font-size:12px;

    letter-spacing:2px;
}

/* =========================
   QUALITY
========================= */

.quality-panel{
    overflow:hidden;
}

.quality-watermark{
    position:absolute;
    width:40vw;
    max-width:680px;
    left:43%;
    top:50%;
    transform:translate(-50%,-50%) rotate(-8deg);
    opacity:.025;
    pointer-events:none;
    z-index:0;
}

.quality-layout{
    position:relative;
    z-index:2;

    width:100%;

    display:grid;
    grid-template-columns:minmax(420px,.9fr) minmax(500px,1.1fr);

    gap:100px;

    align-items:center;
}


/* LEFT */

.quality-heading{
    max-width:650px;
}

.quality-heading h2{
    margin-top:18px;

    font-family:'Archivo Black',sans-serif;

    font-size:clamp(55px,5.5vw,96px);

    line-height:.86;

    letter-spacing:-5px;

    color:var(--black);
}

.quality-heading h2 span{
    color:var(--orange);
}

.quality-heading > p{
    max-width:430px;

    margin-top:30px;

    color:var(--gray);

    font-size:15px;

    line-height:1.8;
}


/* RIGHT */

.quality-list{
    border-top:1px solid var(--border);
}

.quality-item{
    display:grid;

    grid-template-columns:55px 1fr;

    gap:25px;

    padding:25px 0;

    border-bottom:1px solid var(--border);

    transition:
        transform .3s ease,
        padding-left .3s ease;
}

.quality-item:hover{
    transform:translateX(8px);
}

.quality-index{
    color:var(--orange);

    font-size:10px;

    font-weight:700;

    letter-spacing:2px;

    padding-top:5px;
}

.quality-item small{
    display:block;

    margin-bottom:7px;

    color:#aaa;

    font-size:9px;

    font-weight:700;

    letter-spacing:3px;
}

.quality-item h3{
    color:var(--black);

    font-family:'Archivo Black',sans-serif;

    font-size:21px;

    line-height:1.1;

    letter-spacing:-1px;
}

.quality-item p{
    max-width:500px;

    margin-top:9px;

    color:var(--gray);

    font-size:12px;

    line-height:1.7;
}

/* =========================
   DISTRIBUTION
========================= */

.distribution-panel{
    overflow:hidden;
}

.distribution-watermark{
    position:absolute;

    width:38vw;
    max-width:650px;

    right:12%;
    top:50%;

    transform:translateY(-50%) rotate(10deg);

    opacity:.025;

    pointer-events:none;

    z-index:0;
}

.distribution-layout{
    position:relative;

    z-index:2;

    width:100%;

    display:grid;

    grid-template-columns:minmax(420px,.9fr) minmax(520px,1.1fr);

    gap:100px;

    align-items:center;
}


/* =========================
   LEFT
========================= */

.distribution-heading{
    max-width:680px;
}

.distribution-heading h2{
    margin-top:18px;

    font-family:'Archivo Black',sans-serif;

    font-size:clamp(58px,5.7vw,100px);

    line-height:.86;

    letter-spacing:-5px;

    color:var(--black);
}

.distribution-heading h2 span{
    color:var(--orange);
}

.distribution-heading > p{
    max-width:440px;

    margin-top:30px;

    color:var(--gray);

    font-size:15px;

    line-height:1.8;
}


/* =========================
   RIGHT
========================= */

.distribution-content{
    max-width:650px;
}

.distribution-intro > span{
    color:var(--orange);

    font-size:9px;

    font-weight:700;

    letter-spacing:3px;
}

.distribution-intro h3{
    margin-top:10px;

    font-family:'Archivo Black',sans-serif;

    font-size:clamp(32px,3vw,50px);

    line-height:.95;

    letter-spacing:-2px;

    color:var(--black);
}

.distribution-intro p{
    margin-top:18px;

    max-width:500px;

    color:var(--gray);

    font-size:13px;

    line-height:1.8;
}


/* =========================
   REGIONS
========================= */

.distribution-regions{
    margin-top:32px;

    border-top:1px solid var(--border);
}

.distribution-region{
    display:grid;

    grid-template-columns:45px 1fr;

    gap:18px;

    padding:17px 0;

    border-bottom:1px solid var(--border);

    transition:transform .3s ease;
}

.distribution-region:hover{
    transform:translateX(7px);
}

.distribution-region > span{
    color:var(--orange);

    font-size:10px;

    font-weight:700;

    letter-spacing:2px;

    padding-top:2px;
}

.distribution-region strong{
    display:block;

    color:var(--black);

    font-size:11px;

    font-weight:800;

    letter-spacing:2px;
}

.distribution-region small{
    display:block;

    margin-top:6px;

    color:var(--gray);

    font-size:11px;

    line-height:1.5;
}


/* =========================
   CTA
========================= */

.distribution-cta{
    margin-top:32px;

    padding-top:25px;

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:30px;

    border-top:1px solid var(--border);
}

.distribution-cta > div > span{
    display:block;

    margin-bottom:8px;

    color:var(--orange);

    font-size:9px;

    font-weight:700;

    letter-spacing:3px;
}

.distribution-cta strong{
    display:block;

    color:var(--black);

    font-size:12px;

    line-height:1.55;

    letter-spacing:1px;
}

.distribution-button{
    flex:none;

    display:inline-flex;

    align-items:center;

    gap:18px;

    padding:16px 20px;

    border:1px solid #bbb;

    color:var(--black);

    text-decoration:none;

    font-size:9px;

    font-weight:700;

    letter-spacing:2px;

    transition:.3s ease;
}

.distribution-button span{
    color:var(--orange);
}

.distribution-button:hover{
    background:var(--orange);

    border-color:var(--orange);

    color:#fff;
}

.distribution-button:hover span{
    color:#fff;
}

/* =========================
   CONTACT
========================= */

.contact-panel{
    overflow:hidden;
}

.contact-watermark{
    position:absolute;

    width:45vw;
    max-width:760px;

    left:47%;
    top:50%;

    transform:translate(-50%,-50%) rotate(-8deg);

    opacity:.025;

    pointer-events:none;

    z-index:0;
}

.contact-layout{
    position:relative;
    z-index:2;

    width:100%;

    display:grid;

    grid-template-columns:minmax(430px,.95fr) minmax(500px,1.05fr);

    gap:100px;

    align-items:center;
}


/* LEFT */

.contact-heading{
    max-width:720px;
}

.contact-heading h2{
    margin-top:18px;

    font-family:'Archivo Black',sans-serif;

    font-size:clamp(58px,5.8vw,105px);

    line-height:.86;

    letter-spacing:-6px;

    color:var(--black);
}

.contact-heading h2 span{
    color:var(--orange);
}

.contact-heading > p{
    max-width:440px;

    margin-top:30px;

    color:var(--gray);

    font-size:15px;

    line-height:1.8;
}


/* RIGHT */

.contact-content{
    max-width:650px;
}

.contact-block{
    padding:22px 0;

    border-bottom:1px solid var(--border);
}

.contact-block:first-child{
    border-top:1px solid var(--border);
}

.contact-label{
    display:block;

    margin-bottom:10px;

    color:#aaa;

    font-size:9px;

    font-weight:700;

    letter-spacing:3px;
}

.contact-main-link{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

    color:var(--black);

    text-decoration:none;

    font-family:'Archivo Black',sans-serif;

    font-size:clamp(22px,2.1vw,34px);

    line-height:1.2;

    transition:.3s ease;
}

.contact-main-link span{
    color:var(--orange);

    font-family:'Inter',sans-serif;

    font-size:16px;
}

.contact-main-link:hover{
    color:var(--orange);
}


/* SOCIAL */

.contact-socials{
    display:flex;

    flex-wrap:wrap;

    gap:30px;
}

.contact-socials a{
    display:inline-flex;

    gap:10px;

    color:var(--black);

    text-decoration:none;

    font-size:11px;

    font-weight:800;

    letter-spacing:2px;

    transition:.3s ease;
}

.contact-socials a span{
    color:var(--orange);
}

.contact-socials a:hover{
    color:var(--orange);
}


/* CTA */

.contact-cta{
    margin-top:35px;

    padding:28px;

    background:var(--black);

    color:#fff;
}

.contact-cta > span{
    display:block;

    color:var(--orange);

    font-size:9px;

    font-weight:700;

    letter-spacing:3px;
}

.contact-cta h3{
    margin-top:12px;

    font-family:'Archivo Black',sans-serif;

    font-size:clamp(28px,2.8vw,44px);

    line-height:.95;

    letter-spacing:-2px;
}

.contact-button{
    display:inline-flex;

    align-items:center;

    gap:20px;

    margin-top:25px;

    padding:15px 18px;

    border:1px solid rgba(255,255,255,.3);

    color:#fff;

    text-decoration:none;

    font-size:9px;

    font-weight:700;

    letter-spacing:2px;

    transition:.3s ease;
}

.contact-button span{
    color:var(--orange);
}

.contact-button:hover{
    background:var(--orange);

    border-color:var(--orange);
}

.contact-button:hover span{
    color:#fff;
}


/* FOOTER */

.contact-footer{
    position:absolute;

    left:230px;
    right:55px;
    bottom:32px;

    z-index:3;

    padding-top:18px;

    display:flex;

    justify-content:space-between;

    gap:30px;

    border-top:1px solid var(--border);

    color:#aaa;

    font-size:9px;

    font-weight:600;

    letter-spacing:2px;
}

/* =========================
   SECTION TRANSITION
========================= */
.panel{overflow:hidden}
.section-reveal{position:absolute;inset:0;background:var(--orange);transform:scaleX(0);transform-origin:left center;z-index:50;pointer-events:none}
.panel .eyebrow,.panel h2,.panel p,.products-heading,.products-showcase,.collections-header,.collections-stage,.collection-controls{will-change:transform,opacity}
.mobile-reveal{opacity:1;transform:none;}

/* =========================
   CART
========================= */

/* =========================
   CART TRIGGER
========================= */

.cart-trigger{
    position:relative;

    top:auto;
    right:auto;

    z-index:auto;

    flex:none;

    display:flex;
    align-items:center;

    gap:9px;

    margin:0;
    padding:0;

    border:0;
    background:none;

    color:var(--black);

    font-family:'Inter',sans-serif;

    font-size:9px;
    font-weight:800;

    line-height:1;

    letter-spacing:1.7px;

    cursor:pointer;
}

.cart-count{
    min-width:21px;
    height:21px;

    padding:0 6px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:20px;

    background:var(--orange);
    color:#fff;

    font-size:9px;
    letter-spacing:0;
}

.cart-overlay{
    position:fixed;
    inset:0;

    z-index:1998;

    background:rgba(0,0,0,.35);

    opacity:0;
    visibility:hidden;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}

.cart-overlay.active{
    opacity:1;
    visibility:visible;
}

.cart-drawer{
    position:fixed;

    top:0;
    right:0;

    z-index:1999;

    width:min(460px,100%);
    height:100dvh;

    display:flex;
    flex-direction:column;

    background:#fff;

    transform:translateX(100%);

    transition:transform .45s cubic-bezier(.76,0,.24,1);

    box-shadow:-30px 0 70px rgba(0,0,0,.12);
}

.cart-drawer.active{
    transform:translateX(0);
}

.cart-drawer-header{
    flex:none;

    padding:30px;

    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    border-bottom:1px solid var(--border);
}

.cart-drawer-header span{
    color:var(--orange);

    font-size:8px;
    font-weight:700;
    letter-spacing:3px;
}

.cart-drawer-header h3{
    margin-top:5px;

    font-family:'Archivo Black',sans-serif;

    font-size:24px;

    letter-spacing:-1px;
}

.cart-close{
    padding:0;
    border:0;
    background:none;

    color:var(--black);

    font-size:30px;
    font-weight:300;
    line-height:1;

    cursor:pointer;
}

.cart-items{
    flex:1;

    overflow-y:auto;

    padding:0 30px;
}

.cart-empty{
    padding:70px 0;

    color:#aaa;

    text-align:center;

    font-size:10px;
    font-weight:700;
    letter-spacing:2px;
}

.cart-item{
    display:grid;

    grid-template-columns:85px 1fr;

    gap:18px;

    padding:22px 0;

    border-bottom:1px solid var(--border);
}

.cart-item-image{
    width:85px;
    height:100px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    background:#f7f6f3;
}

.cart-item-image img{
    width:100%;
    height:100%;

    padding:8px;

    object-fit:contain;
}

.cart-item-name{
    padding-right:20px;

    color:var(--black);

    font-size:11px;
    font-weight:800;
    line-height:1.4;

    text-transform:uppercase;
}

.cart-item-price{
    margin-top:7px;

    color:var(--gray);

    font-size:11px;
}

.cart-item-bottom{
    margin-top:17px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:15px;
}

.cart-quantity{
    display:flex;
    align-items:center;

    border:1px solid var(--border);
}

.cart-quantity button{
    width:30px;
    height:30px;

    border:0;
    background:none;

    cursor:pointer;
}

.cart-quantity span{
    min-width:30px;

    text-align:center;

    font-size:11px;
    font-weight:700;
}

.cart-remove{
    padding:0;
    border:0;
    background:none;

    color:#aaa;

    font-size:9px;
    font-weight:700;
    letter-spacing:1px;

    cursor:pointer;
}

.cart-remove:hover{
    color:var(--orange);
}

.cart-footer{
    flex:none;

    padding:25px 30px 30px;

    border-top:1px solid var(--border);

    background:#fff;
}

.cart-subtotal{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:20px;
}

.cart-subtotal span{
    color:#888;

    font-size:9px;
    font-weight:700;
    letter-spacing:2px;
}

.cart-subtotal strong{
    color:var(--black);

    font-family:'Archivo Black',sans-serif;

    font-size:20px;
}

.cart-checkout-button{
    width:100%;

    padding:18px 20px;

    display:flex;
    justify-content:space-between;

    border:0;

    background:var(--black);
    color:#fff;

    font-size:10px;
    font-weight:700;
    letter-spacing:2px;

    cursor:pointer;
}

.cart-checkout-button span{
    color:var(--orange);
}

.cart-checkout-button:disabled{
    opacity:.35;
    cursor:not-allowed;
}

/* =========================
   MEMBER AUTH
========================= */

.member-auth-page{
    min-height:100vh;

    padding:60px 24px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:var(--cream);
}

.member-auth-card{
    position:relative;

    width:min(520px,100%);

    padding:45px;

    background:#fff;

    border:1px solid var(--border);
}

.member-auth-card h1{
    margin-top:15px;

    font-family:'Archivo Black',sans-serif;

    font-size:clamp(44px,7vw,72px);

    line-height:.88;

    letter-spacing:-4px;
}

.member-auth-card > p{
    margin-top:22px;

    color:var(--gray);

    font-size:13px;

    line-height:1.7;
}

.member-auth-card form{
    margin-top:35px;
}

.member-field{
    margin-bottom:20px;
}

.member-field label{
    display:block;

    margin-bottom:8px;

    color:#777;

    font-size:9px;
    font-weight:700;
    letter-spacing:2px;
}

.member-field input{
    width:100%;

    padding:14px 0;

    border:0;
    border-bottom:1px solid var(--border);

    outline:none;

    background:transparent;

    color:var(--black);

    font-family:'Inter',sans-serif;

    font-size:14px;
}

.member-field input:focus{
    border-color:var(--orange);
}

.member-field small{
    display:block;

    margin-top:7px;

    color:var(--orange);

    font-size:10px;
}

.member-remember{
    display:flex;

    align-items:center;

    gap:8px;

    color:#777;

    font-size:11px;
}

.member-submit{
    width:100%;

    margin-top:28px;

    padding:17px 20px;

    display:flex;

    align-items:center;
    justify-content:space-between;

    border:0;

    background:var(--black);

    color:#fff;

    font-size:10px;
    font-weight:800;
    letter-spacing:2px;

    cursor:pointer;
}

.member-submit span{
    color:var(--orange);
}

.member-auth-bottom{
    margin-top:25px;

    padding-top:20px;

    border-top:1px solid var(--border);

    color:#777;

    font-size:11px;
}

.member-auth-bottom a{
    margin-left:5px;

    color:var(--orange);

    font-weight:800;

    text-decoration:none;
}

.password-wrapper{
    position:relative;
}

.password-wrapper input{
    padding-right:70px;
}

.password-toggle{
    position:absolute;

    right:0;
    top:50%;

    transform:translateY(-50%);

    padding:8px 0;

    border:0;
    background:none;

    color:var(--orange);

    font-family:'Inter',sans-serif;

    font-size:9px;
    font-weight:800;

    letter-spacing:1.5px;

    cursor:pointer;
}

.password-toggle:hover{
    color:var(--black);
}

/* =========================
   MEMBER NAV
========================= */

.member-nav{
    position:relative;

    display:flex;
    align-items:center;

    flex:none;
}

.member-nav-user{
    display:flex;
    align-items:center;

    gap:18px;
}

.member-nav-link,
.member-nav-name,
.member-logout-button{
    font-family:'Inter',sans-serif;

    font-size:9px;
    font-weight:800;

    letter-spacing:1.7px;

    line-height:1;

    white-space:nowrap;
}

.member-nav-link{
    color:var(--black);

    text-decoration:none;

    transition:color .25s ease;
}

.member-nav-link:hover{
    color:var(--orange);
}

.member-nav-name{
    max-width:130px;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:var(--orange);
}

.member-logout-form{
    margin:0;
    padding:0;

    display:flex;
    align-items:center;
}

.member-logout-button{
    margin:0;
    padding:0;

    border:0;
    background:none;

    color:var(--black);

    font-family:'Inter',sans-serif;

    cursor:pointer;

    transition:color .25s ease;
}

.member-logout-button:hover{
    color:var(--orange);
}

.member-auth-logo{
    display:inline-block;

    margin-bottom:28px;

    text-decoration:none;
}

.member-auth-logo img{
    display:block;

    width:170px;
    height:auto;
}

.member-auth-back{
    display:block;

    width:max-content;

    margin-bottom:28px;

    color:#999;

    font-size:9px;
    font-weight:800;

    letter-spacing:2px;

    text-decoration:none;

    transition:
        color .25s ease,
        transform .25s ease;
}

.member-auth-back:hover{
    color:var(--orange);

    transform:translateX(-3px);
}

/* =========================
   ACCOUNT DROPDOWN
========================= */

.account-menu{
    position:relative;
}

.account-trigger{
    display:flex;
    align-items:center;

    gap:7px;

    padding:0;

    border:0;
    background:none;

    color:var(--black);

    font-family:'Inter',sans-serif;

    font-size:9px;
    font-weight:800;

    line-height:1;

    letter-spacing:1.7px;

    cursor:pointer;

    transition:color .25s ease;
}

.account-trigger span{
    position:relative;

    top:-1px;

    color:var(--orange);

    font-size:11px;

    transition:transform .25s ease;
}

.account-trigger:hover{
    color:var(--orange);
}

.account-menu.open .account-trigger span{
    transform:rotate(180deg);
}

.account-dropdown{
    position:absolute;

    top:calc(100% + 22px);
    right:0;

    width:270px;

    padding:0;

    background:#fff;

    border:1px solid var(--border);

    box-shadow:0 20px 55px rgba(0,0,0,.12);

    opacity:0;
    visibility:hidden;

    transform:translateY(-8px);

    pointer-events:none;

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease;
}

.account-menu.open .account-dropdown{
    opacity:1;
    visibility:visible;

    transform:translateY(0);

    pointer-events:auto;
}

.account-dropdown::before{
    content:"";

    position:absolute;

    top:-6px;
    right:28px;

    width:11px;
    height:11px;

    background:#fff;

    border-top:1px solid var(--border);
    border-left:1px solid var(--border);

    transform:rotate(45deg);
}

.account-dropdown-header{
    padding:24px;

    border-bottom:1px solid var(--border);
}

.account-dropdown-header small{
    display:block;

    margin-bottom:9px;

    color:var(--orange);

    font-size:8px;
    font-weight:800;

    letter-spacing:2.5px;
}

.account-dropdown-header strong{
    display:block;

    overflow:hidden;

    color:var(--black);

    font-family:'Archivo Black',sans-serif;

    font-size:17px;

    line-height:1.15;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.account-dropdown-header span{
    display:block;

    margin-top:10px;

    color:#999;

    font-size:8px;
    font-weight:700;

    letter-spacing:1.5px;
}

.account-dropdown-actions{
    padding:8px 0;
}

.account-dropdown-link,
.account-dropdown-logout{
    width:100%;

    padding:14px 22px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border:0;
    background:none;

    color:var(--black);

    font-family:'Inter',sans-serif;

    font-size:9px;
    font-weight:800;

    letter-spacing:1.5px;

    text-align:left;
    text-decoration:none;

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease;
}

.account-dropdown-link span,
.account-dropdown-logout span{
    color:var(--orange);
}

.account-dropdown-link:hover,
.account-dropdown-logout:hover{
    background:var(--cream);

    color:var(--orange);
}

.account-dropdown-actions form{
    margin:0;
}

/* =========================
   MEMBER ACCOUNT
========================= */

.member-account-page{
    min-height:100vh;

    background:var(--cream);
}

.member-account-topbar{
    height:90px;

    padding:0 55px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border-bottom:1px solid var(--border);

    background:rgba(247,246,243,.94);
}

.member-account-logo{
    display:block;
}

.member-account-logo img{
    display:block;

    width:180px;
    height:auto;
}

.member-account-back{
    color:var(--black);

    font-size:9px;
    font-weight:800;

    letter-spacing:2px;

    text-decoration:none;

    transition:color .25s ease;
}

.member-account-back:hover{
    color:var(--orange);
}

.member-account-container{
    width:min(1280px,100%);

    margin:0 auto;

    padding:90px 55px 100px;

    display:grid;

    grid-template-columns:minmax(320px,.75fr) minmax(500px,1.25fr);

    gap:100px;
}

.member-account-heading{
    position:sticky;

    top:140px;

    height:max-content;
}

.member-account-heading h1{
    margin-top:18px;

    font-family:'Archivo Black',sans-serif;

    font-size:clamp(60px,6vw,105px);

    line-height:.84;

    letter-spacing:-6px;
}

.member-account-heading h1 span{
    color:var(--orange);
}

.member-account-heading p{
    max-width:350px;

    margin-top:30px;

    color:var(--gray);

    font-size:14px;
    line-height:1.8;
}

.member-account-content{
    min-width:0;
}

.member-account-success{
    margin-bottom:20px;

    padding:16px 18px;

    border:1px solid #cce4cc;

    background:#f4fbf4;

    color:#3c763d;

    font-size:11px;
    font-weight:700;

    letter-spacing:.5px;
}

.member-account-card{
    margin-bottom:20px;

    padding:30px;

    border:1px solid var(--border);

    background:#fff;
}

.member-account-card-header{
    display:flex;

    align-items:flex-start;
    justify-content:space-between;

    gap:25px;
}

.member-account-card-header small,
.member-account-section-title small,
.member-account-coming small{
    color:var(--orange);

    font-size:8px;
    font-weight:800;

    letter-spacing:2.5px;
}

.member-account-card-header h2{
    margin-top:8px;

    font-family:'Archivo Black',sans-serif;

    font-size:25px;

    line-height:1.1;

    letter-spacing:-1px;
}

.member-status{
    padding:7px 10px;

    background:var(--orange-soft);

    color:var(--orange);

    font-size:8px;
    font-weight:800;

    letter-spacing:1.5px;
}

.member-account-meta{
    margin-top:30px;

    padding-top:25px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    border-top:1px solid var(--border);
}

.member-account-meta small{
    display:block;

    margin-bottom:8px;

    color:#aaa;

    font-size:8px;
    font-weight:700;

    letter-spacing:2px;
}

.member-account-meta strong{
    display:block;

    overflow-wrap:anywhere;

    color:var(--black);

    font-size:11px;

    line-height:1.5;
}

.member-account-section-title h3,
.member-account-coming h3{
    margin-top:8px;

    font-family:'Archivo Black',sans-serif;

    font-size:25px;

    letter-spacing:-1px;
}

.member-account-form{
    margin-top:30px;
}

.member-field-note{
    display:block;

    margin-top:7px;

    color:#aaa;

    font-size:9px;
}

.member-account-save{
    width:100%;

    margin-top:15px;

    padding:17px 20px;

    display:flex;

    align-items:center;
    justify-content:space-between;

    border:0;

    background:var(--black);

    color:#fff;

    font-family:'Inter',sans-serif;

    font-size:9px;
    font-weight:800;

    letter-spacing:2px;

    cursor:pointer;
}

.member-account-save span{
    color:var(--orange);
}

.member-account-coming{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:30px;
}

.member-account-coming p{
    margin-top:10px;

    color:var(--gray);

    font-size:12px;
}

.member-account-coming > span{
    flex:none;

    color:#aaa;

    font-size:8px;
    font-weight:800;

    letter-spacing:2px;
}

.member-account-logout-form{
    margin-top:35px;
}

.member-account-logout{
    padding:0;

    display:flex;

    align-items:center;

    gap:15px;

    border:0;
    background:none;

    color:#999;

    font-family:'Inter',sans-serif;

    font-size:9px;
    font-weight:800;

    letter-spacing:2px;

    cursor:pointer;
}

.member-account-logout span{
    color:var(--orange);
}

.member-account-logout:hover{
    color:var(--orange);
}

.website-field{
    position:absolute !important;

    width:1px !important;
    height:1px !important;

    overflow:hidden !important;

    opacity:0 !important;

    pointer-events:none !important;

    left:-9999px !important;
}

.member-auth-secondary{
    width:100%;

    margin-top:12px;

    padding:15px 20px;

    border:1px solid var(--border);

    background:#fff;

    color:var(--black);

    font-family:'Inter',sans-serif;

    font-size:9px;
    font-weight:800;

    letter-spacing:2px;

    cursor:pointer;
}

.member-forgot-password{
    margin-top:-5px;
    margin-bottom:20px;

    text-align:right;
}

.member-forgot-password a{
    color:#999;

    font-size:8px;
    font-weight:800;

    letter-spacing:1.5px;

    text-decoration:none;

    transition:color .2s ease;
}

.member-forgot-password a:hover{
    color:var(--orange);
}

@media(max-width:600px){

    .member-auth-page{
        padding:25px 18px;
    }

    .member-auth-card{
        padding:32px 24px;
    }

    .member-auth-logo img{
        width:145px;
    }

    .member-auth-back{
        margin-bottom:24px;
    }
}

@media(max-width:900px){
    
    html{scroll-snap-type:none}
    .topbar{padding:0 24px;height:75px;background:rgba(247,246,243,.92);backdrop-filter:blur(10px)}
    .brand img{width:135px}
    .side-nav{display:none}
    .panel{height:auto;min-height:100vh;padding:110px 24px 80px;scroll-snap-align:none;scroll-snap-stop:normal}
    .section-number{top:90px;right:24px}
    .hero{align-items:flex-start}
    .hero-content{margin-top:70px}
    .hero h1{font-size:16vw;letter-spacing:-4px}
    .hero-art{width:100%;height:45vh;top:auto;bottom:-7%;right:0;opacity:.48}
    .orange-ring{width:80vw;height:80vw;border-width:50px}
    .product-placeholder{height:330px;width:125px}
    .scroll-indicator{right:24px;bottom:25px}
    .products-panel{min-height:auto;padding-top:130px}
    .products-heading{position:relative;left:auto;top:auto}
    .products-heading h2{font-size:13vw;letter-spacing:-3px}
    .products-showcase{display:block;height:auto}
    .product-list{margin-top:45px}
    .product-stage{height:auto;margin-top:50px}
    .product-slide{position:relative;display:none;grid-template-columns:1fr}
    .product-slide.active{display:grid}
    .product-visual{min-height:420px}
    .product-bottle-placeholder{width:160px;height:390px}
    .product-glow{width:300px;height:300px}
    .product-info h3{font-size:13vw}
    .product-meta{grid-template-columns:1fr}
    .collections-panel{display:block;width:100%;max-width:100%;min-height:auto;height:auto;overflow:hidden;padding:130px 20px 70px}
    .collections-header{position:relative;left:auto;top:auto;width:100%;z-index:2}
    .collections-header h2{margin-top:14px;font-size:13vw;line-height:.88;letter-spacing:-3px}
    .collections-stage{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;max-width:100%;height:auto;margin-top:55px;overflow:hidden}
    .collection-slide{position:relative;inset:auto;width:100%;max-width:100%;display:none;opacity:1;visibility:visible;pointer-events:none;overflow:hidden}
    .collection-slide.active{display:block;opacity:1;visibility:visible;pointer-events:auto}
    .collection-slide img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:auto;object-fit:contain;background:#fff}
    .collection-number{top:14px;left:14px;padding:8px 10px;font-size:9px}
    .collection-caption{position:relative;left:auto;bottom:auto;width:100%;padding:24px 20px;background:#fff;backdrop-filter:none;border:1px solid var(--border);box-shadow:none}
    .collection-caption span{display:block;font-size:9px;line-height:1.6;letter-spacing:3px}
    .collection-caption h3{margin-top:10px;font-size:clamp(28px,8vw,42px);line-height:1.05}
    .collection-controls{position:relative;left:auto;right:auto;bottom:auto;width:100%;margin-top:28px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
    .collection-controls button{font-size:9px;letter-spacing:1.5px}
    #collectionPrev{text-align:left}
    #collectionNext{text-align:right}
    .collection-counter{white-space:nowrap;text-align:center}
    .mobile-reveal{opacity:0;transform:translateY(28px);will-change:transform,opacity;}
    .mobile-reveal.is-visible{opacity:1;transform:translateY(0);transition:opacity .65s ease,transform .65s cubic-bezier(.22,.61,.36,1);}
    .section-reveal{display:none}
    .hero-product-image{max-width:88%;max-height:42vh;}
    .about-watermark{
        width:100vw;
        left:50%;
        top:35%;
        opacity:.025;
    }

    .about-layout{
        display:block;
    }

    .about-heading h2{
        font-size:13vw;
        line-height:.88;
        letter-spacing:-3px;
    }

    .about-content{
        margin-top:50px;
        max-width:none;
    }

    .about-lead{
        font-size:18px;
    }

    .about-description{
        font-size:14px;
    }

    .flavors-panel{
        min-height:auto;
        height:auto;

        padding-top:130px;
        padding-bottom:80px;
    }

    .flavors-watermark{
        width:100vw;

        right:-35%;
        top:30%;
    }

    .flavors-layout{
        display:block;
        height:auto;
    }

    .flavors-heading h2{
        font-size:13vw;

        line-height:.88;

        letter-spacing:-3px;
    }

    .flavors-heading > p{
        max-width:none;
    }

    .flavor-controls{
        margin-top:30px;
    }

    .flavors-stage{
        height:auto;

        margin-top:45px;
    }

    .flavor-slide{
        position:relative;

        inset:auto;

        display:none;

        grid-template-columns:1fr;

        gap:12px;

        opacity:1;
        visibility:visible;
    }

    .flavor-slide.active{
        display:grid;
    }

    .flavor-card{
        height:auto;
    }

    .flavor-image{
        height:280px;
    }

    .flavor-card-content{
        min-height:auto;

        padding:18px;
    }

    .quality-panel{
        height:auto;
        min-height:100vh;

        padding-top:130px;
        padding-bottom:80px;
    }

    .quality-watermark{
        width:100vw;

        left:50%;
        top:32%;

        opacity:.025;
    }

    .quality-layout{
        display:block;
    }

    .quality-heading h2{
        font-size:13vw;

        line-height:.88;

        letter-spacing:-3px;
    }

    .quality-heading > p{
        max-width:none;
    }

    .quality-list{
        margin-top:55px;
    }

    .quality-item{
        grid-template-columns:40px 1fr;

        gap:15px;

        padding:22px 0;
    }

    .quality-item h3{
        font-size:18px;
    }

    .distribution-panel{
        min-height:100vh;
        height:auto;

        padding-top:130px;
        padding-bottom:80px;
    }

    .distribution-watermark{
        width:100vw;

        right:-35%;
        top:32%;

        opacity:.025;
    }

    .distribution-layout{
        display:block;
    }

    .distribution-heading h2{
        font-size:13vw;

        line-height:.88;

        letter-spacing:-3px;
    }

    .distribution-heading > p{
        max-width:none;
    }

    .distribution-content{
        max-width:none;

        margin-top:60px;
    }

    .distribution-intro h3{
        font-size:10vw;
    }

    .distribution-region{
        grid-template-columns:38px 1fr;
    }

    .distribution-cta{
        display:block;
    }

    .distribution-button{
        margin-top:25px;
    }

    .contact-panel{
        min-height:100vh;
        height:auto;

        padding-top:130px;
        padding-bottom:130px;
    }

    .contact-watermark{
        width:110vw;

        left:50%;
        top:30%;

        opacity:.025;
    }

    .contact-layout{
        display:block;
    }

    .contact-heading h2{
        font-size:13vw;

        line-height:.88;

        letter-spacing:-3px;
    }

    .contact-heading > p{
        max-width:none;
    }

    .contact-content{
        max-width:none;

        margin-top:55px;
    }

    .contact-main-link{
        font-size:clamp(20px,6vw,28px);
    }

    .contact-socials{
        gap:20px;
    }

    .contact-cta{
        margin-top:35px;
    }

    .contact-footer{
        position:relative;

        left:auto;
        right:auto;
        bottom:auto;

        margin-top:60px;

        display:block;
    }

    .contact-footer span{
        display:block;
    }

    .contact-footer span + span{
        margin-top:10px;
    }

    .cart-drawer{
        width:100%;
    }

    .cart-drawer-header{
        padding:25px 22px;
    }

    .cart-items{
        padding:0 22px;
    }

    .cart-footer{
        padding:22px;
    }

    .add-to-cart{
        padding:12px 14px;
    }

    .product-list{
        max-height:260px;

        overflow-y:auto;

        margin-top:45px;

        padding-right:8px;
    }

    .product-tab{
        padding:14px 0;
    }

    .product-purchase{
        margin-top:28px;

        padding-top:22px;

        align-items:center;
    }

    .product-purchase-price strong{
        font-size:23px;
    }

    .product-purchase .add-to-cart{
        min-width:auto;

        padding:14px 16px;
    }

    .topbar{
        height:75px;

        padding:0 24px;

        background:rgba(247,246,243,.92);

        backdrop-filter:blur(10px);
    }

    .brand img{
        width:135px;
    }

    .topbar-actions{
        gap:16px;
    }

    .member-nav{
        position:relative;
    }

    .cart-trigger{
        position:relative;

        top:auto;
        right:auto;

        font-size:8px;
        letter-spacing:1px;
    }

    .cart-count{
        min-width:18px;
        height:18px;

        padding:0 5px;

        font-size:8px;
    }

    .menu-button{
        font-size:10px;
        letter-spacing:2px;
    }

    .member-nav-name{
        display:none;
    }

    .member-nav-user{
        gap:0;
    }

    .member-nav-link,
    .member-logout-button{
        font-size:8px;
    }

    .account-trigger{
        font-size:8px;
        letter-spacing:1px;
    }

    .account-trigger span{
        font-size:9px;
    }

    .account-dropdown{
        position:fixed;

        top:75px;
        left:16px;
        right:16px;

        width:auto;
    }

    .account-dropdown::before{
        display:none;
    }

    .account-dropdown-header{
        padding:20px;
    }

    .member-account-topbar{
        height:75px;

        padding:0 24px;
    }

    .member-account-logo img{
        width:135px;
    }

    .member-account-back{
        font-size:8px;

        letter-spacing:1px;
    }

    .member-account-container{
        padding:60px 24px 80px;

        display:block;
    }

    .member-account-heading{
        position:relative;

        top:auto;
    }

    .member-account-heading h1{
        font-size:15vw;

        letter-spacing:-4px;
    }

    .member-account-content{
        margin-top:55px;
    }

    .member-account-card{
        padding:24px 20px;
    }

    .member-account-meta{
        grid-template-columns:1fr;

        gap:20px;
    }

    .member-account-coming{
        display:block;
    }

    .member-account-coming > span{
        display:block;

        margin-top:20px;
    }
}

@media(max-width:480px){

    .product-purchase{
        display:block;
    }

    .product-purchase .add-to-cart{
        width:100%;

        margin-top:20px;
    }

}

@media(min-width:901px) and (max-height:800px){

    .flavors-panel{
        padding-top:105px;
        padding-bottom:45px;
    }

    .flavors-layout{
        grid-template-columns:minmax(350px,390px) minmax(0,1fr);
        gap:45px;
    }

    .flavors-heading h2{
        font-size:clamp(42px,3.6vw,62px);
    }

    .flavors-heading > p{
        margin-top:20px;
        font-size:13px;
    }

    .flavor-controls{
        margin-top:25px;
    }

    .flavors-stage{
        height:55vh;
        max-height:500px;
    }

    .flavor-card-content{
        min-height:100px;
        padding:16px;
    }

    .flavor-image{
        padding:15px;
    }

    .quality-layout{
        gap:70px;
    }

    .quality-heading h2{
        font-size:clamp(48px,4.8vw,78px);
    }

    .quality-heading > p{
        margin-top:22px;
        font-size:13px;
    }

    .quality-item{
        padding:18px 0;
    }

    .quality-item h3{
        font-size:18px;
    }

    .quality-item p{
        font-size:11px;
    }

    .distribution-layout{
        gap:70px;
    }

    .distribution-heading h2{
        font-size:clamp(48px,4.8vw,78px);
    }

    .distribution-heading > p{
        margin-top:22px;
        font-size:13px;
    }

    .distribution-intro h3{
        font-size:34px;
    }

    .distribution-intro p{
        margin-top:12px;
    }

    .distribution-regions{
        margin-top:20px;
    }

    .distribution-region{
        padding:12px 0;
    }

    .distribution-cta{
        margin-top:20px;
        padding-top:18px;
    }

    .contact-layout{
        gap:70px;
    }

    .contact-heading h2{
        font-size:clamp(48px,4.8vw,80px);
    }

    .contact-heading > p{
        margin-top:20px;
        font-size:13px;
    }

    .contact-block{
        padding:14px 0;
    }

    .contact-main-link{
        font-size:24px;
    }

    .contact-cta{
        margin-top:22px;
        padding:20px;
    }

    .contact-cta h3{
        font-size:30px;
    }

    .contact-button{
        margin-top:18px;
    }

    .contact-footer{
        bottom:20px;
    }
}

@media(min-width:901px){.brand{position:relative;left:-25px}}

@media(min-width:901px) and (max-height:800px){
    .products-heading h2{font-size:clamp(40px,4.4vw,70px);}
    .product-stage{height:60vh;margin-top:85px;}
    .product-visual img{height:52vh;}
    .product-info h3{font-size:clamp(38px,3.8vw,62px);}
}

@media(max-width:480px){

    .flavors-showcase{
        grid-template-columns:1fr;
    }

    .flavor-image{
        height:260px;
    }

}