/* =====================================================================
OASIS LABS — Design Direction v2 (real brand assets)
Cormorant Garamond (display) + Jost (UI) · real forest/cream palette
===================================================================== */
:root{
/* real brand tokens pulled from oasislabsusa.com */
--forest-950:#20211a; /* announce, footer, trust bar, delivery panel */
--forest-900:#353525; /* real brand dark — buttons */
--forest-800:#2c2e1f;
--forest-700:#535740; /* real brand mid — kickers, accents */
--forest-600:#6a6d50;
--olive:#7c7f5c;
--cream-50:#f5f3ee;
--cream-100:#edeae3;
--cream-200:#e5e1d6;
--cream-300:#d9d3c4;
--ink:#2a2a1d;
--ink-soft:#43442f;
--muted:#79795f;
--muted-light:#c7c8ad;
--line:#dcd6c8;
--font-display:"Cormorant Garamond", Georgia, serif;
--font-ui:"Jost", system-ui, sans-serif;
--wrap:1240px;
--radius:14px;
--radius-lg:24px;
--ease:cubic-bezier(.22,.61,.36,1);
--shadow:0 30px 66px -38px rgba(20,21,15,.55);
--shadow-soft:0 20px 48px -32px rgba(20,21,15,.42);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-ui);color:var(--ink);background:var(--cream-100);
font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{margin:0;font-weight:600;line-height:1.05}
svg.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:26px}
.kicker{font-family:var(--font-ui);font-size:.72rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--forest-700);margin:0 0 1rem}
.kicker--light{color:var(--muted-light)}
.section-title{font-family:var(--font-display);font-weight:600;font-size:clamp(2.2rem,4.4vw,3.5rem);color:var(--ink);letter-spacing:.004em}
.section-title.center{text-align:center;margin-bottom:2.8rem}
.section-title .rule{display:block;width:54px;height:2px;background:var(--forest-700);opacity:.55;margin:1rem auto 0}
/* ---------- buttons ---------- */
.btn{--bg:var(--forest-900);--fg:#f6f4ec;display:inline-flex;align-items:center;justify-content:center;gap:.5em;
font-family:var(--font-ui);font-weight:600;font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;
padding:1.02em 1.9em;border-radius:8px;border:1.5px solid transparent;cursor:pointer;
transition:transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .35s var(--ease);will-change:transform}
.btn--sm{padding:.86em 1.5em;font-size:.72rem}
.btn--solid{background:var(--bg);color:var(--fg);box-shadow:0 14px 26px -18px rgba(53,53,37,.9)}
.btn--solid:hover{transform:translateY(-3px);background:var(--forest-800);box-shadow:0 20px 34px -18px rgba(53,53,37,.95)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{transform:translateY(-3px);background:var(--ink);color:var(--cream-50)}
.btn--light{color:#f6f4ec;border-color:rgba(255,255,255,.5)}
.btn--light:hover{background:#f6f4ec;color:var(--forest-950);border-color:#f6f4ec}
/* =====================================================================
ANNOUNCEMENT BAR
===================================================================== */
.announce{background:var(--forest-950);color:#e7e6d6;font-size:.72rem;letter-spacing:.06em}
.announce__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:40px;padding-block:6px}
.announce__lead{display:inline-flex;align-items:center;gap:.5rem;text-transform:uppercase;font-weight:500}
.announce__lead .ic{width:17px;height:17px;opacity:.85}
.announce__mid{text-transform:uppercase;font-weight:500;opacity:.9}
.announce__mid i{margin-inline:.5rem;opacity:.4;font-style:normal}
.announce__right{text-transform:uppercase;font-weight:500;opacity:.85}
.announce__right i{margin-inline:.5rem;opacity:.4;font-style:normal}
/* Mobile marquee (hidden on desktop; shown ≤767 in the mobile block) */
.announce__marquee{display:none}
.announce__track{display:inline-flex;align-items:center;white-space:nowrap;will-change:transform}
.announce__chip{display:inline-flex;align-items:center;text-transform:uppercase;font-weight:500;padding-inline:1.1rem;position:relative}
.announce__chip::after{content:"·";position:absolute;right:-.15em;opacity:.45}
@keyframes announce-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.announce__track{animation:none!important}}
/* =====================================================================
HEADER
===================================================================== */
.site-header{position:sticky;top:0;z-index:60;
background:rgba(245,243,238,.5);
backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);
border-bottom:1px solid rgba(255,255,255,.35);
box-shadow:0 6px 34px -26px rgba(20,21,15,.45);
transition:box-shadow .4s var(--ease), background .4s var(--ease), border-color .4s}
.site-header::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);pointer-events:none}
.site-header.is-scrolled{background:rgba(245,243,238,.72);box-shadow:0 12px 34px -22px rgba(20,21,15,.5);border-color:rgba(255,255,255,.5)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;min-height:80px}
/* header account + cart actions (moved out of the ticker) */
.header__actions{display:flex;align-items:center;gap:.4rem}
.header__action{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-ui);font-weight:600;
font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);
padding:.6rem .95rem;border-radius:40px;border:1px solid transparent;transition:background .25s,border-color .25s,color .25s}
.header__action svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.header__action:hover{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.8);color:var(--forest-900)}
.header__action--cart{gap:.45rem;padding:.52rem .8rem}
.header__cartcount{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:20px;background:var(--forest-900);color:#f6f4ec;font-size:.64rem;font-weight:700;letter-spacing:0}
.brand{display:inline-flex;align-items:center}
.brand__logo{height:46px;width:auto}
.brand__logo--light{filter:brightness(0) invert(1);opacity:.96}
.nav{display:flex;align-items:center;gap:2.2rem}
.nav__link{font-weight:500;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
position:relative;display:inline-flex;align-items:center;gap:.3rem;padding-block:.4rem;transition:color .25s}
.nav__link::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--forest-700);transition:width .3s var(--ease)}
.nav__link:hover{color:var(--forest-900)}
.nav__link:hover::after{width:100%}
.nav__link .caret{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.hamburger span{width:24px;height:2px;background:var(--ink);transition:transform .3s,opacity .3s}
/* Header hamburger must look IDENTICAL on every page. The legacy global rule
`body.oasis-redesign:not(.home) button{background:var(--ol-forest-900)!important}` in main.css
is !important with specificity (0,2,2); an ID selector is needed to win the override. */
#siteHeader #hamburger{background:none!important;border:0!important;box-shadow:none!important;
min-height:0!important;height:auto!important;width:auto!important;padding:6px!important;border-radius:0!important;color:inherit!important}
#siteHeader #hamburger:hover,#siteHeader #hamburger:focus{background:none!important;box-shadow:none!important}
#siteHeader #hamburger span{background:var(--ink)!important}
/* =====================================================================
HERO — full-bleed cinematic composition
===================================================================== */
.hero{position:relative;overflow:hidden;background:var(--cream-50);isolation:isolate;height:calc(100svh - 121px);min-height:520px}
/* the cinematic product photo spans the ENTIRE hero, edge to edge */
.hero__bg{position:absolute;inset:0;z-index:0}
/* two stacked layers → clean crossfade (base holds the current image, overlay
fades the next in on top so the cream background never flashes through) */
/* !important defeats the legacy global img{height:auto} reset which otherwise makes the
hero image size to its intrinsic aspect and top-align (cropping the vial base). */
.hero__img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;object-position:center bottom}
.hero__img--base{z-index:0;opacity:1}
.hero__img--over{z-index:1;opacity:0;transition:opacity .9s var(--ease)}
.hero__img--over.is-shown{opacity:1}
/* gentle legibility wash over the continuous photo — soft on the left where the
text sits, clear over the product. No hard band. */
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
background:
linear-gradient(96deg, rgba(245,243,238,.74) 0%, rgba(245,243,238,.5) 20%, rgba(245,243,238,.2) 38%, rgba(245,243,238,.04) 50%, transparent 60%),
linear-gradient(180deg, rgba(245,243,238,.12) 0%, transparent 26%)}
/* featured-product clickable hotspot sits over the vial on the right */
.hero__hotspot{position:absolute;top:0;right:0;bottom:0;width:44%;z-index:3;display:block;cursor:pointer}
/* clean "stamp" seal: stacked text + truck (no curved micro-type) */
.hero__seal{position:absolute;top:7%;right:4%;width:clamp(172px,18vw,228px);aspect-ratio:1;color:var(--forest-900);z-index:4;
background:rgba(247,245,239,.96);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;
-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
box-shadow:0 22px 44px -20px rgba(20,21,15,.55);transition:transform .5s var(--ease)}
.hero__seal::before{content:"";position:absolute;inset:8px;border-radius:50%;border:1px solid rgba(53,53,37,.28)}
.seal__line{font-family:var(--font-ui);font-weight:700;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;line-height:1;z-index:1}
.seal__line--top{color:var(--forest-700)}
.seal__truck{width:38%;height:auto;fill:none;stroke:var(--forest-900);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;z-index:1}
.hero__hotspot:hover .hero__seal{transform:scale(1.05) rotate(-3deg)}
/* floating RUO compliance bubble in the hero */
.hero__compliance{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:4;
display:inline-flex;align-items:center;gap:.5rem;max-width:calc(100% - 48px);
padding:.5rem 1rem;border-radius:40px;background:rgba(30,31,22,.62);color:#f3f1e8;
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);
font-size:.68rem;font-weight:500;letter-spacing:.04em;line-height:1.2;box-shadow:0 12px 30px -18px rgba(20,21,15,.6)}
.hero__compliance svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
/* featured-product switcher */
.hero__swap{display:flex;align-items:center;gap:.7rem;margin-top:3rem;flex-wrap:wrap}
.hero__swap-label{font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.hero__swap-pills{display:flex;gap:.4rem;flex-wrap:wrap}
.hero__swap-pill{font-family:var(--font-ui);font-size:.7rem;font-weight:600;letter-spacing:.03em;
padding:.42rem .82rem;border-radius:40px;border:1px solid var(--line);background:rgba(255,255,255,.5);
color:var(--ink-soft);cursor:pointer;transition:background .25s,border-color .25s,color .25s,transform .25s var(--ease);white-space:nowrap;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero__swap-pill:hover{border-color:var(--forest-700);color:var(--forest-900);transform:translateY(-1px)}
.hero__swap-pill.is-active{background:var(--forest-900);border-color:var(--forest-900);color:#f6f4ec}
.hero__hint{position:absolute;left:50%;bottom:9%;transform:translate(-50%,14px);z-index:4;
background:rgba(32,33,26,.92);color:#f4f1ea;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
padding:.55em 1.15em;border-radius:40px;opacity:0;transition:opacity .4s var(--ease),transform .4s var(--ease);white-space:nowrap;pointer-events:none}
.hero__hotspot:hover .hero__hint{opacity:1;transform:translate(-50%,0)}
/* Hero FILLS the viewport below the 40px announce + 81px sticky header (=121px), so no
section peeks below the fold. Image covers it; object-position:center bottom keeps the
vial + foreground visible while any crop is taken from the empty sky at the top. */
.hero__inner{position:relative;z-index:2;min-height:100%;display:flex;align-items:center}
.hero__copy{max-width:600px;padding-block:clamp(1.4rem,3.5vw,2.4rem)}
.hero__title{font-family:var(--font-display);font-weight:600;color:var(--ink);
font-size:clamp(2.9rem,5.8vw,5rem);line-height:.96;letter-spacing:-.005em;margin:.35rem 0 1.1rem}
/* emphasis: warm-olive italic on a key word (shared by hero + section titles) */
.hero__title em,.section-title em,.cta__title em{font-style:italic;font-weight:500;color:var(--olive)}
.hero__sub{font-size:1.08rem;color:var(--ink-soft);max-width:none;margin:0 0 2rem;white-space:normal}
.hero__trust{display:flex;flex-wrap:wrap;gap:1.2rem 1.7rem;padding-block:1.4rem;margin-bottom:1.9rem;
border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:440px}
.hero__trust li{display:inline-flex;align-items:center;gap:.55rem;font-size:.8rem;font-weight:500;color:var(--ink-soft);letter-spacing:.02em}
.hero__trust .ic{width:24px;height:24px;stroke-width:1.3;color:var(--forest-700)}
.hero__actions{display:flex;gap:1rem;flex-wrap:wrap}
/* =====================================================================
TRUST BAR
===================================================================== */
.trustbar{background:var(--forest-950);color:#e9e7d5}
.trustbar__inner{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;padding-block:2.2rem}
.trustbar__item{display:flex;align-items:flex-start;gap:.9rem}
.trustbar__item .ic{width:30px;height:30px;stroke-width:1.2;color:#cfd1b3;margin-top:2px}
.trustbar__item h3{font-family:var(--font-ui);font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.35rem}
.trustbar__item p{font-size:.8rem;line-height:1.5;color:rgba(233,231,213,.7);margin:0}
/* =====================================================================
STANDARD
===================================================================== */
.standard{position:relative;background:linear-gradient(180deg,var(--cream-50),var(--cream-100));overflow:hidden}
.standard__hex{position:absolute;top:-40px;right:-60px;width:min(46%,560px);aspect-ratio:1;pointer-events:none;opacity:.5;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:repeat;background-size:120px 104px;-webkit-mask-image:radial-gradient(80% 80% at 80% 20%,#000,transparent 75%);mask-image:radial-gradient(80% 80% at 80% 20%,#000,transparent 75%)}
.standard__inner{position:relative;display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,5rem);align-items:center;padding-block:clamp(3.6rem,7vw,6rem)}
.standard__text{color:var(--muted);max-width:48ch;margin:1.4rem 0 1.9rem}
.standard__text p{margin:0 0 1rem}
.standard__text p:last-child{margin-bottom:0}
.standard__text strong{color:var(--forest-700);font-weight:600}
/* 2x2 so the pillars fill the column height and sit balanced with the copy */
.standard__features{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;align-self:center}
.feature{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;padding:1.5rem 1rem;
border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.45);
transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s}
.feature:hover{transform:translateY(-5px);box-shadow:0 22px 46px -34px rgba(20,21,15,.5);border-color:var(--cream-300)}
.feature__ic{width:42px;height:42px;margin-bottom:.5rem;fill:none;stroke:var(--forest-900);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.feature h4{font-family:var(--font-ui);font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.feature__sub{font-family:var(--font-ui);font-size:.68rem;font-weight:500;color:var(--muted);letter-spacing:.02em;line-height:1.3}
/* =====================================================================
BEST SELLERS
===================================================================== */
.bestsellers{background:var(--cream-100);padding-block:clamp(3.4rem,7vw,5.5rem)}
.kicker.center{text-align:center}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.product-card{background:var(--cream-50);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;
transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--cream-300)}
.product-card__img{position:relative;aspect-ratio:1/1;overflow:hidden;background:#fff}
.product-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.product-card:hover .product-card__img img{transform:scale(1.05)}
/* Unified SALE badge — identical look on home cards, shop cards, related cards
and the single-product gallery (see product-page.css .onsale). Clean forest
pill, cream text, soft lift. */
.product-card__badge{position:absolute;top:.8rem;left:.8rem;z-index:2;
background:linear-gradient(135deg,#e2942f 0%,#bd4a24 100%);color:#fff;
font-family:var(--font-ui);font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;line-height:1;
padding:.56em 1.02em;border-radius:999px;box-shadow:0 10px 22px -8px rgba(189,74,36,.5);
transform-origin:left center;animation:ol-sale-pulse 2.6s var(--ease) infinite}
@keyframes ol-sale-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.product-card__badge{animation:none}}
.product-card__body{padding:1rem 1.1rem 1.15rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.product-card__name{font-family:var(--font-ui);font-size:.9rem;font-weight:600;color:var(--ink);line-height:1.25;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-card__price{font-family:var(--font-ui);font-size:.95rem;font-weight:600;color:var(--forest-700);margin-top:.1rem}
.product-card__price .was{color:var(--muted);font-weight:400;text-decoration:line-through;font-size:.82rem;margin-right:.4rem}
.product-card__cta{margin-top:.9rem;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
font-family:var(--font-ui);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
padding:.7em 1em;border-radius:7px;border:1.5px solid var(--forest-900);background:var(--forest-900);color:#f6f4ec;
transition:background .25s var(--ease),color .25s var(--ease)}
.product-card:hover .product-card__cta{background:transparent;color:var(--forest-900)}
.bestsellers__all{text-align:center;margin-top:2.6rem}
/* =====================================================================
DELIVERY BANNER
===================================================================== */
.delivery{background:var(--cream-100);padding-block:clamp(1rem,3vw,2.5rem) clamp(3rem,6vw,4.5rem)}
.delivery__panel{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;
background:var(--forest-950);color:#eae8d5;border-radius:var(--radius-lg);overflow:hidden;
padding:clamp(2rem,4vw,3.4rem);isolation:isolate;box-shadow:var(--shadow)}
.delivery__photo{position:absolute;inset:0;left:auto;width:52%;z-index:-1;
background-image:linear-gradient(90deg,var(--forest-950) 0%,rgba(32,33,26,.85) 22%,rgba(32,33,26,.15) 60%,transparent 100%),url("../img/v2/vegas-night.png");
background-size:cover;background-position:center right}
.delivery__title{font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,3.8vw,3rem);line-height:1.02;margin:.4rem 0 1rem;color:#f5f3ee}
.delivery__text{color:rgba(234,232,213,.82);max-width:38ch;margin:0 0 1.7rem}
.delivery__list{display:grid;gap:1.15rem;align-content:center}
.delivery__list li{display:flex;align-items:center;gap:.9rem}
.delivery__list .ic{width:26px;height:26px;stroke-width:1.2;color:#cfd1b3;flex:none}
.delivery__list b{display:block;font-size:.9rem;font-weight:600;color:#f5f3ee}
.delivery__list span{font-size:.8rem;color:rgba(234,232,213,.64)}
/* =====================================================================
FINAL CTA
===================================================================== */
.cta{background:var(--cream-100);padding-block:clamp(2rem,5vw,4rem) clamp(3.4rem,7vw,5.5rem)}
.cta__panel{position:relative;display:grid;grid-template-columns:.92fr 1.06fr .92fr;gap:2rem;align-items:center;
background:var(--cream-50);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
padding:clamp(1.6rem,3vw,2.4rem);box-shadow:var(--shadow-soft)}
.cta__photo{align-self:stretch;min-height:240px;border-radius:var(--radius);background-image:url("../img/v2/cta.png");background-size:cover;background-position:center}
.cta__title{font-family:var(--font-display);font-weight:600;font-size:clamp(1.9rem,3.5vw,2.8rem);line-height:1.02;margin-bottom:.9rem;color:var(--ink)}
.cta__copy p{color:var(--muted);margin:0 0 1.6rem;max-width:32ch}
.cta__points{display:grid;gap:1.15rem}
.cta__points li{display:flex;align-items:flex-start;gap:.85rem}
.cta__points .ic{width:26px;height:26px;stroke-width:1.2;color:var(--forest-900);margin-top:2px}
.cta__points b{display:block;font-size:.86rem;font-weight:600;color:var(--ink)}
.cta__points span{font-size:.8rem;color:var(--muted)}
/* =====================================================================
FOOTER
===================================================================== */
.site-footer{background:var(--forest-950);color:#c9cbb2}
.site-footer__inner{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.4fr;gap:2rem;padding-block:clamp(2.6rem,5vw,3.6rem)}
.site-footer__brand .brand__logo{height:38px}
.site-footer__tag{font-family:var(--font-display);font-size:1.05rem;color:#9a9c7f;margin:1rem 0 1.3rem;line-height:1.3}
.social{display:flex;gap:.7rem}
.social a{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;transition:background .3s,border-color .3s}
.social a svg{width:17px;height:17px;fill:none;stroke:#c9cbb2;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.social a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
.site-footer__col h5{font-family:var(--font-ui);font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#f2ede2;margin-bottom:1.1rem}
.site-footer__col a{display:block;font-size:.85rem;color:#a8aa8f;padding:.28rem 0;transition:color .25s}
.site-footer__col a:hover{color:#f2ede2}
.site-footer__col p{font-size:.82rem;color:#9a9c7f;margin:0 0 1rem}
.subscribe{display:flex;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:8px;overflow:hidden;max-width:290px}
.subscribe input{flex:1;background:none;border:0;color:#f2ede2;padding:.72rem .9rem;font-family:var(--font-ui);font-size:.84rem;outline:none}
.subscribe input::placeholder{color:#8a8c72}
.subscribe button{background:var(--forest-700);border:0;width:46px;display:grid;place-items:center;cursor:pointer;transition:background .3s}
.subscribe button:hover{background:var(--forest-600)}
.subscribe button svg{width:18px;height:18px;fill:none;stroke:#f2ede2;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Footer newsletter — force the unified input+button pill on ALL pages/breakpoints.
Legacy generic form/button rules were making the input white + button ~129px wide with a
pill radius on non-home mobile, so it looked like two separate blobs. */
html body.oasis-redesign .site-footer .subscribe{
display:flex!important;flex-wrap:nowrap!important;gap:0!important;overflow:hidden!important;
background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.16)!important;
border-radius:8px!important;max-width:320px!important;width:100%!important}
html body.oasis-redesign .site-footer .subscribe input{
flex:1 1 auto!important;width:auto!important;min-width:0!important;background:transparent!important;
border:0!important;border-radius:0!important;color:#f2ede2!important;box-shadow:none!important;
padding:.72rem .9rem!important;margin:0!important;min-height:0!important}
html body.oasis-redesign .site-footer .subscribe button{
flex:0 0 48px!important;width:48px!important;min-width:48px!important;max-width:48px!important;height:auto!important;
background:var(--forest-700)!important;border:0!important;border-radius:0!important;padding:0!important;
margin:0!important;min-height:0!important;display:grid!important;place-items:center!important}
.site-footer__legal{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#7a7c63;border-top:1px solid rgba(255,255,255,.1);padding-block:1.3rem}
/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(26px)}
.no-js [data-reveal]{opacity:1;transform:none}
/* =====================================================================
RESPONSIVE
===================================================================== */
@media (max-width:1240px){ .announce__right{display:none} }
@media (max-width:1080px){
.announce__mid{display:none}
.product-grid{grid-template-columns:repeat(3,1fr)}
.site-footer__inner{grid-template-columns:1fr 1fr 1fr;gap:2rem 1.5rem}
.site-footer__brand{grid-column:1/-1}
.site-footer__col--wide{grid-column:1/-1;max-width:none}
}
@media (max-width:900px){
.nav{display:none}
.header__action span:not(.header__cartcount){display:none}
.header__action{padding:.5rem}
.hamburger{display:flex}
/* hero: image stays full-bleed behind; scrim shifts to a vertical fade so
the overlaid text reads over the lower cream area on tall screens */
.hero__img{object-position:72% bottom}
.hero__scrim{background:
linear-gradient(180deg, rgba(245,243,238,.15) 0%, rgba(245,243,238,.35) 42%, rgba(245,243,238,.9) 74%, var(--cream-50) 100%)}
.hero__hotspot{width:100%;height:52%;bottom:auto;top:0}
.hero__seal{top:10%;right:6%}
.hero__inner{min-height:74vh;align-items:flex-end;padding-bottom:2.4rem}
.hero__title{font-size:clamp(3.4rem,15vw,5rem)}
.hero__copy{max-width:none}
.trustbar__inner{grid-template-columns:1fr 1fr}
.standard__inner{grid-template-columns:1fr;gap:2rem}
.standard__features{grid-template-columns:1fr 1fr;gap:1.4rem 1rem}
.product-grid{grid-template-columns:repeat(2,1fr)}
.delivery__panel{grid-template-columns:1fr}
.delivery__photo{position:relative;width:auto;height:200px;z-index:0;margin:-1rem -1rem 0;
background-image:linear-gradient(180deg,transparent,rgba(32,33,26,.2)),url("../img/v2/vegas-night.png");order:3}
.delivery__copy{order:1}.delivery__list{order:2}
.cta__panel{grid-template-columns:1fr;gap:1.6rem}
.cta__photo{min-height:210px}
}
@media (max-width:560px){
.announce__lead{font-size:.58rem}
.hero__compliance{font-size:.6rem;bottom:14px}
.standard__features{grid-template-columns:1fr 1fr}
.trustbar__inner{grid-template-columns:1fr;gap:1.3rem}
.site-footer__inner{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
*{animation-duration:.001ms!important;transition-duration:.001ms!important}
[data-reveal]{opacity:1!important;transform:none!important}
.hero__seal svg{animation:none!important}
.ticker__track{animation:none!important}
.ticker{overflow-x:auto}
html{scroll-behavior:auto}
}
/* =====================================================================
WORDPRESS INTEGRATION — Best Sellers WC cards + footer disclaimer
===================================================================== */
.product-card{position:relative}
.product-card__link{display:flex;flex-direction:column;flex:1;color:inherit}
.product-card__price ins{text-decoration:none;font-weight:600;color:var(--forest-700)}
.product-card__price del{color:var(--muted);font-weight:400;font-size:.82rem;margin-right:.4rem;opacity:.9}
.product-card__price .woocommerce-Price-amount{font-weight:600;color:var(--forest-700)}
.product-card__price{color:var(--forest-700)}
/* WooCommerce loop add-to-cart button, restyled as the v2 card CTA */
.product-card .button,
.product-card a.added_to_cart{margin:.9rem 1.1rem 1.15rem;display:flex;align-items:center;justify-content:center;gap:.4rem;
font-family:var(--font-ui);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
padding:.72em 1em;border-radius:7px;border:1.5px solid var(--forest-900);background:var(--forest-900);color:#f6f4ec;
transition:background .25s var(--ease),color .25s var(--ease);cursor:pointer;text-align:center}
.product-card:hover .button{background:transparent;color:var(--forest-900)}
.product-card .button.loading{opacity:.65;pointer-events:none}
.product-card .button.added{border-color:var(--forest-700)}
/* =====================================================================
SHOP + RELATED cards use the home .product-card markup (content-product.php
override) so they match the home best-sellers EXACTLY. Neutralize the legacy
`ul.products li.product` unified-card styling that would otherwise double up.
===================================================================== */
html body.oasis-redesign ul.products li.product.product-card{
padding:0!important;margin:0!important;background:var(--cream-50)!important;
border:1px solid var(--line)!important;border-radius:var(--radius)!important;overflow:hidden!important;
text-align:left!important;display:flex!important;flex-direction:column!important;box-shadow:none!important;
min-width:0!important}
html body.oasis-redesign ul.products li.product.product-card::before,
html body.oasis-redesign ul.products li.product.product-card::after{content:none!important}
html body.oasis-redesign ul.products li.product.product-card:hover{
transform:translateY(-6px)!important;box-shadow:var(--shadow)!important;border-color:var(--cream-300)!important}
html body.oasis-redesign ul.products li.product.product-card .product-card__link{
padding:0!important;display:flex!important;flex-direction:column!important;flex:1!important;color:inherit!important;text-decoration:none!important}
html body.oasis-redesign ul.products li.product.product-card .product-card__img{
width:100%!important;aspect-ratio:1/1!important;border-radius:0!important;padding:0!important;border:0!important;box-shadow:none!important;background:#fff!important}
html body.oasis-redesign ul.products li.product.product-card .product-card__img img{
width:100%!important;height:100%!important;object-fit:cover!important;transform:none!important;border-radius:0!important}
html body.oasis-redesign ul.products li.product.product-card:hover .product-card__img img{transform:scale(1.05)!important}
html body.oasis-redesign ul.products li.product.product-card .product-card__body{padding:1rem 1.1rem .2rem!important;text-align:left!important}
/* Add-to-cart on shop/related — match the home .product-card button EXACTLY. High
specificity (mirrors product-cards.css's shop selector + .product-card) so it wins. */
html body.oasis-redesign :is(.ol-products__grid,.ol-shop-shell .ol-shop-body,.ol-shop-body,.related.products) ul.products li.product.product-card :is(.button,a.button,span.button,.add_to_cart_button,.ol-select-size){
margin:.9rem 1.1rem 1.15rem!important;padding:.72em 1em!important;font-size:.7rem!important;line-height:1.6!important;
border-radius:7px!important;letter-spacing:.1em!important;font-weight:600!important;min-height:0!important;width:auto!important;
text-transform:uppercase!important;font-family:var(--font-ui)!important;
background:var(--forest-900)!important;color:#f6f4ec!important;border:1.5px solid var(--forest-900)!important;
display:flex!important;align-items:center!important;justify-content:center!important}
html body.oasis-redesign :is(.ol-products__grid,.ol-shop-shell .ol-shop-body,.ol-shop-body,.related.products) ul.products li.product.product-card:hover :is(.button,a.button,span.button,.add_to_cart_button,.ol-select-size){
background:transparent!important;color:var(--forest-900)!important}
/* Rewards-plugin "earn X points" message doesn't exist on the home card — hide it so
shop + related match exactly. (Points still accrue at checkout.) */
.product-card .wlr-product-message,
html body.oasis-redesign ul.products li.product.product-card .wlr-product-message{display:none!important}
/* Slim size selector on the LOOP cards (home best-sellers + shop + related): "Size:" label
inline with the chips on one compact row, thinner chips. The