/*
Theme Name: NoDak Labs
Theme URI: https://nodaklabs.com
Description: NoDak Labs storefront. Child of Storefront. Carries the design system ported from the Shopify (Horizon) build so the WooCommerce store matches nodaklabs.com.
Author: NoDak Labs LLC
Template: storefront
Version: 2.8.2
*/

/* ===========================================================================
   NoDak Labs — design system.

   Ported verbatim from the Shopify theme's assets/ndl-styles.css so the two
   storefronts match. Keep changes in sync, or don't — once Shopify is retired
   this is the only copy that matters.

   PALETTE LIFT (Oct 2026). Surfaces used to be near-black — --ndl-bg was
   #08090A — which read as a void rather than a dark room and crushed the
   product photography's shadows. Everything moved up ~4 steps, text and muted
   gained contrast, gold brightened, and the hairline borders went up with them
   because a .06 rule is invisible once the surface behind it lightens.

   --ndl-ink is the dark used for TEXT ON LIGHT BUTTONS. It must stay near-black
   and must NOT track --ndl-bg, or every button label loses contrast.

   The Shopify file carried #header-group sticky overrides to defeat Horizon's
   `display:contents`. Those are gone here — Storefront has no such element and
   our own header handles its own stickiness.
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --ndl-bg:#15181C; --ndl-raised:#1B1F24; --ndl-surface:#20242A; --ndl-surface-2:#272C33;
  --ndl-ink:#0D0F12;
  --ndl-text:#F4F6F8; --ndl-muted:#A7B0B8; --ndl-faint:#848D96;
  --ndl-line:rgba(255,255,255,.14); --ndl-line-soft:rgba(255,255,255,.085);
  --ndl-gold:#C9A65E; --ndl-gold-lift:#E3C68A;
  --ndl-ff-display:'Hanken Grotesk','Inter',-apple-system,sans-serif;
  --ndl-ff-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ndl-ff-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ndl-gutter:clamp(18px,4vw,44px); --ndl-maxw:1320px;
}

/* ---- Storefront neutralisation -------------------------------------------
   Storefront ships a light theme with its own header, footer, page widths and
   button styling. Rather than fight it rule by rule further down, flatten it
   here: dark canvas, full-bleed content, no rounded light buttons, and let the
   NoDak classes do the work. */
body,
body.woocommerce,
.site,
.site-content,
#content{background:var(--ndl-bg);color:var(--ndl-text);font-family:var(--ndl-ff-sans)}
body{margin:0}
.site-content{padding-top:0}
.site-header,
.storefront-breadcrumb,
.site-info,
.storefront-handheld-footer-bar{display:none!important}
.col-full{max-width:var(--ndl-maxw);padding-inline:var(--ndl-gutter);margin-inline:auto}
.content-area,.widget-area{float:none;width:auto;margin:0}
h1,h2,h3,h4,h5,h6{font-family:var(--ndl-ff-display);color:var(--ndl-text)}
a{color:var(--ndl-text)}
p{color:var(--ndl-muted)}
::selection{background:var(--ndl-gold);color:var(--ndl-ink)}

.ndl-container{max-width:var(--ndl-maxw);margin:0 auto;padding-inline:var(--ndl-gutter)}
.ndl-section{padding-block:clamp(48px,6vw,88px);background:var(--ndl-bg)}
.ndl-section *,.ndl-hero *,.ndl-footer *{box-sizing:border-box}
.ndl-section--tight{padding-block:clamp(34px,4vw,56px)}
.ndl-section--raised{background:var(--ndl-raised)}

.ndl-eyebrow{font-family:var(--ndl-ff-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ndl-faint);margin:0 0 14px}
.ndl-eyebrow--rule{display:flex;align-items:center;gap:.9em}
.ndl-eyebrow--rule::before{content:'';width:20px;height:1px;background:var(--ndl-gold);flex:none}
.ndl-head--center{text-align:center}
.ndl-head--center .ndl-lede{margin-inline:auto}
.ndl-head--center .ndl-eyebrow--rule{justify-content:center}

.ndl-h1{font-family:var(--ndl-ff-display);font-weight:700;font-size:clamp(2.3rem,5vw,3.9rem);line-height:1.04;letter-spacing:-.03em;color:var(--ndl-text);margin:0 0 20px;text-wrap:balance}
.ndl-h1 .ndl-dim{color:var(--ndl-faint)}
.ndl-h2{font-family:var(--ndl-ff-display);font-weight:700;font-size:clamp(1.6rem,3vw,2.35rem);line-height:1.12;letter-spacing:-.025em;color:var(--ndl-text);margin:0;text-wrap:balance}
.ndl-h3{font-family:var(--ndl-ff-display);font-weight:600;font-size:15.5px;letter-spacing:-.005em;color:var(--ndl-text);margin:0 0 .5rem}
.ndl-p{font-family:var(--ndl-ff-sans);font-size:15px;line-height:1.72;color:var(--ndl-muted);margin:0 0 1.05em;max-width:66ch}
.ndl-p:last-child{margin-bottom:0}
.ndl-p a{color:var(--ndl-text);text-decoration:underline;text-underline-offset:3px}
.ndl-lede{font-family:var(--ndl-ff-sans);font-size:clamp(.98rem,1.4vw,1.06rem);line-height:1.7;color:var(--ndl-muted);max-width:54ch;margin:0}
.ndl-section strong,.ndl-hero strong{color:var(--ndl-text);font-weight:600}

.ndl-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;background:var(--ndl-text);color:var(--ndl-ink);font-family:var(--ndl-ff-sans);font-weight:600;font-size:13.5px;padding:13px 26px;border:1px solid var(--ndl-text);border-radius:3px;text-decoration:none;cursor:pointer;transition:opacity .18s ease,background .18s ease}
.ndl-btn:hover{opacity:.88;color:var(--ndl-ink)}
.ndl-btn--ghost{background:transparent;color:var(--ndl-text);border-color:rgba(255,255,255,.26)}
.ndl-btn--ghost:hover{background:rgba(255,255,255,.08);color:var(--ndl-text);opacity:1;border-color:rgba(255,255,255,.44)}
.ndl-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.ndl-link{font-family:var(--ndl-ff-sans);font-size:13px;font-weight:500;color:var(--ndl-text);text-decoration:none;display:inline-flex;align-items:center;gap:.5em;border:1px solid var(--ndl-line);border-radius:3px;padding:9px 16px;white-space:nowrap;transition:border-color .18s ease}
.ndl-link:hover{border-color:rgba(255,255,255,.38);color:var(--ndl-text)}
.ndl-link--bare{border:0;padding:0;font-family:var(--ndl-ff-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ndl-muted)}
.ndl-link--bare:hover{color:var(--ndl-text)}

/* hero */
.ndl-hero{background:var(--ndl-bg);position:relative;overflow:hidden}
.ndl-hero__in{max-width:var(--ndl-maxw);margin:0 auto;padding:clamp(46px,6vw,84px) var(--ndl-gutter) clamp(44px,5.5vw,76px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.ndl-hero__copy{min-width:0}
.ndl-hero__media{min-width:0;position:relative;border-radius:6px;overflow:hidden}
.ndl-hero__media img,.ndl-hero__media video{display:block;width:100%;height:auto;max-height:min(72vh,640px);object-fit:cover;object-position:52% 50%}
/* The video overlays the still rather than replacing it, so hiding the video
   under prefers-reduced-motion reveals the image instead of an empty box. */
.ndl-hero__media.has-video video{position:absolute;inset:0;width:100%;height:100%;max-height:none}
.ndl-hero__ph{aspect-ratio:16/11;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 90% at 65% 40%,#2B313A 0%,#181B20 70%);border:1px solid var(--ndl-line-soft);border-radius:6px}
.ndl-hero__ph img{width:58%;max-width:340px;height:auto;opacity:.68;max-height:none}
.ndl-stats{display:flex;flex-wrap:wrap;gap:clamp(26px,4vw,52px);margin-top:clamp(28px,3.5vw,44px);padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--ndl-line-soft)}
.ndl-stat__v{font-family:var(--ndl-ff-display);font-weight:700;font-size:clamp(1.3rem,2.2vw,1.75rem);letter-spacing:-.02em;color:var(--ndl-text);line-height:1.1}
.ndl-stat__l{font-family:var(--ndl-ff-mono);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ndl-faint);margin-top:7px}
.ndl-hero__promo{display:inline-flex;align-items:center;gap:.6em;font-family:var(--ndl-ff-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ndl-gold-lift);border:1px solid rgba(201,166,94,.42);background:rgba(201,166,94,.12);border-radius:2px;padding:6px 10px;margin:0 0 18px}

/* section head with trailing link */
.ndl-rowhead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(20px,2.6vw,30px)}
.ndl-rowhead__t{min-width:0}

/* product grid */
.ndl-pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);list-style:none;margin:0;padding:0}
/* Woo's <li class="product"> sits between the grid and our card. display:contents
   removes it from the layout so the grid places .ndl-pcard itself. */
.ndl-pgrid > li{display:contents}
.ndl-pgrid > li::before,.ndl-pgrid > li::after{display:none}
.woocommerce .ndl-pgrid li.product{width:auto;margin:0;float:none;clear:none}
.woocommerce-products-header,.storefront-sorting + .ndl-pgrid{margin-top:0}
.woocommerce .woocommerce-result-count,.woocommerce .woocommerce-ordering select{color:var(--ndl-muted);font-family:var(--ndl-ff-sans);font-size:13px}
.ndl-pcard{position:relative;display:flex;flex-direction:column;background:var(--ndl-surface);border:1px solid var(--ndl-line-soft);border-radius:4px;overflow:hidden;transition:border-color .2s ease;margin:0}
.ndl-pcard::before,.ndl-pcard::after{display:none}
.ndl-pcard:hover{border-color:rgba(255,255,255,.24)}
.ndl-pcard__media{position:relative;display:block;aspect-ratio:1/1;background:linear-gradient(170deg,#2A3038 0%,#191D22 100%);overflow:hidden}
.ndl-pcard__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.7,.3,1);margin:0;border-radius:0}
.ndl-pcard:hover .ndl-pcard__media img{transform:scale(1.04)}
.ndl-pcard__tag{position:absolute;top:10px;left:10px;z-index:2;font-family:var(--ndl-ff-mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ndl-muted);background:rgba(21,24,28,.78);border:1px solid var(--ndl-line-soft);border-radius:2px;padding:4px 7px;backdrop-filter:blur(6px)}
.ndl-pcard__body{padding:14px 15px 15px;display:flex;flex-direction:column;gap:5px;flex:1}
.ndl-pcard__name{font-family:var(--ndl-ff-sans);font-size:14px;font-weight:500;line-height:1.35;color:var(--ndl-text);text-decoration:none}
.ndl-pcard__name:hover{color:var(--ndl-text);text-decoration:underline;text-underline-offset:3px}
.ndl-pcard__price{font-family:var(--ndl-ff-display);font-weight:700;font-size:16px;color:var(--ndl-text);letter-spacing:-.015em;margin-top:2px}
.ndl-pcard__price del{color:var(--ndl-faint);font-weight:500;font-size:13px;margin-right:.45em;text-decoration:line-through}
.ndl-pcard__price ins{text-decoration:none;color:var(--ndl-text)}
.ndl-pcard__foot{padding:0 15px 15px;margin-top:auto}
.ndl-pcard__atc{display:flex;align-items:center;justify-content:center;gap:.5em;width:100%;padding:10px 12px;font-family:var(--ndl-ff-sans);font-size:12.5px;font-weight:500;color:var(--ndl-text);background:transparent;border:1px solid var(--ndl-line);border-radius:3px;cursor:pointer;text-decoration:none;transition:background .18s ease,border-color .18s ease}
.ndl-pcard__atc:hover{background:var(--ndl-text);color:var(--ndl-ink);border-color:var(--ndl-text)}
.ndl-pcard__soldout{font-family:var(--ndl-ff-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ndl-faint);text-align:center;padding:11px 0}
.ndl-empty{border:1px dashed var(--ndl-line);border-radius:4px;padding:40px 24px;text-align:center;color:var(--ndl-faint);font-family:var(--ndl-ff-sans);font-size:14px}

/* promises band */
.ndl-promises{background:var(--ndl-raised);padding-block:clamp(48px,6vw,88px);position:relative}
.ndl-promises__h{text-align:center;margin-bottom:clamp(26px,3.4vw,42px)}
.ndl-pgrid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));gap:clamp(12px,1.4vw,18px);align-items:start}
.ndl-promise{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--ndl-line-soft);border-radius:4px;min-height:280px;display:flex;flex-direction:column;justify-content:flex-end;padding:22px}
.ndl-promise img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:brightness(.72) saturate(.88)}
.ndl-promise::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(21,24,28,.20) 0%,rgba(21,24,28,.76) 62%,rgba(21,24,28,.94) 100%)}
/* no photo yet: don't reserve empty picture space */
.ndl-promise--plain{background:var(--ndl-surface);min-height:0;justify-content:flex-start;padding:24px}
.ndl-promise--plain::after{display:none}
.ndl-promise .ndl-h3{font-size:18px;margin-bottom:.45rem}
.ndl-promise .ndl-p{font-size:13.5px;line-height:1.6;margin-bottom:14px}
.ndl-promise .ndl-p:last-child{margin-bottom:0}

/* accordion */
.ndl-q{border-top:1px solid var(--ndl-line)}
.ndl-q:last-of-type{border-bottom:1px solid var(--ndl-line)}
.ndl-q summary{list-style:none;cursor:pointer;padding:19px 44px 19px 0;position:relative;font-family:var(--ndl-ff-sans);font-size:15px;font-weight:500;color:var(--ndl-text);line-height:1.5}
.ndl-q summary::-webkit-details-marker{display:none}
.ndl-q summary::before,.ndl-q summary::after{content:'';position:absolute;right:8px;top:50%;background:var(--ndl-muted);transition:transform .22s ease,opacity .22s ease}
.ndl-q summary::before{width:12px;height:1px;margin-top:-.5px}
.ndl-q summary::after{width:1px;height:12px;right:13.5px;margin-top:-6px}
.ndl-q[open] summary::after{transform:rotate(90deg);opacity:0}
.ndl-q > div{padding:0 44px 22px 0}
.ndl-q > div .ndl-p{font-size:14px}

/* cards */
.ndl-grid{display:grid;gap:clamp(12px,1.4vw,18px);margin-top:clamp(24px,3vw,34px)}
.ndl-grid--3{grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.ndl-card{background:var(--ndl-surface);border:1px solid var(--ndl-line-soft);border-radius:4px;padding:22px}
.ndl-card .ndl-p{font-size:13.8px;margin-bottom:0}
.ndl-tag{font-family:var(--ndl-ff-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ndl-gold);margin:0 0 12px;display:block}

/* split feature rows */
.ndl-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,4vw,64px);align-items:center}
.ndl-split--flip .ndl-split__media{order:-1}
.ndl-split__media img{display:block;width:100%;height:auto;border-radius:4px}
.ndl-list{list-style:none;margin:18px 0 0;padding:0}
.ndl-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;padding:13px 0;border-top:1px solid var(--ndl-line-soft)}
.ndl-list li svg{width:15px;height:15px;color:var(--ndl-gold);margin-top:3px;flex:none}
.ndl-list b{font-family:var(--ndl-ff-sans);font-size:14px;font-weight:600;color:var(--ndl-text);display:block;margin-bottom:3px}
.ndl-list span{font-family:var(--ndl-ff-sans);font-size:13.4px;line-height:1.6;color:var(--ndl-muted)}

/* marquee */
.ndl-mq{position:relative;overflow:hidden;background:var(--ndl-bg);border-bottom:1px solid var(--ndl-line-soft);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.ndl-mq__track{display:flex;width:max-content;animation:ndl-scroll 34s linear infinite}
.ndl-mq:hover .ndl-mq__track{animation-play-state:paused}
.ndl-mq__set{display:flex;align-items:center;flex:none;height:38px}
.ndl-mq__item{display:flex;align-items:center;gap:10px;flex:none;white-space:nowrap}
.ndl-mq__item svg{width:14px;height:14px;color:var(--ndl-gold);flex:none;display:block}
.ndl-mq__item b{font-family:var(--ndl-ff-mono);font-size:10px;font-weight:400;color:var(--ndl-muted);letter-spacing:.17em;text-transform:uppercase;line-height:1}
.ndl-mq__sep{flex:none;width:4px;height:4px;transform:rotate(45deg);background:var(--ndl-gold);opacity:.5;margin:0 clamp(26px,3.4vw,46px)}
@keyframes ndl-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- site header (ours, Storefront's is hidden) ------------------------- */
.ndl-hdrwrap{position:sticky;top:0;z-index:30;background:var(--ndl-bg)}
.ndl-hdr{display:flex;align-items:center;gap:clamp(18px,3vw,40px);height:64px;border-bottom:1px solid var(--ndl-line-soft)}
.ndl-hdr__brand{font-family:var(--ndl-ff-display);font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--ndl-text);text-decoration:none;white-space:nowrap}
.ndl-hdr__brand span{color:var(--ndl-gold)}
.ndl-hdr__nav{display:flex;gap:clamp(14px,2vw,26px);margin:0;padding:0;list-style:none;flex:1}
.ndl-hdr__nav a{font-family:var(--ndl-ff-sans);font-size:13.5px;color:var(--ndl-muted);text-decoration:none;white-space:nowrap}
.ndl-hdr__nav a:hover,.ndl-hdr__nav .current-menu-item > a{color:var(--ndl-text)}
.ndl-hdr__act{display:flex;align-items:center;gap:14px;margin-left:auto}
.ndl-hdr__act a{font-family:var(--ndl-ff-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ndl-muted);text-decoration:none;white-space:nowrap}
.ndl-hdr__act a:hover{color:var(--ndl-text)}
.ndl-hdr__cart{border:1px solid var(--ndl-line);border-radius:3px;padding:7px 12px}
@media(max-width:860px){
  .ndl-hdr{height:auto;flex-wrap:wrap;padding-block:12px;gap:10px}
  .ndl-hdr__nav{order:3;width:100%;overflow-x:auto;padding-bottom:4px}
}

/* ---- page head (archives, single pages) --------------------------------- */
.ndl-pagehead{padding-block:clamp(34px,4.5vw,62px) clamp(18px,2vw,26px);background:var(--ndl-bg);border-bottom:1px solid var(--ndl-line-soft)}

/* ---- single product ------------------------------------------------------ */
.single-product div.product{background:var(--ndl-bg)}
.single-product div.product .product_title{font-family:var(--ndl-ff-display);font-weight:700;font-size:clamp(1.7rem,3vw,2.3rem);letter-spacing:-.025em;color:var(--ndl-text)}
.single-product .woocommerce-Price-amount{font-family:var(--ndl-ff-display);color:var(--ndl-text)}
.single-product .price{color:var(--ndl-text)}
.single-product .woocommerce-product-details__short-description,
.single-product .woocommerce-Tabs-panel{color:var(--ndl-muted);font-size:15px;line-height:1.72}
.single-product .woocommerce-tabs ul.tabs li{background:var(--ndl-surface);border-color:var(--ndl-line-soft)}
.single-product .woocommerce-tabs ul.tabs li a{color:var(--ndl-muted)}
.single-product .woocommerce-tabs ul.tabs li.active a{color:var(--ndl-text)}
.woocommerce div.product form.cart .button,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit{background:var(--ndl-text);color:var(--ndl-ink);font-family:var(--ndl-ff-sans);font-weight:600;border-radius:3px;text-shadow:none}
.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce input.button:hover,.woocommerce div.product form.cart .button:hover{background:#fff;color:var(--ndl-ink)}
.woocommerce div.product form.cart .variations label{color:var(--ndl-muted);font-family:var(--ndl-ff-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.woocommerce div.product form.cart .variations select,
.woocommerce .quantity .qty,input[type=text],input[type=email],input[type=password],input[type=search],textarea,select{background:var(--ndl-surface);color:var(--ndl-text);border:1px solid var(--ndl-line);border-radius:3px}
.woocommerce-message,.woocommerce-info,.woocommerce-error{background:var(--ndl-surface);color:var(--ndl-text);border-top-color:var(--ndl-gold)}
.woocommerce-message::before,.woocommerce-info::before{color:var(--ndl-gold)}
.woocommerce table.shop_table,.woocommerce table.shop_table td,
.woocommerce table.shop_table th,.woocommerce-cart table.cart td.actions{background:transparent;color:var(--ndl-text);border-color:var(--ndl-line-soft)}
.wc-block-components-totals-item__label,.wc-block-components-product-name,
.wc-block-cart-item__wrap,.wc-block-components-totals-footer-item{color:var(--ndl-text)}

/* ---- footer -------------------------------------------------------------- */
.ndl-footer{background:var(--ndl-bg);border-top:1px solid var(--ndl-line-soft);padding-block:clamp(40px,5vw,64px) 0;font-family:var(--ndl-ff-sans)}
.ndl-footer__top{display:grid;grid-template-columns:minmax(240px,1.6fr) repeat(auto-fit,minmax(130px,1fr));gap:clamp(26px,3.4vw,48px)}
.ndl-footer__brand{font-family:var(--ndl-ff-display);font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--ndl-text);display:block;margin-bottom:14px}
.ndl-footer__brand span{color:var(--ndl-gold)}
.ndl-footer__tag{font-size:13.5px;line-height:1.65;color:var(--ndl-muted);max-width:32ch;margin:0}
.ndl-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.ndl-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--ndl-ff-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ndl-muted);border:1px solid var(--ndl-line-soft);border-radius:2px;padding:6px 9px}
.ndl-chip::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--ndl-gold)}
.ndl-fcol h4{font-family:var(--ndl-ff-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ndl-faint);margin:0 0 14px;font-weight:400}
.ndl-fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ndl-fcol a{font-size:13.5px;color:var(--ndl-muted);text-decoration:none}
.ndl-fcol a:hover{color:var(--ndl-text)}
.ndl-footer__disc{margin-top:clamp(32px,4vw,52px);padding-top:22px;border-top:1px solid var(--ndl-line-soft);font-family:var(--ndl-ff-mono);font-size:10.5px;line-height:1.85;color:var(--ndl-faint);letter-spacing:.02em}
.ndl-footer__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding-block:20px 26px;margin-top:18px;border-top:1px solid var(--ndl-line-soft);font-size:12px;color:var(--ndl-faint)}
.ndl-footer__bar nav{display:flex;flex-wrap:wrap;gap:20px}
.ndl-footer__bar a{color:var(--ndl-faint);text-decoration:none}
.ndl-footer__bar a:hover{color:var(--ndl-text)}

@media(min-width:901px){
  .ndl-hero__in{min-height:min(70vh,640px)}
}
@media(max-width:1100px){
  .ndl-pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .ndl-hero__in{grid-template-columns:1fr;gap:28px}
  .ndl-hero__media{order:-1}
  .ndl-hero__media img,.ndl-hero__media video{max-height:46vh}
  .ndl-split{grid-template-columns:1fr;gap:24px}
  .ndl-split--flip .ndl-split__media{order:0}
  .ndl-footer__top{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .ndl-pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@media(max-width:640px){
  .ndl-rowhead{flex-direction:column;align-items:flex-start;gap:12px}
  .ndl-pcard__body{padding:11px 11px 12px}
  .ndl-pcard__foot{padding:0 11px 11px}
  .ndl-pcard__name{font-size:13px}
  .ndl-stats{gap:22px}
  .ndl-footer__top{grid-template-columns:1fr}
  .ndl-mq__sep{margin:0 22px}
  .ndl-mq__track{animation-duration:26s}
}
@media(prefers-reduced-motion:reduce){
  .ndl-mq__track{animation:none;justify-content:center;width:100%}
  .ndl-mq__set:nth-child(2){display:none}
  .ndl-pcard__media img{transition:none}
  .ndl-hero__media video{display:none}
}

/* ===========================================================================
   Conversion components, ported from the Shopify snippets.
   Savings palette: gold is the brand accent and stays that way; green appears
   only where money is being saved, so it reads as a gain, not more branding.
   =========================================================================== */
:root{--ndl-gn:#2F8F5B;--ndl-gn-lift:#6FD69C;--ndl-gn-wash:rgba(47,143,91,.12)}

/* ---- assurance block ---- */
.ndl-as{border:1px solid var(--ndl-line);border-radius:5px;background:var(--ndl-surface);padding:12px 14px;margin:14px 0;font-family:var(--ndl-ff-sans)}
.ndl-as[hidden]{display:none}
.ndl-as__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.ndl-as__stock{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ndl-gn-lift)}
.ndl-as__stock.is-low{color:#E2A24A}
.ndl-as__stock.is-out{color:var(--ndl-faint);font-weight:500}
.ndl-as__dot{width:7px;height:7px;border-radius:50%;background:var(--ndl-gn-lift);box-shadow:0 0 0 3px rgba(111,214,156,.16);flex:none}
.ndl-as__stock.is-low .ndl-as__dot{background:#E2A24A;box-shadow:0 0 0 3px rgba(226,162,74,.16)}
.ndl-as__dot--out,.ndl-as__stock.is-out .ndl-as__dot{background:var(--ndl-faint);box-shadow:none}
.ndl-as__cut{font-size:12.5px;color:var(--ndl-muted)}
.ndl-as__cut b{color:var(--ndl-text);font-weight:600;font-variant-numeric:tabular-nums}
.ndl-as__chips{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:11px 0 0;padding:0}
.ndl-as__chips li{font-family:var(--ndl-ff-mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ndl-muted);border:1px solid var(--ndl-line-soft);border-radius:3px;padding:4px 8px;line-height:1.4}
@media(max-width:480px){.ndl-as__row{gap:6px 10px}.ndl-as__cut{font-size:11.5px}}

/* ---- free-shipping progress strip ---- */
.ndl-ship{position:sticky;top:0;z-index:25;background:rgba(12,14,16,.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--ndl-line);font-family:var(--ndl-ff-sans)}
.ndl-ship[hidden]{display:none}
.ndl-ship__in{display:flex;align-items:center;gap:16px;padding-top:9px;padding-bottom:9px}
.ndl-ship__msg{flex:0 0 auto;font-size:12.5px;color:var(--ndl-muted);white-space:nowrap}
.ndl-ship__msg strong{color:var(--ndl-text);font-weight:600;font-variant-numeric:tabular-nums}
.ndl-ship.is-done .ndl-ship__msg{color:var(--ndl-gold-lift);font-weight:600}
.ndl-ship__track{flex:1 1 auto;height:4px;min-width:60px;border-radius:99px;background:rgba(255,255,255,.10);overflow:hidden}
.ndl-ship__fill{display:block;height:100%;border-radius:99px;background:var(--ndl-gold);transition:width .45s cubic-bezier(.2,.7,.3,1)}
.ndl-ship.is-done .ndl-ship__fill{background:#4E8F6E}
@media(max-width:600px){.ndl-ship__in{gap:10px;padding-top:8px;padding-bottom:8px}.ndl-ship__msg{font-size:11.5px;white-space:normal}}
@media(prefers-reduced-motion:reduce){.ndl-ship__fill{transition:none}}

/* ---- pairs well at the bench ---- */
.ndl-pairs{padding:clamp(34px,6vw,64px) 0;background:var(--ndl-bg);border-top:1px solid var(--ndl-line-soft);font-family:var(--ndl-ff-sans)}
.ndl-pairs__h{font-family:var(--ndl-ff-display);font-size:clamp(19px,2.6vw,25px);font-weight:700;letter-spacing:-.015em;color:var(--ndl-text);margin:0 0 20px}
.ndl-pairs__row{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
.ndl-pair{display:flex;flex-direction:column;gap:6px;border:1px solid var(--ndl-line-soft);border-radius:5px;padding:10px;background:var(--ndl-surface)}
.ndl-pair__media{position:relative;display:block;border-radius:3px;overflow:hidden;background:var(--ndl-bg)}
.ndl-pair__media img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.ndl-pair__tag{position:absolute;top:6px;left:6px;font-family:var(--ndl-ff-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--ndl-gn);border-radius:2px;padding:2px 6px}
.ndl-pair__name{font-size:13px;line-height:1.35;color:var(--ndl-text);text-decoration:none;margin-top:2px}
.ndl-pair__name:hover{color:var(--ndl-gold-lift)}
.ndl-pair__price{font-family:var(--ndl-ff-display);font-size:14.5px;font-weight:700;color:var(--ndl-text);font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.ndl-pair__price del{font-size:12px;font-weight:500;color:var(--ndl-faint)}
.ndl-pair__price ins{text-decoration:none}
.ndl-pair__btn{margin-top:auto;display:block;width:100%;text-align:center;border:1px solid var(--ndl-line);background:transparent;color:var(--ndl-text);border-radius:3px;padding:8px 10px;font-family:inherit;font-size:12px;cursor:pointer;text-decoration:none;transition:border-color .16s ease,color .16s ease}
.ndl-pair__btn:hover{border-color:var(--ndl-gn);color:var(--ndl-gn-lift)}
@media(max-width:520px){.ndl-pairs__row{grid-template-columns:repeat(2,1fr);gap:10px}.ndl-pair__name{font-size:12px}}

/* ---- sticky add-to-cart ---- */
.ndl-atc{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(12,14,16,.96);backdrop-filter:blur(14px);border-top:1px solid var(--ndl-line);font-family:var(--ndl-ff-sans);transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.7,.3,1)}
.ndl-atc[hidden]{display:none}
.ndl-atc.is-in{transform:translateY(0)}
.ndl-atc__in{max-width:var(--ndl-maxw);margin:0 auto;padding:11px var(--ndl-gutter);display:flex;align-items:center;gap:14px}
.ndl-atc__img{width:44px;height:44px;object-fit:cover;border-radius:4px;border:1px solid var(--ndl-line-soft);flex:none;background:var(--ndl-surface)}
.ndl-atc__meta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ndl-atc__name{font-size:13.5px;font-weight:500;color:var(--ndl-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ndl-atc__price{font-family:var(--ndl-ff-display);font-size:15px;font-weight:700;color:var(--ndl-text);letter-spacing:-.015em}
.ndl-atc__price del{font-size:12px;color:var(--ndl-faint)}
.ndl-atc__price ins{text-decoration:none}
.ndl-atc__btn{flex:none;background:var(--ndl-text);color:var(--ndl-ink);border:1px solid var(--ndl-text);border-radius:3px;padding:11px 28px;font-size:13.5px;font-weight:600;font-family:inherit;cursor:pointer;transition:opacity .18s ease}
.ndl-atc__btn:hover{opacity:.88}
.ndl-atc__btn.is-done{background:#4E8F6E;border-color:#4E8F6E;color:#fff}
@media(max-width:760px){
  .ndl-atc__in{gap:9px;padding:9px 14px}
  .ndl-atc__img,.ndl-atc__meta{display:none}
  .ndl-atc__btn{flex:1;padding:11px 18px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){.ndl-atc{transition:none}}

/* ---- logo ---- */
.ndl-hdr__logo{height:30px;width:auto;display:block}
.ndl-footer__logo{height:38px;width:auto;display:block;margin-bottom:18px}
@media(max-width:860px){.ndl-hdr__logo{height:26px}}

/* ===========================================================================
   Sign-in / create-account modal
   =========================================================================== */
html.ndl-auth-open{overflow:hidden}
.ndl-auth{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto;font-family:var(--ndl-ff-sans)}
.ndl-auth[hidden]{display:none}
.ndl-auth__scrim{position:absolute;inset:0;background:rgba(8,10,12,.82);backdrop-filter:blur(8px)}
.ndl-auth__card{position:relative;width:100%;max-width:470px;background:var(--ndl-surface);border:1px solid var(--ndl-line);border-radius:6px;padding:34px 32px 30px;box-shadow:0 40px 90px -40px rgba(0,0,0,.9);margin:auto}
.ndl-auth__x{position:absolute;top:10px;right:12px;background:0;border:0;color:var(--ndl-faint);font-size:26px;line-height:1;cursor:pointer;padding:4px 8px}
.ndl-auth__x:hover{color:var(--ndl-text)}
.ndl-auth__head{text-align:center;margin-bottom:20px}
.ndl-auth__title{font-family:var(--ndl-ff-display);font-weight:700;font-size:25px;letter-spacing:-.025em;color:var(--ndl-text);margin:0 0 10px}
.ndl-auth__sub{font-size:13.5px;line-height:1.6;color:var(--ndl-muted);margin:0}

.ndl-auth__tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:rgba(255,255,255,.05);border:1px solid var(--ndl-line-soft);border-radius:4px;padding:4px;margin-bottom:18px}
.ndl-auth__tab{background:0;border:0;border-radius:3px;padding:9px 10px;font-family:inherit;font-size:13px;font-weight:500;color:var(--ndl-muted);cursor:pointer;transition:background .16s ease,color .16s ease}
.ndl-auth__tab.is-on{background:var(--ndl-text);color:var(--ndl-ink);font-weight:600}

.ndl-auth__err{background:rgba(190,60,60,.14);border:1px solid rgba(214,90,90,.45);color:#F0B4B4;border-radius:4px;padding:10px 12px;font-size:13px;line-height:1.5;margin:0 0 14px}
.ndl-auth__err[hidden]{display:none}

.ndl-auth__f{display:block;margin-bottom:14px}
.ndl-auth__f > span{display:block;font-family:var(--ndl-ff-mono);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ndl-faint);margin-bottom:7px}
.ndl-auth__f input{width:100%;background:var(--ndl-bg);border:1px solid var(--ndl-line);border-radius:3px;color:var(--ndl-text);font-family:inherit;font-size:14px;padding:11px 13px}
.ndl-auth__f input:focus{outline:0;border-color:var(--ndl-gold)}
.ndl-auth__f small{display:block;margin-top:6px;font-size:11.5px;color:var(--ndl-faint)}
.ndl-auth__f.is-bad input,.ndl-auth__check.is-bad{border-color:#D65A5A}

.ndl-auth__check{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;cursor:pointer;line-height:1.5}
.ndl-auth__check input{flex:0 0 auto;margin-top:.2rem;width:1.05rem;height:1.05rem;accent-color:var(--ndl-gold)}
.ndl-auth__check span{font-size:12.5px;color:var(--ndl-muted)}
.ndl-auth__check a{color:var(--ndl-text);text-decoration:underline;text-underline-offset:2px}
.ndl-auth__check--inline span{font-size:13px}

.ndl-auth__go{width:100%;margin-top:6px;background:var(--ndl-text);color:var(--ndl-ink);border:1px solid var(--ndl-text);border-radius:3px;padding:13px 20px;font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:opacity .18s ease}
.ndl-auth__go:hover{opacity:.9}
.ndl-auth__go[disabled]{opacity:.55;cursor:default}
.ndl-auth__fine{margin:14px 0 0;font-size:11.5px;line-height:1.6;color:var(--ndl-faint);text-align:center}
.ndl-auth__fine a{color:var(--ndl-muted)}
.ndl-auth__nojs{display:none}
.no-js .ndl-auth__nojs{display:block}

/* locked landing page the gate serves in place of the real one */
.ndl-locked{padding-block:clamp(60px,10vw,120px)}
.ndl-locked .ndl-lede{margin-top:16px}

@media(max-width:520px){
  .ndl-auth{padding:0}
  .ndl-auth__card{max-width:none;min-height:100%;border:0;border-radius:0;padding:28px 20px 34px}
}

/* ===========================================================================
   WooCommerce Blocks cart & checkout — dark theming.

   The block checkout ships its own stylesheet with higher specificity than the
   generic input rules above, which produced three different field treatments
   on one form: most inputs white-on-dark-grey (legible but wrong), one dark,
   and the <select>s TRANSPARENT with near-black text — invisible against the
   dark page, so you could not see what you were typing. Everything below is
   scoped to the block classes so it actually wins, and sets background AND
   colour together on every control rather than one or the other.
   =========================================================================== */

/* --- text, email, tel, number, textarea --- */
.wc-block-components-text-input input,
.wc-block-components-text-input input[type=text],
.wc-block-components-text-input input[type=email],
.wc-block-components-text-input input[type=tel],
.wc-block-components-text-input input[type=number],
.wc-block-components-textarea,
.wc-block-components-address-form input,
.wc-block-components-address-form textarea{
  background:var(--ndl-bg)!important;
  color:var(--ndl-text)!important;
  border:1px solid var(--ndl-line)!important;
  border-radius:3px!important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus{
  outline:0!important;
  border-color:var(--ndl-gold)!important;
  box-shadow:0 0 0 1px var(--ndl-gold)!important;
}

/* Chrome paints autofilled fields white and ignores background-color.
   The inset shadow is the only reliable way to keep them dark. */
.wc-block-components-text-input input:-webkit-autofill,
.wc-block-components-text-input input:-webkit-autofill:hover,
.wc-block-components-text-input input:-webkit-autofill:focus,
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ndl-text)!important;
  -webkit-box-shadow:0 0 0 1000px var(--ndl-bg) inset!important;
  caret-color:var(--ndl-text)!important;
}

/* --- floating labels sit inside the field, so they need contrast too --- */
.wc-block-components-text-input label,
.wc-block-components-text-input.is-active label,
.wc-blocks-components-select__label,
.wc-block-components-checkout-step__title,
.wc-block-components-title,
.wc-block-components-address-card__address-section{
  color:var(--ndl-muted)!important;
}
.wc-block-components-text-input.is-active label{color:var(--ndl-faint)!important}

/* --- selects: these were the invisible ones --- */
.wc-blocks-components-select,
.wc-blocks-components-select__container{
  background:var(--ndl-bg)!important;
  border:1px solid var(--ndl-line)!important;
  border-radius:3px!important;
}
.wc-blocks-components-select__select,
select.wc-blocks-components-select__select{
  background:transparent!important;
  color:var(--ndl-text)!important;
  border:0!important;
}
/* The dropdown list itself is painted by the OS; force readable options. */
.wc-blocks-components-select__select option,
select option{background:var(--ndl-surface);color:var(--ndl-text)}
.wc-blocks-components-select__expand{fill:var(--ndl-muted)!important}

/* --- combobox / country + state autocomplete --- */
.wc-block-components-combobox .components-form-token-field__input-container,
.wc-block-components-combobox input{
  background:var(--ndl-bg)!important;color:var(--ndl-text)!important;border-color:var(--ndl-line)!important;
}
.components-form-token-field__suggestions-list,
.wc-block-components-combobox-list{background:var(--ndl-surface)!important;border-color:var(--ndl-line)!important}
.components-form-token-field__suggestion{color:var(--ndl-text)!important}
.components-form-token-field__suggestion.is-selected,
.wc-block-components-combobox-list-item.is-highlighted{background:var(--ndl-surface-2)!important;color:var(--ndl-text)!important}

/* --- checkboxes, radios, and their labels --- */
.wc-block-components-checkbox__label,
.wc-block-components-radio-control__label,
.wc-block-components-radio-control__secondary-label,
.wc-block-components-radio-control__description{color:var(--ndl-text)!important}
.wc-block-components-checkbox__input,
.wc-block-components-radio-control__input{accent-color:var(--ndl-gold)}
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option{border-color:var(--ndl-line-soft)!important}

/* --- panels, summaries, totals --- */
.wc-block-checkout__sidebar .wc-block-components-sidebar,
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-order-summary__content,
.wc-block-components-panel{
  background:var(--ndl-surface)!important;border:1px solid var(--ndl-line-soft)!important;border-radius:4px}
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item,
.wc-block-components-product-name,
.wc-block-components-product-metadata,
.wc-block-components-order-summary-item__description,
.wc-block-components-panel__button,
.wc-block-components-formatted-money-amount{color:var(--ndl-text)!important}
.wc-block-components-order-summary-item__quantity{background:var(--ndl-surface-2)!important;color:var(--ndl-text)!important;border-color:var(--ndl-line)!important}

/* --- buttons --- */
.wc-block-components-button:not(.is-link){
  background:var(--ndl-text)!important;color:var(--ndl-ink)!important;border-radius:3px!important}
.wc-block-components-button:not(.is-link):hover{background:#fff!important}
.wc-block-components-button.is-link{color:var(--ndl-muted)!important}

/* --- notices --- */
.wc-block-components-notice-banner{background:var(--ndl-surface)!important;color:var(--ndl-text)!important}
.wc-block-components-validation-error{color:#F0A9A9!important}

/* --- placeholders everywhere --- */
::placeholder{color:var(--ndl-faint);opacity:1}

/* --- the classic (non-block) checkout, in case it is ever used --- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single{
  background:var(--ndl-bg)!important;color:var(--ndl-text)!important;border:1px solid var(--ndl-line)!important}
.select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--ndl-text)!important}
.select2-dropdown{background:var(--ndl-surface);border-color:var(--ndl-line);color:var(--ndl-text)}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--ndl-surface-2);color:var(--ndl-text)}
.woocommerce form .form-row label{color:var(--ndl-muted)}

/* ===========================================================================
   v2.5.0 — the offer, made visible.

   Two problems this fixes. The promotion was a 10px pill buried in the hero,
   so it existed on one page and nobody read it. And every variable product
   hid its sizes behind a <select>, which put the single most important choice
   on the page one click out of sight.
   =========================================================================== */

/* ---- sitewide deal bar ---- */
.ndl-deal{position:relative;background:linear-gradient(90deg,#1B1F24 0%,#241F16 42%,#1B1F24 100%);
  border-bottom:1px solid rgba(201,166,94,.34)}
.ndl-deal--hot{background:linear-gradient(90deg,#1B1F24 0%,#2A2114 38%,#312513 58%,#1B1F24 100%)}
.ndl-deal__in{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;padding:10px 0}
.ndl-deal__flag{flex:0 0 auto;font-family:var(--ndl-ff-mono);font-size:9px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ndl-ink);background:var(--ndl-gold);
  border-radius:2px;padding:4px 8px;line-height:1.2}
.ndl-deal--hot .ndl-deal__flag{background:var(--ndl-gold-lift)}
.ndl-deal__head{font-family:var(--ndl-ff-display);font-size:clamp(14px,2.2vw,17px);font-weight:800;
  letter-spacing:-.015em;color:var(--ndl-gold-lift);line-height:1.2}
.ndl-deal__sub{font-size:12.5px;color:var(--ndl-muted);line-height:1.35}
.ndl-deal__clock{font-family:var(--ndl-ff-mono);font-size:11px;font-weight:500;letter-spacing:.06em;
  color:var(--ndl-text);background:rgba(201,166,94,.16);border:1px solid rgba(201,166,94,.38);
  border-radius:3px;padding:4px 8px;font-variant-numeric:tabular-nums}
.ndl-deal__clock.is-over{color:var(--ndl-faint);background:transparent;border-color:var(--ndl-line-soft)}
.ndl-deal__cta{margin-left:auto;flex:0 0 auto;font-family:var(--ndl-ff-mono);font-size:10px;
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ndl-gold-lift);
  border:1px solid rgba(201,166,94,.45);border-radius:3px;padding:7px 12px;text-decoration:none;
  transition:background .15s ease,color .15s ease}
.ndl-deal__cta:hover{background:var(--ndl-gold);color:var(--ndl-ink);text-decoration:none}
@media(max-width:880px){
  .ndl-deal__sub{flex:1 0 100%;order:5}
  .ndl-deal__cta{margin-left:0}
}
@media(max-width:560px){
  .ndl-deal__in{gap:7px 10px;padding:9px 0}
  .ndl-deal__sub{display:none}
  .ndl-deal__head{font-size:14px}
}

/* ---- size buttons in place of the variation dropdown ---- */
/* The <select> stays in the DOM — WooCommerce drives everything through it —
   it is only taken out of sight and out of the tab order. Do not delete it. */
.single-product select[data-ndl-native]{position:absolute!important;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.single-product table.variations,
.single-product table.variations tbody,
.single-product table.variations tr,
.single-product table.variations th,
.single-product table.variations td{display:block;width:100%;border:0;padding:0;margin:0;background:none}
.single-product table.variations th.label label{font-family:var(--ndl-ff-mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ndl-muted);margin:0 0 9px;display:block}
.single-product .reset_variations{display:inline-block;margin-top:8px;font-size:11.5px;color:var(--ndl-faint)}

.ndl-sw{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 16px}
.ndl-sw__o{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:104px;
  padding:11px 15px;cursor:pointer;font-family:inherit;text-align:left;
  color:var(--ndl-text);background:rgba(255,255,255,.03);
  border:1.5px solid var(--ndl-line);border-radius:6px;
  transition:border-color .15s ease,background .15s ease,transform .1s ease,box-shadow .15s ease}
.ndl-sw__o:hover:not([disabled]){border-color:var(--ndl-gold);background:rgba(201,166,94,.09);transform:translateY(-1px)}
.ndl-sw__o:focus-visible{outline:2px solid var(--ndl-gold-lift);outline-offset:3px}
.ndl-sw__o.is-on{border-color:var(--ndl-gold);background:rgba(201,166,94,.16);
  box-shadow:0 0 0 3px rgba(201,166,94,.14)}
.ndl-sw__o.is-off,.ndl-sw__o[disabled]{opacity:.34;cursor:not-allowed;
  text-decoration:line-through;text-decoration-color:var(--ndl-faint)}
.ndl-sw__t{font-family:var(--ndl-ff-display);font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.15}
.ndl-sw__p{font-family:var(--ndl-ff-mono);font-size:11.5px;color:var(--ndl-muted);
  font-variant-numeric:tabular-nums;line-height:1.2}
.ndl-sw__o.is-on .ndl-sw__t{color:var(--ndl-gold-lift)}
.ndl-sw__o.is-on .ndl-sw__p{color:var(--ndl-text)}
.ndl-sw__p:empty{display:none}
@media(max-width:480px){
  .ndl-sw{gap:7px}
  .ndl-sw__o{min-width:0;flex:1 1 calc(50% - 4px);padding:10px 12px}
}
@media(prefers-reduced-motion:reduce){
  .ndl-sw__o,.ndl-sw__o:hover{transition:none;transform:none}
}

/* ---- deal flash + size links on a grid card ---- */
.ndl-pcard__deal{position:absolute;top:10px;right:10px;z-index:2;max-width:calc(100% - 20px);
  font-family:var(--ndl-ff-mono);font-size:9px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ndl-ink);background:var(--ndl-gold);
  border-radius:2px;padding:5px 8px;line-height:1.25;
  box-shadow:0 2px 10px -2px rgba(0,0,0,.7)}
.ndl-pcard__sizes{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ndl-pcard__size{display:inline-flex;align-items:baseline;gap:6px;padding:6px 10px;
  border:1px solid var(--ndl-line-soft);border-radius:4px;background:rgba(255,255,255,.02);
  text-decoration:none;line-height:1.2;transition:border-color .15s ease,background .15s ease}
.ndl-pcard__size:hover{border-color:var(--ndl-gold);background:rgba(201,166,94,.1);text-decoration:none}
.ndl-pcard__size span{font-family:var(--ndl-ff-mono);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ndl-muted)}
.ndl-pcard__size b{font-size:12px;font-weight:700;color:var(--ndl-text);font-variant-numeric:tabular-nums}
.ndl-pcard__size:hover span{color:var(--ndl-gold-lift)}

/* A size that exists but cannot ship. Shown, priced "Sold out", never hidden —
   a shopper looking for 20 mg should learn it exists and is out, not that it
   does not exist. Woo's own <select> gives no hint of this at all. */
.ndl-sw__o.is-soldout{border-style:dashed;opacity:.72}
.ndl-sw__o.is-soldout .ndl-sw__t{color:var(--ndl-muted)}
.ndl-sw__o.is-soldout .ndl-sw__p{color:#E08A7A;letter-spacing:.07em;text-transform:uppercase;font-size:10px}
.ndl-pcard__size.is-soldout{border-style:dashed;opacity:.7}
.ndl-pcard__size.is-soldout b{color:#E08A7A;font-size:10px;text-transform:uppercase;letter-spacing:.06em}

/* ---- password reveal -------------------------------------------------
   WooCommerce injects .show-password-input into its own forms and paints it
   with a sprite this theme never loads, so it rendered as a blank white
   square on top of the field. Both that control and our own .ndl-eye (added
   to the modal, which Woo does not touch) are drawn here instead, from
   inline SVG, so neither depends on an asset that might not arrive. */
.password-input{position:relative;display:block;width:100%}
.password-input > input{width:100%;padding-right:46px!important}

.show-password-input,
.ndl-eye{position:absolute;top:0;right:0;width:44px;height:100%;
  margin:0;padding:0;border:0;border-radius:0 4px 4px 0;
  background:transparent!important;box-shadow:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  -webkit-appearance:none;appearance:none;text-indent:0}
.show-password-input::before,.ndl-eye::before{content:none}
.show-password-input::after,
.ndl-eye::after{content:"";display:block;width:21px;height:21px;opacity:.6;
  transition:opacity .15s ease;
  background:center/contain no-repeat
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A7B0B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.show-password-input:hover::after,
.ndl-eye:hover::after{opacity:1}
.show-password-input:focus-visible,
.ndl-eye:focus-visible{outline:2px solid var(--ndl-gold-lift);outline-offset:-2px}

/* Woo flips this class on itself; .is-on is ours. Same "hidden" eye both ways. */
.show-password-input.display-password::after,
.ndl-eye.is-on::after{opacity:1;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E3C68A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E")}

/* A revealed password must stay readable.
   The theme styled fields by type (input[type=password], [type=email]).
   The reveal button flips the field to type="text", at which point those
   rules stopped matching and Storefront's own light input background took
   over — white text on #ededed, contrast 1.08. You literally could not see
   what you had typed, which is the exact thing the reveal exists to fix.
   Style the WRAPPER, not the type, so the state change cannot strand it. */
.password-input > input,
.password-input > input[type="text"],
.password-input > input[type="password"],
.ndl-auth__f .password-input > input,
.woocommerce-form .password-input > input{
  background:var(--ndl-bg)!important;
  color:var(--ndl-text)!important;
  border:1px solid var(--ndl-line)!important;
  -webkit-text-fill-color:var(--ndl-text)!important}
.password-input > input:focus{border-color:var(--ndl-gold)!important}

/* ===========================================================================
   v2.7.0 — THE FOCUS BUG. Read this before touching form colours again.

   Storefront ships:  input[type="email"]:focus { background: #ededed; }
   ...and the same for text/password/search/tel/url/number/textarea.

   Our fields are white text on a near-black background. So the moment a
   visitor FOCUSED a field — which the sign-in modal does automatically to the
   email box the instant it opens — the background flipped to near-white under
   white text. Contrast 1.08. You could not see a single character you typed,
   and only in the field you were actually using.

   This cost three rounds of "the login text is foggy" because a static
   contrast audit of unfocused fields reads perfectly fine. If a field ever
   looks wrong again, CHECK IT FOCUSED.

   Scoped to the front end (this stylesheet never loads in wp-admin), so it
   covers the modal, My Account, checkout and the COA search in one go.
   =========================================================================== */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus,
.password-input > input:focus,
.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus{
  background-color:var(--ndl-bg)!important;
  color:var(--ndl-text)!important;
  -webkit-text-fill-color:var(--ndl-text)!important;
  border-color:var(--ndl-gold)!important;
  box-shadow:0 0 0 3px rgba(201,166,94,.16)!important;
  outline:none!important}

/* Placeholder had the same problem in reverse — too dim to read at all. */
input::placeholder,
textarea::placeholder{color:var(--ndl-faint)!important;opacity:1!important}

/* ---- sign-in panel legibility ----
   Everything below was technically "passing" contrast but reading as haze:
   10px uppercase mono labels and mid-grey body copy on a dark card. Larger,
   brighter, and the labels get real weight. */
.ndl-auth__card{font-size:15px}
.ndl-auth__f > span,
.ndl-auth__f label > span:first-child{font-size:11.5px!important;font-weight:600!important;
  letter-spacing:.14em!important;color:var(--ndl-text)!important;opacity:1!important}
.ndl-auth__intro,
.ndl-auth__card > p{color:#C8D0D7!important}
.ndl-auth__hint{color:var(--ndl-muted)!important;font-size:12.5px!important}
.ndl-auth__check{color:#D4DBE1!important;font-size:13.5px!important;line-height:1.5!important}
.ndl-auth__fine{color:var(--ndl-muted)!important;font-size:12px!important;line-height:1.55!important}
.ndl-auth__f input{font-size:15px!important;padding:12px 13px!important}
.ndl-auth__err{color:#FF9B8A!important;font-weight:600}

/* ===========================================================================
   v2.8.0 — full-bleed hero, prose pages, and one motion system.
   =========================================================================== */

/* ---- motion tokens ----
   One easing curve and three durations for the whole site. Transitions that
   each pick their own timing are what makes an interface feel assembled
   rather than designed. */
:root{
  --ndl-ease:cubic-bezier(.2,.7,.3,1);
  --ndl-ease-out:cubic-bezier(.22,.68,.28,1);
  --ndl-t-fast:.14s;
  --ndl-t:.22s;
  --ndl-t-slow:.42s;
}

/* ---- buttons ----
   Lift and brighten on hover, press down on click, gold ring on keyboard
   focus. The press state matters more than the hover: it is the only
   feedback a touch user ever gets. */
.ndl-btn{
  position:relative;overflow:hidden;
  transition:background var(--ndl-t) var(--ndl-ease),
             color var(--ndl-t) var(--ndl-ease),
             border-color var(--ndl-t) var(--ndl-ease),
             transform var(--ndl-t-fast) var(--ndl-ease),
             box-shadow var(--ndl-t) var(--ndl-ease);
  will-change:transform}
.ndl-btn:hover{opacity:1;background:#fff;border-color:#fff;color:var(--ndl-ink);
  transform:translateY(-2px);box-shadow:0 10px 26px -12px rgba(0,0,0,.85)}
.ndl-btn:active{transform:translateY(0) scale(.985);box-shadow:none;transition-duration:.06s}
.ndl-btn:focus-visible{outline:2px solid var(--ndl-gold-lift);outline-offset:3px}
.ndl-btn--ghost:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.55)}

/* A light sweep that crosses the button once on hover. Subtle on purpose —
   it should register as quality, not as a casino. */
.ndl-btn::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .55s var(--ndl-ease-out)}
.ndl-btn--ghost::after{background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%)}
.ndl-btn:hover::after{transform:translateX(120%)}

/* Links get an underline that grows from the left rather than blinking on. */
.ndl-link{position:relative;text-decoration:none}
.ndl-link::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--ndl-t) var(--ndl-ease)}
.ndl-link:hover::after{transform:scaleX(1)}

/* ---- full-bleed hero ----
   The media escapes the container and fills the viewport. Everything that
   makes the text readable over a photograph lives in .ndl-hero__veil. */
.ndl-hero{position:relative;overflow:hidden;background:var(--ndl-bg);isolation:isolate}
.ndl-hero__bg{position:absolute;inset:0;z-index:0}
.ndl-hero__bg img,
.ndl-hero__bg video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:72% 50%;max-height:none;display:block}
.ndl-hero.has-video .ndl-hero__bg video{z-index:1}
/* Dark where the words are, clearing over the vials on the right. */
.ndl-hero__veil{position:absolute;inset:0;z-index:2;display:block;
  background:
    linear-gradient(100deg,
      rgba(10,12,15,.95) 0%,
      rgba(10,12,15,.88) 30%,
      rgba(10,12,15,.60) 52%,
      rgba(10,12,15,.28) 72%,
      rgba(10,12,15,.42) 100%),
    linear-gradient(to bottom, rgba(10,12,15,.55) 0%, transparent 22%, transparent 68%, var(--ndl-bg) 100%)}
.ndl-hero__in{position:relative;z-index:3;max-width:var(--ndl-maxw);margin:0 auto;
  padding:clamp(72px,11vw,150px) var(--ndl-gutter) clamp(68px,10vw,136px);
  min-height:clamp(540px,76vh,780px);display:flex;align-items:center}
.ndl-hero__copy{min-width:0;max-width:40rem}
.ndl-hero .ndl-h1{text-shadow:0 2px 24px rgba(0,0,0,.6)}
.ndl-hero .ndl-lede p{color:#DCE3E9;text-shadow:0 1px 14px rgba(0,0,0,.6);max-width:34rem}

/* Hero content arrives in sequence on load. Short, once, never on a revisit
   of the same element — a hero that re-animates is a hero that annoys. */
@keyframes ndl-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ndl-hero__promo,.ndl-hero .ndl-eyebrow,.ndl-hero .ndl-h1,
.ndl-hero .ndl-lede,.ndl-hero .ndl-btns,.ndl-hero .ndl-stat{
  animation:ndl-rise .62s var(--ndl-ease-out) both}
.ndl-hero__promo{animation-delay:.02s}
.ndl-hero .ndl-eyebrow{animation-delay:.08s}
.ndl-hero .ndl-h1{animation-delay:.14s}
.ndl-hero .ndl-lede{animation-delay:.22s}
.ndl-hero .ndl-btns{animation-delay:.3s}
.ndl-hero .ndl-stat{animation-delay:var(--d,.38s)}

@media(max-width:820px){
  .ndl-hero__bg img,.ndl-hero__bg video{object-position:66% 46%}
  .ndl-hero__veil{background:
    linear-gradient(180deg, rgba(10,12,15,.72) 0%, rgba(10,12,15,.80) 42%, rgba(10,12,15,.93) 100%)}
  .ndl-hero__in{min-height:clamp(480px,70vh,640px);padding-top:clamp(52px,14vw,92px)}
  .ndl-hero__copy{max-width:none}
}

/* ---- prose pages (shipping, terms, privacy, refunds, legal) ---- */
.ndl-section--prose{padding-top:clamp(26px,3.4vw,44px)}
.ndl-prose{max-width:46rem;font-family:var(--ndl-ff-sans);font-size:16px;
  line-height:1.72;color:#C9D1D8}
.ndl-prose > *:first-child{margin-top:0}
.ndl-prose p{margin:0 0 1.15em}
.ndl-prose strong{color:var(--ndl-text);font-weight:600}
.ndl-prose a{color:var(--ndl-gold-lift);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
  transition:color var(--ndl-t) var(--ndl-ease)}
.ndl-prose a:hover{color:#fff}

.ndl-prose h2{font-family:var(--ndl-ff-display);font-size:clamp(20px,2.5vw,25px);
  font-weight:700;letter-spacing:-.02em;line-height:1.22;color:var(--ndl-text);
  margin:2.4em 0 .6em;padding-top:1.5em;border-top:1px solid var(--ndl-line-soft);
  position:relative}
.ndl-prose h2:first-of-type{margin-top:1.6em}
/* A short gold tick above each section heading: gives the page a spine. */
.ndl-prose h2::before{content:"";position:absolute;top:-1px;left:0;width:34px;height:2px;
  background:var(--ndl-gold)}
.ndl-prose h3{font-family:var(--ndl-ff-display);font-size:17px;font-weight:700;
  color:var(--ndl-text);margin:1.9em 0 .5em;letter-spacing:-.01em}

.ndl-prose ul,.ndl-prose ol{margin:0 0 1.3em;padding-left:0;list-style:none}
.ndl-prose li{position:relative;padding-left:1.5em;margin:0 0 .6em}
.ndl-prose ul > li::before{content:"";position:absolute;left:.25em;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--ndl-gold);opacity:.85}
.ndl-prose ol{counter-reset:ndl-ol}
.ndl-prose ol > li{counter-increment:ndl-ol}
.ndl-prose ol > li::before{content:counter(ndl-ol);position:absolute;left:0;top:.08em;
  font-family:var(--ndl-ff-mono);font-size:11px;color:var(--ndl-gold);font-weight:500}

/* "Last updated:" is the first line of every policy — make it a dateline
   rather than body copy pretending to be a sentence. */
.ndl-prose > p:first-child{font-family:var(--ndl-ff-mono);font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ndl-faint);
  border:1px solid var(--ndl-line-soft);border-radius:3px;
  padding:8px 12px;display:inline-block;margin-bottom:2em}

.ndl-prose table{width:100%;border-collapse:collapse;margin:0 0 1.5em;font-size:14.5px}
.ndl-prose th,.ndl-prose td{text-align:left;padding:11px 14px;
  border-bottom:1px solid var(--ndl-line-soft)}
.ndl-prose th{font-family:var(--ndl-ff-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ndl-muted);background:rgba(255,255,255,.025)}

.ndl-prose__also{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  max-width:46rem;margin:3.2em 0 0;padding-top:1.4em;
  border-top:1px solid var(--ndl-line-soft)}
.ndl-prose__also span{font-family:var(--ndl-ff-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ndl-faint)}
.ndl-prose__also a{font-size:13px;color:var(--ndl-muted);text-decoration:none;
  border:1px solid var(--ndl-line-soft);border-radius:3px;padding:7px 12px;
  transition:color var(--ndl-t) var(--ndl-ease),border-color var(--ndl-t) var(--ndl-ease),
             background var(--ndl-t) var(--ndl-ease)}
.ndl-prose__also a:hover{color:var(--ndl-text);border-color:var(--ndl-gold);
  background:rgba(201,166,94,.09)}

/* ---- scroll reveal ----
   Sections ease in once as they enter view. Driven by a class the script adds,
   so with JavaScript off everything is simply visible. */
.ndl-reveal{opacity:0;transform:translateY(18px);
  transition:opacity .66s var(--ndl-ease-out),transform .66s var(--ndl-ease-out)}
.ndl-reveal.is-in{opacity:1;transform:none}

/* ---- cards and media settle on hover instead of snapping ---- */
.ndl-pcard{transition:border-color var(--ndl-t) var(--ndl-ease),
  transform var(--ndl-t) var(--ndl-ease),box-shadow var(--ndl-t) var(--ndl-ease)}
.ndl-pcard:hover{transform:translateY(-3px);border-color:var(--ndl-line);
  box-shadow:0 16px 36px -22px rgba(0,0,0,.9)}
.ndl-pcard__media img{transition:transform .7s var(--ndl-ease-out)}
.ndl-pcard:hover .ndl-pcard__media img{transform:scale(1.035)}
.ndl-pcard__atc{transition:background var(--ndl-t) var(--ndl-ease),
  color var(--ndl-t) var(--ndl-ease),border-color var(--ndl-t) var(--ndl-ease)}

/* ---- honour the system setting ----
   Everything above is decoration. If the visitor has asked for less motion,
   none of it should happen — including the hero sequence, which is the most
   movement on the site. */
@media(prefers-reduced-motion:reduce){
  .ndl-hero__promo,.ndl-hero .ndl-eyebrow,.ndl-hero .ndl-h1,
  .ndl-hero .ndl-lede,.ndl-hero .ndl-btns,.ndl-hero .ndl-stat{animation:none}
  .ndl-reveal{opacity:1;transform:none;transition:none}
  .ndl-btn::after{display:none}
  .ndl-btn:hover,.ndl-pcard:hover{transform:none}
  .ndl-pcard:hover .ndl-pcard__media img{transform:none}
  .ndl-hero__bg video{display:none}
}

/* ---- hero legibility correction (v2.8.1) ----
   Measured, not eyeballed. With the first gradient the second headline line
   ("handled properly.", which uses the muted .ndl-dim grey) ran out past the
   point where the veil had already cleared to 60% opacity. Sampling the actual
   rendered backdrop gave 2.14:1 against the average pixel behind it and
   1.54:1 against the brightest — the end of the line was effectively gone.

   Two changes: hold the veil near-opaque across the whole column the text
   occupies and only clear it beyond that, and lift the muted grey inside the
   hero (it is tuned for a flat dark panel, not a photograph). Re-measured at
   8.32:1 average / 7.53:1 worst case. Do not lower either without sampling
   the backdrop again — the photo can change. */
.ndl-hero__veil{
  background:
    linear-gradient(100deg,
      rgba(10,12,15,.96) 0%,
      rgba(10,12,15,.93) 34%,
      rgba(10,12,15,.86) 52%,
      rgba(10,12,15,.55) 70%,
      rgba(10,12,15,.30) 84%,
      rgba(10,12,15,.46) 100%),
    linear-gradient(to bottom,
      rgba(10,12,15,.60) 0%, transparent 20%,
      transparent 66%, var(--ndl-bg) 100%)}
.ndl-hero .ndl-dim{color:#B8C2CB}
@media(max-width:820px){
  .ndl-hero__veil{background:
    linear-gradient(180deg, rgba(10,12,15,.80) 0%, rgba(10,12,15,.86) 40%, rgba(10,12,15,.95) 100%)}
}