/* ============================================================
   Pawtrait — shared design system
   Brand: pet culture, lifestyle & keepsake brand
   Palette: warm ivory, soft sand, charcoal, muted terracotta
   Editorial / premium pet lifestyle visual direction
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#F7F3EC;          /* warm ivory */
  --bg-2:#EFE7DA;        /* soft sand (deep) */
  --sand:#E8DED0;        /* soft sand */
  --surface:#FFFFFF;
  --ink:#262421;         /* charcoal */
  --ink-soft:#514C43;
  --muted:#837A6C;
  --line:#E4DAC9;
  --terracotta:#B8755C;  /* muted terracotta accent */
  --terracotta-deep:#9D5A42;
  --sage:#6E7A5E;        /* quiet sage-green */
  --sage-light:#EDEFE6;
  --shadow:0 6px 22px rgba(58,46,30,.07);
  --shadow-lg:0 18px 44px rgba(58,46,30,.12);
  --radius:10px;
  --radius-lg:14px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* ---------- Typography system ----------
     SERIF  = brand · emotion · story · memory · editorial
     SANS   = shopping · product · price · navigation · buttons · UI · checkout

     Playfair Display is kept as the display serif: it is the face the whole
     site is already set in, and unlike single-weight display faces it ships
     real 500/700/800 weights plus a true italic — so `h1{font-weight:700}` and
     `.fancy{font-style:italic}` render as designed instead of being faux-bolded.

     --head / --body are kept as aliases so every existing rule keeps working. */
  --font-serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --head:var(--font-serif);
  --body:var(--font-sans);
  --sans:var(--font-sans);   /* legacy alias — was previously undefined */
}
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%}
body{font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.6;overflow-x:clip;font-size:16px}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.container{max-width:1200px;margin:0 auto;padding:0 22px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:500}
.skip:focus{left:8px;top:8px}

/* ---------- Typography ---------- */
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--terracotta);margin-bottom:12px;display:block}
h1,h2,h3,.serif{font-family:var(--head);line-height:1.15;color:var(--ink)}
.lead{font-size:18px;color:var(--ink-soft);max-width:620px}
.muted{color:var(--muted)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:15px;padding:14px 26px;border-radius:999px;border:1.5px solid transparent;transition:all .18s ease;line-height:1.2}
.btn-cta{background:var(--ink);color:#FBF7F0}
.btn-cta:hover{background:var(--terracotta-deep)}
.btn-primary{background:var(--terracotta);color:#FFF8F2}
.btn-primary:hover{background:var(--terracotta-deep)}
.btn-ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-light{background:#fff;color:var(--ink);border-color:#fff}
.btn-lg{padding:17px 34px;font-size:16px}
.btn-sm{padding:10px 18px;font-size:14px}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:120;background:rgba(247,243,236,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:flex;align-items:center;gap:9px}
.brand .mark{width:34px;height:34px;border-radius:50%;background:var(--terracotta);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;flex:none}
.brand-name{font-family:var(--head);font-weight:700;font-size:22px;letter-spacing:.2px}
.brand-name em{font-style:normal;color:var(--terracotta)}
.main-nav{display:flex;align-items:center;gap:4px}
.main-nav a{padding:9px 13px;font-size:14.5px;font-weight:500;color:var(--ink-soft);border-radius:8px}
.main-nav a:hover{color:var(--ink);background:var(--bg-2)}
.header-cta-wrap{display:flex;align-items:center;gap:8px}
.icon-btn{position:relative;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink);background:transparent}
.icon-btn:hover{background:var(--bg-2)}
.icon-btn svg{width:21px;height:21px}
.cart-badge{position:absolute;top:2px;right:0;background:var(--terracotta);color:#fff;font-size:10.5px;font-weight:700;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.menu-toggle{display:none}
/* drawer */
.drawer{position:fixed;inset:0;z-index:200;visibility:hidden;pointer-events:none}
.drawer .scrim{position:absolute;inset:0;background:rgba(30,26,20,.45);opacity:0;transition:opacity .25s}
.drawer .panel{position:absolute;top:0;right:0;bottom:0;width:min(82vw,340px);background:var(--bg);padding:22px;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .28s ease}
.drawer.open{visibility:visible;pointer-events:auto}
.drawer.open .scrim{opacity:1}
.drawer.open .panel{transform:none}
.drawer a.dl{display:block;padding:13px 4px;font-size:16px;font-weight:500;border-bottom:1px solid var(--line)}
.drawer .dl-cta{margin-top:14px}
.drawer .close{align-self:flex-end;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg-2);font-size:18px;margin-bottom:6px}

/* ---------- Hero (editorial) ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%)}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:44px;padding:70px 0 84px;min-height:min(78vh,660px)}
.hero h1{font-size:clamp(40px,5.2vw,64px);font-weight:700;letter-spacing:-.5px;margin-bottom:8px}
.hero h1 .fancy{font-style:italic;color:var(--terracotta)}
.hero .sub{font-size:19px;color:var(--ink-soft);margin:16px 0 8px;max-width:520px;line-height:1.55}
.hero .note{font-size:15px;color:var(--muted);max-width:460px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero-media{position:relative}
.hero-media img{border-radius:10px;box-shadow:var(--shadow-lg);width:100%;aspect-ratio:16/10;object-fit:cover}
.hero-media .frame-note{position:absolute;right:14px;bottom:14px;background:var(--surface);border:1px solid var(--line);padding:9px 14px;border-radius:999px;font-size:13px;color:var(--ink-soft);box-shadow:var(--shadow);font-style:italic;font-family:var(--head)}
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;padding:38px 0 46px;min-height:0}
  .hero-media{max-width:560px}
}

/* ---------- Sections ---------- */
.section{padding:88px 0}
.section.alt{background:var(--bg-2)}
.section.cream{background:var(--bg)}
.section-head{max-width:720px;margin-bottom:44px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:12px}
.section-head .lead{font-size:17px}
.kicker{display:inline-flex;align-items:center;gap:6px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta);font-weight:600}
.rowlink{margin-top:16px;display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--terracotta);font-size:15px}
.rowlink:hover{text-decoration:underline}

/* ---------- Values / belief strips ---------- */
.beliefs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.belief{padding:22px;border-top:3px solid var(--terracotta);background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow)}
.belief h3{font-size:20px;margin:8px 0 6px}
.belief p{font-size:14.5px;color:var(--ink-soft);line-height:1.6}

/* ---------- Story / editorial cards ---------- */
.stories{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.story-card{background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.story-card:hover{box-shadow:var(--shadow-lg)}
.story-card .media{overflow:hidden}
.story-card img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .5s var(--ease)}
.story-card:hover img{transform:scale(1.02)}
.story-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.story-body .tag{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);font-weight:600}
.story-body h3{font-size:22px;margin:8px 0 8px}
.story-body p{font-size:14.5px;color:var(--ink-soft);flex:1}
.story-body .read{color:var(--terracotta);font-weight:600;font-size:14px;margin-top:12px}

/* ---------- Editorial magazine layout (home Life With Them) ---------- */
.life-mag{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;align-items:stretch}
.life-mag .col{display:flex;flex-direction:column;gap:20px}
.life-mag .story-card{height:100%}
.life-mag .story-card.feature img{aspect-ratio:3/2;height:100%;object-fit:cover}
.life-mag .story-card.secondary img{aspect-ratio:4/3}
.life-mag .story-card.feature h3{font-size:26px;line-height:1.2}
.life-mag .story-card.feature p{font-size:15px}
@media(max-width:860px){
  .life-mag{grid-template-columns:1fr}
  .life-mag .story-card.feature h3{font-size:22px}
}

/* ---------- Products ---------- */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.product-card{background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.product-card:hover{box-shadow:var(--shadow-lg)}
.product-card .media{position:relative;overflow:hidden}
.product-card .media img{aspect-ratio:1/1;object-fit:cover;width:100%;transition:transform .5s var(--ease)}
.product-card:hover .media img{transform:scale(1.02)}
.tag-custom{position:absolute;left:10px;top:10px;background:rgba(247,243,236,.9);border:1px solid var(--line);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:4px 9px;border-radius:999px;color:var(--terracotta)}
.pc-body{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1}
.pc-body .pc-cat{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.pc-body h3{font-size:17.5px;margin:5px 0 4px}
.pc-body .pc-desc{font-size:13.5px;color:var(--ink-soft);line-height:1.5;flex:1}
.pc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:13px}
.price{font-family:var(--body);font-weight:700;font-size:16px;color:var(--ink)}
.price small{font-weight:500;color:var(--muted);font-size:12.5px}

/* ---------- How it works ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{position:relative;padding:24px 20px 22px;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow)}
.step .num{font-family:var(--head);font-size:44px;line-height:1;color:var(--bg-2);position:absolute;right:14px;top:6px;font-weight:700}
.step .ic{width:42px;height:42px;border-radius:50%;background:var(--sage-light);display:flex;align-items:center;justify-content:center;font-size:20px}
.step h3{font-size:19px;margin:12px 0 6px}
.step p{font-size:14px;color:var(--ink-soft)}

/* ---------- Quote / bridge ---------- */
.quote-band{background:var(--sage);color:#F7F5EE;padding:74px 0;text-align:center}
.quote-band .q{font-family:var(--head);font-size:clamp(24px,3vw,34px);line-height:1.35;max-width:820px;margin:0 auto}
.quote-band .q-by{margin-top:14px;font-size:14px;letter-spacing:.12em;text-transform:uppercase;opacity:.8}

/* ---------- FAQ / Guide ---------- */
.guide-list{max-width:820px;margin:0 auto}
.g-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;overflow:hidden}
.g-item summary{list-style:none;cursor:pointer;padding:18px 20px;font-weight:600;font-size:16.5px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.g-item summary::-webkit-details-marker{display:none}
.g-item summary::after{content:"+";font-size:22px;color:var(--terracotta);flex:none;font-weight:400}
.g-item[open] summary::after{content:"\2212"}
.g-item .ans{padding:0 20px 18px;font-size:15px;color:var(--ink-soft);line-height:1.7}
.g-item .ans p+p{margin-top:10px}

/* ---------- Trust bar ---------- */
.trust-band{border-top:1px solid var(--line);background:var(--bg)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:26px 0}
.trust-item{display:flex;gap:12px;align-items:flex-start}
.trust-item .ic{font-size:22px;line-height:1.2}
.trust-item b{display:block;font-size:14px}
.trust-item span{font-size:13px;color:var(--muted)}

/* ---------- Newsletter ---------- */
.newsletter{background:var(--ink);color:#F6F1E8;padding:64px 0}
.newsletter .inner{max-width:640px;margin:0 auto;text-align:center}
.newsletter h2{color:#F6F1E8;font-size:clamp(26px,3vw,34px);margin-bottom:8px}
.newsletter p{opacity:.85;font-size:15px;margin-bottom:24px}
.news-form{display:flex;gap:10px;max-width:480px;margin:0 auto}
.news-form input{flex:1;padding:14px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;outline:none;font-size:15px;font-family:inherit}
.news-form input::placeholder{color:rgba(255,255,255,.5)}
.news-note{font-size:12px;opacity:.55;margin-top:12px}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:#CFC8B8;padding:60px 0 30px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer .f-brand p{font-size:14px;line-height:1.7;margin-top:10px;max-width:300px}
.footer .f-brand .tagline-serif{font-family:var(--head);font-style:italic;font-size:15px;color:#F6F1E8;margin-top:12px}
.footer .f-brand .brand-name{color:#F6F1E8}
.footer h4{color:#F6F1E8;font-family:var(--body);font-weight:600;font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
.footer ul{list-style:none}
.footer li{margin-bottom:10px}
.footer a{font-size:14.5px;color:#CFC8B8}
.footer a:hover{color:#fff}
.footer p{font-size:14px;line-height:1.8}
.footer-legal{display:grid;grid-template-columns:1fr 1.2fr 1.3fr;gap:34px;padding:34px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.footer-legal h4{margin-bottom:14px}
.footer-bottom{display:flex;justify-content:space-between;gap:14px;padding-top:22px;font-size:13px;color:#8E877A;flex-wrap:wrap}
@media(max-width:900px){
  .footer-legal{grid-template-columns:1fr 1fr}
  .footer-legal .fl-links{grid-column:1/-1}
}
@media(max-width:680px){
  .footer-legal{grid-template-columns:1fr;gap:22px}
}

/* ---------- Cookie banner ---------- */
.cookie-banner{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 30px rgba(0,0,0,.12);z-index:400;padding:16px 20px}
.cookie-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:18px;justify-content:space-between;flex-wrap:wrap}
.cookie-inner p{font-size:13.5px;color:var(--ink-soft);flex:1;min-width:240px}
.cookie-actions{display:flex;gap:10px}
.cookie-btn{padding:9px 18px;border-radius:999px;font-size:13.5px;font-weight:600;border:1px solid var(--line);background:#fff;color:var(--ink)}
.cookie-btn.accept{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- Floating support button (every page) ---------- */
.pawhelp{position:fixed;right:20px;bottom:20px;z-index:390;font-family:var(--sans)}
.pawhelp-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 6px 20px rgba(58,46,30,.14);transition:transform .25s ease,box-shadow .25s ease}
.pawhelp-btn:hover{transform:translateY(-1px);box-shadow:0 9px 26px rgba(58,46,30,.18)}
.pawhelp-ico{display:inline-flex;color:var(--terracotta)}
.pawhelp.open .pawhelp-btn{background:var(--ink);color:#fff;border-color:var(--ink)}
.pawhelp.open .pawhelp-ico{color:#fff}
.pawhelp-panel{position:absolute;right:0;bottom:calc(100% + 10px);width:288px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 44px rgba(45,36,24,.18);padding:18px}
.pawhelp-h{display:block;font-family:var(--head);font-size:17px;margin-bottom:6px}
.pawhelp-p{font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin-bottom:12px}
.pawhelp-mail{display:block;font-size:14.5px;font-weight:600;color:var(--terracotta);word-break:break-all;margin-bottom:14px}
.pawhelp-row{display:flex;gap:8px}
.pawhelp-copy{flex:1;padding:9px 12px;border-radius:8px;border:1px solid var(--line);background:#fff;font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.pawhelp-copy:hover{background:var(--bg-2)}
.pawhelp-send{flex:1;padding:9px 12px;border-radius:8px;background:var(--terracotta);color:#fff;font-size:13px;font-weight:600;text-align:center;text-decoration:none}
.pawhelp-send:hover{background:var(--terracotta-deep)}
.pawhelp-track{display:block;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);text-decoration:none}
.pawhelp-track:hover{color:var(--ink)}
@media(max-width:600px){
  .pawhelp{right:14px;bottom:14px}
  .pawhelp-label{display:none}
  .pawhelp-btn{padding:12px}
  .pawhelp-panel{width:min(88vw,290px)}
}

/* ---------- Generic prose / legal ---------- */
.prose{max-width:760px}
.prose h1{font-size:clamp(30px,3.6vw,44px);margin-bottom:10px}
.prose h2{font-size:24px;margin:34px 0 10px}
.prose h3{font-size:19px;margin:24px 0 8px}
.prose p{font-size:15.5px;color:var(--ink-soft);margin-bottom:14px;line-height:1.75}
.prose ul,.prose ol{margin:0 0 16px 20px;color:var(--ink-soft);font-size:15.5px;line-height:1.75}
.prose a{color:var(--terracotta);font-weight:500;text-decoration:underline}
.prose strong{color:var(--ink)}
.page{padding:52px 0 76px}
.page-hero{background:var(--bg-2);border-bottom:1px solid var(--line)}
.page-hero .inner{padding:44px 0;max-width:840px}
.page-hero h1{font-size:clamp(30px,3.6vw,46px)}

/* ---------- Forms ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:#fff;font-size:15px;font-family:inherit;color:var(--ink);outline:none;transition:border-color .15s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--terracotta)}
.field .hint{font-size:12.5px;color:var(--muted);margin-top:4px}
.form-card{background:var(--surface);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);border:1px solid var(--line)}
.form-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}

/* ---------- Cart / Checkout ---------- */
.cart-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:26px;align-items:start}
.cart-item{display:flex;gap:14px;background:var(--surface);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);border:1px solid var(--line);margin-bottom:12px}
.cart-item img{width:78px;height:78px;border-radius:8px;object-fit:cover;flex:none}
.ci-info{flex:1}
.ci-info .ci-name{font-weight:600;font-size:15px}
.ci-info .ci-var{font-size:13px;color:var(--muted)}
.ci-qty{display:flex;align-items:center;gap:8px;margin-top:8px}
.ci-qty button{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center}
.ci-remove{color:var(--muted);font-size:13px;text-decoration:underline}
.summary-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;position:sticky;top:90px;box-shadow:var(--shadow)}
.sum-row{display:flex;justify-content:space-between;padding:9px 0;font-size:15px}
.sum-row.total{border-top:1px solid var(--line);margin-top:8px;padding-top:14px;font-weight:700;font-size:17px}
.empty-state{text-align:center;padding:60px 20px}

/* ---------- Track order ---------- */
.status-steps{display:flex;align-items:flex-start;gap:6px;margin:26px 0 8px}
.status-step{flex:1;text-align:center;position:relative}
.status-step .dot{width:16px;height:16px;border-radius:50%;background:var(--line);margin:0 auto 8px;border:3px solid var(--surface);box-shadow:0 0 0 2px var(--line)}
.status-step.done .dot{background:var(--sage);box-shadow:0 0 0 2px var(--sage)}
.status-step span{font-size:11.5px;color:var(--muted);display:block;line-height:1.3}
.status-step.done span{color:var(--ink);font-weight:600}
/* vertical timeline for order status */
.tl{margin:20px 0 4px;padding-left:4px}
.tl-step{display:flex;align-items:center;gap:12px;padding:7px 0;border-left:2px solid var(--line);margin-left:7px;padding-left:20px;position:relative}
.tl-step:first-child{padding-top:2px}
.tl-step:last-child{border-left-color:transparent;padding-bottom:2px}
.tl-dot{position:absolute;left:-7px;width:12px;height:12px;border-radius:50%;background:var(--line);border:2px solid var(--bg)}
.tl-step .tl-label{font-size:14.5px;color:var(--muted)}
.tl-step.done{border-left-color:var(--sage)}
.tl-step.done .tl-dot{background:var(--sage)}
.tl-step.done .tl-label{color:var(--ink-soft)}
.tl-step.current{border-left-color:var(--terracotta)}
.tl-step.current .tl-dot{background:var(--terracotta);box-shadow:0 0 0 3px rgba(180,85,45,.18)}
.tl-step.current .tl-label{color:var(--ink);font-weight:700}

/* ---------- Product detail ---------- */
.pd-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
.gallery{position:sticky;top:100px}
.gallery .main-img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
.gallery .thumbs{display:flex;gap:8px;margin-top:10px}
.gallery .thumbs img{width:70px;height:70px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer}
.gallery .thumbs img.on{border-color:var(--terracotta)}
.sample-note{font-size:12.5px;color:var(--muted);margin-top:8px;font-style:italic}
.pd-info h1{font-size:clamp(26px,3vw,36px);margin:8px 0 10px}
.pd-info .emotional{font-family:var(--head);font-style:italic;font-size:19px;color:var(--terracotta);display:block;margin-bottom:10px;line-height:1.4}
.pd-price{font-size:22px;font-weight:700;margin:12px 0 6px}
.var-group{margin:14px 0}
.var-group label{font-weight:600;font-size:13.5px;display:block;margin-bottom:8px}
.var-opts{display:flex;flex-wrap:wrap;gap:8px}
.var-chip{padding:9px 15px;border:1.5px solid var(--line);border-radius:999px;font-size:14px;background:#fff}
.var-chip.on{border-color:var(--ink);background:var(--ink);color:#fff}
.pd-actions{margin-top:20px;display:flex;flex-direction:column;gap:10px;max-width:420px}
.pd-trust{display:flex;gap:18px;margin-top:16px;font-size:13.5px;color:var(--muted);flex-wrap:wrap}
.pd-trust span{display:flex;gap:6px;align-items:center}
.pd-extra{margin-top:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pd-extra .px{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px}
.pd-extra .px b{display:block;font-size:13px}
.pd-extra .px span{font-size:12.5px;color:var(--muted)}

/* ---------- Shop filter ---------- */
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.chip{padding:9px 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-size:14px;color:var(--ink-soft)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- Admin ---------- */
.adm{font-family:var(--body)}
.adm .top{background:var(--ink);color:#eee;padding:12px 0;position:sticky;top:0;z-index:50}
.adm .top .container{display:flex;align-items:center;justify-content:space-between}
.adm table{width:100%;border-collapse:collapse;background:#fff;font-size:14px}
.adm th,.adm td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.adm th{background:var(--bg-2);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.adm .pill{font-size:11.5px;padding:3px 9px;border-radius:999px;font-weight:600}
.pill.published{background:#E5EDE2;color:#3F5A35}
.pill.draft{background:#F1E9DC;color:#8A6D2F}
.pill.archived{background:#EFE7E2;color:#8A5A3A}
.adm .mini-actions{display:flex;gap:6px;flex-wrap:wrap}
.adm .mini-actions button,.adm button.mini{padding:6px 10px;font-size:12.5px;border:1px solid var(--line);border-radius:8px;background:#fff}
.adm textarea.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;min-height:260px;white-space:pre;width:100%}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,80px);background:var(--ink);color:#fff;padding:12px 22px;border-radius:999px;font-size:14.5px;z-index:600;opacity:0;transition:all .25s;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Responsive ---------- */
@media(max-width:1020px){
  .main-nav{display:none}
  .header-cta-wrap .btn-desktop{display:none}
  .menu-toggle{display:flex;width:42px;height:42px;border-radius:50%;align-items:center;justify-content:center;color:var(--ink)}
  .stories,.product-grid,.steps,.beliefs{grid-template-columns:repeat(2,1fr)}
  .pd-layout{grid-template-columns:1fr}
  .gallery{position:static}
  .cart-layout{grid-template-columns:1fr}
}
@media(max-width:680px){
  .section{padding:52px 0}
  .hero-inner{gap:26px;padding:30px 0 40px;min-height:0}
  .hero-media{max-width:none}
  .hero-media img{aspect-ratio:16/10;width:100%;max-height:300px;object-fit:cover}
  .stories,.product-grid,.steps,.beliefs,.trust-grid{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:1fr 1fr;padding:18px 0}
  .news-form{flex-direction:column}
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px}
  .form-grid2{grid-template-columns:1fr}
  .pd-extra{grid-template-columns:1fr 1fr}
  .hero h1{font-size:clamp(34px,9vw,44px)}
}
@media(max-width:430px){
  .footer-grid{grid-template-columns:1fr}
  .hero .sub{font-size:17px}
}

/* ---------- small utilities ---------- */
/* Generic helpers used by transactional pages (order confirmation, payment). */
.hidden{display:none !important}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.02em}

/* ---------- product specification table ---------- */
/* Rows are rendered only for values we actually hold; see product.html. */
.spec-table{width:100%;border-collapse:collapse;margin:22px 0 0;font-size:15px}
.spec-table th,.spec-table td{padding:11px 4px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.spec-table th{font-weight:600;color:var(--ink);width:38%;padding-right:18px}
.spec-table td{color:var(--ink-soft)}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
@media(max-width:560px){.spec-table th,.spec-table td{display:block;width:auto;padding:6px 0;border-bottom:0}.spec-table tr{display:block;padding:10px 0;border-bottom:1px solid var(--line)}}
.spec-pending{font-size:14.5px;color:var(--ink-soft);background:var(--bg-2);border-radius:var(--radius);padding:14px 16px;margin-top:20px}

/* ---------- mobile buy bar (product page) ---------- */
/* On a phone the buy button scrolls out of reach. This keeps the current
   selection, the live price and the cart action visible. Hidden above 760px,
   and it only slides in while the real button is off screen. */
.buybar{display:none}
@media(max-width:760px){
  body.has-buybar{padding-bottom:80px}
  .buybar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:10px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(250,246,239,.97);border-top:1px solid var(--line);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    transform:translateY(115%);transition:transform .28s var(--ease);
    box-shadow:0 -4px 18px rgba(38,36,33,.06)}
  .buybar.on{transform:translateY(0)}
  .bb-left{flex:1;min-width:0}
  .bb-name{display:block;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bb-var{display:block;font-size:12px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .buybar .btn{flex:0 0 auto;padding:11px 16px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){.buybar{transition:none}}