@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root {
    --navy-950: #020d1d;
    --navy-900: #061b34;
    --navy-850: #0a2748;
    --navy-800: #0c3156;
    --aqua-500: #69d7ff;
    --aqua-300: #b7ecff;
    --blue-600: #1578dd;
    --cyan-100: #edfaff;
    --surface: #f5f9fc;
    --surface-2: #eaf5fb;
    --ink: #071a30;
    --ink-soft: #5d7085;
    --line: rgba(7, 26, 48, .12);
    --white-line: rgba(255,255,255,.14);
    --display: "Manrope", sans-serif;
    --body: "DM Sans", sans-serif;
    --ease: cubic-bezier(.22,1,.36,1);
    --shadow-soft: 0 24px 70px rgba(4, 31, 58, .12);
    --shadow-deep: 0 28px 90px rgba(1, 17, 35, .28);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--navy-950); }
body {
    font-family: var(--body);
    color: var(--ink);
    background: var(--surface);
    overflow-x: hidden;
}
body.menu-open, body.order-open { overflow: hidden; }
button, input, textarea { font: inherit; }
button { border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img, video { display: block; width: 100%; }
img { max-width: 100%; }
section { position: relative; overflow: hidden; }
.site-shell { position: relative; min-height: 100vh; }
.section-shell { width: min(1240px, calc(100% - 48px)); margin: 0 auto; }

/* ---------------------------------------------------------
   LOADER
--------------------------------------------------------- */
.page-loader {
    position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
    background: radial-gradient(circle at 50% 40%, #0a2d4e 0, var(--navy-950) 55%, #010711 100%);
    color: white; opacity: 1; visibility: visible;
    transition: opacity .8s var(--ease), visibility .8s;
}
.page-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.loader-ripple, .loader-ripple::before, .loader-ripple::after {
    position: absolute; top: 50%; left: 50%; border-radius: 50%; border: 1px solid rgba(105,215,255,.18); content: ""; transform: translate(-50%,-50%);
}
.loader-ripple { width: 140px; height: 140px; animation: ripple 2.6s ease-out infinite; }
.loader-ripple::before { width: 90px; height: 90px; }
.loader-ripple::after { width: 45px; height: 45px; }
.loader-logo {
    width: 150px;
    height: 150px;
    display: grid;
    place-items: center;
    animation: float 2.2s ease-in-out infinite;
}
.loader-logo-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    /* Blend the white image background into the loader's navy background,
       while keeping the MENCC droplet mark visibly black. */
    mix-blend-mode: multiply;
    opacity: .96;
    filter: drop-shadow(0 12px 26px rgba(105,215,255,.12));
}
.loader-line { width: 90px; height: 1px; background: rgba(255,255,255,.15); overflow: hidden; }
.loader-line span { display: block; width: 45%; height: 100%; background: var(--aqua-500); animation: loadline 1.5s var(--ease) infinite; }
.loader-tagline { font-size: 9px; letter-spacing: .24em; color: rgba(255,255,255,.55); }
@keyframes ripple { 0% { opacity: .15; transform: translate(-50%,-50%) scale(.65); } 70% { opacity: .55; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.35); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes loadline { 0% { transform: translateX(-120%); } 50% { transform: translateX(120%); } 100% { transform: translateX(120%); } }

/* ---------------------------------------------------------
   NAVIGATION
--------------------------------------------------------- */
.site-header {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    z-index: 1000;
    color: var(--navy-950);
    background: #ffffff;
    border-bottom: 1px solid rgba(7, 26, 48, 0.08);
    box-shadow: 0 4px 18px rgba(7, 26, 48, 0.04);
}
.site-header.scrolled {
    background: #ffffff;
    border-bottom: 1px solid rgba(7, 26, 48, 0.08);
    box-shadow: 0 4px 18px rgba(7, 26, 48, 0.04);
}
.navbar { width: min(1440px, calc(100% - 44px)); height: 84px; margin: 0 auto; display: flex; align-items: center; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-mark { width: 35px; color: var(--navy-950); }
.brand-mark svg { display: block; width: 100%; height: auto; }
.brand-copy { display: flex; flex-direction: column; gap: 1px; }
.brand-copy strong { font-family: var(--display); font-size: 20px; font-weight: 800; letter-spacing: .08em; line-height: 1; }
.brand-copy small { font-size: 7px; font-weight: 700; letter-spacing: .23em; opacity: .68; }
.nav-links { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.nav-links a { position: relative; font-size: 11px; text-transform: uppercase; letter-spacing: .15em; color: rgba(7,26,48,.68); transition: color .25s ease; }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-8px; width:100%; height:1px; background: var(--aqua-500); transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease); }
.nav-links a:hover { color: var(--navy-950); }
.nav-links a:hover::after { transform:scaleX(1); transform-origin:left; }
.nav-actions { display:flex; align-items:center; gap:12px; }
.nav-status { font-size: 9px; text-transform: uppercase; letter-spacing: .16em; color: rgba(255,255,255,.58); display:flex; align-items:center; gap:8px; }
.nav-status i { width:6px; height:6px; border-radius:50%; background:var(--aqua-500); box-shadow:0 0 12px rgba(105,215,255,.9); }
.nav-order-button {
    min-height: 44px;
    padding: 0 19px;

    border: 1px solid var(--aqua-500);
    border-radius: 999px;

    background: var(--aqua-300);
    color: var(--navy-950);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;

    cursor: pointer;

    box-shadow:
        0 8px 24px rgba(105, 215, 255, .22);

    transition:
        transform .35s var(--ease),
        background .35s ease,
        box-shadow .35s ease,
        color .35s ease;
}
.nav-order-button:hover {
    transform: translateY(-2px);
    background: #ffffff;
    color: var(--navy-950);
    box-shadow:
        0 14px 34px rgba(105, 215, 255, .30);
}

.nav-order-button:active {
    transform: translateY(0) scale(.97);
}
.nav-order-button:hover {
    transform: translateY(-2px);
    background: #ffffff;
    color: var(--navy-950);
    box-shadow:
        0 14px 34px rgba(105, 215, 255, .30);
}

.nav-order-button:active {
    transform: translateY(0) scale(.97);
}
.menu-toggle {
    display: none;
    position: relative;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(7, 26, 48, 0.14);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    color: var(--navy-950);
    cursor: pointer;
    overflow: hidden;
    transition:
        transform .45s cubic-bezier(.16, 1, .3, 1),
        background .35s ease,
        border-color .35s ease,
        box-shadow .45s ease;
}

.menu-toggle:hover {
    transform: scale(1.05);
    border-color: rgba(21, 120, 221, 0.28);
    box-shadow: 0 10px 30px rgba(7, 26, 48, 0.10);
}

.menu-toggle span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 1.5px;
    margin: 0;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
    transition:
        transform .55s cubic-bezier(.16, 1, .3, 1),
        opacity .25s ease,
        width .45s cubic-bezier(.16, 1, .3, 1);
}

.menu-toggle span:first-child {
    transform: translate(-50%, -4px);
}

.menu-toggle span:last-child {
    transform: translate(-50%, 4px);
}
.menu-toggle[aria-expanded="true"] {
    background: var(--navy-950);
    color: white;
    border-color: rgba(255, 255, 255, 0.12);
    transform: rotate(90deg);
}

.menu-toggle[aria-expanded="true"]:hover {
    transform: rotate(90deg) scale(1.05);
}

.menu-toggle[aria-expanded="true"] span:first-child {
    transform: translate(-50%, 0) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:last-child {
    transform: translate(-50%, 0) rotate(-45deg);
}
/* ---------------------------------------------------------
   COMMON TYPOGRAPHY / BUTTONS
--------------------------------------------------------- */
.section-kicker { color: var(--blue-600); font-size: 10px; font-weight: 800; letter-spacing:.22em; text-transform:uppercase; }
.section-kicker.light-kicker { color: rgba(255,255,255,.72); }
.section-top { display:flex; align-items:end; justify-content:space-between; gap:32px; margin-bottom:72px; }
.section-top h2, .intro-copy h2, .source-content h2, .factory-copy h2, .distribution-copy h2, .order-callout h2, .final-content h2 { font-family:var(--display); font-weight:800; letter-spacing:-.06em; line-height:.95; }
.section-top h2 { margin-top:16px; font-size:clamp(48px, 7vw, 92px); }
.section-top h2 span, .intro-copy h2 em, .source-content h2 span, .factory-copy h2 span, .distribution-copy h2 span, .order-callout h2 span, .final-content h2 span { color:var(--blue-600); font-style:normal; }
.section-top.light h2 span { color:var(--aqua-300); }
.section-intro { max-width: 280px; margin-bottom: 8px; color:var(--ink-soft); font-size:14px; line-height:1.65; }
.section-top.light .section-intro { color: rgba(255,255,255,.55); }
.button { min-height:54px; padding:0 23px; display:inline-flex; align-items:center; justify-content:center; gap:14px; border-radius:999px; font-size:10px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; transition:transform .35s var(--ease), box-shadow .35s ease, background .35s ease, color .35s ease, border-color .35s ease; }
.button span { font-size:16px; transition:transform .35s var(--ease); }
.button:hover { transform:translateY(-3px); }
.button:hover span { transform:translateX(4px) translateY(-1px); }
.button-primary { color:var(--navy-950); background:var(--aqua-300); box-shadow:0 16px 35px rgba(105,215,255,.18); }
.button-primary:hover { box-shadow:0 22px 48px rgba(105,215,255,.28); }
.button-ghost { color:white; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.06); backdrop-filter:blur(8px); }
.button-outline-light { color:white; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.04); }
.button-light { color:var(--navy-950); background:white; box-shadow:0 18px 40px rgba(0,0,0,.13); }
.text-link { display:inline-flex; align-items:center; gap:9px; color:var(--blue-600); font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.text-link span { transition:transform .3s var(--ease); }
.text-link:hover span { transform:translateX(5px); }

/* ---------------------------------------------------------
   MENCC — BRAND OPENING
   Editorial introduction before the hero artwork.
   --------------------------------------------------------- */

.brand-opening {
    background: var(--surface);
    padding: clamp(76px, 9vw, 132px) 0 clamp(58px, 7vw, 92px);
    border-bottom: 1px solid var(--line);
}

.brand-opening-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.brand-opening-copy {
    max-width: 980px;
}

.brand-opening-copy h1 {
    margin-top: 15px;
    font-family: var(--display);
    font-size: clamp(54px, 8vw, 118px);
    font-weight: 800;
    letter-spacing: -.075em;
    line-height: .91;
    color: var(--ink);
}

.brand-opening-copy h1 span {
    display: block;
    color: var(--blue-600);
}

.brand-opening-lead {
    margin-top: clamp(28px, 4vw, 44px);
    max-width: 720px;
    font-family: var(--display);
    font-size: clamp(22px, 2.5vw, 34px);
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: -.035em;
    color: var(--ink);
}

.brand-opening-body {
    margin-top: 22px;
    max-width: 760px;
    color: var(--ink-soft);
    font-size: clamp(15px, 1.45vw, 18px);
    line-height: 1.78;
}

.brand-opening-signoff {
    margin-top: 27px;
    color: var(--blue-600);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------
   MENCC — OPENING COLLECTION SHOWCASE
   Complete collection image + first conversion moment.
   --------------------------------------------------------- */

.opening-collection-showcase {
    padding: clamp(54px, 6vw, 86px) 0 clamp(72px, 8vw, 112px);
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, .7fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
    background: var(--surface);
}

.opening-collection-image {
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
}

.opening-collection-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.opening-collection-copy {
    max-width: 420px;
}

.opening-collection-copy h2 {
    margin-top: 16px;
    font-family: var(--display);
    font-size: clamp(38px, 4.7vw, 68px);
    font-weight: 800;
    letter-spacing: -.065em;
    line-height: .96;
}

.opening-collection-copy h2 span {
    color: var(--blue-600);
}

.opening-collection-copy > p:not(.section-kicker) {
    margin-top: 22px;
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.75;
}

.opening-collection-copy .button {
    margin-top: 30px;
}

/* The first CTA now sits beneath the collection presentation. */
.hero-cta-strip {
    display: none !important;
}

/* ---------------------------------------------------------
   HERO — RESPONSIVE ARTWORK SYSTEM
--------------------------------------------------------- */

.hero {
    position: relative;
    min-height: auto;
    height: auto;
    width: 100%;
    color: var(--ink);
    background: #ffffff;
    isolation: isolate;
    display: block;
    overflow: hidden;
}

/* The artwork is now part of the page flow.
   It is NOT a fullscreen background anymore. */
.hero-media {
    position: relative;
    inset: auto;
    z-index: 1;
    width: 100%;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* IMPORTANT:
   Never force this image to fill a viewport.
   Let its natural 3:2 ratio control its height. */
.hero-image {
    display: block;
    width: min(100%, 2400px);
    height: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    transform: none !important;
    animation: none !important;
}

/* The artwork already contains its own visual treatment.
   Don't put another dark gradient over it. */
.hero-shade,
.hero-grain,
.hero-watermark,
.hero-ripple {
    display: none !important;
}

/* The original HTML hero copy is no longer placed
   over the artwork. */
.hero-content {
    display: none;
}

/* Keep the existing bottom navigation out of the artwork. */
.hero-bottom {
    display: none;
}

/* Optional clean CTA area underneath the artwork */
.hero-cta-strip {
    width: min(100% - 30px, 900px);
    margin: 0 auto;
    padding: 28px 0 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: #ffffff;
}

.hero-cta-strip .button {
    min-width: 180px;
}
/* ---------------------------------------------------------
   INTRO
--------------------------------------------------------- */
.intro-section { padding:150px 0 120px; background:var(--surface); }
.intro-grid { display:grid; grid-template-columns: 1fr minmax(0, 1.65fr) 230px; gap:48px; align-items:end; }
.section-marker { font-size:10px; font-weight:800; letter-spacing:.2em; color:var(--blue-600); text-transform:uppercase; }
.section-marker span { display:block; margin-top:8px; color:var(--ink-soft); font-weight:600; }
.intro-copy h2 { margin-top:16px; font-size:clamp(48px, 7vw, 92px); }
.intro-copy .lead { margin-top:24px; max-width:640px; font-size:18px; line-height:1.75; color:var(--ink-soft); }
.intro-copy .text-link { margin-top:28px; }
.intro-stamp { justify-self:end; width:180px; height:180px; border:1px solid var(--line); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; transform:rotate(-5deg); background:rgba(255,255,255,.6); box-shadow:var(--shadow-soft); }
.stamp-ring { width:76px; height:76px; border:1px solid rgba(21,120,221,.28); border-radius:50%; display:grid; place-items:center; color:var(--blue-600); font-size:10px; font-weight:800; letter-spacing:.16em; }
.intro-stamp strong { margin-top:11px; font-family:var(--display); font-size:13px; letter-spacing:.1em; }
.intro-stamp small { margin-top:3px; font-size:7px; letter-spacing:.18em; color:var(--ink-soft); }
.intro-values { margin-top:105px; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.value-card { padding:42px 32px 35px; border-right:1px solid var(--line); }
.value-card:last-child { border-right:0; }
.value-card > span { font-size:10px; color:var(--blue-600); letter-spacing:.2em; font-weight:800; }
.value-card h3 { margin-top:34px; font-family:var(--display); font-size:28px; letter-spacing:-.035em; }
.value-card p { margin-top:12px; max-width:320px; color:var(--ink-soft); line-height:1.7; font-size:14px; }

/* ---------------------------------------------------------
   SOURCE
--------------------------------------------------------- */
/* ---------------------------------------------------------
   SOURCE
--------------------------------------------------------- */

.source-section {
    display: flex;
    flex-direction: column;
    color: white;
    background: var(--navy-900);
}

.source-media {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
}

.source-media img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    transform: none !important;
    transition: none;
}
.source-section:hover .source-media img { transform:scale(1.035); }
.source-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55) 100%); }
.image-caption { position:absolute; left:34px; bottom:28px; z-index:2; display:flex; align-items:center; gap:15px; font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.72); }
.image-caption span { color:var(--aqua-300); }
.source-content {
    width: min(100% - 30px, 1100px);
    margin: 0 auto;
    padding: 90px 0 100px;
}
.source-content h2 { margin-top:16px; font-size:clamp(46px, 6vw, 76px); }
.source-content .lead { margin-top:28px; max-width:500px; color:rgba(255,255,255,.64); font-size:16px; line-height:1.8; }
.source-highlights { margin-top:44px; display:grid; gap:14px; }
.source-highlights > div { display:grid; grid-template-columns:40px 1fr; column-gap:14px; padding:18px 0; border-top:1px solid var(--white-line); }
.source-highlights span { color:var(--aqua-300); font-size:9px; font-weight:800; letter-spacing:.16em; }
.source-highlights strong { font-family:var(--display); font-size:14px; }
.source-highlights small { grid-column:2; margin-top:5px; color:rgba(255,255,255,.48); font-size:11px; line-height:1.5; }
.source-content .button { margin-top:26px; }

/* ---------------------------------------------------------
   COLLECTION
--------------------------------------------------------- */
.collection-section { padding:145px 0 120px; background:var(--surface); }
.product-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:18px; }
.product-card { position:relative; background:white; border:1px solid var(--line); box-shadow:0 10px 50px rgba(4,31,58,.06); overflow:hidden; }
.product-card-tall, .product-card-sachet, .product-card-featured, .product-card-wide { grid-column:span 3; }
.product-card-featured { transform:translateY(48px); }
.product-card-sachet { transform:none; }
.product-card-wide { grid-column:span 3; }
.product-image { position:relative; aspect-ratio: 4/5; overflow:hidden; background:var(--surface-2); }
.product-card-wide .product-image { aspect-ratio:5/4; }
.product-image img { height:100%; object-fit:cover; transition:transform 1s var(--ease); }
/* ---------------------------------------------------------
   50CL PRODUCT ARTWORK — SHOW THE COMPLETE ORIGINAL IMAGE
--------------------------------------------------------- */

.product-card-tall .product-image {
    aspect-ratio: 3 / 2;
    height: auto;
    overflow: hidden;
    background: #000;
}
/* ---------------------------------------------------------
   75CL PRODUCT ARTWORK — SHOW COMPLETE ORIGINAL IMAGE
--------------------------------------------------------- */

.product-card-featured .product-image {
    aspect-ratio: 3 / 2;
    height: auto;
    overflow: hidden;
    background: #000;
}
/* ---------------------------------------------------------
   19L PRODUCT ARTWORK — SHOW COMPLETE ORIGINAL IMAGE
--------------------------------------------------------- */

.product-card-wide .product-image {
    aspect-ratio: 3 / 2;
    height: auto;
    overflow: hidden;
    background: #000;
}

/* ---------------------------------------------------------
   SACHET PRODUCT ARTWORK — SHOW THE COMPLETE BAG
--------------------------------------------------------- */

.product-card-sachet .product-image {
    aspect-ratio: 3 / 2;
    height: auto;
    overflow: hidden;
    background: #fff;
}

.product-card-sachet .product-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    transform: none !important;
    transition: none;
}

.product-card-sachet:hover .product-image img {
    transform: none !important;
}

.sachet-tag {
    background: var(--aqua-300);
    color: #03111f;
}

.product-card-wide .product-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    transform: none !important;
    transition: none;
}

.product-card-featured .product-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    transform: none !important;
    transition: none;
}
.product-card-tall .product-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    transform: none !important;
    transition: none;
}

.product-card-tall .product-image::after {
    display: none;
}
.product-card:hover .product-image img { transform:scale(1.055); }
.product-card-wide:hover .product-image img {
    transform: none !important;
}
.product-image::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.02) 45%, rgba(0,10,22,.42) 100%); pointer-events:none; }
.image-tag { position:absolute; left:15px; top:15px; z-index:2; padding:8px 10px; background:rgba(255,255,255,.88); color:var(--ink); border-radius:999px; font-size:8px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; backdrop-filter:blur(8px); }
.image-tag.featured { color:var(--navy-950); background:var(--aqua-300); }
.product-card-body { padding:26px 25px 28px; }
.product-index { display:block; color:var(--blue-600); font-size:9px; font-weight:800; letter-spacing:.18em; }
.product-card h3 { margin-top:16px; font-family:var(--display); font-size:29px; letter-spacing:-.045em; }
.product-card p { margin-top:11px; min-height:50px; color:var(--ink-soft); font-size:13px; line-height:1.65; }
.product-button { margin-top:21px; display:inline-flex; align-items:center; gap:9px; color:var(--blue-600); background:transparent; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.16em; }
.product-button span { transition:transform .3s var(--ease); }
.product-button:hover span { transform:translateX(5px); }
.collection-feature { margin-top:105px; display:grid; grid-template-columns:.85fr 1.15fr; min-height:420px; background:var(--navy-900); color:white; box-shadow:var(--shadow-deep); }
.collection-feature-copy { align-self:center; padding:58px; }
.collection-feature-copy .section-kicker { color:var(--aqua-300); }
.collection-feature-copy h3 { margin-top:14px; max-width:440px; font-family:var(--display); font-size:clamp(36px, 4vw, 58px); letter-spacing:-.05em; line-height:.98; }
.collection-feature-copy p { max-width:430px; margin-top:18px; color:rgba(255,255,255,.62); line-height:1.7; font-size:14px; }
.collection-feature-copy .text-link { margin-top:28px; color:var(--aqua-300); }
.collection-feature-image { overflow:hidden; }
.collection-feature-image img { height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.collection-feature:hover .collection-feature-image img { transform:scale(1.035); }
.collection-strip { margin-top:18px; display:grid; grid-template-columns:220px 1fr; align-items:center; gap:25px; padding:18px; background:white; border:1px solid var(--line); }
.collection-strip-image { height:145px; overflow:hidden; }
.collection-strip-image img { height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.collection-strip:hover .collection-strip-image img { transform:scale(1.04); }
.collection-strip strong { display:block; margin-top:8px; font-family:var(--display); font-size:25px; letter-spacing:-.035em; }
.collection-strip p { margin-top:8px; color:var(--ink-soft); font-size:13px; line-height:1.6; }

/* ---------------------------------------------------------
   JOURNEY
--------------------------------------------------------- */
.journey-section { min-height:780px; padding:135px 0 110px; color:white; background:var(--navy-950); }
.journey-backdrop { position:absolute; inset:0; }
.journey-backdrop img { width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.78); }
.journey-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(2,13,29,.95),rgba(2,13,29,.72) 55%,rgba(2,13,29,.52)),linear-gradient(180deg,rgba(2,13,29,.18),rgba(2,13,29,.9)); }
.journey-inner { position:relative; z-index:2; }
.journey-track { position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:85px; }
.journey-line { position:absolute; left:5%; right:5%; top:14px; height:1px; background:rgba(183,236,255,.2); overflow:hidden; }
.journey-line span { display:block; width:20%; height:100%; background:var(--aqua-500); box-shadow:0 0 16px rgba(105,215,255,.7); animation:journeyLine 4s ease-in-out infinite; }
.journey-step { position:relative; padding:50px 24px 0 0; border-right:1px solid rgba(255,255,255,.08); min-height:185px; }
.journey-step:not(:first-of-type) { padding-left:25px; }
.journey-step:last-child { border-right:0; }
.journey-step::before { content:""; position:absolute; top:7px; left:0; width:15px; height:15px; border-radius:50%; background:var(--navy-900); border:1px solid var(--aqua-500); box-shadow:0 0 18px rgba(105,215,255,.22); }
.journey-step span { color:var(--aqua-300); font-size:9px; font-weight:800; letter-spacing:.18em; }
.journey-step h3 { margin-top:13px; font-family:var(--display); font-size:24px; letter-spacing:-.035em; }
.journey-step p { margin-top:10px; color:rgba(255,255,255,.52); font-size:12px; line-height:1.6; max-width:170px; }
@keyframes journeyLine { 0%,100%{transform:translateX(-100%)} 45%,60%{transform:translateX(500%)} }

/* ---------------------------------------------------------
   FACTORY
--------------------------------------------------------- */
.factory-section {
    display: block;
    background: #061522;
    color: white;
}
.factory-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 0;
    background: #051120;
    overflow: hidden;
}
.factory-video-element {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #051120;
}
.factory-video-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(2,13,29,.08),rgba(2,13,29,.75)),linear-gradient(90deg,rgba(2,13,29,.18),transparent 60%); pointer-events:none; }
.video-toggle { position:absolute; top:28px; right:28px; z-index:2; width:54px; height:54px; border:1px solid rgba(255,255,255,.35); border-radius:50%; background:rgba(5,20,36,.38); color:white; backdrop-filter:blur(12px); }
.video-toggle span { font-size:13px; }
.video-caption { position:absolute; left:38px; bottom:34px; z-index:2; display:flex; flex-direction:column; gap:8px; }
.video-caption span { font-size:9px; text-transform:uppercase; letter-spacing:.18em; color:var(--aqua-300); }
.video-caption strong { font-family:var(--display); font-size:clamp(30px,4vw,52px); letter-spacing:-.05em; }
.factory-copy {
    width: min(100% - 40px, 1100px);
    margin: 0 auto;
    padding: 70px 0 85px;
}
.factory-copy h2 { margin-top:16px; font-size:clamp(46px,6vw,72px); }
.factory-copy .lead { margin-top:26px; max-width:460px; color:rgba(255,255,255,.62); line-height:1.8; }
.factory-note { margin-top:36px; display:flex; align-items:flex-start; gap:14px; max-width:440px; padding:18px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.035); }
.pulse-dot { width:9px; height:9px; border-radius:50%; background:var(--aqua-500); box-shadow:0 0 15px rgba(105,215,255,.8); animation:dotPulse 1.8s ease-in-out infinite; margin-top:5px; }
.factory-note strong { display:block; font-family:var(--display); font-size:14px; }
.factory-note small { display:block; margin-top:5px; color:rgba(255,255,255,.46); font-size:11px; line-height:1.45; }
@keyframes dotPulse { 0%,100%{transform:scale(.82);opacity:.65} 50%{transform:scale(1.25);opacity:1} }

/* ---------------------------------------------------------
   EXPERIENCE
--------------------------------------------------------- */
.experience-section { padding:145px 0 125px; background:var(--surface); }
.experience-grid { display:grid; grid-template-columns:1.1fr .9fr; grid-template-rows:repeat(2,310px); gap:18px; }
.experience-card { position:relative; overflow:hidden; background:#dcecf4; }
.experience-large { grid-row:1 / 3; }
.experience-card img { width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.experience-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(2,13,29,.78)); }
.experience-card:hover img { transform:scale(1.05); }
.experience-card-content { position:absolute; left:26px; right:26px; bottom:26px; z-index:2; color:white; }
.experience-card-content span { color:var(--aqua-300); font-size:8px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.experience-card-content h3 { margin-top:7px; font-family:var(--display); font-size:clamp(26px,3vw,40px); letter-spacing:-.04em; }

/* ---------------------------------------------------------
   DISTRIBUTION
--------------------------------------------------------- */
.distribution-section { display:grid; grid-template-columns:1.1fr .9fr; background:var(--navy-800); color:white; }
.distribution-media { position:relative; min-height:720px; overflow:hidden; }
.distribution-media img { height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.distribution-section:hover .distribution-media img { transform:scale(1.035); }
.distribution-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(2,13,29,.08),rgba(2,13,29,.75)); }
.distribution-badge { position:absolute; left:34px; top:34px; z-index:2; padding:16px 17px; border:1px solid rgba(255,255,255,.16); background:rgba(4,22,41,.28); backdrop-filter:blur(10px); }
.distribution-badge span { display:block; color:var(--aqua-300); font-size:8px; font-weight:800; letter-spacing:.18em; }
.distribution-badge strong { display:block; margin-top:7px; font-family:var(--display); font-size:14px; line-height:1.05; letter-spacing:-.02em; }
.distribution-copy { align-self:center; padding:88px; }
.distribution-copy h2 { margin-top:15px; font-size:clamp(46px,6vw,74px); }
.distribution-copy .lead { margin-top:26px; max-width:460px; color:rgba(255,255,255,.64); line-height:1.8; }
.distribution-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }
.distribution-list span { padding:9px 12px; border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.6); font-size:8px; text-transform:uppercase; letter-spacing:.15em; }
.distribution-copy .button { margin-top:28px; }

/* ---------------------------------------------------------
   ORDER CTA / FOOTER
--------------------------------------------------------- */
.order-section { padding:125px 0; background:var(--surface-2); }
.order-section::before { content:""; position:absolute; inset:auto -20% -55% -20%; height:520px; background:radial-gradient(ellipse at center,rgba(105,215,255,.22),transparent 68%); filter:blur(20px); }
.order-pulse { position:absolute; width:520px; height:520px; border-radius:50%; border:1px solid rgba(21,120,221,.1); right:-190px; bottom:-250px; animation:ring 10s ease-in-out infinite; }
.order-callout { position:relative; z-index:2; display:flex; align-items:end; justify-content:space-between; gap:40px; padding:66px; border:1px solid rgba(7,26,48,.08); background:white; box-shadow:var(--shadow-soft); }
.order-callout h2 { margin-top:14px; font-size:clamp(50px,7vw,90px); }
.order-callout p { max-width:620px; margin-top:18px; color:var(--ink-soft); line-height:1.7; font-size:15px; }
.final-section { min-height:620px; padding:110px 0 28px; color:white; background:linear-gradient(160deg,#0a3259,#041321 55%,#02101d); overflow:hidden; }
.final-water { position:absolute; width:760px; height:760px; right:-230px; top:-240px; border-radius:50%; background:radial-gradient(circle at 50% 50%,rgba(105,215,255,.14),transparent 60%); filter:blur(6px); }
.final-content { position:relative; z-index:2; min-height:480px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.final-brand-lockup { display:flex; flex-direction:column; }
.final-brand-lockup span { font-family:var(--display); font-size:13px; font-weight:800; letter-spacing:.28em; }
.final-brand-lockup small { margin-top:4px; font-size:7px; letter-spacing:.25em; color:rgba(255,255,255,.58); }
.final-content .section-kicker { margin-top:34px; }
.final-content h2 { margin-top:15px; font-size:clamp(52px,8vw,110px); }
.final-content h2 span { color:var(--aqua-300); }
.final-content .button { margin-top:34px; }
.site-footer { position:relative; z-index:2; display:flex; justify-content:space-between; gap:20px; padding-top:25px; border-top:1px solid rgba(255,255,255,.09); color:rgba(255,255,255,.42); font-size:9px; text-transform:uppercase; letter-spacing:.15em; }

/* ---------------------------------------------------------
   MOBILE NAV
--------------------------------------------------------- */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 990;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    color: white;
    overflow: hidden;
    transition:
        opacity .5s cubic-bezier(.16, 1, .3, 1),
        visibility 0s linear .5s;
}

.mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity .5s cubic-bezier(.16, 1, .3, 1),
        visibility 0s linear 0s;
}

.mobile-menu-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(105, 215, 255, 0.16),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #061522 0%,
            #03111f 55%,
            #020b15 100%
        );
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    transform: scale(1.08);
    opacity: 0;
    transition:
        transform .8s cubic-bezier(.16, 1, .3, 1),
        opacity .65s ease;
}

.mobile-menu.is-open .mobile-menu-bg {
    transform: scale(1);
    opacity: 1;
}
.mobile-menu-inner {
    position: relative;
    z-index: 2;
    height: 100%;
    width: min(620px, calc(100% - 48px));
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateY(24px);
    opacity: 0;
    transition:
        transform .7s cubic-bezier(.16, 1, .3, 1) .08s,
        opacity .5s ease .08s;
}

.mobile-menu.is-open .mobile-menu-inner {
    transform: translateY(0);
    opacity: 1;
}
.mobile-menu-kicker { margin-bottom:35px; font-size:9px; color:var(--aqua-300); letter-spacing:.22em; }
.mobile-menu-inner a {
    padding: 15px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-family: var(--display);
    font-size: clamp(31px, 8vw, 54px);
    letter-spacing: -.05em;

    opacity: 0;
    transform: translateX(-30px);

    transition:
        transform .65s cubic-bezier(.16, 1, .3, 1),
        opacity .45s ease,
        color .3s ease;
}

.mobile-menu.is-open .mobile-menu-inner a {
    opacity: 1;
    transform: translateX(0);
}

.mobile-menu.is-open .mobile-menu-inner a:nth-of-type(1) {
    transition-delay: .14s;
}

.mobile-menu.is-open .mobile-menu-inner a:nth-of-type(2) {
    transition-delay: .20s;
}

.mobile-menu.is-open .mobile-menu-inner a:nth-of-type(3) {
    transition-delay: .26s;
}

.mobile-menu.is-open .mobile-menu-inner a:nth-of-type(4) {
    transition-delay: .32s;
}
.mobile-menu-inner a:hover { transform:translateX(7px); color:var(--aqua-300); }
.mobile-menu-inner button {
    margin-top: 30px;
    min-height: 56px;
    border-radius: 999px;
    background: var(--aqua-300);
    color: var(--navy-950);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;

    opacity: 0;
    transform: translateY(18px) scale(.96);

    transition:
        transform .65s cubic-bezier(.16, 1, .3, 1),
        opacity .45s ease,
        box-shadow .3s ease;
}

.mobile-menu.is-open .mobile-menu-inner button {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: .40s;
}

.mobile-menu-inner button:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 18px 40px rgba(105, 215, 255, .18);
}

/* ---------------------------------------------------------
   SCROLL REVEAL
--------------------------------------------------------- */
.reveal-up { opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-up.is-visible { opacity:1; transform:none; }
.reveal-image { opacity:0; transform:scale(1.02); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-image.is-visible { opacity:1; transform:scale(1); }
.delay-1 { transition-delay:.08s; }
.delay-2 { transition-delay:.16s; }
.delay-3 { transition-delay:.24s; }
.delay-4 { transition-delay:.32s; }

/* ---------------------------------------------------------
   ORDER DRAWER
--------------------------------------------------------- */
.order-drawer { position:fixed; inset:0; z-index:2000; visibility:hidden; pointer-events:none; }
.order-drawer.is-open { visibility:visible; pointer-events:auto; }
.order-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(1, 8, 16, .76);

    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);

    opacity: 0;

    transition:
        opacity .55s cubic-bezier(.16, 1, .3, 1);
}

.order-drawer.is-open .order-backdrop {
    opacity: 1;
}
.order-drawer.is-open .order-backdrop { opacity:1; }
.order-drawer-inner { position:absolute; top:0; right:0; width:min(960px,100%); height:100%; overflow:auto; padding:28px clamp(20px,5vw,56px) 45px; background:linear-gradient(180deg,#f7fbfe 0%,#edf7fc 100%); box-shadow:-35px 0 90px rgba(0,0,0,.22); transform:translateX(100%); transition:transform .55s var(--ease); }
.order-drawer.is-open .order-drawer-inner { transform:none; }
.order-drawer-top { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:25px; }
.drawer-brand { display:flex; align-items:center; gap:10px; }
.drawer-brand-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--navy-900); color:white; font-size:16px; }
.drawer-brand b { display:block; font-family:var(--display); font-size:13px; letter-spacing:.1em; }
.drawer-brand small { display:block; margin-top:2px; font-size:7px; letter-spacing:.18em; color:var(--ink-soft); }
.order-close {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: white;
    color: var(--ink);
    font-size: 0;
    cursor: pointer;
    overflow: hidden;

    transition:
        transform .45s cubic-bezier(.16, 1, .3, 1),
        background .35s ease,
        border-color .35s ease,
        box-shadow .45s ease;
}

.order-close::before,
.order-close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 1.5px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
    transition:
        transform .45s cubic-bezier(.16, 1, .3, 1),
        width .35s ease;
}

.order-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.order-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.order-close:hover {
    transform: rotate(90deg) scale(1.06);
    background: var(--navy-950);
    color: white;
    border-color: var(--navy-950);
    box-shadow: 0 12px 30px rgba(7, 26, 48, .16);
}
.order-close:active {
    transform: scale(.92) rotate(90deg);
}
.order-progress { display:grid; grid-template-columns:auto 1fr auto 1fr auto 1fr auto; align-items:center; gap:8px; margin-bottom:30px; }
.order-progress-step { min-width:42px; display:flex; flex-direction:column; align-items:flex-start; gap:4px; color:#93a4b5; }
.order-progress-step span { font-size:8px; font-weight:800; letter-spacing:.13em; }
.order-progress-step strong { font-size:9px; text-transform:uppercase; letter-spacing:.1em; }
.order-progress-step.active { color:var(--blue-600); }
.order-progress-line { height:1px; background:rgba(7,26,48,.12); }
.order-app { padding-bottom:20px; }
.order-step { animation:stepIn .45s var(--ease); }
@keyframes stepIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
.order-step-header { display:flex; gap:18px; align-items:flex-start; margin:12px 0 30px; }
.order-step-number { width:43px; height:43px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; background:var(--navy-900); color:white; font-size:9px; font-weight:800; letter-spacing:.12em; }
.order-eyebrow { color:var(--blue-600); font-size:9px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.order-step-header h2 { margin-top:7px; font-family:var(--display); font-size:clamp(34px,5vw,52px); line-height:.98; letter-spacing:-.05em; }
.order-step-header p:last-child { margin-top:8px; color:var(--ink-soft); font-size:13px; line-height:1.55; }
.order-products { display:grid; gap:13px; }
.order-product { display:grid; grid-template-columns:122px minmax(0,1fr); gap:16px; align-items:stretch; padding:11px; border:1px solid var(--line); background:white; transition:transform .3s var(--ease),border-color .3s ease,box-shadow .3s ease; }
.order-product:hover, .order-product.is-selected { transform:translateY(-2px); border-color:rgba(21,120,221,.24); box-shadow:0 14px 28px rgba(8,43,74,.07); }
.order-product-image { overflow:hidden; min-height:145px; background:var(--surface-2); }
.order-product-image img {
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    transition:none;
}

/* Keep the complete product artwork visible in the order drawer.
   The previous cover crop was cutting off the 50cl, 75cl and 19L images. */
.order-product:hover .order-product-image img {
    transform:none;
}

/* Sachet artwork is landscape; contain it so the complete bag stays visible. */
.order-product-sachet .order-product-image {
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
}

.order-product-sachet .order-product-image img {
    width:100%;
    height:auto;
    max-width:100%;
    object-fit:contain;
    object-position:center;
    transform:none !important;
    transition:none;
}
.order-product-info { display:flex; flex-direction:column; justify-content:space-between; padding:8px 10px 8px 0; }
.order-product-size { color:var(--blue-600); font-size:8px; font-weight:800; letter-spacing:.17em; text-transform:uppercase; }
.order-product-info h3 { margin-top:8px; font-family:var(--display); font-size:25px; letter-spacing:-.035em; }
.order-product-info p { margin-top:7px; color:var(--ink-soft); font-size:12px; line-height:1.55; }
.order-product-bottom { display:flex; justify-content:space-between; align-items:end; gap:14px; margin-top:18px; }
.order-price { font-family:var(--display); font-size:18px; font-weight:800; letter-spacing:-.03em; white-space:nowrap; }
.order-price small { font-family:var(--body); font-size:9px; font-weight:700; letter-spacing:.02em; color:var(--ink-soft); }
.quantity-control { display:flex; align-items:center; gap:9px; }
.quantity-btn { width:35px; height:35px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:17px; transition:all .25s var(--ease); }
.quantity-btn:hover { background:var(--navy-900); color:white; transform:scale(1.05); }
.quantity-value { min-width:18px; text-align:center; font-weight:800; font-size:12px; }
.order-summary { margin-top:18px; padding:18px 20px; border:1px solid var(--line); background:white; }
.order-summary-row, .order-summary-total { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.order-summary-row span, .order-summary-total span { font-size:9px; text-transform:uppercase; letter-spacing:.15em; color:var(--ink-soft); }
.order-summary-row strong { font-size:13px; }
.order-summary-divider { height:1px; background:var(--line); margin:15px 0; }
.order-summary-total strong { font-family:var(--display); font-size:28px; letter-spacing:-.04em; }
.order-continue { min-height:56px; margin-top:18px; width:100%; display:flex; align-items:center; justify-content:center; gap:14px; border-radius:999px; background:var(--navy-900); color:white; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; transition:all .3s var(--ease); }
.order-continue:hover:not(:disabled) { transform:translateY(-2px); background:var(--blue-600); box-shadow:0 14px 26px rgba(21,120,221,.2); }
.order-continue span { font-size:16px; }
.order-continue:disabled { opacity:.38; cursor:not-allowed; }
.order-note { margin-top:12px; color:#7f91a3; font-size:10px; line-height:1.6; }
.delivery-section { margin-bottom:25px; }
.form-label { margin-bottom:11px; color:var(--ink-soft); font-size:9px; font-weight:800; letter-spacing:.16em; }
.delivery-options { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.delivery-option { display:grid; grid-template-columns:37px 1fr auto; align-items:center; gap:11px; padding:13px; border:1px solid var(--line); border-radius:14px; background:white; text-align:left; transition:all .25s var(--ease); }
.delivery-option:hover { transform:translateY(-1px); }
.delivery-option.is-selected { border-color:rgba(21,120,221,.38); background:#f5fbff; box-shadow:0 10px 22px rgba(21,120,221,.08); }
.delivery-option-icon { width:35px; height:35px; display:grid; place-items:center; border-radius:11px; background:var(--surface-2); color:var(--blue-600); font-size:16px; }
.delivery-option-content strong { display:block; font-family:var(--display); font-size:14px; }
.delivery-option-content small { display:block; margin-top:2px; color:var(--ink-soft); font-size:9px; line-height:1.4; }
.delivery-option-check { color:var(--blue-600); opacity:0; font-size:14px; }
.delivery-option.is-selected .delivery-option-check { opacity:1; }
.delivery-form, .customer-form { display:grid; gap:15px; margin-top:18px; }
.form-field { display:flex; flex-direction:column; gap:7px; }
.form-field label { font-size:9px; text-transform:uppercase; letter-spacing:.13em; font-weight:800; color:var(--ink-soft); }
.form-field label span { color:#9cabb8; margin-left:4px; }
.form-field input, .form-field textarea { width:100%; border:1px solid var(--line); border-radius:14px; padding:14px 15px; outline:none; background:white; color:var(--ink); font-size:13px; transition:border-color .25s ease,box-shadow .25s ease; }
.form-field textarea { resize:vertical; min-height:96px; }
.form-field input::placeholder, .form-field textarea::placeholder { color:#a8b5c0; }
.form-field input:focus, .form-field textarea:focus { border-color:rgba(21,120,221,.42); box-shadow:0 0 0 4px rgba(21,120,221,.07); }
.delivery-summary { margin-top:16px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 16px; border-radius:13px; background:rgba(21,120,221,.06); border:1px solid rgba(21,120,221,.1); }
.delivery-summary span { color:var(--ink-soft); font-size:9px; text-transform:uppercase; letter-spacing:.14em; }
.delivery-summary strong { font-size:12px; }
.order-step-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:23px; }
.order-back, .confirmation-back { min-height:44px; padding:0 13px; background:transparent; color:var(--ink-soft); font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.order-back:hover, .confirmation-back:hover { color:var(--blue-600); }

/* LIVE OVERVIEW */
.order-overview { margin:0 0 28px; padding:0; border-radius:24px; overflow:hidden; background:linear-gradient(145deg,#0a2e53,#03172f); color:white; box-shadow:var(--shadow-deep); }
.order-overview-content { padding:24px; }
.order-overview-header { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:23px; }
.order-overview-header .section-label { color:var(--aqua-300); }
.order-overview-status { padding:7px 9px; border:1px solid rgba(183,236,255,.2); border-radius:999px; color:var(--aqua-300); font-size:7px; font-weight:800; letter-spacing:.16em; }
.order-overview-main { display:grid; grid-template-columns:minmax(0,1fr) 170px; gap:20px; align-items:stretch; }
.order-overview-details h3 { font-family:var(--display); font-size:40px; letter-spacing:-.055em; }
.order-overview-caption { margin:8px 0 18px; color:rgba(255,255,255,.45); font-size:10px; }
.order-overview-items { display:grid; gap:8px; }
.order-overview-item { display:grid; grid-template-columns:50px minmax(0,1fr) auto; align-items:center; gap:10px; padding:7px; border-radius:14px; border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.04); }
.order-overview-item-image { width:50px; height:50px; overflow:hidden; border-radius:10px; }
.order-overview-item-image img { height:100%; object-fit:cover; }
.order-overview-item-info strong { display:block; font-family:var(--display); font-size:12px; }
.order-overview-item-info span { display:block; margin-top:4px; color:rgba(255,255,255,.4); font-size:8px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.order-overview-item-price { font-family:var(--display); font-size:12px; font-weight:800; white-space:nowrap; }
.order-overview-empty { padding:16px; color:rgba(255,255,255,.4); border:1px dashed rgba(255,255,255,.1); border-radius:12px; font-size:10px; }
.order-overview-delivery { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.overview-detail { min-height:60px; padding:12px; border:1px solid rgba(255,255,255,.07); border-radius:12px; background:rgba(255,255,255,.03); }
.overview-detail span { display:block; color:rgba(255,255,255,.3); font-size:7px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.overview-detail strong { display:block; margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.order-overview-total { margin-top:10px; padding:15px; display:flex; justify-content:space-between; align-items:center; gap:15px; border:1px solid rgba(183,236,255,.13); border-radius:13px; background:rgba(105,215,255,.05); }
.order-overview-total span { color:rgba(255,255,255,.35); font-size:7px; font-weight:800; letter-spacing:.16em; }
.order-overview-total strong { font-family:var(--display); font-size:23px; letter-spacing:-.04em; }
/* ---------------------------------------------------------
   LIVE ORDER · WATER DROP GAME
--------------------------------------------------------- */
.order-overview-visual.order-catch-game {
    position:relative;
    min-height:280px;
    overflow:hidden;
    border-radius:17px;
    padding:15px;
    display:flex;
    flex-direction:column;
    background:
        radial-gradient(circle at 50% 15%, rgba(105,215,255,.22), transparent 42%),
        linear-gradient(160deg, #0b3c69 0%, #06284c 48%, #03182f 100%);
    border:1px solid rgba(183,236,255,.16);
}

.catch-game-top {
    position:relative;
    z-index:4;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}

.catch-game-kicker {
    display:block;
    color:var(--aqua-300);
    font-size:6px;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.catch-game-top h4 {
    margin-top:5px;
    max-width:125px;
    color:white;
    font-family:var(--display);
    font-size:13px;
    line-height:1.08;
    letter-spacing:-.035em;
}

.catch-game-timer {
    min-width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:1px solid rgba(183,236,255,.3);
    border-radius:50%;
    color:var(--aqua-300);
    font-family:var(--display);
    font-size:14px;
    font-weight:800;
    background:rgba(255,255,255,.06);
}

.catch-game-stage {
    position:relative;
    flex:1;
    min-height:190px;
    will-change:contents;
    margin-top:9px;
    overflow:hidden;
    border-radius:13px;
    border:1px solid rgba(255,255,255,.1);
    background:
        linear-gradient(180deg, rgba(105,215,255,.08), rgba(1,15,31,.12)),
        rgba(255,255,255,.025);
    outline:none;
    touch-action:none;
    cursor:grab;
}

.catch-game-stage:active {
    cursor:grabbing;
}

.catch-game-stage::before {
    content:"";
    position:absolute;
    inset:0;
    background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
    background-size:100% 28px;
    pointer-events:none;
}

.catch-game-rain-glow {
    position:absolute;
    left:50%;
    top:-40px;
    width:150px;
    height:150px;
    transform:translateX(-50%);
    border-radius:50%;
    background:rgba(105,215,255,.12);
    filter:blur(28px);
    pointer-events:none;
}

.catch-game-message {
    position:absolute;
    z-index:5;
    left:50%;
    top:45%;
    width:88%;
    transform:translate(-50%,-50%);
    color:rgba(255,255,255,.68);
    text-align:center;
    font-size:8px;
    line-height:1.5;
    pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
}

.catch-game-score {
    position:absolute;
    z-index:6;
    top:8px;
    left:50%;
    transform:translateX(-50%);
    padding:5px 8px;
    border-radius:999px;
    color:rgba(255,255,255,.82);
    background:rgba(2,13,29,.42);
    border:1px solid rgba(255,255,255,.08);
    font-size:6px;
    font-weight:800;
    letter-spacing:.14em;
    pointer-events:none;
}

.catch-game-start {
    position:absolute;
    z-index:8;
    left:50%;
    bottom:13px;
    transform:translateX(-50%);
    min-height:34px;
    padding:0 13px;
    border-radius:999px;
    background:var(--aqua-300);
    color:var(--navy-950);
    font-size:7px;
    font-weight:800;
    letter-spacing:.12em;
    white-space:nowrap;
    box-shadow:0 9px 22px rgba(105,215,255,.2);
    transition:transform .25s var(--ease), box-shadow .25s ease;
}

.catch-game-start:hover {
    transform:translateX(-50%) translateY(-2px);
    box-shadow:0 12px 28px rgba(105,215,255,.32);
}

.catch-game-start:disabled {
    cursor:default;
    opacity:.55;
}

.catch-game-footer {
    position:relative;
    z-index:5;
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-top:8px;
    color:rgba(255,255,255,.38);
    font-size:6px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.catch-bottle {
    position:absolute;
    z-index:7;
    left:50%;
    bottom:9px;
    width:42px;
    height:74px;
    transform:translateX(-50%);
    pointer-events:none;
    will-change:left, transform;
    filter:drop-shadow(0 8px 9px rgba(0,0,0,.24));
}

.catch-bottle-cap {
    position:absolute;
    left:13px;
    top:0;
    width:16px;
    height:8px;
    border-radius:3px 3px 2px 2px;
    background:linear-gradient(180deg,#bdefff,#4baed6);
    border:1px solid rgba(255,255,255,.45);
}

.catch-bottle-neck {
    position:absolute;
    left:12px;
    top:7px;
    width:18px;
    height:13px;
    border-radius:3px 3px 1px 1px;
    background:linear-gradient(90deg,#d8f7ff,#5ebbe2,#d8f7ff);
    border-left:1px solid rgba(255,255,255,.45);
    border-right:1px solid rgba(255,255,255,.45);
}

.catch-bottle-body {
    position:absolute;
    left:3px;
    right:3px;
    top:17px;
    bottom:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    overflow:hidden;
    border-radius:10px 10px 12px 12px;
    background:linear-gradient(90deg,rgba(223,250,255,.94),rgba(94,187,225,.72),rgba(231,252,255,.96));
    border:1px solid rgba(255,255,255,.7);
    box-shadow:inset 5px 0 9px rgba(255,255,255,.25), inset -5px 0 9px rgba(0,55,95,.14);
}

.catch-bottle-body::before {
    content:"";
    position:absolute;
    inset:8px 4px auto;
    height:25px;
    border-radius:6px;
    background:rgba(255,255,255,.72);
}

.catch-bottle-body span,
.catch-bottle-body small {
    position:relative;
    z-index:2;
    color:#075087;
}

.catch-bottle-body span {
    font-family:var(--display);
    font-size:7px;
    font-weight:900;
    letter-spacing:.07em;
}

.catch-bottle-body small {
    font-size:3.5px;
    font-weight:800;
    letter-spacing:.1em;
}

.catch-drop {
    position:absolute;
    z-index:6;
    width:8px;
    height:11px;
    border-radius:65% 65% 60% 60% / 72% 72% 40% 40%;
    background:linear-gradient(135deg,#effcff 5%,#69d7ff 45%,#1578dd 100%);
    box-shadow:0 0 9px rgba(105,215,255,.75);
    transform:rotate(0deg);
    pointer-events:none;
}

.catch-drop::after {
    content:"";
    position:absolute;
    left:2px;
    top:2px;
    width:2px;
    height:3px;
    border-radius:50%;
    background:rgba(255,255,255,.9);
}

.catch-game-stage.is-playing .catch-game-message {
    opacity:0;
    transform:translate(-50%,-65%);
}

.catch-game-stage.is-finished .catch-game-message {
    opacity:1;
    top:45%;
    color:white;
    font-size:10px;
    font-weight:800;
}

.catch-game-stage.is-finished .catch-game-start {
    display:none;
}

.catch-game-stage.is-playing .catch-game-start {
    display:none;
}

@media (max-width:760px) {
    .order-overview-visual.order-catch-game {
        min-height:250px;
    }

    .catch-game-stage {
        min-height:170px;
    }
}

/* REVIEW */
.review-layout { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:15px; }
.review-main { display:grid; gap:12px; }
.review-panel, .review-summary { background:white; border:1px solid var(--line); }
.review-panel { padding:19px; }
.review-panel-heading { display:flex; align-items:center; gap:10px; }
.review-panel-heading span { color:var(--blue-600); font-size:8px; font-weight:800; letter-spacing:.16em; }
.review-panel-heading h3 { font-family:var(--display); font-size:18px; }
.review-products { display:grid; gap:8px; margin-top:15px; }
.review-product-row { display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:10px; padding:7px; border:1px solid var(--line); background:var(--surface); border-radius:12px; }
.review-product-image { width:48px; height:48px; border-radius:9px; overflow:hidden; }
.review-product-image img { height:100%; object-fit:cover; }
.review-product-info strong { display:block; font-size:11px; }
.review-product-info span { display:block; margin-top:3px; font-size:8px; color:var(--ink-soft); letter-spacing:.11em; text-transform:uppercase; }
.review-product-price { font-family:var(--display); font-size:12px; }
.review-details-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:15px; }
.review-details-grid > div { padding:12px; border-radius:10px; background:var(--surface); }
.review-detail-wide { grid-column:1 / -1; }
.review-details-grid span { display:block; font-size:7px; font-weight:800; color:#8598a9; text-transform:uppercase; letter-spacing:.14em; }
.review-details-grid strong { display:block; margin-top:5px; font-size:10px; line-height:1.45; }
.review-summary { align-self:start; padding:18px; }
.review-summary-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.review-summary .section-label { color:var(--blue-600); font-size:8px; letter-spacing:.16em; }
.review-badge { padding:7px 9px; border:1px solid rgba(21,120,221,.12); border-radius:999px; color:var(--blue-600); background:rgba(21,120,221,.05); font-size:7px; font-weight:800; letter-spacing:.12em; }
.review-bottle {
    margin-top: 16px;
    height: auto;
    overflow: hidden;
    border-radius: 15px;
    background: var(--surface-2);
}

.review-bottle img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
}
.review-total-row { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-top:15px; padding-top:14px; border-top:1px solid var(--line); }
.review-total-row span { font-size:9px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.13em; }
.review-total-row strong { font-family:var(--display); font-size:24px; letter-spacing:-.04em; }
.review-note { margin-top:9px; color:var(--ink-soft); font-size:10px; line-height:1.55; }

/* CONFIRMATION */
.order-confirmation {
    position:fixed;
    inset:0;
    z-index:2500;
    min-height:100svh;
    padding:105px 20px 40px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    overflow:auto;
    background:var(--surface);
}

.order-confirmation[hidden] {
    display:none !important;
}

body.order-success-open {
    overflow:hidden;
}
.order-confirmation::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 28%,rgba(105,215,255,.15),transparent 36%); pointer-events:none; }
.confirmation-watermark { position:absolute; right:-10px; bottom:15%; font-family:var(--display); font-size:clamp(90px,24vw,240px); letter-spacing:-.08em; font-weight:800; color:rgba(21,120,221,.05); pointer-events:none; }
.confirmation-check { width:68px; height:68px; border-radius:50%; display:grid; place-items:center; background:var(--navy-900); color:var(--aqua-300); box-shadow:0 0 0 10px rgba(21,120,221,.05),0 0 40px rgba(105,215,255,.22); animation:checkFloat 2.3s ease-in-out infinite; }
.confirmation-check span { font-size:30px; }
.order-confirmation > .section-label { margin-top:22px; color:var(--blue-600); }
.order-confirmation h2 { position:relative; margin-top:11px; font-family:var(--display); font-size:clamp(44px,8vw,78px); line-height:.9; letter-spacing:-.065em; }
.order-confirmation h2 span { color:var(--blue-600); }
.confirmation-message { position:relative; max-width:540px; margin-top:19px; color:var(--ink-soft); font-size:14px; line-height:1.7; }
.confirmation-order-number, .confirmation-total { position:relative; width:min(520px,100%); margin-top:21px; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:15px 17px; border-radius:14px; background:white; border:1px solid var(--line); }
.confirmation-order-number span, .confirmation-total span { color:var(--ink-soft); font-size:8px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.confirmation-order-number strong { font-family:var(--display); font-size:12px; }
.confirmation-total { margin-top:9px; }
.confirmation-total strong { font-family:var(--display); font-size:26px; letter-spacing:-.04em; }
.confirmation-payment-options { position:relative; width:min(520px,100%); margin-top:22px; }
.payment-whatsapp { position:relative; overflow:visible; width:100%; min-height:80px; display:grid; grid-template-columns:52px minmax(0,1fr) 30px; align-items:center; gap:15px; padding:12px 17px; border-radius:18px; background:linear-gradient(135deg,#10c966,#087d42); color:white; border:1px solid rgba(79,255,146,.72); box-shadow:0 0 16px rgba(35,255,116,.44),0 0 35px rgba(35,255,116,.22); animation:waGlow 2.2s ease-in-out infinite; text-align:left; }
.payment-whatsapp:hover { transform:translateY(-3px) scale(1.01); box-shadow:0 0 22px rgba(35,255,116,.72),0 0 52px rgba(35,255,116,.34); }
.payment-option-icon { display:grid; place-items:center; }
.whatsapp-icon { width:52px; height:52px; border-radius:50%; border:2px solid rgba(255,255,255,.9); background:rgba(255,255,255,.16); animation:waBounce 1.3s ease-in-out infinite; box-shadow:0 0 18px rgba(255,255,255,.2); }
.whatsapp-icon svg { width:28px; height:28px; }
.payment-option-content strong { display:block; font-size:13px; font-weight:800; }
.payment-option-content small { display:block; margin-top:4px; color:rgba(255,255,255,.8); font-size:9px; line-height:1.45; }
.payment-option-arrow { font-size:25px; transition:transform .3s var(--ease); }
.payment-whatsapp:hover .payment-option-arrow { transform:translateX(5px); }
.whatsapp-wave { position:absolute; top:50%; width:12px; height:38px; border:2px solid rgba(67,255,135,.9); border-radius:50%; transform:translateY(-50%); animation:waWave 1.6s ease-in-out infinite; pointer-events:none; }
.whatsapp-wave-left { left:-18px; border-right:0; }
.whatsapp-wave-right { right:-18px; border-left:0; }
.confirmation-back { position:relative; margin-top:14px; }
@keyframes waGlow { 0%,100%{box-shadow:0 0 12px rgba(35,255,116,.38),0 0 30px rgba(35,255,116,.2)} 50%{box-shadow:0 0 22px rgba(35,255,116,.7),0 0 52px rgba(35,255,116,.34)} }
@keyframes waBounce { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-6px) scale(1.07)} }
@keyframes waWave { 0%,100%{opacity:.35;transform:translateY(-50%) scale(.85)} 50%{opacity:1;transform:translateY(-50%) scale(1.08)} }
@keyframes checkFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */
@media (max-width: 1050px) {
    .nav-status { display:none; }
    .nav-links { gap:22px; }
    .intro-grid { grid-template-columns:1fr 2fr; }
    .intro-stamp { display:none; }
    .product-card-tall,.product-card-sachet,.product-card-featured,.product-card-wide { grid-column:span 6; }
    .product-card-featured { transform:none; }
    .product-card-sachet { transform:none; }
    .experience-grid { grid-template-columns:1fr 1fr; grid-template-rows:300px 300px; }
    .experience-large { grid-column:1/-1; grid-row:auto; }
    .factory-section,.distribution-section,.source-section { grid-template-columns:1fr; }
    .source-media,
.distribution-media {
    min-height: 560px;
}

.factory-video-wrap {
    min-height: 0;
    aspect-ratio: 16 / 9;
}
    .journey-track { grid-template-columns:1fr 1fr 1fr; gap:0; }
    .journey-step { border-right:1px solid rgba(255,255,255,.08); }
    .journey-step:nth-child(4),.journey-step:nth-child(5){ margin-top:25px; }
    .review-layout { grid-template-columns:1fr; }
}

@media (max-width: 760px) {
    .navbar { width:min(100% - 28px,1440px); height:76px; }
    .nav-links,.nav-order-button { display:none; }
   .menu-toggle {
    display: block;
    margin-left: 0;
}

.nav-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 18px;
}
    .section-shell { width:min(100% - 30px,1240px); }
    .hero-content { width:min(100% - 30px, 760px); margin-left:15px; padding-top:30px; }
    .hero h1 { font-size:clamp(51px,16vw,86px); }
    .hero-content > p { font-size:14px; margin-top:22px; }
    .hero-actions .button { flex:1 1 190px; }
    .hero-bottom { width:calc(100% - 30px); bottom:20px; }
    .hero-scroll { display:none; }
    .hero-pillars { gap:14px; }
    .hero-pillars span { font-size:7px; }
    .intro-section,.collection-section,.experience-section { padding:95px 0 85px; }
    .intro-grid { display:block; }
    .intro-copy h2 { font-size:clamp(45px,13vw,72px); }
    .intro-copy .lead { font-size:15px; }
    .intro-values { margin-top:65px; grid-template-columns:1fr; }
    .value-card { padding:28px 10px; border-right:0; border-bottom:1px solid var(--line); }
    .value-card:last-child { border-bottom:0; }
    .section-top { display:block; margin-bottom:45px; }
    .section-top h2 { font-size:clamp(46px,13vw,76px); }
    .section-intro { margin-top:14px; max-width:100%; }
    .product-grid { grid-template-columns:1fr; }
    .product-card-tall,.product-card-sachet,.product-card-featured,.product-card-wide { grid-column:auto; }

.product-card-tall .product-image {
    aspect-ratio: 3 / 2;
    height: auto;
}

.product-card-featured .product-image {
    aspect-ratio: 3 / 2;
    height: auto;
}

.product-card-wide .product-image {
    aspect-ratio: 3 / 2;
    height: auto;
}

.product-card-tall .product-image img,
.product-card-featured .product-image img,
.product-card-wide .product-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transform: none !important;
}
    .collection-feature { margin-top:65px; grid-template-columns:1fr; }
    .collection-feature-copy { padding:36px 27px; }
    .collection-feature-image { min-height:270px; }
    .collection-strip { grid-template-columns:100px 1fr; }
    .collection-strip-image { height:100px; }
    .collection-strip strong { font-size:20px; }
    .source-content,.distribution-copy,.factory-copy { padding:65px 25px; }
    .source-media,
.distribution-media {
    min-height: 460px;
}

.factory-video-wrap {
    min-height: 0;
    aspect-ratio: 16 / 9;
}
    .journey-section { padding:90px 0 80px; min-height:750px; }
    .journey-track { grid-template-columns:1fr; margin-top:50px; }
    .journey-line { left:7px; right:auto; top:0; bottom:0; height:auto; width:1px; }
    .journey-line span { width:100%; height:22%; animation:journeyLineVertical 4s ease-in-out infinite; }
    .journey-step,.journey-step:nth-child(4),.journey-step:nth-child(5) { margin:0; min-height:120px; padding:18px 0 22px 30px; border-right:0; border-bottom:1px solid rgba(255,255,255,.08); }
    .journey-step:last-child { border-bottom:0; }
    .journey-step::before { left:0; top:18px; }
    .experience-grid { display:grid; grid-template-columns:1fr; grid-template-rows:320px 240px 240px; }
    .experience-large { grid-column:auto; }
    .order-callout { display:block; padding:40px 27px; }
    .order-callout h2 { font-size:clamp(48px,13vw,76px); }
    .order-callout .button { margin-top:25px; width:100%; }
    .final-section { min-height:560px; padding-top:80px; }
    .final-content { min-height:420px; }
    .site-footer { flex-direction:column; padding-bottom:20px; }
    .order-drawer-inner {
    position: absolute;
    top: 0;
    right: 0;
    width: min(960px, 100%);
    height: 100%;
    overflow: auto;
    padding: 28px clamp(20px, 5vw, 56px) 45px;

    background: linear-gradient(
        180deg,
        #f7fbfe 0%,
        #edf7fc 100%
    );

    box-shadow: -35px 0 90px rgba(0, 0, 0, .22);

    transform: translate3d(100%, 0, 0);
    opacity: .96;

    transition:
        transform .65s cubic-bezier(.16, 1, .3, 1),
        opacity .4s ease;
    will-change: transform, opacity;
}

.order-drawer.is-open .order-drawer-inner {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}
    .order-progress { gap:4px; }
    .order-progress-step strong { font-size:7px; }
    .order-product { grid-template-columns:92px minmax(0,1fr); }
    .order-product-image { min-height:115px; }
    .delivery-options { grid-template-columns:1fr; }
    .order-overview-main { grid-template-columns:1fr; }
    .order-overview-visual { min-height:180px; }
    .review-details-grid { grid-template-columns:1fr; }
    .review-detail-wide { grid-column:auto; }
    .order-confirmation { min-height:calc(100vh - 70px); padding:30px 4px; }
    .confirmation-message { font-size:13px; }
    .payment-whatsapp { grid-template-columns:46px minmax(0,1fr) 24px; gap:11px; padding:11px 13px; }
    .whatsapp-icon { width:46px; height:46px; }
    .payment-option-content strong { font-size:12px; }
    .whatsapp-wave { display:none; }
}

@media (max-width: 390px) {
    .brand-copy small { display:none; }
    .hero h1 { font-size:50px; }
    .product-card-body { padding:22px 20px; }
    .order-step-header { gap:12px; }
    .order-step-number { width:38px; height:38px; }
    .order-step-header h2 { font-size:31px; }
    .order-product { grid-template-columns:82px minmax(0,1fr); gap:11px; }
    .order-product-info h3 { font-size:20px; }
    .order-product-bottom { align-items:center; }
    .quantity-btn { width:31px; height:31px; }
    .order-price { font-size:16px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
@media (max-width: 760px) {

    .hero {
        min-height: auto;
        height: auto;
        background: #ffffff;
    }

    .hero-media {
        width: 100%;
        height: auto;
        padding: 0;
        background: #ffffff;
    }

    .hero-image {
        width: 100%;
        height: auto;
        max-width: 100%;
        object-fit: contain;
        transform: none !important;
        animation: none !important;
    }

    .hero-cta-strip {
        width: calc(100% - 30px);
        padding: 22px 0 30px;
    }

    .hero-cta-strip .button {
        flex: 1 1 180px;
        min-width: 0;
    }
}
@media (max-width: 390px) {

    .hero-cta-strip {
        width: calc(100% - 24px);
        gap: 9px;
    }

    .hero-cta-strip .button {
        font-size: 9px;
        min-height: 50px;
    }

}
/* =========================================================
   MENCC DARK MODE
   ========================================================= */

:root {
    color-scheme: light;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --navy-950: #f5fbff;
    --navy-900: #eaf7fc;
    --navy-800: #d9edf5;

    --white: #07151d;
    --off-white: #0b1d27;

    --aqua-50: #102d39;
    --aqua-100: #123847;
    --aqua-200: #17495a;
    --aqua-300: #69d7ff;
    --aqua-400: #49c7f5;
    --aqua-500: #36b8e8;

    --text-dark: #f4fbff;
    --text-light: #b9d0da;

    background: #061117;
}

:root[data-theme="dark"] body {
    background: #061117;
    color: #f4fbff;
}

/* ---------- Header ---------- */

:root[data-theme="dark"] .site-header {
    background: rgba(6, 17, 23, 0.96);
    border-bottom-color: rgba(105, 215, 255, 0.15);
}

:root[data-theme="dark"] .site-header a {
    color: #f4fbff;
}

:root[data-theme="dark"] .site-header a:hover {
    color: #69d7ff;
}

/* ---------- Theme toggle ---------- */

.theme-toggle,
.mobile-theme-toggle {
    border: 1px solid rgba(105, 215, 255, 0.35);
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease,
        border-color .3s ease;
}

.theme-toggle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.theme-toggle:hover,
.mobile-theme-toggle:hover {
    background: rgba(105, 215, 255, 0.12);
    border-color: #69d7ff;
    transform: translateY(-2px);
}

.theme-toggle:active,
.mobile-theme-toggle:active {
    transform: scale(.96);
}

.theme-icon {
    display: block;
    line-height: 1;
    font-size: 20px;
}


.theme-toggle {
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;

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

    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.35);

    color: #ffffff;
    cursor: pointer;

    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease,
        transform .3s ease;
}

/* Light mode */
html:not([data-theme="dark"]) .theme-toggle {
    background: rgba(3, 17, 35, 0.08);
    border-color: rgba(3, 17, 35, 0.25);
    color: #031123;
}

/* Dark mode */
html[data-theme="dark"] .theme-toggle {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(105, 215, 255, 0.45);
    color: #ffffff;
}

.theme-toggle:hover {
    transform: translateY(-2px);
}

html:not([data-theme="dark"]) .theme-toggle:hover {
    background: rgba(3, 17, 35, 0.14);
}

html[data-theme="dark"] .theme-toggle:hover {
    background: rgba(105, 215, 255, 0.14);
}
/* ---------- Mobile theme button ---------- */

.mobile-theme-toggle {
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 12px;

    display: flex;
    align-items: center;
    gap: 12px;

    font-size: 13px;
    font-weight: 700;
    text-align: left;
}

.mobile-theme-icon {
    font-size: 20px;
    line-height: 1;
}

/* ---------- Main sections ---------- */

:root[data-theme="dark"] section {
    background-color: #061117;
}

:root[data-theme="dark"] .section-heading,
:root[data-theme="dark"] .section-title,
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4 {
    color: #f4fbff;
}

:root[data-theme="dark"] p {
    color: #b9d0da;
}

/* ---------- Cards ---------- */

:root[data-theme="dark"] .product-card,
:root[data-theme="dark"] .feature-card,
:root[data-theme="dark"] .info-card,
:root[data-theme="dark"] .review-card,
:root[data-theme="dark"] .order-card {
    background: #0b1d27;
    border-color: rgba(105, 215, 255, 0.14);
    color: #f4fbff;
}

:root[data-theme="dark"] .product-card:hover,
:root[data-theme="dark"] .feature-card:hover {
    border-color: rgba(105, 215, 255, 0.4);
}

/* ---------- Collection / product area ---------- */

:root[data-theme="dark"] .collections-section,
:root[data-theme="dark"] .products-section {
    background: #071820;
}

:root[data-theme="dark"] .product-content {
    background: #0b1d27;
}

:root[data-theme="dark"] .product-card p,
:root[data-theme="dark"] .product-card span {
    color: #b9d0da;
}

/* ---------- Source section ---------- */

:root[data-theme="dark"] .source-section {
    background: #061117;
}

:root[data-theme="dark"] .source-copy {
    color: #f4fbff;
}

/* ---------- Factory section ---------- */

:root[data-theme="dark"] .factory-section {
    background: #081a23;
}

:root[data-theme="dark"] .factory-content {
    color: #f4fbff;
}

/* ---------- Buttons ---------- */

:root[data-theme="dark"] .btn-secondary {
    background: transparent;
    color: #f4fbff;
    border-color: rgba(105, 215, 255, 0.45);
}

:root[data-theme="dark"] .btn-secondary:hover {
    background: rgba(105, 215, 255, 0.12);
    color: #69d7ff;
}

/* ---------- Forms ---------- */

:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
    background: #0b1d27;
    color: #f4fbff;
    border-color: rgba(105, 215, 255, 0.2);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
    color: #78909c;
}

:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] select:focus {
    border-color: #69d7ff;
    outline-color: rgba(105, 215, 255, 0.2);
}

/* ---------- Order drawer ---------- */

:root[data-theme="dark"] .order-drawer {
    background: #061117;
    color: #f4fbff;
}

:root[data-theme="dark"] .order-drawer-inner {
    background: #081a23;
}

:root[data-theme="dark"] .order-close {
    color: #f4fbff;
}

:root[data-theme="dark"] .order-step,
:root[data-theme="dark"] .order-summary {
    background: #0b1d27;
    border-color: rgba(105, 215, 255, 0.15);
}

/* ---------- Mobile menu ---------- */

:root[data-theme="dark"] .mobile-menu {
    background: #061117;
}

:root[data-theme="dark"] .mobile-menu-content {
    background: #081a23;
}

:root[data-theme="dark"] .mobile-menu a {
    color: #f4fbff;
}

:root[data-theme="dark"] .mobile-menu a:hover {
    color: #69d7ff;
}

/* ---------- Footer ---------- */

:root[data-theme="dark"] footer {
    background: #02090d;
    color: #b9d0da;
}

:root[data-theme="dark"] footer h3,
:root[data-theme="dark"] footer h4 {
    color: #f4fbff;
}

:root[data-theme="dark"] footer a {
    color: #b9d0da;
}

:root[data-theme="dark"] footer a:hover {
    color: #69d7ff;
}

/* ---------- General borders ---------- */

:root[data-theme="dark"] hr {
    border-color: rgba(105, 215, 255, 0.12);
}

/* ---------- Selection ---------- */

:root[data-theme="dark"] ::selection {
    background: #69d7ff;
    color: #061117;
}

/* ---------- Smooth theme transition ---------- */

body,
.site-header,
section,
.product-card,
.feature-card,
.info-card,
.review-card,
.order-drawer,
.order-drawer-inner,
.mobile-menu,
.mobile-menu-content,
input,
textarea,
select,
footer {
    transition:
        background-color .35s ease,
        color .35s ease,
        border-color .35s ease;
}
/* =========================================================
   MENCC — DARK MODE VISIBILITY FIX
   Strong checkout contrast + readable typography
   ========================================================= */

html[data-theme="dark"] .order-drawer,
html[data-theme="dark"] .order-drawer-inner {
    color: #f4fbff;
}

/* ---------- ORDER HEADINGS ---------- */

html[data-theme="dark"] .order-step-header h2,
html[data-theme="dark"] .order-step-header h3,
html[data-theme="dark"] .order-drawer h1,
html[data-theme="dark"] .order-drawer h2,
html[data-theme="dark"] .order-drawer h3,
html[data-theme="dark"] .order-drawer h4 {
    color: #f4fbff !important;
}

/* ---------- ORDER INTRO / SUPPORTING TEXT ---------- */

html[data-theme="dark"] .order-step-header p,
html[data-theme="dark"] .order-step-header p:last-child,
html[data-theme="dark"] .order-drawer p {
    color: #b9d0df;
}

/* ---------- PROGRESS NAVIGATION ---------- */

html[data-theme="dark"] .order-progress-step {
    color: #8ea6b8 !important;
}

html[data-theme="dark"] .order-progress-step.is-active {
    color: #69d7ff !important;
}

html[data-theme="dark"] .order-progress-step strong,
html[data-theme="dark"] .order-progress-step span {
    color: inherit;
}

/* ---------- PRODUCT CARDS ---------- */

html[data-theme="dark"] .order-product {
    background: #0d2439 !important;
    color: #f4fbff !important;
    border-color: rgba(105, 215, 255, .20) !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, .22);
}

html[data-theme="dark"] .order-product-info h3,
html[data-theme="dark"] .order-product-info strong {
    color: #f4fbff !important;
}

html[data-theme="dark"] .order-product-info p {
    color: #a9c2d3 !important;
}

html[data-theme="dark"] .order-product-bottom,
html[data-theme="dark"] .order-product-price,
html[data-theme="dark"] .order-product-quantity {
    color: #f4fbff !important;
}

/* ---------- PRODUCT PRICE ---------- */

html[data-theme="dark"] .order-product .price,
html[data-theme="dark"] .order-product .product-price,
html[data-theme="dark"] .order-product [class*="price"] {
    color: #f4fbff !important;
}

/* ---------- QUANTITY CONTROLS ---------- */

html[data-theme="dark"] .quantity-btn {
    background: #071525 !important;
    color: #f4fbff !important;
    border-color: rgba(183, 236, 255, .22) !important;
}

html[data-theme="dark"] .quantity-btn:hover {
    background: #69d7ff !important;
    color: #03111f !important;
}

html[data-theme="dark"] .quantity-value {
    color: #f4fbff !important;
}

/* ---------- ORDER SUMMARY ---------- */

html[data-theme="dark"] .order-summary {
    background: #0b2034 !important;
    color: #f4fbff !important;
    border-color: rgba(105, 215, 255, .18) !important;
}

html[data-theme="dark"] .order-summary-row span,
html[data-theme="dark"] .order-summary-total span {
    color: #9bb4c5 !important;
}

html[data-theme="dark"] .order-summary-row strong,
html[data-theme="dark"] .order-summary-total strong,
html[data-theme="dark"] .order-summary-total b {
    color: #f4fbff !important;
}

/* ---------- DELIVERY OPTIONS ---------- */

html[data-theme="dark"] .delivery-option {
    background: #0d2439 !important;
    color: #f4fbff !important;
    border-color: rgba(105, 215, 255, .18) !important;
}

html[data-theme="dark"] .delivery-option:hover {
    border-color: rgba(105, 215, 255, .45) !important;
}

html[data-theme="dark"] .delivery-option.is-selected {
    background: #102d48 !important;
    border-color: #69d7ff !important;
}

html[data-theme="dark"] .delivery-option-content strong,
html[data-theme="dark"] .delivery-option-content h3 {
    color: #f4fbff !important;
}

html[data-theme="dark"] .delivery-option-content small {
    color: #a9c2d3 !important;
}

/* ---------- DELIVERY SUMMARY ---------- */

html[data-theme="dark"] .delivery-summary {
    background: #0d2439 !important;
    color: #f4fbff !important;
    border-color: rgba(105, 215, 255, .15) !important;
}

html[data-theme="dark"] .delivery-summary span {
    color: #91aabd !important;
}

html[data-theme="dark"] .delivery-summary strong {
    color: #f4fbff !important;
}

/* ---------- FORM LABELS ---------- */

html[data-theme="dark"] .form-label,
html[data-theme="dark"] .form-field label {
    color: #91abc0 !important;
}

/* ---------- FORM INPUTS ---------- */

html[data-theme="dark"] .form-field input,
html[data-theme="dark"] .form-field textarea,
html[data-theme="dark"] .form-field select {
    background: #071925 !important;
    color: #f4fbff !important;
    border-color: rgba(105, 215, 255, .24) !important;
}

html[data-theme="dark"] .form-field input:focus,
html[data-theme="dark"] .form-field textarea:focus,
html[data-theme="dark"] .form-field select:focus {
    border-color: #69d7ff !important;
    box-shadow: 0 0 0 3px rgba(105, 215, 255, .10);
}

html[data-theme="dark"] .form-field input::placeholder,
html[data-theme="dark"] .form-field textarea::placeholder {
    color: #6f899d !important;
}

/* ---------- REVIEW PANELS ---------- */

html[data-theme="dark"] .review-panel,
html[data-theme="dark"] .review-summary {
    background: #0d2439 !important;
    color: #f4fbff !important;
    border-color: rgba(105, 215, 255, .18) !important;
}

html[data-theme="dark"] .review-panel h3,
html[data-theme="dark"] .review-panel h4,
html[data-theme="dark"] .review-summary h3,
html[data-theme="dark"] .review-summary h4 {
    color: #f4fbff !important;
}

html[data-theme="dark"] .review-product-row {
    background: #071925 !important;
    color: #f4fbff !important;
    border-color: rgba(105, 215, 255, .15) !important;
}

html[data-theme="dark"] .review-product-row strong,
html[data-theme="dark"] .review-product-row b {
    color: #f4fbff !important;
}

html[data-theme="dark"] .review-product-row span,
html[data-theme="dark"] .review-product-row small {
    color: #9eb7c8 !important;
}

/* ---------- BACK BUTTON ---------- */

html[data-theme="dark"] .order-back,
html[data-theme="dark"] .confirmation-back {
    color: #9bb4c5 !important;
}

html[data-theme="dark"] .order-back:hover,
html[data-theme="dark"] .confirmation-back:hover {
    color: #69d7ff !important;
}

/* ---------- MAIN CONTINUE BUTTON ---------- */

html[data-theme="dark"] .order-drawer .button,
html[data-theme="dark"] .order-drawer button[data-order-next],
html[data-theme="dark"] .order-drawer .continue-button {
    color: #03111f !important;
}

/* ---------- NOTES / HELPER TEXT ---------- */

html[data-theme="dark"] .order-note {
    color: #8ea7b9 !important;
}

/* ---------- MOBILE DARK MODE ---------- */

@media (max-width: 760px) {

    html[data-theme="dark"] .order-product {
        background: #0d2439 !important;
    }

    html[data-theme="dark"] .order-product-info h3 {
        color: #f4fbff !important;
    }

    html[data-theme="dark"] .order-product-info p {
        color: #a9c2d3 !important;
    }

    html[data-theme="dark"] .order-product .order-price {
        color: #f4fbff !important;
    }

    html[data-theme="dark"] .order-product .order-price small {
        color: #9eb7c7 !important;
    }

    html[data-theme="dark"] .delivery-option {
        background: #0d2439 !important;
    }

    html[data-theme="dark"] .delivery-option.is-selected {
        background: #102d48 !important;
    }

    html[data-theme="dark"] .review-panel,
    html[data-theme="dark"] .review-summary {
        background: #0d2439 !important;
    }
}
/* =========================================================
   MENCC DARK MODE — FINAL ORDER DESK CONTRAST FIX
   ========================================================= */

/* ================================
   TOP ORDER PROGRESS
   ================================ */

html[data-theme="dark"] .order-progress-step {
    color: #b8cbd8 !important;
}

html[data-theme="dark"] .order-progress-step span,
html[data-theme="dark"] .order-progress-step strong {
    color: inherit !important;
}

html[data-theme="dark"] .order-progress-step.active {
    color: #69d7ff !important;
}

html[data-theme="dark"] .order-progress-line {
    background: rgba(183, 236, 255, .28) !important;
}


/* ================================
   CLOSE / X BUTTON
   ================================ */

html[data-theme="dark"] .order-close {
    background: #f4fbff !important;
    color: #08233a !important;
    border-color: rgba(105, 215, 255, .35) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] .order-close::before,
html[data-theme="dark"] .order-close::after {
    background: #08233a !important;
}

html[data-theme="dark"] .order-close:hover {
    background: #69d7ff !important;
    color: #03111f !important;
    border-color: #69d7ff !important;
}

html[data-theme="dark"] .order-close:hover::before,
html[data-theme="dark"] .order-close:hover::after {
    background: #03111f !important;
}


/* ================================
   STEP NUMBER — 01 / 02 / 03 / 04
   ================================ */

html[data-theme="dark"] .order-step-number {
    background: #eaf8ff !important;
    color: #08233a !important;
    border: 1px solid rgba(105, 215, 255, .35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .20);
}


/* ================================
   ORDER HEADINGS
   ================================ */

html[data-theme="dark"] .order-step-header h2 {
    color: #f5fbff !important;
}

html[data-theme="dark"] .order-eyebrow {
    color: #69d7ff !important;
}

html[data-theme="dark"] .order-step-header p:last-child {
    color: #b9cfdd !important;
}


/* ================================
   PRODUCT CARDS
   ================================ */

html[data-theme="dark"] .order-product {
    background: #102b43 !important;
    color: #f5fbff !important;
    border-color: rgba(105, 215, 255, .24) !important;
}

html[data-theme="dark"] .order-product:hover,
html[data-theme="dark"] .order-product.is-selected {
    border-color: rgba(105, 215, 255, .55) !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] .order-product-size {
    color: #69d7ff !important;
}

html[data-theme="dark"] .order-product-info h3 {
    color: #f5fbff !important;
}

html[data-theme="dark"] .order-product-info p {
    color: #b5cad8 !important;
}

html[data-theme="dark"] .order-price {
    color: #f5fbff !important;
}


/* ================================
   QUANTITY BUTTONS
   ================================ */

html[data-theme="dark"] .quantity-btn {
    background: #071a2b !important;
    color: #f5fbff !important;
    border-color: rgba(183, 236, 255, .28) !important;
}

html[data-theme="dark"] .quantity-btn:hover {
    background: #69d7ff !important;
    color: #03111f !important;
    border-color: #69d7ff !important;
}

html[data-theme="dark"] .quantity-value {
    color: #f5fbff !important;
}


/* ================================
   ORDER SUMMARY
   ================================ */

html[data-theme="dark"] .order-summary {
    background: #0b2034 !important;
    color: #f5fbff !important;
    border-color: rgba(105, 215, 255, .22) !important;
}

html[data-theme="dark"] .order-summary-row span,
html[data-theme="dark"] .order-summary-total span {
    color: #91adbf !important;
}

html[data-theme="dark"] .order-summary-row strong,
html[data-theme="dark"] .order-summary-total strong {
    color: #f5fbff !important;
}

html[data-theme="dark"] .order-summary-divider {
    background: rgba(183, 236, 255, .16) !important;
}


/* ================================
   ALL CONTINUE BUTTONS
   ================================ */

html[data-theme="dark"] .order-continue {
    background: #69d7ff !important;
    color: #03111f !important;
    border: 1px solid #69d7ff !important;
    box-shadow: 0 12px 30px rgba(105, 215, 255, .18);
}

html[data-theme="dark"] .order-continue span {
    color: #03111f !important;
}

html[data-theme="dark"] .order-continue:hover:not(:disabled) {
    background: #f4fbff !important;
    color: #03111f !important;
    border-color: #f4fbff !important;
    box-shadow: 0 16px 34px rgba(105, 215, 255, .24);
}

html[data-theme="dark"] .order-continue:hover:not(:disabled) span {
    color: #03111f !important;
}

html[data-theme="dark"] .order-continue:disabled {
    background: #28465a !important;
    color: #7f9bab !important;
    border-color: #28465a !important;
    opacity: 1 !important;
}

html[data-theme="dark"] .order-continue:disabled span {
    color: #7f9bab !important;
}


/* ================================
   BACK BUTTON
   ================================ */

html[data-theme="dark"] .order-back,
html[data-theme="dark"] .confirmation-back {
    color: #aac0ce !important;
}

html[data-theme="dark"] .order-back:hover,
html[data-theme="dark"] .confirmation-back:hover {
    color: #69d7ff !important;
}


/* ================================
   DELIVERY OPTIONS
   ================================ */

html[data-theme="dark"] .delivery-option {
    background: #102b43 !important;
    color: #f5fbff !important;
    border-color: rgba(105, 215, 255, .22) !important;
}

html[data-theme="dark"] .delivery-option:hover {
    border-color: rgba(105, 215, 255, .48) !important;
}

html[data-theme="dark"] .delivery-option.is-selected {
    background: #123b5d !important;
    border-color: #69d7ff !important;
    box-shadow: 0 10px 28px rgba(105, 215, 255, .10);
}

html[data-theme="dark"] .delivery-option-icon {
    background: #eaf8ff !important;
    color: #0877c9 !important;
}

html[data-theme="dark"] .delivery-option-content strong {
    color: #f5fbff !important;
}

html[data-theme="dark"] .delivery-option-content small {
    color: #a9c1d0 !important;
}

html[data-theme="dark"] .delivery-option-check {
    color: #69d7ff !important;
}


/* ================================
   FORM LABELS
   ================================ */

html[data-theme="dark"] .form-label,
html[data-theme="dark"] .form-field label {
    color: #9db6c7 !important;
}


/* ================================
   FORM INPUTS
   ================================ */

html[data-theme="dark"] .form-field input,
html[data-theme="dark"] .form-field textarea,
html[data-theme="dark"] .form-field select {
    background: #071a2b !important;
    color: #f5fbff !important;
    border-color: rgba(105, 215, 255, .28) !important;
}

html[data-theme="dark"] .form-field input::placeholder,
html[data-theme="dark"] .form-field textarea::placeholder {
    color: #7691a3 !important;
}

html[data-theme="dark"] .form-field input:focus,
html[data-theme="dark"] .form-field textarea:focus,
html[data-theme="dark"] .form-field select:focus {
    border-color: #69d7ff !important;
    box-shadow: 0 0 0 3px rgba(105, 215, 255, .10);
}


/* ================================
   DELIVERY SUMMARY
   ================================ */

html[data-theme="dark"] .delivery-summary {
    background: #0d2941 !important;
    border-color: rgba(105, 215, 255, .20) !important;
}

html[data-theme="dark"] .delivery-summary span {
    color: #91adbf !important;
}

html[data-theme="dark"] .delivery-summary strong {
    color: #f5fbff !important;
}


/* ================================
   REVIEW
   ================================ */

html[data-theme="dark"] .review-panel,
html[data-theme="dark"] .review-summary {
    background: #102b43 !important;
    color: #f5fbff !important;
    border-color: rgba(105, 215, 255, .22) !important;
}

html[data-theme="dark"] .review-product-row {
    background: #071a2b !important;
    color: #f5fbff !important;
    border-color: rgba(105, 215, 255, .18) !important;
}

html[data-theme="dark"] .review-product-row strong,
html[data-theme="dark"] .review-product-row b {
    color: #f5fbff !important;
}

html[data-theme="dark"] .review-product-row span,
html[data-theme="dark"] .review-product-row small {
    color: #9eb7c7 !important;
}


/* ================================
   ORDER NOTES
   ================================ */

html[data-theme="dark"] .order-note {
    color: #91aabd !important;
}


/* ================================
   MOBILE
   ================================ */

@media (max-width: 760px) {

    html[data-theme="dark"] .order-progress-step {
        color: #b8cbd8 !important;
    }

    html[data-theme="dark"] .order-progress-step.active {
        color: #69d7ff !important;
    }

    html[data-theme="dark"] .order-step-number {
        background: #eaf8ff !important;
        color: #08233a !important;
    }

    html[data-theme="dark"] .order-continue {
        background: #69d7ff !important;
        color: #03111f !important;
    }

    html[data-theme="dark"] .order-continue:disabled {
        background: #28465a !important;
        color: #7f9bab !important;
    }

}
/* =========================================================
   MENCC DARK MODE — SELECTED ORDER OVERVIEW
   ========================================================= */

html[data-theme="dark"] .order-overview {
    background: linear-gradient(145deg, #0b3155, #061a30) !important;
    color: #f5fbff !important;
    border: 1px solid rgba(105, 215, 255, .28) !important;
    box-shadow: 0 20px 55px rgba(0, 0, 0, .32) !important;
}


/* HEADER */

html[data-theme="dark"] .order-overview-header .section-label {
    color: #69d7ff !important;
}

html[data-theme="dark"] .order-overview-status {
    color: #69d7ff !important;
    background: rgba(105, 215, 255, .08) !important;
    border-color: rgba(105, 215, 255, .35) !important;
}


/* MAIN TITLE */

html[data-theme="dark"] .order-overview-details h3 {
    color: #f5fbff !important;
}

html[data-theme="dark"] .order-overview-caption {
    color: #a9c2d1 !important;
}


/* SELECTED PRODUCTS */

html[data-theme="dark"] .order-overview-item {
    background: rgba(7, 26, 43, .78) !important;
    border-color: rgba(105, 215, 255, .22) !important;
}

html[data-theme="dark"] .order-overview-item-info strong {
    color: #f5fbff !important;
}

html[data-theme="dark"] .order-overview-item-info span {
    color: #9eb9c9 !important;
}

html[data-theme="dark"] .order-overview-item-price {
    color: #f5fbff !important;
}


/* EMPTY STATE */

html[data-theme="dark"] .order-overview-empty {
    color: #9eb9c9 !important;
    border-color: rgba(105, 215, 255, .25) !important;
    background: rgba(7, 26, 43, .45) !important;
}


/* DELIVERY / CUSTOMER DETAILS */

html[data-theme="dark"] .overview-detail {
    background: rgba(7, 26, 43, .78) !important;
    border-color: rgba(105, 215, 255, .20) !important;
}

html[data-theme="dark"] .overview-detail span {
    color: #8faaba !important;
}

html[data-theme="dark"] .overview-detail strong {
    color: #f5fbff !important;
}


/* TOTAL */

html[data-theme="dark"] .order-overview-total {
    background: rgba(105, 215, 255, .09) !important;
    border-color: rgba(105, 215, 255, .30) !important;
}

html[data-theme="dark"] .order-overview-total span {
    color: #a8c1d0 !important;
}

html[data-theme="dark"] .order-overview-total strong {
    color: #f5fbff !important;
}


/* CONFIRMATION / READY BADGE */

html[data-theme="dark"] .order-overview .review-badge,
html[data-theme="dark"] .order-overview .status-badge {
    color: #69d7ff !important;
    background: rgba(105, 215, 255, .10) !important;
    border-color: rgba(105, 215, 255, .30) !important;
}


/* ANY TEXT INSIDE ORDER OVERVIEW */

html[data-theme="dark"] .order-overview p,
html[data-theme="dark"] .order-overview span,
html[data-theme="dark"] .order-overview small {
    color: #b4cad7;
}

html[data-theme="dark"] .order-overview strong,
html[data-theme="dark"] .order-overview h3 {
    color: #f5fbff;
}


/* MOBILE */

@media (max-width: 760px) {

    html[data-theme="dark"] .order-overview-item {
        background: rgba(7, 26, 43, .9) !important;
    }

    html[data-theme="dark"] .overview-detail {
        background: rgba(7, 26, 43, .9) !important;
    }

    html[data-theme="dark"] .order-overview-total {
        background: rgba(105, 215, 255, .10) !important;
    }

}
/* =========================================================
   DARK MODE — FINAL REVIEW PAGE DETAILS
   ========================================================= */

html[data-theme="dark"] .review-main {
    color: #f4fbff;
}

/* Delivery + Customer white boxes */
html[data-theme="dark"] .review-details-grid > div {
    background: #0b2035 !important;
    border: 1px solid rgba(105, 215, 255, .20) !important;
    color: #f4fbff !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}

/* Small labels:
   DELIVERY TYPE
   AREA / CITY
   ADDRESS
   NOTES
   FULL NAME
   PHONE
   EMAIL
*/
html[data-theme="dark"] .review-details-grid span {
    color: #75cfff !important;
}

/* Actual information inside the boxes */
html[data-theme="dark"] .review-details-grid strong {
    color: #f5fbff !important;
}

/* Make empty values still visible */
html[data-theme="dark"] .review-details-grid strong:empty::after {
    content: "—";
    color: #7891a5;
}

/* Delivery section */
html[data-theme="dark"] .review-panel {
    background: #0a1c2e !important;
    border-color: rgba(105, 215, 255, .16) !important;
    color: #f4fbff !important;
}

/* Customer section */
html[data-theme="dark"] .review-panel {
    box-shadow: 0 12px 35px rgba(0, 0, 0, .18);
}

/* Section headings */
html[data-theme="dark"] .review-panel-heading h3 {
    color: #f5fbff !important;
}

html[data-theme="dark"] .review-panel-heading span {
    color: #69d7ff !important;
}

/* Product rows on the review page */
html[data-theme="dark"] .review-product-row {
    background: #071a2c !important;
    border-color: rgba(105, 215, 255, .18) !important;
    color: #f5fbff !important;
}

html[data-theme="dark"] .review-product-info strong {
    color: #f5fbff !important;
}

html[data-theme="dark"] .review-product-info span {
    color: #8faabd !important;
}

html[data-theme="dark"] .review-product-price {
    color: #f5fbff !important;
}


/* Ready to confirm badge */
html[data-theme="dark"] .review-badge {
    color: #69d7ff !important;
    background: rgba(105, 215, 255, .10) !important;
    border-color: rgba(105, 215, 255, .30) !important;
}


/* Review total */
html[data-theme="dark"] .review-total-row {
    border-top-color: rgba(183, 236, 255, .14) !important;
}

html[data-theme="dark"] .review-total-row span {
    color: #8faabd !important;
}

html[data-theme="dark"] .review-total-row strong {
    color: #f5fbff !important;
}


/* Review note */
html[data-theme="dark"] .review-note {
    color: #91a8bc !important;
}


/* Review summary card */
html[data-theme="dark"] .review-summary {
    background: #0b2035 !important;
    border-color: rgba(105, 215, 255, .18) !important;
    color: #f5fbff !important;
}

html[data-theme="dark"] .review-summary .section-label {
    color: #69d7ff !important;
}


/* Mobile / smaller screens */
@media (max-width: 760px) {

    html[data-theme="dark"] .review-details-grid {
        gap: 9px;
    }

    html[data-theme="dark"] .review-details-grid > div {
        background: #0b2035 !important;
    }

    html[data-theme="dark"] .review-panel,
    html[data-theme="dark"] .review-summary {
        background: #0a1c2e !important;
    }
}
/* =========================================================
   DARK MODE — MOBILE MENU BUTTON VISIBILITY
   ========================================================= */

html[data-theme="dark"] .menu-toggle {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .menu-toggle::before,
html[data-theme="dark"] .menu-toggle::after,
html[data-theme="dark"] .menu-toggle span,
html[data-theme="dark"] .menu-toggle span::before,
html[data-theme="dark"] .menu-toggle span::after {
    background-color: #ffffff;
}

html[data-theme="dark"] .menu-toggle:hover {
    border-color: var(--aqua-300);
    background: rgba(105, 215, 255, 0.08);
}

html[data-theme="dark"] .menu-toggle:active {
    transform: scale(0.96);
}
/* =========================================================
   MENCC BIRTHDAY FIELD
========================================================= */

.customer-birthday-field {
    position: relative;
    margin-top: 8px;
    padding: 20px;
    border: 1px solid rgba(21, 120, 221, 0.12);
    border-radius: 20px;
    background:
        linear-gradient(
            145deg,
            rgba(237, 250, 255, 0.95),
            rgba(255, 255, 255, 0.98)
        );
    box-shadow:
        0 12px 30px rgba(4, 31, 58, 0.06);
    overflow: hidden;
}

.customer-birthday-field::before {
    content: "";
    position: absolute;
    top: -45px;
    right: -35px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(105, 215, 255, 0.13);
    pointer-events: none;
}

.customer-birthday-field label {
    position: relative;
    z-index: 1;
    display: block;
    margin-bottom: 6px;
    color: var(--ink);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.birthday-question {
    position: relative;
    z-index: 1;
    margin: 0 0 16px;
    color: var(--ink-soft);
    font-family: var(--display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.4;
}

.birthday-inputs {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: .8fr 1.5fr;
    gap: 10px;
}

.birthday-inputs select {
    width: 100%;
    min-height: 52px;
    padding: 0 42px 0 15px;
    border: 1px solid rgba(7, 26, 48, 0.12);
    border-radius: 14px;
    outline: none;
    background-color: #ffffff;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;

    background-image:
        linear-gradient(45deg, transparent 50%, #1578dd 50%),
        linear-gradient(135deg, #1578dd 50%, transparent 50%);
    background-position:
        calc(100% - 20px) 22px,
        calc(100% - 15px) 22px;
    background-size:
        5px 5px,
        5px 5px;
    background-repeat: no-repeat;

    box-shadow:
        0 5px 16px rgba(4, 31, 58, 0.04);

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s var(--ease);
}

.birthday-inputs select:hover {
    border-color: rgba(21, 120, 221, 0.35);
    transform: translateY(-1px);
}

.birthday-inputs select:focus {
    border-color: var(--aqua-500);
    box-shadow:
        0 0 0 4px rgba(105, 215, 255, 0.12),
        0 8px 20px rgba(4, 31, 58, 0.06);
}

.birthday-inputs select:invalid {
    color: var(--ink-soft);
}

.birthday-inputs option {
    color: var(--ink);
    background: #ffffff;
}


/* =========================================================
   BIRTHDAY · DARK MODE
========================================================= */

html[data-theme="dark"] .customer-birthday-field {
    background:
        linear-gradient(
            145deg,
            #0d2439,
            #071925
        );
    border-color: rgba(105, 215, 255, 0.18);
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.20);
}

html[data-theme="dark"] .customer-birthday-field::before {
    background: rgba(105, 215, 255, 0.08);
}

html[data-theme="dark"] .customer-birthday-field label {
    color: #a9c2d3;
}

html[data-theme="dark"] .birthday-question {
    color: #f4fbff;
}

html[data-theme="dark"] .birthday-inputs select {
    background-color: #071925;
    color: #f4fbff;
    border-color: rgba(105, 215, 255, 0.24);
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.16);

    background-image:
        linear-gradient(45deg, transparent 50%, #69d7ff 50%),
        linear-gradient(135deg, #69d7ff 50%, transparent 50%);
}

html[data-theme="dark"] .birthday-inputs select:hover {
    border-color: rgba(105, 215, 255, 0.48);
}

html[data-theme="dark"] .birthday-inputs select:focus {
    border-color: #69d7ff;
    box-shadow:
        0 0 0 4px rgba(105, 215, 255, 0.10),
        0 8px 22px rgba(0, 0, 0, 0.20);
}

html[data-theme="dark"] .birthday-inputs option {
    color: #f4fbff;
    background: #071925;
}


/* =========================================================
   BIRTHDAY · MOBILE
========================================================= */

@media (max-width: 560px) {

    .customer-birthday-field {
        padding: 17px;
        border-radius: 17px;
    }

    .birthday-question {
        font-size: 14px;
        margin-bottom: 13px;
    }

    .birthday-inputs {
        grid-template-columns: 1fr 1.45fr;
        gap: 8px;
    }

    .birthday-inputs select {
        min-height: 50px;
        padding-left: 13px;
        padding-right: 35px;
        border-radius: 12px;
        font-size: 12px;

        background-position:
            calc(100% - 16px) 21px,
            calc(100% - 11px) 21px;
    }
}
/* =========================================================
   MENCC PREMIUM FOOTER
   ========================================================= */

.mencc-footer {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            #061923 0%,
            #082635 48%,
            #061722 100%
        );
    color: #ffffff;
}


/* Subtle light-blue atmosphere */

.mencc-footer::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    top: -280px;
    right: -180px;
    border-radius: 50%;
    background: rgba(105, 215, 255, 0.08);
    filter: blur(80px);
    pointer-events: none;
}

.mencc-footer::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    bottom: -260px;
    left: -180px;
    border-radius: 50%;
    background: rgba(105, 215, 255, 0.055);
    filter: blur(75px);
    pointer-events: none;
}


/* Main footer */

.mencc-footer-inner {
    position: relative;
    z-index: 1;

    width: min(1240px, calc(100% - 80px));
    margin: 0 auto;

    display: grid;
    grid-template-columns:
        minmax(260px, 1.45fr)
        minmax(150px, .75fr)
        minmax(220px, 1fr)
        minmax(220px, 1fr);

    gap: 70px;

    padding: 100px 0 85px;
}


/* Brand */

.mencc-footer-brand {
    max-width: 350px;
}

.mencc-footer-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.mencc-footer-logo {
    display: block;
    width: 78px;
    height: 78px;
    object-fit: contain;
}

.mencc-footer-tagline {
    display: flex;
    align-items: center;
    gap: 9px;

    margin: 23px 0 0;

    color: #8fd7ff;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
    line-height: 1.5;
}

.mencc-footer-tagline span {
    opacity: .55;
}

.mencc-footer-description {
    max-width: 330px;
    margin: 18px 0 0;

    color: rgba(255, 255, 255, .62);

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

.mencc-footer-order {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-top: 28px;
    padding: 12px 17px;

    border: 1px solid rgba(143, 215, 255, .28);
    border-radius: 999px;

    color: #ffffff;
    background: rgba(143, 215, 255, .07);

    font-size: 11px;
    font-weight: 750;
    letter-spacing: .04em;

    text-decoration: none;

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

.mencc-footer-order span {
    color: #8fd7ff;
    transition: transform .35s ease;
}

.mencc-footer-order:hover {
    background: rgba(143, 215, 255, .13);
    border-color: rgba(143, 215, 255, .55);
    transform: translateY(-2px);
}

.mencc-footer-order:hover span {
    transform: translate(3px, -3px);
}


/* Column headings */

.mencc-footer-heading {
    margin: 8px 0 25px;

    color: #ffffff;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}


/* Quick links */

.mencc-footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.mencc-footer-links a {
    position: relative;

    color: rgba(255, 255, 255, .62);

    font-size: 14px;
    line-height: 1.5;

    text-decoration: none;

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

.mencc-footer-links a::after {
    content: "";
    position: absolute;

    left: 0;
    bottom: -4px;

    width: 0;
    height: 1px;

    background: #8fd7ff;

    transition: width .3s ease;
}

.mencc-footer-links a:hover {
    color: #ffffff;
    transform: translateX(3px);
}

.mencc-footer-links a:hover::after {
    width: 100%;
}


/* Contact */

.mencc-footer-contact {
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.mencc-footer-contact a,
.mencc-footer-location {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    color: rgba(255, 255, 255, .62);

    font-size: 13px;
    line-height: 1.55;

    text-decoration: none;

    transition: color .3s ease;
}

.mencc-footer-contact a:hover {
    color: #ffffff;
}

.mencc-contact-icon {
    flex: 0 0 20px;

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

    width: 20px;
    height: 20px;

    color: #8fd7ff;

    font-size: 15px;
}


/* Social */

.mencc-footer-socials {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mencc-footer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 45px;
    height: 45px;

    border: 1px solid rgba(143, 215, 255, .16);
    border-radius: 13px;

    color: #8fd7ff;
    background: rgba(255, 255, 255, .045);

    font-size: 18px;

    text-decoration: none;

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

.mencc-footer-socials a:hover {
    transform: translateY(-4px);
    border-color: rgba(143, 215, 255, .5);
    background: rgba(143, 215, 255, .1);
    color: #ffffff;
}

.mencc-footer-social-copy {
    max-width: 260px;
    margin: 18px 0 0;

    color: rgba(255, 255, 255, .55);

    font-size: 13px;
    line-height: 1.7;
}


/* Footer bottom */

.mencc-footer-bottom {
    position: relative;
    z-index: 1;

    border-top: 1px solid rgba(255, 255, 255, .09);
}

.mencc-footer-bottom-inner {
    width: min(1240px, calc(100% - 80px));
    min-height: 76px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr auto 1fr;

    align-items: center;
    gap: 30px;
}

.mencc-footer-bottom p {
    margin: 0;

    color: rgba(255, 255, 255, .42);

    font-size: 11px;
    letter-spacing: .02em;
}

.mencc-footer-legal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
}

.mencc-footer-legal a {
    color: rgba(255, 255, 255, .45);

    font-size: 10px;
    text-decoration: none;

    transition: color .3s ease;
}

.mencc-footer-legal a:hover {
    color: #8fd7ff;
}

.mencc-back-top {
    justify-self: end;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    border: 0;
    padding: 0;

    color: rgba(255, 255, 255, .5);
    background: transparent;

    font: inherit;
    font-size: 10px;
    letter-spacing: .06em;

    cursor: pointer;

    transition: color .3s ease;
}

.mencc-back-top span {
    color: #8fd7ff;
    font-size: 15px;

    transition: transform .3s ease;
}

.mencc-back-top:hover {
    color: #ffffff;
}

.mencc-back-top:hover span {
    transform: translateY(-3px);
}


/* =========================================================
   FOOTER RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    .mencc-footer-inner {
        grid-template-columns:
            1.2fr 1fr 1.2fr;

        gap: 55px;
    }

    .mencc-footer-brand {
        grid-column: 1 / -1;
        max-width: 500px;
    }

    .mencc-footer-bottom-inner {
        grid-template-columns: 1fr auto;
    }

    .mencc-footer-legal {
        justify-content: flex-end;
    }

    .mencc-back-top {
        grid-column: 1 / -1;
        justify-self: start;
        padding-bottom: 22px;
    }
}


/* =========================================================
   MOBILE FOOTER
   ========================================================= */

@media (max-width: 700px) {

    .mencc-footer-inner {
        width: calc(100% - 50px);

        display: flex;
        flex-direction: column;

        gap: 48px;

        padding: 70px 0 60px;
    }

    .mencc-footer-brand {
        max-width: 100%;
    }

    .mencc-footer-logo {
        width: 68px;
        height: 68px;
    }

    .mencc-footer-tagline {
        flex-wrap: wrap;
        margin-top: 20px;

        font-size: 9px;
    }

    .mencc-footer-description {
        font-size: 13px;
        line-height: 1.75;
    }

    .mencc-footer-heading {
        margin-top: 0;
        margin-bottom: 20px;

        font-size: 11px;
    }

    .mencc-footer-links {
        gap: 14px;
    }

    .mencc-footer-links a {
        font-size: 15px;
    }

    .mencc-footer-contact {
        gap: 16px;
    }

    .mencc-footer-contact a,
    .mencc-footer-location {
        font-size: 13px;
    }

    .mencc-footer-socials a {
        width: 48px;
        height: 48px;
    }

    .mencc-footer-bottom-inner {
        width: calc(100% - 50px);

        display: flex;
        flex-direction: column;
        align-items: flex-start;

        gap: 20px;

        padding: 25px 0 30px;
    }

    .mencc-footer-legal {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 12px 18px;
    }

    .mencc-back-top {
        padding: 0;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .mencc-footer *,
    .mencc-footer *::before,
    .mencc-footer *::after {
        transition: none !important;
    }
}
/* =========================================================
   MENCC REAL FOOTER ICONS
   ========================================================= */

.mencc-contact-icon {
    flex: 0 0 22px;

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

    width: 22px;
    height: 22px;

    color: #8fd7ff;

    font-size: 15px;
}


.mencc-footer-socials a i {
    font-size: 18px;
    line-height: 1;
}


/* WhatsApp */

.mencc-footer-socials a:hover .fa-whatsapp {
    color: #8fd7ff;
}


/* Instagram */

.mencc-footer-socials a:hover .fa-instagram {
    color: #8fd7ff;
}


/* X */

.mencc-footer-socials a:hover .fa-x-twitter {
    color: #8fd7ff;
}


/* Location */

.mencc-footer-location {
    cursor: pointer;
}

.mencc-footer-location .mencc-contact-icon {
    transition: transform .3s ease;
}

.mencc-footer-location:hover .mencc-contact-icon {
    transform: translateY(-2px);
}
.mencc-map-hint {
    display: block;
    margin-top: 4px;

    color: rgba(143, 215, 255, .7);

    font-size: 10px;
    letter-spacing: .03em;
    transition: color .3s ease;
}

.mencc-footer-location:hover .mencc-map-hint {
    color: #8fd7ff;
}
.mencc-footer-socials a i {
    font-size: 19px;
    line-height: 1;
    display: block;
}

.mencc-footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mencc-footer-socials a:hover i {
    color: #8fd7ff;
}
/* =========================================================
   MENCC HEADER BRAND
========================================================= */

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* MENCC navbar logo — keep visible in both themes */
.brand-logo {
    display: block;
    width: 36px;
    height: 36px;
    object-fit: contain;
    object-position: center;
    opacity: 1;
    visibility: visible;
    filter: none !important;
}


.brand-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.brand-copy strong {
    font-family: var(--display);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1;
}

.brand-copy small {
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .23em;
    opacity: .68;
}
/* =========================================================
   MENCC DARK MODE — LIGHT CTA BUTTON VISIBILITY
========================================================= */

html[data-theme="dark"] .order-section .button-light,
html[data-theme="dark"] .final-section .button-light {
    background: #f4fbff !important;
    color: #08233a !important;
    border: 1px solid rgba(105, 215, 255, .25) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .18) !important;
}

html[data-theme="dark"] .order-section .button-light span,
html[data-theme="dark"] .final-section .button-light span {
    color: #08233a !important;
}

html[data-theme="dark"] .order-section .button-light:hover,
html[data-theme="dark"] .final-section .button-light:hover {
    background: #69d7ff !important;
    color: #03111f !important;
    border-color: #69d7ff !important;
    box-shadow: 0 20px 45px rgba(105, 215, 255, .20) !important;
}

html[data-theme="dark"] .order-section .button-light:hover span,
html[data-theme="dark"] .final-section .button-light:hover span {
    color: #03111f !important;
}
/* =========================================================
   MENCC — DARK MODE ORDER SECTION
   PREMIUM HIGH-CONTRAST VERSION
========================================================= */

html[data-theme="dark"] .order-section {
    background:
        radial-gradient(
            circle at 85% 50%,
            rgba(105, 215, 255, .12),
            transparent 38%
        ),
        #061117 !important;
}

/* The white order card */
html[data-theme="dark"] .order-callout {
    background:
        linear-gradient(
            145deg,
            #102b43 0%,
            #0b2236 55%,
            #082033 100%
        ) !important;

    border: 1px solid rgba(105, 215, 255, .20) !important;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

/* 08 · ORDER */
html[data-theme="dark"] .order-callout .section-kicker {
    color: #69d7ff !important;
}

/* YOUR MENCC */
html[data-theme="dark"] .order-callout h2 {
    color: #f8fcff !important;
}

/* YOUR WAY */
html[data-theme="dark"] .order-callout h2 span {
    color: #69d7ff !important;
}

/* Description */
html[data-theme="dark"] .order-callout p {
    color: #c4d8e4 !important;
}

/* Start your order button */
html[data-theme="dark"] .order-section .button-light {
    background: #f4fbff !important;
    color: #061a2b !important;

    border: 1px solid rgba(255, 255, 255, .65) !important;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, .25),
        0 0 0 1px rgba(105, 215, 255, .08) !important;
}

html[data-theme="dark"] .order-section .button-light span {
    color: #061a2b !important;
}

/* Button hover */
html[data-theme="dark"] .order-section .button-light:hover {
    background: #69d7ff !important;
    color: #03111f !important;

    border-color: #69d7ff !important;

    box-shadow:
        0 18px 45px rgba(105, 215, 255, .22) !important;
}

html[data-theme="dark"] .order-section .button-light:hover span {
    color: #03111f !important;
}
/* =========================================================
   MENCC — DARK MODE COLLECTION FEATURE
   BRIGHT / PREMIUM CONTRAST
========================================================= */

html[data-theme="dark"] .collection-feature {
    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(105, 215, 255, .13),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #0d2d48 0%,
            #082238 55%,
            #061722 100%
        ) !important;

    color: #f8fcff !important;

    border: 1px solid rgba(105, 215, 255, .18) !important;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, .32),
        inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

/* DESIGNED FOR THE MOMENT */
html[data-theme="dark"] .collection-feature-copy .section-kicker {
    color: #8ee5ff !important;
}

/* MAIN HEADING */
html[data-theme="dark"] .collection-feature-copy h3 {
    color: #ffffff !important;
}

/* DESCRIPTION */
html[data-theme="dark"] .collection-feature-copy p {
    color: #c8dce7 !important;
}

/* SEE MENCC IN REAL LIFE */
html[data-theme="dark"] .collection-feature-copy .text-link {
    color: #69d7ff !important;
}

html[data-theme="dark"] .collection-feature-copy .text-link span {
    color: #69d7ff !important;
}

/* HOVER */
html[data-theme="dark"] .collection-feature-copy .text-link:hover {
    color: #b7ecff !important;
}

html[data-theme="dark"] .collection-feature-copy .text-link:hover span {
    color: #b7ecff !important;
}
/* =========================================================
   MENCC — DARK MODE MULTIPACK STRIP
========================================================= */

html[data-theme="dark"] .collection-strip {
    background:
        linear-gradient(
            135deg,
            #0d2d48 0%,
            #082238 55%,
            #061722 100%
        ) !important;

    border: 1px solid rgba(105, 215, 255, .18) !important;

    box-shadow:
        0 20px 55px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

/* FOR MORE OF THE MOMENT */
html[data-theme="dark"] .collection-strip .section-kicker {
    color: #69d7ff !important;
}

/* MENCC 75CL MULTIPACK */
html[data-theme="dark"] .collection-strip strong {
    color: #ffffff !important;
}

/* DESCRIPTION */
html[data-theme="dark"] .collection-strip p {
    color: #c5d9e5 !important;
}

/* IMAGE */
html[data-theme="dark"] .collection-strip-image {
    border-radius: 2px;
    overflow: hidden;
}
/* =========================================================
   MENCC — DARK MODE ORDER SUCCESS / CONFIRMATION
   ========================================================= */

html[data-theme="dark"] .order-confirmation {
    background:
        radial-gradient(
            circle at 50% 18%,
            rgba(105, 215, 255, .14),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #061722 0%,
            #071d2c 48%,
            #04131d 100%
        ) !important;

    color: #f4fbff !important;
}

/* Soft MENCC glow */
html[data-theme="dark"] .order-confirmation::before {
    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(105, 215, 255, .16),
            transparent 38%
        ) !important;
}

/* MENCC ORDER label */
html[data-theme="dark"] .order-confirmation > .section-label {
    color: #69d7ff !important;
}

/* Success check */
html[data-theme="dark"] .confirmation-check {
    background:
        linear-gradient(
            145deg,
            #0e3854,
            #08253a
        ) !important;

    color: #8ee5ff !important;

    border: 1px solid rgba(105, 215, 255, .28);

    box-shadow:
        0 0 0 10px rgba(105, 215, 255, .07),
        0 0 45px rgba(105, 215, 255, .30) !important;
}

/* YOUR ORDER IS READY */
html[data-theme="dark"] .order-confirmation h2 {
    color: #ffffff !important;
}

/* Main message */
html[data-theme="dark"] .confirmation-message {
    color: #c7dbe6 !important;
}

/* Order number + Total cards */
html[data-theme="dark"] .confirmation-order-number,
html[data-theme="dark"] .confirmation-total {
    background:
        linear-gradient(
            145deg,
            #0d2d48,
            #082238
        ) !important;

    border: 1px solid rgba(105, 215, 255, .20) !important;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, .24),
        inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

/* ORDER NUMBER / TOTAL labels */
html[data-theme="dark"] .confirmation-order-number span,
html[data-theme="dark"] .confirmation-total span {
    color: #9fc0d0 !important;
}

/* Order number */
html[data-theme="dark"] .confirmation-order-number strong {
    color: #ffffff !important;
}

/* Total amount */
html[data-theme="dark"] .confirmation-total strong {
    color: #69d7ff !important;
}

/* WhatsApp button */
html[data-theme="dark"] .payment-whatsapp {
    background:
        linear-gradient(
            135deg,
            #12d66f,
            #079447
        ) !important;

    color: #ffffff !important;

    border-color: rgba(126, 255, 176, .75) !important;

    box-shadow:
        0 0 18px rgba(35, 255, 116, .38),
        0 0 42px rgba(35, 255, 116, .18) !important;
}

/* WhatsApp text */
html[data-theme="dark"] .payment-option-content strong {
    color: #ffffff !important;
}

html[data-theme="dark"] .payment-option-content small {
    color: rgba(255, 255, 255, .88) !important;
}

/* WhatsApp arrow */
html[data-theme="dark"] .payment-option-arrow {
    color: #ffffff !important;
}

/* Back to review */
html[data-theme="dark"] .confirmation-back {
    color: #9edff7 !important;
}

html[data-theme="dark"] .confirmation-back:hover {
    color: #ffffff !important;
}

/* =========================================================
   MENCC GLASS NAVIGATION — LIQUID / PREMIUM SYSTEM
   Newest overrides intentionally live at the end so the
   existing site styling remains intact.
========================================================= */

html {
    scroll-padding-top: 102px;
}

section[id] {
    scroll-margin-top: 102px;
}

.landing-page .site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 3000;
    padding: 10px 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none;
}

.landing-page .site-header.scrolled {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Never let the landing-page glass navbar sit above the order drawer. */
.landing-page.order-open .site-header,
.landing-page .site-header.order-open-state {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.navbar {
    position: relative;
    isolation: isolate;
    width: min(1400px, calc(100% - 40px));
    height: 68px;
    margin: 0 auto;
    padding: 0 11px 0 18px;
    gap: 24px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 24px;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.78),
            rgba(245,250,253,.58) 52%,
            rgba(233,246,252,.50)
        );
    box-shadow:
        0 18px 48px rgba(6,27,52,.13),
        0 3px 12px rgba(6,27,52,.08),
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -1px 0 rgba(255,255,255,.30);
    backdrop-filter: blur(24px) saturate(155%);
    -webkit-backdrop-filter: blur(24px) saturate(155%);
    pointer-events: auto;
    overflow: hidden;
    transition:
        width .45s var(--ease),
        border-color .35s ease,
        box-shadow .45s ease,
        background .45s ease;
}

.navbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(
            circle at 8% 0%,
            rgba(255,255,255,.80),
            transparent 27%
        ),
        radial-gradient(
            circle at 92% 118%,
            rgba(105,215,255,.12),
            transparent 34%
        );
    pointer-events: none;
}

.navbar::after {
    content: "";
    position: absolute;
    top: -45%;
    left: -28%;
    width: 30%;
    height: 190%;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.42),
        transparent
    );
    filter: blur(4px);
    opacity: .58;
    transform: rotate(15deg) translateX(-160%);
    animation: menccGlassSheen 9s cubic-bezier(.22,1,.36,1) infinite;
    pointer-events: none;
}

@keyframes menccGlassSheen {
    0%, 62% {
        transform: rotate(15deg) translateX(-160%);
        opacity: 0;
    }
    68% {
        opacity: .48;
    }
    76%, 100% {
        transform: rotate(15deg) translateX(520%);
        opacity: 0;
    }
}

.brand,
.nav-links,
.nav-actions {
    position: relative;
    z-index: 2;
}

.brand {
    min-width: max-content;
}

.brand-logo {
    display: block;
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex: 0 0 36px;
    transition: filter .35s ease, transform .35s var(--ease);
}

.brand:hover .brand-logo {
    transform: translateY(-1px);
}

.brand-copy strong {
    color: #071a30;
}

.brand-copy small {
    color: #31506a;
}

.nav-links {
    gap: 7px;
    margin-left: auto;
    padding: 4px;
}

.nav-links a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 11px;
    border-radius: 14px;
    color: rgba(7,26,48,.70);
    letter-spacing: .11em;
    font-size: 9px;
    transition:
        color .25s ease,
        background-color .25s ease,
        box-shadow .25s ease,
        transform .25s var(--ease);
}

.nav-links a::after {
    display: none;
}

.nav-links a:hover {
    color: #071a30;
    background: rgba(255,255,255,.44);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.72),
        0 6px 18px rgba(7,26,48,.06);
    transform: translateY(-1px);
}

.nav-links .nav-discover-link {
    color: #0a5ea8;
    background: rgba(105,215,255,.08);
    border: 1px solid rgba(105,215,255,.16);
}

.nav-links .nav-discover-link:hover {
    color: #063e72;
    background: rgba(105,215,255,.16);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.76),
        0 8px 22px rgba(105,215,255,.12);
}

.nav-actions {
    gap: 9px;
}

.nav-status {
    color: rgba(7,26,48,.56);
    padding: 0 5px;
}

.nav-status i {
    box-shadow:
        0 0 0 4px rgba(105,215,255,.12),
        0 0 16px rgba(105,215,255,.76);
}

.theme-toggle {
    width: 42px !important;
    height: 42px !important;
    border-radius: 15px !important;
    border: 1px solid rgba(7,26,48,.12) !important;
    background: rgba(255,255,255,.40) !important;
    color: #071a30 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.84),
        0 6px 18px rgba(7,26,48,.05);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
}

.theme-toggle:hover {
    background: rgba(255,255,255,.68) !important;
    border-color: rgba(105,215,255,.36) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        0 10px 24px rgba(105,215,255,.13);
}

.nav-order-button {
    min-height: 42px;
    border: 1px solid rgba(21,120,221,.24) !important;
    background:
        linear-gradient(
            135deg,
            rgba(237,250,255,.95),
            rgba(183,236,255,.82)
        ) !important;
    color: #061b34 !important;
    box-shadow:
        0 10px 24px rgba(21,120,221,.13),
        inset 0 1px 0 rgba(255,255,255,.96);
}

.nav-order-button:hover {
    background:
        linear-gradient(
            135deg,
            #ffffff,
            #dff7ff
        ) !important;
    color: #04172b !important;
    box-shadow:
        0 14px 32px rgba(105,215,255,.22),
        inset 0 1px 0 rgba(255,255,255,1);
}

.menu-toggle {
    border-color: rgba(7,26,48,.12);
    background: rgba(255,255,255,.38);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.85),
        0 8px 22px rgba(7,26,48,.07);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.menu-toggle:hover {
    background: rgba(255,255,255,.62);
}

main {
    padding-top: 88px;
}


/* =========================================================
   MOBILE GLASS MENU
========================================================= */

.mobile-menu-bg {
    background:
        radial-gradient(
            circle at 82% 7%,
            rgba(105,215,255,.17),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            rgba(8,28,46,.93),
            rgba(2,12,23,.91)
        );
    backdrop-filter: blur(32px) saturate(145%);
    -webkit-backdrop-filter: blur(32px) saturate(145%);
}

.mobile-menu-inner {
    padding: 0 4px;
}

.mobile-menu-inner a {
    border-bottom-color: rgba(255,255,255,.08);
}

.mobile-menu-inner .mobile-discover-link {
    color: var(--aqua-300);
}

.mobile-menu-inner button {
    box-shadow:
        0 16px 38px rgba(105,215,255,.14),
        inset 0 1px 0 rgba(255,255,255,.65);
}


/* =========================================================
   ORDER OVERVIEW — GAME BELOW ORDER TOTAL
========================================================= */

.order-overview-main {
    display: block;
}

.order-overview-visual.order-catch-game {
    width: 100%;
    margin-top: 18px;
    min-height: 410px;
    padding: 18px;
    border-radius: 24px;
    background:
        radial-gradient(
            circle at 50% 4%,
            rgba(105,215,255,.23),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 92%,
            rgba(45,167,231,.10),
            transparent 34%
        ),
        linear-gradient(
            160deg,
            #0a3a66 0%,
            #062a50 48%,
            #02162c 100%
        );
    border: 1px solid rgba(183,236,255,.20);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 18px 44px rgba(1,14,29,.18);
}

.catch-game-top {
    align-items: flex-start;
}

.catch-game-heading {
    min-width: 0;
}

.catch-game-kicker {
    font-size: 7px;
    letter-spacing: .20em;
}

.catch-game-heading h4 {
    max-width: none;
    margin-top: 7px;
    font-size: clamp(22px, 3vw, 30px);
    letter-spacing: -.045em;
}

.catch-game-heading p {
    margin-top: 7px;
    color: rgba(255,255,255,.58);
    font-size: 10px;
    line-height: 1.55;
}

.catch-game-meta {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
}

.catch-game-badge {
    padding: 7px 9px;
    border: 1px solid rgba(183,236,255,.16);
    border-radius: 999px;
    color: rgba(255,255,255,.54);
    background: rgba(255,255,255,.045);
    font-size: 6px;
    font-weight: 800;
    letter-spacing: .14em;
    white-space: nowrap;
}

.catch-game-timer {
    min-width: 42px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(183,236,255,.34);
    background: rgba(255,255,255,.08);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 8px 20px rgba(0,0,0,.12);
}

.catch-game-stage {
    min-height: 315px;
    margin-top: 15px;
    border-radius: 20px;
    border-color: rgba(255,255,255,.12);
    background:
        radial-gradient(
            circle at 50% 14%,
            rgba(105,215,255,.14),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            rgba(105,215,255,.08),
            rgba(0,14,29,.18)
        ),
        rgba(255,255,255,.025);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -28px 55px rgba(0,8,20,.20);
}

.catch-game-water-haze {
    position: absolute;
    inset: auto 8% 4% 8%;
    height: 90px;
    border-radius: 50%;
    background:
        radial-gradient(
            ellipse at center,
            rgba(105,215,255,.17),
            transparent 70%
        );
    filter: blur(18px);
    pointer-events: none;
}

.catch-try-me {
    position: absolute;
    z-index: 9;
    left: 50%;
    top: 28%;
    width: 92px;
    height: 92px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.46);
    border-radius: 62% 38% 58% 42% / 62% 42% 58% 38%;
    transform: translate(-50%, -50%) rotate(-45deg);
    color: #ffffff;
    background:
        radial-gradient(
            circle at 30% 25%,
            rgba(255,255,255,.96) 0 5%,
            rgba(255,255,255,.30) 12%,
            transparent 27%
        ),
        linear-gradient(
            145deg,
            rgba(236,252,255,.66),
            rgba(105,215,255,.42) 45%,
            rgba(21,120,221,.52)
        );
    box-shadow:
        0 0 0 5px rgba(105,215,255,.05),
        0 0 18px rgba(105,215,255,.32),
        0 0 44px rgba(105,215,255,.18),
        inset 7px 7px 16px rgba(255,255,255,.30),
        inset -9px -11px 18px rgba(0,75,132,.20);
    backdrop-filter: blur(10px) saturate(155%);
    -webkit-backdrop-filter: blur(10px) saturate(155%);
    animation: menccTryMeFloat 3.2s ease-in-out infinite;
    overflow: visible;
}

.catch-try-me::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 18px;
    width: 24px;
    height: 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.66);
    filter: blur(1px);
    transform: rotate(8deg);
}

.catch-try-me::after {
    content: "";
    position: absolute;
    inset: -8px;
    border: 1px solid rgba(105,215,255,.16);
    border-radius: inherit;
    filter: blur(1px);
    opacity: .8;
    animation: menccTryMeRipple 2.8s ease-out infinite;
}

.catch-try-me .try-me-word,
.catch-try-me .try-me-spark {
    position: relative;
    z-index: 2;
    display: block;
    transform: rotate(45deg);
}

.catch-try-me .try-me-word {
    margin-top: 2px;
    font-family: var(--display);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .13em;
    text-shadow: 0 1px 8px rgba(0,48,87,.22);
}

.catch-try-me .try-me-spark {
    margin-top: 7px;
    color: rgba(255,255,255,.94);
    font-size: 9px;
}

.catch-try-me:hover {
    transform: translate(-50%, -50%) rotate(-45deg) scale(1.07);
    box-shadow:
        0 0 0 6px rgba(105,215,255,.07),
        0 0 22px rgba(105,215,255,.42),
        0 0 58px rgba(105,215,255,.24),
        inset 7px 7px 16px rgba(255,255,255,.34),
        inset -9px -11px 18px rgba(0,75,132,.18);
}

.catch-try-me:active {
    transform: translate(-50%, -50%) rotate(-45deg) scale(.97);
}

.catch-try-me:disabled {
    opacity: 0;
    pointer-events: none;
}

@keyframes menccTryMeFloat {
    0%, 100% {
        margin-top: 0;
        filter: drop-shadow(0 12px 13px rgba(0,40,73,.12));
    }
    50% {
        margin-top: -7px;
        filter: drop-shadow(0 18px 20px rgba(0,40,73,.18));
    }
}

@keyframes menccTryMeRipple {
    0% {
        opacity: .48;
        transform: scale(.88);
    }
    72% {
        opacity: 0;
        transform: scale(1.24);
    }
    100% {
        opacity: 0;
        transform: scale(1.24);
    }
}

.catch-game-message {
    top: 28%;
    width: min(460px, 78%);
    font-size: 10px;
    color: rgba(255,255,255,.62);
    line-height: 1.65;
    text-shadow: 0 2px 12px rgba(0,0,0,.20);
}

.catch-game-stage:not(.is-playing):not(.is-finished) .catch-game-message {
    top: 53%;
    color: rgba(255,255,255,.70);
}

.catch-game-score {
    top: 14px;
    padding: 6px 10px;
    font-size: 7px;
    background: rgba(2,13,29,.34);
    border-color: rgba(255,255,255,.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.catch-bottle {
    z-index: 7;
    bottom: 14px;
    width: 72px;
    height: 126px;
    filter:
        drop-shadow(0 12px 12px rgba(0,18,35,.30))
        drop-shadow(0 0 20px rgba(105,215,255,.11));
}

.catch-bottle-cap {
    left: 25px;
    top: 0;
    width: 22px;
    height: 14px;
    border-radius: 5px 5px 4px 4px;
    background:
        repeating-linear-gradient(
            90deg,
            #d5f4ff 0 2px,
            #5caed0 2px 4px
        );
    border: 1px solid rgba(255,255,255,.70);
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,.34),
        0 2px 4px rgba(0,38,62,.10);
}

.catch-bottle-neck {
    left: 23px;
    top: 11px;
    width: 26px;
    height: 24px;
    border-radius: 7px 7px 2px 2px;
    background:
        linear-gradient(
            90deg,
            rgba(232,251,255,.88),
            rgba(92,188,223,.72) 48%,
            rgba(235,253,255,.92)
        );
    border-left: 1px solid rgba(255,255,255,.70);
    border-right: 1px solid rgba(255,255,255,.70);
    box-shadow:
        inset 5px 0 7px rgba(255,255,255,.18),
        inset -5px 0 7px rgba(0,76,121,.10);
}

.catch-bottle-body {
    left: 5px;
    right: 5px;
    top: 28px;
    bottom: 0;
    border-radius: 16px 16px 17px 17px;
    background:
        linear-gradient(
            90deg,
            rgba(231,251,255,.78),
            rgba(119,204,233,.46) 26%,
            rgba(249,254,255,.18) 48%,
            rgba(84,178,216,.48) 78%,
            rgba(231,251,255,.82)
        );
    border: 1px solid rgba(255,255,255,.72);
    box-shadow:
        inset 7px 0 12px rgba(255,255,255,.27),
        inset -7px 0 12px rgba(0,52,91,.16),
        inset 0 -10px 13px rgba(4,88,137,.08);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.catch-bottle-body::before {
    content: "";
    position: absolute;
    inset: 10px 6px auto;
    height: 29px;
    border-radius: 8px 8px 12px 12px;
    background: rgba(255,255,255,.30);
    box-shadow:
        0 1px 0 rgba(255,255,255,.46) inset;
}

.catch-bottle-water {
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 4px;
    height: 73%;
    border-radius: 11px 11px 13px 13px;
    background:
        linear-gradient(
            180deg,
            rgba(157,232,255,.48),
            rgba(45,165,216,.56) 40%,
            rgba(21,120,221,.63)
        );
    box-shadow:
        inset 0 5px 8px rgba(255,255,255,.18),
        inset 0 -8px 12px rgba(0,55,105,.18);
    overflow: hidden;
}

.catch-bottle-water::before {
    content: "";
    position: absolute;
    left: -8%;
    right: -8%;
    top: -4px;
    height: 10px;
    border-radius: 50%;
    background:
        radial-gradient(
            ellipse at center,
            rgba(255,255,255,.50),
            rgba(105,215,255,.18) 45%,
            transparent 70%
        );
    animation: menccWaterWave 2.8s ease-in-out infinite;
}

.catch-bottle-shine {
    position: absolute;
    top: 8px;
    left: 10px;
    width: 7px;
    height: 82px;
    border-radius: 999px;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,.72),
        rgba(255,255,255,.10)
    );
    filter: blur(.4px);
    opacity: .72;
    transform: rotate(5deg);
    animation: menccBottleShine 3.6s ease-in-out infinite;
}

.catch-bottle-label {
    position: absolute;
    z-index: 3;
    left: 8px;
    right: 8px;
    top: 48px;
    min-height: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 8px;
    background:
        linear-gradient(
            180deg,
            rgba(249,254,255,.96),
            rgba(232,247,252,.88)
        );
    border: 1px solid rgba(255,255,255,.75);
    box-shadow:
        0 3px 9px rgba(0,50,78,.08),
        inset 0 1px 0 rgba(255,255,255,.92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.catch-bottle-label b {
    color: #075087;
    font-family: var(--display);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .08em;
}

.catch-bottle-label small {
    color: #3b657b;
    font-size: 3.4px;
    font-weight: 800;
    letter-spacing: .10em;
}

@keyframes menccWaterWave {
    0%,100% { transform: translateX(-4%); }
    50% { transform: translateX(5%); }
}

@keyframes menccBottleShine {
    0%, 100% { opacity: .28; transform: translateX(0) rotate(5deg); }
    45% { opacity: .82; }
    65% { opacity: .58; transform: translateX(23px) rotate(5deg); }
}

.catch-bottle.is-hit {
    animation: menccBottleCatch .34s var(--ease);
}

@keyframes menccBottleCatch {
    0% { transform: translateX(-50%) scale(1); }
    42% { transform: translateX(-50%) scale(1.09); }
    100% { transform: translateX(-50%) scale(1); }
}

.catch-drop {
    width: 10px;
    height: 14px;
    border-radius: 65% 65% 60% 60% / 72% 72% 40% 40%;
    background:
        radial-gradient(
            circle at 35% 24%,
            rgba(255,255,255,.98) 0 10%,
            transparent 22%
        ),
        linear-gradient(
            135deg,
            #effcff 5%,
            #69d7ff 45%,
            #1578dd 100%
        );
    box-shadow:
        0 0 10px rgba(105,215,255,.76),
        0 3px 10px rgba(21,120,221,.20);
}

.catch-game-start {
    min-height: 42px;
    bottom: 16px;
    padding: 0 18px;
    font-size: 8px;
    box-shadow:
        0 10px 24px rgba(105,215,255,.24),
        inset 0 1px 0 rgba(255,255,255,.80);
}

.catch-game-start:hover {
    box-shadow:
        0 14px 30px rgba(105,215,255,.34),
        inset 0 1px 0 rgba(255,255,255,.92);
}

.catch-game-stage.is-playing .catch-try-me,
.catch-game-stage.is-finished .catch-try-me {
    opacity: 0;
    pointer-events: none;
}

.catch-game-stage.is-playing .catch-game-message {
    opacity: 0;
    transform: translate(-50%,-65%);
}

.catch-game-stage.is-finished .catch-game-message {
    top: 46%;
    max-width: 430px;
    color: #ffffff;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 800;
}

.catch-game-stage.is-finished .catch-game-start {
    display: none;
}

.catch-game-stage.is-playing .catch-game-start {
    display: none;
}

.catch-game-stage.is-finished .catch-game-score {
    background: rgba(105,215,255,.10);
}

.catch-game-footer {
    margin-top: 10px;
    font-size: 7px;
}


/* =========================================================
   START NEW ORDER — CONFIRMATION
========================================================= */

.confirmation-new-order {
    position: relative;
    width: 100%;
    min-height: 50px;
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(105,215,255,.28);
    border-radius: 999px;
    background: rgba(105,215,255,.08);
    color: var(--ink);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    transition:
        transform .3s var(--ease),
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.confirmation-new-order span {
    color: var(--blue-600);
    font-size: 15px;
    transition: transform .3s var(--ease);
}

.confirmation-new-order:hover {
    transform: translateY(-2px);
    background: rgba(105,215,255,.13);
    border-color: rgba(105,215,255,.48);
    box-shadow: 0 12px 26px rgba(105,215,255,.12);
}

.confirmation-new-order:hover span {
    transform: translate(3px,-2px);
}


/* =========================================================
   DARK MODE — LIQUID GLASS NAV + GAME
========================================================= */

html[data-theme="dark"] .landing-page .site-header {
    background: transparent !important;
}

html[data-theme="dark"] .navbar {
    border-color: rgba(105,215,255,.24);
    background:
        linear-gradient(
            135deg,
            rgba(8,28,47,.70),
            rgba(4,18,33,.56) 52%,
            rgba(5,16,30,.50)
        );
    box-shadow:
        0 22px 60px rgba(0,0,0,.38),
        0 0 34px rgba(105,215,255,.08),
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 -1px 0 rgba(105,215,255,.08);
    backdrop-filter: blur(27px) saturate(155%);
    -webkit-backdrop-filter: blur(27px) saturate(155%);
}

html[data-theme="dark"] .navbar::before {
    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(255,255,255,.10),
            transparent 25%
        ),
        radial-gradient(
            circle at 92% 118%,
            rgba(105,215,255,.13),
            transparent 35%
        );
}

html[data-theme="dark"] .navbar::after {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(183,236,255,.20),
        transparent
    );
}

html[data-theme="dark"] .landing-page .brand-logo {
    opacity: 1 !important;
    visibility: visible !important;
    filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(105,215,255,.12));
}

/* Keep MENCC artwork visible in dark mode.
   Dark mode changes surfaces, not the supplied brand/product artwork. */
html[data-theme="dark"] .landing-page .hero-image,
html[data-theme="dark"] .landing-page .source-media img,
html[data-theme="dark"] .landing-page .collection-section img,
html[data-theme="dark"] .landing-page .factory-video-element,
html[data-theme="dark"] .landing-page .distribution-media img,
html[data-theme="dark"] .landing-page .brand-logo {
    opacity: 1 !important;
    visibility: visible !important;
}

html[data-theme="dark"] .brand-copy strong,
html[data-theme="dark"] .brand-copy small {
    color: #f4fbff;
}

html[data-theme="dark"] .nav-links a {
    color: rgba(244,251,255,.70);
}

html[data-theme="dark"] .nav-links a:hover {
    color: #ffffff;
    background: rgba(255,255,255,.075);
}

html[data-theme="dark"] .nav-links .nav-discover-link {
    color: #b7ecff;
    background: rgba(105,215,255,.08);
    border-color: rgba(105,215,255,.20);
}

html[data-theme="dark"] .nav-links .nav-discover-link:hover {
    color: #ffffff;
    background: rgba(105,215,255,.15);
}

html[data-theme="dark"] .nav-status {
    color: rgba(244,251,255,.50);
}

html[data-theme="dark"] .theme-toggle {
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(105,215,255,.26) !important;
    color: #ffffff !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 7px 22px rgba(0,0,0,.16);
}

html[data-theme="dark"] .theme-toggle:hover {
    background: rgba(105,215,255,.11) !important;
    border-color: rgba(105,215,255,.45) !important;
}

html[data-theme="dark"] .nav-order-button {
    border-color: rgba(105,215,255,.30) !important;
    background:
        linear-gradient(
            135deg,
            rgba(224,249,255,.95),
            rgba(105,215,255,.78)
        ) !important;
    color: #04172b !important;
}

html[data-theme="dark"] .menu-toggle {
    background: rgba(255,255,255,.07);
    border-color: rgba(105,215,255,.26);
    color: #f4fbff;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 8px 24px rgba(0,0,0,.20);
}

html[data-theme="dark"] main {
    padding-top: 88px;
}

html[data-theme="dark"] .order-overview-visual.order-catch-game {
    background:
        radial-gradient(
            circle at 50% 4%,
            rgba(105,215,255,.25),
            transparent 31%
        ),
        radial-gradient(
            circle at 50% 92%,
            rgba(45,167,231,.12),
            transparent 36%
        ),
        linear-gradient(
            160deg,
            #0b3b64 0%,
            #052846 50%,
            #020f20 100%
        );
}

html[data-theme="dark"] .confirmation-new-order {
    color: #f4fbff;
    border-color: rgba(105,215,255,.28);
    background: rgba(105,215,255,.08);
}


/* =========================================================
   LARGE / MOBILE NAV TUNING
========================================================= */

@media (max-width: 1180px) {
    .navbar {
        width: min(1400px, calc(100% - 28px));
        gap: 14px;
    }

    .nav-links {
        gap: 3px;
    }

    .nav-links a {
        padding-inline: 8px;
        font-size: 8px;
        letter-spacing: .09em;
    }
}

@media (max-width: 900px) {
    .nav-status {
        display: none;
    }

    .navbar {
        height: 64px;
        border-radius: 22px;
        padding-left: 14px;
        padding-right: 10px;
    }

    .brand-logo {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .nav-links {
        margin-left: auto;
    }

    .main {
        padding-top: 84px;
    }

    main {
        padding-top: 84px;
    }
}

@media (max-width: 760px) {
    html {
        scroll-padding-top: 88px;
    }

    section[id] {
        scroll-margin-top: 88px;
    }

    .site-header {
        padding: 8px 0;
    }

    .navbar {
        width: calc(100% - 22px);
        height: 60px;
        padding: 0 8px 0 12px;
        border-radius: 21px;
        gap: 10px;
    }

    .brand {
        gap: 8px;
    }

    .brand-logo {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .brand-copy strong {
        font-size: 17px;
    }

    .brand-copy small {
        font-size: 6px;
        letter-spacing: .18em;
    }

    .nav-actions {
        gap: 8px;
    }

    .theme-toggle {
        width: 39px !important;
        height: 39px !important;
        border-radius: 14px !important;
        font-size: 17px;
    }

    .menu-toggle {
        display: block;
        width: 39px;
        height: 39px;
        border-radius: 14px;
    }

    main {
        padding-top: 76px;
    }

    .mobile-menu-inner {
        width: min(620px, calc(100% - 38px));
    }

    .mobile-menu-inner a {
        padding: 13px 0;
        font-size: clamp(27px, 8vw, 46px);
    }

    .mobile-menu-inner button {
        margin-top: 25px;
    }

    .order-overview-visual.order-catch-game {
        min-height: 390px;
        padding: 14px;
        border-radius: 21px;
    }

    .catch-game-top {
        gap: 10px;
    }

    .catch-game-heading h4 {
        font-size: 22px;
    }

    .catch-game-heading p {
        font-size: 9px;
        max-width: 190px;
    }

    .catch-game-badge {
        display: none;
    }

    .catch-game-stage {
        min-height: 305px;
        border-radius: 18px;
    }

    .catch-try-me {
        width: 84px;
        height: 84px;
        top: 28%;
    }

    .catch-bottle {
        width: 68px;
        height: 119px;
    }

    .catch-game-message {
        width: 84%;
        font-size: 9px;
    }

    .catch-game-stage.is-finished .catch-game-message {
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navbar::after,
    .catch-try-me,
    .catch-try-me::after,
    .catch-bottle-water::before,
    .catch-bottle-shine {
        animation: none !important;
    }
}


/* Final polish for the expanded five-link mobile menu. */
.mobile-menu.is-open .mobile-menu-inner a:nth-of-type(5) {
    transition-delay: .38s;
}

/* Keep the glass shell crisp while the page content moves underneath it. */
.site-header,
.navbar {
    will-change: background, box-shadow, transform;
}

@media (prefers-reduced-motion: reduce) {
    .catch-bottle.is-hit {
        animation: none !important;
    }
}


/* =========================================================
   MENCC — PREMIUM ORDER TRANSITION
   Final motion layer. Visual only: no order/business logic changed.
   ========================================================= */

/* The drawer must sit above the floating landing-page navbar while
   both are moving. The header itself fades out underneath it. */
.order-drawer {
    z-index: 4000;
    visibility: hidden;
    pointer-events: none;
}

.order-drawer.is-open,
.order-drawer.is-closing {
    visibility: visible;
}

.order-drawer.is-open {
    pointer-events: auto;
}

.order-drawer.is-closing {
    pointer-events: none;
}

/* A real softening of the page: the blur itself grows with the fade. */
.order-backdrop {
    opacity: 0;
    background: rgba(1, 8, 16, .72);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition:
        opacity .52s cubic-bezier(.16, 1, .3, 1),
        backdrop-filter .62s cubic-bezier(.16, 1, .3, 1),
        -webkit-backdrop-filter .62s cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, backdrop-filter;
}

.order-drawer.is-open .order-backdrop {
    opacity: 1;
    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);
}

.order-drawer.is-closing .order-backdrop {
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}

/* The desk itself feels physically pulled into the viewport instead of
   simply appearing. */
.order-drawer-inner {
    transform: translate3d(104%, 0, 0) scale(.985);
    transform-origin: right center;
    opacity: .94;
    transition:
        transform .64s cubic-bezier(.16, 1, .3, 1),
        opacity .48s ease;
    will-change: transform, opacity;
}

.order-drawer.is-open .order-drawer-inner {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
}

.order-drawer.is-closing .order-drawer-inner {
    transform: translate3d(104%, 0, 0) scale(.985);
    opacity: .94;
}

/* ---------------------------------------------------------
   ORDER DESK CONTENT CHOREOGRAPHY
   The interface assembles itself in small, deliberate movements.
   --------------------------------------------------------- */

.order-drawer-top {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
    transition:
        opacity .46s ease,
        transform .60s cubic-bezier(.16, 1, .3, 1);
}

.order-progress {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition:
        opacity .46s ease,
        transform .60s cubic-bezier(.16, 1, .3, 1);
}

.order-drawer.is-open .order-drawer-top,
.order-drawer.is-open .order-progress {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.order-drawer.is-open .order-drawer-top {
    transition-delay: .12s;
}

.order-drawer.is-open .order-progress {
    transition-delay: .18s;
}

/* The currently visible order step is kept intact for the existing
   step/navigation logic, while its pieces reveal in sequence. */
.order-app .order-step.active > * {
    opacity: 0;
    transform: translate3d(0, 15px, 0);
    transition:
        opacity .46s ease,
        transform .62s cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform;
}

.order-drawer.is-open .order-app .order-step.active > * {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.order-drawer.is-open .order-app .order-step.active > *:nth-child(1) {
    transition-delay: .24s;
}

.order-drawer.is-open .order-app .order-step.active > *:nth-child(2) {
    transition-delay: .30s;
}

.order-drawer.is-open .order-app .order-step.active > *:nth-child(3) {
    transition-delay: .36s;
}

.order-drawer.is-open .order-app .order-step.active > *:nth-child(4) {
    transition-delay: .42s;
}

.order-drawer.is-open .order-app .order-step.active > *:nth-child(5) {
    transition-delay: .48s;
}

.order-drawer.is-open .order-app .order-step.active > *:nth-child(6) {
    transition-delay: .54s;
}

/* Product cards get just a little extra lift. */
.order-products .order-product {
    transition:
        opacity .46s ease,
        transform .62s cubic-bezier(.16, 1, .3, 1),
        border-color .30s ease,
        box-shadow .30s ease;
}

/* Keep the X interaction polished and tactile. */
.order-close {
    transition:
        transform .46s cubic-bezier(.16, 1, .3, 1),
        background .35s ease,
        border-color .35s ease,
        box-shadow .46s ease;
}

@media (hover: hover) and (pointer: fine) {
    .order-close:hover {
        transform: rotate(90deg) scale(1.06);
    }
}

/* ---------------------------------------------------------
   LANDING NAVBAR EXIT / RETURN
   The navbar fades and lifts away instead of vanishing instantly.
   --------------------------------------------------------- */

.landing-page .site-header {
    transition:
        opacity .44s ease,
        transform .60s cubic-bezier(.16, 1, .3, 1),
        filter .44s ease,
        visibility 0s linear 0s;
    will-change: opacity, transform, filter;
}

.landing-page.order-open .site-header,
.landing-page .site-header.order-open-state {
    opacity: 0 !important;
    transform: translate3d(0, -12px, 0) scale(.985);
    filter: blur(5px);
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
        opacity .44s ease,
        transform .60s cubic-bezier(.16, 1, .3, 1),
        filter .44s ease,
        visibility 0s linear .60s;
}

/* On return, the header is immediately visible but animates back into
   its original resting position. */
.landing-page:not(.order-open) .site-header:not(.order-open-state) {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
    visibility: visible;
}

/* ---------------------------------------------------------
   MOBILE: same choreography, tuned so the order desk feels like a
   full-screen ordering experience rather than a desktop panel.
   --------------------------------------------------------- */

@media (max-width: 760px) {
    .order-drawer-inner {
        width: 100%;
        transform: translate3d(102%, 0, 0) scale(.995);
        transform-origin: right center;
        transition:
            transform .62s cubic-bezier(.16, 1, .3, 1),
            opacity .44s ease;
    }

    .order-drawer.is-open .order-drawer-inner {
        transform: translate3d(0, 0, 0) scale(1);
    }

    .order-drawer.is-closing .order-drawer-inner {
        transform: translate3d(102%, 0, 0) scale(.995);
    }

    .order-backdrop {
        background: rgba(1, 8, 16, .66);
    }

    .order-drawer-top {
        transform: translate3d(0, -7px, 0);
    }

    .order-progress {
        transform: translate3d(0, 8px, 0);
    }

    .order-app .order-step.active > * {
        transform: translate3d(0, 13px, 0);
    }

    .order-drawer.is-open .order-app .order-step.active > *:nth-child(1) {
        transition-delay: .20s;
    }

    .order-drawer.is-open .order-app .order-step.active > *:nth-child(2) {
        transition-delay: .26s;
    }

    .order-drawer.is-open .order-app .order-step.active > *:nth-child(3) {
        transition-delay: .32s;
    }

    .order-drawer.is-open .order-app .order-step.active > *:nth-child(4) {
        transition-delay: .38s;
    }

    .order-drawer.is-open .order-app .order-step.active > *:nth-child(5) {
        transition-delay: .44s;
    }

    .order-drawer.is-open .order-app .order-step.active > *:nth-child(6) {
        transition-delay: .50s;
    }
}

/* Accessibility: a reduced-motion preference gets the same final state
   without the choreographed movement. */
@media (prefers-reduced-motion: reduce) {
    .order-backdrop,
    .order-drawer-inner,
    .order-drawer-top,
    .order-progress,
    .order-app .order-step.active > *,
    .landing-page .site-header,
    .order-close {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }

    .order-drawer-inner,
    .order-drawer.is-closing .order-drawer-inner,
    .order-drawer.is-open .order-drawer-inner,
    .order-drawer-top,
    .order-progress,
    .order-app .order-step.active > * {
        transform: none !important;
    }
}


/* =========================================================
   MENCC — TRUST & STANDARDS
   Quiet credibility layer. Visual only; existing order system
   and site structure remain intact.
   ========================================================= */

.trust-section {
    position: relative;
    padding: 145px 0 130px;
    background:
        radial-gradient(circle at 82% 18%, rgba(105,215,255,.10), transparent 28%),
        linear-gradient(180deg, #eef7fb 0%, var(--surface) 62%, #ffffff 100%);
    overflow: hidden;
}

.trust-section::before {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    left: -250px;
    top: 35%;
    border: 1px solid rgba(21,120,221,.08);
    border-radius: 50%;
    pointer-events: none;
}

.trust-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
    gap: 70px;
    align-items: end;
    margin-bottom: 68px;
}

.trust-heading h2 {
    margin-top: 16px;
    font-family: var(--display);
    font-size: clamp(48px, 6.5vw, 88px);
    font-weight: 800;
    line-height: .95;
    letter-spacing: -.065em;
}

.trust-heading h2 span {
    color: var(--blue-600);
}

.trust-intro {
    max-width: 430px;
    margin-left: auto;
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.75;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.trust-card {
    position: relative;
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(7,26,48,.09);
    background: rgba(255,255,255,.76);
    box-shadow: 0 24px 70px rgba(4,31,58,.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition:
        transform .55s var(--ease),
        border-color .35s ease,
        box-shadow .55s ease,
        background .35s ease;
}

.trust-card:hover {
    transform: translateY(-4px);
    border-color: rgba(21,120,221,.18);
    box-shadow: 0 30px 80px rgba(4,31,58,.12);
}

.trust-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 24px;
    padding: 3px 2px 15px;
}

.trust-card-index {
    color: var(--blue-600);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
}

.trust-card-type {
    max-width: 82%;
    color: var(--ink-soft);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-align: right;
}

.trust-document {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid rgba(7,26,48,.07);
    background:
        linear-gradient(145deg, #f8fbfd, #edf5f9);
    overflow: hidden;
    cursor: zoom-in;
}

.trust-document::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(2,13,29,.18));
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}

.trust-document img {
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: contain;
    object-position: center;
    background: #f8fafc;
    transition: transform .75s var(--ease), filter .45s ease;
}

.trust-document-overlay {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 999px;
    color: white;
    background: rgba(4,22,41,.62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(7px);
    transition:
        opacity .35s ease,
        transform .45s var(--ease);
    pointer-events: none;
}

.trust-document-overlay span {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.trust-document-overlay strong {
    font-size: 14px;
    font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
    .trust-document:hover img {
        transform: scale(1.018);
        filter: saturate(1.02);
    }

    .trust-document:hover::after,
    .trust-document:hover .trust-document-overlay {
        opacity: 1;
    }

    .trust-document:hover .trust-document-overlay {
        transform: translateY(0);
    }
}

.trust-card-body {
    padding: 23px 7px 6px;
}

.trust-card-body h3 {
    font-family: var(--display);
    font-size: clamp(23px, 2.3vw, 31px);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.05;
}

.trust-card-body p {
    max-width: 610px;
    margin-top: 12px;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.72;
}

.trust-view-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 22px;
    padding: 0;
    color: var(--blue-600);
    background: transparent;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.trust-view-link span {
    font-size: 15px;
    transition: transform .35s var(--ease);
}

.trust-view-link:hover span {
    transform: translateX(4px);
}


/* =========================================================
   MENCC — DOCUMENT VIEWER
   ========================================================= */

html.cert-modal-open,
body.cert-modal-open {
    overflow: hidden;
}

.trust-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity .42s ease,
        visibility 0s linear .42s;
}

.trust-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity .42s ease,
        visibility 0s linear 0s;
}

.trust-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(1,8,16,.72);
    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);
    opacity: 0;
    transition: opacity .5s var(--ease);
}

.trust-modal.is-open .trust-modal-backdrop {
    opacity: 1;
}

.trust-modal-panel {
    position: relative;
    z-index: 2;
    width: min(900px, 100%);
    max-height: min(92vh, 980px);
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 24px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(244,249,252,.98));
    box-shadow: 0 38px 120px rgba(0,0,0,.34);
    overflow: hidden;
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(.975);
    transition:
        opacity .46s ease,
        transform .64s cubic-bezier(.16,1,.3,1);
}

.trust-modal.is-open .trust-modal-panel {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
}

.trust-modal-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px 17px;
    border-bottom: 1px solid rgba(7,26,48,.08);
}

.trust-modal-kicker {
    display: block;
    color: var(--blue-600);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.trust-modal-top h2 {
    margin-top: 6px;
    font-family: var(--display);
    font-size: clamp(20px, 3vw, 30px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.05;
}

.trust-modal-close {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(7,26,48,.10);
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    color: var(--navy-950);
    font-size: 28px;
    line-height: 1;
    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        background .35s ease,
        border-color .35s ease,
        box-shadow .45s ease;
}

.trust-modal-close:active {
    transform: scale(.94);
}

@media (hover: hover) and (pointer: fine) {
    .trust-modal-close:hover {
        transform: rotate(90deg) scale(1.05);
        border-color: rgba(21,120,221,.20);
        box-shadow: 0 10px 30px rgba(7,26,48,.10);
    }
}

.trust-modal-document {
    flex: 1 1 auto;
    min-height: 0;
    padding: 18px;
    overflow: auto;
    background:
        radial-gradient(circle at 50% 10%, rgba(105,215,255,.08), transparent 35%),
        #eaf2f6;
}

.trust-modal-document img {
    display: block;
    width: min(760px, 100%);
    height: auto;
    max-height: calc(92vh - 145px);
    margin: 0 auto;
    object-fit: contain;
    box-shadow: 0 18px 55px rgba(2,13,29,.16);
}

.trust-modal-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 13px 20px;
    border-top: 1px solid rgba(7,26,48,.08);
    color: var(--ink-soft);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

html[data-theme="dark"] .trust-section {
    background:
        radial-gradient(circle at 82% 18%, rgba(105,215,255,.10), transparent 28%),
        linear-gradient(180deg, #071a2a 0%, #061522 62%, #04111c 100%);
}

html[data-theme="dark"] .trust-heading h2 span {
    color: var(--aqua-300);
}

html[data-theme="dark"] .trust-intro,
html[data-theme="dark"] .trust-card-body p {
    color: rgba(255,255,255,.58);
}

html[data-theme="dark"] .trust-card {
    border-color: rgba(255,255,255,.09);
    background: rgba(8,27,44,.76);
    box-shadow: 0 24px 70px rgba(0,0,0,.20);
}

html[data-theme="dark"] .trust-card-type {
    color: rgba(255,255,255,.50);
}

html[data-theme="dark"] .trust-document {
    border-color: rgba(255,255,255,.09);
    background: #091b2a;
}

html[data-theme="dark"] .trust-document img {
    background: #f8fafc;
}

html[data-theme="dark"] .trust-modal-panel {
    background:
        linear-gradient(145deg, rgba(10,31,48,.98), rgba(5,20,32,.98));
    border-color: rgba(255,255,255,.10);
}

html[data-theme="dark"] .trust-modal-top,
html[data-theme="dark"] .trust-modal-bottom {
    border-color: rgba(255,255,255,.08);
}

html[data-theme="dark"] .trust-modal-top h2 {
    color: #ffffff;
}

html[data-theme="dark"] .trust-modal-close {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.10);
    color: #ffffff;
}

html[data-theme="dark"] .trust-modal-document {
    background:
        radial-gradient(circle at 50% 10%, rgba(105,215,255,.08), transparent 35%),
        #071522;
}

html[data-theme="dark"] .trust-modal-bottom {
    color: rgba(255,255,255,.48);
}

@media (max-width: 900px) {
    .trust-section {
        padding: 115px 0 100px;
    }

    .trust-heading {
        grid-template-columns: 1fr;
        gap: 22px;
        margin-bottom: 48px;
    }

    .trust-intro {
        margin-left: 0;
        max-width: 640px;
    }

    .trust-grid {
        grid-template-columns: 1fr;
    }

    .trust-card-body h3 {
        font-size: 28px;
    }
}

@media (max-width: 560px) {
    .trust-section {
        padding: 88px 0 82px;
    }

    .trust-heading h2 {
        font-size: clamp(40px, 12.5vw, 64px);
    }

    .trust-card {
        padding: 11px;
        border-radius: 18px;
    }

    .trust-card-top {
        padding: 4px 3px 12px;
    }

    .trust-card-type {
        font-size: 7px;
    }

    .trust-document img {
        aspect-ratio: 4 / 3.35;
    }

    .trust-document-overlay {
        right: 10px;
        bottom: 10px;
        opacity: 1;
        transform: none;
        min-height: 34px;
        padding: 0 11px;
    }

    .trust-card-body {
        padding: 19px 4px 5px;
    }

    .trust-card-body h3 {
        font-size: 24px;
    }

    .trust-card-body p {
        font-size: 12px;
    }

    .trust-modal {
        padding: 10px;
    }

    .trust-modal-panel {
        max-height: 96vh;
        border-radius: 19px;
    }

    .trust-modal-top {
        padding: 15px 15px 13px;
    }

    .trust-modal-document {
        padding: 10px;
    }

    .trust-modal-document img {
        max-height: calc(96vh - 130px);
    }

    .trust-modal-bottom {
        padding: 11px 15px;
        font-size: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .trust-card,
    .trust-document img,
    .trust-document-overlay,
    .trust-modal,
    .trust-modal-backdrop,
    .trust-modal-panel,
    .trust-modal-close {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }

    .trust-card:hover {
        transform: none !important;
    }

    .trust-modal-panel {
        transform: none !important;
    }
}
/* =========================================================
   MENCC — LAPTOP / TABLET ARTWORK SCALE REFINEMENT
   Keeps the complete supplied artwork visible while giving
   larger screens intentional breathing room.
   Mobile (760px and below) remains on the existing artwork rules.
   ========================================================= */

@media (min-width: 1051px) {
    .hero-media {
        height: min(80vh, 820px);
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .hero-image {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        object-position: center;
    }

    .source-media {
        height: min(68vh, 720px);
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .source-media img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        object-position: center;
    }
}

@media (min-width: 761px) and (max-width: 1050px) {
    .hero-media {
        height: min(70vh, 620px);
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .hero-image {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        object-position: center;
    }

    .source-media {
        height: min(62vh, 560px);
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .source-media img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        object-position: center;
    }
}

/* =========================================================
   MENCC — BRAND OPENING RESPONSIVE REFINEMENT
   ========================================================= */

@media (max-width: 900px) {
    .brand-opening {
        padding: 118px 0 58px;
    }

    .brand-opening-copy h1 {
        font-size: clamp(48px, 11vw, 82px);
    }

    .brand-opening-lead {
        max-width: 680px;
        font-size: clamp(21px, 5vw, 29px);
    }

    .opening-collection-showcase {
        grid-template-columns: 1fr;
        gap: 34px;
        padding-top: 42px;
    }

    .opening-collection-copy {
        max-width: 720px;
    }

    .opening-collection-copy h2 {
        font-size: clamp(42px, 9vw, 64px);
    }
}

@media (max-width: 760px) {
    .brand-opening {
        padding: 126px 0 46px;
    }

    .brand-opening-copy h1 {
        margin-top: 13px;
        font-size: clamp(45px, 12.5vw, 68px);
        line-height: .94;
    }

    .brand-opening-lead {
        margin-top: 25px;
        font-size: 22px;
        line-height: 1.32;
    }

    .brand-opening-body {
        margin-top: 18px;
        font-size: 15px;
        line-height: 1.75;
    }

    .brand-opening-signoff {
        margin-top: 24px;
        font-size: 9px;
        line-height: 1.7;
    }

    .opening-collection-showcase {
        width: calc(100% - 32px);
        padding: 34px 0 62px;
        gap: 27px;
    }

    .opening-collection-copy h2 {
        margin-top: 13px;
        font-size: clamp(40px, 11vw, 58px);
    }

    .opening-collection-copy > p:not(.section-kicker) {
        margin-top: 18px;
        font-size: 15px;
        line-height: 1.72;
    }

    .opening-collection-copy .button {
        width: 100%;
        margin-top: 25px;
    }
}


/* =========================================================
   MENCC — OPENING FLOW FINAL POLISH
   Order: brand opening → complete collection → MENCC feel.
   The standalone 75cl hero artwork is intentionally removed
   from the opening flow; its asset remains available in the
   product collection later on the page.
========================================================= */

.intro-section {
    padding-top: 82px;
}

@media (max-width: 900px) {
    .intro-section {
        padding-top: 68px;
    }
}

@media (max-width: 760px) {
    .intro-section {
        padding-top: 52px;
    }
}


/* =========================================================
   MENCC — PRODUCT IMAGE LABELS
   Quantity badges stay readable without covering important
   typography or product details inside the artwork.
========================================================= */
.image-tag {
    left: auto !important;
    right: 15px !important;
    top: 15px !important;
    z-index: 5 !important;
    padding: 8px 11px !important;
    background: rgba(248, 252, 255, .97) !important;
    color: #061a36 !important;
    border: 1px solid rgba(6, 26, 54, .12) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .16) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.image-tag.featured {
    background: #8fe8ff !important;
    color: #061a36 !important;
    border-color: rgba(6, 26, 54, .14) !important;
}

/* 19L: the artwork already has MENCC branding in the upper-left,
   so keep the small badge in the upper-right safe area instead. */
.product-card-wide .image-tag {
    left: auto !important;
    right: 15px !important;
    top: 15px !important;
    bottom: auto !important;
    transform: none !important;
}

/* Keep 50cl/75cl badges compact so they don't cover the bottle neck. */
.product-card-tall .image-tag,
.product-card-featured .image-tag {
    right: 15px !important;
    top: 15px !important;
    padding: 7px 10px !important;
    font-size: 8px !important;
    letter-spacing: .12em !important;
}

/* Dark mode: maximum contrast without changing the artwork. */
html[data-theme="dark"] .image-tag,
html[data-theme="dark"] .image-tag.featured,
html[data-theme="dark"] .sachet-tag {
    background: rgba(248, 252, 255, .98) !important;
    color: #061a36 !important;
    border-color: rgba(143, 216, 255, .34) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .34) !important;
}

@media (max-width: 900px) {
    .image-tag {
        right: 12px !important;
        top: 12px !important;
        padding: 7px 10px !important;
        font-size: 8px !important;
        letter-spacing: .11em !important;
    }

    .product-card-wide .image-tag {
        right: 12px !important;
        top: 12px !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
    }
}

@media (max-width: 600px) {
    .image-tag {
        right: 10px !important;
        top: 10px !important;
        padding: 7px 9px !important;
        font-size: 7px !important;
        letter-spacing: .10em !important;
        max-width: calc(100% - 20px) !important;
    }

    .product-card-wide .image-tag {
        right: 10px !important;
        top: 10px !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
    }
}

/* =========================================================
   MENCC — RESPONSIVE PRODUCT IMAGE BADGES
   Keep quantity labels inside clear artwork areas without
   covering the product photography or built-in typography.
========================================================= */

.product-image {
    position: relative;
}

.image-tag {
    position: absolute !important;
    z-index: 6 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: max-content !important;
    max-width: calc(100% - 24px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px 11px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    font-size: clamp(7px, 0.62vw, 9px) !important;
    letter-spacing: .13em !important;
    box-sizing: border-box !important;
}

/* 50cl: clear upper-right sky area. */
.product-card-tall .image-tag {
    top: 14px !important;
    right: 14px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
}

/* 75cl: same safe upper-right area, kept compact so the bottle remains clear. */
.product-card-featured .image-tag {
    top: 14px !important;
    right: 14px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
}

/* 19L: upper-left is the cleanest area in this artwork.
   Keep the badge above the built-in MENCC artwork rather than
   placing it across the bottle or center composition. */
.product-card-wide .image-tag {
    top: 14px !important;
    left: 14px !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
}

@media (max-width: 900px) {
    .image-tag {
        padding: 7px 10px !important;
        font-size: 7.5px !important;
        letter-spacing: .12em !important;
    }

    .product-card-tall .image-tag,
    .product-card-featured .image-tag,
    .product-card-wide .image-tag {
        top: 12px !important;
    }

    .product-card-tall .image-tag,
    .product-card-featured .image-tag {
        right: 12px !important;
    }

    .product-card-wide .image-tag {
        left: 12px !important;
    }
}

@media (max-width: 600px) {
    .image-tag {
        max-width: calc(100% - 20px) !important;
        padding: 6px 9px !important;
        font-size: 7px !important;
        letter-spacing: .10em !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .14) !important;
    }

    .product-card-tall .image-tag,
    .product-card-featured .image-tag {
        top: 4px !important;
        right: 6px !important;
        padding: 6px 8px !important;
        font-size: 6.7px !important;
        letter-spacing: .095em !important;
    }

    .product-card-wide .image-tag {
        top: 10px !important;
        left: 10px !important;
    }
}