/*
Theme Name: MO Global
Theme URI: https://moglobal.ma
Author: MO Global Co
Author URI: https://moglobal.ma
Description: Ground-up "PERFORMANCE" redesign for MO Global Co — premium sports nutrition, Morocco. Oversized condensed typography, a signature electric-lime scrolling marquee, kinetic GSAP scroll motion, magnetic buttons and confident negative space. WooCommerce-ready, Cash-on-Delivery checkout.
Version: 2.0.0
Requires PHP: 8.1
Requires at least: 6.0
Tested up to: 6.9
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: moglobal
Tags: e-commerce, custom-menu, custom-logo, sports-nutrition
*/

/* =========================================================================
   TABLE OF CONTENTS
   1.  Tokens (:root)
   2.  Reset & base
   3.  Typography
   4.  Layout — container, section rhythm, dark context
   5.  Signature devices — marquee, buttons, badges, links, cursor, scroll cue
   6.  Header + nav + mobile menu
   7.  Hero
   8.  Stats
   9.  Categories (bento)
   10. Product card (.mo-pcard)
   11. Best sellers / Arrivals grids
   12. Editorial
   13. Why (numbered row)
   14. Testimonials
   15. Brands
   16. Newsletter
   17. Final CTA
   18. Footer
   19. WooCommerce — shop, single, cart, checkout
   20. Motion hooks & reveal states
   21. Responsive breakpoints
   22. Reduced motion / print
   ========================================================================= */

/* =========================================================================
   1. TOKENS
   ========================================================================= */
:root {
  /* Brand */
  --lime:#C1FB52; --lime-600:#A6E22E; --lime-200:#E9FBBE;
  --ink:#0B0F0A; --ink-800:#14190F; --ink-700:#20271B; --ink-600:#2C3424;
  --paper:#F4F5EF; --paper-2:#E9EAE1;
  /* --fg-dim was #8A917E, measuring 2.69–3.00:1 on --paper and --paper-2 —
     under the 4.5:1 WCAG 2.2 AA (1.4.3) requires for body text, and it is used
     for real copy (client email, stat captions), not decoration. #646A5B
     measures ≥4.6:1 on both surfaces and keeps the same olive hue. */
  --fg:#0B0F0A; --fg-muted:#5B6252; --fg-dim:#646A5B;
  --on-lime:#0A0F00;      /* text on lime — NEVER white */
  --on-ink:#F4F5EF; --on-ink-muted:#A7AE99;
  --border:#DEDFD5; --border-dark:#252D1D;
  /* --sale was #FF3B30, which failed 1.4.3 in both the roles it plays:
     3.55:1 behind white on the "Sale" badge, and 3.24:1 as sale-price text on
     --paper (18.4px bold sits just under the 18.66px large-text threshold, so
     4.5:1 applies). #D32F1F measures 5.02:1 and 4.58:1 respectively, and also
     lifts error text, which uses the same token. */
  --sale:#D32F1F; --star:#F5A623; --success:#27B24B;
  /* --success is a fill colour; as text on its own 10% tint it measured
     2.33:1, under the 3:1 that 1.4.3 allows even for large text. Split by
     role rather than darkening the fill and restyling every success button. */
  --success-text:#1C7C36;

  /* Type */
  --font-display:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;
  --font-body:'Barlow','Inter',system-ui,sans-serif;
  --font-impact:'Anton',var(--font-display);

  /* Radius / shadow / motion */
  --r-sm:6px; --r:12px; --r-lg:18px; --r-pill:999px;
  --shadow:0 10px 30px rgba(11,15,10,.10);
  --shadow-lg:0 24px 60px rgba(11,15,10,.18);
  --shadow-lime:0 8px 22px -8px rgba(193,251,82,.55);
  --ease:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur:.2s; --dur-2:.4s;

  /* Layout */
  --container:1360px;
  --gutter:clamp(1.15rem,4vw,2.75rem);
  /* Applied to BOTH edges, so the gap between two sections is twice this.
     At the old clamp(4rem,9vw,8rem) that meant up to 256px of dead space
     between bands — generous on a lookbook, wrong on a shop where the next
     row of products is the thing you want people to reach. */
  --section-y:clamp(2.5rem,5.5vw,4.5rem);
  --header-h:76px;

  /* Contextual (light band by default) */
  --ctx-bg:var(--paper);
  --ctx-fg:var(--fg);
  --ctx-muted:var(--fg-muted);
  --ctx-dim:var(--fg-dim);
  --ctx-border:var(--border);
}

/* =========================================================================
   2. RESET & BASE
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;-webkit-tap-highlight-color:transparent;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  font-size:1rem;
  line-height:1.6;
  color:var(--fg);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* clip, not hidden: `hidden` turns body into a scroll container, which
     silently disables position:sticky for every descendant — both portal
     sidebars slid under the fixed header. `clip` contains the same
     horizontal overflow without creating that scroll container. */
  overflow-x:clip;
  text-rendering:optimizeLegibility;
}
img,svg,video,canvas{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;}
input,textarea,select{font-family:inherit;font-size:1rem;color:inherit;}
ul,ol{margin:0;padding:0;list-style:none;}
figure{margin:0;}
hr{border:0;height:1px;background:var(--ctx-border);}
::selection{background:var(--lime);color:var(--on-lime);}

:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(193,251,82,.55);border-radius:var(--r-sm);}

/* skip link */
.mo-skip-link{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--ink);color:var(--on-ink);
  padding:.75rem 1.25rem;border-radius:0 0 var(--r) 0;
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;
}
.mo-skip-link:focus{left:0;}

/* =========================================================================
   3. TYPOGRAPHY
   ========================================================================= */
h1,h2,h3,h4,h5,h6{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  line-height:.9;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--ctx-fg);
}
h1{font-size:clamp(3.5rem,11vw,10rem);font-weight:800;line-height:.88;}
h2{font-size:clamp(2.25rem,5.5vw,4.5rem);font-weight:800;}
h3{font-size:clamp(1.5rem,2.5vw,2rem);}
h4{font-size:clamp(1.25rem,2vw,1.6rem);}
p{margin:0 0 1rem;}
p:last-child{margin-bottom:0;}
strong,b{font-weight:700;}
small{font-size:.8125rem;}

.mo-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--ctx-muted);
  margin:0 0 1.1rem;
}
.mo-eyebrow i{color:var(--lime-600);font-size:.9em;}
.mo-dark .mo-eyebrow i{color:var(--lime);}

.mo-lede{
  font-size:clamp(1.05rem,1.4vw,1.25rem);
  line-height:1.6;
  color:var(--ctx-muted);
  max-width:52ch;
}
.mo-lime{color:var(--lime-600);}
.mo-dark .mo-lime{color:var(--lime);}

/* section header block */
.mo-head{margin-bottom:clamp(2rem,4vw,3.25rem);}
.mo-head--split{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;
}
.mo-head h2{max-width:none;text-wrap:balance;}
/* a lede that sits directly under a title always gets breathing room
   (margins collapse in block flow, so this never doubles existing space) */
h1 + .mo-lede,
h2 + .mo-lede{margin-top:.9rem;}

/* =========================================================================
   4. LAYOUT — container, section rhythm, dark context
   ========================================================================= */
.mo-container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.mo-section{
  position:relative;
  padding-block:var(--section-y);
  background:var(--ctx-bg);
  color:var(--ctx-fg);
}
.mo-section--tight{padding-block:clamp(1.6rem,3.25vw,2.5rem);}

/* Dark band context — remaps contextual tokens */
.mo-dark{
  --ctx-bg:var(--ink);
  --ctx-fg:var(--on-ink);
  --ctx-muted:var(--on-ink-muted);
  --ctx-dim:#6E7563;
  --ctx-border:var(--border-dark);
  background:var(--ink);
  color:var(--on-ink);
}
.mo-dark h1,.mo-dark h2,.mo-dark h3,.mo-dark h4{color:var(--on-ink);}

/* generic reusable grid */
.mo-grid{display:grid;gap:clamp(1rem,2vw,1.75rem);}

/* =========================================================================
   5. SIGNATURE DEVICES
   ========================================================================= */

/* ---- Marquee ----------------------------------------------------------- */
.mo-marquee{
  overflow:hidden;
  white-space:nowrap;
  padding-block:.72em;
  line-height:1;
  height:2.6em;
  display:flex;
  align-items:center;
  -webkit-user-select:none;
  user-select:none;
}
.mo-marquee__track{
  display:flex;
  flex-wrap:nowrap;
  width:max-content;
  will-change:transform;
}
.mo-marquee__group{
  display:flex;
  align-items:center;
  flex:0 0 auto;
}
.mo-marquee__group > span,
.mo-marquee__group > i{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(1.15rem,2.2vw,2rem);
  letter-spacing:.02em;
  padding-inline:.75em;
  display:inline-flex;
  align-items:center;
}
.mo-marquee__group > i{opacity:.55;font-size:.72em;}
.mo-marquee--lime{background:var(--lime);color:var(--on-lime);}
.mo-marquee--lime .mo-marquee__group > i{color:var(--on-lime);}
.mo-marquee--ink{background:var(--ink);color:var(--lime);}
.mo-marquee--ink .mo-marquee__group > i{color:var(--lime);opacity:.5;}

/* ---- Buttons ----------------------------------------------------------- */
.mo-btn{
  --btn-fg:var(--ctx-fg);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55em;
  min-height:44px;
  padding:.85em 1.6em;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.0625rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  line-height:1;
  color:var(--btn-fg);
  border-radius:var(--r-pill);
  border:1.5px solid transparent;
  transition:background var(--dur) var(--ease),
             color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             box-shadow var(--dur-2) var(--ease),
             transform var(--dur-2) var(--ease);
  will-change:transform;
}
.mo-btn i{font-size:1.05em;transition:transform var(--dur) var(--ease);}
.mo-btn__label{display:inline-block;will-change:transform;}
.mo-btn--lime{
  background:var(--lime);
  color:var(--on-lime);
  border-color:var(--lime);
}
.mo-btn--lime:hover,.mo-btn--lime:focus-visible{
  background:var(--lime-600);
  border-color:var(--lime-600);
  color:var(--on-lime);
  box-shadow:var(--shadow-lime);
  transform:translateY(-2px);
}
.mo-btn--ghost{
  background:transparent;
  color:var(--ctx-fg);
  border-color:var(--ctx-border);
}
.mo-btn--ghost:hover,.mo-btn--ghost:focus-visible{
  border-color:var(--lime);
  color:var(--ctx-fg);
  transform:translateY(-2px);
}
.mo-dark .mo-btn--ghost{border-color:rgba(244,245,239,.32);color:var(--on-ink);}
.mo-dark .mo-btn--ghost:hover{border-color:var(--lime);}
.mo-btn--lg{
  min-height:56px;
  padding:1.05em 2.2em;
  font-size:1.25rem;
}
.mo-btn--block{width:100%;}
.mo-btn:hover i.bi-arrow-right{transform:translateX(3px);}

/* ---- Badges ------------------------------------------------------------ */
.mo-badge{
  display:inline-flex;
  align-items:center;
  gap:.35em;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  line-height:1;
  padding:.42em .7em;
  border-radius:var(--r-pill);
}
.mo-badge--sale{background:var(--sale);color:#fff;}
.mo-badge--new{background:var(--ink);color:var(--lime);}

/* ---- Text link with animated arrow / underline ------------------------ */
.mo-link{
  display:inline-flex;
  align-items:center;
  gap:.45em;
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--ctx-fg);
  position:relative;
}
.mo-link::after{
  content:"";
  position:absolute;
  left:0;bottom:-.15em;
  width:100%;height:2px;
  background:var(--lime-600);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--dur-2) var(--ease);
}
.mo-dark .mo-link::after{background:var(--lime);}
.mo-link:hover::after,.mo-link:focus-visible::after{transform:scaleX(1);}
.mo-link i{transition:transform var(--dur) var(--ease);}
.mo-link:hover i{transform:translateX(3px);}

/* ---- Custom cursor (desktop, JS-driven) -------------------------------- */
.mo-cursor{
  position:fixed;
  top:0;left:0;
  width:10px;height:10px;
  margin:-5px 0 0 -5px;
  border-radius:50%;
  background:var(--lime);
  pointer-events:none;
  z-index:9999;
  mix-blend-mode:difference;
  transition:width var(--dur-2) var(--ease),
             height var(--dur-2) var(--ease),
             background var(--dur-2) var(--ease),
             margin var(--dur-2) var(--ease),
             opacity var(--dur) linear;
}
.mo-cursor.is-hover{
  width:44px;height:44px;
  margin:-22px 0 0 -22px;
  background:transparent;
  border:1.5px solid var(--lime);
}
@media (hover:none),(pointer:coarse){.mo-cursor{display:none;}}

/* ---- Scroll cue -------------------------------------------------------- */
.mo-scrollcue{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:.4rem;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--on-ink-muted);
}
.mo-scrollcue i{
  font-size:1.25rem;
  color:var(--lime);
  animation:mo-bob 1.8s var(--ease-in-out) infinite;
}
@keyframes mo-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}

/* =========================================================================
   6. HEADER + NAV + MOBILE MENU
   ========================================================================= */
.mo-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:200;
  display:flex;
  flex-direction:column;
  background:transparent;
  transition:background var(--dur-2) var(--ease),
             box-shadow var(--dur-2) var(--ease);
}
.mo-header__row1{
  display:flex;
  align-items:center;
  gap:clamp(1rem,3vw,2.5rem);
  width:100%;
  height:var(--header-h);
}
.mo-header__row2{ width:100%; display:none; }
.mo-header.is-scrolled{
  background:var(--paper);
  box-shadow:0 1px 0 var(--border),var(--shadow);
}

/* desktop: search form takes the middle slot, row2 carries the nav */
.mo-header__searchform{
  display:none;
  align-items:center; gap:.6rem;
  flex:1 1 auto; max-width:420px; margin-inline:auto;
  padding:.55rem .9rem; border-radius:var(--r-pill,999px);
  background:rgba(244,245,239,.08); border:1.5px solid rgba(244,245,239,.16);
  transition:background var(--dur,.2s) var(--ease,ease), border-color var(--dur,.2s) var(--ease,ease);
}
.mo-header.is-scrolled .mo-header__searchform{ background:var(--paper-2); border-color:var(--border); }
.mo-header__searchform i{ color:var(--fg-muted); flex:0 0 auto; }
.mo-header__searchform input[type="search"]{
  flex:1 1 auto; min-width:0; border:0; background:none; font-family:var(--font-body);
  font-size:.92rem; color:inherit; outline:none;
}
.mo-header__search-mobile{ display:inline-flex; }
/* mobile: tel icon was pushing the cart+hamburger off-screen past 375px —
   drop it here too, it's already reachable via the menu overlay footer */
.mo-header__tel{ display:none; }
@media(min-width:992px){
  :root{ --header-h:76px; }
  .mo-header__row2{ display:block; border-top:1px solid rgba(244,245,239,.12); }
  .mo-header.is-scrolled .mo-header__row2{ border-top-color:var(--border); }
  .mo-header__row2{ display:flex; align-items:center; justify-content:center; min-height:58px; padding-block:1.1rem; }
  .mo-nav{ justify-content:center; }
  .mo-header__searchform{ display:flex; }
  .mo-header__search-mobile{ display:none; }
  .mo-header__tel{ display:none; } /* already reachable via the nav row's contact + footer */
}
/* logo swap: white over hero, dark once scrolled */
.mo-header__logo{display:inline-flex;align-items:center;line-height:0;}
.mo-header__logo img{height:34px;width:auto;transition:opacity var(--dur) var(--ease);}
.mo-header__logo .mo-logo--dark{display:none;}
.mo-header__logo .mo-logo--light{display:block;}
.mo-header.is-scrolled .mo-header__logo .mo-logo--dark{display:block;}
.mo-header.is-scrolled .mo-header__logo .mo-logo--light{display:none;}

/* primary nav */
.mo-nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2rem);}
.mo-nav ul{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2rem);}
.mo-nav a{
  position:relative;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.0625rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--on-ink);
  padding-block:.35em;
  transition:color var(--dur) var(--ease);
}
.mo-header.is-scrolled .mo-nav a{color:var(--fg);}
.mo-nav a::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:100%;height:2px;
  background:var(--lime);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--dur-2) var(--ease);
}
.mo-nav a:hover::after,
.mo-nav a:focus-visible::after,
.mo-nav .current-menu-item > a::after,
.mo-nav .current_page_item > a::after{transform:scaleX(1);}

/* header actions */
.mo-header__actions{display:flex;align-items:center;gap:.35rem;}
.mo-iconbtn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  border-radius:var(--r-pill);
  color:var(--on-ink);
  font-size:1.2rem;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.mo-header.is-scrolled .mo-iconbtn{color:var(--fg);}
.mo-iconbtn:hover{background:rgba(193,251,82,.16);color:var(--lime-600);}
.mo-header:not(.is-scrolled) .mo-iconbtn:hover{color:var(--lime);}

.mo-header__tel{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-family:var(--font-display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--on-ink);
  padding-inline:.5rem;
  white-space:nowrap;
}
.mo-header.is-scrolled .mo-header__tel{color:var(--fg);}
.mo-header__tel i{color:var(--lime-600);}
/* bright lime only over the dark home hero; on solid/paper headers keep the darker lime for contrast */
body.home .mo-header:not(.is-scrolled) .mo-header__tel i{color:var(--lime);}

/* cart count badge */
.mo-cart-count{
  position:absolute;
  top:4px;right:2px;
  min-width:18px;height:18px;
  padding:0 4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--lime);
  color:var(--on-lime);
  font-family:var(--font-body);
  font-weight:700;
  font-size:.6875rem;
  line-height:1;
  border-radius:var(--r-pill);
  will-change:transform;
}

/* hamburger */
.mo-menu-toggle{
  display:none;
  width:46px;height:46px;
  align-items:center;
  justify-content:center;
  color:var(--on-ink);
  border:1.5px solid rgba(244,245,239,.24);
  border-radius:13px;
  background:rgba(244,245,239,.06);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.mo-menu-toggle:hover,.mo-menu-toggle:focus-visible{border-color:var(--lime);color:var(--lime);}
.mo-header.is-scrolled .mo-menu-toggle{color:var(--fg);border-color:var(--border);background:var(--paper-2);}
/* keep the trigger legible on the dark overlay while the menu is open */
.mo-menu-toggle.is-active{color:var(--on-ink);border-color:rgba(244,245,239,.3);background:rgba(244,245,239,.09);}

/* mobile overlay menu */
.mo-menu{
  position:fixed;
  inset:0;
  z-index:190;
  background:var(--ink);
  color:var(--on-ink);
  display:flex;
  flex-direction:column;
  /* top-anchored + scrollable: centering the overflow used to push the search
     field up underneath the header on short phone viewports. */
  justify-content:flex-start;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:calc(var(--header-h) + 1.25rem) var(--gutter) calc(1.75rem + env(safe-area-inset-bottom, 0px));
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity var(--dur-2) var(--ease),
             transform var(--dur-2) var(--ease),
             visibility var(--dur-2) var(--ease);
}
.mo-menu.mo-menu--open{opacity:1;visibility:visible;transform:none;}
.mo-menu__inner{ display:flex; flex-direction:column; width:100%; flex:1 1 auto; }
/* search field inside the mobile menu (replaces the header search icon) */
.mo-menu__search{
  display:flex; align-items:center; gap:.6rem; width:100%;
  flex:0 0 auto;
  margin-bottom:1.25rem;
  padding:.9rem 1.1rem; border-radius:var(--r-pill,999px);
  background:rgba(244,245,239,.08); border:1.5px solid rgba(244,245,239,.16);
}
.mo-menu__search > i{ color:var(--on-ink-muted); font-size:1.1rem; flex:0 0 auto; }
.mo-menu__search input[type="search"]{
  flex:1 1 auto; min-width:0; border:0; background:none; outline:none;
  font-family:var(--font-body); font-size:1.05rem; color:var(--on-ink);
}
.mo-menu__search input[type="search"]::placeholder{ color:var(--on-ink-muted); }
.mo-menu__search-btn{
  flex:0 0 auto; width:38px; height:38px; padding:0; border:0; cursor:pointer;
  border-radius:var(--r-pill,999px); background:var(--lime); color:var(--on-lime);
  display:inline-flex; align-items:center; justify-content:center; font-size:1.15rem;
}
/* nav fills the space and centers */
.mo-menu__nav{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; }
.mo-menu ul{display:flex;flex-direction:column;gap:.25rem;align-items:center;}
.mo-menu a{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(1.8rem,7.2vw,3.25rem);
  line-height:1;
  letter-spacing:-.01em;
  padding-block:.24em;
  color:var(--on-ink);
  text-align:center;
  transition:color var(--dur) var(--ease);
}
.mo-menu a:hover,.mo-menu .current-menu-item > a{color:var(--lime);}
.mo-menu__foot{
  margin-top:auto;
  padding-top:1.25rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.9rem;
  color:var(--on-ink-muted);
  font-size:.95rem;
  text-align:center;
}
.mo-menu__foot .mo-menu__contact{display:inline-flex;align-items:center;gap:.5rem;font-size:1.05rem;color:var(--on-ink-muted);}
.mo-menu__foot .mo-menu__contact:hover{color:var(--lime);}
.mo-menu__foot i{color:var(--lime);}
/* social icons stay in one row with comfortable spacing */
.mo-menu__socials{display:flex;flex-direction:row;justify-content:center;gap:1.35rem;margin-top:.4rem;}
.mo-menu__socials a{font-size:1.6rem;color:var(--on-ink);}
.mo-menu__socials a:hover{color:var(--lime);}
body.mo-menu-open{overflow:hidden;}

/* =========================================================================
   7. HERO
   ========================================================================= */
.mo-hero{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding-top:var(--header-h);
  isolation:isolate;
  background:var(--ink);
}
/* full-bleed product photography, anchored so the product cluster stays in frame */
.mo-hero__bg{
  position:absolute; z-index:0; inset:0;
  background-size:cover;
  background-position:right center;
  background-repeat:no-repeat;
}
/* left-to-right + bottom scrim so text always sits on solid contrast */
.mo-hero__scrim{
  position:absolute; z-index:1; inset:0;
  background:
    linear-gradient(180deg, rgba(11,15,10,.15) 0%, rgba(11,15,10,.55) 78%, rgba(11,15,10,.85) 100%),
    linear-gradient(90deg, rgba(11,15,10,.96) 0%, rgba(11,15,10,.82) 32%, rgba(11,15,10,.35) 62%, rgba(11,15,10,.05) 82%);
}
/* soft lime aura behind the whole hero, top-right */
.mo-hero__glow{
  position:absolute; z-index:2; top:-18%; right:-10%;
  width:min(760px,70vw); aspect-ratio:1;
  background:radial-gradient(circle, rgba(193,251,82,.16), rgba(193,251,82,0) 62%);
  pointer-events:none; animation:moHeroGlow 7s ease-in-out infinite;
}
/* faint dot-grid texture, fading toward the bottom */
.mo-hero__grid{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.4;
  background-image:radial-gradient(rgba(244,245,239,.05) 1px, transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 60%);
          mask-image:linear-gradient(180deg,#000 0%,transparent 60%);
}
.mo-hero__inner{
  position:relative; z-index:3; width:100%;
  padding-block:clamp(2.5rem,7vh,5rem);
}
.mo-hero__content{max-width:38rem;}
.mo-hero h1{ color:var(--on-ink); margin-bottom:1.4rem; }
.mo-hero h1 .mo-accent,.mo-hero h1 .mo-lime{color:var(--lime);}
/* Mobile: the global h1 clamp floors at 3.5rem on narrow screens, which reads
   small for the headline. Give the hero title a bigger mobile-only ramp
   (desktop still capped by the global 10rem max, so it's unchanged). */
@media (max-width:600px){
  .mo-hero__title{ font-size:clamp(3.75rem,18vw,5.25rem); line-height:.9; }
}
.mo-hero__sub{
  font-size:clamp(1.02rem,1.4vw,1.25rem);
  color:var(--on-ink-muted); max-width:42ch; margin-bottom:2rem;
}
.mo-hero__cta{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2rem;}
.mo-hero__trust{
  list-style:none; margin:0 0 1.75rem; padding:0; display:flex; flex-wrap:wrap; gap:.85rem 1.5rem;
}
.mo-hero__trust li{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em;
  font-size:.9rem; font-weight:600; color:var(--on-ink-muted);
}
.mo-hero__trust li i{ color:var(--lime); font-size:1.05rem; }

/* --- rating / shipping chips, docked in flow under the trust list --- */
.mo-hero__chips{ display:flex; flex-wrap:wrap; gap:.75rem; }
.mo-hero__chip{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.55rem .85rem; border-radius:var(--r-pill,999px);
  background:rgba(11,15,10,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(244,245,239,.14);
  color:var(--on-ink); font-size:.82rem; font-weight:600; white-space:nowrap;
  box-shadow:0 12px 30px rgba(0,0,0,.4);
}
.mo-hero__chip strong{ font-family:var(--font-impact,'Anton'); font-weight:400; }
.mo-hero__chip-stars{ color:var(--lime); font-size:.72rem; letter-spacing:-.04em; }
.mo-hero__chip--ship i{ color:var(--lime); }

@keyframes moHeroGlow{ 0%,100%{opacity:.8;transform:scale(1)} 50%{opacity:1;transform:scale(1.06)} }
@media (prefers-reduced-motion: reduce){
  .mo-hero__glow{ animation:none !important; }
}
@media (max-width:900px){
  .mo-hero{ min-height:auto; }
  .mo-hero__inner{ padding-block:clamp(2rem,6vh,3.5rem); }
  .mo-hero__content{ max-width:none; }
  .mo-hero__bg{ background-position:65% center; }
  .mo-hero__scrim{
    background:
      linear-gradient(180deg, rgba(11,15,10,.35) 0%, rgba(11,15,10,.75) 68%, rgba(11,15,10,.94) 100%),
      linear-gradient(90deg, rgba(11,15,10,.9) 0%, rgba(11,15,10,.55) 70%, rgba(11,15,10,.25) 100%);
  }
}
@media (max-width:480px){
  .mo-hero__chip{ display:none; }
}

.mo-hero__scrollcue{
  position:absolute; left:var(--gutter); bottom:clamp(1.25rem,3vh,2.25rem); z-index:2;
}

/* kinetic masked line reveal — CSS provides the clip; JS animates the span */
.mo-reveal-lines{display:block;}
.mo-reveal-lines .mo-line{
  display:block;
  overflow:hidden;
  padding-bottom:.04em;   /* prevent descender clipping */
}
.mo-reveal-lines .mo-line > span{
  display:block;
  will-change:transform;
}

/* =========================================================================
   8. STATS
   ========================================================================= */
.mo-stats__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}
.mo-stat{
  position:relative;
  padding:clamp(1rem,2vw,1.5rem) clamp(1rem,2.5vw,2rem);
  text-align:left;
}
.mo-stat + .mo-stat::before{
  content:"";
  position:absolute;
  left:0;top:14%;
  width:1px;height:72%;
  background:linear-gradient(180deg,transparent,rgba(193,251,82,.5),transparent);
}
.mo-stat-num{
  display:block;
  font-family:var(--font-impact);
  font-weight:400;
  font-size:clamp(3rem,7vw,6rem);
  line-height:.9;
  letter-spacing:.01em;
  color:var(--on-ink);
  font-variant-numeric:tabular-nums;
}
.mo-stat-num .mo-stat-suffix{color:var(--lime);}
.mo-stat__label{
  display:block;
  margin-top:.5rem;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.8125rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--on-ink-muted);
}

/* =========================================================================
   9. CATEGORIES — bento grid
   ========================================================================= */
.mo-categories__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(180px,1fr);
  gap:clamp(.75rem,1.4vw,1.15rem);
}
.mo-cat{
  position:relative;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  border-radius:var(--r-lg);
  background:var(--ink-800);
  min-height:200px;
  isolation:isolate;
}
/* first tile spans 2×2 */
.mo-cat--feature{grid-column:span 2;grid-row:span 2;}
.mo-cat__img{
  position:absolute;
  inset:0;
  z-index:-2;
}
.mo-cat__img img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform var(--dur-2) var(--ease);
}
.mo-cat__scrim{
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(0deg,rgba(11,15,10,.85) 0%,rgba(11,15,10,.15) 55%,rgba(11,15,10,.05) 100%);
  transition:background var(--dur-2) var(--ease);
}
/* lime corner-wipe */
.mo-cat::after{
  content:"";
  position:absolute;
  top:0;right:0;
  width:130%;height:130%;
  background:var(--lime);
  z-index:-1;
  clip-path:polygon(100% 0,100% 0,100% 0);
  transition:clip-path var(--dur-2) var(--ease);
  mix-blend-mode:normal;
  opacity:.16;
}
.mo-cat__body{
  position:relative;
  padding:clamp(1rem,2vw,1.6rem);
  width:100%;
  z-index:1;
}
.mo-cat__name{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:-.01em;
  color:var(--on-ink);
  font-size:clamp(1.4rem,2.4vw,2rem);
  margin-bottom:.3rem;
}
.mo-cat--feature .mo-cat__name{font-size:clamp(2rem,4vw,3.5rem);}
.mo-cat__count{
  font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-ink-muted);
}
.mo-cat__shop{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  margin-top:.75rem;
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--lime);
}
.mo-cat__shop i{transition:transform var(--dur) var(--ease);}
.mo-cat:hover .mo-cat__img img{transform:scale(1.06);}
.mo-cat:hover .mo-cat__shop i{transform:translateX(4px);}
.mo-cat:hover::after{clip-path:polygon(100% 0,0 0,100% 100%);opacity:.9;}
.mo-cat:hover .mo-cat__scrim{background:linear-gradient(0deg,rgba(11,15,10,.9) 0%,rgba(11,15,10,.25) 60%,rgba(11,15,10,.1) 100%);}

/* =========================================================================
   10. PRODUCT CARD (.mo-pcard) — also reused for Woo loop
   ========================================================================= */
.mo-pcard{
  position:relative;
  display:flex;
  flex-direction:column;
  background:transparent;
  transition:transform var(--dur-2) var(--ease);
  will-change:transform;
}
.mo-pcard__link{display:flex;flex-direction:column;height:100%;}
.mo-pcard__media{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-lg);
  background:#fff;
  aspect-ratio:1/1;
  border:1px solid var(--border);
}
.mo-dark .mo-pcard__media{border-color:var(--border-dark);background:#fff;}
.mo-pcard__media img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform var(--dur-2) var(--ease);
  mix-blend-mode:multiply;
}
.mo-pcard__badges{
  position:absolute;
  top:.75rem;left:.75rem;
  z-index:3;
  display:flex;
  flex-direction:column;
  gap:.4rem;
  align-items:flex-start;
}
/* add-to-cart pill slides up from media bottom on hover */
.mo-add-to-cart{
  position:absolute;
  left:.75rem;right:.75rem;
  bottom:.75rem;
  z-index:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  min-height:44px;
  padding:.65em 1.2em;
  background:var(--lime);
  color:var(--on-lime);
  font-family:var(--font-display);
  font-weight:700;
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  line-height:1;
  border-radius:var(--r-pill);
  box-shadow:var(--shadow);
  transform:translateY(calc(100% + 1rem));
  opacity:0;
  transition:transform var(--dur-2) var(--ease),
             opacity var(--dur-2) var(--ease),
             background var(--dur) var(--ease);
}
.mo-add-to-cart i{font-size:1.05em;}
.mo-add-to-cart:hover{background:var(--lime-600);}
.mo-add-to-cart.is-loading{opacity:.75;pointer-events:none;}
.mo-add-to-cart.is-added{background:var(--success);color:#fff;}
.mo-pcard:hover .mo-add-to-cart,
.mo-pcard:focus-within .mo-add-to-cart{transform:translateY(0);opacity:1;}

.mo-pcard__body{padding:.9rem .15rem 0;display:flex;flex-direction:column;gap:.35rem;}
.mo-pcard__cat{
  font-family:var(--font-body);
  font-weight:600;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--ctx-dim);
}
.mo-pcard__name{
  font-family:var(--font-body);
  font-weight:600;
  font-size:1.0625rem;
  line-height:1.3;
  color:var(--ctx-fg);
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.6em;
}
.mo-price{
  display:flex;
  align-items:baseline;
  gap:.55rem;
  font-family:var(--font-body);
  font-weight:700;
  font-size:1.15rem;
  font-variant-numeric:tabular-nums;
  color:var(--ctx-fg);
  margin-top:.15rem;
}
.mo-price del,.mo-price del .amount{
  color:var(--ctx-dim);
  font-weight:500;
  text-decoration:line-through;
  font-size:.92em;
}
.mo-price ins,.mo-price ins .amount{
  color:var(--sale);
  text-decoration:none;
  font-weight:700;
}
.mo-pcard__rating{display:inline-flex;gap:.1rem;color:var(--star);font-size:.8rem;}
.mo-pcard:hover{transform:translateY(-6px);}
.mo-pcard:hover .mo-pcard__media img{transform:scale(1.06);}

/* =========================================================================
   11. BEST SELLERS / ARRIVALS GRIDS
   ========================================================================= */
.mo-products-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(1rem,2vw,1.75rem);
}

/* =========================================================================
   12. EDITORIAL — asymmetric split
   ========================================================================= */
.mo-editorial__inner{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:clamp(2rem,5vw,5rem);
}
.mo-editorial__media{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  aspect-ratio:4/5;
  background:var(--ink-800);
}
.mo-editorial__media img{width:100%;height:100%;object-fit:cover;will-change:transform;}
.mo-editorial__num{
  position:absolute;
  top:.5rem;left:1rem;
  font-family:var(--font-impact);
  font-size:clamp(4rem,9vw,8rem);
  line-height:1;
  color:var(--lime);
  opacity:.9;
  z-index:2;
  mix-blend-mode:normal;
}
.mo-editorial__body h2{margin-bottom:1.25rem;max-width:14ch;}
.mo-editorial__body .mo-lede{margin-bottom:1.75rem;}
.mo-editorial__accent{
  display:inline-block;
  width:56px;height:8px;
  background:var(--lime);
  border-radius:var(--r-pill);
  margin-bottom:1.5rem;
}

/* =========================================================================
   13. WHY — numbered editorial row
   ========================================================================= */
.mo-why__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);
}
.mo-why__item{
  position:relative;
  padding-top:1.5rem;
  border-top:2px solid var(--ctx-border);
}
.mo-why__num{
  font-family:var(--font-impact);
  font-size:clamp(2rem,3.5vw,3rem);
  line-height:1;
  color:var(--ctx-dim);
  display:block;
  margin-bottom:1rem;
}
.mo-why__icon{
  font-size:1.6rem;
  color:var(--lime-600);
  margin-bottom:.9rem;
  display:inline-block;
}
.mo-dark .mo-why__icon{color:var(--lime);}
.mo-why__title{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(1.3rem,1.8vw,1.6rem);
  line-height:1;
  letter-spacing:-.005em;
  margin-bottom:.6rem;
  color:var(--ctx-fg);
}
.mo-why__text{color:var(--ctx-muted);font-size:.98rem;line-height:1.55;}

/* =========================================================================
   14. TESTIMONIALS — big pulled quotes
   ========================================================================= */
.mo-testimonials__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);
}
.mo-quote{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  padding:clamp(1.5rem,2.5vw,2rem);
  border:1px solid var(--border-dark);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
}
.mo-quote__stars{display:inline-flex;gap:.15rem;color:var(--star);font-size:.95rem;}
.mo-quote__text{
  font-family:var(--font-display);
  font-weight:600;
  text-transform:uppercase;
  font-size:clamp(1.25rem,1.9vw,1.65rem);
  line-height:1.08;
  letter-spacing:-.005em;
  color:var(--on-ink);
}
.mo-quote__author{
  margin-top:auto;
  font-family:var(--font-body);
  font-weight:600;
  color:var(--on-ink);
  font-size:.95rem;
}
.mo-quote__city{color:var(--on-ink-muted);font-weight:400;}

/* =========================================================================
   15. BRANDS
   ========================================================================= */
.mo-brands__row{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem 1rem;
  align-items:center;
  justify-content:center;
}
.mo-brand-pill{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:clamp(1rem,1.6vw,1.35rem);
  color:var(--fg-muted);
  padding:.55em 1.15em;
  border:1.5px solid var(--border);
  border-radius:var(--r-pill);
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.mo-brand-pill:hover{color:var(--fg);border-color:var(--lime);}

/* =========================================================================
   16. NEWSLETTER
   ========================================================================= */
.mo-newsletter__inner{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.mo-newsletter h2{max-width:14ch;margin-bottom:1rem;}
.mo-newsletter h2 .mo-lime{color:var(--lime);}
.mo-newsletter__form{
  display:flex;
  gap:.6rem;
  background:var(--ink-800);
  border:1px solid var(--border-dark);
  border-radius:var(--r-pill);
  padding:.4rem .4rem .4rem 1.4rem;
  max-width:520px;
}
.mo-newsletter__form:focus-within{box-shadow:0 0 0 3px rgba(193,251,82,.55);}
.mo-newsletter__form input[type="email"]{
  flex:1;
  min-width:0;
  background:transparent;
  border:0;
  color:var(--on-ink);
  font-size:1rem;
}
.mo-newsletter__form input::placeholder{color:var(--on-ink-muted);}
.mo-newsletter__form input:focus{outline:none;box-shadow:none;}
.mo-newsletter__form .mo-btn{flex:0 0 auto;}
.mo-newsletter__note{margin-top:.9rem;font-size:.85rem;color:var(--on-ink-muted);}

/* =========================================================================
   17. FINAL CTA — colossal
   ========================================================================= */
.mo-cta{text-align:center;overflow:hidden;}
/* Final CTA sits directly on the (dark) footer — trim its bottom padding so the
   two dark blocks don't stack into one huge empty gap. */
.mo-cta{padding-bottom:clamp(2rem,4vw,3.25rem);}
.mo-cta__inner{display:flex;flex-direction:column;align-items:center;gap:2rem;}
/* flex gap already spaces the children — the eyebrow's own margin doubled it */
.mo-cta__inner .mo-eyebrow{margin-bottom:0;}
.mo-cta h2{
  font-size:clamp(3rem,13vw,11rem);
  line-height:.86;
  font-weight:800;
  color:var(--on-ink);
  max-width:16ch;
}
.mo-cta h2 .mo-lime{color:var(--lime);}
.mo-cta .mo-eyebrow{color:var(--on-ink-muted);}
/* Mobile: the coaching → CTA → footer stretch is all dark and should read as
   one continuous block — trim the stacked section padding so there aren't dead
   bands above and below the final CTA. */
@media (max-width:600px){
  .mo-home-coaching{ padding-bottom:1.5rem; }
  .mo-cta{ padding-top:1.5rem; padding-bottom:1rem; }
  .mo-cta__inner{ gap:1.5rem; }
}

/* =========================================================================
   18. FOOTER
   ========================================================================= */
.mo-footer{padding-block:clamp(2rem,4vw,3.25rem) 0;}
.mo-footer__brandrow{margin-bottom:clamp(2rem,4vw,3rem);}
.mo-footer__brandrow img{height:34px;width:auto;}
.mo-footer__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2rem,4vw,3rem);
  padding-bottom:clamp(2.5rem,5vw,4rem);
}
.mo-footer__about p{color:var(--on-ink-muted);max-width:48ch;margin-bottom:1rem;}
.mo-footer__about p:last-child{margin-bottom:0;}
.mo-footer__title--follow{margin-top:1.5rem;}
.mo-footer__col h4{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:1.05rem;
  letter-spacing:.04em;
  color:var(--on-ink);
  margin-bottom:1.1rem;
}
.mo-footer__col ul{display:flex;flex-direction:column;gap:.65rem;}
.mo-footer__col a{
  color:var(--on-ink-muted);
  transition:color var(--dur) var(--ease);
  display:inline-flex;align-items:center;gap:.5rem;
}
.mo-footer__col a:hover{color:var(--lime);}
.mo-footer__col i{color:var(--lime);width:1.1em;text-align:center;}
.mo-footer__socials{display:flex;gap:.5rem;margin-top:1.25rem;}
.mo-footer__socials a{
  width:42px;height:42px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid var(--border-dark);
  border-radius:var(--r-pill);
  color:var(--on-ink);
  font-size:1.1rem;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.mo-footer__socials a:hover{background:var(--lime);color:var(--on-lime);border-color:var(--lime);}
.mo-footer__bar{
  border-top:1px solid var(--border-dark);
  padding-block:1.5rem 2rem;
  display:flex;
  flex-wrap:wrap;
  gap:.75rem 1.5rem;
  align-items:center;
  justify-content:space-between;
  color:var(--on-ink-muted);
  font-size:.85rem;
}
.mo-footer__bar .mo-cod{display:inline-flex;align-items:center;gap:.5rem;}
.mo-footer__bar .mo-cod i{color:var(--lime);}

/* =========================================================================
   19. WOOCOMMERCE
   ========================================================================= */
.woocommerce-breadcrumb{
  font-size:.85rem;color:var(--fg-dim);
  padding-block:1rem 0;letter-spacing:.02em;
}
.woocommerce .woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce-notice{
  position:relative;
  border-radius:var(--r);
  border:1px solid var(--border);
  border-left:4px solid var(--lime-600);
  background:var(--paper-2);
  padding:1rem 1.25rem;
  list-style:none;
  color:var(--fg);
  margin-bottom:1.5rem;
}
/* WooCommerce prints its own glyph (✓ / i / ✕) into these three notices as an
   absolutely positioned ::before at left:1.5em — past where our 1.25rem text
   inset starts, so it lands on top of the first word. Reserve a gutter and
   move the glyph into it. Only these three get an icon; noreviews/notice do
   not, and would just gain an empty indent. */
.woocommerce .woocommerce-message,
.woocommerce-info,
.woocommerce-error{padding-left:3rem;}
.woocommerce .woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{left:1.15rem;top:1rem;line-height:1.5;}
.woocommerce-error{border-left-color:var(--sale);}
.woocommerce .button.wc-forward{margin-left:1rem;}

/* ---- Shop / archive header -------------------------------------------- */
.woocommerce-products-header{margin-bottom:2rem;}
.woocommerce-products-header__title,
.woocommerce .page-title{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(2.25rem,5.5vw,4.5rem);
  line-height:.9;
  color:var(--fg);
}
.woocommerce-result-count{color:var(--fg-muted);font-size:.9rem;}

/* ---- Dropdowns, everywhere ---------------------------------------------
   One control, one look. Native select chrome differs by browser and by OS,
   so a page with a sort dropdown, a checkout region picker and a quick-order
   city list showed three different widgets sitting next to identical-looking
   text inputs. The arrow is drawn rather than inherited, which is the only
   way the control can match the fields around it.

   Declared once here and not restated per context: every previous attempt at
   a per-context copy ended up disagreeing with the others. */
:root{
  --mo-select-chevron:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235C625C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}
select:not([multiple]):not([size]){
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  min-height:52px;
  max-width:100%;
  padding:.7rem 2.6rem .7rem 1rem;
  border:1.5px solid var(--border);
  border-radius:var(--r);
  background-color:#fff;
  background-image:var(--mo-select-chevron);
  background-repeat:no-repeat;
  background-position:right 1rem center;
  background-size:16px 16px;
  color:var(--fg);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.3;
  cursor:pointer;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
select:not([multiple]):not([size]):hover{ border-color:var(--fg-dim); }
select:not([multiple]):not([size]):focus{
  outline:none;
  border-color:var(--lime-600);
  box-shadow:0 0 0 3px rgba(193,251,82,.55);
}
select:not([multiple]):not([size]):disabled{ opacity:.55; cursor:not-allowed; }
/* The sort control is the one deliberate variant — it lives among the filter
   pills, so it takes their shape while keeping the same arrow and height. */
.woocommerce-ordering select,
.woocommerce .orderby{ border-radius:var(--r-pill); min-height:44px; padding-block:.4rem; }

/* ---- Shop grid → reuse pcard look ------------------------------------- */
.woocommerce ul.products,
.woocommerce-page ul.products{
  display:grid !important;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(1rem,2vw,1.75rem);
  margin:0 0 2.5rem;
  padding:0;
  list-style:none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{content:none !important;display:none !important;}
.woocommerce ul.products li.product{
  width:auto !important;
  margin:0 !important;
  float:none !important;
  padding:0 !important;
  text-align:left;
}
/* When our custom content-product.php emits .mo-pcard, it inherits section 10.
   These rules ensure DEFAULT Woo loop markup also looks right. */
.woocommerce ul.products li.product a img{
  margin:0;border-radius:var(--r-lg);
  aspect-ratio:1/1;object-fit:cover;background:#fff;
  border:1px solid var(--border);
  transition:transform var(--dur-2) var(--ease);
}
.woocommerce ul.products li.product:hover a img{transform:scale(1.04);}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font-body);
  font-weight:600;
  font-size:1.0625rem;
  line-height:1.3;
  color:var(--fg);
  padding:.75rem 0 .25rem;
}
.woocommerce ul.products li.product .price{
  font-family:var(--font-body);
  font-weight:700;
  font-size:1.15rem;
  color:var(--fg);
  font-variant-numeric:tabular-nums;
}
.woocommerce ul.products li.product .price del{color:var(--fg-dim);font-weight:500;}
.woocommerce ul.products li.product .price ins{color:var(--sale);text-decoration:none;font-weight:700;}
.woocommerce ul.products li.product .star-rating{color:var(--star);margin:.35rem 0;font-size:.8rem;}

/* onsale flash → sale badge look */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale{
  position:absolute;
  top:.75rem;left:.75rem;
  right:auto;
  min-height:0;min-width:0;
  margin:0;padding:.42em .7em;
  background:var(--sale);
  color:#fff;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  line-height:1;
  border-radius:var(--r-pill);
}
.woocommerce ul.products li.product{position:relative;}

/* Woo loop add-to-cart → lime pill */
.woocommerce a.button,
.woocommerce ul.products li.product .button,
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  min-height:44px;
  padding:.7em 1.4em;
  background:var(--lime);
  color:var(--on-lime);
  font-family:var(--font-display);
  font-weight:700;
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  line-height:1;
  border:1.5px solid var(--lime);
  border-radius:var(--r-pill);
  transition:background var(--dur) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);
}
.woocommerce a.button:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover{
  background:var(--lime-600);
  border-color:var(--lime-600);
  color:var(--on-lime);
  box-shadow:var(--shadow-lime);
  transform:translateY(-2px);
}
.woocommerce a.button.added::after{content:none;}
.woocommerce .button.loading{opacity:.75;}
/* ghost / secondary buttons */
.woocommerce a.button.wc-forward,
.woocommerce .button.wc-backward{background:var(--ink);color:var(--on-ink);border-color:var(--ink);}
.woocommerce a.button.wc-forward:hover,
.woocommerce .button.wc-backward:hover{background:var(--ink-700);border-color:var(--ink-700);color:var(--on-ink);}

/* added-to-cart "view cart" secondary */
.woocommerce ul.products li.product .added_to_cart{
  display:inline-flex;align-items:center;gap:.4em;
  margin-top:.5rem;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;color:var(--fg);
}

/* ---- Single product ---------------------------------------------------- */
.single-product div.product{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,4vw,4rem);
  align-items:start;
}
.single-product div.product .woocommerce-product-gallery{
  width:100% !important;
  margin:0 !important;
  float:none !important;
}
.single-product div.product .woocommerce-product-gallery__image img{
  border-radius:var(--r-lg);
  border:1px solid var(--border);
  background:#fff;
}
.single-product div.product .entry-summary{margin:0 !important;float:none !important;width:auto !important;}
.single-product div.product .product_title{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(2rem,4vw,3.25rem);
  line-height:.92;
  letter-spacing:-.01em;
  margin-bottom:1rem;
  color:var(--fg);
}
.single-product div.product p.price,
.single-product div.product .price{
  font-family:var(--font-body);
  font-weight:700;
  font-size:clamp(1.5rem,2.5vw,2rem);
  color:var(--fg);
  font-variant-numeric:tabular-nums;
  margin-bottom:1.25rem;
}
.single-product div.product .price del{color:var(--fg-dim);font-weight:500;font-size:.7em;}
.single-product div.product .price ins{color:var(--sale);text-decoration:none;}
.single-product .woocommerce-product-details__short-description{
  color:var(--fg-muted);
  line-height:1.65;
  margin-bottom:1.75rem;
  max-width:52ch;
}
.single-product .product_meta{
  margin-top:1.75rem;
  padding-top:1.25rem;
  border-top:1px solid var(--border);
  font-size:.85rem;
  color:var(--fg-muted);
}
.single-product .product_meta > span{display:block;margin-bottom:.4rem;}
.single-product .stock{
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;
  font-weight:700;color:var(--success);
}
.single-product .out-of-stock{color:var(--sale);}

/* quantity stepper */
.woocommerce .quantity{
  display:inline-flex;
  align-items:center;
  border:1.5px solid var(--border);
  border-radius:var(--r-pill);
  overflow:hidden;
  height:52px;
}
.woocommerce .quantity input.qty{
  width:56px;height:100%;
  text-align:center;
  border:0;
  background:transparent;
  font-family:var(--font-body);
  font-weight:700;
  font-size:1.05rem;
  -moz-appearance:textfield;appearance:textfield;
}
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.single-product form.cart{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem;
  margin-bottom:1.5rem;
}
.single-product .single_add_to_cart_button{
  min-height:52px;
  padding:.85em 2rem;
  font-size:1.15rem;
}

/* tabs — minimal */
.woocommerce-tabs{margin-top:clamp(2.5rem,5vw,4rem);grid-column:1/-1;}
.woocommerce-tabs ul.tabs{
  display:flex;gap:.5rem;flex-wrap:wrap;
  border:0;padding:0;margin:0 0 1.5rem;
}
.woocommerce-tabs ul.tabs::before{content:none;}
.woocommerce-tabs ul.tabs li{
  border:0;background:transparent;margin:0;padding:0;border-radius:0;
}
.woocommerce-tabs ul.tabs li a{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:1.05rem;
  color:var(--fg-muted);
  padding:.5rem 1rem;
  border-radius:var(--r-pill);
  border:1.5px solid var(--border);
}
.woocommerce-tabs ul.tabs li.active a{background:var(--ink);color:var(--on-ink);border-color:var(--ink);}
.woocommerce-tabs .panel h2{font-size:clamp(1.5rem,2.5vw,2rem);margin-bottom:1rem;}

/* related products */
.related.products,.upsells.products{grid-column:1/-1;margin-top:clamp(2.5rem,5vw,4rem);}
.related.products > h2,.upsells.products > h2{
  font-size:clamp(1.75rem,3vw,2.5rem);margin-bottom:1.5rem;
}

/* ---- Cart -------------------------------------------------------------- */
.woocommerce-cart .woocommerce{
  display:grid;
  grid-template-columns:1.6fr .8fr;
  gap:clamp(1.5rem,3vw,2.5rem);
  align-items:start;
}
.woocommerce-cart table.shop_table{
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  width:100%;
}
.woocommerce-cart table.shop_table thead th{
  background:var(--paper-2);
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:.85rem;
  color:var(--fg);
  padding:1rem;
  text-align:left;
}
.woocommerce-cart table.shop_table td{
  padding:1rem;
  border-top:1px solid var(--border);
  vertical-align:middle;
}
.woocommerce-cart table.shop_table img{width:64px;border-radius:var(--r-sm);border:1px solid var(--border);}
.woocommerce-cart table.shop_table .product-name a{font-weight:600;color:var(--fg);}
.woocommerce-cart .product-remove a.remove{
  color:var(--sale) !important;
  font-size:1.4rem;line-height:1;
  width:auto;height:auto;border-radius:0;background:none !important;
}
.woocommerce-cart .actions .coupon{display:inline-flex;gap:.5rem;}
/* Wide enough to show its own placeholder — it was clipping to "Coupo". */
.woocommerce-cart .actions .coupon{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.woocommerce-cart .actions #coupon_code{ min-width:190px; flex:0 1 240px; }

/* Cart actions speak the same button language as the rest of the site: lime is
   the one action that moves you forward, anything beside it is an outline.
   WooCommerce already marks the primary with .alt (Proceed to checkout), but
   the base .woocommerce .button rule paints every button lime — so the cart
   ended up with three identical primaries competing with each other.
   Height matched to the coupon field so the row lines up. */
.woocommerce-cart .actions button[name="apply_coupon"],
.woocommerce-cart .actions button[name="update_cart"],
.woocommerce-cart .actions input[name="update_cart"]{
  min-height:52px;
  background:transparent;
  color:var(--fg);
  border-color:var(--border);
}
.woocommerce-cart .actions button[name="apply_coupon"]:hover,
.woocommerce-cart .actions button[name="update_cart"]:hover:not(:disabled),
.woocommerce-cart .actions input[name="update_cart"]:hover:not(:disabled){
  background:var(--ink);
  color:var(--on-ink);
  border-color:var(--ink);
}
/* WooCommerce disables "Update cart" until a quantity actually changes. Say so
   plainly rather than leaving a washed-out lime button that reads as broken. */
.woocommerce-cart .actions button[name="update_cart"]:disabled,
.woocommerce-cart .actions input[name="update_cart"]:disabled{
  opacity:.45; cursor:not-allowed; background:transparent; color:var(--fg-muted); border-color:var(--border);
}
.woocommerce-cart .actions .input-text{
  border:1.5px solid var(--border);border-radius:var(--r-pill);
  padding:.65rem 1.1rem;
}

/* cart totals card */
.cart_totals,
.woocommerce-cart .cart-collaterals .cart_totals{
  width:100% !important;
  float:none !important;
  background:var(--paper-2);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:1.5rem;
}
.cart_totals h2{font-size:1.5rem;margin-bottom:1rem;}
.cart_totals table{width:100%;border:0;}
.cart_totals table th,.cart_totals table td{padding:.6rem 0;border-top:1px solid var(--border);text-align:left;}
.cart_totals .order-total .amount{font-weight:700;font-size:1.25rem;}
.cart_totals .checkout-button,
.cart_totals .wc-proceed-to-checkout .button{
  width:100%;
  min-height:52px;
  font-size:1.15rem;
  margin-top:1rem;
}
.woocommerce-cart .cart-collaterals{width:100%;}

/* ---- Checkout ---------------------------------------------------------- */
.woocommerce-checkout form.checkout{
  display:grid;
  grid-template-columns:1.4fr .9fr;
  gap:clamp(1.5rem,3.5vw,3rem);
  align-items:start;
}
.woocommerce-checkout #customer_details{min-width:0;}
.woocommerce-checkout h3{
  font-family:var(--font-display);
  font-weight:800;text-transform:uppercase;
  font-size:clamp(1.5rem,2.5vw,2rem);
  margin-bottom:1.25rem;
  color:var(--fg);
}
.woocommerce form .form-row{margin-bottom:1.1rem;padding:0;}
.woocommerce form .form-row label{
  font-family:var(--font-body);font-weight:600;
  font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--fg-muted);margin-bottom:.4rem;display:block;
}
/* The asterisk is the only thing that separates required from optional here,
   so give it enough contrast to actually be seen. */
.woocommerce form .form-row label .required{
  color:var(--sale);text-decoration:none;margin-left:.15rem;font-weight:700;
}
.woocommerce form .form-row label .optional{ color:var(--fg-dim);font-weight:500;text-transform:none;letter-spacing:0; }

/* Fields laid out on a grid rather than WooCommerce's floats. Floats pair
   form-row-first with form-row-last, so whenever a field is removed — and this
   theme removes several — the survivor is stranded in the right-hand column
   with a hole beside it. Grid just reflows. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:1rem;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper > .form-row{
  float:none;width:auto;margin-left:0;margin-right:0;
  grid-column:span 2;
}
/* Halve a pair only when the two really are adjacent. WooCommerce assigns
   form-row-first / form-row-last statically, but what actually renders depends
   on the cart (an all-virtual coaching cart drops the whole address) and on a
   priority sort we do not fully control — so a "first" can end up with no
   "last" after it. Pairing on :has() asks the DOM instead of assuming, and a
   survivor simply goes full width rather than sitting beside a hole. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first:has(+ .form-row-last),
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first:has(+ .form-row-last) + .form-row-last,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first:has(+ .form-row-last),
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first:has(+ .form-row-last) + .form-row-last{
  grid-column:span 1;
}
@media (max-width:600px){
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row{
    grid-column:span 2 !important;
  }
}

.woocommerce form .form-row .input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container--default .select2-selection--single{
  width:100%;
  min-height:52px;
  padding:.7rem 1rem;
  border:1.5px solid var(--border);
  border-radius:var(--r);
  background:#fff;
  color:var(--fg);
  font-family:var(--font-body);
  font-size:1rem;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease);
}
.woocommerce form .form-row .input-text::placeholder,
.woocommerce form .form-row textarea::placeholder{ color:var(--fg-dim); }
.woocommerce form .form-row .input-text:hover,
.woocommerce form .form-row textarea:hover,
.woocommerce form .form-row select:hover{ border-color:var(--fg-dim); }
.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce .select2-container--default.select2-container--focus .select2-selection--single{
  border-color:var(--lime-600);
  outline:none;
  box-shadow:0 0 0 3px rgba(193,251,82,.55);
}
/* Arrow and appearance come from the site-wide select rule in §19; only the
   full-width sizing is specific to a checkout row. */
.woocommerce form .form-row select{ width:100%; }
/* WooCommerce flags fields inline as you leave them; say so on the field
   itself rather than only in a notice at the top of the page. */
.woocommerce form .form-row.woocommerce-invalid .input-text,
.woocommerce form .form-row.woocommerce-invalid select{ border-color:var(--sale); }
.woocommerce form .form-row.woocommerce-invalid .input-text:focus{ box-shadow:0 0 0 3px rgba(255,59,48,.25); }
.woocommerce form .form-row.woocommerce-validated .input-text{ border-color:var(--lime-600); }
.woocommerce form .form-row .description{
  font-size:.8rem;color:var(--fg-muted);margin-top:.35rem;
}
/* The privacy notice sat flush against the button beneath it — a measured zero
   gap — so the sentence you read and the action you take looked like one
   block. Set on the notice rather than the button, because the same paragraph
   precedes the submit on registration and on checkout's account fields. */
.woocommerce-privacy-policy-text{ margin-bottom:1.5rem; }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:1.8;padding:0;color:var(--fg);
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow{height:100%;}

/* The login + "create an account" blocks only appear on coaching carts, which
   is the one case that needs a user. Both are WooCommerce defaults and arrive
   unstyled, so they get the same card treatment as the order summary. */
.woocommerce-checkout .woocommerce-form-login,
.woocommerce-checkout .woocommerce-form-coupon{
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--paper-2);
  padding:1.5rem;
  margin:0 0 1.5rem;
}
.woocommerce-checkout .woocommerce-form-login .form-row{ margin-bottom:1rem; }
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle{ margin-bottom:1.25rem; }
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{ margin-bottom:0; }
.woocommerce-checkout .woocommerce-account-fields{
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--paper-2);
  padding:1.25rem 1.5rem;
  margin:0 0 1.5rem;
}
.woocommerce-checkout .woocommerce-account-fields .create-account{ margin-bottom:0; }
/* Checkbox rows read as a line of text, not as a stacked label + field. */
.woocommerce form .form-row.woocommerce-validated label.checkbox,
.woocommerce form .form-row label.checkbox,
.woocommerce-checkout .woocommerce-account-fields label.checkbox,
.woocommerce-checkout .woocommerce-form-login label.woocommerce-form-login__rememberme{
  display:flex;align-items:center;gap:.55rem;
  text-transform:none;letter-spacing:0;font-size:.95rem;
  color:var(--fg);font-weight:500;margin:0;
}
.woocommerce form .form-row input[type="checkbox"]{
  width:18px;height:18px;min-height:0;flex:0 0 auto;accent-color:var(--lime-600);margin:0;
}

/* =========================================================================
   BLOCK CART
   The live store runs WooCommerce's *block* cart as well as its block
   checkout, so none of the classic .woocommerce-cart rules above reach it —
   which is why "Proceed to checkout" was arriving as a square dark-grey slab
   in the wrong face and weight. Same treatment as the block checkout below.
   ========================================================================= */
.wp-block-woocommerce-cart{ margin-block:1rem 3rem; }
.wp-block-woocommerce-cart .wc-block-components-title,
.wp-block-woocommerce-cart h2,
.wp-block-woocommerce-cart .wc-block-cart__totals-title{
  font-family:var(--font-display) !important;
  font-weight:800 !important;
  text-transform:uppercase;
  letter-spacing:-.01em;
  color:var(--fg) !important;
}
/* The one button that moves you forward. */
.wc-block-cart__submit-button,
.wp-block-woocommerce-cart .wc-block-components-button.contained{
  width:100%;
  min-height:56px !important;
  border-radius:var(--r-pill) !important;
  background:var(--lime) !important;
  color:var(--on-lime) !important;
  border:0 !important;
  font-family:var(--font-display) !important;
  font-weight:800 !important;
  font-size:1.1rem !important;
  text-transform:uppercase;
  letter-spacing:.02em;
  transition:background var(--dur) var(--ease);
}
.wc-block-cart__submit-button:hover,
.wp-block-woocommerce-cart .wc-block-components-button.contained:hover{ background:var(--lime-600) !important; }
/* On a narrow screen the block pins this to the bottom of the viewport, where
   a bare bar reads as browser chrome rather than part of the page. */
.wc-block-cart__submit-container{
  background:var(--paper);
  border-top:1px solid var(--border);
  padding:.85rem 1rem !important;
}

/* Totals card, matching the checkout's summary. */
.wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-components-sidebar,
.wp-block-woocommerce-cart .wc-block-cart__totals-title + *{ min-width:0; }
.wp-block-woocommerce-cart .wc-block-components-totals-item__label{ color:var(--fg-muted); }
.wp-block-woocommerce-cart .wc-block-components-totals-item__value{ font-weight:600; }
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-family:var(--font-display); font-size:1.4rem; font-weight:800;
}

/* Line items */
.wc-block-cart-items__row .wc-block-components-product-name{
  font-family:var(--font-display); text-transform:uppercase; font-weight:700;
  color:var(--fg) !important; text-decoration:none;
}
.wc-block-cart-item__remove-link{ color:var(--fg-muted) !important; }
.wc-block-cart-item__remove-link:hover{ color:var(--sale) !important; }
.wp-block-woocommerce-cart .wc-block-components-quantity-selector{
  border:1.5px solid var(--border) !important;
  border-radius:var(--r-pill) !important;
  background:#fff;
}
.wp-block-woocommerce-cart .wc-block-components-quantity-selector__button{ color:var(--fg) !important; }
.wp-block-woocommerce-cart img{ border-radius:var(--r); background:#fff; }

/* ---- Coupon panel, shared by the block cart and the block checkout ------
   Both render the same markup, so this is stated once. Apply is a secondary
   action sitting beside a field, so it takes the outline treatment the cart's
   own Apply coupon uses — it arrived as a square dark-grey slab with near-black
   text on it, which read as disabled. */
.wc-block-components-totals-coupon__form{
  display:flex; gap:.6rem; align-items:stretch; flex-wrap:wrap;
}
.wc-block-components-totals-coupon__input{ flex:1 1 180px; min-width:0; }
.wc-block-components-totals-coupon__button{
  flex:0 0 auto;
  min-height:52px !important;
  padding-inline:1.4rem !important;
  border-radius:var(--r-pill) !important;
  background:transparent !important;
  color:var(--fg) !important;
  border:1.5px solid var(--border) !important;
  font-family:var(--font-display) !important;
  font-weight:700 !important;
  font-size:1rem !important;
  text-transform:uppercase;
  letter-spacing:.04em;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.wc-block-components-totals-coupon__button:hover:not(:disabled){
  background:var(--ink) !important;
  color:var(--on-ink) !important;
  border-color:var(--ink) !important;
}
/* The block disables Apply until something is typed; say so quietly rather
   than leaving a filled button that looks broken. */
.wc-block-components-totals-coupon__button:disabled{
  opacity:.45; cursor:not-allowed;
  background:transparent !important; color:var(--fg-muted) !important;
}
/* "Add coupons" — the disclosure that opens the panel. */
.wc-block-components-panel__button{
  font-family:var(--font-body) !important;
  font-weight:600 !important;
  color:var(--fg) !important;
}

/* =========================================================================
   BLOCK CHECKOUT
   The live store runs WooCommerce's *block* checkout, which ships its own
   look — floating labels, its own greys, its own button — and so read as a
   different site sitting inside this one. None of the classic checkout rules
   above touch it, because none of its markup is shared. This section dresses
   the block in the same clothes: the theme's field metrics, the display face
   on headings, and the lime pill for the one button that matters.
   ========================================================================= */
.wc-block-checkout{ margin-block:1rem 3rem; }
.wc-block-checkout__form,
.wc-block-components-sidebar{ min-width:0; }

/* Headings — "Contact information", "Shipping address", "Payment options" */
.wc-block-components-title,
.wc-block-checkout__form legend.wc-block-components-checkout-step__title,
.wc-block-components-checkout-step__title{
  font-family:var(--font-display) !important;
  font-weight:800 !important;
  text-transform:uppercase;
  letter-spacing:-.01em;
  font-size:1.35rem !important;
  color:var(--fg) !important;
}
.wc-block-components-checkout-step__description{ color:var(--fg-muted); font-size:.9rem; }
.wc-block-components-checkout-step{ border:0; padding-inline:0; }
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title{
  font-size:1.35rem !important;
}

/* The country is not a question: this store sells to Morocco only, the value
   is forced server-side, and the block checkout ignores the `hidden` flag for
   this one field the way it honours it for the others. Hidden rather than
   removed, so WooCommerce keeps the value it needs for the region list. */
.wc-block-components-address-form .wc-block-components-country-input,
.wc-block-components-address-form #billing-country_field,
.wc-block-components-address-form #shipping-country_field,
.wc-block-components-address-form [id$="-country_field"]{
  display:none !important;
}

/* Fields. The block uses a floating label inside the border, so the input
   needs top padding rather than a label above it — same height and the same
   focus ring as every other field on the site. */
.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-select .wc-blocks-components-select__select,
.wc-block-components-combobox .components-combobox-control__input,
.wc-block-components-address-form input,
.wc-block-components-address-form select{
  min-height:52px !important;
  border:1.5px solid var(--border) !important;
  border-radius:var(--r) !important;
  background:#fff !important;
  color:var(--fg) !important;
  font-family:var(--font-body) !important;
  font-size:1rem !important;
  box-shadow:none !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-select .wc-blocks-components-select__select:focus,
.wc-block-components-combobox .components-combobox-control__input:focus,
.wc-block-components-address-form input:focus,
.wc-block-components-address-form select:focus{
  border-color:var(--lime-600) !important;
  outline:none !important;
  box-shadow:0 0 0 3px rgba(193,251,82,.55) !important;
}
.wc-block-components-text-input label,
.wc-block-components-select label{ color:var(--fg-muted) !important; font-family:var(--font-body) !important; }
.wc-block-components-text-input.is-active label{ color:var(--fg-dim) !important; }
.wc-block-components-validation-error{ color:var(--sale) !important; font-size:.8rem; }
.wc-block-components-text-input.has-error input{ border-color:var(--sale) !important; }

/* Order summary — same card as the classic review box */
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-order-summary{
  background:var(--paper-2);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:1.25rem 1.5rem;
}
.wc-block-components-totals-item__label{ color:var(--fg-muted); }
.wc-block-components-totals-item__value{ font-weight:600; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-family:var(--font-display); font-size:1.4rem; font-weight:800;
}
.wc-block-components-product-name{ font-weight:600; color:var(--fg); }

/* Payment + shipping choices read as the cards they are, not bare radios.
   The card is the *accordion option*, not the label inside it: WooCommerce
   wraps each choice in one and gives it its own heavy square border, so
   styling the label alone produced a box inside a box with the selected tint
   covering only the top half. The border lives on the wrapper, the inner
   parts go transparent, and overflow:hidden lets the tint reach the corners. */
.wc-block-components-radio-control{ border:0 !important; }
.wc-block-components-radio-control-accordion-option{
  border:1.5px solid var(--border) !important;
  border-radius:var(--r) !important;
  background:var(--paper);
  margin-bottom:.6rem;
  overflow:hidden;
  transition:border-color var(--dur) var(--ease);
}
.wc-block-components-radio-control-accordion-option:last-child{ margin-bottom:0; }
.wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control__option-checked),
.wc-block-components-radio-control-accordion-option--checked-option-highlighted{
  border-color:var(--lime-600) !important;
}
/* The label is now just a row inside the card — no frame of its own. */
.wc-block-components-radio-control__option{
  border:0 !important;
  border-radius:0 !important;
  margin:0 !important;
  padding:.85rem 1rem .85rem 2.75rem !important;
  background:transparent !important;
}
.wc-block-components-radio-control__option-checked{
  background:rgba(193,251,82,.22) !important;
}
.wc-block-components-radio-control__label{ font-weight:600; color:var(--fg); }
.wc-block-components-radio-control__input{ accent-color:var(--lime-600); }
/* "Pay with cash upon delivery." — a quiet footnote, not a second panel. */
.wc-block-components-radio-control-accordion-content{
  background:var(--paper);
  border-top:1px solid var(--border);
  padding:.75rem 1rem !important;
  margin:0 !important;
  color:var(--fg-muted);
  font-size:.9rem;
}
.wc-block-components-radio-control-accordion-content:empty{ display:none; }
/* Cash on delivery has no description left to show (see the gateway filter),
   but the block still renders the empty panel. Scoped to COD rather than to
   every option, because for a card gateway that panel holds the real form. */
.wc-block-components-radio-control-accordion-option:has(#radio-control-wc-payment-method-options-cod)
  .wc-block-components-radio-control-accordion-content{ display:none; }

/* The one button that matters. It sits directly under the terms line, which
   made the two read as a single block — the spacing separates the thing you
   read from the thing you press. */
.wc-block-checkout__actions,
.wc-block-checkout__actions_row{ margin-top:1.75rem !important; padding-top:0 !important; }
.wc-block-components-checkout-place-order-button{
  width:100%;
  margin-top:1.25rem !important;
  min-height:56px !important;
  border-radius:var(--r-pill) !important;
  background:var(--lime) !important;
  color:var(--on-lime) !important;
  font-family:var(--font-display) !important;
  font-weight:800 !important;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:1.1rem !important;
}
.wc-block-components-checkout-place-order-button:hover{ background:var(--lime-600) !important; }
.wc-block-components-button:not(.wc-block-components-checkout-place-order-button){
  color:var(--fg); font-family:var(--font-body);
}
/* Its own notices, which arrive with WooCommerce's palette rather than ours */
.wc-block-components-notice-banner{
  border-radius:var(--r) !important;
  border:1px solid var(--border) !important;
  background:var(--paper-2) !important;
}
.wc-block-components-notice-banner.is-error{ border-left:4px solid var(--sale) !important; }
.wc-block-components-notice-banner.is-success{ border-left:4px solid var(--lime-600) !important; }

/* =========================================================================
   MY ACCOUNT DASHBOARD
   Cards rather than a paragraph of links — this theme hides WooCommerce's
   account nav site-wide, so these are the only way through.
   ========================================================================= */
/* Named .mo-dash, not .mo-account — the header's account dropdown already owns
   that class, and reusing it put this page's markup inside the header's flex
   rules (and these rules inside the header). */
.mo-dash{ display:block; }
.mo-dash__head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:2rem;
}
.mo-dash__hello{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.7rem,4vw,2.6rem); line-height:.95; margin:.15rem 0 .3rem; color:var(--fg);
}
.mo-dash__sub{ color:var(--fg-muted); margin:0; overflow-wrap:anywhere; }
.mo-dash__logout{ flex:0 0 auto; }

.mo-dash__grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.mo-dash__card{
  display:flex; align-items:center; gap:1rem;
  padding:1.15rem 1.25rem;
  background:var(--paper-2);
  border:1.5px solid var(--border);
  border-radius:var(--r-lg);
  color:var(--fg); text-decoration:none;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),background var(--dur) var(--ease);
}
.mo-dash__card:hover{ border-color:var(--lime-600); background:var(--paper); transform:translateY(-2px); }
.mo-dash__card:focus-visible{ outline:none; border-color:var(--lime-600); box-shadow:0 0 0 3px rgba(193,251,82,.55); }
.mo-dash__icon{
  flex:0 0 auto; width:46px; height:46px; border-radius:var(--r);
  background:var(--lime); color:var(--on-lime);
  display:grid; place-items:center; font-size:1.25rem;
}
.mo-dash__card-text{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.mo-dash__card-text strong{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.01em;
  font-size:1rem; line-height:1.1;
}
.mo-dash__card-text small{ color:var(--fg-muted); font-size:.82rem; line-height:1.3; }
/* Nudges on hover so the card reads as something you go through. */
.mo-dash__go{ margin-left:auto; color:var(--fg-dim); transition:transform var(--dur) var(--ease),color var(--dur) var(--ease); }
.mo-dash__card:hover .mo-dash__go{ transform:translateX(3px); color:var(--fg); }

@media (max-width:600px){
  .mo-dash__head{ flex-direction:column; align-items:stretch; }
  .mo-dash__logout{ width:100%; justify-content:center; }
  .mo-dash__grid{ grid-template-columns:1fr; }
  .mo-dash__card{ padding:1rem; }
}
@media (prefers-reduced-motion:reduce){
  .mo-dash__card,.mo-dash__go{ transition:none; }
  .mo-dash__card:hover{ transform:none; }
}

/* =========================================================================
   PRODUCT REVIEWS
   Stock WooCommerce markup that never got the theme's treatment: a hairline
   textarea, five tiny outline stars and a review printed in a thin box.
   ========================================================================= */
#reviews .woocommerce-Reviews-title,
#reviews #comments > h2,
#review_form #reply-title{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.4rem,3vw,2rem); line-height:1; color:var(--fg); margin:0 0 1.25rem;
}

/* ---- posted reviews ---- */
#reviews ol.commentlist{ list-style:none; margin:0 0 2.5rem; padding:0; display:grid; gap:1rem; }
#reviews ol.commentlist li{ margin:0; }
#reviews .comment_container{
  display:flex; gap:1rem; align-items:flex-start;
  background:var(--paper-2);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:1.25rem 1.4rem;
}
#reviews .comment_container img.avatar{
  width:48px; height:48px; border-radius:50%; flex:0 0 auto;
  border:1.5px solid var(--border); background:#fff; margin:0; position:static;
}
#reviews .comment-text{ margin:0; border:0; padding:0; flex:1 1 auto; min-width:0; }
#reviews .woocommerce-review__author{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.02em;
  font-size:1rem; color:var(--fg);
}
#reviews .woocommerce-review__dash{ display:none; }
#reviews .woocommerce-review__published-date{
  display:block; color:var(--fg-muted); font-size:.8rem; margin-top:.1rem;
}
#reviews .comment-text > p:last-child{ margin-bottom:0; color:var(--fg); }
#reviews .comment-text .star-rating{ float:right; color:var(--lime-600); }

/* ---- the form ---- */
#review_form_wrapper{
  background:var(--paper-2);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:clamp(1.25rem,3vw,2rem);
}
#review_form .comment-form-rating label,
#review_form .comment-form-comment label{
  display:block; font-weight:600; font-size:.8rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--fg-muted); margin-bottom:.5rem;
}
#review_form .comment-form-comment textarea,
#review_form textarea#comment{
  width:100%; min-height:140px; padding:.9rem 1rem;
  border:1.5px solid var(--border); border-radius:var(--r);
  background:#fff; color:var(--fg);
  font-family:var(--font-body); font-size:1rem; line-height:1.6;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
#review_form textarea#comment:focus{
  outline:none; border-color:var(--lime-600); box-shadow:0 0 0 3px rgba(193,251,82,.55);
}
/* The rating is the one control people actually use here, so it gets to be
   big enough to hit on a phone and lime enough to look interactive. */
#review_form .stars{ margin:0 0 1.25rem; }
/*
 * The width and height are not decoration — they are the whole fix.
 * WooCommerce sizes each star anchor `width:1em; height:1em`, and this rule
 * sets font-size:0 to hide the "1".."5" label text. One em of nothing is
 * nothing, so every anchor collapsed to zero width and the five absolutely
 * positioned glyphs stacked on the same spot. Sizing the box in rem, which
 * font-size:0 cannot touch, puts them back in a row.
 */
#review_form .stars a{
  font-size:0;
  width:1.75rem;
  height:1.75rem;
  margin-right:.5rem;
}
#review_form .stars a::before{
  font-size:1.75rem; line-height:1; color:var(--fg-dim);
  transition:color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
#review_form .stars:hover a::before,
#review_form .stars a.active::before,
#review_form .stars a:hover::before{ color:var(--lime-600); }
#review_form .stars a:hover::before{ transform:scale(1.12); }
/* Name and email were left as raw browser inputs, sitting next to a textarea
   that had been styled — the one unstyled pair of fields on the site. */
#review_form .comment-form-author,
#review_form .comment-form-email{ margin:0 0 1rem; }
#review_form .comment-form-author label,
#review_form .comment-form-email label{
  display:block; font-weight:600; font-size:.8rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--fg-muted); margin-bottom:.5rem;
}
#review_form input[type="text"],
#review_form input[type="email"]{
  width:100%; max-width:420px; padding:.75rem 1rem;
  border:1.5px solid var(--border); border-radius:var(--r);
  background:#fff; color:var(--fg);
  font-family:var(--font-body); font-size:1rem;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
#review_form input[type="text"]:focus,
#review_form input[type="email"]:focus{
  outline:none; border-color:var(--lime-600); box-shadow:0 0 0 3px rgba(193,251,82,.55);
}
#review_form .comment-form-cookies-consent{ display:flex; align-items:center; gap:.5rem; margin:0 0 .5rem; }
#review_form .comment-form-cookies-consent label{ margin:0; font-size:.88rem; color:var(--fg-muted); }

#review_form .form-submit{ margin:1.25rem 0 0; }
#review_form .form-submit input[type="submit"]{ min-height:52px; padding-inline:2rem; }
#reviews .woocommerce-noreviews{ margin-bottom:1.5rem; }

/* =========================================================================
   ORDER RECEIVED
   ========================================================================= */
.mo-thanks{ max-width:820px; margin:0 auto clamp(2rem,5vw,4rem); }
.mo-thanks__hero{
  background:var(--paper-2);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:clamp(1.5rem,4vw,2.75rem);
  text-align:center;
  margin-bottom:2.5rem;
}
.mo-thanks__check{
  width:72px; height:72px; margin:0 auto 1.1rem;
  border-radius:50%; background:var(--lime); color:var(--on-lime);
  display:grid; place-items:center; font-size:2.2rem;
}
.mo-thanks__hero .mo-eyebrow{ justify-content:center; display:inline-flex; align-items:center; gap:.4rem; }
.mo-thanks__title{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.8rem,4.5vw,2.9rem); line-height:.95; margin:.2rem 0 .6rem; color:var(--fg);
}
.mo-thanks__lead{ color:var(--fg-muted); max-width:46ch; margin:0 auto 1.75rem; }
/* Four facts, evenly weighted — auto-fit so they never strand one on a line. */
.mo-thanks__meta{
  list-style:none; margin:0 0 1.75rem; padding:1.25rem 0;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1rem;
}
.mo-thanks__meta li{ display:flex; flex-direction:column; gap:.15rem; }
.mo-thanks__meta span{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--fg-muted); font-weight:600;
}
.mo-thanks__meta strong{ font-size:1.05rem; color:var(--fg); }
.mo-thanks__actions{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }
.mo-thanks__actions .mo-btn{ flex:1 1 auto; min-width:200px; justify-content:center; }
@media (max-width:600px){
  .mo-thanks__actions{ flex-direction:column; }
  .mo-thanks__actions .mo-btn{ width:100%; min-width:0; }
}
/* The stock detail tables sit below; give them the same card language. */
.mo-thanks .woocommerce-order-details,
.mo-thanks .woocommerce-customer-details{ margin-bottom:2rem; }
.mo-thanks .woocommerce-order-details__title,
.mo-thanks .woocommerce-column__title{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:1.35rem; margin:0 0 1rem; color:var(--fg);
}
.mo-thanks table.woocommerce-table--order-details{
  width:100%; border-collapse:collapse;
  border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden;
}
.mo-thanks table.woocommerce-table--order-details th,
.mo-thanks table.woocommerce-table--order-details td{
  padding:.85rem 1rem; border-bottom:1px solid var(--border); text-align:left;
}
.mo-thanks table.woocommerce-table--order-details thead th{
  background:var(--paper-2); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--fg-muted);
}
.mo-thanks table.woocommerce-table--order-details tfoot td{ font-weight:600; }
.mo-thanks table.woocommerce-table--order-details tr:last-child td{ border-bottom:0; }
.mo-thanks address{
  font-style:normal; background:var(--paper-2); border:1px solid var(--border);
  border-radius:var(--r); padding:1rem 1.25rem; color:var(--fg);
}
/* Its own "order received" line is redundant beside the panel above. */
.mo-thanks > .woocommerce-notice--success,
.woocommerce-order > p.woocommerce-notice--success{ display:none; }

/* order review sticky card */
.woocommerce-checkout #order_review_heading{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.5rem,2.5vw,2rem);margin-bottom:1.25rem;color:var(--fg);
}
.woocommerce-checkout #order_review{
  background:var(--paper-2);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:1.5rem;
}
.woocommerce-checkout #order_review table.shop_table{
  border:0;width:100%;margin:0 0 1rem;
}
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td{
  padding:.6rem 0;border-top:1px solid var(--border);text-align:left;
}
.woocommerce-checkout #order_review .order-total .amount{font-weight:700;font-size:1.25rem;}

/* payment methods */
.woocommerce-checkout #payment{background:transparent;border-radius:0;}
.woocommerce-checkout #payment ul.payment_methods{
  border:0;padding:0;margin:0 0 1.25rem;
  display:flex;flex-direction:column;gap:.75rem;
}
.woocommerce-checkout #payment ul.payment_methods li{
  border:1.5px solid var(--border);
  border-radius:var(--r);
  padding:1rem 1.15rem;
  background:var(--paper);
  list-style:none;
}
.woocommerce-checkout #payment ul.payment_methods li label{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;color:var(--fg);margin:0;display:inline;
}
/* COD highlighted */
.woocommerce-checkout #payment ul.payment_methods li.payment_method_cod{
  border-color:var(--lime);
  background:var(--lime-200);
}
.woocommerce-checkout #payment .payment_box{
  background:transparent;
  margin-top:.75rem;
  padding:0;
  color:var(--fg-muted);
  font-size:.9rem;
}
.woocommerce-checkout #payment .payment_box::before{content:none;}
.woocommerce-checkout #payment div.form-row.place-order{padding:0;margin-top:1.25rem;}
.woocommerce-checkout #place_order{
  width:100%;
  min-height:56px;
  font-size:1.2rem;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{margin-bottom:1rem;font-size:.85rem;color:var(--fg-muted);}

/* my account minimal */
/* The account nav is removed server-side (inc/account-coaching.php) — its links
   live in the header account dropdown instead. Its pill styling went with it;
   only the unfloat stays, so the content column spans the row rather than
   sitting at WooCommerce's 68% with a blank 30% beside it. */
.woocommerce-account .woocommerce-MyAccount-content{
  float:none;width:100%;
}
/* Address cards: the heading was inheriting the storefront h2 ramp (72px) — a
   page-title size on a card title, wrapping "Billing address" onto two lines
   and stranding the "Add" link beneath it. */
.woocommerce-account .woocommerce-Address-title{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.75rem;margin-bottom:.75rem;
}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3{
  font-size:clamp(1.25rem,2vw,1.6rem);margin:0;
}
.woocommerce-account .woocommerce-Addresses{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;
}
/* .col2-set carries clearfix pseudo-elements for the float layout it replaced.
   In a grid container those become grid items and take the first cell, which
   pushed both address cards a column to the right. */
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after{display:none;}
.woocommerce-account .woocommerce-Addresses .woocommerce-Address{width:auto;float:none;}

/* woo generic page wrapper spacing */
.woocommerce-page main,
.single-product main,
.woocommerce main{padding-top:calc(var(--header-h) + 2rem);}
/* Desktop header is two rows (logo/search + nav ≈ 139px) but --header-h is only
   the top row, so store-page titles were clipped under the nav row. Clear both. */
@media(min-width:992px){ .woocommerce main{ padding-top:calc(var(--header-h) + 92px); } }
.mo-shop-wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}

/* =========================================================================
   20. MOTION HOOKS & REVEAL STATES
   Reveal initial states are set by JS so no-JS users still see content.
   Do NOT hide .mo-reveal here.
   ========================================================================= */
.mo-reveal{will-change:transform,opacity;}
.mo-parallax{will-change:transform;}
.mo-magnetic{will-change:transform;}

/* =========================================================================
   21. RESPONSIVE BREAKPOINTS
   Mobile-first defaults above are 2-col product grids etc.
   ========================================================================= */

/* ---- ≥576 : small tablets --------------------------------------------- */
@media (min-width:576px){
  .mo-stats__grid{grid-template-columns:repeat(2,1fr);}
  .mo-stat{padding-block:1.5rem;}
}

/* ---- ≥768 : tablet ----------------------------------------------------- */
@media (min-width:768px){
  .mo-products-grid,
  .woocommerce ul.products,
  .woocommerce-page ul.products{grid-template-columns:repeat(3,1fr);}
  .mo-why__grid{grid-template-columns:repeat(2,1fr);}
  .mo-testimonials__grid{grid-template-columns:repeat(3,1fr);}
  .mo-footer__grid{grid-template-columns:1fr 1.3fr 1fr;}
}

/* ---- ≥992 : desktop — nav appears, layouts split ---------------------- */
@media (min-width:992px){
  .mo-menu-toggle{display:none;}
  .mo-nav{display:flex;}
  .mo-stats__grid{grid-template-columns:repeat(4,1fr);}
  .mo-why__grid{grid-template-columns:repeat(4,1fr);}
  .mo-footer__grid{grid-template-columns:1fr 1.4fr 1fr;}

  /* checkout sticky order review */
  .woocommerce-checkout #order_review,
  .woocommerce-checkout #order_review_heading{
    position:sticky;
    top:90px;
  }
  .woocommerce-checkout #order_review_heading{background:transparent;}
}

/* ---- < 992 : mobile nav, stacking ------------------------------------- */
@media (max-width:991.98px){
  .mo-nav{display:none;}
  .mo-menu-toggle{display:inline-flex;}
  .mo-header__tel span{display:none;}   /* keep icon, drop number */

  .mo-editorial__inner{grid-template-columns:1fr;}
  .mo-editorial__media{aspect-ratio:16/10;order:-1;}
  .mo-newsletter__inner{grid-template-columns:1fr;}
  .mo-categories__grid{grid-template-columns:repeat(2,1fr);}
  .mo-cat--feature{grid-column:span 2;grid-row:span 1;}

  /* woo layouts stack */
  .single-product div.product{grid-template-columns:1fr;}
  .woocommerce-cart .woocommerce{grid-template-columns:1fr;}
  .woocommerce-checkout form.checkout{grid-template-columns:1fr;}
  .woocommerce-checkout #order_review{position:static;}
}

/* ---- < 768 : phones ---------------------------------------------------- */
@media (max-width:767.98px){
  .mo-products-grid,
  .woocommerce ul.products,
  .woocommerce-page ul.products{grid-template-columns:repeat(2,1fr);}
  .mo-why__grid{grid-template-columns:1fr;}
  .mo-testimonials__grid{grid-template-columns:1fr;}
  .mo-head--split{align-items:flex-start;flex-direction:column;}
  .mo-hero__cta .mo-btn{flex:1 1 auto;}

  /* add-to-cart pill always visible on touch (no hover) */
  .mo-pcard .mo-add-to-cart{transform:translateY(0);opacity:1;position:static;margin-top:.75rem;left:auto;right:auto;bottom:auto;box-shadow:none;}
  .mo-pcard__body{padding-inline:0;}
}

/* ---- < 400 : very small ------------------------------------------------ */
@media (max-width:400px){
  .mo-categories__grid{grid-template-columns:1fr;}
  .mo-cat--feature{grid-column:span 1;}
  .mo-newsletter__form{flex-direction:column;border-radius:var(--r-lg);padding:1rem;}
  .mo-newsletter__form .mo-btn{width:100%;}
}

/* ---- ≥1200 : product grid to 4-col ------------------------------------ */
@media (min-width:1024px){
  .mo-products-grid,
  .woocommerce ul.products,
  .woocommerce-page ul.products{grid-template-columns:repeat(4,1fr);}
}
/* A fifth column past 1400. Four columns on a wide screen made each card
   ~300px, and with a square photo that is a 450px-tall card — one row filled
   the viewport and the catalogue read as enormous. Five keeps the card near
   240px, which is the size the photography was shot for. */
@media (min-width:1400px){
  .mo-products-grid,
  .woocommerce ul.products,
  .woocommerce-page ul.products{grid-template-columns:repeat(5,1fr);}
}

/* ---- ≥1440 : generous gutter ------------------------------------------ */
@media (min-width:1440px){
  :root{--gutter:2.75rem;}
}

/* =========================================================================
   22. REDUCED MOTION / PRINT
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .mo-scrollcue i{animation:none;}
  /* static marquee — show only the first group, no transform */
  .mo-marquee{overflow:hidden;}
  .mo-marquee__track{transform:none !important;}
  .mo-marquee__group + .mo-marquee__group{display:none;}
  /* reveals must be visible even if JS set opacity */
  .mo-reveal{opacity:1 !important;transform:none !important;}
  .mo-reveal-lines .mo-line > span{transform:none !important;}
  .mo-cursor{display:none !important;}
  /* never leave the hover-only add-to-cart hidden */
  .mo-pcard .mo-add-to-cart{transform:translateY(0);opacity:1;}
}

@media print{
  .mo-header,.mo-menu,.mo-marquee,.mo-cursor,.mo-scrollcue,
  .mo-newsletter,.mo-cta,.mo-footer__socials{display:none !important;}
  body{color:#000;background:#fff;}
  *{box-shadow:none !important;}
}

/* =====================================================================
   v2 INTEGRATION RECONCILIATION — align styles to the real PHP markup
   ===================================================================== */

/* Product grid (PHP: .mo-pgrid) */
.mo-pgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1rem,2vw,1.75rem); }
@media(min-width:768px){ .mo-pgrid{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:992px){ .mo-pgrid{ grid-template-columns:repeat(4,1fr); } }

/* Bento category grid (PHP: .mo-bento, feature tile .mo-cat--large) */
.mo-bento{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(.9rem,1.6vw,1.25rem);
  grid-auto-rows:minmax(200px,1fr); }
@media(min-width:768px){
  .mo-bento{ grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(230px,1fr); }
  .mo-cat--large{ grid-column:span 2; grid-row:span 2; }
  .mo-cat--large .mo-cat__name{ font-size:clamp(2rem,4vw,3.5rem); }
}

/* Hero accent word -> lime */
.mo-hero .mo-accent,.mo-accent{ color:var(--lime); }

/* Header: SOLID by default (all pages), transparent+dark only over the home hero */
.mo-header{ background:var(--paper); box-shadow:0 1px 0 var(--border); }
.mo-header .mo-nav a,
.mo-header .mo-iconbtn,.mo-header .mo-icon-btn,
.mo-header__tel,.mo-header .mo-menu-toggle{ color:var(--fg); }
body.home .mo-header:not(.is-scrolled){ background:transparent; box-shadow:none; }
body.home .mo-header:not(.is-scrolled) .mo-nav a,
body.home .mo-header:not(.is-scrolled) .mo-iconbtn,
body.home .mo-header:not(.is-scrolled) .mo-icon-btn,
body.home .mo-header:not(.is-scrolled) .mo-header__tel,
body.home .mo-header:not(.is-scrolled) .mo-menu-toggle{ color:var(--on-ink); }

/* Logo swap (PHP uses .mo-logo__dark / .mo-logo__light) — overlay + opacity */
.mo-logo{ position:relative; display:inline-block; line-height:0; }
.mo-logo__dark,.mo-logo__light{ display:block; height:40px; width:auto; transition:opacity var(--dur) ease; }
.mo-logo__dark{ position:absolute; inset:0; opacity:1; }   /* dark by default (solid header) */
.mo-logo__light{ opacity:0; }
body.home .mo-header:not(.is-scrolled) .mo-logo__dark{ opacity:0; }
body.home .mo-header:not(.is-scrolled) .mo-logo__light{ opacity:1; }

/* ===================== Buy Now — quick COD order modal ===================== */
.mo-buynow{ width:100%; margin-top:.6rem; justify-content:center; }
.mo-qo{ position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; padding:1rem; }
.mo-qo[hidden]{ display:none; }
.mo-qo__scrim{ position:absolute; inset:0; background:rgba(11,15,10,.64); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; transition:opacity .25s ease; }
.mo-qo--open .mo-qo__scrim{ opacity:1; }
.mo-qo__panel{ position:relative; width:min(480px,100%); max-height:92vh; overflow:auto; background:var(--paper); border-radius:var(--r-lg); padding:1.6rem; box-shadow:var(--shadow-lg); transform:translateY(24px) scale(.98); opacity:0; transition:transform .3s var(--ease),opacity .3s ease; }
.mo-qo--open .mo-qo__panel{ transform:none; opacity:1; }
.mo-qo__x{ position:absolute; top:.8rem; right:.8rem; width:36px; height:36px; border:0; border-radius:50%; background:var(--paper-2); color:var(--fg); cursor:pointer; display:grid; place-items:center; }
.mo-qo__x:hover{ background:var(--ink); color:var(--on-ink); }
.mo-qo__eyebrow{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-muted); margin:0 0 .25rem; }
.mo-qo__eyebrow i{ color:var(--success); }
.mo-qo__title{ font-family:var(--font-display); text-transform:uppercase; font-size:clamp(1.8rem,4vw,2.4rem); line-height:.95; margin:0 0 1rem; }
.mo-qo__product{ display:flex; gap:.85rem; align-items:center; padding:.7rem; background:var(--paper-2); border-radius:var(--r); margin-bottom:1rem; }
.mo-qo__product img{ width:56px; height:56px; object-fit:cover; border-radius:var(--r-sm); background:#fff; }
.mo-qo__product-info{ display:flex; flex-direction:column; line-height:1.3; }
.mo-qo__product-name{ font-weight:600; }
.mo-qo__product-price{ font-weight:700; }
.mo-qo__form{ display:flex; flex-direction:column; gap:.7rem; }
/*
 * The `hidden` attribute is only a UA rule of `display:none`, and any class
 * that sets `display` outranks it. The JS hides this form to swap in the code
 * step, and the flex above quietly ignored it — so the order form stayed on
 * screen, spinner and all, with the code step stacked underneath instead of
 * replacing it. Third time this stylesheet has lost that argument; state it
 * explicitly wherever script hides an element.
 */
.mo-qo__form[hidden]{ display:none; }
.mo-qo__field{ display:flex; flex-direction:column; gap:.25rem; }
.mo-qo__field > span{ font-weight:600; font-size:.8rem; }
/* 52px to match the dropdown beside it and every other field on the site. */
.mo-qo__field input{ height:52px; padding:0 .85rem; border:1.5px solid var(--border); border-radius:var(--r); font-size:1rem; background:#fff; color:var(--fg); }
.mo-qo__field select{ width:100%; }
.mo-qo__field input:focus{ outline:none; border-color:var(--lime); box-shadow:0 0 0 3px rgba(193,251,82,.4); }
.mo-qo__submit{ width:100%; margin-top:.3rem; justify-content:center; }
.mo-qo__note{ display:flex; align-items:center; gap:.4rem; justify-content:center; font-size:.8rem; color:var(--fg-muted); margin:.2rem 0 0; }
.mo-qo__note i{ color:var(--success); }
.mo-qo__error{ background:#FEECEA; color:#B4231A; border-radius:var(--r); padding:.6rem .8rem; font-size:.9rem; margin:0; }
/* Code step: the order is already placed, so the product summary and the
   "Order in 30 seconds" heading are describing something finished. Hidden, so
   the panel is only the one thing still to do. */
.mo-qo--verifying .mo-qo__eyebrow,
.mo-qo--verifying .mo-qo__title,
.mo-qo--verifying .mo-qo__product{ display:none; }
.mo-qo__verify{ text-align:center; padding:.5rem 0; }
.mo-qo__verify[hidden]{ display:none; }
.mo-qo__verify h3{ font-family:var(--font-display); text-transform:uppercase; font-size:1.9rem; margin:0 0 .5rem; }
.mo-qo__verify p{ color:var(--fg-muted); margin:0 0 1.2rem; }
.mo-qo__verify .mo-verify__coderow{ margin-bottom:.6rem; }

.mo-qo__done{ text-align:center; padding:1rem 0; }
.mo-qo__check{ width:64px; height:64px; border-radius:50%; background:var(--lime); color:var(--on-lime); display:grid; place-items:center; font-size:2rem; margin:0 auto 1rem; }
.mo-qo__done h3{ font-family:var(--font-display); text-transform:uppercase; font-size:2rem; margin:0 0 .5rem; }
.mo-qo__done p{ color:var(--fg-muted); margin:0 0 1.2rem; }
.mo-spin{ display:inline-block; width:1em; height:1em; border:2px solid rgba(10,15,0,.3); border-top-color:var(--on-lime); border-radius:50%; animation:mo-spin .6s linear infinite; vertical-align:-2px; }
@keyframes mo-spin{ to{ transform:rotate(360deg); } }

/* ---- "Confirm your email" popup (inc/coach/verify-notice.php) ----------
   Same shell as the quick-order modal so the two read as one system. This
   one is a nudge rather than a gate, so it stays centred but modest. */
.mo-verify{ position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; padding:1rem; }
.mo-verify[hidden]{ display:none; }
.mo-verify__scrim{ position:absolute; inset:0; background:rgba(11,15,10,.64); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; transition:opacity .25s ease; }
.mo-verify--open .mo-verify__scrim{ opacity:1; }
.mo-verify__panel{ position:relative; width:min(440px,100%); max-height:92vh; overflow:auto; background:var(--paper); border-radius:var(--r-lg); padding:2rem 1.6rem 1.6rem; box-shadow:var(--shadow-lg); text-align:center; transform:translateY(24px) scale(.98); opacity:0; transition:transform .3s var(--ease),opacity .3s ease; }
.mo-verify--open .mo-verify__panel{ transform:none; opacity:1; }
.mo-verify__x{ position:absolute; top:.8rem; right:.8rem; width:36px; height:36px; border:0; border-radius:50%; background:var(--paper-2); color:var(--fg); cursor:pointer; display:grid; place-items:center; }
.mo-verify__x:hover{ background:var(--ink); color:var(--on-ink); }
.mo-verify__icon{ width:64px; height:64px; border-radius:50%; background:var(--lime); color:var(--on-lime); display:grid; place-items:center; font-size:1.75rem; margin:0 auto 1rem; }
.mo-verify__eyebrow{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-muted); margin:0 0 .25rem; }
.mo-verify__eyebrow i{ color:var(--success); }
.mo-verify__title{ font-family:var(--font-display); text-transform:uppercase; font-size:clamp(1.6rem,4vw,2.1rem); line-height:.95; margin:0 0 .6rem; }
.mo-verify__body{ color:var(--fg-muted); font-size:.95rem; margin:0 0 1.2rem; }
.mo-verify__body strong{ color:var(--fg); overflow-wrap:anywhere; }
.mo-verify__send{ width:100%; justify-content:center; }
.mo-verify__send.is-busy{ pointer-events:none; opacity:.6; }
/* .mo-btn sets display, which outranks the `hidden` attribute's UA rule — so
   hiding it from script needs saying explicitly. */
.mo-verify__send[hidden]{ display:none !important; }
.mo-verify__msg{ border-radius:var(--r); padding:.6rem .8rem; font-size:.9rem; margin:.8rem 0 0; }
.mo-verify__msg[hidden]{ display:none; }
.mo-verify__msg.is-ok{ background:rgba(193,251,82,.22); color:var(--fg); }
.mo-verify__msg.is-error{ background:rgba(255,59,48,.10); color:var(--sale); }
.mo-verify__later{ display:block; margin:.9rem auto 0; border:0; background:none; color:var(--fg-muted); font-size:.85rem; text-decoration:underline; cursor:pointer; }
.mo-verify__later:hover{ color:var(--fg); }
/* Code box, then Confirm beneath it at full width — that is the action almost
   everyone takes. Resend keeps the smaller slot beside the field, reachable
   without competing with the primary button. */
.mo-verify__code{ margin-top:.9rem; }
.mo-verify__code[hidden]{ display:none; }
.mo-verify__coderow{ display:flex; gap:.6rem; align-items:stretch; }
.mo-verify__coderow .mo-otp__input{ flex:1 1 auto; min-width:0; }
.mo-verify__resend{ flex:0 0 auto; white-space:nowrap; padding-inline:1rem; }
.mo-verify__confirm{ width:100%; justify-content:center; margin-top:.6rem; }

/* ---- One-time code input ----------------------------------------------
   Wide tracking makes six digits scannable as a group. Letter-spacing is
   applied to the right of every glyph including the last, which shifts the
   string off-centre, so the left padding compensates. */
.mo-otp__input{
  display:block; width:100%; height:56px; margin:0 auto;
  padding:0 .5rem 0 1.1rem;
  border:1.5px solid var(--border); border-radius:var(--r);
  background:#fff; color:var(--fg);
  font-family:var(--font-display),monospace;
  font-size:1.6rem; font-weight:700; letter-spacing:.6rem; text-align:center;
}
.mo-otp__input::placeholder{ color:var(--fg-dim); font-weight:400; }
.mo-otp__input:focus{ outline:none; border-color:var(--lime-600); box-shadow:0 0 0 3px rgba(193,251,82,.45); }
.mo-otp__form{ display:flex; flex-direction:column; gap:.8rem; align-items:stretch; max-width:320px; margin:1.2rem auto 0; }
.mo-otp__resend{ margin-top:1rem; font-size:.85rem; }
.mo-btn.is-busy{ pointer-events:none; opacity:.6; }
@media (prefers-reduced-motion:reduce){
  .mo-verify__scrim,.mo-verify__panel{ transition:none; }
}

/* Category tile background art — cover the tile, product-side visible */
.mo-cat{ position:relative; overflow:hidden; }
.mo-cat__bg{ position:absolute; inset:0; background-size:cover !important; background-position:60% 40% !important; background-repeat:no-repeat; transition:transform .5s var(--ease); z-index:0; }
.mo-cat:hover .mo-cat__bg{ transform:scale(1.06); }
.mo-cat__scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(0deg, rgba(11,15,10,.88) 0%, rgba(11,15,10,.35) 55%, rgba(11,15,10,.15) 100%); }
.mo-cat > *:not(.mo-cat__bg):not(.mo-cat__scrim){ position:relative; z-index:2; }

/* =====================================================================
   CONSISTENCY FIXES v2 (post design-audit) — align CSS to real markup
   ===================================================================== */

/* Header logo: force a consistent ~44px height on ALL pages (was 151px) */
.mo-header .mo-logo{ position:relative; display:flex; align-items:center; height:44px; width:auto; flex:0 0 auto; }
.mo-header .mo-logo img,
.mo-header .mo-logo__dark,
.mo-header .mo-logo__light{ height:44px !important; width:auto !important; max-width:none !important; display:block; }
.mo-header .mo-logo__dark{ position:absolute; left:0; top:50%; transform:translateY(-50%); right:auto; bottom:auto; }
body.home .mo-header:not(.is-scrolled) .mo-logo__dark{ opacity:0; }

/* Header icon buttons (.mo-icon-btn == .mo-iconbtn) — size, hit-area, hover */
.mo-header .mo-icon-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:0; background:transparent; border-radius:var(--r-pill); cursor:pointer;
  font-size:1.15rem; transition:color var(--dur) ease, background var(--dur) ease; }
.mo-header .mo-icon-btn:hover{ color:var(--lime-600); }
body.home .mo-header:not(.is-scrolled) .mo-icon-btn:hover{ color:var(--lime); }
/* Desktop shows the full search BAR in row1, so the mobile search ICON is
   redundant — hide it ≥992px. (The higher-specificity rule above was forcing
   display:inline-flex over the earlier media-query hide, so both showed.) */
@media(min-width:992px){ .mo-header .mo-header__search-mobile{ display:none; } }

/* WooCommerce PRIMARY buttons -> lime (kill Woo purple default) */
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
button#place_order, #place_order{
  background:var(--lime) !important; color:var(--on-lime) !important; border-color:var(--lime) !important; }
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover, #place_order:hover{
  background:var(--lime-600) !important; border-color:var(--lime-600) !important; color:var(--on-lime) !important; }

/* Single add-to-cart = SECONDARY ink (Buy Now stays the lime primary below it) */
.woocommerce div.product form.cart .single_add_to_cart_button{
  background:var(--ink) !important; color:var(--on-ink) !important; border-color:var(--ink) !important;
  min-height:52px !important; font-size:1.0625rem !important; }
.woocommerce div.product form.cart .single_add_to_cart_button:hover{ background:var(--ink-800) !important; }

/* Product card name: sentence-case (was inheriting h3 uppercase) */
.mo-pcard__name{ text-transform:none !important; letter-spacing:0 !important; }

/* Category "Shop ->" cta (markup uses .mo-cat__cta) */
.mo-cat__cta{ display:inline-flex; align-items:center; gap:.4rem; color:var(--lime);
  font-family:var(--font-body); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; }
.mo-cat__cta i{ transition:transform var(--dur) ease; }
.mo-cat:hover .mo-cat__cta i{ transform:translateX(4px); }

/* Brand pills (markup uses .mo-brands__pill) */
.mo-brands__pill{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  font-size:1.05rem; color:var(--fg-muted); padding:.45rem 1.1rem; border:1px solid var(--border);
  border-radius:var(--r-pill); background:var(--paper); transition:color var(--dur) ease, border-color var(--dur) ease; }
.mo-brands__pill:hover{ color:var(--ink); border-color:var(--ink); }
.mo-head__title--sm{ font-size:clamp(1.5rem,2.5vw,2rem) !important; }

/* Hero scroll cue (markup uses .mo-hero__cue) */
.mo-hero__cue{ color:var(--lime); }

/* Stats grid: mobile-first (2-col base, 4 at lg) */
.mo-stats__grid{ grid-template-columns:repeat(2,1fr) !important; }
@media(min-width:992px){ .mo-stats__grid{ grid-template-columns:repeat(4,1fr) !important; } }

/* Shop product grid: 4-col at lg (match homepage .mo-pgrid) + no double image border */
/* These carry !important because they have to beat WooCommerce's own loop
   styles. That also means they beat the tiered rules further up, so the fifth
   column has to be declared here too — stating it only up there left the grid
   silently pinned at four. */
@media(min-width:992px){ .woocommerce ul.products, .woocommerce-page ul.products{ grid-template-columns:repeat(4,1fr) !important; } }
@media(min-width:1400px){ .woocommerce ul.products, .woocommerce-page ul.products{ grid-template-columns:repeat(5,1fr) !important; } }
.woocommerce ul.products li.product a img{ border:0 !important; background:transparent !important; }

/* Buy Now modal: match checkout field focus + stepper */
.mo-qo__field input:focus{ border-color:var(--lime-600) !important; box-shadow:0 0 0 3px rgba(193,251,82,.55) !important; }
.mo-qo__error{ background:rgba(255,59,48,.10) !important; color:var(--sale) !important; }

/* screen-reader-only (newsletter label was rendering visibly) */
.screen-reader-text{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Mobile menu toggle -> X + scroll lock (JS toggles .is-active / body.mo-no-scroll) */
body.mo-no-scroll{ overflow:hidden; }

/* Checkout: real 2-column with the order summary heading + table locked
   together at the top of column 2 (explicit rows kill the tall-billing gap). */
@media(min-width:992px){
  form.checkout.woocommerce-checkout{ display:grid !important; grid-template-columns:1fr minmax(340px,420px);
    grid-template-rows:auto 1fr; grid-column-gap:2.5rem; align-items:start; }
  form.checkout #customer_details, form.checkout .col2-set{ grid-column:1 !important; grid-row:1 / span 2 !important; display:block; }
  form.checkout .col2-set .col-1, form.checkout .col2-set .col-2{ width:100% !important; float:none !important; padding:0 !important; }
  form.checkout .col2-set .col-2{ margin-top:1.5rem; }
  form.checkout #order_review_heading, form.checkout .order_review_heading{ grid-column:2 !important; grid-row:1 !important; margin:0 0 1rem !important; }
  form.checkout #order_review, form.checkout .woocommerce-checkout-review-order{ grid-column:2 !important; grid-row:2 !important; align-self:start; position:sticky; top:90px;
    background:var(--paper); border:1px solid var(--border); border-radius:var(--r-lg); padding:1.25rem; }
}

/* Mobile menu toggle -> X animation (JS toggles .is-active) */
.mo-menu-toggle__bars{ display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:24px; height:18px; }
.mo-menu-toggle__bars span{ display:block; height:2px; width:100%; background:currentColor; border-radius:2px; transition:transform var(--dur) var(--ease), opacity var(--dur) ease; transform-origin:center; }
.mo-menu-toggle.is-active .mo-menu-toggle__bars span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.mo-menu-toggle.is-active .mo-menu-toggle__bars span:nth-child(2){ opacity:0; }
.mo-menu-toggle.is-active .mo-menu-toggle__bars span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Testimonial author: separate name and city */
.mo-quote__author{ display:flex; align-items:baseline; flex-wrap:wrap; gap:.45rem; }
.mo-quote__author > span::before{ content:"\00B7"; margin-inline-end:.45rem; color:var(--fg-dim); }

/* Marquee separator glyph: quiet accent, not full-weight text */
.mo-marquee__group > .mo-marquee__sep{ opacity:.5; }
.mo-marquee__group > .mo-marquee__sep i{ font-size:.6em; vertical-align:middle; }

/* Fix header icon-btn override regressions:
   - phone button has a visible label -> must be auto-width, not 44px
   - hamburger must stay hidden on desktop (nav shows instead) */
.mo-header .mo-header__tel{ width:auto !important; padding-inline:.6rem; gap:.45rem; }
@media(min-width:992px){ .mo-header .mo-menu-toggle{ display:none !important; } }
@media(max-width:991.98px){
  .mo-header .mo-header__tel .mo-header__tel-label{ display:none; }
  .mo-header .mo-header__tel{ width:44px !important; padding-inline:0; }
}

/* ============ PRODUCT PAGE: tabs, swatches, qty stepper, CTA row ============ */

/* Qty + Add-to-cart span full width (match the Buy Now button width) */
.woocommerce div.product form.cart:not(.variations_form){ display:flex; flex-wrap:wrap; gap:.6rem; align-items:stretch; width:100%; }
.woocommerce div.product form.cart:not(.variations_form) .quantity{ flex:0 0 auto; }
.woocommerce div.product form.cart:not(.variations_form) .single_add_to_cart_button{ flex:1 1 auto; min-width:0; }
.woocommerce div.product form.cart:not(.variations_form) .mo-buynow{ flex:1 0 100%; margin-top:0; }
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:stretch; width:100%; }
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart .quantity{ flex:0 0 auto; }
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button{ flex:1 1 auto; min-width:0; }
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart .mo-buynow{ flex:1 0 100%; margin-top:0; }

/* Quantity stepper (+/- injected by product-enhance.js) */
.mo-qty{ display:inline-flex !important; align-items:center; border:1.5px solid var(--border); border-radius:var(--r-pill); overflow:hidden; height:56px; background:#fff; }
.mo-qty__btn{ width:46px; height:100%; border:0; background:transparent; font-size:1.3rem; line-height:1; cursor:pointer; color:var(--ink); display:grid; place-items:center; transition:background var(--dur) ease,color var(--dur) ease; }
.mo-qty__btn:hover{ background:var(--lime); color:var(--on-lime); }
.mo-qty input.qty{ width:46px !important; text-align:center; border:0 !important; height:100%; background:transparent; font-weight:700; font-size:1rem; padding:0 !important; box-shadow:none !important; -moz-appearance:textfield; appearance:textfield; }
.mo-qty input.qty::-webkit-outer-spin-button, .mo-qty input.qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* Variation swatches (pills from the <select>) */
.mo-select-hidden{ position:absolute !important; width:1px; height:1px; opacity:0; pointer-events:none; }
.mo-swatches{ display:flex; flex-wrap:wrap; gap:.5rem; }
.mo-swatch{ padding:.55rem 1.15rem; border:1.5px solid var(--border); border-radius:var(--r-pill); background:#fff; font-family:var(--font-body); font-weight:600; font-size:.9rem; cursor:pointer; color:var(--fg); transition:all var(--dur) ease; }
.mo-swatch:hover{ border-color:var(--ink); }
.mo-swatch.is-active{ background:var(--ink); color:var(--on-ink); border-color:var(--ink); }
.woocommerce div.product form.cart table.variations{ border:0 !important; margin:0 0 1.25rem; background:transparent; }
.woocommerce div.product form.cart table.variations td,
.woocommerce div.product form.cart table.variations th{ border:0 !important; padding:0 0 .55rem !important; vertical-align:top; background:transparent; }
.woocommerce div.product form.cart table.variations .label label{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.03em; font-weight:700; margin:0; font-size:.95rem; }
.woocommerce div.product .woocommerce-variation-price .price{ font-family:var(--font-display); }
.woocommerce div.product .reset_variations{ display:inline-block; margin-top:.4rem; font-size:.8rem; color:var(--fg-muted); }

/* Tabs — clean readable pills (fix unreadable dark active tab) */
.woocommerce div.product .woocommerce-tabs ul.tabs{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.5rem; padding:0; list-style:none; border:0 !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before{ display:none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li{ background:transparent !important; border:0 !important; border-radius:0 !important; padding:0 !important; margin:0 !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{ display:none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{ display:block; padding:.55rem 1.25rem; border-radius:var(--r-pill); font-family:var(--font-display); text-transform:uppercase; letter-spacing:.03em; font-weight:700; font-size:.95rem; color:var(--fg-muted) !important; background:var(--paper-2); border:1.5px solid transparent; transition:all var(--dur) ease; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover{ color:var(--ink) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{ background:var(--ink); color:var(--on-ink) !important; }
.woocommerce div.product .woocommerce-tabs .panel{ padding-top:.5rem; }
.woocommerce div.product .woocommerce-tabs h2{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:-.01em; }

/* ===================== CART PAGE polish ===================== */
.woocommerce-cart .woocommerce{ display:block !important; }
.woocommerce-cart form.woocommerce-cart-form{ width:100% !important; float:none !important; margin:0 0 2rem !important; }
.woocommerce-cart table.shop_table{ width:100%; border:1px solid var(--border) !important; border-radius:var(--r-lg); border-collapse:separate !important; overflow:hidden; background:#fff; }
.woocommerce-cart table.shop_table thead th{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.03em; font-weight:700; background:var(--paper-2); color:var(--fg); border:0; padding:1rem; }
.woocommerce-cart table.shop_table td{ border-top:1px solid var(--border); padding:1rem; vertical-align:middle; }
.woocommerce-cart .cart_item td.product-thumbnail{ width:88px; }
.woocommerce-cart .cart_item td.product-thumbnail img{ width:72px; height:72px; object-fit:cover; border-radius:var(--r); border:1px solid var(--border); background:#fff; display:block; }
.woocommerce-cart .product-name a{ font-weight:600; color:var(--fg); }
.woocommerce-cart td.product-remove a.remove{ color:var(--sale) !important; font-size:1.3rem; }
.woocommerce-cart .actions .coupon{ display:inline-flex; gap:.5rem; }
.woocommerce-cart .actions .coupon input#coupon_code{ height:48px; border-radius:var(--r-pill); border:1.5px solid var(--border); padding:0 1rem; }
.woocommerce-cart .cart-collaterals{ width:100% !important; float:none !important; display:flex; justify-content:flex-end; }
.woocommerce-cart .cart-collaterals .cart_totals{ width:min(440px,100%) !important; float:none !important; background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:1.5rem; }
.woocommerce-cart .cart_totals h2{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:-.01em; margin-top:0; }
.woocommerce-cart .cart_totals table{ border:0; }
.woocommerce-cart .cart_totals table th, .woocommerce-cart .cart_totals table td{ border:0; padding:.6rem 0; }
.woocommerce-cart .cart_totals .order-total .amount{ font-family:var(--font-display); font-size:1.6rem; }
.woocommerce-cart .wc-proceed-to-checkout{ padding-top:1rem; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{ display:block; width:100%; text-align:center; min-height:54px; line-height:38px; font-size:1.05rem; }

/* ===================== CHECKOUT polish (match Buy Now clarity) ===================== */
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:-.01em; }
.woocommerce-checkout #billing_company_field{ display:none; }
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3{ font-size:1.5rem; }
.woocommerce-checkout .form-row label{ font-weight:600; font-size:.85rem; }
/* Height and border live with the rest of the field styling further up; this
   block used to restate them (at a different height, and with !important) and
   quietly won, so the checkout fields never matched the sizing they were
   written to have. Only select2 — which ships its own chrome — is forced. */
.woocommerce-checkout .select2-container .select2-selection{
  min-height:52px; border-radius:var(--r) !important; border:1.5px solid var(--border) !important;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th{ font-family:var(--font-display); text-transform:uppercase; }
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total .amount{ font-family:var(--font-display); font-size:1.4rem; }
.woocommerce-checkout #payment{ background:transparent; }
.woocommerce-checkout #payment ul.payment_methods{ border:0; padding:0; }
.woocommerce-checkout #payment .wc_payment_method label{ font-weight:600; }
.woocommerce-checkout #payment div.payment_box{ background:var(--lime-200); border-radius:var(--r); }
.woocommerce-checkout #payment div.payment_box::before{ border-bottom-color:var(--lime-200); }
.woocommerce-checkout #place_order{ min-height:56px; font-size:1.1rem; }

/* Hero cursor-follow lime glow (hero-fx.js) */
.mo-hero{ position:relative; overflow:hidden; }
.mo-hero__cursorglow{ position:absolute; top:0; left:0; width:560px; height:560px; margin:-280px 0 0 -280px; border-radius:50%; background:radial-gradient(circle, rgba(193,251,82,.30), rgba(193,251,82,0) 62%); pointer-events:none; opacity:0; mix-blend-mode:screen; z-index:1; will-change:transform,opacity; }
.mo-hero .mo-container, .mo-hero__content{ position:relative; z-index:2; }

/* Cleaner header cart badge */
.mo-header .mo-header__cart{ position:relative; }
.mo-cart-count{
	position:absolute; top:2px; right:2px; min-width:18px; height:18px; padding:0 4px;
	display:inline-flex; align-items:center; justify-content:center;
	background:var(--lime); color:var(--on-lime); font-family:var(--font-body); font-weight:700;
	font-size:.68rem; line-height:1; border-radius:999px; border:2px solid var(--paper);
	pointer-events:none;
}
body.home .mo-header:not(.is-scrolled) .mo-cart-count{ border-color:var(--ink); }

/* Checkout: tidy the review card + keep a defined panel while it AJAX-loads */
.woocommerce-checkout #order_review_heading{
	font-family:var(--font-display); text-transform:uppercase; margin:0 0 .75rem;
}
.woocommerce-checkout .woocommerce-checkout-review-order{ min-height:120px; }
.woocommerce-checkout .woocommerce-checkout-review-order-table{ width:100%; border:0; }
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td{ padding:.55rem 0; border-bottom:1px solid var(--border); }
.woocommerce-checkout .cart-subtotal, .woocommerce-checkout .order-total{ font-weight:700; }

/* ---- Cart: fixed-quantity (sold-individually) items show a static count, not an empty stepper ---- */
.mo-qty.mo-qty--fixed{ border:none !important; background:transparent !important; padding:0 !important; justify-content:center; }
.mo-qty__fixed{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:44px; height:40px; padding:0 .75rem;
	font-family:var(--font-impact,'Anton'); font-size:1.15rem; line-height:1;
	color:var(--ink); background:var(--paper-2,#ECEEE4); border:1.5px solid var(--border,#DEDFD5);
	border-radius:var(--r-pill,999px);
}
.woocommerce-cart-form .mo-qty--fixed .screen-reader-text{ position:absolute; }

/* ---- Cart: graceful thumbnail for products without a real image (e.g. digital coaching) ---- */
.woocommerce-cart-form .cart_item .product-thumbnail img{ border-radius:12px; background:var(--paper-2,#ECEEE4); }

/* ============================================================
   Inner page titles — consistent spacing (fixes title↔content
   overlap on Coaching / Contact / Stories / Shop etc.)
   ============================================================ */
.mo-page{ padding-top:clamp(.5rem,1.5vw,1.5rem); }
.mo-page__title{
	font-size:clamp(2.75rem,8vw,6.5rem);
	line-height:.92;
	margin:0 0 clamp(1.75rem,3.5vw,2.75rem);
}
.mo-page__content{ font-size:1.05rem; line-height:1.65; }
.mo-page__content > h1,
.mo-page__content > h2,
.mo-page__content > h3{ line-height:.95; margin:clamp(2rem,4vw,3rem) 0 1rem; }
.mo-page__content > h1:first-child,
.mo-page__content > h2:first-child,
.mo-page__content > h3:first-child{ margin-top:0; }
.mo-page__content > * + *{ margin-top:1rem; }
/* shortcode blocks (coaching grid, stories, calculators) get clear air under the title */
.mo-page__content > .mo-coaching,
.mo-page__content > .mo-stories,
.mo-page__content > .mo-sbg,
.mo-page__content > .mo-sbb{ display:block; margin-top:clamp(1rem,2.5vw,2rem); }

/* WooCommerce page titles (Shop / Cart / Checkout / My account) — same breathing room */
.woocommerce .page-title,
.woocommerce-products-header__title,
.woocommerce-page .entry-title{
	margin:0 0 clamp(1.5rem,3vw,2.25rem) !important;
	line-height:.92;
}

/* ============================================================
   Contact form ( [mo_contact_form] )
   ============================================================ */
.mo-contact__grid{
	display:grid; grid-template-columns:1fr; gap:clamp(1.5rem,4vw,3rem); align-items:start;
}
@media(min-width:900px){ .mo-contact__grid{ grid-template-columns:0.85fr 1.15fr; } }

.mo-contact__aside{
	background:var(--ink); color:var(--on-ink);
	border-radius:var(--r-lg,22px); padding:clamp(1.6rem,3vw,2.4rem);
	position:relative; overflow:hidden;
}
.mo-contact__aside::after{
	content:""; position:absolute; top:-30%; right:-20%; width:70%; aspect-ratio:1;
	background:radial-gradient(circle, rgba(193,251,82,.22), rgba(193,251,82,0) 65%); pointer-events:none;
}
.mo-contact__h{ font-family:var(--font-display); color:var(--on-ink); font-size:clamp(1.6rem,3vw,2.2rem); margin:0 0 .6rem; }
.mo-contact__lead{ color:var(--on-ink-muted,rgba(244,245,239,.75)); margin:0 0 1.5rem; line-height:1.6; }
.mo-contact__list{ list-style:none; margin:0 0 1.5rem; padding:0; display:flex; flex-direction:column; gap:.85rem; }
.mo-contact__list li{ display:flex; align-items:center; gap:.7rem; font-weight:500; }
.mo-contact__list li i{ color:var(--lime); font-size:1.1rem; width:1.3rem; text-align:center; }
.mo-contact__list a{ color:var(--on-ink); }
.mo-contact__list a:hover{ color:var(--lime); }
.mo-contact__socials{ display:flex; gap:.6rem; }
.mo-contact__socials a{
	width:42px; height:42px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
	background:rgba(244,245,239,.08); color:var(--on-ink); border:1px solid rgba(244,245,239,.14); transition:all .2s ease;
}
.mo-contact__socials a:hover{ background:var(--lime); color:var(--on-lime); border-color:var(--lime); }

.mo-contact__formwrap{
	background:var(--paper); border:1.5px solid var(--border); border-radius:var(--r-lg,22px);
	padding:clamp(1.6rem,3vw,2.4rem);
}
.mo-form__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.mo-form__row{ display:grid; grid-template-columns:1fr; gap:1.1rem; margin-bottom:1.1rem; }
@media(min-width:560px){ .mo-form__row{ grid-template-columns:1fr 1fr; } }
.mo-form__field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem; }
.mo-form__row .mo-form__field{ margin-bottom:0; }
.mo-form label{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.03em; font-size:.82rem; font-weight:600; color:var(--fg); }
.mo-req{ color:var(--lime-600,#7ea52a); }
.mo-form input,
.mo-form textarea{
	width:100%; font-family:var(--font-body); font-size:1rem; color:var(--fg);
	background:var(--paper-2,#ECEEE4); border:1.5px solid var(--border); border-radius:12px;
	padding:.8rem .95rem; transition:border-color .2s ease, box-shadow .2s ease; min-height:48px;
}
.mo-form textarea{ resize:vertical; min-height:120px; }
.mo-form input:focus,
.mo-form textarea:focus{ outline:none; border-color:var(--lime-600,#7ea52a); box-shadow:0 0 0 3px rgba(193,251,82,.35); background:var(--paper); }
.mo-form input::placeholder,
.mo-form textarea::placeholder{ color:var(--fg-muted,#8a8f82); }
.mo-contact__form .mo-btn{ margin-top:.4rem; }

.mo-contact__alert{
	display:flex; align-items:center; gap:.6rem; padding:.9rem 1.1rem; border-radius:12px;
	margin-bottom:1.4rem; font-weight:600;
}
.mo-contact__alert i{ font-size:1.15rem; flex:0 0 auto; }
.mo-contact__alert--ok{ background:rgba(193,251,82,.18); border:1.5px solid var(--lime-600,#7ea52a); color:#3f5a12; }
.mo-contact__alert--err{ background:rgba(220,60,60,.1); border:1.5px solid rgba(220,60,60,.5); color:#a12b2b; }

/* ============================================================
   Cart cross-sells live in a NARROW column, so two columns is right for
   them — the shop's forced 4-col grid produced uneven, truncated cards
   there.

   Scoped to the cart. Up-sells ("You may also like…") render on the
   *product* page, which is full width, and were caught by this same rule:
   they came out at twice the size of the related products sitting directly
   underneath them. Left alone they inherit the shop grid and the two rows
   finally match.
   ============================================================ */
.woocommerce .cross-sells ul.products,
.woocommerce-page .cross-sells ul.products{
	grid-template-columns:repeat(2,1fr) !important;
	gap:clamp(1rem,1.6vw,1.5rem) !important;
}
.woocommerce .cross-sells,
.woocommerce-cart .cross-sells{ width:100%; }
.woocommerce .cross-sells > h2,
.woocommerce .up-sells > h2{ font-size:clamp(1.5rem,3vw,2.25rem); margin:0 0 1.25rem; line-height:1; }
/* cross-sell cards: consistent height + no name truncation */
.woocommerce .cross-sells li.product,
.woocommerce .up-sells li.product{ height:100%; }
.woocommerce .cross-sells .mo-pcard__name,
.woocommerce .up-sells .mo-pcard__name,
.woocommerce .cross-sells .woocommerce-loop-product__title,
.woocommerce .up-sells .woocommerce-loop-product__title{ white-space:normal; overflow:visible; }
@media(max-width:640px){
	.woocommerce .cross-sells ul.products,
	.woocommerce-page .cross-sells ul.products{ grid-template-columns:1fr 1fr !important; }
}

/* breathing room between cross-sells and the totals card */
.woocommerce-cart .cart-collaterals{ gap:clamp(1.5rem,3vw,3rem); align-items:flex-start; }
.woocommerce-cart .cart-collaterals .cross-sells{ flex:1 1 auto; min-width:0; }

/* ============================================================
   Catalog: category hero + filter pills + search + stock line
   ============================================================ */
/* Deliberately shallow. This banner sits between the customer and the thing
   they came for: at its old height nothing but chrome was visible on a laptop
   screen — hero, then search, then filters, then the result count, and the
   first product still below the fold. */
.mo-cathero{
	position:relative; overflow:hidden;
	display:grid; grid-template-columns:1fr; gap:1rem; align-items:center;
	background:var(--ink); color:var(--on-ink);
	border-radius:var(--r-lg,22px);
	padding:clamp(1.1rem,2.2vw,1.6rem) clamp(1.4rem,3vw,2.25rem);
	margin:0 0 clamp(1rem,2vw,1.4rem);
}
@media(min-width:768px){ .mo-cathero--has-img{ grid-template-columns:1.3fr .7fr; } }
.mo-cathero__glow{
	position:absolute; top:-30%; right:-6%; width:55%; aspect-ratio:1; z-index:0;
	background:radial-gradient(circle, rgba(193,251,82,.26), rgba(193,251,82,0) 62%); pointer-events:none;
}
.mo-cathero__text{ position:relative; z-index:1; }
.mo-cathero .mo-eyebrow{ color:var(--lime); }
.mo-cathero__title{
	font-family:var(--font-display); text-transform:uppercase; color:var(--on-ink);
	font-size:clamp(1.9rem,4vw,3rem); line-height:.94; margin:.15rem 0 .35rem;
}
.mo-cathero__desc{ color:var(--on-ink-muted,rgba(244,245,239,.72)); max-width:52ch; line-height:1.5; margin-bottom:.6rem; font-size:.92rem; }
.mo-cathero__count{ display:inline-flex; align-items:center; gap:.45rem; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; font-size:.85rem; color:var(--on-ink); background:rgba(244,245,239,.08); border:1px solid rgba(244,245,239,.16); padding:.4rem .85rem; border-radius:999px; }
.mo-cathero__count i{ color:var(--lime); }
.mo-cathero__media{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; }
.mo-cathero__media img{ width:auto; max-width:100%; max-height:230px; object-fit:contain; position:relative; z-index:1; filter:drop-shadow(0 20px 40px rgba(0,0,0,.5)); border-radius:12px; }
.mo-cathero__media-glow{ position:absolute; inset:-10%; background:radial-gradient(circle, rgba(193,251,82,.3), transparent 60%); z-index:0; }

/* filter bar: search + pills */
.mo-catbar{ display:flex; flex-direction:column; gap:.75rem; margin:0 0 1rem; }
.mo-catsearch{ position:relative; display:flex; align-items:center; width:100%; max-width:560px; }
.mo-catsearch > i{ position:absolute; left:1.05rem; color:var(--fg-muted,#8a8f82); pointer-events:none; z-index:1; }
.mo-catsearch input[type=search]{
	width:100%; font-family:var(--font-body); font-size:1rem;
	padding:.8rem 7rem .8rem 2.7rem; min-height:52px;
	background:var(--paper-2,#ECEEE4); border:1.5px solid var(--border); border-radius:999px; color:var(--fg);
}
.mo-catsearch input[type=search]:focus{ outline:none; border-color:var(--lime-600,#7ea52a); box-shadow:0 0 0 3px rgba(193,251,82,.3); background:var(--paper); }
.mo-catsearch__btn{
	position:absolute; right:5px; top:5px; bottom:5px; padding:0 1.4rem; border:none; cursor:pointer;
	background:var(--lime); color:var(--on-lime); font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.04em; border-radius:999px; transition:background .18s ease;
}
.mo-catsearch__btn:hover{ background:var(--lime-600,#a6e034); }
/* Categories scroll sideways instead of stacking. Wrapped, seven chips ran to
   three lines and pushed the products further down the page — the opposite of
   what a filter is for. A chip cut off at the right edge is the affordance
   that says there is more, so the row is not padded to hide it. */
.mo-catpills{
  display:flex; flex-wrap:nowrap; gap:.6rem;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  /* Vertical breathing room so `overflow` does not clip the focus ring. */
  padding:3px 3px .4rem;
  margin-inline:-3px;
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
  overscroll-behavior-x:contain;
}
.mo-catpills > *{ flex:0 0 auto; scroll-snap-align:start; }
.mo-catpills::-webkit-scrollbar{ height:6px; }
.mo-catpills::-webkit-scrollbar-track{ background:transparent; }
.mo-catpills::-webkit-scrollbar-thumb{ background:var(--border); border-radius:999px; }
.mo-catpills:hover::-webkit-scrollbar-thumb{ background:var(--fg-dim); }
.mo-catpill{
	display:inline-flex; align-items:center; padding:.55rem 1.15rem;
	font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.03em; font-size:.9rem;
	color:var(--fg); background:var(--paper-2,#ECEEE4); border:1.5px solid var(--border); border-radius:999px;
	transition:background .18s ease, color .18s ease, border-color .18s ease; white-space:nowrap;
}
.mo-catpill:hover{ border-color:var(--ink); color:var(--ink); }
.mo-catpill.is-active{ background:var(--lime); color:var(--on-lime); border-color:var(--lime); }

/* product card stock line */
.mo-pcard__stock{ display:inline-flex; align-items:center; gap:.35rem; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; font-size:.76rem; font-weight:600; margin-top:.2rem; }
.mo-pcard__stock.is-in{ color:#4c7a12; }
.mo-pcard__stock.is-out{ color:var(--sale,#d33); }
.mo-pcard__stock i{ font-size:.82rem; }

/* ============================================================
   Cart totals table — clean it up:
   - the .shop_table rule (L~2069) was wrapping it in a second bordered box
   - amounts were left-aligned; total wasn't emphasised
   ============================================================ */
.woocommerce-cart .cart_totals table.shop_table,
.woocommerce-cart .cart_totals table{
	border:0 !important; border-radius:0 !important; background:transparent !important;
	overflow:visible !important; margin:0; box-shadow:none !important;
}
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td{
	border:0 !important; border-top:1px solid var(--border) !important;
	padding:.9rem 0 !important; vertical-align:middle; background:transparent !important;
}
.woocommerce-cart .cart_totals table tr:first-child th,
.woocommerce-cart .cart_totals table tr:first-child td{ border-top:0 !important; }
.woocommerce-cart .cart_totals table th{
	text-align:left; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.03em;
	font-weight:600; color:var(--fg-muted,#6a6f62); font-size:.92rem; white-space:nowrap; width:42%;
}
.woocommerce-cart .cart_totals table td{
	text-align:right; font-variant-numeric:tabular-nums; font-weight:600; color:var(--fg);
}
.woocommerce-cart .cart_totals .order-total th{ color:var(--ink); font-size:1rem; }
.woocommerce-cart .cart_totals .order-total td,
.woocommerce-cart .cart_totals .order-total td .amount{
	font-family:var(--font-impact,'Anton'); font-weight:400; font-size:1.7rem; color:var(--ink);
}
/* shipping options row keeps its natural left alignment (radios + address) */
.woocommerce-cart .cart_totals .shipping td{ text-align:left; font-weight:500; font-size:.95rem; }
.woocommerce-cart .cart_totals .shipping ul#shipping_method{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.4rem; }
.woocommerce-cart .cart_totals .shipping ul#shipping_method li{ display:flex; align-items:center; gap:.4rem; }
.woocommerce-cart .cart_totals .woocommerce-shipping-destination{ color:var(--fg-muted); font-size:.85rem; margin-top:.35rem; }

/* recommendations block heading on cart */
.mo-cart-recs > h2{ font-family:var(--font-display); text-transform:uppercase; font-size:clamp(1.5rem,3vw,2.25rem); line-height:1; margin:0 0 1.25rem; }

/* ============================================================
   Visual-audit fixes (mobile + polish)
   ============================================================ */

/* 1) MOBILE CART: collaterals were a flex row on 390px -> totals overlapped
   the recommendations. Stack them, totals + checkout first. */
@media (max-width:768px){
	.woocommerce-cart .cart-collaterals{
		flex-direction:column !important; align-items:stretch !important; gap:1.75rem !important;
		justify-content:flex-start !important;
	}
	.woocommerce-cart .cart-collaterals .cross-sells,
	.woocommerce-cart .cart-collaterals .cart_totals{
		width:100% !important; min-width:0 !important; float:none !important; position:static !important;
	}
	.woocommerce-cart .cart-collaterals .cart_totals{ order:1; }
	.woocommerce-cart .cart-collaterals .cross-sells{ order:2; }
}

/* 2) MOBILE inner-page title clearance: section top padding was < fixed header
   height on small screens, so page titles were clipped under the header. */
@media (max-width:768px){
	main.mo-section{ padding-top:calc(var(--header-h) + 1.25rem) !important; }
}
.mo-page__title,
.mo-cathero__title,
.woocommerce-products-header__title{ scroll-margin-top:calc(var(--header-h) + 1rem); }

/* 3) BRAND cards: uniform dark scrim so white brand names stay legible over
   any product photo (some tiles were too light). */
.mo-sbb__scrim{
	background:linear-gradient(180deg, rgba(11,15,10,.12) 0%, rgba(11,15,10,.55) 52%, rgba(11,15,10,.86) 100%) !important;
}
.mo-sbb__name{ text-shadow:0 1px 10px rgba(0,0,0,.45); }

/* 4) PAGINATION: active page chip on-brand lime instead of default lavender. */
.woocommerce nav.woocommerce-pagination ul{ border:0; display:flex; gap:.4rem; justify-content:center; margin-top:2rem; }
.woocommerce nav.woocommerce-pagination ul li{ border:0; margin:0; }
.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers{
	min-width:46px; height:46px; display:inline-flex; align-items:center; justify-content:center;
	border:1.5px solid var(--border); border-radius:var(--r-pill,999px); background:var(--paper);
	color:var(--fg); font-family:var(--font-display); font-weight:700; padding:0 .5rem;
}
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover{ border-color:var(--ink); color:var(--ink); }
.woocommerce nav.woocommerce-pagination ul li span.current{
	background:var(--lime) !important; color:var(--on-lime) !important; border-color:var(--lime) !important;
}

/* 5) CONTACT form: give inputs a readable border + lift the card off the page. */
.mo-contact__formwrap{ box-shadow:0 2px 16px rgba(11,15,10,.05); }
.mo-form input, .mo-form textarea{ border-color:rgba(11,15,10,.16); background:#fff; }

/* 6) PRODUCT CARDS: reserve two lines for the name so price + stock align
   across a row (uneven wrap made rows look ragged, esp. on mobile). */
.mo-pcard{ height:100%; }
.mo-pcard__body{ flex:1 1 auto; }
.mo-pcard__name{ min-height:2.5em; }
.mo-pcard__stock{ margin-top:.15rem; }

/* footer COD glyph spacing */
.mo-footer__cod{ display:inline-flex; align-items:center; gap:.4rem; }

/* ---- WhatsApp: floating button + single-product order button ---------- */
.mo-whatsapp-float{
  position:fixed; z-index:60;
  bottom:1.25rem; inset-inline-end:1.25rem;
  width:56px; height:56px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#25D366; color:#fff; font-size:1.6rem;
  box-shadow:0 14px 30px rgba(0,0,0,.28);
  transition:transform var(--dur,.2s) var(--ease,ease);
}
.mo-whatsapp-float:hover{ transform:scale(1.08); color:#fff; }
@media (max-width:600px){
  .mo-whatsapp-float{ width:50px; height:50px; font-size:1.4rem; bottom:1rem; inset-inline-end:1rem; }
}

.mo-whatsapp-order{
  width:100%; margin-top:.75rem;
  border-color:#25D366; color:#128C4A;
}
.mo-whatsapp-order i{ color:#25D366; }
.mo-whatsapp-order:hover{ border-color:#128C4A; background:rgba(37,211,102,.08); }

/* ---- Language switcher (header) ---------------------------------------- */
.mo-langswitch{ display:flex; align-items:center; gap:.25rem; margin-inline-end:.25rem; }
.mo-langswitch__item{
  font-family:var(--font-display); font-weight:700; letter-spacing:.03em;
  font-size:.78rem; padding:.4rem .55rem; border-radius:var(--r-pill,999px);
  color:var(--ctx-fg,var(--fg)); opacity:.65;
  transition:opacity var(--dur,.2s) var(--ease,ease), background var(--dur,.2s) var(--ease,ease), color var(--dur,.2s) var(--ease,ease);
}
.mo-langswitch__item:hover{ opacity:1; }
.mo-langswitch__item.is-active{ opacity:1; background:var(--lime); color:var(--on-lime); }
@media (max-width:900px){ .mo-langswitch{ display:none; } }

/* =========================================================================
   MO — July polish: product brand chip, promo banner, sale rhythm
   ========================================================================= */

/* Brand shown as a LABEL/TAG — full size on the product page, compact on cards. */
.mo-brandtag{
  display:inline-flex; align-items:center; gap:.55em;
  width:fit-content; max-width:100%;
  padding:.5em .95em;
  border:1.5px solid var(--border);
  border-radius:var(--r-pill,999px);
  background:var(--paper-2);
  color:var(--ink);
  text-decoration:none;
  line-height:1;
  transition:border-color var(--dur,.2s) var(--ease,ease), color var(--dur,.2s) var(--ease,ease), background var(--dur,.2s) var(--ease,ease);
}
.mo-brandtag > i{ color:var(--lime-600); font-size:1.15em; flex:0 0 auto; }
.mo-brandtag__eyebrow{
  font-family:var(--font-body); font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; font-size:.6rem; color:var(--fg-muted);
}
.mo-brandtag__name{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; font-size:1.02rem; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
a.mo-brandtag:hover{ border-color:var(--ink); }
a.mo-brandtag:hover .mo-brandtag__name{ color:var(--ink); }

/* Dark-section variant */
.mo-dark .mo-brandtag{ background:rgba(244,245,239,.06); border-color:var(--border-dark); color:var(--on-ink); }
.mo-dark .mo-brandtag > i{ color:var(--lime); }
.mo-dark .mo-brandtag__name{ color:var(--on-ink); }
.mo-dark .mo-brandtag__eyebrow{ color:var(--on-ink-muted); }

/* Compact variant on product cards (eyebrow hidden, tighter) */
.mo-brandtag--sm{ align-self:flex-start; gap:.35em; padding:.3em .62em; margin-bottom:.2rem; }
.mo-brandtag--sm .mo-brandtag__eyebrow{ display:none; }
.mo-brandtag--sm .mo-brandtag__name{ font-size:.68rem; letter-spacing:.05em; }
.mo-brandtag--sm > i{ font-size:.95em; }

/* Product-page label sits above the title; drop the duplicate brand in the meta footer. */
.summary .mo-brandtag,.entry-summary .mo-brandtag{ margin:0 0 1rem; }
.product_meta .posted_in:has(a[href*="/brand/"]){ display:none; }

/* =========================================================================
   SHOP BY CATEGORY — horizontally scrollable premium cards
   Full cards in a swipeable row that scales to any number of categories.
   Snap per card; native touch swipe on mobile, mouse drag-to-scroll on desktop.
   ========================================================================= */
.mo-cats__track{
  display:flex;
  gap:clamp(.6rem,1.5vw,1rem);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-block:.6rem;                 /* room for the hover lift + shadow */
  cursor:grab;
}
.mo-cats__track::-webkit-scrollbar{ display:none; }
.mo-cats__track.is-dragging{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }
/* Stays a carousel at every width. Wrapping it so all six showed at once left
   a half-empty second row, and the swipe reads better than the gap. */
.mo-cats__track.is-dragging .mo-cat-card{ pointer-events:none; }

.mo-cat-card{
  position:relative;
  flex:0 0 80%;
  max-width:340px;
  height:clamp(410px,112vw,460px);
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:clamp(1rem,1.5vw,1.35rem);
  border-radius:clamp(18px,2vw,26px);
  overflow:hidden;
  isolation:isolate;
  text-decoration:none;
  color:var(--on-ink,#F4F5EF);
  background:var(--ink,#0B0F0A);
  box-shadow:0 12px 32px -18px rgba(11,15,10,.55);
  transition:transform var(--dur,.25s) var(--ease,ease), box-shadow var(--dur,.25s) var(--ease,ease);
}
@media (min-width:560px){
  .mo-cat-card{ flex-basis:44%; max-width:none; height:440px; }
}
@media (min-width:900px){
  /* exactly four across the container; any extras scroll */
  .mo-cat-card{ flex-basis:calc((100% - 3 * clamp(.6rem,1.5vw,1rem)) / 4); height:clamp(400px,40vw,470px); }
}
@media (hover:hover){
  .mo-cat-card:hover{ transform:translateY(-6px); box-shadow:0 26px 48px -22px rgba(11,15,10,.7); }
}
.mo-cat-card:focus-visible{ outline:3px solid var(--lime); outline-offset:3px; }

.mo-cat-card__bg{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  transition:transform var(--dur-2,.5s) var(--ease,ease);
}
@media (hover:hover){
  .mo-cat-card:hover .mo-cat-card__bg{ transform:scale(1.06); }
}
.mo-cat-card__scrim{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(11,15,10,.20) 0%, rgba(11,15,10,0) 28%, rgba(11,15,10,.55) 70%, rgba(11,15,10,.92) 100%);
}

/* top row: frosted badge (left) + circular arrow (right) */
.mo-cat-card__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; }
.mo-cat-card__badge{
  display:inline-block;
  padding:.4rem .7rem;
  font-family:var(--font-body); font-weight:600; font-size:.66rem;
  text-transform:uppercase; letter-spacing:.1em; line-height:1.1; white-space:nowrap;
  color:var(--on-ink,#F4F5EF);
  background:rgba(244,245,239,.14); border:1px solid rgba(244,245,239,.28);
  border-radius:var(--r-pill,999px);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.mo-cat-card__arrow{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; font-size:1.05rem;
  color:var(--on-ink,#F4F5EF);
  background:rgba(244,245,239,.14); border:1px solid rgba(244,245,239,.28);
  border-radius:50%;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background var(--dur,.25s) var(--ease,ease), color var(--dur,.25s) var(--ease,ease), transform var(--dur,.25s) var(--ease,ease);
}
@media (hover:hover){
  .mo-cat-card:hover .mo-cat-card__arrow{ background:var(--lime); color:var(--on-lime,#0B0F0A); transform:rotate(45deg); }
}

/* bottom: title, description, CTA pill */
.mo-cat-card__body{ display:flex; flex-direction:column; align-items:flex-start; gap:.4rem; }
.mo-cat-card__name{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  line-height:.95; letter-spacing:-.01em;
  font-size:clamp(1.5rem,2.4vw,2rem);
}
.mo-cat-card__desc{
  font-size:.86rem; line-height:1.4; color:var(--on-ink-muted,#A7AE99); max-width:26ch;
}
.mo-cat-card__cta{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:.6rem;
  padding:.55rem .95rem;
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; font-size:.8rem;
  color:var(--on-ink,#F4F5EF);
  background:rgba(244,245,239,.12); border:1px solid rgba(244,245,239,.28);
  border-radius:var(--r-pill,999px);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background var(--dur,.25s) var(--ease,ease), color var(--dur,.25s) var(--ease,ease), border-color var(--dur,.25s) var(--ease,ease);
}
.mo-cat-card__cta i{ transition:transform var(--dur,.25s) var(--ease,ease); }
@media (hover:hover){
  .mo-cat-card:hover .mo-cat-card__cta{ background:var(--lime); color:var(--on-lime,#0B0F0A); border-color:var(--lime); }
  .mo-cat-card:hover .mo-cat-card__cta i{ transform:translateX(3px); }
}

/* Touch: the same treatment, on tap.
   Every rule above is behind (hover:hover) — correctly, since a sticky :hover
   left on a card after tapping is worse than none — so a phone saw no state at
   all. `.is-active` is set by the first tap (see main.js) and produces exactly
   what a mouse gets, with the second tap following the link. */
@media (hover:none){
  .mo-cat-card.is-active{ transform:translateY(-6px); box-shadow:0 26px 48px -22px rgba(11,15,10,.7); }
  .mo-cat-card.is-active .mo-cat-card__bg{ transform:scale(1.06); }
  .mo-cat-card.is-active .mo-cat-card__arrow{ background:var(--lime); color:var(--on-lime,#0B0F0A); transform:rotate(45deg); }
  .mo-cat-card.is-active .mo-cat-card__cta{ background:var(--lime); color:var(--on-lime,#0B0F0A); border-color:var(--lime); }
  .mo-cat-card.is-active .mo-cat-card__cta i{ transform:translateX(3px); }
}
@media (prefers-reduced-motion:reduce){
  .mo-cat-card.is-active,.mo-cat-card.is-active .mo-cat-card__bg,
  .mo-cat-card.is-active .mo-cat-card__arrow{ transform:none; }
}

@media (prefers-reduced-motion:reduce){
  .mo-cat-card, .mo-cat-card__bg, .mo-cat-card__arrow, .mo-cat-card__cta, .mo-cat-card__cta i{ transition:none; }
  .mo-cats__track{ scroll-behavior:auto; }
}
/* On-sale badge tint on the price for the deals row. */
.mo-sale-row .mo-pcard__body .mo-price ins{ color:var(--sale,#FF3B30); text-decoration:none; }

/* =========================================================================
   MO — brand logo carousel, mobile header + footer polish
   ========================================================================= */

/* Trusted-brands: full-bleed auto-scrolling logo cards. */
.mo-brandmarquee{
  margin-top:clamp(1.75rem,4vw,3rem);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.mo-brandmarquee__track{ display:flex; width:max-content; animation:moBrandScroll 45s linear infinite; }
.mo-brandmarquee:hover .mo-brandmarquee__track{ animation-play-state:paused; }
.mo-brandmarquee__group{ display:flex; gap:clamp(1rem,2vw,1.75rem); padding-inline:clamp(.5rem,1vw,.875rem); }
/* scroll toward the right, seamless (two identical groups) */
@keyframes moBrandScroll{ from{ transform:translateX(-50%);} to{ transform:translateX(0);} }
.mo-brandcard{
  flex:0 0 auto;
  width:clamp(150px,19vw,196px);
  height:clamp(88px,11vw,112px);
  display:flex; align-items:center; justify-content:center;
  padding:1.1rem 1.4rem;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-lg,18px);
  box-shadow:0 8px 24px rgba(11,15,10,.07);
}
.mo-brandcard img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.mo-brandcard__wm{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  letter-spacing:.01em; line-height:.95; text-align:center;
  font-size:clamp(1.05rem,1.5vw,1.35rem); color:var(--ink);
}
@media (prefers-reduced-motion:reduce){ .mo-brandmarquee__track{ animation:none; } }

/* Mobile: search now lives in the menu, so drop the header search + tel icons
   (tel is still reachable in the menu footer) — keeps the trigger uncramped. */
@media (max-width:991.98px){
  .mo-header .mo-header__search-mobile,
  .mo-header .mo-header__tel{ display:none !important; }
  /* logo stays left; cart + menu trigger pushed to the right (the desktop
     search bar that normally separated them is hidden on mobile). */
  .mo-header__actions{ margin-left:auto; }
  /* The logo was flex:0 0 auto at its natural 217px, and the actions cannot
     shrink past their buttons — together they overran a 390px phone and the
     menu trigger was clipped off the right edge. Let the logo give way. */
  .mo-header__row1 .mo-logo{ flex:0 1 auto; min-width:0; max-width:42vw; }
  /* The desktop rule pins the mark to height:44px/width:auto/max-width:none
     with !important, so it kept its natural 217px and spilled under the
     account chip. Scale by width here instead; aspect ratio is preserved. */
  .mo-header .mo-logo img,
  .mo-header .mo-logo__dark,
  .mo-header .mo-logo__light{ height:auto !important; width:auto !important; max-width:100% !important; }
  .mo-header__actions{ flex:0 0 auto; min-width:0; }
  /* Match the 44px hit area the other header buttons already have. */
  .mo-header .mo-account__trigger{ width:44px; height:44px; }
}

/* =========================================================================
   Layered hero scene — black bg + volcanic rock, product cluster, foreground
   ========================================================================= */
.mo-hero--scene .mo-hero__bg{ background-position:center center; }
.mo-hero__products,
.mo-hero__fg{
  position:absolute; inset:0;
  width:100%; height:100%;            /* <img> needs explicit size; inset alone won't stretch it */
  object-fit:cover; object-position:center center;
  pointer-events:none; will-change:transform;
}
.mo-hero--scene .mo-hero__glow{ z-index:1; }        /* lime aura behind the products */
.mo-hero__products{ z-index:2; animation:moHeroFloatA 9s ease-in-out infinite; }
.mo-hero__fg{ z-index:3; animation:moHeroFloatB 12.5s ease-in-out infinite; }
.mo-hero--scene .mo-hero__scrim{ z-index:4; }
.mo-hero--scene .mo-hero__grid{ z-index:4; }
.mo-hero--scene .mo-hero__inner{ z-index:5; }
/* the slight scale() is the float's safety margin — no horizontal overscan box,
   so the product cluster's right edge never gets clipped. */
@keyframes moHeroFloatA{ 0%,100%{ transform:translateY(-.9%) scale(1.03);} 50%{ transform:translateY(.9%) scale(1.03);} }
@keyframes moHeroFloatB{ 0%,100%{ transform:translateY(.8%) scale(1.03);} 50%{ transform:translateY(-.8%) scale(1.03);} }
@media (prefers-reduced-motion:reduce){ .mo-hero__products,.mo-hero__fg{ animation:none; } }

/* Desktop: dark on the left for the copy, clear on the right so the cluster reads.
   Crop bias 82% — when the hero is narrower than the image, the cover-crop eats
   the empty left side of the composition, never the product cluster on the right. */
@media (min-width:901px){
  .mo-hero--scene .mo-hero__bg{ background-position:82% 50%; }
  .mo-hero__products,.mo-hero__fg{ object-position:82% 50%; }
  .mo-hero--scene .mo-hero__scrim{
    background:
      linear-gradient(180deg, rgba(11,15,10,.10) 0%, rgba(11,15,10,.30) 68%, rgba(11,15,10,.72) 100%),
      linear-gradient(90deg, rgba(11,15,10,.94) 0%, rgba(11,15,10,.68) 30%, rgba(11,15,10,.12) 58%, rgba(11,15,10,0) 80%);
  }
}
/* Mobile: bias the cluster toward the lower-right behind the copy + stronger scrim. */
@media (max-width:900px){
  .mo-hero--scene .mo-hero__bg{ background-position:72% 40%; }
  .mo-hero__products,.mo-hero__fg{ object-position:82% 42%; }
  .mo-hero--scene .mo-hero__scrim{
    background:
      linear-gradient(180deg, rgba(11,15,10,.64) 0%, rgba(11,15,10,.42) 46%, rgba(11,15,10,.92) 100%),
      linear-gradient(90deg, rgba(11,15,10,.92) 0%, rgba(11,15,10,.58) 56%, rgba(11,15,10,.3) 100%);
  }
}

/* Mobile: centre the footer content. */
@media (max-width:768px){
  .mo-footer{ text-align:center; padding-top:1.5rem; }
  .mo-footer__brandrow{ display:flex; justify-content:center; }
  .mo-footer__grid{ justify-items:center; }
  .mo-footer__col{ align-items:center; display:flex; flex-direction:column; }
  .mo-footer__col ul,
  .mo-footer__links,
  .mo-footer__contact{ align-items:center; }
  .mo-footer__about p{ max-width:42ch; }
  .mo-footer__socials{ justify-content:center; }
  .mo-footer__bottom{ flex-direction:column; align-items:center; gap:.6rem; text-align:center; }
  /* Footer links sat at 26px — fine for a mouse, too tight for a thumb, and
     they are stacked so neighbours are easy to hit by mistake. */
  .mo-footer__col ul a,
  .mo-footer__links a,
  .mo-footer__contact a{ display:inline-flex; align-items:center; min-height:44px; }
}

/* =========================================================================
   Account — header profile icon, member chip + dropdown
   Guests: ghost person icon (matches tel/cart). Logged in: ink "member
   plate" with the user's initial; coaches get a lime status dot and a
   portal shortcut. Dropdown is pure CSS (hover/focus-within), desktop only.
   ======================================================================= */
.mo-account{ position:relative; display:inline-flex; }
.mo-account__trigger{ text-decoration:none; }
.mo-account__chip{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; margin-inline:.35rem; border-radius:10px;
  background:var(--ink); color:var(--lime);
  font-family:var(--font-display); font-weight:800; font-size:1.05rem; line-height:1; text-transform:uppercase;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mo-account__chip:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lime); color:var(--lime); }
body.home .mo-header:not(.is-scrolled) .mo-account__chip{ background:var(--lime); color:var(--on-lime); }
.mo-account__dot{
  position:absolute; top:-3px; right:-3px; width:11px; height:11px; border-radius:50%;
  background:var(--lime); border:2px solid var(--paper);
}
body.home .mo-header:not(.is-scrolled) .mo-account__dot{ background:#fff; border-color:var(--ink); }
.mo-account__menu{
  position:absolute; top:calc(100% + 10px); right:0; min-width:232px; z-index:60;
  background:var(--ink); border-radius:12px; box-shadow:var(--shadow-lg); padding:.5rem;
  opacity:0; transform:translateY(4px); pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
/* Hover bridge so the pointer can cross the gap without closing the menu. */
.mo-account__menu::before{ content:""; position:absolute; top:-10px; right:0; left:0; height:10px; }
.mo-account:hover .mo-account__menu,
.mo-account:focus-within .mo-account__menu{ opacity:1; transform:none; pointer-events:auto; }
.mo-account__hi{
  margin:0; padding:.55rem .85rem .35rem; color:var(--on-ink-muted);
  font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}
.mo-account__menu a{
  display:flex; align-items:center; gap:.6rem; padding:.6rem .85rem; border-radius:8px;
  color:var(--on-ink); font-family:var(--font-display); font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; font-size:.95rem; text-decoration:none;
}
.mo-account__menu a i{ color:var(--on-ink-muted); font-size:1rem; }
.mo-account__menu a:hover,
.mo-account__menu a:focus-visible{ background:var(--ink-700); color:var(--lime); }
.mo-account__menu a:hover i,
.mo-account__menu a:focus-visible i{ color:var(--lime); }
.mo-account__menu a.mo-account__coach{ color:var(--lime); }
.mo-account__sep{ height:1px; margin:.35rem .5rem; background:var(--border-dark); }
@media (max-width:991px){
  .mo-account__menu{ display:none; } /* hover-less: the icon is a direct link; the overlay menu carries the rest */
}
@media (prefers-reduced-motion:reduce){
  .mo-account__chip,.mo-account__menu{ transition:none; }
  .mo-account__chip:hover{ transform:none; }
}

/* =========================================================================
   WordPress admin bar compensation
   The header and the mobile overlay are position:fixed, so they anchor to
   the viewport and ignore the `html{margin-top:32px}` WordPress adds for
   logged-in users — leaving them tucked underneath the admin bar. Offset
   them by the admin bar's height. Below 600px WP switches the bar to
   position:absolute (it scrolls away), so the offset is dropped there.
   ======================================================================= */
body.admin-bar .mo-header{ top:32px; }
body.admin-bar .mo-menu{ top:32px; }
@media screen and (max-width:782px){
  body.admin-bar .mo-header{ top:46px; }
  body.admin-bar .mo-menu{ top:46px; }
}
@media screen and (max-width:600px){
  body.admin-bar .mo-header{ top:0; }
  body.admin-bar .mo-menu{ top:0; }
}

.mo-otp__back{ margin-top:.9rem; font-size:.9rem; }
.mo-otp__back a{ color:var(--fg-muted); text-decoration:none; display:inline-flex; align-items:center; gap:.35rem; }
.mo-otp__back a:hover{ color:var(--fg); text-decoration:underline; }

/* =========================================================================
   THE WOMEN'S EDIT
   A product TAG, not a category — so the tint has to ride on the card itself
   rather than on any one grid. These rules sit last in the file on purpose:
   the card's own media-well background is set earlier, and a tint that only
   won by !important would be the third time this stylesheet fought itself.
   ======================================================================= */
:root{
  /* Deliberately weak. Anything stronger than this reads as a sale badge. */
  --women-wash:#FDF6F9;
  --women-line:#F2DFE7;
  --women-chip:#C9739A;
}

/* The wash lands on the media well, the card's only opaque surface. The photo
   multiplies over it, so its white background picks the tint up too and the
   whole cell warms very slightly — with no border-radius seam to hide. */
.mo-pcard--women .mo-pcard__media{
  background:var(--women-wash);
  border-color:var(--women-line);
}
.mo-dark .mo-pcard--women .mo-pcard__media{ background:var(--women-wash); border-color:var(--women-line); }
.mo-pcard--women .mo-brandtag{ color:var(--women-chip); }

/* =========================================================================
   "YOUR COACH JUST UPDATED YOUR PROGRAMME"
   Sits above the plan it is about to replace. Lime, not red: this is good
   news, and the page is about to act on it by itself.
   ======================================================================= */
.mo-live{
  display:flex;
  align-items:center;
  gap:.7rem;
  flex-wrap:wrap;
  margin:0 0 1.25rem;
  padding:.85rem 1.1rem;
  border-radius:var(--r-lg,18px);
  background:var(--lime-200);
  border:1px solid var(--lime-600);
  color:var(--ink);
  font-weight:600;
}
.mo-live[hidden]{ display:none; }
.mo-live i{ font-size:1.05rem; animation:mo-spin 1.4s linear infinite; }
.mo-live__text{ flex:1 1 auto; }
.mo-live__btn{
  flex:0 0 auto;
  border:0;
  cursor:pointer;
  border-radius:999px;
  padding:.45rem 1rem;
  background:var(--ink);
  color:var(--on-ink);
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:.78rem;
}
.mo-live__btn:hover{ background:var(--ink-700); }
@media (prefers-reduced-motion:reduce){ .mo-live i{ animation:none; } }

/* =========================================================================
   PASSWORD STRENGTH METER
   Four steps, not a percentage: the rule is "long enough" or "long-ish with
   a mix", and a smooth bar would imply a precision the policy does not have.
   ======================================================================= */
.mo-pwmeter{
  display:block;
  height:4px;
  margin-top:.45rem;
  border-radius:999px;
  background:var(--border);
  overflow:hidden;
}
.mo-pwmeter__bar{
  display:block;
  height:100%;
  width:0;
  border-radius:999px;
  background:var(--sale);
  transition:width var(--dur-2,.35s) var(--ease,ease), background-color var(--dur-2,.35s) var(--ease,ease);
}
.mo-pwmeter__bar.is-1{ width:25%; background:var(--sale); }
.mo-pwmeter__bar.is-2{ width:50%; background:#E0A100; }
.mo-pwmeter__bar.is-3{ width:75%; background:var(--lime-600); }
.mo-pwmeter__bar.is-4{ width:100%; background:var(--lime-600); }
@media (prefers-reduced-motion:reduce){ .mo-pwmeter__bar{ transition:none; } }

/* --- the strip ----------------------------------------------------------
   A real scroller. It drifts on its own (main.js nudges scrollLeft), but it
   is the same axis a finger, a trackpad, a drag or the arrows move — so the
   visitor is never fighting an animation for control of the row. */
.mo-women{ overflow:hidden; }
.mo-womenwrap{ position:relative; }
.mo-womenmarquee{
  margin-top:clamp(1.5rem,3.5vw,2.5rem);
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.mo-womenmarquee::-webkit-scrollbar{ display:none; }
.mo-womenmarquee:focus-visible{ outline:3px solid var(--lime); outline-offset:4px; }
.mo-womenmarquee.is-dragging{ cursor:grabbing; }
/* Same reason as the category rail: a card under a drag must not swallow the
   pointer, or the drag turns into a navigation. */
.mo-womenmarquee.is-dragging .mo-pcard{ pointer-events:none; }
.mo-womenmarquee__track{ display:flex; width:max-content; }
.mo-womenmarquee__group{
  display:flex;
  gap:clamp(.9rem,2vw,1.5rem);
  padding-inline:clamp(.45rem,1vw,.75rem);
}
.mo-womenmarquee__card{
  flex:0 0 auto;
  width:clamp(180px,22vw,236px);
}

/* Arrows — the obvious way to move the row with a plain mouse. Hidden where a
   thumb already does the job. */
.mo-womennav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  display:none;
  align-items:center; justify-content:center;
  width:44px; height:44px;
  border:1px solid var(--border);
  border-radius:50%;
  background:#fff;
  color:var(--ink);
  cursor:pointer;
  box-shadow:0 10px 26px -12px rgba(11,15,10,.45);
  transition:background var(--dur,.2s) var(--ease,ease), color var(--dur,.2s) var(--ease,ease);
}
.mo-womennav:hover{ background:var(--lime); color:var(--on-lime); border-color:var(--lime); }
.mo-womennav:focus-visible{ outline:3px solid var(--lime); outline-offset:3px; }
.mo-womennav--prev{ left:clamp(.5rem,2vw,1.5rem); }
.mo-womennav--next{ right:clamp(.5rem,2vw,1.5rem); }
@media (hover:hover) and (min-width:768px){
  .mo-womennav{ display:flex; }
}
@media (prefers-reduced-motion:reduce){
  .mo-womennav{ transition:none; }
}