/* ══════════════════════════════════════════════════════════════
   EMBRYO — MOBILE (≤760px)
   A phone-first pass over the whole site. Desktop rules are untouched:
   everything here lives inside the media query and loads last.

   Three ideas run through it:
   • Rows of three become swipeable rails, not endless stacks — the
     homepage was ~10,800px tall on a 390px screen.
   • Hover was the main way things came alive, and a finger has no
     hover: the card in the middle of a rail animates instead, and
     everything tappable answers a press.
   • The brand's stitching, patches and fabric stay — sized for a
     phone rather than shrunk desktop furniture.
   ══════════════════════════════════════════════════════════════ */


/* If a phone-width page is later widened (rotation, a resized window),
   the pieces mobile.js added would otherwise linger over the desktop
   layout. Nothing here runs on a phone. */
@media (min-width:761px){
  .m-dots,.m-hint,.m-buybar{display:none}
  .m-rise{opacity:1;transform:none}
  /* phone-only pieces: the extra logo buttons, the badge's text ring,
     the pulley line (mobile.js adds it) */
  .nav-button-g,.nav-button-h,.vs-mid-ring,.why-cord,.why-pulley,.why-note,.why-tags .is-clone,.trust-grid .is-clone{display:none}
}
/* The drawer exists from 1400px down (that's where the hamburger takes
   over), so its new brand header and action footer are styled across
   that whole range rather than only on phones. */
@media (max-width:1400px){
  .mobile-nav{padding:0;display:flex;flex-direction:column}
  .mnav-top{
    display:flex;align-items:center;gap:12px;padding:76px 22px 18px;
    background-color:#CDBE7E;
    background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1.2px),linear-gradient(90deg,rgba(74,58,36,.05) 50%,transparent 50%);
    background-size:4px 4px,6px 6px;
  }
  .mnav-patch{
    position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
    background:var(--paper);border:2px dashed var(--sage-deep);outline:2px solid var(--paper);outline-offset:2px;
    box-shadow:2px 3px 7px rgba(74,58,36,.3);
  }
  .mnav-mark{width:30px;height:30px;object-fit:contain}
  .mnav-brand b{display:block;font-family:var(--display);font-size:19px;font-weight:700;color:var(--sage-deep);line-height:1.1}
  .mnav-brand span{font-size:11.5px;color:var(--ink-2)}
  .mobile-list{padding:8px 22px}
  .mnav-foot{margin-top:auto;padding:18px 22px calc(22px + env(safe-area-inset-bottom));background:var(--paper-2)}
  .mnav-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .mnav-act{
    display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 10px;border-radius:16px;
    font-family:var(--display);font-weight:700;font-size:14px;color:var(--sage-deep);background:var(--paper);
    box-shadow:inset 0 0 0 1.5px var(--sage-soft);transition:transform .25s var(--ease);
  }
  .mnav-act svg{width:19px;height:19px}
  .mnav-count{
    display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:99px;
    font-family:var(--mono);font-size:10px;color:#fff;background:var(--clay);
  }
  .mnav-note{display:flex;justify-content:center;gap:8px;margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
  .mnav-note span + span::before{content:'·';margin-right:8px}
}

@media (max-width:760px){

  /* ─────────── shared rail + dots ─────────── */
  .m-rail{
    display:flex;gap:16px;max-width:none;margin:0 calc(var(--pad) * -1);
    padding:0 var(--pad);overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .m-rail::-webkit-scrollbar{display:none}
  .m-rail > *{scroll-snap-align:center;scroll-snap-stop:always}

  .m-dots{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:20px}
  .m-dot{
    width:7px;height:7px;padding:0;border:0;border-radius:99px;background:rgba(74,58,36,.22);
    transition:width .32s var(--ease),background .32s var(--ease);
  }
  .m-dot.is-on{width:24px;background:var(--sage-deep)}
  .guide-sec .m-dot{background:rgba(255,248,239,.28)}
  .guide-sec .m-dot.is-on{background:#F3C878}

  /* a one-time nudge that this rail moves, gone after the first swipe */
  .m-hint{
    display:flex;align-items:center;justify-content:center;gap:7px;margin-top:14px;
    font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
    transition:opacity .4s var(--ease);
  }
  .m-hint.is-off{opacity:0}
  .guide-sec .m-hint{color:var(--on-dark-2)}
  .m-hint svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;animation:mHint 1.8s var(--ease) infinite}
  @keyframes mHint{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}

  /* ─────────── press feedback, since nothing can hover ─────────── */
  .btn,.gs-btn,.combo-add,.pop-add,.vs-cta,.why-tag,.popular-all,.nav-cart,.nav-toggle,
  .trust-item,.gp-turn,.fp-end a,.m-buybar-btn,.mnav-act,.combo,.pop-arch{
    -webkit-tap-highlight-color:transparent;
  }
  .btn:active,.gs-btn:active,.combo-add:active,.popular-all:active,.fp-end a:active,
  .m-buybar-btn:active,.mnav-act:active,.gp-turn:active{transform:scale(.96)}
  .pop-add:active{transform:scale(.9)}
  .why-tag:active .why-body,.combo:active .combo-box,.trust-item:active{transform:scale(.985)}
  .vs-side:active .vs-kid-wrap{transform:translateX(-50%) scale(.96)}
  .woocommerce ul.products li.product:active{transform:scale(.985)}

  /* hover states were written for a cursor: neutralise them so a tap
     doesn't leave a card stuck in its hovered pose */
  .combo:hover .combo-lid,.combo:focus-within .combo-lid{transform:none}
  .combo:hover .combo-box{box-shadow:0 18px 30px -22px rgba(74,58,36,.5)}
  .combo:hover .combo-media img,.pop:hover .pop-frame img{transform:none}
  .pop:hover .pop-rank{color:transparent}
  .why-tag:hover .why-body{transform:none}
  .why-tag:hover .why-ico{transform:none}
  .woocommerce ul.products li.product:hover{transform:none;box-shadow:none}

  /* ─────────── header ───────────
     Menu on the left (the drawer slides in from that side), cart on the
     right, the logo patch dead centre with two sewn buttons either side
     of it — each pair clear of the controls beside it. The two controls
     are sewn patches themselves, in the logo's own stitching. */
  .site-nav{padding:0 12px}
  .nav-inner{height:66px;grid-template-columns:auto minmax(0,1fr) auto;column-gap:0}
  .nav-actions{display:contents}
  .nav-toggle{grid-column:1;grid-row:1;justify-self:start}
  .nav-cart{grid-column:3;grid-row:1;justify-self:end}
  .brand{grid-column:2;gap:7px;padding:5px 13px 5px 6px;border-width:1.5px}
  .brand-mark{width:27px;height:27px}
  .brand-word{font-size:16px}

  .nav-button-a,.nav-button-f,.nav-button-e{display:none}
  .nav-button{width:19px;height:19px;margin-top:-9.5px}
  .nav-button-b{right:calc(100% + 9px)}
  .nav-button-g{display:block;right:calc(100% + 34px)}
  .nav-button-c{left:calc(100% + 9px)}
  .nav-button-h{display:block;left:calc(100% + 34px)}

  .nav-cart,.nav-toggle{
    position:relative;width:38px;height:38px;border:0;border-radius:50%;
    background:var(--paper);color:var(--sage-deep);
    outline:2px solid rgba(255,248,239,.9);outline-offset:2px;
    box-shadow:3px 4px 9px rgba(74,58,36,.3),inset 0 0 0 1px rgba(74,58,36,.06);
    transition:transform .3s var(--ease);
  }
  /* the stitched ring, like the logo patch's trim */
  .nav-cart::before,.nav-toggle::before{
    content:'';position:absolute;inset:3px;border-radius:50%;border:1.4px dashed var(--sage-deep);opacity:.7;pointer-events:none;
  }
  .nav-cart:active,.nav-toggle:active{transform:scale(.92) rotate(-6deg)}
  .nav-cart svg{width:18px;height:18px}
  .nav-cart svg path{stroke-width:1.9}
  /* hamburger as three threads of different lengths */
  .nav-toggle{gap:4px;align-items:center}
  .nav-toggle span{width:15px;height:2px;border-radius:2px;background:var(--sage-deep)}
  .nav-toggle span:nth-child(2){width:10px;transform:translateX(-3px)}
  .nav-toggle span:nth-child(3){width:13px;transform:translateX(1px)}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){width:15px;transform:translateY(-6px) rotate(-45deg)}
  /* the count is a little clay tag stitched onto the patch */
  .cart-count{
    top:-4px;right:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:99px;
    font-size:9.5px;font-weight:600;border:2px solid var(--paper);box-shadow:0 3px 6px rgba(74,58,36,.3);
  }

  /* ─────────── mobile drawer ─────────── */
  .mobile-nav{width:min(340px,88vw);padding:0;display:flex;flex-direction:column}
  .mnav-top{
    display:flex;align-items:center;gap:12px;padding:76px 22px 18px;
    background-color:#CDBE7E;
    background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1.2px),linear-gradient(90deg,rgba(74,58,36,.05) 50%,transparent 50%);
    background-size:4px 4px,6px 6px;
  }
  .mnav-patch{
    position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
    background:var(--paper);border:2px dashed var(--sage-deep);outline:2px solid var(--paper);outline-offset:2px;
    box-shadow:2px 3px 7px rgba(74,58,36,.3);
  }
  .mnav-mark{width:30px;height:30px;object-fit:contain}
  .mnav-brand b{display:block;font-family:var(--display);font-size:19px;font-weight:700;color:var(--sage-deep);line-height:1.1}
  .mnav-brand span{font-size:11.5px;color:var(--ink-2)}

  .mobile-list{padding:8px 22px;gap:0}
  .mobile-list li{border-bottom:1.5px dashed var(--gold-line)}
  .mobile-list a{padding:15px 44px 15px 0;font-size:17px;font-weight:600}
  .mobile-list .sub-menu{padding-left:0;margin-inline-start:6px;border-inline-start:1.5px dashed var(--gold-line)}
  .mobile-list .sub-menu a{padding:12px 44px 12px 14px;font-size:14px}
  .mobile-caret-btn{width:44px;height:50px}

  .mnav-foot{margin-top:auto;padding:18px 22px calc(22px + env(safe-area-inset-bottom));background:var(--paper-2)}
  .mnav-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .mnav-act{
    display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 10px;border-radius:16px;
    font-family:var(--display);font-weight:700;font-size:14px;color:var(--sage-deep);background:var(--paper);
    box-shadow:inset 0 0 0 1.5px var(--sage-soft);transition:transform .25s var(--ease);
  }
  .mnav-act svg{width:19px;height:19px}
  .mnav-count{
    display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:99px;
    font-family:var(--mono);font-size:10px;color:#fff;background:var(--clay);
  }
  .mnav-note{display:flex;justify-content:center;gap:8px;margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
  .mnav-note span + span::before{content:'·';margin-right:8px}

  /* ─────────── hero ─────────── */
  .hero{min-height:0;padding:104px var(--pad) 42px;text-align:center}
  .hero-inner{display:flex;flex-direction:column;align-items:center}
  .hero-title{margin-bottom:0;font-size:37px;line-height:1.08;text-wrap:balance}
  .ht-toes{font-size:.76em;letter-spacing:.02em}
  .ht-steps{margin-left:.18em;gap:.1em}
  .ht-foot{width:.42em;height:.6em}
  .hero-title .ht-soft{font-size:.66em;margin-top:.24em}
  .ht-sprout{right:-.3em;top:-.34em;width:.54em;height:.54em}

  /* ─────────── hero: a pulley clothesline ───────────
     A real twisted rope runs edge to edge over two turning pulley wheels
     and slowly draws the shirts across the screen: one arrives as the
     last leaves, so it is plain there is more than one, each its own
     link. The rope's twist travels at the shirts' speed (--pull-shift
     over --pull-dur, set by mobile.js), so the line itself is what moves
     them. A touch holds the line still. */
  .why{margin-top:50px;width:100%}
  .why-title{font-size:25px;padding:8px 22px 7px}
  .why-line{margin:16px calc(var(--pad) * -1) 0;overflow-x:clip;overflow-y:visible;padding-bottom:8px}
  .why-line::before,.why-line::after,.why-rope{display:none}
  .why-cord{
    position:absolute;z-index:2;top:10px;left:0;right:0;height:8px;border-radius:4px;pointer-events:none;
    background:
      linear-gradient(180deg,rgba(255,244,222,.55) 0,rgba(255,244,222,0) 38%,rgba(0,0,0,0) 55%,rgba(58,40,18,.34) 100%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='8'%3E%3Crect width='9' height='8' fill='%23B38D58'/%3E%3Cpath d='M-4.5 8 4.5 0M4.5 8 13.5 0' stroke='%23D9BC8C' stroke-width='3.2'/%3E%3Cpath d='M-2.6 8 6.4 0M6.4 8 15.4 0' stroke='%23876538' stroke-width='1.1'/%3E%3C/svg%3E") 0 0/9px 8px repeat-x;
    box-shadow:0 3px 4px -1px rgba(74,58,36,.35);
    animation:whyCord var(--pull-dur,30s) linear infinite;
  }
  /* a second, slacker line underneath — the return side of the loop */
  .why-cord.is-back{top:26px;height:5px;opacity:.55;filter:saturate(.8);animation-direction:reverse;z-index:0}
  @keyframes whyCord{to{background-position:calc(var(--pull-shift,774px) * -1) 0,calc(var(--pull-shift,774px) * -1) 0}}

  .why-pulley{position:absolute;z-index:3;top:-6px;width:44px;height:44px;pointer-events:none;filter:drop-shadow(0 3px 4px rgba(74,58,36,.35))}
  .why-pulley.is-l{left:-20px}
  .why-pulley.is-r{right:-20px}
  .why-pulley svg{width:100%;height:100%;animation:whyWheel 3.4s linear infinite}
  @keyframes whyWheel{to{transform:rotate(-1turn)}}

  .why-tags{
    display:flex;grid-template-columns:none;gap:18px;width:max-content;margin:0;padding:0 0 4px 22px;
    animation:whyPull var(--pull-dur,30s) linear infinite;will-change:transform;
  }
  @keyframes whyPull{to{transform:translateX(calc(var(--pull-shift,774px) * -1))}}
  .why-line.is-held .why-tags,.why-line.is-held .why-cord,.why-line.is-held .why-pulley svg,
  .why-line.is-still .why-tags,.why-line.is-still .why-cord,.why-line.is-still .why-pulley svg{animation-play-state:paused}
  .why-item{flex:0 0 240px;--sag:14px}
  .why-item::before{display:none}
  .why-tag{padding-top:calc(var(--sag) + 34px)}
  .why-card{height:282px;padding:62px 50px 18px}
  .why-ico{width:46px;height:46px;margin-bottom:8px}
  .why-name{font-size:17px;margin-bottom:6px}
  .why-text{font-size:12.5px;line-height:1.5}
  .why-go{margin-top:9px;font-size:13px}
  .why-pin{width:17px;height:40px;margin-left:-8.5px;top:calc(var(--sag) - 12px);z-index:4}
  .why-twine{top:calc(var(--sag) + 22px);height:40px}
  @keyframes whySway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
  .why-note{
    display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;
    font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  }
  .why-note svg{width:16px;height:16px}

  /* ─────────── for a girl / for a boy ─────────── */
  .vs{height:min(76vh,540px);min-height:460px;margin-top:64px}
  /* back to the side-by-side select screen — the stacked version buried
     the second choice below the fold */
  .vs-girl{clip-path:polygon(0 0,58% 0,42% 100%,0 100%)}
  .vs-boy{clip-path:polygon(58% 0,100% 0,100% 100%,42% 100%)}
  .vs-slash{clip-path:polygon(calc(58% - 3px) 0,calc(58% + 3px) 0,calc(42% + 3px) 100%,calc(42% - 3px) 100%)}
  /* these all need the two-class form: the stacked-layout rules they
     replace are written that way, and a single class would lose to them
     no matter which file loads later */
  .vs-copy,.vs-girl .vs-copy,.vs-boy .vs-copy{top:24px;bottom:auto;max-width:47%;padding:0}
  .vs-girl .vs-copy{left:15px;right:auto}
  .vs-boy .vs-copy{right:15px;left:auto}
  .vs-label{margin-bottom:6px;font-size:9px;letter-spacing:.18em}
  .vs-name{font-size:25px;line-height:1.05}
  .vs-cta{margin-top:12px;padding:9px 14px;font-size:12px;gap:5px}
  .vs-cta svg{width:13px;height:13px}
  .vs-girl .vs-kid-wrap,.vs-boy .vs-kid-wrap,
  .vs-side:hover .vs-kid-wrap{width:39%;top:auto;bottom:6px;transform:translateX(-50%)}
  .vs-girl .vs-kid-wrap{left:22%;right:auto}
  .vs-boy .vs-kid-wrap{left:78%;right:auto}
  .vs-word,.vs-girl .vs-word,.vs-boy .vs-word{font-size:76px;top:44%;bottom:auto;transform:translateY(-50%)}
  .vs-girl .vs-word{left:-8px;right:auto}
  .vs-boy .vs-word{right:-8px;left:auto}
  .vs-spark-1,.vs-spark-3{width:22px;height:22px}
  .vs-burst{display:none}
  /* the unisex badge: a round sewn button right on the seam, between the
     two characters' heads, ringed by slowly turning text */
  .vs-mid{
    left:50%;top:41%;width:138px;height:138px;margin:-69px 0 0 -69px;padding:0;border-radius:50%;
    flex-direction:column;align-items:center;justify-content:center;gap:1px;text-align:center;
    box-shadow:0 14px 28px rgba(0,0,0,.42),0 0 0 7px rgba(255,248,239,.18);
    animation:vsMidPulse 3.2s var(--ease) infinite;
  }
  @keyframes vsMidPulse{0%,100%{box-shadow:0 14px 28px rgba(0,0,0,.42),0 0 0 7px rgba(255,248,239,.18)}50%{box-shadow:0 14px 28px rgba(0,0,0,.42),0 0 0 13px rgba(255,248,239,.06)}}
  .vs-mid::before{inset:27px;border-radius:50%}
  .vs-mid:active{transform:scale(.94)}
  .vs-mid-ring{display:block;position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);animation:vsSpin 22s linear infinite;pointer-events:none}
  .vs-mid-ring text{font-family:var(--mono);font-size:8.2px;font-weight:600;letter-spacing:.06em;fill:var(--sage-deep)}
  .vs-mid-ico{position:relative;width:24px;height:24px;margin:0 0 1px}
  .vs-mid-top{position:relative;max-width:78px;font-size:12px;line-height:1.08}
  .vs-q{display:block;font-size:10px;letter-spacing:.04em}
  .vs-mid-sub,.vs-mid-go{display:none}

  /* ─────────── combo deals ─────────── */
  .combos{padding:66px 0 58px}
  .combos-head{margin-bottom:26px;padding:0 var(--pad)}
  .patch-title{font-size:25px;padding:8px 22px 7px}
  .combos-sub{margin-top:12px;font-size:13.5px}
  /* the section already runs edge to edge, so the rail keeps its own
     side padding and needs no negative margin to bleed */
  .combo-grid{
    display:flex;grid-template-columns:none;max-width:none;gap:16px;margin:0;
    padding:30px var(--pad) 8px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .combo-grid::-webkit-scrollbar{display:none}
  .combo{flex:0 0 64%;scroll-snap-align:center;scroll-snap-stop:always;padding-top:20px;transition:transform .3s var(--ease)}
  /* whichever box is centred in the rail opens itself — the phone's
     answer to the desktop hover */
  .combo.is-near .combo-lid{transform:translateY(-13px) rotate(-3deg)}
  .combo.is-near .combo-glow,.combo.is-near .combo-spark{opacity:1}
  .combo.is-near .combo-spark-1{transform:translate(-6px,-26px) rotate(-20deg)}
  .combo.is-near .combo-spark-2{transform:translateY(-38px)}
  .combo.is-near .combo-spark-3{transform:translate(6px,-24px) rotate(20deg)}
  .combo.is-near .combo-box{box-shadow:0 22px 34px -18px rgba(74,58,36,.5)}
  /* a gift box that fits a hand: two thirds of the screen, the next
     one peeking in, no taller than about half a screen */
  .combo{padding-top:16px}
  .combo-bow{width:58px;height:34px;top:-19px;margin-left:-29px}
  .combo-lid{padding:9px 12px}
  .combo-tag{font-size:9px}
  .combo-box{border-radius:0 0 18px 18px}
  .combo-inner{padding:9px 9px 12px}
  .combo-media{aspect-ratio:4/3}
  .combo-seal{width:48px;height:48px;font-size:7px;line-height:1.2}
  .combo-body{padding:10px 3px 0}
  .combo-name{font-size:15px;line-height:1.2}
  .combo-text{
    margin-top:4px;min-height:0;font-size:12px;line-height:1.45;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .combo-foot{margin-top:10px;gap:8px}
  .combo-price{font-size:15px}
  .combo-add{padding:8px 12px;font-size:12px}
  .combo-media-soon svg{width:48px;height:48px}

  /* ─────────── most popular ─────────── */
  .popular{padding:64px 0 74px}
  .popular::before{display:none}
  .popular-head{
    flex-direction:column;align-items:center;text-align:center;gap:16px;
    margin-bottom:22px;padding:0 var(--pad);
  }
  .popular-kicker{margin-bottom:8px}
  .popular-title{font-size:36px}
  .popular-all{padding:11px 20px;font-size:13.5px}
  .popular-grid{
    display:flex;grid-template-columns:none;max-width:none;gap:16px;margin:0;
    padding:6px var(--pad) 10px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .popular-grid::-webkit-scrollbar{display:none}
  .pop{flex:0 0 54%;scroll-snap-align:center;scroll-snap-stop:always}
  .pop-2{transform:none}
  .pop-frame{aspect-ratio:4/5;border-radius:999px 999px 20px 20px}
  .pop-frame::after{inset:9px;border-radius:999px 999px 16px 16px}
  /* the big outlined numeral hung off the frame and forced a wide text
     indent; on a phone it rides the frame as a stitched chip instead */
  .pop-rank{
    left:14px;bottom:14px;top:auto;width:34px;height:34px;display:grid;place-items:center;
    font-size:14px;line-height:1;color:var(--sage-deep);-webkit-text-stroke:0;
    background:var(--paper);border:1.5px dashed var(--sage-deep);border-radius:50%;
  }
  .pop-add{right:10px;bottom:-18px;width:40px;height:40px}
  .pop-add svg{width:17px;height:17px}
  .pop-rank{left:10px;bottom:10px;width:30px;height:30px;font-size:12.5px}
  .pop-body{padding:24px 2px 0;text-align:center}
  .pop-cat{font-size:9.5px;letter-spacing:.14em}
  .pop-name{margin-top:4px;font-size:15px}
  .pop-price{margin-top:4px;font-size:15px}
  .popular{padding:52px 0 60px}
  .popular-title{font-size:30px}

  /* ─────────── the guide ───────────
     The book sits small beside its own title — a shelf spine, not a
     poster — and everything else runs full width beneath. The copy
     wrapper steps aside (display:contents) so its pieces join the grid. */
  .guide-sec{padding:54px var(--pad) 52px}
  .gs-inner{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:18px;row-gap:0;align-items:center}
  .gs-inner > *,.gb-ruler,.gb-ruler-parts{min-width:0}
  .gs-visual{grid-column:1;grid-row:1 / span 2;align-self:center}
  .gs-copy{display:contents}
  .gs-copy > .eyebrow{grid-column:2;grid-row:1;align-self:end;margin:0 0 4px;text-align:left;font-size:10px}
  .gs-title{grid-column:2;grid-row:2;align-self:start;margin:0;font-size:20px;line-height:1.16;text-align:left}
  .gs-copy > .lede,.gs-sources,.gs-price,.gs-cta,.gs-ruler-wrap{grid-column:1 / -1}
  .gb-book{padding:0}
  .gb-book-3d{width:98px;transform:rotateY(-18deg) rotateX(4deg)}
  .gb-cover{box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),3px 3px 0 -1px #F6EEDD,6px 6px 0 -2px #EEE2CB,16px 18px 26px -10px rgba(10,20,12,.7)}
  .gb-ribbon{display:none}
  .gb-tag{display:none}
  .guide-sec .lede{margin-top:18px;font-size:14px;line-height:1.62;text-align:left}
  .gs-sources{grid-template-columns:1fr 1fr;gap:8px;margin:16px 0 12px}
  .gs-sources li{flex-direction:column;align-items:flex-start;gap:8px;padding:12px;text-align:left}
  .gs-sources b{font-size:13.5px}
  .gs-sources span{font-size:11.5px;line-height:1.4}
  .gs-seal{flex:0 0 32px;width:32px;height:32px}
  .gs-seal svg{width:16px;height:16px}
  .gs-price{justify-content:flex-start;gap:4px 10px;text-align:left}
  .guide-sec .gs-price span{font-size:13.5px;line-height:1.5}
  .gs-cta{justify-content:center;gap:10px;margin-top:16px}
  .gs-cta .gs-btn{flex:1 1 0;justify-content:center;padding:13px 10px;font-size:13.5px}
  .gs-ruler-wrap{margin-top:26px}

  /* The growth ruler, stood upright: a tape measure down the left in
     months, and a bracket beside it for each part of the book, as tall
     as the months it covers — so it reads as "which chapter is for my
     baby's age", not a bare scale. */
  .gb-ruler{
    position:relative;display:block;height:auto;padding:0;
    --rh:430px;
  }
  .gb-ruler-cap{display:block;margin:0 0 16px;font-size:12.5px;line-height:1.45;color:var(--ruler-soft)}
  .gb-ruler-cap b{display:block;margin-bottom:2px;font-family:var(--display);font-size:17px;color:var(--ruler-ink)}
  .gb-tape{
    position:absolute;left:0;top:auto;width:44px;height:var(--rh);border-radius:6px;
    margin-top:0;
    background:
      repeating-linear-gradient(180deg,rgba(64,51,42,.45) 0 1px,transparent 1px calc(var(--rh) / 96)) right top/8px 100% no-repeat,
      repeating-linear-gradient(180deg,rgba(64,51,42,.75) 0 1.5px,transparent 1.5px calc(var(--rh) / 24)) right top/15px 100% no-repeat,
      linear-gradient(90deg,#FFD877,#EDB94A);
    box-shadow:inset -2px 0 0 rgba(0,0,0,.12),inset 1px 0 0 rgba(255,255,255,.5),6px 0 16px -10px rgba(0,0,0,.45);
  }
  .gb-tape-mark,.gb-tape-mark:nth-child(even){
    display:block;top:calc(var(--at) * 100%);left:5px;transform:translateY(-50%);padding:0;font-size:10.5px;line-height:1;
  }
  .gb-tape-mark:first-child{transform:translateY(2px)}
  .gb-tape-mark:nth-child(9){transform:translateY(calc(-100% - 2px))}
  .gb-tape-unit{right:auto;left:0;bottom:-20px;font-size:9.5px}
  .gb-ruler-parts,.gb-ruler-parts.m-rail{
    position:relative;display:block;height:var(--rh);margin:0 0 30px 58px;padding:0;overflow:visible;
  }
  .gb-ruler-part,.gb-ruler-part.is-up,.gb-ruler-part.is-down{
    position:absolute;left:0;right:0;top:calc(var(--from) * 100% + 3px);height:calc((var(--to) - var(--from)) * 100% - 6px);
    width:auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px;
    padding:0 0 0 20px;border-radius:0;box-shadow:none;
  }
  /* the bracket: an open "[" spanning exactly the months it covers */
  .gb-ruler-part::after,.gb-ruler-part.is-up::after,.gb-ruler-part.is-down::after{
    display:block;content:'';position:absolute;left:0;top:0;bottom:0;right:auto;width:9px;height:auto;
    border:2px solid var(--ruler-line);border-right:0;border-radius:3px 0 0 3px;
  }
  .gb-ruler-part::before{
    content:'';position:absolute;left:-14px;top:50%;width:14px;border-top:1.5px dashed var(--ruler-line);
  }
  .gb-ruler-num{font-size:9.5px;letter-spacing:.14em}
  .gb-ruler-title{font-size:14.5px}

  /* ─────────── delivery / returns ───────────
     Four round, stitched badges that roll past on a loop — the phone's
     version of the row of four. mobile.js doubles the set for the loop. */
  .trust{padding:44px 0 50px}
  .trust-grid{
    display:flex;grid-template-columns:none;gap:14px;width:max-content;max-width:none;margin:0;padding:0 0 0 16px;
    animation:trustRoll var(--roll-dur,24s) linear infinite;
  }
  .trust.is-held .trust-grid,.trust.is-still .trust-grid{animation-play-state:paused}
  @keyframes trustRoll{to{transform:translateX(calc(var(--roll-shift,584px) * -1))}}
  .trust-item,.trust-item.m-rise{
    position:relative;flex:0 0 132px;width:132px;height:132px;padding:14px 12px;gap:7px;
    justify-content:center;border-radius:50%;opacity:1;transform:none;
    background:var(--paper-2);box-shadow:0 12px 22px -16px rgba(74,58,36,.55);
  }
  .trust-item::before{content:'';position:absolute;inset:6px;border-radius:50%;border:1.5px dashed var(--ico);opacity:.45;pointer-events:none}
  .trust-item:nth-child(4n+2){margin-top:14px}
  .trust-item:nth-child(4n+4){margin-top:8px}
  .trust-ico{width:44px;height:44px;flex:0 0 auto}
  .trust-ico::before{inset:3px}
  .trust-ico svg{width:21px;height:21px}
  .trust-item h4{max-width:11ch;font-size:11.5px;line-height:1.22}

  /* ─────────── footer ───────────
     Brand on one line, the three link groups as tap-to-open rows, and
     the woven label — about a third of the old height. */
  .site-foot{padding:52px var(--pad) 16px;border-radius:24px 24px 0 0}
  .foot-hem{top:0;height:42px;background:none}
  .foot-hem::after{top:21px}
  .foot-button{top:12px;width:19px;height:19px;margin-left:-9.5px}
  .foot-inner{grid-template-columns:1fr;gap:14px;justify-items:stretch;text-align:left}
  .foot-brand{display:flex;align-items:center;gap:12px}
  .foot-line{margin:0;max-width:none;font-size:12.5px;line-height:1.35}
  .foot-cols{display:block;width:100%;border-top:1px dashed rgba(224,169,78,.35)}
  .foot-col{border-bottom:1px dashed rgba(224,169,78,.35)}
  .foot-col h4{
    display:flex;align-items:center;justify-content:space-between;width:100%;margin:0;padding:13px 2px;cursor:pointer;
    font-size:14px;-webkit-tap-highlight-color:transparent;
  }
  .foot-col h4::after{
    position:static;width:8px;height:8px;margin:-4px 4px 0 0;border:0;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
    transform:rotate(45deg);transition:transform .3s var(--ease);
  }
  .foot-col.is-open h4::after{transform:rotate(-135deg);margin-top:4px}
  .foot-col ul,.foot-col:last-child ul{display:none}
  .foot-col.is-open ul{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;padding:0 0 14px}
  .foot-col.is-open li,.foot-col:last-child li{width:auto;flex:0 0 auto}
  .foot-col:last-child li + li::before{content:none}
  .foot-col a{
    display:inline-block;padding:7px 12px;border-radius:99px;font-size:12.5px;
    background:rgba(255,248,239,.08);box-shadow:inset 0 0 0 1px rgba(224,169,78,.3);text-decoration:none;
  }
  .foot-label{width:max-content;max-width:100%;margin:16px auto 0;padding:7px 26px;font-size:9px;justify-content:center;text-align:center}
  .foot-label::before{inset:4px 14px}
  .foot-care{display:none}

  /* ─────────── the faceless standard ─────────── */
  .fp-hero{padding:104px var(--pad) 58px}
  .fp-hero-inner{gap:26px}
  .fp-lang{margin-bottom:20px;padding:4px}
  .fp-lang a{padding:7px 16px;font-size:14px}
  .fp-title{font-size:38px}
  .fp-sub{margin-top:12px;font-size:17px}
  .fp-org{margin-top:18px;font-size:10.5px}
  .fp-facts{gap:8px}
  .fp-facts li{padding:6px 11px;font-size:10.5px}
  .fp-body{padding:48px var(--pad) 64px}
  .fp-sec,.fp-refs{padding-block:34px;scroll-margin-top:84px}
  .fp-sec-head{gap:12px;margin-bottom:18px}
  .fp-sec-num{flex-basis:44px;height:44px;font-size:18px}
  .fp-sec-title{font-size:23px}
  .fp-p,.fp-lead{font-size:15.5px;line-height:1.72}
  .fp-lead{padding:22px 20px}
  .fp-en .fp-lead::first-letter{margin:4px 8px 0 0;font-size:44px}
  .fp-hadith{margin:22px 0;padding:24px 18px 18px;border-inline-start-width:5px}
  .fp-hadith::before{inset:6px}
  .fp-hadith-mark{font-size:74px;inset-inline-end:14px}
  .fp-ar{font-size:20px;line-height:1.95}
  .fp-tr p{font-size:15px}
  .fp-src{padding:8px 12px;font-size:11.5px}
  .fp-subhead{margin:32px 0 12px;font-size:19px}
  .fp-evidence{margin:26px 0 8px;font-size:16.5px}
  .fp-verdict{padding:18px 16px}
  .fp-verdict-claim{font-size:17.5px}
  .fp-note,.fp-callout{padding:18px 16px}
  .fp-callout{font-size:17px}
  .fp-pledges li{padding:18px 16px 16px;padding-inline-start:16px;padding-top:66px}
  .fp-pledge-num{top:16px;inset-inline-start:16px;width:38px;height:38px;font-size:16px}
  .fp-board-row{padding:12px 16px}
  .fp-board-cat{font-size:14px}
  .fp-board-status{padding:5px 10px;font-size:12.5px}
  .fp-sec-close{padding:26px 20px;border-radius:24px}
  .fp-signoff-ar{font-size:28px}
  .fp-refs-list li{padding:12px 14px}
  .fp-refs-list p{font-size:13.5px}
  .fp-end{flex-direction:column;align-items:stretch;gap:10px}
  .fp-end a{justify-content:center}
  .fp-toc{top:66px;padding:6px}
  .fp-toc-toggle{padding:10px 14px}
  .fp-ur .fp-title{font-size:27px}
  .fp-ur .fp-sec-title{font-size:20px}
  .fp-ur .fp-p,.fp-ur .fp-lead{font-size:16px}

  /* ─────────── parenting guide page ─────────── */
  .gp-hero{padding:100px var(--pad) 52px}
  .gp-hero-inner{gap:26px}
  .gp-title{font-size:44px}
  .gp-lede{margin-top:16px;font-size:16px}
  .gp-specs{margin-top:22px}
  .gp-specs dd{font-size:16px}
  .gp-buy{gap:14px 20px;margin-top:22px}
  .gp-price strong{font-size:32px}
  .gp-cta{width:100%;gap:10px}
  .gp-cta .gs-btn{flex:1 1 0;justify-content:center;padding:13px 10px;font-size:13.5px}
  .gp-hero-book .gb-book-3d{width:184px}
  .gp-sec{padding:56px var(--pad);scroll-margin-top:66px}
  .gp-head{margin-bottom:18px}
  .gp-h2{font-size:28px}
  .gp-intro{font-size:15.5px}
  .gp-contents{margin-top:22px;padding:26px 18px;border-radius:6px 12px 12px 6px}
  .gp-contents::before{inset:9px}
  .gp-contents-title{margin-bottom:20px;font-size:24px}
  .gp-contents-parts{gap:22px}
  .gp-contents-part-title{font-size:19px}
  .gp-contents-chaps li{grid-template-columns:22px auto minmax(16px,1fr) auto;gap:8px}
  .gp-contents-name{font-size:15px}
  .gp-contents-page{font-size:13.5px}
  .gp-draft{margin-top:12px;font-size:13px}
  .gp-page{padding:26px 20px 56px}
  .gp-run{margin-bottom:18px;font-size:9px}
  .gp-page-title{font-size:26px}
  .gp-page-sub{font-size:19px}
  /* justified type on a narrow column opens rivers — set it ragged */
  .gp-page-p{font-size:15px;line-height:1.75;text-align:left;hyphens:none}
  .gp-page-first::first-letter{margin:4px 8px 0 0;font-size:44px}
  .gp-page-sources{margin-top:20px}
  .gp-page-source{font-size:13.5px}
  .gp-reader-bar{margin-top:22px;gap:14px}
  .gp-turn{width:46px;height:46px}
  .gp-specimen{padding:24px 18px}
  .gp-specimen-claim{font-size:20px}
  .gp-specimen-src{padding:16px 16px 14px}
  .gp-articles{gap:14px}
  .gp-article{padding:22px 20px 20px}
  .gp-article-title{font-size:19px}
  .gp-band{padding:0 var(--pad) 64px}
  .gp-band-inner{padding:28px 20px;border-radius:28px}
  .gp-band .gb-book-3d{width:150px}
  .gp-band p{margin:12px auto 18px;font-size:15px}

  /* ─────────── inner pages ─────────── */
  .page-shell{padding:104px var(--pad) 64px}
  .page-head{margin-bottom:26px;padding-bottom:18px}

  /* ─────────── shop, product, cart ─────────── */
  /* Every stray Woo button — return to shop, update cart, view cart —
     wears the brand instead of the plugin's grey pill. Matched to the
     shape of Woo's own selectors so it actually wins; the loop,
     product-form and cart-table rules below are more specific still. */
  .woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
  .woocommerce-page a.button,.woocommerce-page button.button,.woocommerce-page input.button,
  .woocommerce #respond input#submit{
    min-height:46px;padding:12px 20px;border:0;border-radius:var(--r-pill);
    background:var(--sage-deep);color:var(--paper);
    font-family:var(--display);font-weight:700;font-size:14px;line-height:1.2;
  }
  .woocommerce a.button.wc-backward,.woocommerce button.button[name="update_cart"],
  .woocommerce input.button[name="update_cart"]{
    background:var(--paper-2);color:var(--sage-deep);box-shadow:inset 0 0 0 1.5px var(--sage-soft)
  }
  .woocommerce a.button.disabled,.woocommerce button.button:disabled,.woocommerce input.button:disabled{opacity:.5}
  .woocommerce ul.products{grid-template-columns:repeat(2,1fr);gap:12px}
  .woocommerce ul.products li.product{border-radius:18px;transition:transform .25s var(--ease)}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{padding:12px 12px 0;font-size:14px;line-height:1.25}
  .woocommerce ul.products li.product .price{padding:0 12px;font-size:15px}
  .woocommerce ul.products li.product .button{
    display:block;width:calc(100% - 24px);margin:10px 12px 12px;padding:11px 10px;
    font-size:13px;text-align:center;border-radius:var(--r-pill);
  }
  .woocommerce .woocommerce-result-count{font-size:12.5px;color:var(--ink-3)}
  .woocommerce .woocommerce-ordering select,.woocommerce-page select{
    width:100%;padding:12px 14px;border:1.5px solid var(--gold-line);border-radius:var(--r-pill);
    background:var(--paper);font-family:var(--display);font-size:14px;color:var(--ink);
  }
  .woocommerce .woocommerce-ordering{width:100%;margin-bottom:18px}

  .woocommerce div.product div.images{margin-bottom:18px}
  .woocommerce div.product div.images img{border-radius:20px}
  .woocommerce div.product .product_title{font-size:27px;line-height:1.15}
  .woocommerce div.product p.price{font-family:var(--display);font-weight:800;font-size:23px;color:var(--sage-deep)}
  .woocommerce div.product form.cart{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px}
  .woocommerce div.product form.cart div.quantity{margin:0;float:none}
  .woocommerce .quantity input.qty{
    width:70px;height:50px;border:1.5px solid var(--gold-line);border-radius:14px;background:var(--paper);
    font-family:var(--display);font-size:16px;color:var(--ink);text-align:center;
  }
  .woocommerce div.product form.cart .button,.woocommerce .single_add_to_cart_button{
    flex:1 1 auto;width:auto;min-height:50px;padding:0 22px;border-radius:var(--r-pill);
    background:var(--sage-deep);color:var(--paper);
    font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.01em;
  }
  .woocommerce div.product .product_meta{margin-top:18px;font-size:12px;color:var(--ink-2)}
  .woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin-bottom:14px;display:flex;gap:8px;flex-wrap:wrap}
  .woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
  .woocommerce div.product .woocommerce-tabs ul.tabs li{
    margin:0;padding:0;border:0;background:var(--paper-2);border-radius:var(--r-pill);
  }
  .woocommerce div.product .woocommerce-tabs ul.tabs li a{padding:9px 16px;font-family:var(--display);font-size:13.5px}
  .woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--sage-deep)}
  .woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--paper)}
  .woocommerce .related.products ul.products,.woocommerce .up-sells ul.products{grid-template-columns:repeat(2,1fr)}

  .woocommerce table.shop_table{border:0;font-size:14px}
  .woocommerce table.shop_table td,.woocommerce table.shop_table th{padding:10px 8px}
  .woocommerce-cart-form__cart-item .product-thumbnail img{width:64px;border-radius:12px}
  .woocommerce-cart table.cart .button,.woocommerce .checkout-button,.woocommerce-cart .wc-proceed-to-checkout a.button{
    width:100%;min-height:48px;display:grid;place-items:center;border-radius:var(--r-pill);
    background:var(--sage-deep);color:var(--paper);font-family:var(--display);font-weight:700;font-size:15px;
  }
  .woocommerce .cart-collaterals .cart_totals{width:100%;float:none}

  /* a buy bar that follows you down a product page */
  .m-buybar{
    position:fixed;left:0;right:0;bottom:0;z-index:140;
    display:flex;align-items:center;gap:12px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,248,239,.96);backdrop-filter:blur(10px);
    box-shadow:0 -12px 26px -18px rgba(74,58,36,.7);
    border-top:1.5px dashed var(--gold-line);
    transform:translateY(130%);transition:transform .38s var(--ease);
  }
  .m-buybar.is-on{transform:none}
  .m-buybar-info{display:flex;flex-direction:column;min-width:0}
  .m-buybar-name{font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38vw}
  .m-buybar-price{font-family:var(--display);font-weight:800;font-size:18px;color:var(--ink);line-height:1.2}
  .m-buybar-price del{margin-right:5px;font-size:.72em;font-weight:500;color:var(--ink-3)}
  .m-buybar-price ins{text-decoration:none}
  .m-buybar-btn{
    flex:1;min-height:48px;border-radius:var(--r-pill);background:var(--sage-deep);color:var(--paper);
    font-family:var(--display);font-weight:700;font-size:15px;transition:transform .25s var(--ease);
  }
  .m-buybar-btn:active{transform:scale(.97)}
  .m-buybar-btn.is-off{background:var(--paper-3);color:var(--ink-3)}
  /* the bar covers the foot of the page — hand that height back */
  body.has-buybar{padding-bottom:74px}

  /* ─────────── arriving on scroll ───────────
     A finger never hovers, so the reveal is the entrance: each block
     lifts once as it comes into the screen and is then left alone
     (the observer unobserves), so scrolling back up never replays it. */
  .m-rise{opacity:0;transform:translateY(22px)}
  .m-in{
    opacity:1;transform:none;
    transition:opacity .62s var(--ease) var(--rise-delay,0ms),transform .62s var(--ease) var(--rise-delay,0ms);
  }

  /* ─────────── Woo notices ─────────── */
  .woocommerce-notices-wrapper{margin-bottom:4px}
  .woocommerce-message,.woocommerce-info,.woocommerce-error{
    display:flex;flex-direction:column;align-items:stretch;gap:12px;
    margin:0 0 18px;padding:16px 18px;border:0;border-radius:20px;
    background:var(--paper-2);box-shadow:inset 0 0 0 1.5px var(--gold-line);
    font-family:var(--body);font-size:14px;line-height:1.55;color:var(--ink);
  }
  .woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{display:none}
  .woocommerce-message{background:rgba(190,218,168,.36);box-shadow:inset 0 0 0 1.5px var(--sage-soft)}
  .woocommerce-error{background:rgba(255,127,110,.15);box-shadow:inset 0 0 0 1.5px rgba(255,127,110,.45);list-style:none}
  .woocommerce-error li{margin:0;padding:0}
  .woocommerce-message .button,.woocommerce-info .button,.woocommerce-error .button{
    float:none;width:100%;min-height:46px;display:grid;place-items:center;order:2;margin:0;
    border-radius:var(--r-pill);background:var(--sage-deep);color:var(--paper);
    font-family:var(--display);font-weight:700;font-size:14px;
  }

  /* ─────────── forms: cart, checkout, account ─────────── */
  .woocommerce-cart table.cart td.actions{padding:14px 0 0}
  .woocommerce-cart table.cart td.actions .coupon{display:flex;flex-direction:column;gap:10px;margin-bottom:12px;float:none;width:100%}
  /* Woo's own small-screen sheet pins the coupon button to 48% — on a
     phone the two controls read better as one stacked pair. */
  .woocommerce-cart table.cart td.actions .coupon .button{width:100%;float:none}
  .woocommerce-cart table.cart td.actions .button{margin:0}
  /* the remove "×" is a 21px hit area by default: give it a thumb */
  .woocommerce a.remove{
    width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
    background:var(--paper-2);color:var(--clay);font-size:20px;line-height:1;
  }
  .woocommerce a.remove:hover{background:var(--clay);color:var(--paper)}
  .woocommerce-cart-form__cart-item td.product-remove{padding-bottom:0}
  .woocommerce .cart_totals h2{font-family:var(--display);font-size:22px;margin-bottom:12px}
  .woocommerce .cart_totals table.shop_table{margin-bottom:16px}
  .woocommerce form.checkout_coupon,.woocommerce form.login,.woocommerce form.register{
    margin:0 0 18px;padding:18px;border:1.5px dashed var(--gold-line);border-radius:20px;background:var(--paper)
  }
  .woocommerce-checkout .col2-set .col-1,.woocommerce-checkout .col2-set .col-2{width:100%;float:none;margin-bottom:8px}
  .woocommerce form .form-row{padding:0;margin:0 0 14px}
  .woocommerce form .form-row-first,.woocommerce form .form-row-last{width:100%;float:none}
  .woocommerce form .form-row label{
    display:block;margin-bottom:6px;font-family:var(--display);font-weight:600;font-size:13.5px;color:var(--ink-2)
  }
  /* 16px is the smallest size iOS will not zoom the page for */
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row textarea,
  .woocommerce-page .select2-container .select2-selection--single,
  .woocommerce table.cart td.actions input#coupon_code{
    width:100%;min-height:52px;padding:14px 16px;box-sizing:border-box;
    border:1.5px solid var(--gold-line);border-radius:14px;background:var(--paper);
    font-family:var(--body);font-size:16px;line-height:1.4;color:var(--ink);
  }
  .woocommerce form .form-row textarea{min-height:100px}
  .woocommerce-page .select2-container .select2-selection--single .select2-selection__rendered{padding:0;line-height:22px}
  .woocommerce-page .select2-container .select2-selection--single .select2-selection__arrow{top:14px;right:10px}
  .woocommerce-checkout #payment{border-radius:20px;background:var(--paper-2)}
  .woocommerce-checkout #payment ul.payment_methods{padding:16px}
  .woocommerce-checkout #payment div.form-row{padding:16px}
  .woocommerce-checkout #payment #place_order{
    float:none;width:100%;min-height:54px;border-radius:var(--r-pill);
    background:var(--sage-deep);color:var(--paper);
    font-family:var(--display);font-weight:700;font-size:16px;
  }
  .woocommerce table.shop_table_responsive tr td::before,
  .woocommerce-page table.shop_table_responsive tr td::before{font-family:var(--display);font-weight:600;color:var(--ink-2)}
  .woocommerce-checkout-review-order-table tfoot th,
  .woocommerce-checkout-review-order-table tfoot td{font-size:14px}
}

/* ─────────── small phones ─────────── */
@media (max-width:420px){
  .hero-title{font-size:33px}
  .combo{flex-basis:68%}
  .pop{flex-basis:56%}
  .vs-name{font-size:22px}
  .vs-girl .vs-kid-wrap,.vs-boy .vs-kid-wrap,.vs-side:hover .vs-kid-wrap{width:40%;bottom:6px}

  .gp-title{font-size:38px}
  .fp-title{font-size:33px}
  .trust-item h4{font-size:12.5px}
}

@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .m-hint svg{animation:none}
  .m-buybar{transition:none}
  .m-rise{opacity:1;transform:none}
  .m-in{transition:none}
}

@media (max-width:760px){
  .why-tag,.trust-item{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
}