/*
Theme Name:  Astrozon
Theme URI:   https://astrozon.example
Author:      Astrozon
Description: Premium anime figures, manga and collectibles store theme. Ships with a product post type, a filterable shop archive, a full product page and a modular front page built from template parts.
Version:     1.0.0
Requires at least: 6.0
Tested up to:      6.7
Requires PHP:      7.4
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astrozon
Tags:        e-commerce, one-column, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ============================================================
   ASTROZON — header + hero
   ============================================================ */

:root{
  --brand:#E01E26;
  --brand-dark:#B8161D;
  --brand-tint:#FDECEC;
  --ink:#14171F;
  --ink-2:#3A4150;
  --muted:#7A8291;
  --line:#E8EAEF;
  --white:#fff;

  /* the announcement bar and the footer share one dark treatment */
  --dark:#151922;
  --dark-2:#0F131A;
  --dark-line:rgba(255,255,255,.10);
  --dark-text:#A9B0BE;
  --dark-strong:#fff;

  --container:1400px;
  --header-h:72px;

  --font-display:'Archivo', 'Poppins', system-ui, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:28px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:4px; }


/* ============================================================
   HEADER PARTS  (shared by every page — see CHROME section below)
   ============================================================ */

/* --- logo --- */
.logo{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
}
.logo img{
  display:block;
  width:auto;
  height:auto;
}

/* horizontal lockup in the header */
.logo--lg img{ height:40px; }

/* stacked lockup in the footer */
.logo--stack img{ height:96px; }

/* --- nav --- */
.nav{
  display:flex;
  align-items:center;
  gap:26px;
  margin-inline:auto;
}
/* a menu assigned in Appearance -> Menus arrives as a real list */
.nav__menu{
  display:flex;
  align-items:center;
  gap:26px;
  list-style:none;
  margin:0;
  padding:0;
}
.nav__menu li{ list-style:none; }

.nav a{
  position:relative;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-2);
  padding:6px 0;
  transition:color .18s ease;
  white-space:nowrap;
}
.nav a::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:100%; height:2px;
  background:var(--brand);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ transform:scaleX(1); }
.nav .nav__sale{ color:var(--brand); }

/* --- actions --- */
.actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}
.badge{
  position:absolute;
  top:2px; right:1px;
  min-width:16px; height:16px;
  padding:0 4px;
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  font-size:10px;
  font-weight:700;
  line-height:16px;
  text-align:center;
  border:2px solid #fff;
  box-sizing:content-box;
}

/* --- burger --- */
.burger{
  display:none;
  width:38px; height:38px;
  border-radius:8px;
  padding:9px 8px;
  flex-direction:column;
  justify-content:space-between;
}
.burger span{
  display:block; height:2px; width:100%;
  background:var(--ink);
  border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}
.burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }


/* ============================================================
   HERO
   ============================================================ */

.hero{
  --scrim:.62;              /* how much dark sits over the video — lower = punchier */
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:min(640px, calc(100vh - var(--header-h)));
  display:flex;
  align-items:center;
}

/* ---------- backdrop ---------- */
.hero__bg{ position:absolute; inset:0; z-index:-1; }

/* fallback backdrop — kept dark so the hero reads the same
   whether the video plays or not */
.hero__sky{
  position:absolute; inset:0;
  background:
    radial-gradient(110% 85% at 78% 18%, #3A1420 0%, rgba(58,20,32,0) 62%),
    radial-gradient(95% 75% at 10% 88%, #241018 0%, rgba(36,16,24,0) 64%),
    linear-gradient(165deg, #161A24 0%, #1E1420 48%, #120F16 100%);
}

/* --- background video --- */
.hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 40%;
  /* fade in once the first frame is decoded so there is no black flash */
  opacity:0;
  transition:opacity .7s ease;
}
.hero__video.is-ready{ opacity:1; }

/* --- dark scrim over the video ---
   --scrim is the single dial: 0 = raw video, 1 = almost black.
   Lives on .hero so it can be tuned in one place. */
.hero__scrim{
  position:absolute;
  inset:0;
  background:
    /* heavier on the left where the headline sits */
    linear-gradient(90deg,
      rgba(10,12,18,calc(var(--scrim) * 1))    0%,
      rgba(10,12,18,calc(var(--scrim) * .74)) 34%,
      rgba(10,12,18,calc(var(--scrim) * .42)) 62%,
      rgba(10,12,18,calc(var(--scrim) * .26)) 100%),
    /* top + bottom vignette keeps the header and the fade clean */
    linear-gradient(180deg,
      rgba(10,12,18,calc(var(--scrim) * .5))    0%,
      rgba(10,12,18,0)                         26%,
      rgba(10,12,18,0)                         72%,
      rgba(10,12,18,calc(var(--scrim) * .55)) 100%);
}

/* --- falling petals --- */
.petals{ position:absolute; inset:0; overflow:hidden; }
.petals i{
  position:absolute;
  top:-8%;
  left:var(--l);
  width:11px; height:13px;
  background:#FFAFC9;
  border-radius:60% 10% 60% 10%;
  opacity:.75;
  animation:fall var(--d) linear var(--delay) infinite;
}
@keyframes fall{
  0%   { transform:translate3d(0,-40px,0) rotate(0deg); opacity:0; }
  8%   { opacity:.8; }
  100% { transform:translate3d(-90px, 105vh, 0) rotate(520deg); opacity:0; }
}

/* blends the dark hero into the white page below — kept short and
   weighted to the bottom so it reads as an edge, not fog */
.hero__fade{
  position:absolute; inset:auto 0 0 0;
  height:90px;
  background:linear-gradient(to bottom,
    rgba(255,255,255,0)   0%,
    rgba(255,255,255,.06) 45%,
    rgba(255,255,255,.55) 78%,
    #fff                 100%);
}

/* --- play / pause control for the background video --- */
.hero__vbtn{
  position:absolute;
  right:24px;
  bottom:26px;
  z-index:4;
  width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.32);
  color:#fff;
  backdrop-filter:blur(6px);
  box-shadow:0 6px 18px -8px rgba(0,0,0,.5);
  transition:background .18s ease, color .18s ease, transform .18s ease, opacity .18s ease;
  opacity:.75;
}
.hero__vbtn svg{ width:16px; height:16px; }
.hero__vbtn:hover{
  opacity:1;
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
  transform:scale(1.06);
}
.hero__vbtn .ico-play{ display:none; }
.hero__vbtn.is-paused .ico-play{ display:block; }
.hero__vbtn.is-paused .ico-pause{ display:none; }

/* ---------- content ---------- */
.hero__inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:center;
  gap:32px;
  padding-block:56px 84px;
}

/* extra local shade so the copy holds up even on a bright frame,
   without darkening the rest of the video */
.hero__copy{
  max-width:620px;
  background:radial-gradient(78% 66% at 26% 48%,
    rgba(10,12,18,.42) 0%,
    rgba(10,12,18,.20) 46%,
    rgba(10,12,18,0) 76%);
}

.hero__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2.5rem, 5.6vw, 4.25rem);
  line-height:1.02;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 2px 30px rgba(0,0,0,.45);
}
/* brand red is lifted a step so it still pops against the dark */
.hero__title .accent{ color:#FF3B45; }

.hero__sub{
  margin:22px 0 0;
  font-size:clamp(.95rem, 1.15vw, 1.0625rem);
  line-height:1.65;
  color:rgba(255,255,255,.82);
  text-shadow:0 1px 16px rgba(0,0,0,.5);
  max-width:34ch;
}

.hero__cta{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:32px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:48px;
  padding:0 30px;
  border-radius:4px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  transition:transform .18s ease, background .18s ease, color .18s ease,
             border-color .18s ease, box-shadow .18s ease;
}
.btn--primary{
  background:var(--brand);
  color:#fff;
  box-shadow:0 10px 24px -10px rgba(224,30,38,.75);
}
.btn--primary:hover{
  background:var(--brand-dark);
  transform:translateY(-2px);
  box-shadow:0 16px 30px -12px rgba(224,30,38,.8);
}
/* sits on the dark hero, so it is a light outline rather than a dark one */
.btn--ghost{
  background:rgba(255,255,255,.08);
  color:#fff;
  border:1.5px solid rgba(255,255,255,.55);
  backdrop-filter:blur(4px);
}
.btn--ghost:hover{
  background:#fff;
  border-color:#fff;
  color:var(--ink);
  transform:translateY(-2px);
}

/* ---------- character art ---------- */
.hero__art{
  position:relative;
  justify-self:end;
  align-self:center;
  width:100%;
  max-width:540px;
  animation:float 6.5s ease-in-out infinite;
}
.hero__frame{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  aspect-ratio:4/5;
  background:#0E1016;
  border:5px solid rgba(255,255,255,.75);
  box-shadow:0 34px 60px -26px rgba(70,30,60,.6);
  transform:rotate(1.6deg);
}
.hero__frame img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}
.hero__art:hover .hero__frame img{ transform:scale(1.05); }

.hero__tag{
  position:absolute;
  left:-14px;
  bottom:26px;
  z-index:2;
  padding:9px 16px;
  border-radius:6px;
  background:var(--brand);
  color:#fff;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:0 14px 26px -12px rgba(224,30,38,.9);
  transform:rotate(-3deg);
}

@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-12px); }
}


/* ============================================================
   FEATURE STRIP
   ============================================================ */

.features{ background:var(--white); }
.features--bottom{
  background:#FBFBFC;
  border-top:1px solid var(--line);
}

.features__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  padding-block:30px 34px;
}

.feature{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding-inline:18px;
  border-left:1px solid var(--line);
}
.feature:first-child{ border-left:0; }

.feature__icon{
  flex:0 0 auto;
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius:10px;
  background:var(--brand-tint);
  color:var(--brand);
}
.feature__icon svg{ width:22px; height:22px; }

.feature__text h3{
  margin:0;
  font-size:14px;
  font-weight:700;
  letter-spacing:-.005em;
  color:var(--ink);
}
.feature__text p{
  margin:3px 0 0;
  font-size:12.5px;
  color:var(--muted);
}


/* ============================================================
   SECTION SHELL
   ============================================================ */

.section{ padding-block:44px; background:#FBFBFC; }
.section--tight{ padding-block:8px 40px; }

.section__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
}
.section__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.15rem, 2vw, 1.4rem);
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--ink);
}
.section__link{
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  transition:color .18s ease;
  white-space:nowrap;
}
.section__link:hover{ color:var(--brand); }


/* ============================================================
   POPULAR COLLECTIONS
   ============================================================ */

.col-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.col-card:hover{
  transform:translateY(-4px);
  border-color:#DCDFE6;
  box-shadow:0 18px 34px -20px rgba(20,23,31,.35);
}

.col-card__media{
  position:relative;
  aspect-ratio:1/1;
  background:linear-gradient(150deg, var(--g1, #FF8A3D), var(--g2, #7C3AED));
  overflow:hidden;
}
/* soft manga-ish sheen for the placeholder state */
.col-card__media::after{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(60% 45% at 30% 20%, rgba(255,255,255,.42), transparent 70%),
    radial-gradient(50% 40% at 78% 78%, rgba(0,0,0,.28), transparent 70%);
}
.col-card__media img{
  position:relative;
  z-index:1;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}
.col-card:hover .col-card__media img{ transform:scale(1.06); }

.col-card__body{ padding:14px 15px 15px; }
.col-card__body h3{
  margin:0 0 9px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:14px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink);
}
.col-card__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.col-card__meta > span:first-child{
  font-size:12px;
  color:var(--muted);
}
.col-card__go{
  flex:0 0 auto;
  width:30px; height:30px;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid var(--line);
  color:var(--ink-2);
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.col-card__go svg{ width:15px; height:15px; }
.col-card:hover .col-card__go{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
  transform:translateX(2px);
}


/* ============================================================
   TRENDING DROPS
   ============================================================ */

.section--drops{ padding-top:8px; }

.drop{
  display:flex;
  flex-direction:column;
  height:100%;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.drop a{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
}
.drop:hover{
  transform:translateY(-4px);
  border-color:#DCDFE6;
  box-shadow:0 16px 30px -20px rgba(20,23,31,.4);
}

.drop__media{
  position:relative;
  aspect-ratio:3/4;
  background:linear-gradient(155deg, var(--g1, #FDBA74), var(--g2, #9A3412));
  overflow:hidden;
}
.drop__media::after{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(65% 45% at 28% 18%, rgba(255,255,255,.38), transparent 68%),
    radial-gradient(55% 45% at 80% 85%, rgba(0,0,0,.32), transparent 70%);
}
.drop__media img{
  position:relative;
  z-index:1;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}
.drop:hover .drop__media img{ transform:scale(1.06); }

.drop__badge{
  position:absolute;
  top:8px; left:8px;
  z-index:2;
  padding:3px 8px;
  border-radius:4px;
  background:var(--brand);
  color:#fff;
  font-size:9px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  line-height:1.5;
}

.drop__body{ padding:10px 11px 13px; }
.drop__body h3{
  margin:0;
  font-size:11.5px;
  font-weight:500;
  line-height:1.4;
  color:var(--ink-2);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.8em;
}
.drop__price{
  margin:7px 0 0;
  font-size:12.5px;
  font-weight:700;
  color:var(--ink);
}



/* ============================================================
   LIMITED EDITION PROMO
   ============================================================ */

/*
 * The banner art is a full-width piece with its own copy space on the left, so
 * it fills the panel rather than being cut into a right-hand column. The
 * gradient is only there to keep the text legible over it.
 */
.promo{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:16px;
  background:#160613;
  min-height:230px;
  display:flex;
  align-items:center;
}

.promo__art{
  position:absolute;
  inset:0;
  z-index:0;
}
.promo__art img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:right center;
}
.promo__art::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(16,5,14,.92) 0%, rgba(16,5,14,.7) 32%, rgba(16,5,14,.15) 58%, transparent 74%);
  z-index:2;
}

.promo__copy{
  position:relative;
  z-index:3;
  padding:34px 32px;
  max-width:520px;
}
.promo__eyebrow{
  margin:0 0 10px;
  font-size:11px;
  font-weight:700;
  font-style:italic;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#FF6B72;
}
.promo__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.35rem, 2.7vw, 1.85rem);
  letter-spacing:.005em;
  text-transform:uppercase;
  color:#fff;
}
.promo__sub{
  margin:10px 0 0;
  font-size:13.5px;
  color:rgba(255,255,255,.72);
}
.promo__btn{ margin-top:20px; height:42px; padding:0 24px; }


/* ============================================================
   FEATURED CHARACTERS
   ============================================================ */

.char{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.char:hover{
  transform:translateY(-4px);
  border-color:#DCDFE6;
  box-shadow:0 16px 30px -20px rgba(20,23,31,.4);
}

.char__media{
  aspect-ratio:1/1;
  overflow:hidden;
  background:#F1F2F5;
}
.char__media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 22%;
  transition:transform .45s ease;
}
.char:hover .char__media img{ transform:scale(1.07); }

.char__body{ padding:10px 11px 13px; }
.char__body h3{
  margin:0;
  font-size:12.5px;
  font-weight:700;
  color:var(--ink);
}
.char__body p{
  margin:4px 0 0;
  font-size:11px;
  color:var(--muted);
}


/* ============================================================
   EPIC STORIES BANNER
   ============================================================ */

.epic{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:16px;
  min-height:250px;
  display:flex;
  align-items:center;
  background:#E9F1FA;
}

.epic__art{
  position:absolute;
  inset:0;
  z-index:0;
}
.epic__art img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:right center;
}
.epic__art::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    rgba(233,241,250,.94) 0%,
    rgba(233,241,250,.72) 30%,
    rgba(233,241,250,.2) 54%,
    transparent 72%);
}

.epic__copy{
  position:relative;
  z-index:2;
  padding:34px 32px;
  max-width:480px;
}
.epic__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.3rem, 2.6vw, 1.8rem);
  line-height:1.16;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--ink);
}
.epic__sub{
  margin:12px 0 0;
  font-size:13.5px;
  line-height:1.6;
  color:var(--ink-2);
}
.epic__btn{ margin-top:20px; height:42px; padding:0 24px; }


/* ============================================================
   STATS
   ============================================================ */

.stats{ background:#FBFBFC; }

.stats__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
  padding-block:30px 40px;
}

.stat{
  display:flex;
  align-items:center;
  gap:12px;
}
.stat__icon{
  flex:0 0 auto;
  width:38px; height:38px;
  display:grid; place-items:center;
  color:#B9BFCB;
}
.stat__icon svg{ width:26px; height:26px; }

.stat__text{ display:flex; flex-direction:column; gap:2px; }
.stat__text strong{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.1rem, 1.9vw, 1.4rem);
  line-height:1.1;
  color:var(--brand);
}
.stat__text span{
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
}


/* ============================================================
   BEST SELLERS
   ============================================================ */

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.prod{
  display:flex;
  flex-direction:column;
  height:100%;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.prod a{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
}
.prod:hover{
  transform:translateY(-4px);
  border-color:#DCDFE6;
  box-shadow:0 18px 32px -20px rgba(20,23,31,.42);
}

.prod__media{
  position:relative;
  aspect-ratio:1/1;
  background:#F1F2F5;
  overflow:hidden;
}
.prod__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}
.prod:hover .prod__media img{ transform:scale(1.06); }

.prod__badge{
  position:absolute;
  top:9px; right:9px;
  z-index:2;
  padding:3px 9px;
  border-radius:4px;
  background:var(--brand);
  color:#fff;
  font-size:9px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1.5;
}

.prod__body{ padding:12px 13px 15px; }
.prod__body h3{
  margin:0;
  font-size:12.5px;
  font-weight:600;
  line-height:1.4;
  color:var(--ink);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.8em;
}
.prod__price{
  margin:9px 0 0;
  font-size:13px;
  font-weight:700;
  color:var(--ink);
}

/* star rating — one gradient-masked strip, --fill sets the score */
.stars{
  position:relative;
  width:66px; height:12px;
  margin-top:8px;
  background:#DEE1E7;
  -webkit-mask:var(--star-mask);
  mask:var(--star-mask);
}
.stars__on{
  position:absolute; inset:0;
  width:var(--fill, 100%);
  background:#FFB020;
}
:root{
  --star-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66' height='12' viewBox='0 0 66 12'%3E%3Cg fill='%23000'%3E%3Cpath d='M6 0l1.8 3.8 4.2.5-3 2.9.7 4.1L6 9.4 2.3 11.3 3 7.2 0 4.3l4.2-.5z'/%3E%3Cpath d='M19.5 0l1.8 3.8 4.2.5-3 2.9.7 4.1-3.7-1.9-3.7 1.9.7-4.1-3-2.9 4.2-.5z'/%3E%3Cpath d='M33 0l1.8 3.8 4.2.5-3 2.9.7 4.1L33 9.4l-3.7 1.9.7-4.1-3-2.9 4.2-.5z'/%3E%3Cpath d='M46.5 0l1.8 3.8 4.2.5-3 2.9.7 4.1-3.7-1.9-3.7 1.9.7-4.1-3-2.9 4.2-.5z'/%3E%3Cpath d='M60 0l1.8 3.8 4.2.5-3 2.9.7 4.1L60 9.4l-3.7 1.9.7-4.1-3-2.9 4.2-.5z'/%3E%3C/g%3E%3C/svg%3E")
    no-repeat left center;
}



/* ============================================================
   NEW ARRIVALS  (reuses .prod card)
   ============================================================ */

.prod__badge--new{
  right:auto;
  left:9px;
}


/* ============================================================
   TOP BRANDS
   ============================================================ */

.brands{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  align-items:center;
  gap:18px;
  padding:6px 0 4px;
}

.brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  min-height:54px;
  padding:6px 4px;
  border-radius:8px;
  filter:grayscale(1);
  opacity:.68;
  transition:filter .22s ease, opacity .22s ease, transform .22s ease;
  text-align:center;
}
.brand:hover{ filter:none; opacity:1; transform:translateY(-2px); }

.brand span{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.05;
  color:var(--ink);
}

/* Bandai — white type on a blue block */
.brand--bandai span{
  background:#0B4EA2;
  color:#fff;
  font-size:12px;
  letter-spacing:.04em;
  padding:5px 12px;
  border-radius:3px;
}

/* Good Smile Company */
.brand__gsc{ font-size:15px; }
.brand__gsc b{ color:var(--brand); font-weight:800; }
.brand--gsc small{
  font-size:8px;
  font-weight:700;
  letter-spacing:.24em;
  color:var(--ink-2);
}

/* Banpresto — wordmark over a bar */
.brand--banpresto span{ font-size:14px; letter-spacing:-.02em; }
.brand--banpresto i{
  display:block;
  width:46px; height:7px;
  margin-top:2px;
  background:var(--ink);
  border-radius:2px;
  clip-path:polygon(0 0, 100% 0, 86% 100%, 14% 100%);
}

/* Kotobukiya */
.brand--koto small{
  font-size:7px;
  font-weight:700;
  letter-spacing:.14em;
  color:#1F7A3D;
}
.brand--koto span{ font-size:13.5px; color:#0E7A34; letter-spacing:-.02em; }

/* Funko */
.brand--funko span{
  font-family:'Archivo', cursive;
  font-size:20px;
  font-style:italic;
  font-weight:700;
  letter-spacing:-.03em;
  color:#1D6FE0;
}

/* MegaHouse */
.brand--mega{ flex-direction:row; gap:6px; }
.brand--mega i{
  width:15px; height:15px;
  background:#D62828;
  clip-path:polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
}
.brand--mega span{ font-size:14px; letter-spacing:-.02em; }


/* ============================================================
   NEWSLETTER
   ============================================================ */

/* full-width art with its own copy space on the left, like the other banners */
.news{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:16px;
  min-height:210px;
  display:flex;
  align-items:center;
  background:#FBE7DA;
}

.news__art{
  position:absolute;
  inset:0;
  z-index:0;
}
.news__art img,
.news__video{
  width:100%; height:100%;
  object-fit:cover;
  object-position:right center;
  display:block;
}
.news__art::after{
  content:'';
  position:absolute; inset:0;
  /* the form sits over this, so it holds opacity a little further right */
  background:linear-gradient(90deg,
    rgba(251,231,218,.95) 0%,
    rgba(251,231,218,.82) 34%,
    rgba(251,231,218,.3) 58%,
    transparent 76%);
}

.news__copy{
  position:relative;
  z-index:2;
  padding:30px 30px 32px;
  max-width:520px;
}
.news__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.05rem, 2vw, 1.3rem);
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--ink);
}
.news__sub{
  margin:8px 0 0;
  font-size:12.5px;
  color:var(--ink-2);
}

.news__form{
  display:flex;
  gap:10px;
  margin-top:18px;
  max-width:400px;
}
.news__input{
  flex:1 1 auto;
  min-width:0;
  height:42px;
  padding:0 14px;
  border-radius:5px;
  border:1px solid #E9CFD2;
  background:#fff;
  font:inherit;
  font-size:13px;
  color:var(--ink);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.news__input::placeholder{ color:#A9AEBA; }
.news__input:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(224,30,38,.16);
}
.news__btn{
  height:42px;
  padding:0 22px;
  flex:0 0 auto;
  border-radius:5px;
}

.news__msg{
  margin:10px 0 0;
  min-height:1em;
  font-size:12px;
  font-weight:600;
  color:#1F7A3D;
}
.news__msg.is-error{ color:#C2410C; }


/* ============================================================
   INSTAGRAM FEED
   ============================================================ */

.ig__head{ margin-bottom:18px; }
.ig__handle{
  margin:6px 0 0;
  font-size:12.5px;
  color:var(--muted);
}

.ig__grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:14px;
}

.ig__item{
  position:relative;
  display:block;
  aspect-ratio:4/5;
  border-radius:12px;
  overflow:hidden;
  background:#F1F2F5;
}
.ig__item img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}
.ig__item::after{
  content:'';
  position:absolute; inset:0;
  background:rgba(20,23,31,.42);
  opacity:0;
  transition:opacity .25s ease;
}
.ig__item:hover img{ transform:scale(1.07); }
.ig__item:hover::after{ opacity:1; }

.ig__icon{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  place-items:center;
  color:#fff;
  opacity:0;
  transform:scale(.8);
  transition:opacity .25s ease, transform .25s ease;
}
.ig__icon svg{ width:28px; height:28px; }
.ig__item:hover .ig__icon{ opacity:1; transform:scale(1); }

.ig__cta{
  display:flex;
  justify-content:center;
  margin-top:26px;
}


/* ============================================================
   DISCORD BANNER
   ============================================================ */

.discord{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:16px;
  min-height:190px;
  display:flex;
  align-items:center;
  background:linear-gradient(100deg, #3B2C9E 0%, #4A34B8 40%, #5B3FD6 100%);
}

.discord__art{
  position:absolute;
  inset:0 0 0 auto;
  width:min(66%, 700px);
  z-index:0;
}
.discord__art img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 30%;
  mix-blend-mode:luminosity;
  opacity:.55;
}
.discord__art::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    #3B2C9E 0%,
    rgba(63,45,166,.9) 24%,
    rgba(80,55,205,.35) 60%,
    rgba(91,63,214,.15) 100%);
}

.discord__logo{
  position:absolute;
  right:5%;
  top:50%;
  transform:translateY(-50%);
  width:min(150px, 22%);
  height:auto;
  z-index:1;
  color:#fff;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.35));
}

.discord__copy{
  position:relative;
  z-index:2;
  padding:30px 30px 32px;
  max-width:540px;
}
.discord__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.15rem, 2.2vw, 1.5rem);
  letter-spacing:.01em;
  text-transform:uppercase;
  color:#fff;
}
.discord__sub{
  margin:10px 0 0;
  font-size:13px;
  line-height:1.6;
  color:rgba(255,255,255,.82);
}
.discord__btn{
  margin-top:20px;
  height:42px;
  padding:0 24px;
  background:#fff;
  color:#3B2C9E;
  border-radius:5px;
}
.discord__btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 26px -12px rgba(0,0,0,.5);
}


/* ============================================================
   CUSTOMER REVIEWS
   ============================================================ */

/* ---------- the wall: two lanes drifting opposite ways ----------
   Each lane holds one group of cards; slider.js clones the group until it
   is wider than the screen, then slides the track by exactly one group —
   so the loop never shows a seam. Without the script the lanes stay put
   and simply scroll by hand. */
.revwall{
  --card:300px;
  --gap:16px;
  display:grid;
  gap:var(--gap);
  /* fade both ends so cards enter and leave instead of being chopped off */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.revwall__lane{
  overflow:hidden;
}

.revwall__track{
  display:flex;
  width:max-content;
}

.revwall__group{
  list-style:none;
  margin:0;
  padding:4px 0 6px;
  display:flex;
  gap:var(--gap);
  /* the clone must sit a full gap away, or the seam shows as a tight join */
  padding-right:var(--gap);
}

/* --copies and --dur are measured by the script, once the clones exist */
.revwall__lane.is-rolling .revwall__track{
  animation:revwall-fwd var(--dur, 60s) linear infinite;
}
.revwall__lane--back.is-rolling .revwall__track{
  animation-name:revwall-back;
}

/* let people read a card without chasing it */
.revwall__lane.is-rolling:hover .revwall__track,
.revwall__lane.is-rolling:focus-within .revwall__track{
  animation-play-state:paused;
}

@keyframes revwall-fwd{
  to{ transform:translateX(calc(-100% / var(--copies, 2))); }
}
@keyframes revwall-back{
  from{ transform:translateX(calc(-100% / var(--copies, 2))); }
  to{ transform:translateX(0); }
}

/* ---------- the card ---------- */
.review{
  flex:0 0 var(--card);
  display:flex;
  flex-direction:column;
  padding:18px 18px 20px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--line);
}
.review .stars{ margin:0 0 13px; }
.review__text{
  margin:0;
  flex:1 1 auto;
  font-size:12.5px;
  line-height:1.65;
  color:var(--ink-2);
}
.review__by{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.review__mono{
  flex:0 0 30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:color-mix(in srgb, var(--brand) 12%, #fff);
  color:var(--brand);
  font-size:12.5px;
  font-weight:700;
}
.review__who{ min-width:0; }
.review__who strong{
  display:block;
  font-size:12.5px;
  font-weight:700;
  color:var(--ink);
}
.review__who a{
  display:block;
  font-size:11.5px;
  line-height:1.45;
  color:var(--ink-3, var(--ink-2));
}
.review__who a:hover{ color:var(--brand); }

@media (max-width:560px){
  .revwall{ --card:255px; --gap:12px; }
  .review{ padding:15px 15px 17px; }
}

/* A visitor who asked for less motion gets a plain scrollable row. */
@media (prefers-reduced-motion:reduce){
  .revwall__lane.is-rolling .revwall__track{ animation:none; }
}



/* ============================================================
   BOX SETS BANNER
   ============================================================ */

.boxset{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:16px;
  min-height:250px;
  display:flex;
  align-items:center;
  background:#FBE7DA;
}

.boxset__copy{
  position:relative;
  z-index:2;
  padding:30px;
  max-width:520px;
}
.boxset__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.1rem, 2.1vw, 1.45rem);
  line-height:1.28;
  letter-spacing:.005em;
  text-transform:uppercase;
  color:var(--ink);
}
.boxset__btn{ margin-top:22px; height:42px; padding:0 24px; }

/* absolute, so the artwork can never drive the banner's height */
.boxset__art{
  position:absolute;
  inset:0;
  z-index:0;
}
.boxset__art img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:right center;
}
.boxset__art::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    rgba(251,231,218,.94) 0%,
    rgba(251,231,218,.72) 28%,
    rgba(251,231,218,.18) 52%,
    transparent 70%);
}


/* ============================================================
   FOOTER
   ============================================================ */

.footer{
  background:var(--dark);
  border-top:1px solid var(--dark-line);
  color:var(--dark-text);
}

.footer__grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1.15fr 1fr 1.2fr;
  gap:28px;
  padding-block:40px 34px;
}

/* the logo's wordmark is black — on the dark footer it needs its own plate
   rather than a filter, which would flatten the brand red along with it */
.footer__brand .logo{
  display:inline-block;
  margin-bottom:16px;
  padding:12px 16px;
  border-radius:12px;
  background:#fff;
}
.footer__about{
  margin:0;
  max-width:250px;
  font-size:12px;
  line-height:1.65;
  color:var(--dark-text);
}

.socials{
  display:flex;
  gap:9px;
  margin-top:18px;
}
.socials a{
  width:32px; height:32px;
  display:grid; place-items:center;
  border-radius:8px;
  color:var(--dark-strong);
  background:rgba(255,255,255,.06);
  border:1px solid var(--dark-line);
  transition:background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
}
.socials svg{ width:15px; height:15px; }
.socials a:hover{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
  transform:translateY(-2px);
}

.footer__col h3{
  margin:0 0 14px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--dark-strong);
}
.footer__col ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.footer__col a{
  font-size:12px;
  color:var(--dark-text);
  transition:color .18s ease, padding-left .18s ease;
}
.footer__col a:hover{ color:var(--brand); padding-left:3px; }

/* payment marks */
.pays{
  display:flex;
  flex-direction:row !important;
  flex-wrap:wrap;
  gap:8px !important;
  list-style:none;
  margin:0;
  padding:0;
}

/* the roomier row used in the product buy box and the cart summary */
.pays--wide{ justify-content:center; }

/* Each mark ships as its own 38x24 tile — border, background and wordmark all
   drawn by the brand — so there is nothing here to style but the size. */
.pay{ display:flex; }
.pay svg{
  display:block;
  width:38px;
  height:24px;
  border-radius:4px;
}
.pays--wide .pay svg{ width:44px; height:28px; }

.pay--lock{
  display:grid;
  place-items:center;
  min-width:38px;
  height:24px;
  color:var(--ink-2);
}
.pay--lock svg{ width:17px; height:17px; }
.pays--wide .pay--lock,
.pays--wide .pay--lock svg{ height:28px; }
.pays--wide .pay--lock svg{ width:19px; height:19px; }

.footer__bar{
  border-top:1px solid var(--dark-line);
  background:var(--dark-2);
}
.footer__bar p{
  margin:0;
  padding-block:16px;
  font-size:11.5px;
  color:var(--dark-text);
}


/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */

.topbar{
  background:var(--dark);
  border-bottom:1px solid var(--dark-line);
  font-size:11.5px;
  color:var(--dark-strong);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:34px;
  padding-block:5px;
}
.topbar p,
.topbar ul{ margin:0; padding:0; }
.topbar__ship{ display:flex; align-items:center; gap:6px; white-space:nowrap; }
.topbar__ship strong{ color:var(--dark-strong); font-weight:700; }

.topbar__mid{
  list-style:none;
  display:flex;
  gap:26px;
}
.topbar__mid li{ display:flex; align-items:center; gap:6px; white-space:nowrap; }

.topbar__ico{
  display:grid; place-items:center;
  width:14px; height:14px;
  color:var(--brand);
  flex:0 0 auto;
}
.topbar__ico svg{ width:100%; height:100%; }

.topbar__links{
  list-style:none;
  display:flex;
  align-items:center;
  gap:0;
}
.topbar__links li + li::before{
  content:'';
  display:inline-block;
  width:1px; height:11px;
  margin:0 12px;
  background:rgba(255,255,255,.18);
  vertical-align:-1px;
}
.topbar__links a{ color:var(--dark-strong); transition:color .18s ease; }
.topbar__links a:hover{ color:var(--brand); }


/* ============================================================
   HEADER
   ============================================================ */

.shead{
  position:sticky; top:0; z-index:100;
  background:#fff;
  border-bottom:1px solid transparent;
  transition:box-shadow .25s ease, border-color .25s ease;
}
.shead.is-stuck{
  border-bottom-color:var(--line);
  box-shadow:0 6px 24px rgba(20,23,31,.07);
}

.shead__inner{
  display:flex;
  align-items:center;
  gap:26px;
  min-height:78px;
  padding-block:12px;
}


.nav--shop{ margin-inline:0; gap:22px; }
.nav--shop a{ font-size:12px; letter-spacing:.05em; }
.nav--shop a.is-active{ color:var(--brand); }
.nav--shop a.is-active::after{ transform:scaleX(1); }

/* --- search --- */
.searchbar{
  position:relative;
  flex:1 1 auto;
  min-width:0;
  max-width:440px;
  margin-left:auto;
  display:flex;
}
.searchbar input{
  flex:1 1 auto;
  min-width:0;
  height:42px;
  padding:0 50px 0 15px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
  font:inherit;
  font-size:12.5px;
  color:var(--ink);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.searchbar input::placeholder{ color:#A9AEBA; }
.searchbar input:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(224,30,38,.14);
}
.searchbar button{
  position:absolute;
  right:4px; top:4px;
  width:38px; height:34px;
  display:grid; place-items:center;
  border-radius:5px;
  background:var(--brand);
  color:#fff;
  transition:background .18s ease;
}
.searchbar button svg{ width:17px; height:17px; }
.searchbar button:hover{ background:var(--brand-dark); }

/* --- user actions --- */
.uactions{
  display:flex;
  align-items:center;
  gap:20px;
  flex:0 0 auto;
}
.uaction{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  color:var(--ink);
  transition:color .18s ease;
}
.uaction:hover{ color:var(--brand); }
.uaction__ico{
  position:relative;
  display:grid; place-items:center;
  width:22px; height:22px;
}
.uaction__ico svg{ width:21px; height:21px; }
.uaction small{
  font-size:10.5px;
  font-weight:500;
  color:var(--muted);
}
.uaction:hover small{ color:var(--brand); }
.uaction .badge{ top:-6px; right:-9px; }


/* "New" pill above a nav item */
.nav--shop a{ position:relative; }
.navtag{
  position:absolute;
  top:-13px; left:50%;
  transform:translateX(-50%);
  padding:1px 5px;
  border-radius:3px;
  background:var(--brand);
  color:#fff;
  font-size:7.5px;
  font-style:normal;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1.6;
  white-space:nowrap;
}




/* ---------- chrome responsive ---------- */

@media (max-width:1180px){
  .logo--lg img{ height:34px; }
  .nav--shop{ gap:15px; }
  .nav--shop a{ font-size:11px; letter-spacing:.03em; }
  .searchbar{ max-width:250px; }
  .uactions{ gap:14px; }
}

@media (max-width:980px){
  .topbar__mid{ display:none; }

  .shead__inner{ flex-wrap:wrap; gap:14px 18px; }
  .searchbar{ order:3; max-width:none; flex-basis:100%; margin-left:0; }
  .uactions{ margin-left:auto; }
  .burger{ display:flex; }

  .nav--shop{
    order:4;
    position:static;
    flex-basis:100%;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    display:none;
    padding:4px 0 0;
    border:0;
    box-shadow:none;
    background:none;
  }
  .nav--shop.is-open{ display:flex; }
  .nav--shop a{ padding:12px 0; border-bottom:1px solid var(--line); font-size:12.5px; }
  .nav--shop a::after{ display:none; }
  .navtag{ position:static; transform:none; margin-left:8px; display:inline-block; }
}

@media (max-width:640px){
  .topbar__ship{ font-size:10.5px; }
  .topbar__links li:not(:last-child){ display:none; }
  .topbar__links li + li::before{ display:none; }

  .logo--lg img{ height:30px; }
  .logo--stack img{ height:82px; }
  .uaction small{ display:none; }
  .uactions{ gap:12px; }
}



/* ============================================================
   SLIDER  —  one draggable carousel used by every card row
   ------------------------------------------------------------
   markup:  <div class="slider" data-per="6">
              <ul class="slider__track"> …cards… </ul>
            </div>
   arrows + dots are injected by the script in index.html
   ============================================================ */

.slider{
  --per:4;
  --gap:16px;
  position:relative;
}
.slider[data-per="6"]{ --per:6; }
.slider[data-per="5"]{ --per:5; }
.slider[data-per="4"]{ --per:4; }
.slider[data-per="3"]{ --per:3; }

.slider__track{
  list-style:none;
  margin:0;
  padding:4px 2px 6px;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  gap:var(--gap);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  cursor:grab;
}
.slider__track::-webkit-scrollbar{ display:none; }
.slider__track > *{ scroll-snap-align:start; }


/* while dragging: kill snap + smooth so the row tracks the pointer 1:1,
   and block clicks so a drag never opens a product */
.slider__track.is-dragging{
  cursor:grabbing;
  scroll-snap-type:none;
  scroll-behavior:auto;
  user-select:none;
}
.slider__track.is-dragging *{ pointer-events:none; }

/* ---------- arrows ---------- */
.slider__arrow{
  position:absolute;
  top:var(--arrow-top, 38%);
  z-index:5;
  width:36px; height:36px;
  display:grid; place-items:center;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--line);
  color:var(--ink);
  box-shadow:0 8px 20px -8px rgba(20,23,31,.45);
  transition:background .18s ease, color .18s ease, border-color .18s ease,
             opacity .18s ease, transform .18s ease;
}
.slider__arrow svg{ width:17px; height:17px; }
.slider__arrow:hover:not(:disabled){
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
  transform:scale(1.06);
}
.slider__arrow:disabled{ opacity:0; pointer-events:none; }
.slider__arrow--prev{ left:-15px; }
.slider__arrow--next{ right:-15px; }

/* ---------- dots ---------- */
.slider__dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:18px;
}
.slider__dot{
  width:6px; height:6px;
  padding:0;
  border-radius:999px;
  background:#D4D8E0;
  transition:width .25s ease, background .25s ease;
}
.slider__dot.is-active{
  width:18px;
  background:var(--brand);
}
.slider__dots:has(.slider__dot:only-child){ display:none; }

/* ---------- per-section tuning ---------- */
.slider--chars .slider__arrow{ --arrow-top:42%; }

@media (max-width:1080px){
  .slider[data-per="6"]{ --per:5; }
}
@media (max-width:920px){
  .slider{ --gap:14px; }
  .slider[data-per="6"]{ --per:4; }
  .slider[data-per="5"]{ --per:4; }
  .slider[data-per="4"]{ --per:3; }
  .slider__arrow--prev{ left:-8px; }
  .slider__arrow--next{ right:-8px; }
}
@media (max-width:720px){
  .slider[data-per="6"],
  .slider[data-per="5"]{ --per:3; }
}
@media (max-width:560px){
  .slider{ --gap:12px; }
  .slider[data-per="6"],
  .slider[data-per="5"],
  .slider[data-per="4"],
  .slider[data-per="3"]{ --per:2; }
  .slider__arrow{ display:none; }
}

/* ============================================================
   SUPPORT STRIP  —  closes every inner page, so it lives here rather
   than in cart.css
   ============================================================ */

.helpstrip{
  border-top:1px solid var(--line);
  background:#fff;
}
.helpstrip__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:26px;
  padding-block:30px;
}
.helpitem{
  display:flex;
  align-items:flex-start;
  gap:13px;
}
.helpitem__ico{
  flex:0 0 auto;
  width:36px; height:36px;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid var(--line);
  color:var(--ink-2);
}
.helpitem__ico svg{ width:19px; height:19px; }
.helpitem h3{
  margin:0;
  font-size:13px;
  font-weight:700;
  color:var(--ink);
}
.helpitem p{
  margin:3px 0 0;
  font-size:12px;
  color:var(--muted);
}
.helpitem a{
  display:inline-block;
  margin-top:3px;
  font-size:12px;
  font-weight:600;
  color:var(--ink-2);
}
.helpitem a:hover{ color:var(--brand); }


@media (max-width:980px){
  .helpstrip__grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:720px){
  .helpstrip__grid{ grid-template-columns:1fr; gap:20px; }
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:920px){
  .hero{ min-height:0; }
  .hero__inner{
    grid-template-columns:1fr;
    gap:8px;
    padding-block:48px 56px;
    text-align:center;
  }
  .hero__copy{ max-width:none; margin-inline:auto; }
  .hero__sub{ margin-inline:auto; }
  .hero__cta{ justify-content:center; }
  .hero__art{ justify-self:center; max-width:360px; margin-top:26px; }
  .hero__tag{ left:auto; right:-10px; }
  /* on narrow screens the copy is centred, so shade evenly instead of left-heavy */
  .hero{ --scrim:.66; }
  .hero__scrim{
    background:
      linear-gradient(180deg,
        rgba(10,12,18,calc(var(--scrim) * .9))   0%,
        rgba(10,12,18,calc(var(--scrim) * .72)) 40%,
        rgba(10,12,18,calc(var(--scrim) * .78)) 74%,
        rgba(10,12,18,calc(var(--scrim) * .95)) 100%);
  }
  .hero__copy{
    background:radial-gradient(86% 58% at 50% 42%,
      rgba(10,12,18,.4) 0%,
      rgba(10,12,18,.2) 48%,
      rgba(10,12,18,0) 76%);
  }
  .hero__video{ object-position:center 32%; }
  .hero__vbtn{ right:16px; bottom:18px; width:34px; height:34px; }

  .features__grid{ grid-template-columns:repeat(2,1fr); gap:22px 0; }
  .feature:nth-child(odd){ border-left:0; }
  .feature{ justify-content:flex-start; }


  .epic{ min-height:0; }
  .epic__art{ width:100%; }
  .epic__art::after{
    background:linear-gradient(180deg,
      rgba(237,241,247,.55) 0%,
      rgba(232,238,247,.9) 46%,
      #EDF1F7 100%);
  }
  .epic__copy{ max-width:none; padding:150px 24px 32px; }


  .brands{ grid-template-columns:repeat(3,1fr); gap:20px 12px; }

  .news{ min-height:0; }
  .news__art{ width:56%; }
  .news__copy{ max-width:none; padding:26px 22px 28px; }
  .news__form{ max-width:none; }

  .ig__grid{ grid-template-columns:repeat(3,1fr); gap:12px; }
  .ig__grid > :nth-child(n+4){ display:none; }

  .discord{ min-height:0; }
  .discord__art{ width:100%; }
  .discord__art::after{
    background:linear-gradient(180deg, rgba(59,44,158,.62) 0%, rgba(66,48,178,.92) 55%, #4A34B8 100%);
  }
  .discord__logo{ right:6%; top:26px; transform:none; width:86px; }
  .discord__copy{ max-width:none; padding:120px 22px 28px; }


  .boxset__art{ width:100%; }
  .boxset__copy{ max-width:none; padding:150px 22px 28px; }
  .boxset__art::after{
    background:linear-gradient(180deg, rgba(251,235,234,.35) 0%, rgba(246,216,217,.25) 70%, #F6D8D9 100%);
  }

  .footer__grid{
    grid-template-columns:repeat(2,1fr);
    gap:30px 24px;
    padding-block:34px 28px;
  }
  .footer__brand{ grid-column:1 / -1; }
  .footer__about{ max-width:420px; }

  .promo{ min-height:0; }
  .promo__art{ width:100%; opacity:.55; }
  .promo__art::after{
    background:linear-gradient(180deg, rgba(14,16,22,.55) 0%, rgba(14,16,22,.92) 62%, #0E1016 100%);
  }
  .promo__copy{ max-width:none; padding:30px 24px 34px; }

  .stats__grid{ grid-template-columns:repeat(2,1fr); gap:24px 12px; }
}

@media (max-width:560px){
  :root{ --header-h:64px; }
  .container{ padding-inline:18px; }

  .hero__title{ font-size:clamp(2.1rem, 10vw, 2.9rem); }
  .hero__sub br{ display:none; }
  .btn{ height:46px; padding:0 24px; flex:1 1 auto; }

  .features__grid{ grid-template-columns:1fr; gap:18px; padding-block:26px; }
  .feature{ border-left:0; padding-inline:0; }

  .section{ padding-block:34px; }
  .col-card__body{ padding:12px 12px 13px; }

  .promo__title{ font-size:1.3rem; }
  .promo__btn,
  .epic__btn{ width:auto; flex:0 0 auto; }

  .char__body{ padding:9px 9px 11px; }

  .epic__title{ font-size:1.25rem; }
  .epic__copy{ padding:120px 20px 28px; }
  .epic__sub br{ display:none; }

  .stats__grid{ padding-block:24px 32px; }

  .prod__body{ padding:10px 10px 13px; }

  .brands{ grid-template-columns:repeat(2,1fr); }

  .news__art{ width:100%; opacity:.5; }
  .news__art::after{
    background:linear-gradient(180deg, rgba(251,234,233,.6) 0%, rgba(247,217,218,.94) 52%, #F3CCCE 100%);
  }
  .news__copy{ padding:110px 20px 26px; }
  .news__form{ flex-direction:column; }
  .news__btn{ width:100%; }

  .ig__grid{ grid-template-columns:repeat(2,1fr); }
  .ig__grid > :nth-child(n+3){ display:none; }
  .ig__cta .btn{ width:100%; }

  .discord__sub br{ display:none; }
  .discord__btn{ width:auto; flex:0 0 auto; }


  .boxset__title{ font-size:1.1rem; }
  .boxset__btn{ width:auto; flex:0 0 auto; }

  .footer__grid{ grid-template-columns:1fr; gap:26px; }
}

/* ============================================================
   ENTRANCE ANIMATIONS
   ------------------------------------------------------------
   Elements carry data-anim; the script adds .is-in when they
   scroll into view (immediately for whatever is already on
   screen at load). Gated behind .js so the page is never stuck
   invisible if the script fails to run.
   ============================================================ */

.js [data-anim]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .72s cubic-bezier(.22,.72,.28,1) var(--d, 0ms),
             transform .72s cubic-bezier(.22,.72,.28,1) var(--d, 0ms);
}

.js [data-anim="left"]{  transform:translateX(-34px); }
.js [data-anim="right"]{ transform:translateX(34px); }
.js [data-anim="zoom"]{  transform:scale(.96); }

/* for elements that already own their transform (the floating hero art) */
.js [data-anim="fade"]{ transform:none; }

.js [data-anim].is-in{
  opacity:1;
  transform:none;
}

/* the hero should feel like it lands, not like it scrolls in */
.js .hero__copy[data-anim]{ transition-duration:.9s; }
.js .hero__art[data-anim]{ transition-duration:1.1s; transition-delay:.18s; }


@media (prefers-reduced-motion:reduce){
  /* the script also pauses the video — this keeps it visible as a still */
  .hero__video{ opacity:1; }

  /* never leave content hidden behind an animation that won't run */
  .js [data-anim]{ opacity:1 !important; transform:none !important; }

  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}


/* ============================================================
   WORDPRESS ADDITIONS
   Classes WordPress emits that the static build never needed.
   ============================================================ */

.entry__content{ max-width:820px; font-size:15px; line-height:1.8; color:var(--ink-2); }
.entry__content h2{ margin:32px 0 12px; font-family:var(--font-display); font-size:1.35rem; color:var(--ink); }
.entry__content h3{ margin:26px 0 10px; font-size:1.1rem; color:var(--ink); }
.entry__content p{ margin:0 0 16px; }
.entry__content a{ color:var(--brand); text-decoration:underline; }
.entry__content img{ border-radius:12px; margin:8px 0 20px; }
.entry__content blockquote{
  margin:22px 0; padding:14px 20px;
  border-left:3px solid var(--brand);
  background:#FBFBFC; border-radius:0 8px 8px 0;
}
.entry__content ul,
.entry__content ol{ margin:0 0 18px; padding-left:22px; }
.entry__content li{ margin-bottom:8px; }

/* WordPress pagination markup maps onto the .pager design */
.page-numbers{ list-style:none; }
ul.page-numbers{
  display:flex; align-items:center; justify-content:center;
  gap:7px; margin:34px 0 0; padding:0;
}
ul.page-numbers li{ display:block; }
.page-numbers a,
.page-numbers span{
  min-width:32px; height:32px;
  display:grid; place-items:center;
  padding:0 8px;
  border-radius:6px;
  border:1px solid var(--line);
  background:#fff;
  font-size:12.5px; font-weight:600;
  color:var(--ink-2);
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.page-numbers a:hover{ border-color:var(--brand); color:var(--brand); }
.page-numbers .current{ background:var(--brand); border-color:var(--brand); color:#fff; }
.page-numbers .dots{ border-color:transparent; background:none; color:var(--muted); }
.page-numbers svg{ width:15px; height:15px; }

/* empty states */
.noresults{
  max-width:520px; margin:0 auto; padding:60px 20px 70px;
  text-align:center;
}
.noresults h2{
  margin:0 0 10px;
  font-family:var(--font-display); font-weight:800;
  font-size:1.3rem; color:var(--ink);
}
.noresults p{ margin:0 0 22px; font-size:13.5px; color:var(--muted); }

/* blog listing reuses the product-card grid */
.postlist{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  list-style:none; margin:0; padding:0;
}
@media (max-width:980px){ .postlist{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .postlist{ grid-template-columns:repeat(2,1fr); gap:12px; } }

/* the admin bar must not hide the sticky header */
body.admin-bar .shead{ top:32px; }
@media (max-width:782px){ body.admin-bar .shead{ top:46px; } }

/* alignment classes from the block editor */
.alignleft{ float:left; margin:4px 20px 16px 0; }
.alignright{ float:right; margin:4px 0 16px 20px; }
.aligncenter{ display:block; margin-inline:auto; }
.wp-caption{ max-width:100%; }
.wp-caption-text{ font-size:12px; color:var(--muted); text-align:center; }
.screen-reader-text{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}


/* ============================================================
   PAGE HEAD  (blog, static pages, single posts)
   The shop and product pages use the .pcrumbs bar instead.
   ============================================================ */

.pagehead{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:linear-gradient(100deg, #FBEBEA 0%, #F9E3E2 50%, #FBEFEE 100%);
}
.pagehead__art{
  position:absolute;
  inset:0 0 0 auto;
  width:min(52%, 620px);
  z-index:0;
}
.pagehead__art img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 26%;
  opacity:.34;
}
.pagehead__art::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg, #FBEBEA 0%, rgba(249,227,226,.86) 26%, rgba(251,239,238,0) 74%);
}
.pagehead__inner{
  position:relative;
  z-index:2;
  padding-block:30px;
}
.pagehead__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.4rem, 3vw, 1.85rem);
  letter-spacing:-.015em;
  color:var(--ink);
}
.pagehead__sub{
  margin:9px 0 0;
  font-size:13px;
  color:var(--ink-2);
}

.crumbs{ margin-top:16px; }
.crumbs ol{
  list-style:none;
  display:flex;
  align-items:center;
  margin:0; padding:0;
  font-size:12px;
}
.crumbs li{ color:var(--muted); }
.crumbs li a{ color:var(--ink-2); transition:color .18s ease; }
.crumbs li a:hover{ color:var(--brand); }
.crumbs li + li::before{
  content:'›';
  margin:0 9px;
  color:#B9BFCB;
}

@media (max-width:640px){
  .pagehead__art{ width:100%; }
  .pagehead__art::after{
    background:linear-gradient(90deg, #FBEBEA 0%, rgba(249,227,226,.9) 44%, rgba(251,239,238,.5) 100%);
  }
}


/* ============================================================
   CARD BUTTONS  (front-page rows)
   Outside the card's own link — a button inside an anchor would navigate
   instead of adding to the cart.
   ============================================================ */

.cardbtns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:auto;
  padding:0 11px 12px;
}
.prod .cardbtns{ padding:0 13px 14px; }

.cardbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  height:34px;
  padding:0 8px;
  border-radius:7px;
  font-size:11px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.cardbtn svg{ width:14px; height:14px; flex:0 0 auto; }

.cardbtn--cart{
  background:var(--brand);
  color:#fff;
}
.cardbtn--cart:hover{ background:var(--brand-dark); }
.cardbtn--cart.is-added{ background:#16A34A; }
.cardbtn--cart.is-error{ background:var(--ink-2); }
.cardbtn--cart.is-busy{ opacity:.7; }

.cardbtn--buy{
  background:#fff;
  color:var(--brand);
  border:1.5px solid var(--brand);
}
.cardbtn--buy:hover{ background:var(--brand); color:#fff; }

/* the label is the first thing to go when the card gets narrow */
@media (max-width:1180px){
  .cardbtns{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .cardbtn{ height:32px; font-size:10.5px; }
  .cardbtn--cart span{ display:none; }
}


/* ============================================================
   CATEGORY DIAL  (under the hero)
   ============================================================ */

.cattiles{
  --dial:var(--brand);          /* swap for #1878C8 to match the blue reference */
  --dial-soft:var(--brand-tint);
  background:#fff;
  padding-block:30px 26px;
}
.cattiles__row{
  display:grid;
  grid-template-columns:repeat(8, minmax(0,1fr));
  gap:16px;
  justify-items:center;
}

.cattile{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:11px;
  text-align:center;
  min-width:0;
}

/* the artwork is already round, so the disc is just a frame for it */
.cattile__disc{
  position:relative;
  display:block;
  width:82px; height:82px;
  border-radius:50%;
  overflow:hidden;
  background:#fff;
  box-shadow:0 0 0 1px var(--dial-soft);
  transition:transform .22s ease, box-shadow .22s ease;
}
.cattile__disc img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.cattile:hover .cattile__disc{
  transform:translateY(-3px);
  box-shadow:0 0 0 2px var(--dial), 0 12px 22px -14px rgba(20,23,31,.5);
}

.cattile__name{
  font-family:var(--font-display);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.35;
  color:var(--ink);
  transition:color .18s ease;
}
.cattile:hover .cattile__name{ color:var(--dial); }

@media (max-width:1080px){
  .cattiles__row{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:22px 16px; }
}
@media (max-width:640px){
  .cattiles{ padding-block:22px 20px; }
  .cattiles__row{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px 10px; }
  .cattile__disc{ width:66px; height:66px; }
  .cattile__name{ font-size:9.5px; }
}


/* strapline under a section heading */
.section__head--sub{ align-items:flex-start; }
.section__sub{
  margin:6px 0 0;
  font-size:13px;
  color:var(--muted);
}


/* ============================================================
   ABOUT  (closing statement above the footer)
   ============================================================ */

.about{
  background:#fff;
  padding-block:74px 82px;
}
.about__inner{
  max-width:720px;
  margin-inline:auto;
  text-align:center;
}
.about__eyebrow{
  margin:0 0 18px;
  font-family:var(--font-display);
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--brand);
}
.about__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(1.6rem, 4vw, 2.5rem);
  line-height:1.14;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:var(--ink);
}
.about__text{
  margin:20px 0 0;
  font-size:14px;
  line-height:1.8;
  color:var(--ink-2);
}
.about__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:46px;
  margin-top:28px;
  padding:0 26px;
  border:1.5px solid var(--ink);
  border-radius:6px;
  font-family:var(--font-display);
  font-size:12px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink);
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.about__btn:hover{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}

@media (max-width:640px){
  .about{ padding-block:52px 56px; }
  .about__text{ font-size:13px; }
}


/* ============================================================
   CONFIRMATION DIALOG  (add to cart)
   ============================================================ */

.azdlg{
  position:fixed;
  inset:0;
  z-index:400;
  display:grid;
  place-items:center;
  padding:5vh 20px;
}
.azdlg[hidden]{ display:none; }
body.azdlg-open{ overflow:hidden; }

.azdlg__scrim{
  position:absolute;
  inset:0;
  background:rgba(12,14,20,.55);
  backdrop-filter:blur(3px);
  opacity:0;
  transition:opacity .18s ease;
}
.azdlg.is-on .azdlg__scrim{ opacity:1; }

.azdlg__card{
  position:relative;
  width:100%;
  max-width:400px;
  padding:34px 28px 26px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 30px 70px -24px rgba(20,23,31,.55);
  text-align:center;
  opacity:0;
  transform:translateY(10px) scale(.96);
  transition:opacity .2s ease, transform .2s cubic-bezier(.2,.9,.3,1.2);
}
.azdlg.is-on .azdlg__card{ opacity:1; transform:none; }

.azdlg__x{
  position:absolute;
  top:12px; right:12px;
  width:32px; height:32px;
  display:grid; place-items:center;
  border-radius:8px;
  color:var(--muted);
  transition:background .18s ease, color .18s ease;
}
.azdlg__x svg{ width:17px; height:17px; }
.azdlg__x:hover{ background:#F1F2F5; color:var(--ink); }

/* the tick draws itself in */
.azdlg__tick{
  display:grid;
  place-items:center;
  width:62px; height:62px;
  margin:0 auto 16px;
  border-radius:50%;
  background:#E9F8EE;
  color:#16A34A;
}
.azdlg__tick svg{ width:30px; height:30px; }
.azdlg__tick svg path{
  stroke-dasharray:26;
  stroke-dashoffset:26;
  animation:azdlg-draw .42s .1s ease forwards;
}
.azdlg__tick--bad{ background:var(--brand-tint); color:var(--brand); }
.azdlg__tick--bad svg path,
.azdlg__tick--bad svg circle{ animation:none; stroke-dashoffset:0; }

@keyframes azdlg-draw{ to{ stroke-dashoffset:0; } }

@media (prefers-reduced-motion:reduce){
  .azdlg__card{ transition:none; }
  .azdlg__tick svg path{ animation:none; stroke-dashoffset:0; }
}

.azdlg__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.15rem;
  letter-spacing:-.01em;
  color:var(--ink);
}
.azdlg__text{
  margin:10px 0 0;
  font-size:13px;
  line-height:1.7;
  color:var(--ink-2);
}

/* what was added */
.azdlg__item{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:18px;
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#FCFCFD;
  text-align:left;
}
.azdlg__thumb{
  flex:0 0 auto;
  width:46px;
  border-radius:7px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#F4F5F7;
}
.azdlg__thumb img{ width:100%; height:auto; display:block; }
.azdlg__item p{
  margin:0;
  font-size:12.5px;
  font-weight:600;
  line-height:1.4;
  color:var(--ink);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.azdlg__acts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:22px;
}
.azdlg__acts--one{ grid-template-columns:1fr; }

.azdlg__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 14px;
  border-radius:9px;
  font-size:12.5px;
  font-weight:700;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.azdlg__btn--ghost{
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink-2);
}
.azdlg__btn--ghost:hover{ border-color:var(--ink); color:var(--ink); }
.azdlg__btn--solid{
  background:var(--brand);
  color:#fff;
  box-shadow:0 10px 20px -12px rgba(224,30,38,.85);
}
.azdlg__btn--solid:hover{ background:var(--brand-dark); color:#fff; }

.azdlg__link{
  display:inline-block;
  margin-top:14px;
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  text-decoration:underline;
  text-underline-offset:3px;
}
.azdlg__link:hover{ color:var(--brand); }

@media (max-width:420px){
  .azdlg__card{ padding:30px 20px 22px; }
  .azdlg__acts{ grid-template-columns:1fr; }
}


/* ============================================================
   MEGA MENU
   ============================================================ */

/* the panel spans the header, so it is positioned against .shead */
.shead__inner{ position:static; }
.nav__item{ position:static; }

.nav__link{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.nav__chev{
  width:13px; height:13px;
  margin-top:1px;
  transition:transform .22s ease;
}
.nav__item.is-open > .nav__link .nav__chev{ transform:rotate(180deg); }

.mega{
  position:absolute;
  left:0; right:0;
  top:100%;
  z-index:120;
  background:#fff;
  border-top:1px solid var(--line);
  box-shadow:0 24px 40px -24px rgba(20,23,31,.34);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav__item.is-open > .mega{
  opacity:1;
  visibility:visible;
  transform:none;
}

.mega__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) 234px;
  gap:34px;
  padding-block:24px 30px;
}
.mega__main{ min-width:0; }

/* panel header — the same on flat and branched panels */
.mega__bar{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:18px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.mega__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:-.01em;
  text-transform:none;
  color:var(--ink);
}
.mega__all{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
  color:var(--brand);
  white-space:nowrap;
}
.mega__all::after{ display:none; }
.mega__all svg{ width:15px; height:15px; }
.mega__all:hover{ opacity:.75; }

.mega__cols{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:22px 26px;
  align-content:start;
}

.mega__h{
  margin:0 0 10px;
  padding-bottom:9px;
  border-bottom:1px solid var(--line);
  font-family:var(--font-display);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.mega__h a{
  color:var(--ink);
  padding:0;
  font-size:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
}
.mega__h a::after{ display:none; }
.mega__h a:hover{ color:var(--brand); }

.mega__list{ list-style:none; margin:0; padding:0; }
.mega__list li[hidden]{ display:none; }

/* .nav a is uppercase and tracked — panel links are plain sentence case */
.mega__list a{
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 0;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink-2);
  white-space:normal;
}
.mega__list a::after{ display:none; }
.mega__list a:hover{ color:var(--brand); }
.mega__list i{
  margin-left:auto;
  font-style:normal;
  font-size:11px;
  color:var(--muted);
}

.mega__list--flat{ padding-top:2px; }

/* reveals the tail of a long column */
.mega__more{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:7px;
  padding:0;
  font-size:11.5px;
  font-weight:700;
  color:var(--ink-2);
  transition:color .18s ease;
}
.mega__more span{ font-size:13px; line-height:1; color:var(--brand); }
.mega__more:hover{ color:var(--brand); }

/* featured card */
.mega__feature{
  display:block;
  padding:0 0 0 26px;
  border-left:1px solid var(--line);
  letter-spacing:0;
  text-transform:none;
  white-space:normal;
}
.mega__feature::after{ display:none; }
.mega__art{
  display:block;
  aspect-ratio:1/1;
  margin-bottom:12px;
  border-radius:11px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#F4F5F7;
}
.mega__art img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}
.mega__feature:hover .mega__art img{ transform:scale(1.05); }
.mega__eyebrow{
  display:block;
  font-family:var(--font-display);
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brand);
}
.mega__feature strong{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-top:6px;
  font-size:12.5px;
  font-weight:700;
  line-height:1.4;
  color:var(--ink);
}
.mega__price{
  display:block;
  margin-top:5px;
  font-size:12.5px;
  font-weight:800;
  color:var(--ink);
}

/* scrim behind an open panel, so the page recedes */
.megascrim{
  position:fixed;
  inset:var(--header-h) 0 0;
  z-index:99;
  background:rgba(12,14,20,.28);
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease, visibility .2s;
}
body.mega-open .megascrim{ opacity:1; visibility:visible; }

@media (max-width:1180px){
  .mega__inner{ grid-template-columns:minmax(0,1fr); }
  .mega__feature{ display:none; }
}

/* the burger menu already stacks the nav — panels become plain accordions */
@media (max-width:980px){
  .nav__chev{ margin-left:auto; }
  .nav__item{ width:100%; }
  .nav__item > .nav__link{ width:100%; }
  .mega{
    position:static;
    display:none;
    opacity:1;
    visibility:visible;
    transform:none;
    border-top:0;
    box-shadow:none;
  }
  .nav__item.is-open > .mega{ display:block; }
  .mega__inner{ padding:6px 0 14px; gap:16px; }
  .mega__cols{ grid-template-columns:1fr; gap:16px; }
  .mega__bar{ margin-bottom:12px; }
  .megascrim{ display:none; }
}


/* ============================================================
   ABOUT PAGE
   ============================================================ */

.story{ padding-block:64px; }
.story--lead{ padding-block:70px 46px; }
.story--tint{ background:#FAFBFC; }
.story--close{ padding-bottom:74px; }

.story__inner{ max-width:760px; }

.story__eyebrow{
  margin:0 0 14px;
  font-family:var(--font-display);
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--brand);
}
.story__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(1.7rem, 4vw, 2.6rem);
  line-height:1.12;
  letter-spacing:-.02em;
  color:var(--ink);
}
.story__h{
  margin:0 0 18px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.3rem, 2.6vw, 1.9rem);
  line-height:1.2;
  letter-spacing:-.015em;
  color:var(--ink);
}
.story__lead{
  margin:20px 0 0;
  font-size:16px;
  line-height:1.7;
  font-weight:500;
  color:var(--ink);
}
.story__body{
  margin:16px 0 0;
  font-size:14.5px;
  line-height:1.8;
  color:var(--ink-2);
}
.story__body--wide{ max-width:640px; }
.story__note{
  margin:18px 0 0;
  padding-left:14px;
  border-left:3px solid var(--brand);
  font-size:13.5px;
  line-height:1.7;
  color:var(--ink);
}

/* heading left, prose right */
.story__split{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:36px 50px;
  align-items:start;
}
.story__col p{
  margin:0 0 16px;
  font-size:14.5px;
  line-height:1.8;
  color:var(--ink-2);
}

/* category chips */
.chips{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:6px 0 0;
  padding:0;
}
.chips a{
  display:inline-block;
  padding:7px 13px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  color:var(--ink-2);
  transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.chips a:hover{
  border-color:var(--brand);
  background:var(--brand-tint);
  color:var(--brand);
}

/* numbered reasons */
.reasons{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:20px;
  margin:32px 0 0;
  padding:0;
  counter-reset:reason;
}
.reason{
  padding:24px 22px 26px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.reason:hover{
  border-color:#DCDFE6;
  transform:translateY(-3px);
  box-shadow:0 16px 30px -22px rgba(20,23,31,.45);
}
.reason__n{
  display:block;
  margin-bottom:14px;
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:900;
  letter-spacing:-.02em;
  color:var(--brand-tint);
  -webkit-text-stroke:1px var(--brand);
}
.reason h3{
  margin:0 0 8px;
  font-size:14.5px;
  font-weight:800;
  color:var(--ink);
}
.reason p{
  margin:0;
  font-size:13px;
  line-height:1.7;
  color:var(--ink-2);
}

.story__cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}
.btn--ink{ border-color:var(--ink); color:var(--ink); }
.btn--ink:hover{ background:var(--ink); color:#fff; }

/* the three-fact row on this page */
.stats__grid--3{ grid-template-columns:repeat(3, 1fr); }

@media (max-width:900px){
  .story{ padding-block:48px; }
  .story__split{ grid-template-columns:1fr; gap:22px; }
  .reasons{ grid-template-columns:1fr; }
  .stats__grid--3{ grid-template-columns:1fr; }
}


/* ============================================================
   CONTACT PAGE
   ============================================================ */

/* cart.css paints the body grey here, so the white cards read as cards */
.contactpage{ padding-bottom:52px; }

.contact__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 380px;
  gap:24px;
  align-items:start;
  padding-top:22px;
}

.contact__fields{ margin-top:2px; }
.contact__send{ height:48px; padding:0 30px; }

.contact__error{
  margin:0 0 16px;
  padding:13px 15px;
  border:1px solid var(--line);
  border-left:3px solid var(--brand);
  border-radius:9px;
  background:#FCFCFD;
  font-size:13px;
  color:var(--ink-2);
}

.contact__done{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:20px;
  border:1px solid #CFE8D6;
  border-radius:11px;
  background:#F1FAF3;
}
.contact__tick{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:40px; height:40px;
  border-radius:50%;
  background:#E1F5E8;
  color:#16A34A;
}
.contact__tick svg{ width:21px; height:21px; }
.contact__done strong{
  display:block;
  font-size:14px;
  font-weight:800;
  color:var(--ink);
}
.contact__done p{
  margin:4px 0 0;
  font-size:13px;
  color:var(--ink-2);
}

/* the honeypot must be reachable to bots and invisible to everyone else */
.az-hp{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}

.contact__side{
  display:flex;
  flex-direction:column;
  gap:18px;
  position:sticky;
  top:98px;
}

.contact__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.contact__list li{
  display:flex;
  align-items:flex-start;
  gap:13px;
}
.contact__ico{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:38px; height:38px;
  border-radius:10px;
  background:var(--brand-tint);
  color:var(--brand);
}
.contact__ico svg{ width:19px; height:19px; }
.contact__list h3{
  margin:0 0 4px;
  font-size:12.5px;
  font-weight:800;
  color:var(--ink);
}
.contact__list a{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--brand);
}
.contact__list a:hover{ text-decoration:underline; }
.contact__list p{
  margin:4px 0 0;
  font-size:11.5px;
  color:var(--muted);
}

@media (max-width:980px){
  .contact__grid{ grid-template-columns:1fr; }
  .contact__side{ position:static; }
}


/* ============================================================
   SEARCH SUGGESTIONS
   ============================================================ */

.searchbar{ position:relative; }

.sugg{
  position:absolute;
  left:0; right:0;
  top:calc(100% + 8px);
  z-index:130;
  max-height:min(70vh, 460px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:8px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 22px 40px -22px rgba(20,23,31,.42);
}
.sugg[hidden]{ display:none; }
.sugg.is-busy{ opacity:.6; }

.sugg__head{
  margin:8px 8px 6px;
  font-family:var(--font-display);
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

.sugg__item,
.sugg__cat,
.sugg__all{
  display:flex;
  align-items:center;
  gap:11px;
  padding:8px;
  border-radius:9px;
  color:var(--ink-2);
  transition:background .14s ease, color .14s ease;
}
.sugg__item:hover,
.sugg__cat:hover,
.sugg__all:hover,
.sugg__item.is-active,
.sugg__cat.is-active,
.sugg__all.is-active{ background:#F4F5F7; }

.sugg__thumb{
  flex:0 0 auto;
  width:42px; height:42px;
  border-radius:7px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#F4F5F7;
}
.sugg__thumb img{ width:100%; height:100%; object-fit:cover; }

.sugg__text{ flex:1 1 auto; min-width:0; }
.sugg__text strong{
  display:block;
  font-size:12.5px;
  font-weight:600;
  line-height:1.35;
  color:var(--ink);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sugg__text small{
  display:block;
  margin-top:2px;
  font-size:11px;
  color:var(--muted);
}
.sugg__price{
  flex:0 0 auto;
  font-size:12.5px;
  font-weight:800;
  color:var(--ink);
}

.sugg__cat svg{ width:16px; height:16px; flex:0 0 auto; color:var(--muted); }
.sugg__cat span{
  flex:1 1 auto;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink);
}
.sugg__cat i{ font-style:normal; font-size:11px; color:var(--muted); }

.sugg__all{
  justify-content:center;
  margin-top:4px;
  border-top:1px solid var(--line);
  border-radius:0 0 9px 9px;
  padding-top:12px;
  font-size:12px;
  font-weight:700;
  color:var(--brand);
}
.sugg__all svg{ width:15px; height:15px; }

.sugg__none{
  margin:0;
  padding:16px 10px;
  text-align:center;
  font-size:12.5px;
  color:var(--muted);
}

@media (max-width:980px){
  .sugg{ max-height:60vh; }
}


/* ============================================================
   SITE-WIDE SALE BAND
   ============================================================ */

.saleband{
  background:linear-gradient(100deg, var(--brand) 0%, #C0161D 60%, #9E1118 100%);
  color:#fff;
}
.saleband__inner{
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  padding-block:18px;
}

/* the number reads as a stamp, not body copy */
.saleband__badge{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:74px; height:74px;
  border-radius:50%;
  background:#fff;
  color:var(--brand);
  line-height:1;
}
.saleband__badge strong{
  display:flex;
  align-items:flex-start;
  font-family:var(--font-display);
  font-size:1.7rem;
  font-weight:900;
  letter-spacing:-.03em;
}
.saleband__badge i{
  font-style:normal;
  font-size:.85rem;
  font-weight:800;
  margin-top:2px;
}
.saleband__badge span{
  margin-top:3px;
  font-family:var(--font-display);
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.16em;
}

.saleband__text{ flex:1 1 300px; min-width:0; }
.saleband__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(1.15rem, 2.3vw, 1.6rem);
  line-height:1.15;
  letter-spacing:-.015em;
  text-transform:uppercase;
  color:#fff;
}
.saleband__sub{
  margin:6px 0 0;
  font-size:13px;
  line-height:1.55;
  color:rgba(255,255,255,.86);
}

.saleband__points{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:7px;
  flex:0 0 auto;
}
.saleband__points li{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  font-weight:600;
  color:rgba(255,255,255,.94);
  white-space:nowrap;
}
.saleband__points svg{ width:15px; height:15px; flex:0 0 auto; }

.saleband__btn{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:9px;
  height:46px;
  padding:0 24px;
  border-radius:9px;
  background:#fff;
  color:var(--brand);
  font-family:var(--font-display);
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:transform .18s ease, box-shadow .18s ease;
}
.saleband__btn svg{ width:16px; height:16px; }
.saleband__btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 22px -12px rgba(0,0,0,.5);
}

@media (max-width:1080px){
  .saleband__points{ display:none; }
}
@media (max-width:720px){
  .saleband__inner{ gap:16px; }
  .saleband__badge{ width:62px; height:62px; }
  .saleband__badge strong{ font-size:1.4rem; }
  .saleband__btn{ width:100%; justify-content:center; }
}


/* ---------- sale countdown ---------- */

.countdown{
  flex:0 0 auto;
  text-align:center;
}
.countdown__label{
  margin:0 0 7px;
  font-family:var(--font-display);
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.countdown__clock{
  display:flex;
  align-items:stretch;
  gap:6px;
}
.countdown__cell{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:50px;
  padding:7px 8px 6px;
  border-radius:9px;
  background:rgba(0,0,0,.22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
.countdown__cell b{
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:900;
  line-height:1;
  letter-spacing:.01em;
  /* the seconds column must not jiggle the row as digits change */
  font-variant-numeric:tabular-nums;
  color:#fff;
}
.countdown__cell small{
  margin-top:3px;
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.7);
}

@media (max-width:1180px){
  .countdown__cell{ min-width:44px; }
  .countdown__cell b{ font-size:1.05rem; }
}
@media (max-width:720px){
  .countdown{ width:100%; text-align:left; }
  .countdown__clock{ justify-content:flex-start; }
}


/* ---------- bulk order button (announcement bar) ---------- */

.topbar__links .bulkbtn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 11px;
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  font-weight:700;
  letter-spacing:.02em;
  transition:background .18s ease, transform .18s ease;
}
.topbar__links .bulkbtn svg{ width:14px; height:14px; }
.topbar__links .bulkbtn:hover{
  background:#fff;
  color:var(--brand);
  transform:translateY(-1px);
}

/* the pill is its own thing — it does not need the divider before it */
.topbar__links li:has(.bulkbtn) + li::before{ margin-left:14px; }

@media (max-width:900px){
  /* the bar is tight here; the pill is the one link worth keeping */
  .topbar__links li:not(:has(.bulkbtn)){ display:none; }
  .topbar__links li + li::before{ display:none; }
}