/*
Theme Name: Casa Valino
Theme URI: https://casavalino.com
Author: Codexa
Description: Italian old-money clothing store. Server-rendered WooCommerce theme built for SEO — every product, category and article ships as HTML on first response. No client-side rendering anywhere in the critical path.
Version: 1.5.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary
Text Domain: casavalino
Tags: ecommerce, woocommerce, editorial
WC requires at least: 8.0
WC tested up to: 11.0
*/

/* ═══════════════════════════════════════════════════════════════
   TOKENS
   Avery Ashdown (the style reference) runs pure black on pure
   white with a warm bone border. Same bones — ground warmed to
   alabaster, black softened to espresso, real serif for display.
   That shift is most of what separates minimal from old money.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bone:#f6f2ea;
  --alabaster:#fbf9f5;
  --linen:#efe9de;
  --espresso:#221c16;
  --umber:#4a4038;
  --stone:#8a8177;
  --olive:#525c46;
  --cognac:#8a6a4b;
  --rule:#e3dacc;
  --sale:#8a3a2c;

  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;

  --wrap:1360px;
  --gut:clamp(20px,4vw,56px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:400;color:var(--umber);background:var(--bone);
     -webkit-font-smoothing:antialiased;overflow-x:hidden;font-size:15px;line-height:1.7}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* accessibility ────────────────────────────────────────────── */
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--espresso);
  color:var(--bone);padding:12px 20px;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.skip-link:focus{left:0}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap}
:focus-visible{outline:2px solid var(--olive);outline-offset:3px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* type ─────────────────────────────────────────────────────── */
.display{font-family:var(--serif);font-weight:300;line-height:1.06;letter-spacing:-.005em;
         color:var(--espresso)}
.display em{font-style:italic;font-weight:300}
.label{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.3em;
       text-transform:uppercase;color:var(--stone)}
.lede{font-size:16px;line-height:1.85;color:var(--umber)}

.tlink{display:inline-block;font-size:11px;font-weight:500;letter-spacing:.26em;
  text-transform:uppercase;color:var(--espresso);padding-bottom:6px;position:relative}
.tlink::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--espresso);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.tlink:hover::after{transform:scaleX(.28)}
.tlink--light{color:#fff}.tlink--light::after{background:#fff}

.btn,.button,button.btn{display:inline-block;font-size:11px;font-weight:500;letter-spacing:.26em;
  text-transform:uppercase;padding:15px 34px;border:1px solid var(--espresso);
  color:var(--espresso);background:transparent;transition:.35s;cursor:pointer;text-align:center}
.btn:hover,.button:hover{background:var(--espresso);color:var(--bone)}
.btn--light{border-color:#fff;color:#fff}
.btn--light:hover{background:#fff;color:var(--espresso)}
.btn--solid{background:var(--espresso);color:var(--bone)}
.btn--solid:hover{background:var(--umber);color:var(--bone)}

/* ═══ ANNOUNCEMENT ═══════════════════════════════════════════ */
.announce{background:var(--espresso);color:rgba(246,242,234,.9);text-align:center;
  padding:11px var(--gut);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase}

/* ═══ HEADER ═════════════════════════════════════════════════ */
.header{background:var(--bone);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:60}
.header__top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:26px var(--gut) 18px}
.header__utils{display:flex;gap:26px;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--stone)}
.header__utils a:hover{color:var(--espresso)}
.header__utils--right{justify-content:flex-end}
.wordmark{font-family:var(--serif);font-weight:400;font-size:clamp(23px,3.4vw,34px);
  letter-spacing:.34em;text-transform:uppercase;color:var(--espresso);
  white-space:nowrap;text-indent:.34em;display:inline-block}
.wordmark img{max-height:44px;width:auto}
.header__nav{display:flex;justify-content:center;gap:38px;padding:0 var(--gut) 18px;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--umber);
  list-style:none;flex-wrap:wrap}
.header__nav li{position:relative}
.header__nav a{position:relative;padding-bottom:3px;display:inline-block}
.header__nav a::after{content:'';position:absolute;left:50%;bottom:0;width:0;height:1px;
  background:var(--espresso);transition:.4s;transform:translateX(-50%)}
.header__nav a:hover::after,.header__nav .current-menu-item>a::after{width:100%}
.burger{display:none;background:none;border:0;font-size:20px;cursor:pointer;color:var(--espresso)}
.cart-count{font-variant-numeric:tabular-nums}

/* ═══ HERO ═══════════════════════════════════════════════════ */
.hero{position:relative;height:92svh;min-height:560px;overflow:hidden;background:var(--espresso)}
/* The drift script translates this layer from +35px to -35px. With the
   layer sitting flush at inset:0 the downward half of that range pulled
   its top edge clear of the section and exposed a dark band above the
   image. 40px of headroom top and bottom covers the full range. */
.hero__media{position:absolute;inset:-40px 0;will-change:transform}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__veil{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(34,28,22,.34) 0%,rgba(34,28,22,.12) 34%,rgba(34,28,22,.58) 100%)}
.hero__inner{position:relative;z-index:2;height:100%;display:flex;align-items:flex-end;
  padding-bottom:clamp(48px,8vh,96px)}
.hero__copy{max-width:640px;color:#fff}
.hero .label{color:rgba(255,255,255,.72)}
.hero h1,.hero h2{font-size:clamp(2.9rem,6.4vw,5.2rem);color:#fff;margin:18px 0 22px}
.hero p{font-size:16px;line-height:1.8;color:rgba(255,255,255,.86);max-width:440px;margin-bottom:34px}

/* ═══ MANIFESTO ══════════════════════════════════════════════ */
.manifesto{padding:clamp(72px,11vh,132px) 0;text-align:center}
.manifesto .big{font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,3.1vw,2.5rem);
  line-height:1.4;color:var(--espresso);max-width:20ch;margin:22px auto 0}
.manifesto .sub{font-size:15px;line-height:1.85;color:var(--umber);max-width:52ch;margin:30px auto 0}

/* ═══ CATEGORIES ═════════════════════════════════════════════ */
/* One row, always. There are five categories; a 4-column grid pushed the
   fifth onto a second row and left a hole three tiles wide. */
.cats{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;background:var(--rule)}
.cat{position:relative;overflow:hidden;background:var(--linen);aspect-ratio:3/4;display:block}
.cat img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.cat:hover img{transform:scale(1.045)}
.cat__veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(34,28,22,.5))}
.cat__body{position:absolute;left:0;right:0;bottom:0;padding:26px;color:#fff;text-align:center}
.cat__body h2,.cat__body h3{font-family:var(--serif);font-weight:400;font-size:26px;
  letter-spacing:.04em;color:#fff}
.cat__body span{font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.75);display:block;margin-top:7px}

/* ═══ SECTIONS / PRODUCT GRID ════════════════════════════════ */
.section{padding:clamp(72px,11vh,128px) 0}
.section--linen{background:var(--linen)}
.sec-head{text-align:center;margin-bottom:56px}
.sec-head h2{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,3.8vw,3rem);
  color:var(--espresso);margin-top:16px}
.sec-foot{text-align:center;margin-top:60px}

ul.products{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,34px);
  list-style:none;margin:0;padding:0}
ul.products li.product{position:relative}
.woocommerce ul.products li.product a img{margin:0 0 18px;aspect-ratio:3/4;object-fit:cover;
  background:var(--linen);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
ul.products li.product:hover a img{transform:scale(1.04)}
ul.products li.product .woocommerce-loop-product__title{font-family:var(--serif)!important;
  font-weight:400!important;font-size:20px!important;color:var(--espresso);
  letter-spacing:.01em;line-height:1.3;padding:0!important;margin:0}
ul.products li.product .price{display:block;font-family:var(--sans);font-size:14px;
  color:var(--espresso);margin-top:10px;letter-spacing:.02em;font-weight:400}
ul.products li.product .price del{color:var(--stone);margin-right:8px}
ul.products li.product .price ins{text-decoration:none;color:var(--sale)}
ul.products li.product .cv-fabric{font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--stone);margin-top:7px;display:block}
/* the loop stays quiet — no add-to-cart buttons shouting from a grid */
ul.products li.product .button{display:none}
.onsale,.cv-tag{position:absolute;top:14px;left:14px;background:var(--bone);color:var(--espresso);
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;padding:6px 11px;
  border-radius:0;line-height:1;z-index:2}

/* ═══ STORY ══════════════════════════════════════════════════ */
.story{background:var(--linen)}
.story__grid{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.story__media{position:relative;overflow:hidden;min-height:clamp(420px,62vh,720px)}
/* Same 40px drift headroom as the hero — this image is the drifting
   layer itself, so the offset goes on the img. */
.story__media img{position:absolute;top:-40px;left:0;width:100%;height:calc(100% + 80px);object-fit:cover;will-change:transform}
.story__body{display:flex;align-items:center;padding:clamp(48px,7vw,96px)}
.story__body .inner{max-width:44ch}
.story__body h2{font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,3.4vw,2.8rem);
  color:var(--espresso);margin:18px 0 24px;line-height:1.16}
.story__body p+p{margin-top:16px}
.story__body .tlink{margin-top:32px}

/* ═══ CRAFT ══════════════════════════════════════════════════ */
.craft{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,64px)}
.craft__item{text-align:center;padding:0 clamp(0px,1.5vw,20px)}
.craft__item .n{font-family:var(--serif);font-size:15px;font-style:italic;color:var(--cognac);
  display:block;margin-bottom:16px}
.craft__item h3{font-family:var(--serif);font-weight:400;font-size:23px;color:var(--espresso);
  margin-bottom:12px}
.craft__item p{font-size:14.5px;line-height:1.8;color:var(--umber)}

/* ═══ EDITORIAL ══════════════════════════════════════════════ */
.editorial{position:relative;overflow:hidden;background:var(--espresso)}
.editorial__media{position:absolute;inset:-40px 0;will-change:transform}
.editorial__media img{width:100%;height:100%;object-fit:cover;opacity:.5}
.editorial__veil{position:absolute;inset:0;background:rgba(34,28,22,.42)}
.editorial__inner{position:relative;z-index:2;text-align:center;color:#fff;
  padding:clamp(96px,17vh,190px) var(--gut)}
.editorial blockquote{font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(1.6rem,3.5vw,2.7rem);line-height:1.38;max-width:22ch;margin:22px auto 0;color:#fff}
.editorial .cite{display:block;margin-top:30px}

/* ═══ NEWSLETTER ═════════════════════════════════════════════ */
.news{padding:clamp(72px,11vh,124px) 0;text-align:center}
.news h2{font-family:var(--serif);font-weight:300;font-size:clamp(1.8rem,3.4vw,2.6rem);
  color:var(--espresso);margin:16px 0 14px}
.news p{max-width:46ch;margin:0 auto 34px;font-size:15px;color:var(--umber)}
.news form{display:flex;max-width:460px;margin:0 auto;border-bottom:1px solid var(--espresso)}
.news input{flex:1;border:0;background:transparent;padding:13px 2px;font-family:var(--sans);
  font-size:14px;color:var(--espresso)}
.news input::placeholder{color:var(--stone)}
.news input:focus{outline:0}
.news button{border:0;background:transparent;cursor:pointer;font-size:10.5px;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--espresso);padding:0 4px}

/* ═══ WOOCOMMERCE — single product ═══════════════════════════ */
.woocommerce-breadcrumb{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--stone);padding:26px 0;margin:0}
.woocommerce-breadcrumb a:hover{color:var(--espresso)}
.woocommerce div.product{display:grid;grid-template-columns:1.1fr .9fr;
  gap:clamp(32px,5vw,80px);align-items:start;padding-bottom:clamp(56px,9vh,110px)}
.woocommerce div.product .woocommerce-product-gallery{grid-column:1;margin:0}
.woocommerce div.product .summary{grid-column:2;margin:0;padding-top:8px}
.woocommerce div.product .product_title{font-family:var(--serif);font-weight:300;
  font-size:clamp(1.9rem,3.4vw,2.7rem);color:var(--espresso);line-height:1.12;margin-bottom:14px}
.woocommerce div.product p.price,.woocommerce div.product span.price{font-family:var(--sans);
  font-size:17px;color:var(--espresso);margin-bottom:22px;font-weight:400}
.woocommerce div.product p.price del{color:var(--stone);margin-right:10px}
.woocommerce div.product p.price ins{text-decoration:none;color:var(--sale)}
.woocommerce div.product .woocommerce-product-details__short-description{font-size:15px;
  line-height:1.85;color:var(--umber);padding-bottom:26px;border-bottom:1px solid var(--rule);
  margin-bottom:26px}
.woocommerce div.product form.cart{margin-bottom:26px}
.woocommerce div.product form.cart .variations{margin-bottom:20px;border:0}
.woocommerce div.product form.cart .variations th{font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--stone);font-weight:500;padding:10px 14px 10px 0;text-align:left}
.woocommerce div.product form.cart .variations select{border:1px solid var(--rule);
  background:var(--alabaster);padding:11px 14px;font-family:var(--sans);font-size:14px;
  color:var(--espresso);min-width:200px;border-radius:0}
.woocommerce div.product form.cart .quantity input{border:1px solid var(--rule);
  background:var(--alabaster);padding:14px 10px;width:70px;text-align:center;
  font-family:var(--sans);font-size:14px;color:var(--espresso)}
.woocommerce div.product form.cart .button{display:inline-block!important;background:var(--espresso);
  color:var(--bone);border-color:var(--espresso);margin-left:10px;padding:15px 40px}
.woocommerce div.product form.cart .button:hover{background:var(--umber)}
/* Trust line under every product description — sizes, shipping, returns.
   The three things that decide a clothing purchase, repeated where the
   decision is actually made rather than only on the homepage. */
.cv-trust{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule);
  font-size:13.5px;line-height:1.8;color:var(--umber)}
.cv-trust strong{color:var(--espresso)}
.cv-trust a{box-shadow:inset 0 -1px 0 var(--rule)}
.cv-trust a:hover{box-shadow:inset 0 -1px 0 var(--espresso)}

.woocommerce div.product .product_meta{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--stone);padding-top:22px;border-top:1px solid var(--rule)}
.woocommerce div.product .product_meta>span{display:block;margin-bottom:7px}
.woocommerce-tabs{grid-column:1/-1;padding-top:clamp(40px,6vh,72px);border-top:1px solid var(--rule)}
.woocommerce-tabs ul.tabs{list-style:none;display:flex;gap:34px;margin:0 0 30px;padding:0;
  border-bottom:1px solid var(--rule)}
.woocommerce-tabs ul.tabs li{margin:0}
.woocommerce-tabs ul.tabs li a{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--stone);padding-bottom:14px;display:inline-block}
.woocommerce-tabs ul.tabs li.active a{color:var(--espresso);box-shadow:inset 0 -1px 0 var(--espresso)}
.woocommerce-tabs .panel h2{font-family:var(--serif);font-weight:400;font-size:22px;
  color:var(--espresso);margin-bottom:12px}
/* Grid items default to min-width:auto, which means a wide child — the
   Woo gallery slider, a long product title — can push its column past
   the container and scroll the whole page sideways. min-width:0 lets
   them shrink to their column instead. */
.woocommerce div.product>*{min-width:0}
ul.products,ul.products li.product{min-width:0}
.woocommerce-product-gallery{min-width:0;max-width:100%}

.related.products{grid-column:1/-1;padding-top:clamp(48px,7vh,88px);border-top:1px solid var(--rule)}
/* Related shows up to 4; with fewer it should sit left, not stretch. */
.related.products ul.products{grid-template-columns:repeat(4,minmax(0,1fr))}
.related.products>h2{font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,3vw,2.2rem);
  color:var(--espresso);text-align:center;margin-bottom:44px}

/* ═══ WOOCOMMERCE — archive / cart / checkout ════════════════ */
.woocommerce-products-header{text-align:center;padding:clamp(40px,6vh,72px) 0 clamp(28px,4vh,48px)}
.woocommerce-products-header__title{font-family:var(--serif);font-weight:300;
  font-size:clamp(2.2rem,4.4vw,3.4rem);color:var(--espresso)}
.term-description{max-width:56ch;margin:18px auto 0;font-size:15px;color:var(--umber)}
.woocommerce-result-count{font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--stone)}
.woocommerce-ordering select{border:1px solid var(--rule);background:var(--alabaster);
  padding:9px 12px;font-family:var(--sans);font-size:12px;color:var(--espresso);border-radius:0}
.woocommerce-pagination ul{list-style:none;display:flex;gap:6px;justify-content:center;
  padding:56px 0 0;margin:0}
.woocommerce-pagination a,.woocommerce-pagination span{display:grid;place-items:center;
  min-width:38px;height:38px;border:1px solid var(--rule);font-size:13px;color:var(--umber)}
.woocommerce-pagination .current{background:var(--espresso);color:var(--bone);
  border-color:var(--espresso)}
.woocommerce table.shop_table{border:1px solid var(--rule);border-collapse:collapse;width:100%}
.woocommerce table.shop_table th{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--stone);font-weight:500;padding:16px;text-align:left;border-bottom:1px solid var(--rule)}
.woocommerce table.shop_table td{padding:16px;border-bottom:1px solid var(--rule)}
.woocommerce .cart_totals h2,.woocommerce-checkout h3{font-family:var(--serif);font-weight:400;
  font-size:22px;color:var(--espresso);margin-bottom:16px}
.woocommerce form .form-row input,.woocommerce form .form-row select,
.woocommerce form .form-row textarea{border:1px solid var(--rule);background:var(--alabaster);
  padding:12px 14px;font-family:var(--sans);font-size:14px;color:var(--espresso);
  width:100%;border-radius:0}
.woocommerce form .form-row label{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--stone);margin-bottom:7px;display:block}
.woocommerce-message,.woocommerce-info,.woocommerce-error{border-top:2px solid var(--olive);
  background:var(--alabaster);padding:16px 20px;font-size:14px;list-style:none;margin-bottom:24px}
.woocommerce-error{border-top-color:var(--sale)}

/* ═══ BLOG / EDITORIAL — the SEO surface ═════════════════════ */
.entry-hero{text-align:center;padding:clamp(48px,8vh,96px) 0 clamp(28px,4vh,44px)}
.entry-hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,4.6vw,3.6rem);
  color:var(--espresso);max-width:20ch;margin:16px auto 0;line-height:1.1}
.entry-meta{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--stone);
  margin-top:22px}
.entry-content{max-width:68ch;margin-inline:auto;font-size:16.5px;line-height:1.85}
.entry-content>*+*{margin-top:1.3em}
.entry-content h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.6vw,2rem);
  color:var(--espresso);margin-top:2em}
.entry-content h3{font-family:var(--serif);font-weight:500;font-size:1.35rem;color:var(--espresso);
  margin-top:1.7em}
.entry-content a{color:var(--espresso);box-shadow:inset 0 -1px 0 var(--rule)}
.entry-content a:hover{box-shadow:inset 0 -1px 0 var(--espresso)}
.entry-content blockquote{font-family:var(--serif);font-style:italic;font-size:1.4rem;
  line-height:1.5;color:var(--espresso);border-left:1px solid var(--cognac);padding-left:26px}
.entry-content img{margin-block:2em}
.entry-content ul,.entry-content ol{padding-left:22px}
.entry-content li+li{margin-top:.5em}
.archive-list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,48px)}
.archive-card img{aspect-ratio:3/2;object-fit:cover;background:var(--linen);margin-bottom:18px}
.archive-card h2{font-family:var(--serif);font-weight:400;font-size:22px;color:var(--espresso);
  line-height:1.28}
.archive-card .entry-meta{margin-top:10px}

/* ═══ FOOTER ═════════════════════════════════════════════════ */
.footer{background:var(--espresso);color:rgba(246,242,234,.66);
  padding:clamp(56px,8vh,88px) 0 30px;font-size:13.5px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(28px,4vw,56px)}
.footer .wordmark{color:var(--bone);font-size:24px;display:block;margin-bottom:18px;text-indent:0}
.footer h2{color:var(--bone);font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  margin-bottom:18px;font-weight:500;font-family:var(--sans)}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.footer a:hover{color:var(--bone)}
.foot-bottom{margin-top:56px;padding-top:24px;border-top:1px solid rgba(246,242,234,.14);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(246,242,234,.44)}

/* ═══ REVEAL ═════════════════════════════════════════════════ */
.rv{opacity:0;transform:translateY(22px);
    transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
/* no-JS must never leave the page blank — SEO and accessibility both */
.no-js .rv{opacity:1;transform:none}

/* ═══ RESPONSIVE ═════════════════════════════════════════════ */
@media(max-width:1024px){
  /* Still one row — it becomes a swipeable strip rather than wrapping
     onto a second line and leaving a hole. */
  .cats{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .cats::-webkit-scrollbar{display:none}
  .cats .cat{flex:0 0 42%;scroll-snap-align:start}
  ul.products{grid-template-columns:repeat(2,1fr)}
  .story__grid{grid-template-columns:1fr}
  .story__media{min-height:58svh}
  .craft{grid-template-columns:1fr;gap:44px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .woocommerce div.product{grid-template-columns:1fr}
  .woocommerce div.product .woocommerce-product-gallery,
  .woocommerce div.product .summary{grid-column:1}
  .archive-list{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .header__utils{display:none}
  .header__top{grid-template-columns:auto 1fr auto;padding:18px var(--gut) 14px}
  /* No burger. The categories stay visible as a scrollable strip, which
     is one tap instead of two and is what shoppers expect on a store.
     The button was also broken: the script set display:block on a nav
     that was never hidden, so tapping it did nothing at all. */
  .burger{display:none}
  .header__nav{gap:22px;font-size:11px;overflow-x:auto;justify-content:flex-start;
    padding-bottom:14px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    scroll-snap-type:x proximity}
  .header__nav li{scroll-snap-align:start;flex:0 0 auto}
  .header__nav::-webkit-scrollbar{display:none}
  /* Tap targets: 11px text alone is a small target, so give each link
     real height without changing how the row looks. */
  .header__nav a{padding-block:10px}
  .hero{height:80svh}
  .cats{gap:1px}
  .cats .cat{flex:0 0 62%}
  .foot-grid{grid-template-columns:1fr}
  .archive-list{grid-template-columns:1fr}
}

/* ═══ MOTION GATE ════════════════════════════════════════════
   The drift is deliberately gentle — old money doesn't lurch.
   Below 768px and under prefers-reduced-motion it stops entirely.
   ═════════════════════════════════════════════════════════════ */
@media(max-width:768px),(prefers-reduced-motion:reduce){
  .hero__media,.story__media img,.editorial__media{transform:none!important}
  /* Drift is off here, so the 40px headroom is not needed — but it must
     be removed deliberately. Leaving the offset with no transform would
     hang the layer 40px above its box and reopen the same gap at the
     bottom instead of the top. */
  .hero__media,.editorial__media{inset:0}
  .story__media img{top:0;height:100%}
  .hero__media img,.editorial__media img{height:100%}
  .rv{transition-duration:.4s}
  .cat img,ul.products li.product a img{transition:none}
  html{scroll-behavior:auto}
}

/* ═══ PRINT ══════════════════════════════════════════════════ */
@media print{
  .header,.footer,.announce,.hero__media,.editorial__media{display:none!important}
  body{background:#fff;color:#000}
}