/*
Theme Name: ZEST by Philip Zepter
Theme URI: https://zestgeneration.com
Author: Brand Hawkers
Description: The ZEST catalogue — Zest Mode and Zest Code. A block theme: every
  section of every page is editable in the Site Editor, and products are
  WooCommerce products, so the shop can be switched on without a rebuild.
Version: 1.0.7
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zest
Tags: full-site-editing, block-patterns, woocommerce
*/

/* ============================================================
   ZEST by Philip Zepter — shared design system
   Used by index.html, products.html, product.html
   Reference: zestbyzepter.com · Manrope · warm grey · cut-outs
   ============================================================ */

/* ---------- 0. fonts ---------- */
/* Embedded as data URIs on purpose: a file:// page cannot load a separate
   font file (CORS blocks it), so double-clicking index.html would silently
   fall back to Helvetica. This also removes three requests when hosted. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/manrope-400.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/manrope-500.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/manrope-600.woff2') format('woff2')}

/* ---------- 1. tokens ---------- */
:root{
  --grey:#a9a6a1;        /* sampled from zestbyzepter.com — flat, neutral */
  --grey-hi:#a9a6a1;
  --grey-lo:#a9a6a1;
  --light:#f1f1f1;
  --light-2:#e6e5e3;
  --ink:#0f0f0f;
  --ink-2:#3d3a37;
  --muted:#6e6c68;
  --dark:#121212;
  --line:rgba(15,15,15,.13);
  --line-2:rgba(15,15,15,.07);
  --line-inv:rgba(241,241,241,.18);
  --pad:clamp(20px,4.6vw,68px);
  --maxw:1400px;
  --nav:84px;
  --navh:90px;          /* 14px offset + the pill itself */
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
/* Guard: WooCommerce puts `single-product`, `cart`, `checkout` and the like on
   <body>, and some plugins style an element of their own by those same names.
   One such rule (`.single-product{max-width:1120px}`) was clamping the whole
   page to 1120px on every product page. These keep <body> the full window
   whatever a plugin says. */
body.single-product,body.cart,body.checkout,body.collection,body.product-card,
body.woocommerce,body.woocommerce-page{
  max-width:none;min-width:0;width:auto;border-radius:0;box-shadow:none;float:none;
  display:block;padding-inline:0;
}

body{
  margin:0;background:var(--light);color:var(--ink);
  font-family:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.62;font-weight:400;overflow-x:clip;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ink);color:var(--light)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.sect{padding-block:clamp(58px,7.5vw,128px)}

/* ---------- 2. type ---------- */
.h1{font-weight:500;font-size:clamp(34px,5.6vw,86px);letter-spacing:-.045em;line-height:.98;margin:0}
.h2{font-weight:500;font-size:clamp(28px,3.5vw,52px);letter-spacing:-.035em;line-height:1.06;margin:0}
.h3{font-weight:500;font-size:clamp(19px,1.9vw,28px);letter-spacing:-.03em;line-height:1.18;margin:0}
.body{font-size:clamp(14.5px,1.05vw,16.5px);line-height:1.72;color:var(--ink-2)}
.body p{margin:0 0 1.05em}
.body p:last-child{margin-bottom:0}
.tag{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0}
.narrow{max-width:74ch;margin-inline:auto;text-align:center}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(26px,5vw,90px);align-items:start}
.headrow{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:flex-end;margin-bottom:clamp(26px,3.6vw,54px)}

/* ---------- 3. pills ---------- */
.pill{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid rgba(255,255,255,.55);border-radius:999px;
  padding:9px 18px;font-size:13px;color:#fff;white-space:nowrap;
  transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.pill:hover{background:#fff;color:var(--ink);border-color:#fff}
.pill--dark{border-color:var(--line);color:var(--ink)}
.pill--dark:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.pill--inv{border-color:var(--line-inv);color:var(--light)}
.pill--inv:hover{background:var(--light);color:var(--ink);border-color:var(--light)}
.pill--solid{background:var(--ink);color:#fff;border-color:var(--ink)}
.pill--solid:hover{background:transparent;color:var(--ink)}

/* ---------- 4. header (identical on every page) ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;justify-content:center;padding-top:14px;
}
.nav__in{
  width:min(var(--maxw),calc(100% - 2*var(--pad)));
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  padding:10px 20px;border-radius:999px;background:transparent;
  transition:background-color .5s var(--ease),width .5s var(--ease),padding .5s var(--ease),box-shadow .5s var(--ease);
}
.nav__logo{display:flex;align-items:center;justify-content:center;flex:0 0 auto}
/* +25% on the client's request — it was reading small against the hero */
.nav__logo img{height:clamp(43px,4vw,58px);width:auto;max-width:none;filter:brightness(0) invert(1)}
.nav__links{display:flex;gap:clamp(12px,1.5vw,24px);align-items:center}
.nav__util{display:flex;gap:18px;align-items:center;justify-content:flex-end}
.nav__util a{font-size:13px;letter-spacing:.06em;color:rgba(255,255,255,.84);transition:color .3s ease}
.nav__util a:hover{color:#fff}
.nav__links a{font-size:13px;letter-spacing:.02em;white-space:nowrap;color:rgba(255,255,255,.84);transition:color .3s ease;position:relative;padding-block:3px}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav__links a:hover,.nav__links a[aria-current]{color:#fff}
.nav__links a:hover::after,.nav__links a[aria-current]::after{transform:scaleX(1)}
/* capsule state — on scroll, and from the start on inner pages */
.nav.stuck .nav__in,body.inner .nav__in{
  width:min(1080px,calc(100% - 2*var(--pad)));
  background:rgba(18,17,16,.92);backdrop-filter:blur(14px);
  padding:8px 16px 8px 22px;box-shadow:0 10px 40px rgba(0,0,0,.2);
}
.burger{display:none;width:34px;height:22px;position:relative}
.burger i,.burger i::before,.burger i::after{position:absolute;left:0;width:24px;height:1.5px;background:#fff;transition:.35s var(--ease)}
.burger i{top:10px}.burger i::before{content:"";top:-7px}.burger i::after{content:"";top:7px}
body.open .burger i{background:transparent}
body.open .burger i::before{top:0;transform:rotate(45deg)}
body.open .burger i::after{top:0;transform:rotate(-45deg)}
.drawer{
  position:fixed;inset:0;z-index:190;background:var(--dark);color:#fff;
  padding:120px var(--pad) 40px;display:flex;flex-direction:column;
  clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease);pointer-events:none;
}
body.open .drawer{clip-path:inset(0 0 0 0);pointer-events:auto}
.drawer a{font-size:clamp(26px,8vw,38px);font-weight:500;letter-spacing:-.03em;padding:14px 0;border-bottom:1px solid var(--line-inv)}

/* ---------- 5. grey stage (hero / feature / page head) ---------- */
.stage{
  position:relative;overflow:hidden;color:#fff;
  background:var(--grey);
}
.hero{min-height:100svh}
.hero__copy{position:absolute;left:var(--pad);top:clamp(104px,15vh,164px);z-index:3;max-width:min(90vw,560px)}
.hero__copy h1{font-size:clamp(23px,2.3vw,34px);font-weight:400;line-height:1.28;letter-spacing:-.015em;margin:0 0 16px}
.hero__copy p{font-size:14.5px;line-height:1.62;color:rgba(255,255,255,.88);margin:0 0 24px;max-width:42ch}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero__cta .plain{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:3px;transition:border-color .3s ease}
.hero__cta .plain:hover{border-color:#fff}
.hero__prod{
  position:absolute;left:50%;bottom:-2%;transform:translateX(-50%);
  width:min(80vw,700px);z-index:2;
  filter:drop-shadow(0 60px 70px rgba(38,37,35,.32));will-change:transform;
}
.hero__mark{
  position:absolute;left:0;right:0;bottom:0;z-index:1;margin:0;
  font-size:clamp(40px,8vw,132px);font-weight:500;letter-spacing:-.05em;line-height:.82;
  color:#f1f1f1;white-space:nowrap;text-align:center;
  transform:translateY(42%);pointer-events:none;will-change:transform;
}
.hero__foot{
  position:absolute;left:var(--pad);right:var(--pad);bottom:24px;z-index:3;
  display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:space-between;
  color:rgba(255,255,255,.8);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
}

/* page head used by products.html / product.html */
.phead{padding:calc(var(--nav) + clamp(46px,7vw,104px)) 0 clamp(40px,6vw,92px)}

/* ---------- category banner ----------
   The catalogue head used to be an empty grey slab. The reference houses run
   a picture beside the category title, so the art is pinned to the right half
   of the banner and bleeds to the viewport edge top, bottom and right. */
.cathead{position:relative;overflow:hidden}
.cathead__in{
  position:relative;z-index:2;display:grid;align-content:center;
  padding-top:calc(var(--nav) + clamp(16px,2vw,32px));padding-bottom:clamp(30px,4vw,52px);
  min-height:clamp(380px,42vw,540px);
}
.cathead__copy{max-width:min(46%,520px)}
.cathead__copy .tag{color:rgba(255,255,255,.62)}
.cathead__copy h1{color:#fff;margin:14px 0 16px}
.cathead__copy p{color:rgba(255,255,255,.84);font-size:15px;line-height:1.62;margin:0}
.cathead__art{
  position:absolute;top:0;right:0;bottom:0;width:min(48%,780px);
  margin:0;z-index:1;overflow:hidden;background:rgba(255,255,255,.05);
}
.cathead__art img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;
  opacity:0;transition:opacity .55s var(--ease);
}
.cathead__art img.ready{opacity:1}
@media (max-width:820px){
  .cathead__in{min-height:0;padding-bottom:0}
  .cathead__copy{max-width:none}
  .cathead__art{position:relative;width:auto;aspect-ratio:16/10;
    margin:26px calc(-1 * var(--pad)) 0}
}
}
.phead .tag{color:rgba(255,255,255,.62)}
.phead .h1{color:#fff}
.phead .body{color:rgba(255,255,255,.8)}

/* ---------- 6. image bands ---------- */
.band{display:grid;gap:clamp(10px,1.2vw,20px)}
.band--3{grid-template-columns:repeat(3,1fr)}
.band--2{grid-template-columns:1fr 1fr}
.band figure{margin:0;overflow:hidden;background:var(--light-2);position:relative}
.band figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.band figure:hover img{transform:scale(1.04)}
.t-4x5{aspect-ratio:4/5}
.t-1x1{aspect-ratio:1/1}
.t-16x10{aspect-ratio:16/10}
/* the campaign shots are light-grounded, so a text-shadow alone left the
   caption unreadable — sit it on its own gradient scrim instead */
.band figure::after{
  content:'';position:absolute;inset:auto 0 0 0;height:38%;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,14,13,0),rgba(14,14,13,.5));
}
.band figcaption{
  position:absolute;left:16px;bottom:14px;z-index:1;color:#fff;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;
}

/* ---------- 7. category banner cards ---------- */

/* ---------- 7b. compact category cards ---------- */
.fams{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,26px)}
.fc{display:block;background:#e9e8e6;border-radius:4px;overflow:hidden;transition:background-color .5s var(--ease)}
.fc:hover{background:#e2e1de}
.fc__ph{display:grid;place-items:center;aspect-ratio:4/3.4;padding:9%}
.fc__ph img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 20px 22px rgba(50,50,48,.18));transition:transform .9s var(--ease)}
.fc:hover .fc__ph img{transform:translateY(-7px) scale(1.03)}
.fc__t{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:0 clamp(14px,1.4vw,20px) clamp(14px,1.4vw,20px)}
.fc__t b{font-size:clamp(14px,1.25vw,18px);font-weight:600;letter-spacing:-.02em}
.fc__t span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- 8. product grid (cut-outs) ---------- */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,44px) clamp(14px,2vw,34px)}
.px{display:block;text-align:center;position:relative}
/* card: the on-model shot leads and the cut-out packshot is the hover state,
   the way the reference houses present a bag. --sc still sizes the packshot,
   so the true size comparison survives on the hover layer. */
.px__ph{
  /* it is a <span>: without display:block the aspect-ratio box collapses */
  display:block;position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:3px;
  background:var(--light-2);
}
.px__ph .lead{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .5s ease,transform 1.3s var(--ease);
}
.px__ph .alt{
  position:absolute;left:0;right:0;bottom:8%;margin-inline:auto;
  width:calc(84% * var(--sc,1));height:calc(74% * var(--sc,1));
  object-fit:contain;object-position:bottom center;opacity:0;
  filter:drop-shadow(0 18px 20px rgba(50,50,48,.16));
  transition:opacity .45s ease;
}
.px:hover .px__ph .lead{opacity:0;transform:scale(1.04)}
.px:hover .px__ph .alt{opacity:1}
@media (hover:none){ .px__ph .alt{display:none} }
.px__ph .none{
  position:absolute;inset:16%;border:1px solid var(--line);display:grid;place-content:center;gap:6px;color:var(--muted);
}
.px__ph .none b{font-weight:500;font-size:22px;color:var(--ink-2)}
.px__ph .none i{font-style:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.px h4{margin:12px 0 3px;font-size:14.5px;font-weight:600;letter-spacing:-.015em;line-height:1.35;min-height:2.6em}
.px .m{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.px .d{display:block;margin-top:5px;font-size:12px;color:#9b958f}
.px .sz{display:block;margin-top:4px;font-size:11px;letter-spacing:.06em;color:#a8a29b;font-variant-numeric:tabular-nums}
.px .pr{display:block;margin-top:7px;font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.dots{display:flex;gap:5px;justify-content:center;margin-top:9px}
.dots i{width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(15,15,15,.18)}

/* ---------- 9. filters ---------- */
.filters{
  /* parks BELOW the floating nav pill rather than under it — top:0 put the
     pills and the search box behind the nav once the bar stuck */
  position:sticky;top:var(--navh);z-index:120;
  background:rgba(241,241,241,.94);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-2);
}
.filters__in{
  max-width:var(--maxw);margin:0 auto;padding:13px var(--pad);
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
}
.fg{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.fg b{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-right:4px}
.fb{
  border:1px solid var(--line);border-radius:999px;padding:7px 15px;
  font-size:12px;letter-spacing:.04em;color:var(--ink-2);white-space:nowrap;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.fb:hover{border-color:var(--ink)}
.fb.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.fb .sw{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:-1px;box-shadow:inset 0 0 0 1px rgba(15,15,15,.2)}
.count{margin-left:auto;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.empty{padding:90px 0;text-align:center;color:var(--muted)}

/* ---------- 10. feature panel ---------- */
.feat__in{
  max-width:var(--maxw);margin:0 auto;padding:clamp(52px,7vw,110px) var(--pad);
  display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(20px,3vw,50px);align-items:center;
}
.feat__prod{width:min(46vw,460px);justify-self:center;filter:drop-shadow(0 46px 56px rgba(38,37,35,.32))}
.feat__col{display:flex;flex-direction:column;gap:clamp(28px,4.6vw,70px)}
.feat__col--r{text-align:right}
.fi h4{margin:0 0 6px;font-size:clamp(17px,1.5vw,23px);font-weight:600;letter-spacing:-.02em}
.fi p{margin:0;font-size:14px;line-height:1.6;color:rgba(255,255,255,.82);max-width:30ch}
.feat__col--r .fi p{margin-left:auto}

/* ---------- 11. marquee ---------- */
.marq{border-block:1px solid var(--line);padding-block:18px;overflow:hidden}
.marq__t{display:flex;white-space:nowrap;will-change:transform}
.marq__t span{
  font-size:clamp(12px,1.3vw,17px);letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  padding-inline:20px;display:inline-flex;align-items:center;gap:20px;color:var(--ink-2);
}
.marq__t span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--grey-lo)}

/* ---------- 12. spec list ---------- */
.specs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.specs li{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}
.specs li>span:first-child{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.specs li>span:last-child{text-align:right;font-weight:600}
.dark .specs{border-color:var(--line-inv)}
.dark .specs li{border-color:var(--line-inv)}
.dark .specs li>span:first-child{color:rgba(241,241,241,.5)}

/* ---------- 13. product detail ---------- */
.pdp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,72px);align-items:center}
.pdp__stage{position:relative;display:grid;place-items:center;min-height:min(64vh,560px)}
.pdp__stage img{width:min(78%,470px);filter:drop-shadow(0 48px 56px rgba(38,37,35,.34));transition:opacity .4s ease}
.pdp__crumb{display:flex;gap:8px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:18px}
.pdp h1{font-size:clamp(28px,3.9vw,58px);font-weight:500;letter-spacing:-.04em;line-height:1.02;margin:0 0 8px;color:#fff}
.pdp__coll{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7);margin:0 0 20px}
.pdp__lead{color:rgba(255,255,255,.86);font-size:clamp(14.5px,1.1vw,17px);line-height:1.7;max-width:48ch;margin:0}
.swatches{display:flex;gap:10px;margin:24px 0 26px;align-items:center}
.swatches button{width:32px;height:32px;border-radius:50%;position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.swatches button::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid transparent;transition:border-color .3s ease}
.swatches button.on::after{border-color:#fff}
.swatches em{font-style:normal;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-left:6px}
.quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.quick span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:6px 13px;color:rgba(255,255,255,.86)}

.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,18px)}
.gal figure{margin:0;aspect-ratio:1/1;overflow:hidden;background:#e9e8e6;position:relative;border-radius:3px}
.gal figure img{width:100%;height:100%;object-fit:contain;padding:6%;transition:transform 1.2s var(--ease)}
.gal figure.plate img{object-fit:cover;padding:0;background:#fff}
.gal figure:hover img{transform:scale(1.05)}
.gal figure.plate{aspect-ratio:1/1}
.gal figure.life{aspect-ratio:1/1}
.gal figure.life img{object-position:center 10%}

/* feature bullets + size guide on the product page */
.feats{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:9px}
.feats li{position:relative;padding-left:20px;font-size:14.5px;color:var(--ink-2)}
.feats li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--muted)}
.guide{margin:26px 0 0}
.guide img{width:100%;height:auto;background:#fff;border:1px solid var(--line-2);border-radius:3px}
.guide figcaption{margin-top:10px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ---------- 14. dark blocks ---------- */
.dark{background:var(--dark);color:var(--light)}
.dark .tag{color:rgba(241,241,241,.5)}
.dark .body{color:rgba(241,241,241,.72)}
.dark .h2,.dark .h3{color:var(--light)}
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.form{display:grid;gap:12px}
.form input,.form textarea{
  width:100%;background:transparent;border:1px solid var(--line-inv);border-radius:999px;
  padding:15px 22px;color:var(--light);font:inherit;font-size:15px;outline:none;
  transition:border-color .4s ease,background-color .4s ease;
}
.form textarea{border-radius:22px;min-height:130px;resize:vertical}
.form input::placeholder,.form textarea::placeholder{color:rgba(241,241,241,.44)}
.form input:focus,.form textarea:focus{border-color:rgba(241,241,241,.5);background:rgba(241,241,241,.04)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.note{font-size:12px;color:rgba(241,241,241,.45);margin:4px 0 0}
/* the line under a form carries the answer back, so it has to be readable
   against both the dark contact panel and the light newsletter band */
.note--ok{color:rgba(241,241,241,.92)}
.note--bad{color:#ff9f93}
.news .note--ok{color:var(--ink)}
.news .note--bad{color:#b3261e}
.statement{font-size:clamp(22px,3.3vw,50px);font-weight:500;letter-spacing:-.04em;line-height:1.04;margin:clamp(28px,4vw,58px) 0 0}

/* ---------- 15. footer ---------- */
.ftr{background:var(--dark);color:var(--light);padding-block:clamp(28px,4vw,50px) 24px}
.ftr__in{display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:space-between;align-items:center;
  padding-top:24px;border-top:1px solid var(--line-inv)}
.ftr a{font-size:13px;color:rgba(241,241,241,.7)}
.ftr a:hover{color:#fff}
.ftr__links{display:flex;flex-wrap:wrap;gap:8px 26px}
.ftr__logo{flex:0 0 auto;display:block}
.ftr__logo img{height:38px;width:auto;max-width:none;filter:brightness(0) invert(1);opacity:.9}
.ftr small{font-size:12px;color:rgba(241,241,241,.45)}

/* ---------- 16. reveal ---------- */
[data-r]{opacity:0;transform:translateY(22px)}
[data-r].in{opacity:1;transform:none;transition:opacity .85s var(--ease),transform .95s var(--ease)}

/* ---------- 17. responsive ---------- */
@media (max-width:1180px){ .pgrid{grid-template-columns:repeat(3,1fr)} .fams{grid-template-columns:repeat(2,1fr)} }
@media (max-width:1000px){
  .two{grid-template-columns:1fr}
  .feat__in{grid-template-columns:1fr}
  .feat__col--r{text-align:left}
  .feat__col--r .fi p{margin-left:0}
  .feat__prod{width:min(72vw,400px)}
  .pdp{grid-template-columns:1fr}
  .pdp__stage{min-height:auto;padding-block:20px}
}
@media (max-width:820px){
  /* the pill loses its link rows and gets shorter, so the sticky bar follows */
  :root{--navh:76px}
  .nav__links,.nav__util{display:none}
  /* burger sits in column 1, wordmark stays in the centre column */
  .burger{display:block;justify-self:start}
  .nav.stuck .nav__in,body.inner .nav__in{width:calc(100% - 2*var(--pad))}
  .band--3{grid-template-columns:1fr 1fr}
  .band--2{grid-template-columns:1fr}
  .hero__prod{width:92vw}
  .gal{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .fams{grid-template-columns:1fr}
  .band--3{grid-template-columns:1fr}
  .form .row{grid-template-columns:1fr}
  .hero__foot{display:none}
  .filters__in{gap:6px 14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}
  [data-r]{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}

/* ============================================================
   REFERENCE-SHAPED PAGE ARCHITECTURE
   The houses the client pointed at (Furla, Polene, Coach) all run the same
   spine: full-bleed campaign hero -> product rail -> alternating editorial
   splits -> a second full-bleed banner -> category tiles -> service strip ->
   newsletter -> multi-column footer. These are the components for that.
   ============================================================ */

/* ---- campaign hero: full viewport, lifestyle frame ----
   The banner is the location shot widened to 16:9 by stretching its own
   out-of-focus background outward. The marble at left is mid-tone, so dark
   type wins on contrast (6.8:1 against 2.8:1 for white) and the header runs
   dark to match until it becomes the capsule. */
.chero{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;align-items:center;overflow:hidden;background:#cfc7bd;
}
.chero picture{position:absolute;inset:0;display:block}
.chero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center}
.chero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    /* top veil so the dark header reads over the warm interior on the right */
    linear-gradient(180deg,rgba(250,248,245,.74) 0%,rgba(250,248,245,.32) 12%,rgba(250,248,245,0) 22%),
    linear-gradient(90deg,rgba(250,248,245,.62) 0%,rgba(250,248,245,.34) 30%,rgba(250,248,245,0) 52%);
}
.chero__in{position:relative;z-index:2;width:100%;padding-block:var(--nav) clamp(30px,5vh,70px)}
.chero__eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.chero h1{
  color:var(--ink);font-size:clamp(34px,5.2vw,72px);font-weight:400;line-height:1.03;
  letter-spacing:-.036em;margin:0 0 18px;max-width:13ch;
}
.chero__lead{color:var(--ink-2);font-size:clamp(14px,1.15vw,17px);line-height:1.62;max-width:38ch;margin:0 0 30px}
.chero__cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.chero__cta .pill{border-color:rgba(15,15,15,.3);color:var(--ink)}
.chero__cta .pill:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
/* a quiet cue that there is more below a full-height hero */
.chero__scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:8px}
.chero__scroll i{display:block;width:1px;height:34px;background:linear-gradient(180deg,rgba(15,15,15,.34),transparent);
  animation:heroLine 2.4s var(--ease) infinite}
@keyframes heroLine{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* header over a light hero: dark marks until it becomes the dark capsule */
body.hero-light .nav:not(.stuck) .nav__links a,
body.hero-light .nav:not(.stuck) .nav__util a{color:rgba(18,17,16,.76)}
body.hero-light .nav:not(.stuck) .nav__links a:hover,
body.hero-light .nav:not(.stuck) .nav__util a:hover{color:var(--ink)}
body.hero-light .nav:not(.stuck) .nav__logo img{filter:none}
body.hero-light .nav:not(.stuck) .burger i,
body.hero-light .nav:not(.stuck) .burger i::before,
body.hero-light .nav:not(.stuck) .burger i::after{background:var(--ink)}

@media (max-width:820px){
  /* the portrait crop puts the model mid-frame, so the copy sits on the floor
     at the bottom rather than across her; the top of the scrim still carries
     the header */
  .chero{align-items:flex-end}
  /* clear through the middle so the bag is never washed out; the veil only
     starts below it, where the copy sits on the floor. The copy block is
     trimmed to fit that space: the eyebrow and the secondary CTA are
     desktop-only, otherwise the text climbs over the product. */
  .chero::after{background:linear-gradient(180deg,
    rgba(250,248,245,.72) 0%,rgba(250,248,245,.12) 18%,
    rgba(250,248,245,0) 40%,rgba(250,248,245,0) 64%,
    rgba(250,248,245,.55) 70%,rgba(250,248,245,.94) 78%,
    rgba(250,248,245,1) 90%)}
  .chero__eyebrow{display:none}
  .chero__cta .pill:nth-child(2){display:none}
  .chero__in{padding-block:0 clamp(26px,5vh,46px)}
  .chero h1{font-size:clamp(30px,8.6vw,42px);max-width:none}
  .chero__lead{max-width:none;margin-bottom:22px}
  .chero__scroll{display:none}
}
@media (prefers-reduced-motion:reduce){ .chero__scroll i{animation:none;transform:scaleY(1)} }

/* ---- horizontal product rail ---- */
.rail__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:clamp(20px,2.4vw,34px)}
/* a real carousel: cards keep their size and the row scrolls, rather than
   nine pieces squeezing into one viewport width */
.rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:clamp(190px,22vw,290px);
  gap:clamp(14px,2vw,34px);overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:14px;scrollbar-width:thin;scrollbar-color:rgba(15,15,15,.24) transparent;
}
.rail > *{scroll-snap-align:start}
.rail::-webkit-scrollbar{height:3px}
.rail::-webkit-scrollbar-track{background:var(--line-2)}
.rail::-webkit-scrollbar-thumb{background:rgba(15,15,15,.28);border-radius:3px}

/* ---- alternating editorial split ---- */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(26px,5vw,76px)}
.split--flip .split__art{order:2}
.split__art{margin:0;position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--light-2);border-radius:3px}
.split__art img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.split:hover .split__art img{transform:scale(1.03)}
.split__copy .tag{margin-bottom:12px}
.split__copy h2{margin:0 0 16px}
.split__copy p{font-size:15px;line-height:1.68;color:var(--muted);margin:0 0 14px;max-width:46ch}
.split__meta{display:flex;gap:22px;margin:22px 0 26px;flex-wrap:wrap}
.split__meta div b{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#a8a29b;font-weight:500;margin-bottom:5px}
.split__meta div span{font-size:14.5px;font-weight:600;letter-spacing:-.01em}

/* ---- collection band: grey ground edge to edge, photograph held to a panel
   so it is never upscaled past what the source can carry ---- */
.cband{position:relative;background:var(--grey);overflow:hidden}
.cband__in{position:relative;z-index:2;display:grid;align-content:center;
  min-height:clamp(360px,40vw,520px);
  padding-block:clamp(34px,4.5vw,60px);padding-left:min(52%,760px)}
.cband img{position:absolute;top:0;left:0;bottom:0;width:min(50%,740px);height:100%;
  object-fit:cover;object-position:center 40%;z-index:1}
.cband__copy{max-width:46ch;color:#fff;padding-left:clamp(18px,3vw,54px)}
.cband__copy .tag{color:rgba(255,255,255,.66)}
.cband__copy h2{color:#fff;margin:14px 0 14px}
.cband__copy p{color:rgba(255,255,255,.86);font-size:15px;line-height:1.62;margin:0 0 24px}
@media (max-width:860px){
  /* .wrap supplies the side gutter as padding — zeroing it flushed the copy
     against the screen edge */
  .cband__in{padding-left:var(--pad);min-height:0}
  /* the source is 4:3 — forcing it into a 4:5 frame cut the bag off the edge */
  .cband img{position:relative;height:auto;aspect-ratio:4/3;object-fit:cover;
    margin:0 calc(-1 * var(--pad)) 26px;display:block;max-width:none;width:calc(100% + 2*var(--pad))}
  .cband__copy{max-width:none;padding-left:0}
}

/* ---- service / values strip ---- */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,48px);
  padding-block:clamp(34px,4.5vw,62px);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.values div b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.015em;margin-bottom:7px}
.values div p{margin:0;font-size:13px;line-height:1.55;color:var(--muted)}

/* ---- newsletter ---- */
.news{background:var(--light-2);padding-block:clamp(42px,6vw,88px)}
.news__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.news h2{margin:0 0 10px}
.news p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6;max-width:42ch}
.news__form{display:flex;gap:10px;flex-wrap:wrap}
.news__form input{
  flex:1 1 240px;background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:13px 20px;font:inherit;font-size:14px;color:var(--ink);
}
.news__form input:focus{outline:none;border-color:var(--ink)}
.news .note{margin-top:12px;font-size:12px;color:#a8a29b}

/* ---- multi-column footer ---- */
.ftr__cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(24px,4vw,60px);
  padding-block:clamp(40px,5vw,72px)}
.ftr__cols h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.52);margin:0 0 16px;font-weight:500}
.ftr__cols ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ftr__cols a{font-size:14px;color:rgba(255,255,255,.82)}
.ftr__cols a:hover{color:#fff}
.ftr__brand p{margin:16px 0 0;font-size:13.5px;line-height:1.62;color:rgba(255,255,255,.66);max-width:34ch}
.ftr__base{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center;
  padding-block:22px;border-top:1px solid var(--line-inv)}
.ftr__base small,.ftr__base a{font-size:12.5px;color:rgba(255,255,255,.56)}
.ftr__base a:hover{color:#fff}
.ftr__base nav{display:flex;gap:20px;flex-wrap:wrap}

@media (max-width:1000px){
  .split{grid-template-columns:1fr}
  .split--flip .split__art{order:0}
  .values{grid-template-columns:repeat(2,1fr)}
  .news__in{grid-template-columns:1fr}
  .ftr__cols{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .values{grid-template-columns:1fr}
  .ftr__cols{grid-template-columns:1fr}
}

/* ---- product detail: stacked image column + sticky info panel ----
   The reference houses all use this shape. The old build put a hero stage,
   then a separate gallery, then the spec far below; this keeps name, price
   and specification beside the photography the whole way down. */
.pdp2{display:grid;grid-template-columns:1fr minmax(320px,40%);gap:clamp(24px,4vw,64px);align-items:start;
  padding-top:calc(var(--nav) + clamp(18px,2.5vw,40px))}
.pdp2__media{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1vw,14px)}
.pdp2__media figure{margin:0;aspect-ratio:1/1;overflow:hidden;background:var(--light-2);position:relative;border-radius:3px}
.pdp2__media figure img{width:100%;height:100%;object-fit:contain;padding:7%;transition:transform 1.2s var(--ease)}
.pdp2__media figure.plate img{object-fit:cover;padding:0}
.pdp2__media figure:first-child{grid-column:1 / -1;aspect-ratio:4/3;background:var(--light-2)}
.pdp2__media figure:first-child img{object-fit:cover;padding:0}
.pdp2__media figure:hover img{transform:scale(1.04)}

.pdp2__info{position:sticky;top:calc(var(--nav) + 14px)}
.pdp2__crumb{display:flex;gap:9px;font-size:12px;color:var(--muted);margin-bottom:16px}
.pdp2__crumb a:hover{color:var(--ink)}
.pdp2__info h1{font-size:clamp(26px,2.8vw,40px);font-weight:500;letter-spacing:-.03em;line-height:1.1;margin:0 0 10px}
.pdp2__sub{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.pdp2__price{font-size:20px;font-weight:600;letter-spacing:-.02em;margin:0 0 22px}
.pdp2__lead{font-size:15px;line-height:1.68;color:var(--ink-2);margin:0 0 20px}
.pdp2__feats{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:9px}
.pdp2__feats li{position:relative;padding-left:16px;font-size:14px;line-height:1.5;color:var(--muted)}
.pdp2__feats li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:1px;background:currentColor}
.pdp2__acc{border-top:1px solid var(--line-2)}
.pdp2__acc details{border-bottom:1px solid var(--line-2)}
.pdp2__acc summary{
  cursor:pointer;list-style:none;padding:15px 0;display:flex;justify-content:space-between;align-items:center;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;
}
.pdp2__acc summary::-webkit-details-marker{display:none}
.pdp2__acc summary::after{content:'+';font-size:16px;color:var(--muted)}
.pdp2__acc details[open] summary::after{content:'\2013'}
.pdp2__acc .inner{padding:0 0 18px}
.pdp2__acc .specs{margin:0}
.pdp2__acc p{margin:0 0 12px;font-size:14px;line-height:1.62;color:var(--muted)}
.pdp2__acc img{width:100%;height:auto;border-radius:3px;background:#fff}
.pdp2__buy{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 26px}

@media (max-width:1000px){
  .pdp2{grid-template-columns:1fr}
  .pdp2__info{position:static}
  .pdp2__media figure:first-child{aspect-ratio:1/1}
}
@media (max-width:620px){
  .pdp2__media{grid-template-columns:1fr}
  .pdp2__media figure:first-child{grid-column:auto}
}

/* ---- brand story ----
   The copy is written in beats: short standalone lines between paragraphs.
   Flattening it into one block would lose that, so the beats get their own
   scale and breathing room. */
.story{max-width:62ch;margin-inline:auto;text-align:center}
.story p{font-size:clamp(15px,1.15vw,16.5px);line-height:1.78;color:var(--ink-2);margin:0 0 20px}
.story p.q{
  font-size:clamp(19px,1.9vw,27px);line-height:1.38;letter-spacing:-.022em;
  color:var(--ink);margin:34px auto;max-width:22ch;font-weight:400;
}
.story p.beat{
  font-size:clamp(17px,1.5vw,21px);line-height:1.4;letter-spacing:-.02em;
  color:var(--ink);margin:28px 0;
}
.story hr{border:0;height:1px;background:var(--line-2);margin:40px auto;width:78px}
.story .sig{
  margin-top:34px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
}
.story .note{
  margin:26px auto 0;max-width:56ch;font-size:13px;line-height:1.66;color:#a8a29b;
}
@media (max-width:620px){ .story p.q{max-width:none} }

/* ---- colourways ----
   Two places show the same information at different weights: a quiet row of
   dots on the card (glanceable, not clickable), and a real control on the
   product page. They share the dot shape and nothing else. */
.px .sw{display:flex;gap:5px;margin-top:9px;align-items:center}
.px .sw i{
  width:9px;height:9px;border-radius:50%;display:block;
  box-shadow:inset 0 0 0 1px rgba(15,15,15,.16);
}
.pdp2__cols{margin:4px 0 24px}
.pdp2__cols .lbl{
  display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:11px;
}
.pdp2__cols .lbl b{color:var(--ink);font-weight:600;margin-left:5px}
.pdp2__cols .swatches{margin:0;gap:12px}
.sw__b{
  width:28px;height:28px;border-radius:50%;position:relative;padding:0;
  box-shadow:none;background:none;
}
.sw__b i{
  display:block;width:100%;height:100%;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(15,15,15,.18);
}
.sw__b::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid transparent;transition:border-color .3s ease;
}
.sw__b.on::after{border-color:var(--ink)}

/* ---- grouped filter rows ----
   Two product lines now share one catalogue, so the bar reads as rows —
   line first, then the collections inside each line — instead of one long
   run of pills the eye has to parse. */
.fg__row{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.filters__in{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 18px}
/* #fFam stays a column so a second level of filters, if it ever comes back,
   stacks instead of running off the side */
#fFam{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:9px}

.fg__row b{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-right:4px;
}

.filters__in{position:relative}
@media (max-width:760px){
  /* A wrapping pill group eats half the screen when the bar is sticky, so on
     small screens it scrolls sideways instead and the bar stays short. */
  .filters__in .count{position:static;margin:1px 0 0}
  #fFam{width:100%}
  .fg__row{
    gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-bottom:1px;
  }
  .fg__row::-webkit-scrollbar{display:none}
  .fg__row>*{flex:0 0 auto}
  .fb{padding:6px 12px;font-size:11.5px}
  #fFam{gap:7px}
}


/* ---- the two collections ----
   These photographs carry no lettering of their own, so the name sits over the
   image — which also tells them apart from the four Zest Mode banners below,
   where the artwork already has type and the caption goes underneath. */
.lns{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,22px)}
.ln{position:relative;display:block;overflow:hidden;border-radius:3px;background:var(--light-2)}
.ln__ph{display:block;aspect-ratio:4/3}
.ln__ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.5s var(--ease)}
.ln:hover .ln__ph img{transform:scale(1.04)}
.ln::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(12,12,12,.74) 0%,rgba(12,12,12,.34) 42%,rgba(12,12,12,0) 78%);
}
.ln__ov{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(20px,2.4vw,34px);color:#fff;
}
.ln__ov em{
  font-style:normal;display:block;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:9px;
}
.ln__ov h3{
  margin:0 0 8px;font-size:clamp(22px,2.4vw,34px);font-weight:500;letter-spacing:-.03em;
}
.ln__ov p{
  margin:0;font-size:14px;line-height:1.55;color:rgba(255,255,255,.84);max-width:34ch;
}
.ln__go{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#fff;
}
.ln__go i{font-style:normal;transition:transform .45s var(--ease)}
.ln:hover .ln__go i{transform:translateX(5px)}
@media (max-width:760px){
  .lns{grid-template-columns:1fr}
  .ln__ph{aspect-ratio:3/2}
}

/* ---- catalogue search ----
   The filter bar is a column (it was built for stacked groups), so the search
   sits on the same row as the pills by pulling itself up out of the flow —
   that keeps the sticky bar one line tall instead of two. */
.vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.srch{
  position:relative;display:flex;align-items:center;
  width:min(300px,32vw);margin-left:auto;
}
.srch__i{
  position:absolute;left:12px;width:15px;height:15px;color:var(--muted);
  pointer-events:none;
}
.srch input{
  width:100%;appearance:none;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:8px 30px 8px 33px;
  font:inherit;font-size:12.5px;letter-spacing:.01em;color:var(--ink);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.srch input::placeholder{color:var(--muted)}
.srch input:hover{border-color:var(--grey-lo)}
.srch input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(15,15,15,.06)}
.srch input::-webkit-search-cancel-button{display:none}
.srch__x{
  position:absolute;right:9px;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;font-size:15px;line-height:1;
  color:var(--muted);background:none;
}
.srch__x:hover{color:var(--ink);background:var(--light-2)}
.srch__x[hidden]{display:none}

.filters__in .count{position:static;margin-left:0}

.empty .lnk{
  background:none;border:0;padding:0;font:inherit;color:var(--ink);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.empty .lnk:hover{opacity:.65}

@media (max-width:860px){
  /* no room beside the pills — the field takes its own line */
  .srch{width:100%;margin-left:0;order:3}
  .filters__in .count{order:4;margin-left:0}
}

/* ---- product shots are the client's photographs, untouched ----
   They are no longer background-removed cut-outs: each one is the original
   studio frame, whole. Three consequences:
   - the tile goes white, because the shot's own ground is near-white (254);
     a grey tile would show as a square behind the photograph
   - the drop-shadow goes, since there is no alpha to cast one — it would
     outline a white rectangle instead of the bag
   - nothing is ever cropped: the frames are square, so a square tile with
     object-fit:contain shows every pixel the photographer framed */
.px__ph{background:#fff}
.px__ph .lead{object-fit:cover}          /* the lead is a lifestyle plate, unchanged */
.px__ph .alt{
  /* the frame is square and the tile is 4:5, so a square box at --sc of the
     tile's width always fits inside it — the packshot can never be clipped,
     and the relative sizes still read true */
  inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);
  width:calc(100% * var(--sc,1));height:auto;aspect-ratio:1/1;
  object-fit:contain;object-position:center center;
  filter:none;
}
.px:hover .px__ph .alt{transform:translate(-50%,-50%)}
.pdp2__media figure{background:#fff}
.pdp2__media figure img{padding:0}
/* a gallery must never clip a product: show the whole frame, always */
.pdp2__media figure.plate{background:var(--light-2)}
.pdp2__media figure.plate img{object-fit:contain}
.pdp2__media figure:first-child{background:var(--light-2)}
.pdp2__media figure:first-child img{object-fit:cover}   /* the campaign lead is art-directed */
.gal figure{background:#fff}
.gal figure img{padding:0}
.gal figure.plate{background:var(--light-2)}
.gal figure.plate img{object-fit:contain;background:transparent}
.fc__ph img{filter:none}
.pdp__stage img{filter:none}
.feat__prod{filter:none}

/* "Made in Italy" is a stamp, not a second sentence — its own line, small caps,
   dimmer than the tagline above it. Separate elements rather than a <br> so the
   two can carry different sizes, and because the JS writes them with
   textContent, where a <br> would print as literal characters. */
.ln__o{
  display:block;margin-top:9px;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.66);
}
.ln__go{margin-top:16px}
#catOrigin{
  margin:10px 0 0;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
#catOrigin[hidden]{display:none}

/* ============================================================
   WordPress additions
   ============================================================ */

/* The catalogue filter is an attribute on the grid rather than a JavaScript
   rebuild, so the right set is on screen before any script runs — and still
   right if the script never runs at all. Search layers a class on top. */
.pgrid[data-filter="mode"] .px:not([data-line="mode"]),
.pgrid[data-filter="code"] .px:not([data-line="code"]),
.px.is-off{display:none}

/* A product shot hidden because another colourway is selected. */
.pdp2__media figure[hidden]{display:none}

/* Core blocks carry their own wrappers; keep them out of the way of the
   theme's own spacing. */
.wp-site-blocks > *{margin-block:0}
.wp-block-group.alignfull{margin-inline:0;max-width:none}
.entry-content > .alignfull{margin-inline:0}

/* The editor canvas has no <body> background of ours. */
.editor-styles-wrapper{background:var(--light)}

/* ---- product page proportions ----
   The details panel is short — a lead, five bullets and four collapsed
   accordions — while the gallery runs to seven shots. Two-up left a column
   of nothing beside the lower half of the page. Three-up above 1200px
   roughly halves the gallery's height and brings the two columns level,
   and the media column takes a little more of the width so the shots do
   not get small in the process. */
@media (min-width:1080px){
  .pdp2{grid-template-columns:minmax(0,1.3fr) minmax(300px,34%)}
  .pdp2__media{grid-template-columns:repeat(3,1fr)}
  .pdp2__media figure:first-child{grid-column:1 / -1;aspect-ratio:16/9}
}
/* Between the stacked layout and three-up, a shorter lead keeps the two
   columns from drifting apart. */
@media (min-width:1001px) and (max-width:1079px){
  .pdp2__media figure:first-child{aspect-ratio:16/9}
}
/* Once the details have scrolled by there is nothing left to stick to, so
   let the panel settle rather than leaving it pinned beside empty space. */
.pdp2__info{align-self:start}

/* ============================================================
   Shop
   ============================================================ */

/* ---- buy box ---- */
.zbuy{margin:22px 0 26px;display:grid;gap:10px;flex:1 1 100%;min-width:0;width:100%}
.zbuy__row{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.zbuy__qty{
  display:inline-flex;align-items:center;flex:0 0 auto;
  border:1px solid var(--line);border-radius:999px;background:#fff;overflow:hidden;
}
.zbuy__step{
  width:40px;height:46px;display:grid;place-items:center;background:none;
  font-size:16px;line-height:1;color:var(--ink-2);transition:color .25s var(--ease),background-color .25s var(--ease);
}
.zbuy__step:hover{color:var(--ink);background:var(--light-2)}
.zbuy__n{
  width:42px;height:46px;border:0;background:none;text-align:center;
  font:inherit;font-size:14px;font-weight:600;color:var(--ink);-moz-appearance:textfield;
}
.zbuy__n::-webkit-outer-spin-button,.zbuy__n::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.zbuy__n:focus{outline:none}
.zbuy__qty:focus-within{border-color:var(--ink)}
.zbuy__add{flex:1 1 170px;justify-content:center;min-height:46px}
.zbuy__now{justify-content:center;min-height:46px;width:100%}
.zbuy__add[disabled]{opacity:.6;pointer-events:none}
/* an external piece: one button, full width, no quantity to choose */
.zbuy__ext{flex:1 1 100%;width:100%;justify-content:center;min-height:46px}

/* ---- leaving for the official shop ----
   A quiet full-page note while the browser is on its way out. */
.zout{
  position:fixed;inset:0;z-index:400;display:grid;place-items:center;
  background:rgba(241,241,241,.92);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .3s var(--ease);
}
.zout.in{opacity:1}
.zout__card{display:grid;justify-items:center;gap:22px;padding:0 var(--pad);text-align:center;max-width:34rem}
/* `.zout` is carried only to outrank WordPress's `:root :where(img){height:auto}`,
   which is emitted after the theme stylesheet and would otherwise win on order. */
.zout .zout__logo{height:clamp(38px,4.4vw,50px);width:auto;max-width:none;display:block}
.zout__msg{margin:0;font-size:15px;line-height:1.5;color:var(--ink);letter-spacing:.01em;text-wrap:balance}
/* a hairline that fills for exactly as long as the wait — no spinner, which
   would read as "something is wrong" rather than "we are on our way" */
.zout__bar{display:block;width:150px;height:1px;background:var(--line);overflow:hidden}
.zout__bar i{
  display:block;height:100%;width:100%;background:var(--ink);
  transform:scaleX(0);transform-origin:left;
  animation:zbar var(--zout-ms,1500ms) cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes zbar{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .zout{transition:none}
}
.zbuy__said{
  margin:2px 0 0;font-size:12.5px;letter-spacing:.02em;color:var(--muted);
}
.zbuy__said.bad{color:#b3261e}
.zbuy__said[hidden]{display:none}

/* ---- header cart ---- */
.cartlink{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;margin-left:4px;color:inherit;
}
.cartlink svg{width:19px;height:19px}
.cartlink__n{
  position:absolute;top:-1px;right:-3px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--ink);color:#fff;
  font-style:normal;font-size:10px;font-weight:600;line-height:16px;text-align:center;
  opacity:0;transform:scale(.6);transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.cartlink.has .cartlink__n{opacity:1;transform:none}
.nav:not(.stuck) .cartlink__n,body.inner .cartlink__n{background:#fff;color:var(--ink)}
body.hero-light .nav:not(.stuck) .cartlink__n{background:var(--ink);color:#fff}
.drawer .cartlink{width:auto;justify-content:flex-start;gap:10px;margin:0}
.drawer .cartlink__n{position:static;opacity:1;transform:none}

/* ---- cart, checkout, order received ----
   WooCommerce ships its own look; these pull it back to the house style
   rather than replacing its markup, so Woo upgrades don't break the page. */
.shoppage{padding:calc(var(--navh) + 30px) 0 clamp(60px,8vw,110px)}
.shoppage .wrap{max-width:1180px}
.shoppage__h{font-size:clamp(28px,3.4vw,44px);font-weight:500;letter-spacing:-.03em;margin:0 0 28px}
.shoppage__addr{gap:38px;margin-top:34px}
.shoppage__addr > *{flex:1 1 240px}
.shoppage .wp-block-woocommerce-order-confirmation-status h2,
.shoppage .woocommerce-order-received h2:first-of-type{
  font-size:clamp(28px,3.4vw,44px);font-weight:500;letter-spacing:-.03em;margin:0 0 14px;
}
.shoppage .wc-block-order-confirmation-totals table{width:100%;border-collapse:collapse;margin-top:26px}
.shoppage .wc-block-order-confirmation-summary{margin:24px 0}
/* Woo's own shortcode pages (my account, lost password) have no .wrap of their
   own, so give the shortcode wrapper one. Never <main> itself — the product and
   archive templates already put a .wrap inside, and padding both would indent
   the page twice and pull it out of line with the nav. */
.woocommerce main > .woocommerce,
.woocommerce-page main > .woocommerce,
.woocommerce main > .woocommerce-account,
.woocommerce-page main > .entry-content{max-width:var(--maxw);margin-inline:auto;padding:calc(var(--navh) + 36px) var(--pad) clamp(60px,8vw,110px)}
/* Woo's block cart/checkout want to run edge-to-edge; keep them inside the wrap */
.shoppage .alignfull,.shoppage .alignwide{max-width:100%;margin-left:0;margin-right:0;width:auto}
.shoppage .wc-block-cart,.shoppage .wc-block-checkout{margin-top:0}
.shoppage .wp-block-woocommerce-cart,.shoppage .wp-block-woocommerce-checkout{margin:0}
.woocommerce-page h1,.woocommerce h1,
.woocommerce-page .wp-block-post-title{
  font-size:clamp(28px,3.4vw,46px);font-weight:500;letter-spacing:-.03em;margin:0 0 26px;
}
.woocommerce table.shop_table{border:1px solid var(--line-2);border-radius:4px;border-collapse:separate;background:#fff}
.woocommerce table.shop_table th{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;
  border-bottom:1px solid var(--line-2);padding:14px 16px;
}
.woocommerce table.shop_table td{border-top:1px solid var(--line-2);padding:16px;font-size:14px;vertical-align:middle}
.woocommerce table.shop_table img{width:72px;height:auto;border-radius:3px;background:#fff}
.woocommerce .quantity input[type=number]{
  width:66px;height:42px;text-align:center;border:1px solid var(--line);border-radius:999px;
  background:#fff;font:inherit;font-size:14px;
}
/* Woo's buttons, wearing the house pill */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button.alt,.woocommerce button.button.alt,
.wc-block-components-button,.wp-element-button.wc-block-components-checkout-place-order-button{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:999px;
  padding:13px 26px;font:inherit;font-size:13px;font-weight:500;letter-spacing:.03em;
  text-transform:none;line-height:1;min-height:46px;
  transition:background-color .35s var(--ease),color .35s var(--ease);
}
.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce input.button:hover,.wc-block-components-button:hover{background:#2b2a28;border-color:#2b2a28;color:#fff}
.woocommerce .button.wc-backward,.woocommerce a.button.wc-backward{background:none;color:var(--ink);border-color:var(--line)}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.wc-block-components-text-input input{
  width:100%;border:1px solid var(--line);border-radius:4px;padding:12px 14px;
  font:inherit;font-size:14px;background:#fff;color:var(--ink);
}
.woocommerce form .form-row input.input-text:focus,.wc-block-components-text-input input:focus{
  outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(15,15,15,.06);
}
.woocommerce form .form-row label,.wc-block-components-text-input label{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.woocommerce .cart_totals h2,.woocommerce-checkout h3,.wc-block-components-title{
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600;
}
.woocommerce-message,.woocommerce-info,.woocommerce-error,.wc-block-components-notice-banner{
  border:1px solid var(--line-2);border-top:2px solid var(--ink);border-radius:4px;
  background:#fff;padding:14px 18px;font-size:14px;
}
.woocommerce-message::before,.woocommerce-info::before{color:var(--ink)}
.woocommerce .woocommerce-breadcrumb{font-size:12px;color:var(--muted);margin-bottom:18px}
/* never crop the photography — letterbox inside whatever box Woo gives it */
.shoppage .wc-block-cart-item__image img,
.shoppage .wc-block-components-order-summary-item__image img,
.shoppage .wc-block-components-product-image img,
.woocommerce table.shop_table img{object-fit:contain;background:#fff}
.shoppage .wc-block-components-sidebar,.shoppage .wc-block-components-order-summary{
  border:1px solid var(--line-2);border-radius:4px;background:#fff;
}
.shoppage .wc-block-components-totals-item__label{font-size:13px;color:var(--muted)}
.shoppage .wc-block-cart-item__product-metadata,
.shoppage .wc-block-components-product-metadata__description{display:none}

@media (max-width:820px){
  /* the links hide on small screens, but a shop needs its bag reachable */
  .nav__util{display:flex;justify-self:end;gap:0}
  .nav__util > *:not(.cartlink){display:none}
  .nav__util .cartlink{color:#fff}
}
@media (max-width:620px){
  .zbuy__add{flex:1 1 100%}
}