/* =====================================================================
   SHIT MY PANTS SHIRTS — design system
   Ported from the claude.ai/studio handoff (ShitMyPantsShirts Redesign.html)
   + WooCommerce / WordPress integration layer at the bottom.
   ===================================================================== */

/* ============ TOKENS ============ */
:root{
  --paper: oklch(0.965 0.018 82);
  --paper-2: oklch(0.995 0.006 90);
  --card: oklch(0.99 0.008 88);
  --ink: oklch(0.205 0.018 60);
  --ink-soft: oklch(0.44 0.02 62);
  --ink-faint: oklch(0.62 0.015 65);
  --line: oklch(0.88 0.018 80);
  --line-2: oklch(0.82 0.02 75);
  --accent: #E2512B;
  --good: oklch(0.62 0.13 150);
  --font-display: 'Anton', sans-serif;
  --font-ui: 'Archivo', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;
  --maxw: 1240px;
  --radius: 14px;
  --shadow: 0 1px 0 oklch(0.88 0.02 80), 0 10px 30px -18px oklch(0.4 0.04 60 / 0.5);
}

*{ box-sizing:border-box; }
body.smps{
  font-family:var(--font-ui);
  background:var(--paper);
  color:var(--ink);
  margin:0;
  -webkit-font-smoothing:antialiased;
}
.smps img{ max-width:100%; display:block; }
.smps ::selection{ background:var(--accent); color:#fff; }
.smps a{ color:inherit; }

.smps-main{ display:block; }

/* ============ BUTTONS ============ */
.smps .btn{
  display:inline-block; text-align:center; text-decoration:none;
  background:var(--accent); color:#fff; border:none;
  font-family:var(--font-ui); font-weight:800; font-size:15px;
  letter-spacing:.01em; padding:14px 22px; border-radius:999px;
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
  box-shadow:0 2px 0 oklch(0.35 0.12 35);
}
.smps .btn:hover{ transform:translateY(-1px); filter:brightness(1.05); color:#fff; }
.smps .btn:active{ transform:translateY(1px); box-shadow:0 0 0 oklch(0.35 0.12 35); }
.smps .btn--xl{ font-size:16px; padding:16px 28px; }
.smps .btn--block{ width:100%; display:block; }
.smps .btn--ghost{
  background:transparent; color:var(--ink); border:2px solid var(--ink);
  box-shadow:none; padding:14px 26px;
}
.smps .btn--ghost:hover{ background:var(--ink); color:var(--paper); filter:none; }
.smps .is-added{ background:var(--good)!important; box-shadow:0 2px 0 oklch(0.4 0.1 150)!important; color:#fff!important; }
.smps .link{ background:none; border:none; color:var(--accent); font-weight:700; font-size:15px; padding:0; text-decoration:none; cursor:pointer; }
.smps .link:hover{ text-decoration:underline; }
.smps .link--sm{ font-size:13px; }
.smps .eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); font-weight:700;
}

/* ============ ANNOUNCEMENT ============ */
.ann{ background:var(--ink); color:var(--paper); overflow:hidden; }
.ann__track{ display:flex; gap:0; white-space:nowrap; width:max-content; animation:marq 28s linear infinite; }
.ann__item{
  font-family:var(--font-mono); font-size:12px; font-weight:700;
  letter-spacing:.14em; padding:9px 0; display:inline-flex; align-items:center;
  text-transform:uppercase;
}
.ann__dot{ color:var(--accent); margin:0 22px; }
@keyframes marq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============ HEADER ============ */
.hdr{ position:sticky; top:0; z-index:40; background:oklch(0.965 0.018 82 / 0.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.hdr__inner{ max-width:var(--maxw); margin:0 auto; padding:0 28px; height:74px; display:flex; align-items:center; gap:28px; }
.logo{ background:none; border:none; display:flex; align-items:center; gap:10px; padding:0; text-decoration:none; cursor:pointer; }
.logo__mark{ font-size:26px; line-height:1; }
.logo__txt{ font-family:var(--font-display); font-size:17px; line-height:.92; text-align:left; letter-spacing:.01em; text-transform:uppercase; color:var(--ink); }
.hdr__nav{ display:flex; gap:6px; margin-left:8px; }
.navlink{ background:none; border:none; font-weight:700; font-size:15px; color:var(--ink-soft); padding:8px 12px; border-radius:8px; text-decoration:none; cursor:pointer; }
.navlink:hover{ color:var(--ink); background:oklch(0.92 0.02 80); }
.navlink.is-active{ color:var(--ink); }
.navlink.is-active::after{ content:""; display:block; height:3px; background:var(--accent); border-radius:2px; margin-top:3px; }
.hdr__right{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.iconbtn{ background:none; border:none; font-size:22px; color:var(--ink); width:40px; height:40px; border-radius:50%; line-height:1; text-decoration:none; display:grid; place-items:center; cursor:pointer; }
.iconbtn:hover{ background:oklch(0.92 0.02 80); }
.cartbtn{ display:flex; align-items:center; gap:9px; background:var(--ink); color:var(--paper); border:none; font-weight:800; font-size:14px; padding:10px 16px; border-radius:999px; cursor:pointer; text-decoration:none; }
.cartbtn:hover{ filter:brightness(1.1); color:var(--paper); }
.cartbtn__count{ background:var(--accent); color:#fff; min-width:22px; height:22px; border-radius:999px; display:grid; place-items:center; font-size:12px; padding:0 5px; }
.hdr__burger{ display:none; background:none; border:none; font-size:24px; color:var(--ink); width:40px; height:40px; border-radius:50%; cursor:pointer; }
.hdr__burger:hover{ background:oklch(0.92 0.02 80); }

/* header search popover (native <details>) */
.hdr__search{ position:relative; }
.hdr__search > summary{ list-style:none; cursor:pointer; }
.hdr__search > summary::-webkit-details-marker{ display:none; }
.hdr__searchpop{ position:absolute; right:0; top:48px; background:var(--paper-2); border:1px solid var(--line-2); border-radius:14px; padding:12px; box-shadow:var(--shadow); z-index:50; }
.hdr__searchpop form{ display:flex; gap:8px; }
.hdr__searchpop input[type=search]{ border:1px solid var(--line-2); border-radius:999px; padding:11px 16px; font-size:14px; font-family:var(--font-ui); background:var(--card); min-width:220px; }
.hdr__searchpop .btn{ padding:11px 18px; }

/* mobile nav drawer */
.mnav{ position:fixed; inset:0; z-index:55; pointer-events:none; }
.mnav__scrim{ position:absolute; inset:0; background:oklch(0.2 0.02 60 / 0); transition:background .25s; }
.mnav__panel{ position:absolute; top:0; left:0; height:100%; width:min(320px,86vw); background:var(--paper); transform:translateX(-100%); transition:transform .28s cubic-bezier(.4,0,.1,1); display:flex; flex-direction:column; padding:22px; gap:6px; box-shadow:20px 0 50px -30px oklch(0.2 0.04 60 / .6); }
.mnav.is-open{ pointer-events:auto; }
.mnav.is-open .mnav__scrim{ background:oklch(0.2 0.02 60 / .42); }
.mnav.is-open .mnav__panel{ transform:translateX(0); }
.mnav__panel a{ font-weight:700; font-size:18px; padding:12px 8px; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--line); }
.mnav__close{ align-self:flex-end; background:none; border:none; font-size:20px; color:var(--ink-soft); width:36px; height:36px; cursor:pointer; }

/* ============ LAYOUT HELPERS ============ */
.sec__head{ max-width:var(--maxw); margin:0 auto 26px; padding:0 28px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.sec__head--center{ flex-direction:column; align-items:center; text-align:center; gap:8px; }
.sec__title{ font-family:var(--font-display); font-size:clamp(30px,4vw,46px); text-transform:uppercase; letter-spacing:.01em; margin:0; line-height:.95; font-weight:400; }
.grid{ max-width:var(--maxw); margin:0 auto; padding:0 28px; display:grid; gap:22px; }
.grid--4{ grid-template-columns:repeat(4,1fr); }

/* ============ HERO ============ */
.hero{ max-width:var(--maxw); margin:0 auto; padding:54px 28px 40px; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.hero__h{ font-family:var(--font-display); font-size:clamp(48px,7vw,86px); line-height:.9; text-transform:uppercase; margin:14px 0 18px; letter-spacing:.005em; font-weight:400; }
.hero__h em{ font-style:normal; color:var(--accent); position:relative; }
.hero__h em::after{ content:""; position:absolute; left:0; right:0; bottom:.08em; height:.1em; background:var(--accent); opacity:.25; }
.hero__sub{ font-size:19px; line-height:1.5; color:var(--ink-soft); max-width:30em; margin:0 0 26px; }
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; }
.hero__trust{ display:flex; gap:30px; margin-top:34px; padding-top:24px; border-top:1px solid var(--line); }
.hero__trust div{ display:flex; flex-direction:column; }
.hero__trust strong{ font-family:var(--font-display); font-size:24px; letter-spacing:.01em; font-weight:400; }
.hero__trust span{ font-size:13px; color:var(--ink-faint); }
.hero__art{ position:relative; }
.hero__slot{ position:relative; border-radius:20px; overflow:hidden; aspect-ratio:4/5; border:1px solid var(--line); box-shadow:var(--shadow); }
.hero__slot img{ width:100%; height:100%; object-fit:cover; }
.hero__sticker{ position:absolute; bottom:16px; left:16px; background:var(--ink); color:var(--paper); font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.14em; padding:8px 12px; border-radius:8px; }

/* product imagery wrapper (real images from WooCommerce) */
.pimg{ position:relative; overflow:hidden; display:block; }
.pimg img{ width:100%; height:100%; object-fit:cover; }
.pimg__ph{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:oklch(0.3 0.03 60 / .5); }

/* ============ CATEGORY NAV ============ */
.catnav{ padding:34px 0 10px; }
.catnav__grid{ max-width:var(--maxw); margin:0 auto; padding:0 28px; display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.cattile{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 18px 18px; text-align:left; display:flex; flex-direction:column; gap:8px; min-height:150px; transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease; text-decoration:none; color:inherit; }
.cattile:hover{ transform:translateY(-3px); border-color:var(--ink); box-shadow:var(--shadow); }
.cattile__name{ font-family:var(--font-display); font-size:21px; text-transform:uppercase; line-height:.95; font-weight:400; }
.cattile__blurb{ font-size:13px; color:var(--ink-soft); line-height:1.35; flex:1; }
.cattile__count{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); letter-spacing:.06em; }
.cattile__go{ font-weight:800; font-size:13px; color:var(--accent); }

/* ============ PRODUCT CARD ============ */
.feat{ padding:46px 0; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; cursor:pointer; transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease; position:relative; display:flex; flex-direction:column; }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-2); }
.card__media{ position:relative; display:block; }
.card__link{ text-decoration:none; color:inherit; display:block; }
.card__badge{ position:absolute; top:10px; left:10px; z-index:2; }
.card__add{ position:absolute; left:12px; right:12px; bottom:12px; z-index:2; background:var(--paper-2); color:var(--ink); border:1px solid var(--ink); font-weight:800; font-size:13px; padding:10px; border-radius:999px; opacity:0; transform:translateY(8px); transition:opacity .15s ease, transform .15s ease, background .15s; cursor:pointer; }
.card:hover .card__add{ opacity:1; transform:translateY(0); }
.card__add:hover{ background:var(--ink); color:var(--paper); }
.card__add.is-added{ background:var(--good); color:#fff; border-color:var(--good); }
.card__add[disabled]{ opacity:.5; cursor:default; }
.card__body{ padding:14px 16px 18px; display:flex; flex-direction:column; gap:0; }
.card__title{ font-size:16px; font-weight:700; margin:0 0 6px; line-height:1.2; }
.card__title a{ text-decoration:none; color:inherit; }
.card__meta{ display:flex; align-items:center; gap:6px; margin-bottom:8px; min-height:18px; }
.card__rev{ font-size:12px; color:var(--ink-faint); }
.stars{ color:var(--line-2); letter-spacing:1px; line-height:1; }
.stars .star.on{ color:#F2A900; }
.price{ font-family:var(--font-display); font-size:19px; letter-spacing:.01em; font-weight:400; }
.price--lg{ font-size:24px; }
.price--xl{ font-size:34px; display:block; margin:6px 0 4px; }
.price del{ color:var(--ink-faint); font-size:.7em; margin-right:6px; }
.price ins{ text-decoration:none; }

.badge{ font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:var(--ink); color:var(--paper); padding:5px 9px; border-radius:6px; display:inline-block; }
.badge--hot{ background:var(--accent); color:#fff; }
.badge--new{ background:var(--good); color:#fff; }

/* ============ VALUE PROPS ============ */
.props{ max-width:var(--maxw); margin:10px auto; padding:30px 28px; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.prop__num{ font-family:var(--font-mono); font-size:13px; color:var(--accent); font-weight:700; }
.prop h3{ font-family:var(--font-display); font-size:23px; text-transform:uppercase; margin:10px 0 8px; font-weight:400; }
.prop p{ font-size:15px; line-height:1.5; color:var(--ink-soft); margin:0; }

/* ============ SOCIAL / REVIEWS ============ */
.social{ padding:54px 0; }
.reviews{ max-width:var(--maxw); margin:0 auto; padding:0 28px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.review{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin:0; display:flex; flex-direction:column; gap:12px; }
.review blockquote{ margin:0; font-size:15px; line-height:1.5; }
.review figcaption{ display:flex; flex-direction:column; gap:2px; margin-top:auto; }
.review figcaption strong{ font-size:14px; }
.review figcaption span{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); letter-spacing:.04em; }

/* ============ COMMUNITY BAND ============ */
.band{ background:var(--ink); color:var(--paper); text-align:center; padding:70px 28px; margin-top:10px; }
.band__h{ font-family:var(--font-display); font-size:clamp(36px,5vw,60px); text-transform:uppercase; margin:0 0 14px; font-weight:400; }
.band__sub{ font-size:18px; line-height:1.5; color:oklch(0.85 0.01 80); max-width:34em; margin:0 auto 28px; }
.band__form{ display:flex; gap:10px; max-width:480px; margin:0 auto 12px; }
.band__form input{ flex:1; border:none; border-radius:999px; padding:15px 20px; font-size:15px; font-family:var(--font-ui); }
.band__fine{ font-family:var(--font-mono); font-size:12px; color:oklch(0.7 0.01 80); letter-spacing:.06em; }

/* ============ SHOP ============ */
.shop{ padding-bottom:30px; }
.shop__hero{ max-width:var(--maxw); margin:0 auto; padding:40px 28px 22px; }
.shop__h{ font-family:var(--font-display); font-size:clamp(38px,5.5vw,64px); text-transform:uppercase; margin:8px 0 6px; font-weight:400; }
.shop__blurb{ font-size:17px; color:var(--ink-soft); margin:0; max-width:46em; }
.shop__bar{ max-width:var(--maxw); margin:0 auto; padding:14px 28px; display:flex; align-items:center; justify-content:space-between; gap:18px; position:sticky; top:74px; background:oklch(0.965 0.018 82 / .92); backdrop-filter:blur(8px); z-index:30; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ background:var(--card); border:1px solid var(--line-2); color:var(--ink-soft); font-weight:700; font-size:13px; padding:9px 15px; border-radius:999px; transition:all .12s; text-decoration:none; cursor:pointer; display:inline-block; }
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip.is-active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.shop__sort{ display:flex; align-items:center; gap:14px; }
.shop__count{ font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); letter-spacing:.04em; }
.shop__sort select{ font-family:var(--font-ui); font-weight:700; font-size:13px; border:1px solid var(--line-2); border-radius:999px; padding:9px 14px; background:var(--card); color:var(--ink); cursor:pointer; }
.shop__grid{ padding-top:30px; }
.shop__empty{ max-width:var(--maxw); margin:0 auto; padding:40px 28px; color:var(--ink-soft); font-size:17px; }

/* ============ PDP ============ */
.pdp{ max-width:var(--maxw); margin:0 auto; padding:22px 28px 20px; }
.crumb{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-faint); margin-bottom:22px; flex-wrap:wrap; }
.crumb a{ background:none; border:none; color:var(--ink-soft); font-size:13px; font-weight:600; text-decoration:none; }
.crumb a:hover{ color:var(--accent); }
.crumb__now{ color:var(--ink); font-weight:700; }
.pdp__main{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:start; }
.pdp__hero{ position:relative; border-radius:18px; overflow:hidden; aspect-ratio:1/1; border:1px solid var(--line); background:var(--card); }
.pdp__hero img{ width:100%; height:100%; object-fit:cover; }
.pdp__badge{ position:absolute; top:14px; left:14px; z-index:2; }
.pdp__thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:10px; }
.thumb{ aspect-ratio:1/1; border-radius:10px; border:1px solid var(--line); overflow:hidden; display:grid; place-items:center; background:var(--card); padding:0; cursor:pointer; }
.thumb img{ width:100%; height:100%; object-fit:cover; }
.thumb.is-active{ border-color:var(--ink); }
.pdp__line{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:700; }
.pdp__title{ font-family:var(--font-display); font-size:clamp(34px,4.4vw,52px); text-transform:uppercase; line-height:.94; margin:8px 0 12px; font-weight:400; }
.pdp__rate{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-soft); margin-bottom:6px; }
.pdp__blurb{ font-size:16px; line-height:1.55; color:var(--ink-soft); margin:14px 0 24px; }
.pdp__optlabel{ display:flex; justify-content:space-between; align-items:center; font-weight:800; font-size:14px; margin-bottom:10px; }
.sizes{ display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap; }
.size{ min-width:50px; height:48px; border:1.5px solid var(--line-2); background:var(--card); border-radius:10px; font-weight:800; font-size:14px; color:var(--ink); transition:all .1s; cursor:pointer; padding:0 6px; }
.size:hover{ border-color:var(--ink); }
.size.is-active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.size[disabled]{ opacity:.35; cursor:not-allowed; text-decoration:line-through; }
.pdp__buy{ display:flex; gap:12px; align-items:stretch; margin-bottom:18px; }
.qty{ display:flex; align-items:center; border:1.5px solid var(--line-2); border-radius:999px; overflow:hidden; }
.qty button{ width:46px; height:54px; background:var(--card); border:none; font-size:20px; color:var(--ink); cursor:pointer; }
.qty button:hover{ background:oklch(0.92 0.02 80); }
.qty span{ min-width:34px; text-align:center; font-weight:800; }
.pdp__buy .btn{ flex:1; display:flex; align-items:center; justify-content:center; }
.pdp__perks{ list-style:none; padding:16px 0 0; margin:18px 0 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:9px; }
.pdp__perks li{ font-size:14px; color:var(--ink-soft); padding-left:24px; position:relative; }
.pdp__perks li::before{ content:"✓"; position:absolute; left:0; color:var(--good); font-weight:800; }
.pdp__acc{ margin-top:22px; border-top:1px solid var(--line); }
.acc{ border-bottom:1px solid var(--line); }
.acc__head{ width:100%; background:none; border:none; display:flex; justify-content:space-between; align-items:center; padding:16px 0; font-weight:800; font-size:15px; color:var(--ink); cursor:pointer; }
.acc__pl{ font-size:20px; color:var(--ink-soft); }
.acc__body{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.acc.is-open .acc__body{ max-height:320px; }
.acc__body p{ font-size:14px; line-height:1.55; color:var(--ink-soft); margin:0 0 16px; }
.feat--rel{ border-top:1px solid var(--line); margin-top:40px; }

/* ============ CART DRAWER ============ */
.drawer{ position:fixed; inset:0; z-index:60; pointer-events:none; }
.drawer__scrim{ position:absolute; inset:0; background:oklch(0.2 0.02 60 / 0); transition:background .25s; }
.drawer__panel{ position:absolute; top:0; right:0; height:100%; width:min(420px,92vw); background:var(--paper); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.1,1); box-shadow:-20px 0 50px -30px oklch(0.2 0.04 60 / .6); }
.drawer.is-open{ pointer-events:auto; }
.drawer.is-open .drawer__scrim{ background:oklch(0.2 0.02 60 / .42); }
.drawer.is-open .drawer__panel{ transform:translateX(0); }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line); }
.drawer__head h2{ font-family:var(--font-display); font-size:22px; text-transform:uppercase; margin:0; font-weight:400; }
.drawer__x{ background:none; border:none; font-size:18px; color:var(--ink-soft); width:34px; height:34px; border-radius:50%; cursor:pointer; }
.drawer__x:hover{ background:oklch(0.92 0.02 80); }
.drawer__ship{ padding:14px 22px; border-bottom:1px solid var(--line); }
.drawer__ship p{ margin:0 0 8px; font-size:13px; color:var(--ink-soft); }
.drawer__ship--won{ color:var(--good)!important; font-weight:700; }
.drawer__bar{ height:7px; background:var(--line); border-radius:99px; overflow:hidden; }
.drawer__bar span{ display:block; height:100%; background:var(--accent); border-radius:99px; transition:width .3s; }
.drawer__items{ flex:1; overflow-y:auto; padding:8px 22px; }
.drawer__empty{ text-align:center; padding:60px 20px; color:var(--ink-faint); }
.drawer__empty p{ font-family:var(--font-display); font-size:22px; text-transform:uppercase; margin:0 0 4px; color:var(--ink); font-weight:400; }
.line{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.line__img{ width:72px; height:88px; border-radius:8px; overflow:hidden; flex-shrink:0; border:1px solid var(--line); background:var(--card); }
.line__img img{ width:100%; height:100%; object-fit:cover; }
.line__info{ flex:1; }
.line__info h4{ font-size:15px; margin:0 0 3px; font-weight:700; }
.line__info h4 a{ text-decoration:none; color:inherit; }
.line__opt{ font-size:12px; color:var(--ink-faint); }
.line__qty{ display:flex; align-items:center; gap:6px; margin-top:10px; }
.line__qty button{ width:26px; height:26px; border:1px solid var(--line-2); background:var(--card); border-radius:6px; font-size:14px; color:var(--ink); cursor:pointer; }
.line__qty span{ min-width:22px; text-align:center; font-weight:700; font-size:14px; }
.line__right{ text-align:right; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; }
.line__rm{ background:none; border:none; font-size:12px; color:var(--ink-faint); text-decoration:underline; padding:0; cursor:pointer; }
.line__rm:hover{ color:var(--accent); }
.drawer__foot{ padding:18px 22px 22px; border-top:1px solid var(--line); background:var(--paper-2); }
.drawer__sub{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.drawer__sub span{ font-weight:700; }
.drawer__note{ text-align:center; font-size:12px; color:var(--ink-faint); margin:10px 0 0; }

/* ============ FOOTER ============ */
.ftr{ background:var(--paper-2); border-top:1px solid var(--line); }
.ftr__top{ max-width:var(--maxw); margin:0 auto; padding:50px 28px 36px; display:grid; grid-template-columns:1.1fr 2fr; gap:50px; }
.ftr__logo{ font-family:var(--font-display); font-size:22px; text-transform:uppercase; display:flex; align-items:center; gap:8px; font-weight:400; }
.ftr__tag{ font-size:14px; color:var(--ink-soft); line-height:1.5; max-width:26em; margin:12px 0 16px; }
.ftr__social{ display:flex; gap:16px; }
.ftr__social a{ font-weight:700; font-size:14px; color:var(--ink); text-decoration:none; }
.ftr__social a:hover{ color:var(--accent); }
.ftr__cols{ display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:30px; }
.ftr__col{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.ftr__col h4{ font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 4px; }
.ftr__col a, .ftr__col button{ background:none; border:none; padding:0; font-size:14px; color:var(--ink-soft); text-decoration:none; font-family:var(--font-ui); text-align:left; cursor:pointer; }
.ftr__col a:hover, .ftr__col button:hover{ color:var(--accent); }
.ftr__news{ display:flex; gap:8px; margin-top:6px; width:100%; }
.ftr__news input{ flex:1; border:1px solid var(--line-2); border-radius:999px; padding:11px 16px; font-size:14px; font-family:var(--font-ui); background:var(--card); }
.ftr__news button{ background:var(--ink); color:var(--paper); border:none; font-weight:800; padding:0 20px; border-radius:999px; font-size:14px; cursor:pointer; }
.ftr__bottom{ border-top:1px solid var(--line); max-width:var(--maxw); margin:0 auto; padding:18px 28px; display:flex; justify-content:space-between; gap:14px; font-size:12px; color:var(--ink-faint); font-family:var(--font-mono); letter-spacing:.04em; flex-wrap:wrap; }

/* ============ TOAST ============ */
.toast{ position:fixed; bottom:26px; left:50%; transform:translateX(-50%); z-index:70; background:var(--ink); color:var(--paper); font-weight:700; font-size:14px; padding:14px 22px; border-radius:999px; box-shadow:0 14px 30px -12px oklch(0.2 0.04 60 / .6); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; }
.toast.is-show{ opacity:1; transform:translate(-50%,0); }
.toast:not(.is-show){ transform:translate(-50%,10px); }

/* ============ WOOCOMMERCE / WP INTEGRATION ============ */
/* Astra sets global h1–h4 colors that beat our inherited values — pin ours. */
.smps .band__h{ color:var(--paper); }
.smps .hero__h, .smps .sec__title, .smps .shop__h, .smps .pdp__title,
.smps .cattile__name, .smps .prop h3, .smps .drawer__head h2,
.smps .ftr__logo, .smps .drawer__empty p, .smps .review blockquote,
.smps .card__title{ color:var(--ink); }
.smps .hero__h em{ color:var(--accent); }
.smps .prop h3, .smps .acc__head{ color:var(--ink); }
/* keep Astra from forcing link colors on our nav/cards */
.smps .navlink, .smps .card__title a, .smps .cattile, .smps .crumb a{ color:inherit; }

/* notices (used on cart/checkout and add-to-cart errors) */
.smps .woocommerce-message,
.smps .woocommerce-info,
.smps .woocommerce-error{
  max-width:var(--maxw); margin:16px auto; padding:14px 18px;
  border-radius:12px; list-style:none; font-size:14px;
  border:1px solid var(--line-2); background:var(--card);
}
.smps .woocommerce-error{ border-color:var(--accent); }
.smps-notices-wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* push content below the WP admin bar / keep sticky header below it */
body.admin-bar .hdr{ top:32px; }
@media (max-width:782px){ body.admin-bar .hdr{ top:46px; } }
body.admin-bar .shop__bar{ top:106px; }
@media (max-width:782px){ body.admin-bar .shop__bar{ top:120px; } }

/* fallback styling for any default WC pages (cart/checkout/account) so they
   inherit the brand without us rebuilding them */
.smps .woocommerce-page .button,
.smps .wc-block-components-button{
  background:var(--accent)!important; color:#fff!important; border-radius:999px!important;
  border:none!important; font-weight:800!important;
}
.smps-page-wrap{ max-width:var(--maxw); margin:0 auto; padding:40px 28px 60px; }
.smps-page-wrap h1.entry-title, .smps-page-title{ font-family:var(--font-display); text-transform:uppercase; font-size:clamp(34px,5vw,56px); font-weight:400; margin:0 0 20px; }

/* ============ RESPONSIVE ============ */
@media (max-width:1000px){
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .catnav__grid{ grid-template-columns:repeat(2,1fr); }
  .reviews{ grid-template-columns:repeat(2,1fr); }
  .hero, .pdp__main{ grid-template-columns:1fr; gap:32px; }
  .props{ grid-template-columns:1fr; gap:22px; }
  .ftr__top{ grid-template-columns:1fr; gap:30px; }
  .hdr__nav{ display:none; }
  .hdr__burger{ display:grid; place-items:center; }
}
@media (max-width:560px){
  .grid--4, .catnav__grid, .reviews{ grid-template-columns:1fr; }
  .ftr__cols{ grid-template-columns:1fr; }
  .cartbtn__label{ display:none; }
}