/* ============================================================
   Pawtrait — Layer 3: Gallery / editorial refinement
   Loaded AFTER pawtrait.css and pawtrait-2.css.

   Direction (from the brand owner):
     warm cream walls · gilded accents · deep navy · candlelit
     cinematic light · fine-art pet portraiture hung like museum
     pieces · real American homes · premium gift, never studio
     ecommerce.

   Rules: no new fonts. Warm the surfaces, calm the chrome, let
   the photography be the loudest thing on the page.
   ============================================================ */

/* The `hidden` attribute must always win. Patterns such as
   .cart-badge{display:flex} are author rules and therefore beat the
   UA stylesheet's [hidden]{display:none} — which silently leaves an
   empty cart showing a stale count, or a bare red "0" to a first-time
   visitor on every page. */
[hidden]{display:none !important}

:root{
  /* warmed for the gallery direction */
  --bg:#F6F1E8;            /* cream wall */
  --bg-2:#EDE4D6;          /* deeper cream / linen */
  --sand:#E3D7C4;
  --surface:#FFFDF9;       /* warm white, never cold #fff */
  --ink:#241F1A;
  --ink-soft:#4E463B;
  --muted:#847868;
  --line:#E0D3BF;
  --terracotta:#B8755C;
  --terracotta-deep:#96543C;
  --sage:#6E7A5E;
  --sage-light:#EAEDE2;
  /* new: the gilding + the navy from the reference portrait wall */
  --gold:#B08D57;
  --gold-soft:#D8C29A;
  --navy:#22304A;
  --shadow:0 4px 18px rgba(52,40,26,.06);
  --shadow-lg:0 22px 52px rgba(52,40,26,.14);
  --radius:6px;            /* crisp, gallery-frame not app-card */
  --radius-lg:8px;
  --rule:1px solid var(--line);
}

/* ---------- 01 Calm the chrome: hairline frames, no candy ---------- */
.story-card,.product-card,.ml-card,.why-item,.belief{
  border:var(--rule);box-shadow:none;
}
.story-card:hover,.product-card:hover,.ml-card:hover{
  box-shadow:var(--shadow-lg);
}
.why-item,.belief{background:var(--surface);border-top:0;border-left:3px solid var(--gold-soft);border-radius:var(--radius)}
.belief{border-top:0}
.story-body .tag,.ml-cat,.pc-cat,.kicker{
  letter-spacing:.16em;
}
.kicker{color:var(--gold)}
.eyebrow{color:var(--gold)}
.tag-custom,.ml-flag{
  background:rgba(255,253,249,.94);border-color:var(--gold-soft);color:var(--terracotta-deep);
  letter-spacing:.14em;
}
.ml-flag.quiet{color:var(--sage)}

/* buttons: quieter, more tailored */
.btn{border-radius:2px;letter-spacing:.03em;font-weight:600}
.btn-cta{background:var(--navy);color:#FBF7F0}
.btn-cta:hover{background:#2C3D5C}
.btn-primary{background:var(--terracotta);color:#FFF9F4}
.btn-primary:hover{background:var(--terracotta-deep)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-light{background:#FFFDF9;color:var(--ink);border-color:#FFFDF9}
.ml-cta{border-radius:2px;background:var(--navy)}
.ml-card:hover .ml-cta{background:#2C3D5C}
.chip{border-radius:2px}
.chip.active{background:var(--navy);border-color:var(--navy)}
.opt-group .chip{border-radius:2px}

/* ---------- 02 Galleries and picture frames ---------- */
/* the reference hangs art in a gilt frame on a cream wall — do the
   same for the hero: a frame, not a bleeding hero photo. */
.hero{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%)}
.hero-media img{
  border-radius:2px;
  box-shadow:0 0 0 1px var(--gold-soft),0 0 0 10px #FFFDF9,0 0 0 11px var(--gold),0 30px 60px rgba(52,40,26,.22);
}
.hero-media .frame-note{
  border-radius:2px;border-color:var(--gold-soft);background:#FFFDF9;
  letter-spacing:.02em;
}
.pdp-main{border-radius:2px;border-color:var(--gold-soft)}
.pdp-main img{border-radius:0}
.pdp-thumb{border-radius:2px}
.pdp-thumb.active{border-color:var(--gold)}

/* ---------- 03 Figure blocks (new pages: stories / about) ---------- */
.wide-figure{margin:0 auto 56px;max-width:1000px}
.wide-figure img{
  width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:2px;
  box-shadow:0 0 0 1px var(--gold-soft),0 0 0 12px #FFFDF9,0 0 0 13px var(--gold),0 26px 54px rgba(52,40,26,.18);
}

.story-feature{
  display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center;
  padding:56px 0;border-top:var(--rule);
}
.story-feature:first-of-type{border-top:0;padding-top:8px}
.story-feature.reverse .story-figure{order:2}
.story-figure{margin:0;position:relative}
.story-figure img{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;
  box-shadow:0 0 0 1px var(--gold-soft),0 0 0 9px #FFFDF9,0 0 0 10px var(--gold),0 18px 40px rgba(52,40,26,.14);
}
.story-figure figcaption{
  margin-top:20px;font-family:var(--head);font-style:italic;font-size:14px;
  color:var(--muted);letter-spacing:.06em;text-align:center;
}
.story-text h2{font-size:clamp(26px,3vw,36px);line-height:1.18;margin:12px 0 10px}
.byline{font-size:13px;color:var(--muted);letter-spacing:.04em;margin-bottom:18px}
.story-text p{font-size:15.5px;color:var(--ink-soft);line-height:1.78;margin-bottom:14px}
.pull{
  font-family:var(--head);font-style:italic;font-size:20px;line-height:1.5;color:var(--ink);
  border-left:2px solid var(--gold);padding:4px 0 4px 18px;margin:24px 0 24px;
}
@media(max-width:900px){
  .story-feature{grid-template-columns:1fr;gap:26px;padding:40px 0}
  .story-feature.reverse .story-figure{order:0}
  .wide-figure img{aspect-ratio:3/2}
}

/* ---------- 04 Payment QR block (new page: payment) ---------- */
.pay-qr{
  display:grid;grid-template-columns:240px 1fr;gap:24px;align-items:center;
  background:var(--surface);border:var(--rule);border-left:3px solid var(--gold-soft);
  border-radius:var(--radius);padding:22px;margin:22px 0 30px;
}
.pay-qr img{width:100%;height:auto;border:1px solid var(--line);border-radius:2px;background:#fff}
.pay-qr h4{font-family:var(--head);font-size:18px;margin-bottom:8px}
.pay-qr p{font-size:14px;color:var(--ink-soft);line-height:1.65;margin-bottom:8px}
@media(max-width:640px){.pay-qr{grid-template-columns:1fr;gap:16px}.pay-qr img{max-width:220px}}

/* ---------- 05 Checkout (new page) ---------- */
.checkout-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start}
@media(max-width:940px){.checkout-layout{grid-template-columns:1fr;gap:28px}}
.fieldset{margin-bottom:34px}
.fieldset > h2{
  font-family:var(--head);font-size:19px;margin-bottom:4px;
  padding-bottom:12px;border-bottom:var(--rule);
}
.fieldset > .sub{font-size:13px;color:var(--muted);margin:10px 0 18px}
.pay-opt{
  display:flex;gap:13px;align-items:flex-start;padding:16px 18px;
  border:var(--rule);border-radius:var(--radius);background:var(--surface);
  margin-bottom:10px;cursor:pointer;transition:border-color .18s ease,background .18s ease;
}
.pay-opt:hover{border-color:var(--gold-soft)}
.pay-opt input{margin-top:4px;accent-color:var(--terracotta);flex:none}
.pay-opt.selected{border-color:var(--gold);background:#FFFCF6}
.pay-opt b{display:block;font-size:15px;margin-bottom:3px}
.pay-opt span{font-size:13px;color:var(--muted);line-height:1.55}
.order-box{
  background:var(--surface);border:var(--rule);border-radius:var(--radius);
  padding:26px;position:sticky;top:96px;
}
.order-box h2{font-family:var(--head);font-size:20px;margin-bottom:16px}
.order-line{display:flex;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:14px}
.order-line:last-of-type{border-bottom:0}
.order-line img{width:52px;height:52px;object-fit:cover;border-radius:2px;flex:none;background:var(--sand)}
.order-line .ol-name{flex:1;color:var(--ink-soft);line-height:1.45}
.order-line .ol-name small{display:block;color:var(--muted);font-size:12px}
.order-line .ol-price{white-space:nowrap;font-weight:600}
.order-total{
  display:flex;justify-content:space-between;align-items:baseline;
  border-top:var(--rule);margin-top:14px;padding-top:16px;font-weight:700;font-size:19px;
}
.trust-note{
  margin-top:20px;padding-top:18px;border-top:var(--rule);
  display:grid;gap:10px;font-size:13px;color:var(--muted);line-height:1.55;
}
/* confirmation page */
.confirm-card{
  max-width:760px;margin:0 auto;background:var(--surface);
  border:var(--rule);border-radius:var(--radius);padding:40px;
}
.confirm-card .ord-no{
  font-size:15px;letter-spacing:.06em;color:var(--terracotta-deep);font-weight:700;
}
.pay-amount{
  font-family:var(--head);font-size:38px;line-height:1.1;margin:6px 0 4px;
}
.checklist{list-style:none;padding:0;margin:22px 0 0}
.checklist li{
  display:flex;gap:12px;padding:13px 0;border-top:var(--rule);
  font-size:14.5px;color:var(--ink-soft);line-height:1.6;
}
.checklist li b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
.checklist .n{
  flex:none;width:24px;height:24px;border-radius:50%;border:1px solid var(--gold-soft);
  color:var(--gold);font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;
  font-family:var(--body);
}

/* ---------- 06 Quiet page furniture ---------- */
.page-hero{background:var(--bg-2);border-bottom:var(--rule)}
.page-hero .inner{padding:52px 0}
.acc-item{border-radius:var(--radius);background:var(--surface)}
.acc-item summary::after{color:var(--gold)}
.steps .step .ic{color:var(--gold)}
.note-callout{background:#FBF7EE;border-left:3px solid var(--gold-soft)}
.note-callout b{color:var(--ink)}
.footer{background:var(--navy)}
.newsletter{background:var(--navy)}
.quote-band{background:var(--terracotta-deep)}
.empty-state h3{font-family:var(--head)}

/* ============================================================
   07  Desktop vertical-space density optimization
   ------------------------------------------------------------
   Intent: the brief is ONE thing only — desktop pages feel too
   empty because of excess top/bottom whitespace. Target ~20%
   less vertical padding on desktop while keeping literally
   everything else identical (colour, type, images, nav,
   products, functions, copy, responsive breakpoints).

   How it is kept safe:
   - Every rule below lives inside a min-width media query, so
     phones (<=680px) are NEVER reached and keep their original
     density. No mobile regression by construction.
   - Tier 1 (>=1200px): tightest values (~18-22% less).
   - Tier 2 (681-1199px): intermediate values (desktop-first;
     the 901-1199 band tightens hero + story-feature too).
   - Where layer 1/2 already set a mobile-friendly value at
     <=900 (hero padding, story-feature padding), those are
     preserved by scoping the override to >=901px.
   - Only paddings / margins / grid gaps change. No sizes,
     ratios, colours, fonts, borders, or breakpoints.
   ============================================================ */

/* ---------- Tier 1: desktop >=1200px ---------- */
@media(min-width:1200px){
  .section{padding:72px 0}            /* was 88  (-18%) */
  .section.tight{padding:52px 0}      /* was 60  (-13%) */
  .section-head{margin-bottom:36px}   /* was 44  (-18%) */
  .hero-inner{padding:58px 0 66px}    /* was 70/84 (-17%/-21%) */
  .hero-actions{margin-top:22px}      /* was 26  (-15%) */
  .beliefs{margin-top:30px}           /* was 36  (-17%) */
  .stories,.product-grid,.mostloved-grid,.pet-split,.why-grid,.steps{gap:18px} /* was 22/22/22/22/20/22 (-18%) */
  .trust-grid{padding:22px 0}         /* was 26  (-15%) */
  .trust-strip .ts-head{padding:18px 0 4px}     /* was 22 (-18%) */
  .trust-strip-grid{padding:14px 0 20px}        /* was 16/24 (-12%) */
  .quote-band{padding:60px 0}         /* was 74  (-19%) */
  .newsletter{padding:54px 0}         /* was 64  (-16%) */
  .footer{padding:52px 0 28px}        /* was 60/30 (-13%) */
  .story-feature{padding:44px 0}      /* was 56  (-21%) */
  .wide-figure{margin:0 auto 46px}    /* was 56  (-18%) */
  .story-body{padding:18px 20px 20px} /* was 20/22 (-10%) img->title */
  .story-text h2{margin:10px 0 8px}   /* title->body tighter */
  .byline{margin-bottom:14px}         /* was 18  (-22%) */
  .story-text p{margin-bottom:12px}   /* was 14  (-14%) body->cta */
  .pull{margin:20px 0 20px}           /* was 24  (-17%) */
  .page{padding:44px 0 64px}          /* was 52/76 (-15%/-16%) */
  .page-hero .inner{padding:44px 0}   /* was 52  (-15%) */
  .life-mag{gap:16px}                 /* was 20  (-20%) */
  .life-mag .col{gap:16px}            /* was 20  (-20%) */
  .life-mag .story-card.feature .story-body{padding:18px 24px 20px}
  .bridge{margin-top:22px;padding-top:20px}      /* was 26/22 (-15%) */
  .guide-cta{margin-top:20px;padding:18px 22px}  /* was 24/20 (-17%) */
  .shop-controls{padding:18px 0;margin-bottom:24px} /* was 20/28 (-14%) */
  .prose h2{margin:28px 0 10px}       /* was 34  (-18%) */
  .prose h3{margin:20px 0 8px}        /* was 24  (-17%) */
  .prose p{margin-bottom:12px}        /* was 14  (-14%) */
  .pet-body{padding:22px}             /* For Dogs/Cats: was 26 (-15%) */
  .why-item{padding:20px}             /* was 22  (-9%) */
  .ml-body{padding:15px 17px 17px}    /* Most Loved card: was 17/19 */
}

/* ---------- Tier 2: tablet / small-desktop 681-1199px ---------- */
@media(min-width:681px) and (max-width:1199px){
  .section{padding:64px 0}            /* was 88  (-27%, within tablet 52-64) */
  .section.tight{padding:56px 0}
  .section-head{margin-bottom:38px}   /* was 44  (-14%) */
  .beliefs{margin-top:32px}           /* was 36  (-11%) */
  .stories,.product-grid,.mostloved-grid,.pet-split,.why-grid,.steps{gap:20px} /* -9% */
  .trust-grid{padding:22px 0}
  .trust-strip .ts-head{padding:20px 0 4px}
  .trust-strip-grid{padding:14px 0 22px}
  .quote-band{padding:64px 0}         /* was 74  (-14%) */
  .newsletter{padding:56px 0}         /* was 64  (-13%) */
  .footer{padding:54px 0 28px}
  .wide-figure{margin:0 auto 50px}    /* was 56  (-11%) */
  .story-body{padding:18px 20px 20px}
  .story-text h2{margin:11px 0 9px}
  .byline{margin-bottom:15px}
  .story-text p{margin-bottom:13px}
  .pull{margin:22px 0 22px}
  .page{padding:48px 0 68px}          /* was 52/76 */
  .page-hero .inner{padding:48px 0}   /* was 52 */
  .life-mag{gap:18px}
  .life-mag .col{gap:18px}
  .bridge{margin-top:24px;padding-top:20px}
  .guide-cta{margin-top:22px;padding:18px 22px}
  .shop-controls{padding:18px 0;margin-bottom:26px}
  .prose h2{margin:30px 0 10px}
  .prose h3{margin:22px 0 8px}
  .prose p{margin-bottom:13px}
  .pet-body{padding:24px}
  .why-item{padding:20px}
  .ml-body{padding:16px 17px 18px}
}
/* hero + story-feature on 901-1199: tighter than the 70/84 & 56
   base, but the <=900 mobile-friendly values (38/46 & 40) stay. */
@media(min-width:901px) and (max-width:1199px){
  .hero-inner{padding:54px 0 64px}
  .story-feature{padding:48px 0}      /* was 56 (-14%) */
}

/* ---------- 08 Floating WhatsApp button (every page) ---------- */
.wa-fab{
  position:fixed;right:22px;bottom:22px;z-index:385;
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 19px 12px 14px;border-radius:999px;
  background:#25D366;color:#fff;text-decoration:none;
  font-family:var(--body);font-size:14.5px;font-weight:600;letter-spacing:.01em;line-height:1;
  box-shadow:0 8px 24px rgba(37,211,102,.34),0 2px 6px rgba(28,35,28,.14);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.wa-fab:hover{
  background:#1FBE5B;color:#fff;transform:translateY(-2px);
  box-shadow:0 13px 30px rgba(37,211,102,.42),0 3px 8px rgba(28,35,28,.18);
}
.wa-fab:focus-visible{outline:3px solid rgba(37,211,102,.55);outline-offset:3px}
.wa-fab svg{display:block;flex:0 0 auto}
.wa-fab-label{white-space:nowrap}
/* quiet attention ring — helps it get noticed without being intrusive */
.wa-fab::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:2px solid rgba(37,211,102,.5);
  animation:waPulse 2.8s ease-out infinite;
}
@keyframes waPulse{
  0%{opacity:.7;transform:scale(1)}
  70%{opacity:0;transform:scale(1.14)}
  100%{opacity:0;transform:scale(1.14)}
}
/* keep clear of the mobile product buy-bar (fixed bottom, 80px tall) */
body.has-buybar .wa-fab{bottom:92px}
@media(max-width:600px){
  .wa-fab{right:14px;bottom:14px;padding:13px}
  .wa-fab-label{display:none}
  body.has-buybar .wa-fab{bottom:86px}
}
@media(prefers-reduced-motion:reduce){
  .wa-fab{transition:none}
  .wa-fab::after{animation:none;opacity:0}
}

/* ---------- 09 Pet Stories (UGC channel) ----------
   Editorial card grid + filters + story detail. Reuses the existing brand
   tokens only — no new colours, no new type scale. */

/* -- hero -- */
.ps-hero .inner{text-align:left}
.ps-hero{background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 100%)}

/* -- card grid: 3 / 2 / 1 -- */
.ps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px}
@media(max-width:960px){.ps-grid{grid-template-columns:repeat(2,1fr);gap:18px}}
@media(max-width:640px){.ps-grid{grid-template-columns:1fr;gap:16px}}

.ps-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);border:var(--rule);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.ps-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.ps-card-img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--bg-2)}
.ps-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.ps-noimg{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--sand),var(--bg-2))}
.ps-noimg span{font-family:var(--head);color:var(--muted);font-size:19px;letter-spacing:.02em}
.ps-card-body{display:flex;flex-direction:column;gap:6px;padding:18px 19px 20px}
.ps-card-body h3{font-family:var(--head);font-size:19px;line-height:1.28;margin:0}
.ps-card-body h3 a{color:var(--ink);text-decoration:none}
.ps-card-body h3 a:hover{color:var(--terracotta-deep)}
.ps-card-meta{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0}
.ps-card-excerpt{font-size:14.5px;color:var(--ink-soft);line-height:1.6;margin:2px 0 0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ps-read{margin-top:auto;padding-top:12px;font-size:14px;font-weight:600;color:var(--terracotta);text-decoration:none}
.ps-read:hover{color:var(--terracotta-deep)}
.ps-card-lg .ps-card-body h3{font-size:23px}

/* -- filters -- */
.ps-filters{margin-top:6px}
.ps-filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.ps-chip{
  padding:9px 16px;border-radius:999px;border:var(--rule);background:var(--surface);
  font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.ps-chip:hover{background:var(--bg-2)}
.ps-chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.ps-chip-sm{font-size:13px;padding:7px 13px;font-weight:500}
.ps-filter-row-2{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;padding-bottom:2px}
@media(min-width:861px){.ps-filter-row-2{flex-wrap:wrap;overflow:visible}}

/* -- states -- */
.ps-state{margin-top:26px;font-size:14.5px;color:var(--ink-soft)}
.ps-state-empty{text-align:center;padding:44px 20px;background:var(--surface);
  border:var(--rule);border-radius:var(--radius-lg)}
.ps-state-empty h3{font-family:var(--head);font-size:22px;margin-bottom:8px}
.ps-state-error{color:#A33}
.ps-spinner{display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;
  border:2px solid var(--line);border-top-color:var(--terracotta);border-radius:50%;
  animation:psSpin .7s linear infinite}
@keyframes psSpin{to{transform:rotate(360deg)}}
.ps-more-wrap{margin-top:32px}

/* -- submit form -- */
.ps-drop{
  display:flex;align-items:center;gap:14px;padding:20px;cursor:pointer;
  border:2px dashed var(--line);border-radius:var(--radius);background:var(--surface);
  transition:border-color .18s ease,background .18s ease;
}
.ps-drop:hover,.ps-drop.over{border-color:var(--terracotta);background:var(--bg-2)}
.ps-drop-ico{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:0 0 auto;border-radius:50%;
  background:var(--bg-2);color:var(--terracotta);font-size:22px;font-weight:600}
.ps-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;margin-top:14px}
.ps-thumb{position:relative;margin:0}
.ps-thumb img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;border:var(--rule);display:block}
.ps-thumb figcaption{font-size:11.5px;color:var(--muted);text-align:center;margin-top:4px}
.ps-thumb-x{
  position:absolute;top:-7px;right:-7px;width:24px;height:24px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--ink-soft);
  font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.ps-thumb-x:hover{background:#A33;color:#fff;border-color:#A33}
.ps-check{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.6;color:var(--ink-soft);cursor:pointer}
.ps-check input{margin-top:3px;flex:0 0 auto;width:18px;height:18px;accent-color:var(--terracotta)}
.ps-done{max-width:640px;margin:0 auto;text-align:center;padding:46px 22px;
  background:var(--surface);border:var(--rule);border-radius:var(--radius-lg);box-shadow:var(--shadow)}

/* -- story detail -- */
.ps-crumbs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  font-size:13px;color:var(--muted);padding:20px 0 0}
.ps-crumbs a{color:var(--muted);text-decoration:none}
.ps-crumbs a:hover{color:var(--ink)}
.ps-detail{padding:16px 0 64px}
.ps-detail-head{max-width:760px;margin:0 0 26px}
.ps-detail-head h1{font-family:var(--head);font-size:clamp(28px,4vw,44px);line-height:1.15;margin:10px 0 10px}
.ps-petline{font-size:15px;color:var(--muted);letter-spacing:.02em;margin:0}
.ps-hero-img{margin:0 0 30px;border-radius:var(--radius-lg);overflow:hidden;
  border:var(--rule);box-shadow:var(--shadow)}
.ps-hero-img img{width:100%;height:auto;display:block;max-height:560px;object-fit:cover}
.ps-detail-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:44px;align-items:start}
@media(max-width:900px){.ps-detail-layout{grid-template-columns:1fr;gap:30px}}
.ps-body{font-size:16.5px;line-height:1.78;color:var(--ink-soft)}
.ps-body p{margin:0 0 18px}
.ps-aside{background:var(--surface);border:var(--rule);border-radius:var(--radius-lg);
  padding:22px;box-shadow:var(--shadow)}
.ps-aside h2{font-family:var(--head);font-size:18px;margin:0 0 14px}
.ps-meta{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0 0 20px;font-size:14px}
.ps-meta dt{color:var(--muted);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;padding-top:2px}
.ps-meta dd{margin:0;color:var(--ink)}
.ps-aside .btn{width:100%;text-align:center}
.ps-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:30px 0 0}
@media(max-width:600px){.ps-gallery{grid-template-columns:1fr}}
.ps-shot{margin:0;border-radius:var(--radius);overflow:hidden;border:var(--rule)}
.ps-shot img{width:100%;height:auto;display:block}
.ps-video{margin:32px 0 0}
.ps-video h2{font-family:var(--head);font-size:20px;margin-bottom:12px}
.ps-video video{width:100%;height:auto;border-radius:var(--radius);border:var(--rule);background:#000}
.ps-related{margin-top:56px;padding-top:34px;border-top:var(--rule)}
.ps-related h2{font-family:var(--head);font-size:24px;margin-bottom:6px}
.ps-cta-band{margin-top:56px;text-align:center;padding:44px 24px;
  background:var(--bg-2);border-radius:var(--radius-lg)}
.ps-cta-band h2{font-family:var(--head);font-size:clamp(22px,3vw,30px);margin-bottom:8px}
.ps-cta-band p{color:var(--ink-soft);margin-bottom:20px}

/* -- emotional invitation block (customer channel hero) -- */
.ps-invite{
  margin-top:26px;max-width:660px;
  padding:20px 24px;
  background:var(--surface);
  border:var(--rule);border-left:3px solid var(--gold-soft);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.ps-invite p{
  margin:0;font-size:15.5px;line-height:1.7;color:var(--ink-soft);
}
.ps-invite p + p{margin-top:8px}

/* -- homepage entry band (separate from the brand "Real Pet Stories" section) -- */
.ps-entry{background:var(--surface);border-top:var(--rule);border-bottom:var(--rule)}
.ps-entry-inner{
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
}
.ps-entry-inner h2{font-family:var(--head);font-size:clamp(22px,3vw,30px);margin:6px 0 6px}
.ps-entry-inner p{margin:0;max-width:560px}
.ps-entry-cta{margin:0;flex:0 0 auto}
@media(max-width:760px){
  .ps-entry-inner{flex-direction:column;align-items:flex-start;gap:18px}
  .ps-entry-cta,.ps-entry-cta .btn{width:100%;text-align:center}
}

/* ---------- 10 Typography roles: functional UI must be SANS ----------
   Serif is reserved for brand · emotion · story · editorial.
   Anything a shopper reads while deciding, buying or checking out is set in
   the sans face so it stays neutral, clear and trustworthy.
   This block only changes FONT FAMILY — no sizes, spacing or colours. */

/* Product names + category navigation + the PDP's practical sections.
   .ml-body covers the shop grid, most-loved grid and cross-sell cards (product
   names). .pet-body is the "Shop by Pet" category card. .pdp-block is the PDP
   functional copy: how it works / photo tips / shipping / FAQ.
   NB: .why-item h3 on the homepage is deliberate emotional brand copy
   ("Made from your pet") and stays serif, per the type-role spec. */
.ml-body h3,
.pet-body h3,
.pdp-block h2{font-family:var(--font-sans)}

/* Checkout: section headings, order summary and the amount are transaction
   content — never serif. */
.fieldset > h2,
.order-box h2,
.checkout-layout h2{font-family:var(--font-sans)}

/* The amount keeps its emphasis through size/weight, not through the serif */
.pay-amount{font-family:var(--font-sans);font-weight:700;letter-spacing:-.01em}

/* Functional states (empty / error / success) read as UI, not as brand copy */
.empty-state h2,
.empty-state h3,
.ps-state-empty h3,
.ps-state-error,
.ps-done h2{font-family:var(--font-sans)}

/* Payment helper panels are practical instructions */
.pay-qr h4{font-family:var(--font-sans)}

/* Review console is an admin tool — sans throughout, like the admin itself */
.psm-top h1,
.psm-row h3,
.psm-panel h2{font-family:var(--font-sans)}

/* "You & Your Pet" is the emotional channel: its hero sentence and invitation
   copy are brand voice, so they are set in the serif. The CTA button and
   metadata beside them stay sans. */
.ps-hero-lead,
.ps-hero-sub,
.ps-invite p{font-family:var(--font-serif)}

/* Customer story metadata (pet name · breed · location · date) is information,
   not storytelling — sans, so the serif carries the story title alone. */
.ps-petline,
.ps-card-meta,
.ps-meta dt,
.ps-meta dd{font-family:var(--font-sans)}

/* ---------- 11 Uppercase micro-labels: keep tracking restrained ----------
   Spec: small uppercase labels sit between 0.08em and 0.12em. Several labels
   were set at 0.13–0.16em, which reads like a traditional magazine rather than
   a modern lifestyle brand. Tightened to 0.11em; body copy stays at default. */
.kicker,
.eyebrow,
.ml-cat,
.pc-cat,
.story-body .tag,
.tag-custom,
.ml-flag,
.footer .f-col h4{letter-spacing:.11em}

/* ---------- 12 Heading line balancing ----------
   Stops a single word being stranded on the last line of a heading — at 375px
   "Who are you shopping for?" drops "for?" onto its own line, and the hero on
   narrow screens breaks unevenly too. `balance` evens the lines out.

   Headings only. Long-form prose (story bodies, Pet Guide, legal pages) keeps
   default greedy wrapping, which stays predictable to read and avoids the
   extra layout work of balancing whole paragraphs.

   Engines cap balancing at a few lines and fall back to normal wrapping on
   longer blocks; browsers without support simply keep the current wrapping. */
h1,
h2,
h3{text-wrap:balance}