/*
Theme Name: CultXone
Theme URI: https://cultxone.in
Author: CultXone
Description: Y2K papercraft store theme — WARP CULT direction. Custom WooCommerce overrides for every template.
Version: 1.0
Text Domain: cultxone
*/

/* ============================================================================
   CULTXONE — WARP CULT design system
   One stylesheet for the whole store. Y2K groovy: warped checkerboard,
   chunky display type with a hard indigo shadow, thick outlines, sticker
   energy — but the commerce spine stays plain and legible.
   ========================================================================= */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
  --lilac:#A99BF5; --lilac-dk:#8A79EE; --lilac-lt:#C9BFFA; --lilac-pale:#E4DFFC;
  --cream:#F2E9DE; --cream-dk:#E4D7C7; --cream-lt:#F9F4EC;
  --yellow:#FFC81E; --yellow-dk:#E8A800;
  --indigo:#2C00A2;            /* exact brand fill from the logo artwork */
  --ink:#1A0B3D;
  --pink:#FF4FA3; --pink-dk:#D93683;
  --cyan:#2FE3F0; --lime:#C6FF4D;
  --ok:#1F9E63; --err:#E23B3B;

  --bd:3px solid var(--ink);
  --bd-2:2px solid var(--ink);
  --sh:4px 4px 0 var(--ink);
  --sh-lg:7px 7px 0 var(--ink);
  --r:16px; --r-sm:11px; --r-lg:26px;

  --display:'Bowlby One SC',system-ui,sans-serif;
  --body:'Space Grotesk',system-ui,sans-serif;

  --nav-h:70px;
  --wrap:1240px;
}

/* ---------- 2. BASE ------------------------------------------------------ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;scroll-padding-top:calc(var(--nav-h) + 20px)}
body{font-family:var(--body);background:var(--cream);color:var(--ink);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
svg{display:block}
.wrap{width:min(var(--wrap),92vw);margin-inline:auto}
.wrap--narrow{width:min(860px,92vw);margin-inline:auto}
.d{font-family:var(--display);font-weight:400;letter-spacing:.01em;line-height:.94}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--indigo);outline-offset:2px}

/* ---------- 3. WARPED CHECKERBOARD (the signature) ---------------------- */
.checker{position:absolute;inset:-10%;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(45deg,var(--lilac) 25%,transparent 25%,transparent 75%,var(--lilac) 75%),
    linear-gradient(45deg,var(--lilac) 25%,transparent 25%,transparent 75%,var(--lilac) 75%);
  background-size:88px 88px;background-position:0 0,44px 44px;
  background-color:var(--cream);filter:url(#warp);animation:drift 26s linear infinite}
@keyframes drift{to{background-position:88px 88px,132px 132px}}
.checker--flat{filter:none;inset:0}
.checker--sm{background-size:44px 44px;background-position:0 0,22px 22px}

/* ---------- 4. BRAND MARK ----------------------------------------------- */
/* the real logotype as an alpha silhouette used as a CSS mask, so the same
   letterforms recolour per surface without ever redrawing the logo */
.brand{position:relative;display:inline-block;width:var(--bw,152px);aspect-ratio:544/129;
  flex-shrink:0;line-height:0;user-select:none}
.brand i{position:absolute;inset:0;display:block;
  -webkit-mask:url(images/wordmark.png) center/contain no-repeat;
          mask:url(images/wordmark.png) center/contain no-repeat}
.brand .sh{background:var(--bsh,var(--indigo));translate:3px 3px}
.brand .fg{background:var(--bfg,var(--yellow))}

/* ---------- 5. TICKER ---------------------------------------------------- */
.ticker{background:var(--indigo);color:var(--yellow);padding:9px 0;overflow:hidden;
  font-family:var(--display);font-size:13px;letter-spacing:.06em;position:relative;z-index:60}
.ticker__track{display:flex;width:max-content;animation:slide 28s linear infinite}
.ticker span{padding:0 22px;white-space:nowrap;display:flex;align-items:center;gap:22px}
.ticker span::after{content:"✦";color:var(--pink)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- 6. NAV ------------------------------------------------------- */
.nav{position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:var(--bd);
  transition:box-shadow .25s}
.nav.stuck{box-shadow:0 6px 0 rgba(26,11,61,.12)}
.nav__in{display:flex;align-items:center;gap:22px;height:var(--nav-h)}
.nav .brand{--bw:150px;cursor:pointer;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.nav .brand:hover{transform:rotate(-3deg) scale(1.04)}
.nav .brand.spin{animation:spin360 .7s cubic-bezier(.34,1.56,.64,1)}
@keyframes spin360{to{transform:rotate(360deg) scale(1)}}
.menu{display:flex;gap:4px;margin-left:auto;align-items:center}
.menu a{font-weight:700;font-size:14px;padding:9px 13px;border-radius:99px;
  transition:background .2s,color .2s,transform .2s}
.menu a:hover,.menu a[aria-current=page]{background:var(--ink);color:var(--yellow);transform:translateY(-2px)}
.nav__cta{display:flex;gap:9px;align-items:center;margin-left:8px}
.icon-btn{width:42px;height:42px;border-radius:99px;border:var(--bd);display:grid;place-items:center;
  background:#fff;font-size:16px;transition:transform .18s,background .18s}
.icon-btn:hover{transform:translateY(-3px) rotate(-6deg);background:var(--yellow)}
.cart-pill{background:var(--yellow);border:var(--bd);border-radius:99px;padding:9px 17px;
  font-weight:700;font-size:14px;display:flex;gap:8px;align-items:center;box-shadow:3px 3px 0 var(--ink);
  transition:transform .18s,box-shadow .18s}
.cart-pill:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.cart-pill b{background:var(--ink);color:var(--yellow);border-radius:99px;min-width:21px;height:21px;
  display:grid;place-items:center;font-size:11px}
.burger{display:none}
/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:70;background:rgba(26,11,61,.6);backdrop-filter:blur(4px);
  display:none;opacity:0;transition:opacity .25s}
.drawer.on{display:block;opacity:1}
.drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(320px,86vw);background:var(--cream);
  border-left:var(--bd);padding:22px;display:flex;flex-direction:column;gap:6px;
  transform:translateX(100%);transition:transform .3s cubic-bezier(.22,1,.36,1);overflow-y:auto}
.drawer.on .drawer__panel{transform:none}
.drawer__panel a{font-family:var(--display);font-size:19px;padding:13px 12px;border-radius:var(--r-sm)}
.drawer__panel a:hover{background:var(--yellow)}
.drawer__x{align-self:flex-end;width:42px;height:42px;border-radius:99px;border:var(--bd);
  background:#fff;font-size:18px;display:grid;place-items:center;margin-bottom:8px}

/* ---------- 7. BUTTONS --------------------------------------------------- */
.btn{font-family:var(--display);font-size:16px;padding:16px 28px;border-radius:99px;border:var(--bd);
  box-shadow:5px 5px 0 var(--ink);display:inline-flex;gap:10px;align-items:center;justify-content:center;
  transition:transform .16s,box-shadow .16s,background .16s;text-align:center}
.btn:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn--primary{background:var(--yellow)}
.btn--ghost{background:#fff}
.btn--ink{background:var(--ink);color:var(--yellow)}
.btn--pink{background:var(--pink);color:#fff}
.btn--sm{font-size:13px;padding:11px 18px;box-shadow:3px 3px 0 var(--ink)}
.btn--lg{font-size:19px;padding:19px 34px}
.btn--block{display:flex;width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.link-btn{font-family:var(--display);font-size:14px;border:var(--bd);border-radius:99px;padding:12px 22px;
  background:#fff;box-shadow:3px 3px 0 var(--ink);white-space:nowrap;
  transition:transform .16s,box-shadow .16s,background .16s;display:inline-block}
.link-btn:hover{background:var(--lime);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.tlink{font-weight:700;border-bottom:2.5px solid var(--yellow);transition:border-color .18s}
.tlink:hover{border-color:var(--ink)}

/* ---------- 8. SECTION FURNITURE ---------------------------------------- */
.sec{padding:74px 0;position:relative}
.sec--tight{padding:50px 0}
.sec--alt{background:var(--lilac-lt);border-block:var(--bd)}
.sec--white{background:#fff;border-block:var(--bd)}
.sec__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin-bottom:32px;flex-wrap:wrap}
.sec__title{font-family:var(--display);font-size:clamp(30px,4.3vw,52px);color:var(--indigo);line-height:.96}
.sec__title em{font-style:normal;color:var(--pink)}
.sec__sub{font-weight:500;font-size:15px;opacity:.78;margin-top:11px;max-width:56ch;line-height:1.6}
.eyebrow{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:var(--yellow);
  font-family:var(--display);font-size:12px;padding:8px 16px;border-radius:99px;letter-spacing:.05em}
.eyebrow i{width:8px;height:8px;background:var(--lime);border-radius:99px;display:block;
  animation:blip 1.1s ease-in-out infinite}
@keyframes blip{50%{opacity:.25;transform:scale(.6)}}

/* ---------- 9. TRUST STRIP ---------------------------------------------- */
.trust{background:var(--ink);color:var(--cream);padding:22px 0;overflow:hidden}
.trust__track{display:flex;width:max-content;animation:slide 34s linear infinite}
.trust__track>div{display:flex;gap:52px;padding-right:52px;align-items:center}
.trust b{font-family:var(--display);font-size:15px;display:flex;gap:11px;align-items:center;
  white-space:nowrap;letter-spacing:.02em}
.trust b i{font-size:22px;font-style:normal}

/* ---------- 10. PLACEHOLDER MEDIA --------------------------------------- */
/* every product image is a labelled placeholder until real photos land */
.media{position:relative;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;
  background:
    linear-gradient(45deg,var(--cream-dk) 25%,transparent 25%,transparent 75%,var(--cream-dk) 75%),
    linear-gradient(45deg,var(--cream-dk) 25%,transparent 25%,transparent 75%,var(--cream-dk) 75%);
  background-size:34px 34px;background-position:0 0,17px 17px;background-color:var(--cream)}
.media svg{width:64%;transition:transform .3s cubic-bezier(.34,1.5,.64,1)}
.ph-tag{position:absolute;bottom:8px;left:8px;font-size:9px;font-weight:700;letter-spacing:.09em;
  background:rgba(26,11,61,.72);color:#fff;padding:4px 8px;border-radius:99px;z-index:3}

/* ---------- 11. PRODUCT CARD -------------------------------------------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:var(--bd);border-radius:var(--r);overflow:hidden;box-shadow:5px 5px 0 var(--ink);
  position:relative;display:flex;flex-direction:column;
  transition:transform .2s cubic-bezier(.34,1.4,.64,1),box-shadow .2s}
.card:hover{transform:translate(-4px,-6px) rotate(-1deg);box-shadow:10px 12px 0 var(--indigo)}
.card:hover .media svg{transform:translateY(-8px) rotate(4deg) scale(1.05)}
.badge{position:absolute;top:10px;left:10px;font-family:var(--display);font-size:10px;background:var(--pink);
  color:#fff;padding:6px 10px;border-radius:99px;border:var(--bd-2);letter-spacing:.04em;z-index:3}
.badge--new{background:var(--lime);color:var(--ink)}
.badge--easy{background:var(--cyan);color:var(--ink)}
.wish{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:99px;background:#fff;
  border:var(--bd-2);display:grid;place-items:center;font-size:14px;z-index:3;
  transition:transform .18s,background .18s}
.wish:hover{transform:scale(1.15);background:var(--pink)}
.card__body{padding:15px 15px 17px;display:flex;flex-direction:column;gap:9px;flex:1}
.card__fr{font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--indigo);text-transform:uppercase}
.card__name{font-family:var(--display);font-size:17px;line-height:1.1}
.diff{display:flex;gap:5px;align-items:center;font-size:11px;font-weight:700;opacity:.72}
.diff i{width:20px;height:6px;border-radius:99px;background:var(--cream-dk);display:block}
.diff i.on{background:var(--indigo)}
.card__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:4px}
.price{font-family:var(--display);font-size:20px}
.price s{font-family:var(--body);font-size:12px;opacity:.45;margin-left:6px;font-weight:500}
.add{background:var(--ink);color:var(--yellow);font-family:var(--display);font-size:12px;padding:11px 15px;
  border-radius:99px;transition:transform .16s,background .16s;letter-spacing:.03em}
.add:hover{background:var(--pink);color:#fff;transform:scale(1.06)}
.add.done{background:var(--lime);color:var(--ink)}

/* ---------- 12. FRANCHISE GRID ------------------------------------------ */
.fight{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.fight a{aspect-ratio:1/1.12;border:var(--bd);border-radius:var(--r);display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;padding:14px 10px;gap:8px;position:relative;overflow:hidden;
  box-shadow:4px 4px 0 var(--ink);transition:transform .2s cubic-bezier(.34,1.4,.64,1),box-shadow .2s}
.fight a:hover{transform:translateY(-7px) rotate(2deg);box-shadow:7px 10px 0 var(--indigo)}
.fight a svg{width:74%;position:absolute;top:8%;left:13%;transition:transform .3s cubic-bezier(.34,1.5,.64,1)}
.fight a:hover svg{transform:scale(1.09) rotate(-4deg)}
.fight span{font-family:var(--display);font-size:12px;text-align:center;position:relative;z-index:2;
  background:var(--ink);color:var(--yellow);padding:6px 11px;border-radius:99px;line-height:1.2}
.fight small{position:relative;z-index:2;font-size:10px;font-weight:700;opacity:.72}

/* ---------- 13. STEPS / KIT CONTENTS ------------------------------------ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{background:#fff;border:var(--bd);border-radius:var(--r);padding:28px 24px;box-shadow:5px 5px 0 var(--ink);
  transition:transform .2s}
.step:hover{transform:translateY(-6px)}
.step__n{font-family:var(--display);font-size:58px;color:var(--lilac);line-height:.8;margin-bottom:12px}
.step h4{font-family:var(--display);font-size:22px;margin-bottom:9px;color:var(--indigo)}
.step p{font-size:14.5px;line-height:1.6;opacity:.84}

.kitbox{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;
  background:#fff;border:var(--bd);border-radius:var(--r-lg);padding:38px;box-shadow:var(--sh-lg)}
.kitlist{list-style:none;display:flex;flex-direction:column;gap:13px;margin-top:20px}
.kitlist li{display:flex;gap:13px;align-items:flex-start;font-size:15px;line-height:1.55}
.kitlist > li > b{width:27px;height:27px;border-radius:99px;background:var(--lime);border:var(--bd-2);
  display:grid;place-items:center;font-size:13px;flex-shrink:0;margin-top:1px}
.kitlist--no > li > b{background:var(--cream-dk)}
/* the right-hand panel of the kit section reads as an actual A4 kit sheet:
   header strip, the printed net, a legend chip, and a corner placeholder tag.
   The legend and the placeholder tag must never share a corner. */
.sheet{position:relative;aspect-ratio:1/1.32;background:#fff;border:var(--bd);border-radius:var(--r-sm);
  box-shadow:var(--sh);overflow:hidden;display:grid;place-items:center}
.sheet::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--cream-dk) 1px,transparent 1px),
    linear-gradient(90deg,var(--cream-dk) 1px,transparent 1px);background-size:26px 26px;opacity:.5}
.sheet::after{content:"";position:absolute;inset:16px;border:2px dashed var(--pink);
  border-radius:6px;opacity:.4;pointer-events:none}
.sheet__head{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;
  gap:10px;padding:9px 13px;background:var(--ink);color:var(--cream);
  font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.sheet__head b{color:var(--yellow);font-weight:700}
.sheet__legend{position:absolute;left:12px;bottom:12px;z-index:6;display:flex;flex-direction:column;gap:7px;
  background:#fff;border:var(--bd-2);border-radius:var(--r-sm);padding:10px 12px;box-shadow:3px 3px 0 var(--ink)}
.sheet__legend span{display:flex;gap:9px;align-items:center;font-size:10px;font-weight:700;white-space:nowrap}
.sheet__legend i{width:30px;height:0;display:block;flex-shrink:0}
.sheet__legend i.cut{border-top:2.5px solid var(--ink)}
.sheet__legend i.fold{border-top:2.5px dashed var(--pink)}
/* keep the placeholder tag out of the legend's corner */
.sheet .ph-tag{left:auto;right:10px;bottom:10px;z-index:6}
.sheet__fig{position:relative;z-index:3;width:62%}
@media(max-width:560px){
  .sheet__legend{padding:8px 10px;gap:5px}
  .sheet__legend span{font-size:9px}
  .sheet .ph-tag{font-size:8px;right:8px;bottom:8px}
}

/* ---------- 14. FLAT → 3D REVEAL ---------------------------------------- */
.reveal{border:var(--bd);border-radius:var(--r-lg);overflow:hidden;position:relative;aspect-ratio:16/8;
  box-shadow:8px 8px 0 var(--indigo);cursor:ew-resize;background:var(--cream);user-select:none;touch-action:none}
.reveal__side{position:absolute;inset:0;display:grid;place-items:center;gap:10px}
.reveal__a{background:repeating-linear-gradient(0deg,#fff,#fff 26px,#EDE5DA 26px,#EDE5DA 27px)}
.reveal__b{background:var(--lilac);clip-path:inset(0 0 0 50%)}
.reveal__side h5{font-family:var(--display);font-size:clamp(17px,2.3vw,29px);background:var(--ink);
  color:var(--yellow);padding:9px 18px;border-radius:99px}
.reveal__handle{position:absolute;top:0;bottom:0;left:50%;width:5px;background:var(--ink);z-index:5}
.reveal__handle::after{content:"⇄";position:absolute;top:50%;left:50%;translate:-50% -50%;width:52px;height:52px;
  background:var(--yellow);border:var(--bd);border-radius:99px;display:grid;place-items:center;
  font-size:20px;font-weight:700}

/* ---------- 15. BUNDLE --------------------------------------------------- */
.bundle{background:var(--indigo);border:4px solid var(--ink);border-radius:30px;padding:44px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;box-shadow:10px 10px 0 var(--ink);
  position:relative;overflow:hidden}
.bundle::before{content:"";position:absolute;inset:0;opacity:.16;
  background-image:radial-gradient(var(--yellow) 2px,transparent 2px);background-size:22px 22px}
.bundle>*{position:relative;z-index:2}
.bundle h3{font-family:var(--display);font-size:clamp(30px,4vw,50px);color:var(--yellow);line-height:.95}
.bundle p{color:var(--cream);margin:16px 0 24px;font-size:16px;line-height:1.55;max-width:44ch}
.bundle__stack{display:flex;justify-content:center}
.bundle__stack .chip{width:132px;aspect-ratio:1/1.15;background:var(--cream);border:var(--bd);
  border-radius:16px;display:grid;place-items:center;box-shadow:5px 5px 0 rgba(0,0,0,.35);
  transition:transform .25s cubic-bezier(.34,1.5,.64,1)}
.bundle__stack .chip:nth-child(1){transform:rotate(-11deg) translateX(26px)}
.bundle__stack .chip:nth-child(2){transform:translateY(-14px);z-index:2}
.bundle__stack .chip:nth-child(3){transform:rotate(11deg) translateX(-26px)}
.bundle__stack:hover .chip:nth-child(1){transform:rotate(-18deg) translateX(6px)}
.bundle__stack:hover .chip:nth-child(3){transform:rotate(18deg) translateX(-6px)}
.bundle__stack .chip svg{width:76%}
.save{display:inline-block;background:var(--lime);border:var(--bd);border-radius:99px;padding:7px 16px;
  font-family:var(--display);font-size:13px;margin-bottom:14px}

/* ---------- 16. REVIEWS -------------------------------------------------- */
.revs{overflow:hidden;padding:6px 0}
.revs__track{display:flex;gap:18px;width:max-content;animation:slide 46s linear infinite}
.revs__track:hover{animation-play-state:paused}
.rev{width:308px;background:#fff;border:var(--bd);border-radius:var(--r);padding:20px;
  box-shadow:var(--sh);flex-shrink:0}
.rev .stars{color:var(--yellow);-webkit-text-stroke:1px var(--ink);font-size:16px;margin-bottom:9px}
.rev p{font-size:14.5px;line-height:1.55;margin-bottom:14px}
.rev footer{display:flex;gap:10px;align-items:center;font-size:12px;font-weight:700}
.rev .av{width:34px;height:34px;border-radius:99px;background:var(--lilac);border:var(--bd-2);
  display:grid;place-items:center;font-family:var(--display);font-size:13px}
.rev i{font-style:normal;opacity:.58;font-weight:500}

/* ---------- 17. FAQ ------------------------------------------------------ */
.faq{display:flex;flex-direction:column;gap:13px}
.faq details{background:#fff;border:var(--bd);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:20px 22px;font-family:var(--display);font-size:17px;
  display:flex;justify-content:space-between;gap:16px;align-items:center;transition:background .18s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--yellow)}
.faq summary::after{content:"+";font-size:26px;line-height:1;flex-shrink:0;transition:transform .25s}
.faq details[open] summary{background:var(--yellow)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:4px 22px 22px;font-size:15px;line-height:1.68;border-top:2px dashed rgba(26,11,61,.2)}
.faq .ans p+p{margin-top:11px}

/* ---------- 18. NEWSLETTER ---------------------------------------------- */
.news{background:var(--yellow);border-block:var(--bd);padding:64px 0;position:relative;overflow:hidden}
.news__in{position:relative;z-index:2;text-align:center}
.news h3{font-family:var(--display);font-size:clamp(30px,4.6vw,58px);color:var(--indigo);line-height:.95}
.news p{margin:16px auto 26px;max-width:50ch;font-weight:500;font-size:16px}
.form-inline{display:flex;gap:12px;max-width:520px;margin-inline:auto;flex-wrap:wrap;justify-content:center}
.form-inline input{flex:1;min-width:230px;padding:16px 20px;border:var(--bd);border-radius:99px;
  font-weight:500;background:#fff;box-shadow:var(--sh)}
.form-inline input:focus{outline:none;box-shadow:2px 2px 0 var(--ink);transform:translate(2px,2px)}
.news__note{margin-top:16px;font-size:12px;font-weight:700;opacity:.66}

/* ---------- 19. FOOTER --------------------------------------------------- */
.foot{background:var(--ink);color:var(--cream);padding:60px 0 0;position:relative;overflow:hidden}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;padding-bottom:44px}
.foot .brand{--bw:190px;--bfg:var(--yellow);--bsh:var(--lilac-dk);display:block}
.foot h6{font-family:var(--display);font-size:13px;color:var(--yellow);letter-spacing:.08em;margin-bottom:14px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.foot a{font-size:14px;opacity:.8;transition:opacity .18s,transform .18s,color .18s;display:inline-block}
.foot a:hover{opacity:1;transform:translateX(4px);color:var(--yellow)}
.foot__p{font-size:14px;opacity:.75;line-height:1.6;margin:14px 0 18px;max-width:34ch}
.pay{display:flex;gap:8px;flex-wrap:wrap}
.pay span{background:rgba(255,255,255,.1);border-radius:8px;padding:6px 11px;font-size:11px;font-weight:700}
.foot__bar{border-top:1px solid rgba(255,255,255,.16);padding:20px 0 84px;display:flex;
  justify-content:space-between;gap:16px;font-size:12.5px;opacity:.7;flex-wrap:wrap}
#runner{position:absolute;bottom:14px;left:-140px;width:78px;z-index:3;pointer-events:none}
#runner.go{animation:dash 7s linear}
@keyframes dash{to{left:calc(100% + 140px)}}

/* ---------- 20. PAGE HERO (inner pages) --------------------------------- */
.phero{position:relative;overflow:hidden;border-bottom:var(--bd);padding:52px 0 56px}
.phero__in{position:relative;z-index:2}
.phero h1{font-family:var(--display);font-size:clamp(36px,5.6vw,66px);color:var(--yellow);
  text-shadow:var(--sh-lg);line-height:.95}
.phero p{margin-top:18px;max-width:56ch;font-size:16.5px;line-height:1.6;font-weight:500;
  background:var(--cream);display:inline-block;padding:13px 17px;border:var(--bd);border-radius:var(--r);
  box-shadow:var(--sh)}
.crumbs{display:flex;gap:8px;align-items:center;font-size:12.5px;font-weight:700;margin-bottom:16px;
  position:relative;z-index:2;flex-wrap:wrap}
.crumbs a{opacity:.7}.crumbs a:hover{opacity:1;color:var(--indigo)}
.crumbs span{opacity:.45}

/* ---------- 21. SHOP: filters + toolbar --------------------------------- */
.shoplayout{display:grid;grid-template-columns:250px 1fr;gap:34px;align-items:start}
.filters{position:sticky;top:calc(var(--nav-h) + 18px);background:#fff;border:var(--bd);border-radius:var(--r);
  padding:22px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:22px}
.fgroup h5{font-family:var(--display);font-size:14px;margin-bottom:11px;color:var(--indigo)}
.fgroup label{display:flex;gap:9px;align-items:center;font-size:13.5px;font-weight:500;padding:5px 0;cursor:pointer}
.fgroup input{width:17px;height:17px;accent-color:var(--indigo);cursor:pointer}
.fgroup label span{margin-left:auto;opacity:.5;font-size:11.5px;font-weight:700}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.toolbar .count{font-weight:700;font-size:14px}
.toolbar select{border:var(--bd);border-radius:99px;padding:10px 16px;font-weight:700;font-size:13px;
  background:#fff;box-shadow:3px 3px 0 var(--ink);cursor:pointer}
.chipbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip-f{border:var(--bd-2);border-radius:99px;padding:7px 14px;font-size:12px;font-weight:700;background:#fff;
  display:flex;gap:7px;align-items:center}
.chip-f button{font-size:14px;line-height:1;opacity:.6}
.chip-f button:hover{opacity:1;color:var(--err)}
.filters-toggle{display:none}
.empty{text-align:center;padding:70px 20px;background:#fff;border:var(--bd);border-radius:var(--r);
  box-shadow:var(--sh)}
.empty h3{font-family:var(--display);font-size:26px;color:var(--indigo);margin-bottom:10px}
.empty p{opacity:.75;margin-bottom:20px}

/* ---------- 22. PDP ------------------------------------------------------ */
.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
.gallery{display:flex;flex-direction:column;gap:13px;position:sticky;top:calc(var(--nav-h) + 18px)}
.gallery__main{border:var(--bd);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg);background:#fff}
.gallery__main .media{aspect-ratio:1/1}
.gallery__main .media svg{width:56%}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
.thumbs button{border:var(--bd-2);border-radius:var(--r-sm);overflow:hidden;background:#fff;
  aspect-ratio:1/1;position:relative;transition:transform .16s,box-shadow .16s}
.thumbs button:hover{transform:translateY(-3px)}
.thumbs button[aria-selected=true]{border-color:var(--pink);box-shadow:3px 3px 0 var(--pink)}
.thumbs .media{aspect-ratio:1/1}
.thumbs .media svg{width:66%}
.thumbs .lbl{position:absolute;bottom:3px;left:0;right:0;text-align:center;font-size:8px;font-weight:700;
  letter-spacing:.05em;background:rgba(26,11,61,.72);color:#fff;padding:2px}
.pdp__fr{font-size:11px;font-weight:700;letter-spacing:.11em;color:var(--indigo);text-transform:uppercase}
.pdp h1{font-family:var(--display);font-size:clamp(30px,4.4vw,50px);line-height:.98;margin:10px 0 14px}
.pdp__rating{display:flex;gap:9px;align-items:center;font-size:13.5px;font-weight:700;margin-bottom:18px}
.pdp__rating .stars{color:var(--yellow);-webkit-text-stroke:1px var(--ink);font-size:16px}
.pdp__price{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.pdp__price b{font-family:var(--display);font-size:38px}
.pdp__price s{opacity:.45;font-size:17px}
.pdp__price em{font-style:normal;background:var(--lime);border:var(--bd-2);border-radius:99px;
  padding:4px 11px;font-size:12px;font-weight:700}
.pdp__tax{font-size:12.5px;opacity:.6;font-weight:700;margin-bottom:22px}
.spec{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:22px 0}
.spec div{background:#fff;border:var(--bd-2);border-radius:var(--r-sm);padding:12px 14px}
.spec dt{font-size:10.5px;font-weight:700;letter-spacing:.09em;opacity:.6;text-transform:uppercase;margin-bottom:4px}
.spec dd{font-family:var(--display);font-size:16px}
.qty{display:flex;align-items:center;gap:0;border:var(--bd);border-radius:99px;overflow:hidden;
  background:#fff;box-shadow:3px 3px 0 var(--ink);width:fit-content}
.qty button{width:44px;height:46px;font-size:19px;font-weight:700;transition:background .16s}
.qty button:hover{background:var(--yellow)}
.qty input{width:52px;height:46px;text-align:center;border:none;font-family:var(--display);font-size:17px;
  background:transparent}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.buyrow{display:flex;gap:13px;flex-wrap:wrap;align-items:center;margin:22px 0}
.assure{display:flex;flex-direction:column;gap:10px;margin-top:24px;padding-top:22px;
  border-top:2px dashed rgba(26,11,61,.22)}
.assure div{display:flex;gap:11px;align-items:center;font-size:14px;font-weight:500}
.assure em{font-style:normal;font-size:18px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.tabs button{border:var(--bd-2);border-radius:99px;padding:9px 17px;font-weight:700;font-size:13px;background:#fff;
  transition:all .16s}
.tabs button[aria-selected=true]{background:var(--ink);color:var(--yellow);border-color:var(--ink)}
.tabpanel{background:#fff;border:var(--bd);border-radius:var(--r);padding:26px;box-shadow:var(--sh);
  font-size:15px;line-height:1.7}
.tabpanel[hidden]{display:none}
.tabpanel h4{font-family:var(--display);font-size:19px;color:var(--indigo);margin:18px 0 9px}
.tabpanel h4:first-child{margin-top:0}
.tabpanel ul{margin:9px 0 0 20px;display:flex;flex-direction:column;gap:7px}

/* ---------- 23. CART / CHECKOUT ----------------------------------------- */
.cartlayout{display:grid;grid-template-columns:1.5fr .9fr;gap:34px;align-items:start}
.cartlist{display:flex;flex-direction:column;gap:14px}
.citem{display:grid;grid-template-columns:104px 1fr auto;gap:17px;background:#fff;border:var(--bd);
  border-radius:var(--r);padding:15px;box-shadow:var(--sh);align-items:center}
.citem .media{aspect-ratio:1/1;border-radius:var(--r-sm);border:var(--bd-2)}
.citem .media svg{width:70%}
.citem h4{font-family:var(--display);font-size:17px;line-height:1.15;margin-bottom:4px}
.citem .meta{font-size:11.5px;font-weight:700;opacity:.6;letter-spacing:.05em;text-transform:uppercase;margin-bottom:10px}
.citem .right{text-align:right;display:flex;flex-direction:column;gap:9px;align-items:flex-end}
.citem .line{font-family:var(--display);font-size:19px}
.rm{font-size:12px;font-weight:700;opacity:.6;border-bottom:2px solid transparent}
.rm:hover{opacity:1;color:var(--err);border-color:var(--err)}
.summary{background:#fff;border:var(--bd);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh-lg);
  position:sticky;top:calc(var(--nav-h) + 18px)}
.summary h3{font-family:var(--display);font-size:22px;color:var(--indigo);margin-bottom:18px}
.srow{display:flex;justify-content:space-between;gap:14px;padding:11px 0;font-size:14.5px;font-weight:500}
.srow+.srow{border-top:1.5px dashed rgba(26,11,61,.18)}
.srow.total{border-top:var(--bd);margin-top:9px;padding-top:15px;font-family:var(--display);font-size:22px}
.srow .ok{color:var(--ok);font-weight:700}
.progress{margin:16px 0 6px}
.progress__t{height:12px;border-radius:99px;background:var(--cream-dk);border:var(--bd-2);overflow:hidden}
.progress__f{height:100%;background:linear-gradient(90deg,var(--pink),var(--yellow));width:0;
  transition:width .45s cubic-bezier(.22,1,.36,1)}
.progress__l{font-size:12px;font-weight:700;margin-top:9px;text-align:center}

.form{display:flex;flex-direction:column;gap:17px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.75}
.field input,.field select,.field textarea{border:var(--bd);border-radius:var(--r-sm);padding:14px 16px;
  background:#fff;font-weight:500;box-shadow:3px 3px 0 var(--ink);transition:transform .14s,box-shadow .14s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;transform:translate(2px,2px);
  box-shadow:1px 1px 0 var(--ink)}
.field textarea{min-height:120px;resize:vertical}
.field small{font-size:11.5px;opacity:.6;font-weight:600}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.paylist{display:flex;flex-direction:column;gap:12px}
.payopt{display:flex;gap:13px;align-items:flex-start;border:var(--bd);border-radius:var(--r);padding:17px;
  background:#fff;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:all .16s}
.payopt:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.payopt input{width:19px;height:19px;accent-color:var(--indigo);margin-top:2px;flex-shrink:0}
.payopt b{font-family:var(--display);font-size:16px;display:block;margin-bottom:4px}
.payopt p{font-size:13px;opacity:.75;line-height:1.5}
.payopt.sel{border-color:var(--indigo);background:var(--lilac-pale)}
.stepbar{display:flex;gap:0;margin-bottom:30px;border:var(--bd);border-radius:99px;overflow:hidden;background:#fff}
.stepbar div{flex:1;padding:13px 10px;text-align:center;font-family:var(--display);font-size:12.5px;
  border-right:var(--bd);opacity:.4}
.stepbar div:last-child{border-right:none}
.stepbar div.on{background:var(--yellow);opacity:1}

/* ---------- 24. PROSE (policy pages) ------------------------------------ */
.prose{background:#fff;border:var(--bd);border-radius:var(--r-lg);padding:44px;box-shadow:var(--sh-lg);
  font-size:15.5px;line-height:1.75}
.prose h2{font-family:var(--display);font-size:25px;color:var(--indigo);margin:32px 0 12px}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--display);font-size:18px;margin:22px 0 9px}
.prose p{margin-bottom:14px}
.prose ul,.prose ol{margin:0 0 15px 22px;display:flex;flex-direction:column;gap:8px}
.prose table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14.5px}
.prose th,.prose td{border:var(--bd-2);padding:11px 13px;text-align:left}
.prose th{background:var(--lilac-lt);font-family:var(--display);font-size:13px}
.prose .note{background:var(--lilac-pale);border:var(--bd-2);border-radius:var(--r-sm);padding:16px 18px;
  margin:18px 0;font-weight:500}
.toc{background:var(--lilac-lt);border:var(--bd);border-radius:var(--r);padding:22px;margin-bottom:26px}
.toc h4{font-family:var(--display);font-size:15px;margin-bottom:11px}
.toc ol{margin-left:20px;display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500}

/* ---------- 25. MISC ----------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.statgrid div{background:#fff;border:var(--bd);border-radius:var(--r);padding:22px 18px;text-align:center;
  box-shadow:var(--sh)}
.statgrid b{font-family:var(--display);font-size:34px;color:var(--indigo);display:block;line-height:1}
.statgrid span{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.65;
  margin-top:7px;display:block}
#toast{position:fixed;left:50%;bottom:22px;translate:-50% 0;z-index:800;background:var(--ink);color:var(--cream);
  border:var(--bd);border-radius:99px;padding:14px 24px;font-weight:700;font-size:14px;
  box-shadow:5px 5px 0 var(--indigo);opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .3s,transform .3s;display:flex;gap:10px;align-items:center}
#toast.on{opacity:1;transform:none}
.rise{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.rise.in{opacity:1;transform:none}
#egg{position:fixed;inset:0;z-index:999;display:none;place-items:center;background:rgba(26,11,61,.93);
  backdrop-filter:blur(6px);text-align:center;padding:24px}
#egg.on{display:grid;animation:fade .4s}
@keyframes fade{from{opacity:0}}
#egg h2{font-family:var(--display);font-size:clamp(34px,7vw,80px);color:var(--yellow);
  text-shadow:5px 5px 0 var(--pink);line-height:.95}
#egg p{color:var(--cream);margin:20px auto 26px;max-width:44ch;font-size:17px;line-height:1.6}
#egg code{background:var(--lime);color:var(--ink);font-family:var(--display);font-size:26px;padding:12px 26px;
  border-radius:99px;border:var(--bd);display:inline-block}

/* ---------- 26. RESPONSIVE ---------------------------------------------- */
@media(max-width:1100px){
  .shoplayout{grid-template-columns:1fr}
  .filters{position:static;display:none}
  .filters.on{display:flex}
  .filters-toggle{display:inline-block}
}
@media(max-width:1000px){
  .grid,.grid--3{grid-template-columns:repeat(2,1fr)}
  .fight{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:1fr}
  .bundle,.kitbox,.pdp,.cartlayout,.split{grid-template-columns:1fr}
  .kitbox,.bundle{padding:28px}
  .gallery,.summary,.filters{position:static}
  .foot__grid{grid-template-columns:1fr 1fr}
  .menu{display:none}
  .burger{display:grid}
  .statgrid{grid-template-columns:repeat(2,1fr)}
  .prose{padding:28px}
  .citem{grid-template-columns:82px 1fr}
  .citem .right{grid-column:2;flex-direction:row;justify-content:space-between;width:100%;align-items:center}
}
@media(max-width:560px){
  .grid,.grid--3{grid-template-columns:1fr 1fr;gap:14px}
  .fight{grid-template-columns:repeat(2,1fr)}
  .card__name{font-size:14px}
  .sec{padding:50px 0}
  .row2{grid-template-columns:1fr}
  .spec{grid-template-columns:1fr}
  .nav__in{gap:10px;height:62px}
  .nav .brand{--bw:122px}
  .foot .brand{--bw:150px}
  .icon-btn:not(.burger){display:none}
  .icon-btn{width:38px;height:38px}
  .cart-pill{padding:8px 12px;font-size:12px;box-shadow:2px 2px 0 var(--ink)}
  .phero{padding:34px 0 38px}
  .prose{padding:22px}
  .stepbar div{font-size:10px;padding:11px 5px}
  /* three 132px chips will not fit a 375px screen */
  .bundle,.kitbox{padding:24px 18px}
  .bundle__stack .chip{width:94px}
  .bundle__stack .chip:nth-child(1){transform:rotate(-11deg) translateX(16px)}
  .bundle__stack .chip:nth-child(3){transform:rotate(11deg) translateX(-16px)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rise{opacity:1;transform:none}
}