/* ===================================================================
   PuzzleHouse — storefront stylesheet
   Palette is warm-wood: walnut ink, cream paper, amber + pine accents.
   =================================================================== */

/* The hidden attribute must win over any author display rule below, so a
   rule like `.field small{display:block}` cannot leave a hidden element
   on screen. */
[hidden]{display:none !important}

:root{
  --ink:#2b1d14;
  --ink-2:#5a4636;
  --ink-3:#8a7563;
  --cream:#fdf9f3;
  --paper:#ffffff;
  --sand:#f5ead9;
  --sand-2:#ecdcc4;
  --line:#e6d8c3;

  --amber:#d97b1f;
  --amber-dark:#b3610f;
  --amber-soft:#fdefdc;
  --pine:#1f6f5c;
  --pine-soft:#e3f2ee;
  --berry:#b23a48;
  --berry-soft:#fbe9eb;
  --violet:#6b4fa8;

  --radius-sm:10px;
  --radius:16px;
  --radius-lg:26px;
  --radius-pill:999px;

  --shadow-sm:0 2px 8px rgba(65,42,22,.06);
  --shadow:0 10px 30px rgba(65,42,22,.09);
  --shadow-lg:0 24px 60px rgba(65,42,22,.16);

  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --container:1240px;
  --header-h:76px;
  --ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font-body);color:var(--ink);
  background:var(--cream);line-height:1.65;font-size:16px;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.15;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2.2rem,5vw,3.9rem)}
h2{font-size:clamp(1.75rem,3.4vw,2.7rem)}
h3{font-size:clamp(1.15rem,2vw,1.5rem)}
p{margin:0 0 1rem}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ------------------------------------------------------ trade fair bar --- */
.fair-bar{
  position:relative;
  background:linear-gradient(100deg,#2b1d14 0%,#4a2f1c 40%,#8a4a12 78%,#d97b1f 100%);
  color:#fff9ef;font-size:.875rem;overflow:hidden;
}
.fair-bar::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,transparent 0 22px,rgba(255,255,255,.045) 22px 44px);
}
.fair-bar__inner{
  position:relative;z-index:1;max-width:var(--container);margin:0 auto;
  padding:11px 52px 11px 24px;display:flex;align-items:center;justify-content:center;
  gap:14px;flex-wrap:wrap;text-align:center;
}
.fair-bar__flag{
  background:var(--amber);color:#fff;font-weight:700;font-size:.66rem;
  letter-spacing:.11em;text-transform:uppercase;padding:4px 11px;border-radius:var(--radius-pill);
  box-shadow:0 2px 10px rgba(0,0,0,.25);white-space:nowrap;
}
.fair-bar__text{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.fair-bar__text strong{font-weight:600;letter-spacing:.01em}
.fair-bar__sep{opacity:.45}
.fair-bar__pill{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  padding:3px 12px;border-radius:var(--radius-pill);font-size:.78rem;font-weight:500;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
}
.fair-bar__pill--live{background:rgba(74,222,128,.16);border-color:rgba(74,222,128,.45)}
.fair-bar__pill .dot{width:7px;height:7px;border-radius:50%;background:#4ade80;animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.fair-bar__cta{font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.fair-bar__cta:hover{color:#ffd9a8}
.fair-bar__close{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);z-index:2;
  color:rgba(255,255,255,.6);font-size:1.5rem;line-height:1;padding:0 6px;
}
.fair-bar__close:hover{color:#fff}
body.fair-dismissed .fair-bar{display:none}

/* ------------------------------------------------------------- header --- */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(253,249,243,.88);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);transition:box-shadow .3s var(--ease);
}
.site-header.is-stuck{box-shadow:var(--shadow-sm)}
.site-header__inner{display:flex;align-items:center;gap:26px;height:var(--header-h)}

.logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
.logo__mark{
  width:40px;height:40px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(140deg,var(--amber),var(--amber-dark));
  color:#fff;display:grid;place-items:center;box-shadow:0 4px 14px rgba(217,123,31,.34);
}
.logo__mark svg{width:23px;height:23px}
.logo__name{font-family:var(--font-display);font-weight:700;font-size:1.32rem;letter-spacing:-.02em;display:block;line-height:1.1}
.logo__name em{font-style:normal;color:var(--amber)}
.logo__sub{font-size:.6rem;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3);font-weight:500}

.main-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.main-nav > a,.nav-drop > a{
  padding:9px 14px;border-radius:var(--radius-pill);font-weight:500;font-size:.94rem;
  color:var(--ink-2);transition:.2s var(--ease);white-space:nowrap;display:inline-block;
}
.main-nav > a:hover,.nav-drop > a:hover{background:var(--sand);color:var(--ink)}
.main-nav a.is-active{color:var(--ink);font-weight:600;background:var(--sand)}
.nav-drop{position:relative}
.nav-drop .caret{font-size:.6rem;opacity:.55}
.nav-drop__menu{
  position:absolute;top:calc(100% + 10px);left:0;min-width:230px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:.22s var(--ease);
}
.nav-drop:hover .nav-drop__menu,.nav-drop:focus-within .nav-drop__menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-drop__menu a{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:9px 13px;border-radius:var(--radius-sm);font-size:.92rem;color:var(--ink-2);
}
.nav-drop__menu a:hover{background:var(--sand);color:var(--ink)}
.nav-drop__count{font-size:.72rem;color:var(--ink-3);background:var(--sand);padding:1px 7px;border-radius:var(--radius-pill)}

.header-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.header-search{position:relative;display:flex;align-items:center}
.header-search input{
  width:190px;padding:9px 38px 9px 15px;border:1px solid var(--line);border-radius:var(--radius-pill);
  background:var(--paper);font-size:.88rem;color:var(--ink);transition:.25s var(--ease);outline:none;font-family:inherit;
}
.header-search input:focus{width:250px;border-color:var(--amber);box-shadow:0 0 0 3px rgba(217,123,31,.13)}
.header-search input::placeholder{color:var(--ink-3)}
.header-search button{position:absolute;right:12px;color:var(--ink-3);display:grid;place-items:center}
.header-search svg{width:17px;height:17px}
.header-search button:hover{color:var(--amber)}

.cart-link{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--sand);color:var(--ink);transition:.2s var(--ease)}
.cart-link:hover{background:var(--sand-2);transform:translateY(-1px)}
.cart-link svg{width:21px;height:21px}
.cart-link__count{
  position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;
  background:var(--berry);color:#fff;font-size:.7rem;font-weight:700;border-radius:var(--radius-pill);
  display:grid;place-items:center;border:2px solid var(--cream);
}
.nav-toggle{display:none;flex-direction:column;gap:5px;width:42px;height:42px;border-radius:12px;background:var(--sand);align-items:center;justify-content:center}
.nav-toggle span{width:18px;height:2px;background:var(--ink);border-radius:2px;transition:.25s var(--ease)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* -------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border-radius:var(--radius-pill);font-weight:600;font-size:.95rem;
  transition:.22s var(--ease);cursor:pointer;border:1.5px solid transparent;
  text-align:center;line-height:1.2;font-family:inherit;
}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--amber);color:#fff;box-shadow:0 6px 20px rgba(217,123,31,.3)}
.btn-primary:hover{background:var(--amber-dark);transform:translateY(-2px);box-shadow:0 10px 26px rgba(217,123,31,.4)}
.btn-dark{background:var(--ink);color:var(--cream)}
.btn-dark:hover{background:#432d1e;transform:translateY(-2px)}
.btn-outline{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-outline:hover{background:var(--ink);color:var(--cream)}
.btn-ghost{background:var(--paper);border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber-dark)}
.btn-block{width:100%}
.btn-sm{padding:9px 17px;font-size:.86rem}
.btn-lg{padding:16px 34px;font-size:1.03rem}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}

/* ---------------------------------------------------------------- hero -- */
.hero{position:relative;overflow:hidden;background:linear-gradient(170deg,var(--sand) 0%,var(--cream) 62%)}
.hero::before{
  content:'';position:absolute;top:-190px;right:-190px;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(217,123,31,.15),transparent 68%);pointer-events:none;
}
.hero::after{
  content:'';position:absolute;bottom:-260px;left:-160px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(31,111,92,.12),transparent 68%);pointer-events:none;
}
.hero__inner{
  position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;
  gap:64px;align-items:center;padding:84px 0 96px;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;background:var(--paper);
  border:1px solid var(--line);padding:7px 17px;border-radius:var(--radius-pill);
  font-size:.79rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:26px;box-shadow:var(--shadow-sm);
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--pine)}
.hero h1{margin-bottom:22px}
.hero h1 .accent{
  color:var(--amber);position:relative;display:inline-block;font-style:italic;
}
.hero h1 .accent::after{
  content:'';position:absolute;left:0;right:0;bottom:.06em;height:.16em;
  background:rgba(217,123,31,.2);border-radius:4px;z-index:-1;
}
.hero__lead{font-size:1.13rem;color:var(--ink-2);max-width:33em;margin-bottom:32px}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:40px}
.hero__points{list-style:none;padding:0;margin:0;display:flex;gap:28px;flex-wrap:wrap}
.hero__points li{display:flex;align-items:center;gap:9px;font-size:.92rem;font-weight:500;color:var(--ink-2)}
.hero__points svg{width:19px;height:19px;color:var(--pine);flex-shrink:0}

/* hero collage */
.hero__visual{position:relative;aspect-ratio:1/1.02}
.hero__tile{
  position:absolute;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-lg);background:var(--sand-2);
}
.hero__tile img{width:100%;height:100%;object-fit:cover}
.hero__tile--a{top:0;left:0;width:57%;height:52%;transform:rotate(-3deg);z-index:2}
.hero__tile--b{top:14%;right:0;width:46%;height:40%;transform:rotate(4deg);z-index:1}
.hero__tile--c{bottom:4%;left:11%;width:62%;height:44%;transform:rotate(2deg);z-index:3}
.hero__chip{
  position:absolute;z-index:4;background:var(--paper);border-radius:var(--radius);
  padding:13px 18px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:12px;
}
.hero__chip--rating{top:6%;right:2%;animation:float 5s ease-in-out infinite}
.hero__chip--ship{bottom:12%;right:0;animation:float 6.5s ease-in-out infinite .6s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.hero__chip .ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex-shrink:0}
.hero__chip .ico--amber{background:var(--amber-soft);color:var(--amber-dark)}
.hero__chip .ico--pine{background:var(--pine-soft);color:var(--pine)}
.hero__chip svg{width:19px;height:19px}
.hero__chip b{display:block;font-size:.92rem;font-weight:700;line-height:1.25}
.hero__chip span{font-size:.75rem;color:var(--ink-3)}

/* --------------------------------------------------------- trust strip -- */
.trust-strip{background:var(--ink);color:var(--cream);padding:22px 0}
.trust-strip__inner{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:13px;flex:1;min-width:210px}
.trust-item svg{width:25px;height:25px;color:var(--amber);flex-shrink:0}
.trust-item b{display:block;font-size:.93rem;font-weight:600}
.trust-item span{font-size:.79rem;color:rgba(253,249,243,.62)}

/* -------------------------------------------------------------- layout -- */
.section{padding:84px 0}
.section--sand{background:var(--sand)}
.section--paper{background:var(--paper)}
.section-head{text-align:center;max-width:660px;margin:0 auto 52px}
.section-head--left{text-align:left;margin-left:0}
.section-head .kicker{
  display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--amber);margin-bottom:13px;
}
.section-head p{color:var(--ink-2);font-size:1.04rem;margin:0}
.section-head h2{margin-bottom:14px}

/* ---------------------------------------------------------- categories -- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.cat-card{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:3/3.4;
  background:var(--sand-2);box-shadow:var(--shadow);transition:.32s var(--ease);display:block;
}
.cat-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg)}
.cat-card img{width:100%;height:100%;object-fit:cover;transition:.6s var(--ease)}
.cat-card:hover img{transform:scale(1.07)}
.cat-card__body{
  position:absolute;inset:auto 0 0 0;padding:26px 22px 22px;color:#fff;
  background:linear-gradient(to top,rgba(30,18,10,.92),rgba(30,18,10,.55) 45%,transparent);
}
.cat-card__body h3{margin:0 0 3px;color:#fff;font-size:1.22rem}
.cat-card__body span{font-size:.83rem;opacity:.82}
.cat-card__go{
  position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.9);color:var(--ink);display:grid;place-items:center;
  opacity:0;transform:translateY(-6px);transition:.3s var(--ease);
}
.cat-card:hover .cat-card__go{opacity:1;transform:translateY(0)}
.cat-card__go svg{width:16px;height:16px}

/* ------------------------------------------------------ product cards --- */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:26px}
.product-card{
  background:var(--paper);border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);transition:.3s var(--ease);display:flex;flex-direction:column;
}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.product-card__media{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--sand);display:block}
.product-card__media img{width:100%;height:100%;object-fit:cover;transition:.55s var(--ease)}
.product-card:hover .product-card__media img{transform:scale(1.06)}
.product-card__tags{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.tag{
  font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--radius-pill);backdrop-filter:blur(6px);
}
.tag--sale{background:var(--berry);color:#fff}
.tag--new{background:var(--pine);color:#fff}
.tag--out{background:rgba(43,29,20,.82);color:#fff}
.product-card__quick{
  position:absolute;left:12px;right:12px;bottom:12px;opacity:0;transform:translateY(10px);
  transition:.28s var(--ease);
}
.product-card:hover .product-card__quick{opacity:1;transform:translateY(0)}
.product-card__body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.product-card__cat{font-size:.71rem;letter-spacing:.11em;text-transform:uppercase;color:var(--amber);font-weight:700;margin-bottom:6px}
.product-card__title{font-family:var(--font-display);font-size:1.06rem;font-weight:600;line-height:1.3;margin:0 0 7px}
.product-card__title a:hover{color:var(--amber-dark)}
.product-card__meta{font-size:.81rem;color:var(--ink-3);margin-bottom:13px;display:flex;gap:9px;flex-wrap:wrap}
.product-card__meta span{display:inline-flex;align-items:center;gap:4px}
.product-card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.price{display:flex;align-items:baseline;gap:8px}
.price__now{font-size:1.22rem;font-weight:700;font-family:var(--font-display);color:var(--ink)}
.price__was{font-size:.9rem;color:var(--ink-3);text-decoration:line-through}
.price__off{font-size:.72rem;font-weight:700;color:var(--berry);background:var(--berry-soft);padding:2px 7px;border-radius:var(--radius-pill)}

/* --------------------------------------------------------- why / value -- */
.value-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:24px}
.value-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:32px 28px;transition:.3s var(--ease);position:relative;overflow:hidden;
}
.value-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.value-card__ico{
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:20px;
  background:var(--amber-soft);color:var(--amber-dark);
}
.value-card:nth-child(2n) .value-card__ico{background:var(--pine-soft);color:var(--pine)}
.value-card:nth-child(3n) .value-card__ico{background:#efeaf9;color:var(--violet)}
.value-card__ico svg{width:25px;height:25px}
.value-card h3{font-size:1.13rem;margin-bottom:9px}
.value-card p{font-size:.93rem;color:var(--ink-2);margin:0}

/* ----------------------------------------------------------- fair band -- */
.fair-band{
  position:relative;overflow:hidden;color:#fff9ef;
  background:linear-gradient(125deg,#22160e 0%,#3d2617 45%,#7a3f0f 100%);
}
.fair-band::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent 0 30px,rgba(255,255,255,.03) 30px 60px);
}
.fair-band__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;padding:76px 0}
.fair-band h2{color:#fff;margin-bottom:16px}
.fair-band h2 em{font-style:italic;color:#f7b955}
.fair-band p{color:rgba(255,249,239,.78);font-size:1.05rem;max-width:34em}
.fair-band .eyebrow{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#ffd9a8}
.fair-band .eyebrow .dot{background:#f7b955}
.fair-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:30px 0 32px}
.fair-fact{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);padding:16px 18px}
.fair-fact span{display:block;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,217,168,.8);margin-bottom:4px;font-weight:600}
.fair-fact b{font-size:1.02rem;font-weight:600;font-family:var(--font-display)}

.countdown{display:flex;gap:12px;flex-wrap:wrap}
.countdown__box{
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius);padding:18px 10px;text-align:center;flex:1;min-width:76px;
  backdrop-filter:blur(6px);
}
.countdown__num{font-family:var(--font-display);font-size:2.2rem;font-weight:700;line-height:1;color:#f7b955;display:block}
.countdown__lbl{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,249,239,.65);margin-top:7px;display:block}
.countdown--done{background:rgba(74,222,128,.14);border:1px solid rgba(74,222,128,.4);border-radius:var(--radius);padding:24px;text-align:center;width:100%}

/* ----------------------------------------------------------- age rail --- */
.age-rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
.age-chip{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 18px;text-align:center;transition:.28s var(--ease);display:block;
}
.age-chip:hover{transform:translateY(-5px);border-color:var(--amber);box-shadow:var(--shadow)}
.age-chip__emoji{font-size:2rem;line-height:1;margin-bottom:11px;display:block}
.age-chip b{display:block;font-family:var(--font-display);font-size:1.05rem;margin-bottom:3px}
.age-chip span{font-size:.79rem;color:var(--ink-3)}

/* -------------------------------------------------------- testimonials -- */
.quote-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:24px}
.quote-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 28px;position:relative}
.quote-card__stars{color:var(--amber);letter-spacing:2px;margin-bottom:14px;font-size:.95rem}
.quote-card p{font-size:.98rem;color:var(--ink-2);font-style:italic;margin-bottom:20px}
.quote-card__who{display:flex;align-items:center;gap:12px}
.quote-card__av{
  width:42px;height:42px;border-radius:50%;background:var(--sand-2);display:grid;place-items:center;
  font-weight:700;color:var(--ink-2);font-size:.95rem;flex-shrink:0;
}
.quote-card__who b{display:block;font-size:.92rem;font-weight:600}
.quote-card__who span{font-size:.79rem;color:var(--ink-3)}

/* ---------------------------------------------------------- newsletter -- */
.cta-band{background:var(--sand);padding:70px 0}
.cta-box{
  background:linear-gradient(135deg,var(--ink) 0%,#4a2f1c 100%);border-radius:var(--radius-lg);
  padding:52px 48px;color:var(--cream);display:grid;grid-template-columns:1.1fr .9fr;
  gap:40px;align-items:center;position:relative;overflow:hidden;
}
.cta-box::before{
  content:'';position:absolute;top:-120px;right:-100px;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(217,123,31,.28),transparent 70%);
}
.cta-box > *{position:relative;z-index:1}
.cta-box h2{color:#fff;margin-bottom:11px}
.cta-box p{color:rgba(253,249,243,.72);margin:0}
.subscribe-form{display:flex;gap:11px;flex-wrap:wrap}
.subscribe-form input{
  flex:1;min-width:200px;padding:14px 20px;border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.1);color:#fff;font-family:inherit;font-size:.95rem;outline:none;
}
.subscribe-form input::placeholder{color:rgba(253,249,243,.5)}
.subscribe-form input:focus{border-color:var(--amber);background:rgba(255,255,255,.15)}

/* -------------------------------------------------------------- footer -- */
.site-footer{background:var(--ink);color:rgba(253,249,243,.72);padding:66px 0 26px;font-size:.92rem}
.footer-top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(253,249,243,.12)}
.footer-brand p{margin:16px 0 20px;max-width:30em;line-height:1.7}
.logo--footer .logo__name{color:#fff}
.footer-social{display:flex;gap:10px}
.footer-social a{width:38px;height:38px;border-radius:11px;background:rgba(253,249,243,.08);display:grid;place-items:center;transition:.22s var(--ease)}
.footer-social a:hover{background:var(--amber);color:#fff;transform:translateY(-2px)}
.footer-social svg{width:18px;height:18px}
.footer-col h4{color:#fff;font-size:.79rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:17px;font-family:var(--font-body);font-weight:700}
.footer-col a{display:block;padding:5px 0;transition:.2s var(--ease)}
.footer-col a:hover{color:var(--amber);padding-left:5px}
.footer-contact p{line-height:1.7;margin-bottom:12px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;padding-top:24px;font-size:.85rem}
.footer-bottom p{margin:0;color:rgba(253,249,243,.5)}
.footer-pay{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:rgba(253,249,243,.5)}
.footer-pay strong{color:var(--amber)}
.pay-chips{display:flex;gap:6px;flex-wrap:wrap}
.pay-chips i{font-style:normal;font-size:.7rem;background:rgba(253,249,243,.08);padding:3px 9px;border-radius:5px;color:rgba(253,249,243,.7)}

.whatsapp-float{
  position:fixed;right:22px;bottom:22px;z-index:90;width:54px;height:54px;border-radius:50%;
  background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(37,211,102,.42);
  transition:.25s var(--ease);
}
.whatsapp-float:hover{transform:scale(1.09)}
.whatsapp-float svg{width:29px;height:29px}

/* ------------------------------------------------------- page headers --- */
.page-head{background:linear-gradient(170deg,var(--sand),var(--cream));padding:52px 0 44px;border-bottom:1px solid var(--line)}
.page-head h1{margin-bottom:10px;font-size:clamp(1.9rem,4vw,2.9rem)}
.page-head p{color:var(--ink-2);margin:0;max-width:44em}
.breadcrumb{display:flex;gap:8px;align-items:center;font-size:.84rem;color:var(--ink-3);margin-bottom:14px;flex-wrap:wrap}
.breadcrumb a:hover{color:var(--amber)}
.breadcrumb span{opacity:.5}

/* -------------------------------------------------------------- forms --- */
.field{margin-bottom:18px}
.field label{display:block;font-size:.86rem;font-weight:600;margin-bottom:7px;color:var(--ink-2)}
.field label .req{color:var(--berry)}
.field input,.field select,.field textarea{
  width:100%;padding:12px 15px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--paper);font-family:inherit;font-size:.95rem;color:var(--ink);
  transition:.2s var(--ease);outline:none;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(217,123,31,.13)}
.field textarea{resize:vertical;min-height:120px}
.field small{display:block;font-size:.79rem;color:var(--ink-3);margin-top:5px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}

.alert{padding:14px 18px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:.93rem;border:1px solid}
.alert-success{background:var(--pine-soft);border-color:#a8d5c9;color:#14513f}
.alert-error{background:var(--berry-soft);border-color:#f0bcc2;color:#8c1f2c}
.alert-info{background:#e8f0fb;border-color:#b9cff0;color:#1c4a86}
.alert-warning{background:var(--amber-soft);border-color:#f3d0a0;color:#8a4a12}
.flash-wrap{padding-top:20px}

.empty-state{text-align:center;padding:70px 20px;max-width:460px;margin:0 auto}
.empty-state__ico{font-size:3rem;margin-bottom:16px}
.empty-state h3{margin-bottom:9px}
.empty-state p{color:var(--ink-2);margin-bottom:24px}

/* ------------------------------------------------------------- badges --- */
.badge{display:inline-block;padding:3px 11px;border-radius:var(--radius-pill);font-size:.74rem;font-weight:600;text-transform:capitalize}
.badge-green{background:var(--pine-soft);color:#14513f}
.badge-amber{background:var(--amber-soft);color:#8a4a12}
.badge-red{background:var(--berry-soft);color:#8c1f2c}
.badge-blue{background:#e8f0fb;color:#1c4a86}
.badge-violet{background:#efeaf9;color:#4b3579}
.badge-grey{background:#eee8e0;color:#5a4636}

/* ---------------------------------------------------------- responsive -- */
@media (max-width:1080px){
  .footer-top{grid-template-columns:1fr 1fr 1fr}
  .header-search{display:none}
}
@media (max-width:940px){
  .hero__inner{grid-template-columns:1fr;gap:48px;padding:56px 0 68px}
  .hero__visual{max-width:480px;margin:0 auto;width:100%}
  .fair-band__inner{grid-template-columns:1fr;gap:40px;padding:56px 0}
  .cta-box{grid-template-columns:1fr;padding:38px 28px}
  .nav-toggle{display:flex}
  .main-nav{
    position:fixed;top:0;right:0;bottom:0;width:min(320px,84vw);background:var(--paper);
    flex-direction:column;align-items:stretch;gap:2px;padding:88px 20px 30px;
    box-shadow:var(--shadow-lg);transform:translateX(100%);transition:.3s var(--ease);
    overflow-y:auto;z-index:99;
  }
  .main-nav.is-open{transform:translateX(0)}
  .main-nav > a,.nav-drop > a{padding:13px 16px;border-radius:var(--radius-sm);font-size:1rem}
  .nav-drop__menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:0 0 0 14px;background:transparent}
  .nav-drop__menu a{font-size:.9rem;padding:8px 12px}
}
@media (max-width:720px){
  .section{padding:58px 0}
  .footer-top{grid-template-columns:1fr 1fr;gap:30px}
  .footer-bottom{flex-direction:column;text-align:center}
  .fair-facts{grid-template-columns:1fr}
  .field-row,.field-row-3{grid-template-columns:1fr}
  .fair-bar__inner{font-size:.8rem;padding:10px 44px 10px 16px}
  .fair-bar__text{gap:7px}
  .product-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
  .product-card__body{padding:14px 15px 18px}
  .trust-strip__inner{gap:18px}
  .trust-item{min-width:calc(50% - 12px)}
}
@media (max-width:480px){
  .footer-top{grid-template-columns:1fr}
  .hero__points{gap:14px}
  .hero__points li{min-width:calc(50% - 10px)}
  .btn{padding:12px 20px}
}

/* ===================================================================
   Shop / product / cart / checkout
   =================================================================== */

.shop-layout{display:grid;grid-template-columns:255px 1fr;gap:40px;padding:44px 0 80px;align-items:start}
.shop-filters{position:sticky;top:calc(var(--header-h) + 20px)}
.filter-block{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin-bottom:18px}
.filter-block h4{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px;font-family:var(--font-body);font-weight:700}
.filter-list a{display:flex;justify-content:space-between;align-items:center;padding:8px 11px;border-radius:var(--radius-sm);font-size:.92rem;color:var(--ink-2);transition:.18s var(--ease)}
.filter-list a:hover{background:var(--sand);color:var(--ink)}
.filter-list a.is-active{background:var(--amber-soft);color:var(--amber-dark);font-weight:600}
.filter-list .count{font-size:.75rem;color:var(--ink-3)}
.shop-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.shop-toolbar .result-count{font-size:.92rem;color:var(--ink-2)}
.shop-toolbar select{padding:9px 14px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--paper);font-family:inherit;font-size:.9rem;outline:none;cursor:pointer}
.filter-toggle{display:none}
.shop-toolbar__end{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.shop-toolbar__end .btn svg{width:15px;height:15px;margin-right:6px;vertical-align:-3px}

.pagination{display:flex;justify-content:center;gap:7px;margin-top:44px;flex-wrap:wrap}
.pagination a,.pagination span{
  min-width:40px;height:40px;padding:0 12px;display:grid;place-items:center;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--paper);font-size:.9rem;font-weight:500;transition:.2s var(--ease);
}
.pagination a:hover{border-color:var(--amber);color:var(--amber-dark)}
.pagination .is-current{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.pagination .is-disabled{opacity:.4;pointer-events:none}

/* product detail */

/* ===================================================================
   Product page — arranged to put the whole decision on one screen.
   Gallery left with a thumb rail, buying column right, and everything
   that used to run down the page (description, specs, shipping) folded
   into one tabbed panel.
   =================================================================== */
.pdp{
  display:grid;grid-template-columns:1.02fr .98fr;gap:40px;
  padding:20px 0 22px;align-items:start;
}
/* Tall viewports get a single-screen layout; short ones just flow.
   Rather than guess a height for the tab panel, the buying column is capped
   to the screen and the panel takes whatever room is left over — so the page
   itself never scrolls, whatever the viewport or the length of the copy. */
@media (min-width:1000px) and (min-height:700px){
  /* The gallery gives up height so the tab panel below can share the screen —
     image and buying column on top, everything else full width underneath. */
  .pdp-gallery__main{max-height:min(54vh,540px)}
}

/* ---- gallery: thumbs in a rail beside the image ---- */
.pdp-gallery{display:grid;gap:12px}
.pdp-gallery.has-rail{grid-template-columns:72px minmax(0,1fr)}
.pdp-gallery__thumbs{
  /* Also uncapped — the page should not contain a scrollbar inside a
     scrollbar anywhere. Five thumbs fit beside the image comfortably. */
  display:flex;flex-direction:column;gap:9px;
}
.pdp-thumb{aspect-ratio:1;flex:none}

/* ---- the buying column ---- */
.pdp-info{display:flex;flex-direction:column;min-width:0}
.pdp-topline{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:6px;
}
.pdp-info .pdp-cat{
  font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--amber);font-weight:700;
}
.pdp-info .pdp-cat:hover{color:var(--amber-dark)}
.pdp-rating{display:flex;align-items:center;gap:7px;font-size:.82rem;color:var(--ink-3)}
.pdp-info h1{font-size:clamp(1.5rem,2.6vw,2.15rem);margin-bottom:10px;line-height:1.12}

.pdp-price{display:flex;align-items:baseline;gap:11px;margin-bottom:4px;flex-wrap:wrap}
.pdp-price .now{font-family:var(--font-display);font-size:1.85rem;font-weight:700}
.pdp-tax{font-size:.8rem;color:var(--ink-3);margin-bottom:14px}
.pdp-lead{
  font-size:.94rem;color:var(--ink-2);line-height:1.55;
  margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line);
}
.pdp-variants{margin:2px 0 14px;display:grid;gap:13px}
.pdp-buy{display:flex;gap:11px;align-items:stretch;flex-wrap:wrap;margin-bottom:10px}

/* ---- specs, now a definition list inside the tab panel ---- */
.pdp-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0}
.pdp-spec{background:var(--sand);border-radius:var(--radius-sm);padding:9px 12px}
.pdp-spec dt{
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin-bottom:2px;
}
.pdp-spec dd{margin:0;font-size:.88rem;font-weight:600}

/* ---- four promises on one line ---- */
.pdp-assure{
  display:flex;flex-wrap:wrap;gap:8px 18px;
  margin:12px 0 0;padding:11px 0 0;border-top:1px solid var(--line);
}
.pdp-assure span{
  display:flex;align-items:center;gap:6px;
  font-size:.78rem;color:var(--ink-3);white-space:nowrap;
}
.pdp-assure svg{width:15px;height:15px;color:var(--pine);flex-shrink:0}

/* ---- the tabbed panel: full width, below both columns ----
   It sits under the gallery as well as the buying column, so the space beside
   the image is used rather than left blank, and the copy gets the whole
   measure instead of a narrow column. */
.pdp-tabs{margin:0 0 40px}
.pdp-tabs__bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.pdp-tab{
  padding:8px 20px;border-radius:var(--radius-pill);
  font-size:.85rem;font-weight:600;color:var(--ink-2);
  background:var(--sand);border:1px solid transparent;white-space:nowrap;
  transition:background .16s var(--ease),color .16s var(--ease),
             border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.pdp-tab:hover{background:var(--sand-2);color:var(--ink)}
.pdp-tab.is-active{
  background:var(--amber);color:#fff;border-color:var(--amber);
  box-shadow:0 3px 10px rgba(217,123,31,.28);
}
.pdp-tabs__panel{
  display:none;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 24px;
  font-size:.92rem;color:var(--ink-2);line-height:1.65;
  /* Deliberately uncapped: a long description grows the panel rather than
     hiding itself behind a scrollbar inside the page. */
}
.pdp-tabs__panel.is-active{display:block}
.pdp-tabs__panel p{margin:0;max-width:82ch}
.pdp-tabs__panel p + p{margin-top:.7em}
.pdp-shiplist{list-style:none;margin:0;padding:0;display:grid;gap:10px;
              grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.pdp-shiplist li{position:relative;padding-left:15px;font-size:.87rem}
.pdp-shiplist li::before{
  content:'';position:absolute;left:0;top:.55em;width:5px;height:5px;
  border-radius:50%;background:var(--amber);
}
.pdp-shiplist b{color:var(--ink);font-weight:600}
.pdp-shiplist a{color:var(--amber-dark);font-weight:600}

@media (max-width:900px){
  .pdp{gap:28px;padding:16px 0 30px}
  .pdp-gallery.has-rail{grid-template-columns:58px minmax(0,1fr)}
  .pdp-tabs__panel{padding:16px 18px}
  .pdp-tab{padding:7px 16px;font-size:.82rem}
  .pdp-assure span{font-size:.75rem}
}
@media (max-width:560px){
  .pdp-gallery.has-rail{grid-template-columns:1fr}
  .pdp-gallery__thumbs{flex-direction:row;overflow-x:auto}
  .pdp-thumb{width:64px}
  .pdp-assure{gap:7px 14px}
}

.pdp-gallery__main{
  border-radius:var(--radius-lg);overflow:hidden;background:var(--sand);aspect-ratio:1/1;
  border:1px solid var(--line);
  /* Never taller than the screen it is supposed to fit inside. */
  max-height:calc(100vh - var(--header-h) - 140px);
}
.pdp-gallery__main img{width:100%;height:100%;object-fit:cover}

.pdp-thumb{
  border-radius:12px;overflow:hidden;aspect-ratio:1/1;border:2px solid transparent;
  background:var(--sand);cursor:pointer;transition:.2s var(--ease);padding:0;
}
.pdp-thumb:hover{border-color:var(--sand-2)}
.pdp-thumb.is-active{border-color:var(--amber)}
.pdp-thumb img{width:100%;height:100%;object-fit:cover}




.pdp-rating .stars{color:var(--amber);letter-spacing:1.5px}


.pdp-price .was{font-size:1.1rem;color:var(--ink-3);text-decoration:line-through}
.pdp-price .off{font-size:.8rem;font-weight:700;color:#fff;background:var(--berry);padding:3px 11px;border-radius:var(--radius-pill)}









.qty-stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--paper);overflow:hidden}
.qty-stepper button{width:42px;height:50px;font-size:1.25rem;color:var(--ink-2);transition:.18s var(--ease)}
.qty-stepper button:hover{background:var(--sand);color:var(--ink)}
.qty-stepper input{width:48px;height:50px;text-align:center;border:none;outline:none;font-family:inherit;font-size:1rem;font-weight:600;background:transparent;color:var(--ink);-moz-appearance:textfield}
.qty-stepper input::-webkit-outer-spin-button,.qty-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pdp-buy .btn{flex:1;min-width:180px}

.stock-line{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:500;margin-bottom:22px}
.stock-line .dot{width:8px;height:8px;border-radius:50%}
.stock-line.in{color:var(--pine)} .stock-line.in .dot{background:var(--pine)}
.stock-line.low{color:var(--amber-dark)} .stock-line.low .dot{background:var(--amber)}
.stock-line.out{color:var(--berry)} .stock-line.out .dot{background:var(--berry)}

.cart-row__variant{font-size:.85rem;font-weight:600;color:var(--ink-2);margin-top:3px}

/* --------------------------------------------------------- order tracking --- */
.track-wrap{max-width:660px;margin:34px auto 70px}
.track-form{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px 30px}
.track-form .field{margin-bottom:18px}
.track-form label{display:block;font-size:.86rem;font-weight:600;margin-bottom:6px;color:var(--ink-2)}
.track-form .req{color:var(--berry)}
.track-form input{width:100%;padding:12px 15px;border:1px solid var(--line);border-radius:var(--radius);
  font-family:inherit;font-size:.97rem;color:var(--ink);background:var(--cream);outline:none;transition:.16s}
.track-form input:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(217,123,31,.13);background:var(--paper)}
.track-form small{display:block;font-size:.8rem;color:var(--ink-3);margin-top:5px}
.track-help{font-size:.88rem;color:var(--ink-2);text-align:center;margin-top:14px}
.track-help a{text-decoration:underline}
.track-label{font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-weight:700}

.track-steps{list-style:none;margin:22px 0 4px;padding:0 0 0 6px}
.track-step{position:relative;display:flex;gap:16px;padding:0 0 22px 0}
.track-step:last-child{padding-bottom:0}
.track-step::before{content:'';position:absolute;left:8px;top:20px;bottom:-2px;width:2px;background:var(--line)}
.track-step:last-child::before{display:none}
.track-step__dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);background:var(--paper);
  flex-shrink:0;margin-top:2px;position:relative;z-index:1}
.track-step b{display:block;font-size:.96rem;color:var(--ink-3)}
.track-step span:last-child{font-size:.86rem;color:var(--ink-3)}
.track-step.is-done .track-step__dot{background:var(--pine);border-color:var(--pine)}
.track-step.is-done::before{background:var(--pine)}
.track-step.is-done b{color:var(--ink-2)}
.track-step.is-current .track-step__dot{background:var(--amber);border-color:var(--amber);
  box-shadow:0 0 0 5px rgba(217,123,31,.18)}
.track-step.is-current b{color:var(--ink);font-weight:700}
.track-step.is-current span:last-child{color:var(--ink-2)}

.track-courier{margin-top:20px;background:var(--sand);border-radius:var(--radius);padding:16px 18px}
.track-courier__num{font-family:var(--font-display);font-size:1.15rem;font-weight:700;letter-spacing:.04em;
  margin:5px 0 3px;word-break:break-all}
.track-courier small{font-size:.8rem;color:var(--ink-3)}

@media (max-width:560px){ .track-form{padding:22px 18px} }

/* ------------------------------------------------------- variant picker --- */

.pdp-opt__head{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.pdp-opt__head span{font-size:.82rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.pdp-opt__head b{font-size:.92rem;font-weight:600;color:var(--ink)}
.pdp-opt__values{display:flex;flex-wrap:wrap;gap:9px}
.pdp-swatch{border:1.5px solid var(--line);background:var(--paper);color:var(--ink-2);
  padding:9px 18px;border-radius:var(--radius-pill);font-family:inherit;font-size:.9rem;font-weight:500;
  cursor:pointer;transition:.18s var(--ease);line-height:1.2}
.pdp-swatch:hover{border-color:var(--amber);color:var(--ink)}
.pdp-swatch.is-active{border-color:var(--amber);background:var(--amber-soft);color:var(--ink);font-weight:600;
  box-shadow:0 0 0 3px rgba(217,123,31,.13)}
.pdp-swatch.is-out{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--berry)}
.pdp-swatch.is-gone{opacity:.35;text-decoration:line-through;cursor:not-allowed}
.btn.is-disabled{opacity:.5;pointer-events:none}






/* cart */
.cart-layout{display:grid;grid-template-columns:1fr 370px;gap:36px;padding:40px 0 80px;align-items:start}
.cart-items{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.cart-row{display:grid;grid-template-columns:96px 1fr auto;gap:18px;padding:20px 24px;border-bottom:1px solid var(--line);align-items:center}
.cart-row:last-child{border-bottom:none}
.cart-row__img{width:96px;height:96px;border-radius:12px;overflow:hidden;background:var(--sand)}
.cart-row__img img{width:100%;height:100%;object-fit:cover}
.cart-row__name{font-family:var(--font-display);font-size:1.03rem;font-weight:600;margin-bottom:5px;display:block}
.cart-row__name:hover{color:var(--amber-dark)}
.cart-row__sku{font-size:.79rem;color:var(--ink-3);margin-bottom:11px}
.cart-row__controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cart-row__remove{font-size:.84rem;color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.cart-row__remove:hover{color:var(--berry)}
.cart-row__price{text-align:right}
.cart-row__price b{display:block;font-family:var(--font-display);font-size:1.15rem;font-weight:700}
.cart-row__price span{font-size:.8rem;color:var(--ink-3)}
.qty-stepper--sm button{width:32px;height:36px;font-size:1.05rem}
.qty-stepper--sm input{width:38px;height:36px;font-size:.92rem}

.summary{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 26px 28px;position:sticky;top:calc(var(--header-h) + 20px)}
.summary h3{font-size:1.2rem;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.summary-line{display:flex;justify-content:space-between;gap:14px;font-size:.94rem;margin-bottom:12px;color:var(--ink-2)}
.summary-line.is-free{color:var(--pine);font-weight:600}
.summary-line.is-discount{color:var(--berry);font-weight:600}
.summary-total{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding-top:16px;margin-top:16px;border-top:2px solid var(--line);font-family:var(--font-display);font-size:1.35rem;font-weight:700}
.summary .btn{margin-top:20px}
.free-ship-note{background:var(--pine-soft);color:#14513f;border-radius:var(--radius-sm);padding:11px 14px;font-size:.85rem;margin-bottom:16px}
.coupon-form{display:flex;gap:8px;margin:16px 0}
.coupon-form input{flex:1;padding:11px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);font-family:inherit;font-size:.88rem;outline:none;text-transform:uppercase}
.coupon-form input:focus{border-color:var(--amber)}
.coupon-applied{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--pine-soft);color:#14513f;border-radius:var(--radius-sm);padding:10px 14px;font-size:.87rem;margin:14px 0}
.coupon-applied a{text-decoration:underline;font-size:.8rem}

/* checkout */
.checkout-layout{display:grid;grid-template-columns:1fr 370px;gap:36px;padding:40px 0 80px;align-items:start}
.checkout-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 32px;margin-bottom:22px}
.checkout-panel h3{font-size:1.15rem;margin-bottom:22px;display:flex;align-items:center;gap:12px}
.checkout-panel h3 .step-num{width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--cream);display:grid;place-items:center;font-size:.85rem;font-family:var(--font-body);flex-shrink:0}
.mini-items{display:grid;gap:13px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.mini-item{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center}
.mini-item__img{width:52px;height:52px;border-radius:9px;overflow:hidden;background:var(--sand);position:relative}
.mini-item__img img{width:100%;height:100%;object-fit:cover}
.mini-item__qty{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;font-size:.68rem;font-weight:700;display:grid;place-items:center}
.mini-item__name{font-size:.88rem;font-weight:500;line-height:1.35}
.mini-item__price{font-size:.9rem;font-weight:600;white-space:nowrap}
.pay-note{display:flex;gap:11px;align-items:flex-start;background:var(--amber-soft);border-radius:var(--radius-sm);padding:13px 15px;font-size:.85rem;color:#8a4a12;margin-top:16px}
.pay-note svg{width:18px;height:18px;flex-shrink:0;margin-top:2px}

/* order success */
.success-wrap{max-width:660px;margin:0 auto;padding:60px 0 84px;text-align:center}
.success-ico{width:82px;height:82px;border-radius:50%;background:var(--pine-soft);color:var(--pine);display:grid;place-items:center;margin:0 auto 26px}
.success-ico svg{width:40px;height:40px}
.order-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 32px;text-align:left;margin:32px 0}
.order-box__head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.order-box__num{font-family:var(--font-display);font-size:1.25rem;font-weight:700}
.order-line{display:flex;justify-content:space-between;gap:14px;font-size:.93rem;padding:7px 0;color:var(--ink-2)}
.order-line b{color:var(--ink)}

/* content pages */
.content-page{padding:56px 0 80px}
.content-page__inner{max-width:840px;margin:0 auto}
.content-page h2{margin-top:38px;font-size:1.6rem}
.content-page h3{margin-top:26px;font-size:1.2rem}
.content-page p,.content-page li{color:var(--ink-2)}
.content-page ul{padding-left:22px;margin-bottom:18px}
.content-page li{margin-bottom:7px}
.prose-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:38px 42px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split img{border-radius:var(--radius-lg);box-shadow:var(--shadow)}

.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start}
.contact-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;margin-bottom:16px;display:flex;gap:15px;align-items:flex-start}
.contact-card__ico{width:44px;height:44px;border-radius:12px;background:var(--amber-soft);color:var(--amber-dark);display:grid;place-items:center;flex-shrink:0}
.contact-card__ico svg{width:20px;height:20px}
.contact-card h4{margin:0 0 5px;font-size:1rem;font-family:var(--font-display)}
.contact-card p,.contact-card a{margin:0;font-size:.91rem;color:var(--ink-2);line-height:1.6}
.contact-card a:hover{color:var(--amber-dark)}

@media (max-width:1000px){
  .cart-layout,.checkout-layout{grid-template-columns:1fr}
  .summary{position:static}
  .pdp{grid-template-columns:1fr;gap:36px}
  .shop-layout{grid-template-columns:1fr}
  .shop-filters{position:static;display:none}
  .shop-filters.is-open{display:block}
  .filter-toggle{display:inline-flex}
  .split,.contact-grid{grid-template-columns:1fr;gap:32px}
}
@media (max-width:600px){
  .cart-row{grid-template-columns:72px 1fr;gap:14px;padding:16px}
  .cart-row__img{width:72px;height:72px}
  .cart-row__price{grid-column:1/-1;text-align:left;display:flex;justify-content:space-between;align-items:center}
  .checkout-panel,.prose-card{padding:24px 20px}
}

/* ===================================================================
   Catalogue mode — shown while prices are hidden during development
   =================================================================== */
.price-ask{
  display:inline-block;font-family:var(--font-body);font-size:.83rem;font-weight:600;
  letter-spacing:.02em;color:var(--ink-2);background:var(--sand);
  padding:6px 14px;border-radius:var(--radius-pill);white-space:nowrap;
}
.price-ask--lg{font-size:1rem;padding:9px 20px;background:var(--amber-soft);color:var(--amber-dark)}
.price-ask__link{
  font-size:.83rem;font-weight:600;color:var(--amber-dark);white-space:nowrap;
  transition:.18s var(--ease);
}
.price-ask__link:hover{color:var(--amber);text-decoration:underline;text-underline-offset:3px}
.product-card__foot{gap:8px}
.header-enquire{padding:9px 18px}

/* A quiet strip so visitors understand why nothing has a price */
.catalogue-note{
  background:var(--pine-soft);border-bottom:1px solid #b6ded0;color:#14513f;
  font-size:.87rem;text-align:center;padding:9px 24px;
}
.catalogue-note strong{font-weight:600}
.catalogue-note a{text-decoration:underline;text-underline-offset:2px}
.catalogue-note a:hover{color:var(--pine)}

/* ---- Founder story --------------------------------------------------------
   The long-form journey page. Deliberately narrow measure and generous
   vertical rhythm — this one is meant to be read, not scanned.               */
.story-open{background:linear-gradient(170deg,var(--sand) 0%,var(--cream) 70%);padding:64px 0 58px;border-bottom:1px solid var(--line)}
.story-open__inner{max-width:820px;margin:0 auto}
.story-lines{list-style:none;padding:0;margin:0 0 30px;display:grid;gap:14px}
.story-lines li{
  font-family:var(--font-display);font-weight:600;font-size:clamp(1.12rem,2.5vw,1.6rem);
  line-height:1.4;color:var(--ink);display:flex;gap:16px;align-items:baseline;
}
.story-lines li::before{
  content:'';width:9px;height:9px;border-radius:2px;background:var(--amber);
  flex-shrink:0;transform:translateY(-3px)
}
.story-lines li:nth-child(2)::before{background:var(--pine)}
.story-lines li:nth-child(3)::before{background:var(--violet)}
.story-lines li:nth-child(4)::before{background:var(--berry)}
.story-open__note{font-size:1.05rem;color:var(--ink-2);margin:0}

.story-wrap{max-width:820px;margin:0 auto}
.story-wrap p{color:var(--ink-2);font-size:1.04rem}
.story-wrap p strong{color:var(--ink);font-weight:600}

/* Timeline */
.timeline{position:relative;padding-left:0;margin:0}
.timeline::before{
  content:'';position:absolute;left:23px;top:14px;bottom:14px;width:2px;
  background:linear-gradient(180deg,var(--amber),var(--pine),var(--violet),var(--berry));
  opacity:.35;border-radius:2px
}
.tl-item{position:relative;padding:0 0 46px 74px}
.tl-item:last-child{padding-bottom:0}
.tl-item__dot{
  position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%;
  background:var(--paper);border:2px solid var(--line);display:grid;place-items:center;
  font-size:1.35rem;box-shadow:var(--shadow-sm);z-index:1
}
.tl-item__year{
  display:inline-block;font-size:.73rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber-dark);background:var(--amber-soft);
  padding:4px 12px;border-radius:var(--radius-pill);margin-bottom:11px
}
.tl-item--pine .tl-item__year{color:#14513f;background:var(--pine-soft)}
.tl-item--violet .tl-item__year{color:#4b3579;background:#efeaf9}
.tl-item--berry .tl-item__year{color:#8c1f2c;background:var(--berry-soft)}
.tl-item h2{font-size:clamp(1.35rem,2.6vw,1.75rem);margin:0 0 12px}
.tl-item p{margin-bottom:14px}
.tl-item p:last-child{margin-bottom:0}

/* An indented aside — the lesson pulled out of a chapter */
.story-lesson{
  border-left:3px solid var(--amber);background:var(--amber-soft);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:18px 22px;margin:20px 0 0
}
.story-lesson p{margin:0;color:#7a4310;font-size:1rem}
.story-lesson p strong{color:#5f330b}

/* Skill chips for the telephony chapter */
.story-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.story-chips span{
  font-size:.82rem;font-weight:500;color:var(--ink-2);background:var(--sand);
  border:1px solid var(--line);padding:5px 13px;border-radius:var(--radius-pill)
}
.story-flow{
  font-family:var(--font-display);font-weight:600;font-size:1.02rem;color:var(--ink);
  background:var(--paper);border:1px dashed var(--sand-2);border-radius:var(--radius);
  padding:16px 20px;margin:0 0 16px;text-align:center;overflow-x:auto;white-space:nowrap
}
.story-flow em{font-style:normal;color:var(--amber-dark)}

/* Pull quote — the question that runs through all of it */
.story-quote{
  background:var(--ink);color:var(--cream);border-radius:var(--radius-lg);
  padding:46px 44px;text-align:center;margin:0
}
.story-quote blockquote{
  margin:0;font-family:var(--font-display);font-weight:600;font-style:italic;
  font-size:clamp(1.3rem,3.2vw,2rem);line-height:1.35;color:#fff
}
.story-quote blockquote em{font-style:italic;color:#f7b955}
.story-quote p{margin:18px 0 0;color:rgba(253,249,243,.66);font-size:.98rem}

/* Connect-the-dots grid */
.dots-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.dot-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;transition:.25s var(--ease)
}
.dot-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.dot-card b{display:block;font-family:var(--font-display);font-size:1.05rem;margin-bottom:6px}
.dot-card span{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);font-weight:700;margin-bottom:9px}
.dot-card p{margin:0;font-size:.92rem;color:var(--ink-2)}

/* Investor panel */
.story-invite{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:38px 42px}
.story-invite h2{margin-top:0;font-size:1.5rem}
.story-invite ul{padding-left:20px;margin:0 0 24px;color:var(--ink-2);line-height:1.85}
.story-invite .btn{margin-right:10px}

.story-tags{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:44px}
.story-tags span{font-size:.78rem;color:var(--ink-3)}

@media (max-width:640px){
  .timeline::before{left:15px}
  .tl-item{padding-left:52px;padding-bottom:38px}
  .tl-item__dot{width:32px;height:32px;font-size:.95rem}
  .story-quote{padding:34px 24px}
  .story-invite{padding:28px 24px}
  .story-flow{font-size:.9rem;padding:14px}
}
.field label .opt{font-weight:400;color:var(--ink-3);font-size:.85em}

/* ===================================================================
   B2B / B2C storefront
   Retail is the familiar warm-amber shop. Wholesale borrows the pine
   accent throughout, so a buyer can tell at a glance which store they
   are standing in without reading a word.
   =================================================================== */

/* ---- the mode switcher, tucked into the header's top right ----
   A shopper picks a side once and rarely revisits it, so this states the
   current side quietly and opens a small menu only when asked. */
.mode-mini{position:relative;flex:none}
.mode-mini > summary{
  display:flex;align-items:center;gap:7px;
  padding:6px 10px;border:1px solid var(--line);border-radius:var(--radius-pill);
  background:var(--paper);cursor:pointer;list-style:none;
  font-size:.8rem;font-weight:600;color:var(--ink-2);white-space:nowrap;
  transition:border-color .16s var(--ease),color .16s var(--ease);
}
.mode-mini > summary::-webkit-details-marker{display:none}
.mode-mini > summary:hover{border-color:var(--amber);color:var(--ink)}
.mode-mini[open] > summary{border-color:var(--amber);color:var(--ink)}
.mode-mini__dot{
  width:7px;height:7px;border-radius:50%;flex:none;background:var(--amber);
}
.mode-mini__dot--b2b{background:var(--pine)}
.mode-mini__caret{width:13px;height:13px;opacity:.55;transition:transform .16s var(--ease)}
.mode-mini[open] .mode-mini__caret{transform:rotate(180deg)}

.mode-mini__menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:60;
  width:250px;padding:8px;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);
  animation:miniIn .15s var(--ease);
}
@keyframes miniIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.mode-mini__head{
  display:block;padding:5px 10px 7px;
  font-size:.67rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);
}
.mode-mini__opt{
  display:flex;align-items:flex-start;gap:9px;width:100%;
  padding:9px 10px;border-radius:var(--radius-sm);text-align:left;
  transition:background .14s var(--ease);
}
.mode-mini__opt:hover{background:var(--sand)}
.mode-mini__opt.is-active{background:var(--amber-soft)}
.mode-mini__opt .mode-mini__dot{margin-top:6px}
.mode-mini__opt b{display:block;font-size:.88rem;font-weight:600;color:var(--ink)}
.mode-mini__opt small{display:block;font-size:.75rem;color:var(--ink-3);line-height:1.4}

/* Closing by clicking away is handled in main.js. */

@media (max-width:900px){
  .mode-mini__now{display:none}          /* the dot alone carries the state */
  .mode-mini > summary{padding:7px 9px}
  .mode-mini__menu{width:230px}
}

/* ---- shared mode pill ---- */
.mode-pill{
  display:inline-block;padding:3px 11px;border-radius:var(--radius-pill);
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--sand-2);color:var(--ink-2);
}
.mode-pill--b2b{background:var(--pine-soft);color:var(--pine)}

/* ---- product cards on the wholesale store ---- */
.price__unit{font-size:.78rem;color:var(--ink-3)}
.price__mrp{font-size:.8rem;color:var(--ink-3)}
.price--ask{flex-direction:column;align-items:flex-start;gap:2px}
.card-moq{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:8px;font-size:.79rem;color:var(--ink-2);
}
.card-moq__tag{
  background:var(--pine-soft);color:var(--pine);
  padding:2px 8px;border-radius:var(--radius-pill);
  font-size:.68rem;font-weight:700;letter-spacing:.06em;
}
.card-moq__save{color:var(--pine);font-weight:600;margin-left:auto}

/* ---- product page: trade pricing ---- */
.pdp-price--trade{align-items:baseline;flex-wrap:wrap;gap:10px}
.pdp-price__tag{
  background:var(--pine);color:#fff;
  padding:4px 12px;border-radius:var(--radius-pill);
  font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
}
.pdp-price__per{font-size:.86rem;color:var(--ink-3)}
.pdp-mrp{
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  margin:-4px 0 14px;font-size:.92rem;color:var(--ink-2);
}
.pdp-mrp .was{text-decoration:line-through;color:var(--ink-3)}
.pdp-mrp__note{font-size:.79rem;color:var(--ink-3)}
.pdp-moq{
  display:flex;align-items:center;gap:11px;
  background:var(--pine-soft);border:1px solid #bfded6;
  border-radius:var(--radius-sm);padding:12px 15px;
  margin:0 0 16px;font-size:.88rem;color:#145445;
}
.pdp-moq svg{width:21px;height:21px;flex:none;color:var(--pine)}
.pdp-moq b{font-weight:700}
.pdp-moq-note{font-size:.81rem;color:var(--ink-3);margin:10px 0 0}

/* ---- shop sidebar: trade terms ---- */
.filter-block--trade{background:var(--pine-soft);border-color:#bfded6}
.filter-block--trade h4{color:#145445}
.trade-terms{
  list-style:none;margin:0 0 14px;padding:0;
  font-size:.85rem;color:#1c5f50;line-height:1.5;
}
.trade-terms li{position:relative;padding-left:17px;margin-bottom:8px}
.trade-terms li::before{
  content:'';position:absolute;left:0;top:.55em;
  width:6px;height:6px;border-radius:50%;background:var(--pine);
}

/* ---- cart: minimum order quantities ---- */
.cart-row__moq{font-size:.81rem;color:var(--pine);margin-top:8px;font-weight:500}
.cart-row__moq.is-short{color:var(--berry)}
.cart-row__mrp{font-size:.76rem;color:var(--ink-3);text-decoration:line-through}
.summary-mode{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:4px;border-bottom:1px solid var(--line);
  font-size:.83rem;color:var(--ink-2);
}
.moq-alert{
  background:var(--berry-soft);border:1px solid #f0cdd2;
  border-radius:var(--radius-sm);padding:12px 14px;margin:14px 0 4px;
  font-size:.84rem;color:#8d2733;
}
.moq-alert strong{display:block;margin-bottom:6px}
.moq-alert ul{margin:0;padding-left:18px}
.moq-alert li{margin-bottom:3px}

/* ---- checkout: trade banner ---- */
.trade-banner{
  display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  background:var(--pine-soft);border:1px solid #bfded6;
  border-radius:var(--radius-sm);padding:14px 17px;
  font-size:.89rem;color:#145445;
}

/* =================================================================== */
/* Audience chooser — the first thing a new visitor sees on the home    */
/* page. Two doors, because the prices behind them are different.       */
/* =================================================================== */
.chooser{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(43,29,20,.62);backdrop-filter:blur(5px);
  animation:chooserIn .22s var(--ease);
}
@keyframes chooserIn{from{opacity:0}to{opacity:1}}
.chooser__panel{
  background:var(--paper);border-radius:var(--radius-lg);
  padding:38px 34px 28px;max-width:820px;width:100%;
  max-height:calc(100vh - 48px);overflow-y:auto;
  box-shadow:var(--shadow-lg);text-align:center;
}
.chooser__kicker{
  display:inline-block;font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--amber);
  margin-bottom:10px;
}
.chooser__panel h2{margin:0 0 10px;font-size:clamp(1.5rem,3vw,2.1rem)}
.chooser__lead{
  color:var(--ink-2);font-size:.95rem;max-width:520px;
  margin:0 auto 26px;line-height:1.6;
}
.chooser__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;text-align:left}
.chooser__card{
  display:flex;flex-direction:column;gap:7px;
  padding:24px 22px;border:2px solid var(--line);border-radius:var(--radius);
  background:var(--cream);cursor:pointer;
  transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.chooser__card:hover{border-color:var(--amber);transform:translateY(-3px);box-shadow:var(--shadow)}
.chooser__card--trade:hover{border-color:var(--pine)}
.chooser__ico{
  width:44px;height:44px;border-radius:12px;margin-bottom:4px;
  display:flex;align-items:center;justify-content:center;
  background:var(--amber-soft);color:var(--amber-dark);
}
.chooser__ico svg{width:23px;height:23px}
.chooser__card--trade .chooser__ico{background:var(--pine-soft);color:var(--pine)}
.chooser__card b{font-family:var(--font-display);font-size:1.2rem;font-weight:600}
.chooser__desc{font-size:.87rem;color:var(--ink-2);line-height:1.5}
.chooser__pts{list-style:none;margin:8px 0 0;padding:0;font-size:.83rem;color:var(--ink-2)}
.chooser__pts li{position:relative;padding-left:18px;margin-bottom:6px;line-height:1.45}
.chooser__pts li::before{
  content:'';position:absolute;left:0;top:.5em;width:6px;height:6px;
  border-radius:50%;background:var(--amber);
}
.chooser__card--trade .chooser__pts li::before{background:var(--pine)}
.chooser__go{
  margin-top:auto;padding-top:12px;font-weight:600;font-size:.9rem;color:var(--amber-dark);
}
.chooser__card--trade .chooser__go{color:var(--pine)}
.chooser__foot{margin:22px 0 0;font-size:.86rem;color:var(--ink-3)}
.linkish{
  color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;
  font-size:.86rem;padding:0;
}
.linkish:hover{color:var(--amber-dark)}

@media (max-width:680px){
  .chooser{padding:14px;align-items:flex-start}
  .chooser__panel{padding:26px 20px 20px}
  .chooser__grid{grid-template-columns:1fr}
}

/* ---- freight billed at actual ---- */
.ship-note{
  background:var(--amber-soft);border:1px solid #f3d0a0;
  border-radius:var(--radius-sm);padding:12px 14px;
  margin:0 0 14px;font-size:.84rem;color:#8a4a12;line-height:1.55;
}
.ship-note b{display:block;margin-bottom:3px}

/* ===================================================================== */
/* Retail catalogue (/catalogue.php).                                    */
/*                                                                       */
/* Two layouts in one: a readable page on screen, and an A4 price list   */
/* when it is printed or saved as a PDF. The print block at the bottom   */
/* is the one that matters — it strips the site chrome away and re-flows */
/* the grid so a card is never cut in half by a page break.              */
/* ===================================================================== */
.catalogue{max-width:var(--container);margin:0 auto 60px;padding:0 20px}

/* ---- masthead: page one of the printed catalogue ---- */
.cat-head{
  display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:end;
  padding:30px 0 22px;border-bottom:3px solid var(--ink);margin-bottom:34px;
}
.cat-head__brand{display:flex;align-items:center;gap:12px}
.cat-head__mark{
  width:46px;height:46px;flex:none;border-radius:13px;color:#fff;background:var(--amber);
  display:flex;align-items:center;justify-content:center;
}
.cat-head__mark svg{width:27px;height:27px}
.cat-head__name{
  font-family:var(--font-display);font-size:1.3rem;font-weight:600;
  line-height:1.15;display:block;color:var(--ink);
}
.cat-head__name em{font-style:normal;color:var(--amber-dark)}
.cat-head__name small{
  display:block;font-family:var(--font-body);font-size:.62rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin-top:3px;
}
.cat-head__kicker{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber-dark);margin-bottom:7px;
}
.cat-head__title h1{margin:0 0 8px;font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.1}
.cat-head__title p{margin:0;color:var(--ink-2);font-size:.9rem;line-height:1.55;max-width:52ch}
.cat-head__meta{margin:0;display:grid;gap:9px;text-align:right}
.cat-head__meta dt{
  font-size:.62rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);
}
.cat-head__meta dd{margin:1px 0 0;font-size:.86rem;font-weight:600;color:var(--ink)}

/* ---- one collection ---- */
.cat-section{margin-bottom:38px}
.cat-section__head{
  display:flex;align-items:baseline;gap:14px;
  border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:6px;
}
.cat-section__head h2{margin:0;font-size:1.35rem}
.cat-section__count{
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.cat-section__lead{margin:0 0 18px;font-size:.86rem;color:var(--ink-2);max-width:78ch;line-height:1.55}

.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cat-item{display:flex;flex-direction:column}
.cat-item__shot{
  position:relative;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--cream);overflow:hidden;margin-bottom:11px;
}
.cat-item__shot img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.cat-item__off{
  position:absolute;top:8px;left:8px;background:var(--berry);color:#fff;
  font-size:.66rem;font-weight:700;letter-spacing:.04em;
  padding:3px 7px;border-radius:var(--radius-pill);
}
.cat-item h3{margin:0 0 5px;font-size:.98rem;line-height:1.25}
.cat-item__desc{margin:0 0 11px;font-size:.79rem;line-height:1.5;color:var(--ink-2)}
.cat-item__foot{
  margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;
  gap:8px;border-top:1px solid var(--line);padding-top:8px;
}
.cat-item__price b{font-family:var(--font-display);font-size:1.1rem;font-weight:600;color:var(--ink)}
.cat-item__price s{margin-left:6px;font-size:.8rem;color:var(--ink-3)}
.cat-item__sku{font-size:.66rem;letter-spacing:.06em;color:var(--ink-3);white-space:nowrap}

/* ---- closing page: how to actually buy any of it ---- */
.cat-foot{border-top:3px solid var(--ink);padding-top:22px;margin-top:8px}
.cat-foot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-bottom:20px}
.cat-foot__cols h4{
  margin:0 0 7px;font-family:var(--font-body);font-size:.68rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--amber-dark);
}
.cat-foot__cols p{margin:0;font-size:.83rem;line-height:1.6;color:var(--ink-2)}
.cat-foot__note{
  margin:0;padding-top:14px;border-top:1px solid var(--line);
  font-size:.72rem;line-height:1.6;color:var(--ink-3);
}

/* ---- the download strip, screen only ---- */
.cat-bar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:var(--sand);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 20px;margin-top:24px;
}
.cat-bar__text b{display:block;font-family:var(--font-display);font-size:1.05rem}
.cat-bar__text span{font-size:.84rem;color:var(--ink-2)}
.cat-bar .btn svg{width:18px;height:18px;margin-right:7px;vertical-align:-4px}
.cat-bar__hint{margin:10px 2px 0;font-size:.78rem;color:var(--ink-3)}

@media (max-width:1000px){
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .cat-head{grid-template-columns:1fr;gap:18px;align-items:start}
  .cat-head__meta{text-align:left;grid-template-columns:repeat(3,auto);justify-content:start;gap:22px}
}
@media (max-width:680px){
  .cat-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .cat-foot__cols{grid-template-columns:1fr;gap:18px}
  .cat-bar{flex-direction:column;align-items:stretch;text-align:center}
}

/* ---- A4: what actually lands in the PDF ------------------------------
   Four cards to a row at 500px-wide photographs gives roughly 45 mm per
   image on A4 — small but sharp. The break rules matter more than the
   sizes: a card or a section heading split across two sheets is what
   makes a printed catalogue look homemade.                             */
@media print{
  @page{size:A4;margin:12mm 10mm}

  html,body{background:#fff}
  body{font-size:10pt}

  /* Site chrome has no business in a price list. */
  .site-header,.site-footer,.fair-bar,.catalogue-note,.whatsapp-float,
  .flash-wrap,.no-print{display:none !important}
  main{padding:0 !important}

  .catalogue{max-width:none;margin:0;padding:0}

  /* Colour blocks are the point of a catalogue — keep them in the PDF. */
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}

  .cat-head{padding-top:0;margin-bottom:8mm;gap:8mm}
  .cat-head__title h1{font-size:22pt}
  .cat-head__title p{font-size:8.5pt}
  .cat-head__meta dd{font-size:8.5pt}

  .cat-section{margin-bottom:7mm;break-inside:auto}
  .cat-section__head{break-after:avoid;page-break-after:avoid}
  .cat-section__lead{break-after:avoid;page-break-after:avoid;font-size:8pt;margin-bottom:4mm}

  .cat-grid{gap:5mm}
  .cat-item{break-inside:avoid;page-break-inside:avoid}
  .cat-item__shot{margin-bottom:2.5mm}
  .cat-item h3{font-size:9.5pt}
  .cat-item__desc{font-size:7.5pt;margin-bottom:2.5mm}
  .cat-item__price b{font-size:11pt}
  .cat-item__sku{font-size:6.5pt}

  .cat-foot{break-inside:avoid;page-break-inside:avoid;margin-top:6mm}
  .cat-foot__cols p{font-size:8pt}
  .cat-foot__note{font-size:6.8pt}

  a{color:inherit;text-decoration:none}
}