/*
Theme Name: RTE Collective
Theme URI: https://rtecollective.com
Author: Codexa
Description: Dutch-language interior décor 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. Forked from the Casa Valino engine; reskinned cool for the RTE brand.
Version: 1.0.5
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary
Text Domain: rtecollective
Tags: ecommerce, woocommerce, editorial
WC requires at least: 8.0
WC tested up to: 11.0
*/

/* ═══════════════════════════════════════════════════════════════
   TOKENS
   Casa Lunaire (the sister store) runs a warm cream ground with a
   camel accent and Cormorant. RTE stays in the same celestial lane
   and inverts the temperature: a cool moonstone ground, blue-black
   ink, and brass instead of camel — light after dark rather than
   light at golden hour.
   Spectral, not Cormorant, so the two stores do not share a
   typeface as well as a supplier.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --moonstone:#f4f5f7;   /* page ground   */
  --frost:#fbfbfc;       /* raised cards  */
  --haze:#e9ebef;        /* soft fills    */
  --ink:#1b1e24;         /* headings      */
  --slate:#454b56;       /* body text     */
  --pewter:#7b828e;      /* muted labels  */
  --brass:#9a8556;       /* single accent */
  --rule:#dcdfe4;
  --sale:#8a3a3a;

  /* Aliases so the inherited rules keep working while the names
     above describe what this store actually is. */
  --bone:var(--moonstone);
  --alabaster:var(--frost);
  --linen:var(--haze);
  --espresso:var(--ink);
  --umber:var(--slate);
  --stone:var(--pewter);
  --olive:var(--brass);
  --cognac:var(--brass);

  --serif:'Spectral',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}
/* Inline flow, not flex: as a flex container the "(", the count and the
   ")" each become their own flex item and the gap pushes them apart —
   "WINKELWAGEN ( 2 )". */
.cart-link{white-space:nowrap}
.cart-icon{display:none;vertical-align:-3px;margin-right:5px}

/* ═══ HERO ═══════════════════════════════════════════════════ */
.hero{position:relative;height:92svh;min-height:560px;overflow:hidden;background:var(--espresso)}
.hero__media{position:absolute;inset:0;will-change:transform}
.hero__media img{width:100%;height:112%;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 ═════════════════════════════════════════════ */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2px;background:var(--rule)}
.cat{position:relative;overflow:hidden;background:var(--linen);aspect-ratio:1/1;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}
/* width:100% is not decoration. The global img rule is height:auto with no
   width, so an image whose intrinsic size is narrower than its grid cell
   (the 1000px rte-square served into a wide desktop cell) sits left-aligned
   at its own size and breaks the row rhythm. Pinning the width makes the
   1:1 ratio govern the height in every cell, at every breakpoint. */
/* Same :is() prefix as the block further down, and for a second reason as
   well as the specificity one: front-page.php prints its own <ul class=
   "products"> outside any .woocommerce wrapper, so a rule prefixed with
   plain `.woocommerce` never reached the homepage grid at all — those
   images had no forced ratio. */
:is(body,.woocommerce) ul.products li.product a img{margin:0 0 18px;width:100%;height:auto;
  aspect-ratio:1/1;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}
/* ── A specificity note, because three rules below depend on it ──
   woocommerce.css (general) styles the loop as `.woocommerce ul.products
   li.product X` — four classes. The obvious theme selector, `ul.products
   li.product X`, is three, so WooCommerce quietly won every collision:
   prices rendered in Woo's default green #77a464 instead of espresso, the
   sale badge sat in the top-RIGHT corner, and the add-to-cart buttons this
   grid is supposed to stay quiet about were visible on every card.

   `:is(body, .woocommerce)` fixes it without tying these rules to a Woo
   page: :is() contributes the specificity of its heaviest argument, so the
   selector counts as four classes and ties Woo, and being later in the
   cascade it wins — while `body` still matches on the homepage, where the
   product grid renders without a .woocommerce body class at all. */
:is(body,.woocommerce) 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}
:is(body,.woocommerce) ul.products li.product .price del{color:var(--stone);margin-right:8px}
:is(body,.woocommerce) ul.products li.product .price ins{text-decoration:none;color:var(--sale)}
ul.products li.product .rte-material{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 */
:is(body,.woocommerce) ul.products li.product .button{display:none}
.onsale,.rte-tag,
:is(body,.woocommerce) ul.products li.product .onsale{position:absolute;top:14px;left:14px;right:auto;
  margin:0;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)}
/* object-position biased low: the brand plates are square product shots
   with the subject sitting in the lower half and a lot of empty sweep
   above it. Cropped to this column at the default 50% the frame fills
   with background and reads as a blank panel. */
.story__media img{position:absolute;inset:0;width:100%;height:114%;object-fit:cover;
  object-position:50% 68%;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:0;will-change:transform}
.editorial__media img{width:100%;height:116%;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;position:relative}

/* ── Product gallery ──────────────────────────────────────────
   Every rule below replaces something woocommerce-layout.css used to
   provide. Dropping that stylesheet (functions.php §4) was right — it
   carries the float widths that shrink this grid — but the gallery and
   its thumbnail strip were styled in the same file, so without these
   the thumbs render as a bare <ol> of full-size images stacked down
   the page. The ratio is 1:1 because all 105 source photographs are
   exactly square; anything else would letterbox them. */
.woocommerce div.product .woocommerce-product-gallery__wrapper{margin:0;padding:0;list-style:none}
.woocommerce div.product .woocommerce-product-gallery__image{margin:0;list-style:none}
.woocommerce div.product .woocommerce-product-gallery__image img{width:100%;height:auto;
  aspect-ratio:1/1;object-fit:cover;background:var(--linen)}
.woocommerce div.product .flex-viewport{overflow:hidden}
.woocommerce div.product .flex-control-thumbs{display:grid;
  grid-template-columns:repeat(4,1fr);gap:8px;list-style:none;margin:8px 0 0;padding:0}
.woocommerce div.product .flex-control-thumbs li{margin:0}
.woocommerce div.product .flex-control-thumbs img{width:100%;height:auto;aspect-ratio:1/1;
  object-fit:cover;cursor:pointer;opacity:.5;transition:opacity .35s}
.woocommerce div.product .flex-control-thumbs img.flex-active,
.woocommerce div.product .flex-control-thumbs img:hover{opacity:1}
.woocommerce-product-gallery__trigger{position:absolute;top:14px;right:14px;z-index:3;
  display:grid;place-items:center;width:36px;height:36px;background:var(--bone);
  color:var(--espresso);font-size:15px;line-height:1}

/* Woo's own product-image.php ships the gallery with an inline
   opacity:0 that its JavaScript clears on init. On a store whose whole
   premise is that it renders without JavaScript, that is a blank
   column. Force it back. */
.no-js .woocommerce-product-gallery{opacity:1!important}
.no-js .woocommerce div.product .woocommerce-product-gallery__wrapper{display:grid;gap:8px}
.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)}
.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}
.related.products{grid-column:1/-1;padding-top:clamp(48px,7vh,88px);border-top:1px solid var(--rule)}
.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){
  .cats{grid-template-columns:repeat(2,1fr)}
  /* This store has five categories, so a two-column grid always orphans
     the last tile at half width against empty space. Let the odd one out
     run the full width as a banner instead — 2:1 so a full-bleed tile is
     not twice the height of the squares above it. Count-agnostic: with an
     even number of categories the selector never matches. */
  .cat:last-child:nth-child(odd){grid-column:1/-1;aspect-ratio:2/1}
  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){
  /* The burger is last in the markup — it has to follow the nav it
     controls, for screen readers — so `order` pulls it back to the
     first column. Two cells without it (brand · cart), three with. Sized so
     the brand always takes the flexible column and the cart never gets
     stretched across the leftovers. */
  .header__top{grid-template-columns:1fr auto;padding:18px var(--gut) 14px;
    align-items:center;gap:12px}
  .nav-js .header__top{grid-template-columns:auto 1fr auto}
  .header__utils:not(.header__utils--right){display:none}
  .header__brand{order:0;min-width:0}
  .header__utils--right{order:1;gap:12px;font-size:9.5px;letter-spacing:.16em;
    white-space:nowrap}

  /* Search and Verkooppunten move into the drawer; the cart does not.
     A shop whose phone visitors cannot reach the basket is not a shop,
     and this store's traffic is going to arrive from TikTok. */
  .header__utils--right a[href*="my-account"],
  .header__utils--right a[href*="mijn-account"]{display:none}

  /* Wordmark: "RTE COLLECTIVE" is fourteen uppercase characters, and at
     the desktop clamp floor of 23px with .34em of tracking it measures
     roughly 285px. Against a burger, a cart and two gutters that
     overflows a 360px viewport — which body{overflow-x:hidden} then
     hides by clipping rather than by fixing. These numbers fit a 320px
     screen with the cart intact; the tracking still reads as spaced.
     Measured against the real thing at 320/360/390 rather than derived:
     Spectral's uppercase runs about .94em per character with this
     tracking, not the .78 the first two passes assumed. */
  .wordmark{font-size:clamp(13px,3.8vw,22px);letter-spacing:.16em;text-indent:.16em}

  /* Drawer. The burger already toggled inline display on #rte-nav, but
     nothing ever hid the nav, so the button flipped aria-expanded while
     the menu sat there unchanged — a dead control on every phone, and a
     lie to a screen reader.

     Both the closed state and the burger itself are gated on .nav-js,
     which site.js adds only once it has actually wired the button up.
     Gating on .no-js would not do: that class is stripped by an inline
     script in wp_head, so a site.js that 404s would leave a hidden menu
     and a useless burger. Default here is the visible scroll strip —
     the state that needs no JavaScript at all. */
  .header__nav{gap:20px;font-size:10px;overflow-x:auto;justify-content:flex-start;
    padding-bottom:14px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .header__nav::-webkit-scrollbar{display:none}

  .nav-js .burger{display:block;order:-1}
  .nav-js .header__nav-wrap{display:none}
  .nav-js .header__nav{flex-direction:column;gap:0;overflow:visible;
    padding:2px var(--gut) 16px;font-size:12px}
  .nav-js .header__nav li{border-top:1px solid var(--rule)}
  .nav-js .header__nav a{display:block;padding:14px 0;width:100%}
  .nav-js .header__nav a::after{display:none}

  .hero{height:80svh}
  .cats{grid-template-columns:1fr 1fr;gap:1px}
  .foot-grid{grid-template-columns:1fr}
  .archive-list{grid-template-columns:1fr}

  /* ── Cart, checkout and account tables ──────────────────────
     woocommerce-smallscreen.css is dropped in functions.php §4 along
     with the float layout it belongs to. That was the right call for
     the grid, but smallscreen is also the only thing that makes Woo's
     tables survive a phone: without a replacement, .shop_table renders
     at desktop width and the totals column lands off-screen — where
     body{overflow-x:hidden} quietly clips it rather than letting you
     scroll to it. This is the stacked-row equivalent, with none of the
     float widths that made us drop the original. */
  .woocommerce table.shop_table,
  .woocommerce table.shop_table thead,
  .woocommerce table.shop_table tbody,
  .woocommerce table.shop_table tfoot,
  .woocommerce table.shop_table tr,
  .woocommerce table.shop_table th,
  .woocommerce table.shop_table td{display:block;width:100%;text-align:left}
  .woocommerce table.shop_table thead{position:absolute;left:-9999px}
  .woocommerce table.shop_table tr{border-bottom:1px solid var(--rule);padding:14px 0}
  .woocommerce table.shop_table td{border:0;padding:6px 0}
  /* Guarded on [data-title]: the cart template sets it on every cell but
     review-order.php does not, and an unguarded rule prints a bare ": "
     above every line of the checkout totals. */
  .woocommerce table.shop_table td[data-title]::before{content:attr(data-title) ": ";
    font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone)}
  .woocommerce table.shop_table td.product-thumbnail img{width:96px;height:auto;
    aspect-ratio:1/1;object-fit:cover}
  .woocommerce table.shop_table .quantity input{width:84px}

  /* Two columns of form fields is one column on a phone. Woo's own
     halves come from the stylesheet we dropped. */
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last{width:100%;float:none;margin-right:0}
  .woocommerce-billing-fields,.woocommerce-shipping-fields{width:100%}

  /* Add-to-cart: the button sits beside a 70px quantity box with a 10px
     left margin, which on a 360px screen leaves it about 40px wide. */
  .woocommerce div.product form.cart .button{margin-left:0;margin-top:12px;
    width:100%;padding:16px 20px}
  .woocommerce div.product form.cart .quantity input{width:100%}
  .woocommerce div.product form.cart .variations select{min-width:0;width:100%}

  /* The tab strip is a horizontal row that runs off the edge once there
     are three tabs with .24em tracking. */
  .woocommerce-tabs ul.tabs{gap:20px;overflow-x:auto;scrollbar-width:none;
    white-space:nowrap;flex-wrap:nowrap}
  .woocommerce-tabs ul.tabs::-webkit-scrollbar{display:none}

  /* Four thumbnails under a full-width gallery image are ~70px each. */
  .woocommerce div.product .flex-control-thumbs{grid-template-columns:repeat(5,1fr);gap:6px}
}

/* Very small phones — 320px to 360px. The product grid stays at two
   columns here on purpose: these are objects photographed square, and
   two of them read as a collection where one reads as a catalogue. */
/* Below 430px the cart label becomes a bag mark. Hidden the accessible
   way rather than display:none — the link must still announce itself as
   "Winkelwagen (2)". */
@media(max-width:430px){
  .cart-icon{display:inline-block}
  .cart-label{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(1px,1px,1px,1px);white-space:nowrap}
}

@media(max-width:380px){
  ul.products{gap:12px}
  ul.products li.product .woocommerce-loop-product__title{font-size:17px!important}
  .cats{gap:1px}
  .cat__body{padding:16px}
  .cat__body h2,.cat__body h3{font-size:19px}
}

/* ═══ 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}
  .hero__media img,.story__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}
}