/*
Theme Name: Monty Luxe
Theme URI: https://montycatbeds.com
Author: Monty
Author URI: https://montycatbeds.com
Description: A luxury-house editorial theme for Monty — premium cat beds. Full-bleed hero, centred wordmark, slide-in menu, edge-to-edge product grid and a gallery-first product page. WooCommerce ready.
Version: 1.2.8
Requires at least: 6.4
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: monty-luxe
Tags: e-commerce, custom-menu, custom-logo, featured-images, full-width-template, translation-ready
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root{
  --ink:#14120F;
  --ink-soft:#3B3731;
  --muted:#8B837A;
  --line:#E2DFD8;
  --line-strong:#CCC7BC;
  --paper:#F8F7F4;
  --stone:#EDEBE6;
  --kraft:#B07D4E;
  --moss:#2E3E32;
  --white:#FFFFFF;

  --font-display:"Cormorant Garamond","Didot","Times New Roman",serif;
  --font-sans:"Jost","Futura","Avenir Next",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --header-h:78px;
  --bar-h:0px;
  --gutter:clamp(16px,3.2vw,52px);
  --maxw:1680px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.5s;
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-sans);font-size:15px;line-height:1.65;
  font-weight:350;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.monty-locked{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.01em}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--ink);color:#fff;padding:12px 20px}
.skip-link:focus{left:12px;top:12px}

/* ==========================================================================
   3. Typography primitives
   ========================================================================== */
.display{font-family:var(--font-display);font-weight:300;line-height:1.02;letter-spacing:-.015em}
.d1{font-size:clamp(44px,7.4vw,116px)}
.d2{font-size:clamp(34px,4.6vw,72px)}
.d3{font-size:clamp(26px,3vw,44px)}
.eyebrow{
  font-size:11px;text-transform:uppercase;letter-spacing:.22em;
  font-weight:400;color:var(--muted);
}
.lede{font-size:clamp(15px,1.15vw,18px);line-height:1.75;color:var(--ink-soft);max-width:56ch}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* Buttons ------------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 34px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  border:1px solid var(--ink);background:var(--ink);color:#fff;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
  text-align:center;
}
.btn:hover{background:transparent;color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--light{background:transparent;color:#fff;border-color:#fff}
.btn--light:hover{background:#fff;color:var(--ink)}
.btn--solid-light{background:#fff;color:var(--ink);border-color:#fff}
.btn--solid-light:hover{background:transparent;color:#fff}
.btn--block{display:flex;width:100%}

.link-u{
  display:inline-block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid currentColor;padding-bottom:3px;
  transition:opacity var(--dur) var(--ease);
}
.link-u:hover{opacity:.55}

/* ==========================================================================
   4. Header
   ========================================================================== */
.announce{
  background:var(--ink);color:#fff;text-align:center;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:11px var(--gutter);position:relative;z-index:120;
}
.announce a{border-bottom:1px solid rgba(255,255,255,.45)}

.site-header{
  position:sticky;top:0;z-index:110;
  background:var(--paper);
  border-bottom:1px solid transparent;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.site-header__inner{
  height:var(--header-h);padding:0 var(--gutter);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
}
.header-note{font-size:11px;letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.header-note span{opacity:.75}
.brand{justify-self:center;text-align:center}
.brand a{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(22px,2vw,30px);letter-spacing:.42em;text-indent:.42em;
  line-height:1;display:inline-block;text-transform:uppercase;
}
.brand img{max-height:34px;width:auto;margin:0 auto}
.header-actions{justify-self:end;display:flex;align-items:center;gap:clamp(14px,1.6vw,26px)}
.header-actions button,.header-actions a{display:inline-flex;align-items:center;gap:9px}
.icon{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.25;display:block}
.menu-label{font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.cart-count{
  position:absolute;transform:translate(11px,-9px);
  background:var(--kraft);color:#fff;border-radius:50%;
  min-width:15px;height:15px;font-size:9px;line-height:15px;text-align:center;letter-spacing:0;padding:0 3px;
}
.cart-btn{position:relative}

/* Transparent header over a full-bleed hero */
body.has-hero .site-header{position:fixed;left:0;right:0;background:transparent;color:#fff}
body.has-hero .site-header.is-solid{background:var(--paper);color:var(--ink);border-bottom-color:var(--line)}
body:not(.has-hero) .site-header.is-solid{border-bottom-color:var(--line)}

/* ==========================================================================
   5. Slide-in navigation panel
   ========================================================================== */
.scrim{
  position:fixed;inset:0;background:rgba(20,18,15,.42);
  opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),visibility var(--dur);
  z-index:130;backdrop-filter:blur(2px);
}
.scrim.is-open{opacity:1;visibility:visible}

.panel{
  position:fixed;top:0;right:0;height:100%;width:min(480px,100%);
  background:var(--paper);z-index:140;display:flex;flex-direction:column;
  transform:translateX(101%);transition:transform var(--dur) var(--ease);
  box-shadow:-20px 0 60px rgba(20,18,15,.10);
}
.panel.is-open{transform:none}
.panel--left{right:auto;left:0;transform:translateX(-101%);box-shadow:20px 0 60px rgba(20,18,15,.10)}
.panel--left.is-open{transform:none}
.panel__head{
  height:var(--header-h);display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(20px,3vw,38px);flex:0 0 auto;
}
.panel__title{font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.panel__close{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.panel__close:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.panel__body{flex:1 1 auto;overflow-y:auto;padding:8px clamp(20px,3vw,38px) 40px}
.panel__foot{flex:0 0 auto;border-top:1px solid var(--line);padding:22px clamp(20px,3vw,38px) 30px}

.nav-list>li{border-bottom:1px solid var(--line)}
.nav-list>li>a,.nav-list__toggle{
  display:flex;width:100%;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 0;font-family:var(--font-display);font-size:26px;font-weight:300;line-height:1.15;
  text-align:left;transition:padding-left var(--dur) var(--ease);
}
.nav-list>li>a:hover,.nav-list__toggle:hover{padding-left:8px}
.nav-list__toggle svg{width:14px;height:14px;flex:0 0 auto;transition:transform var(--dur) var(--ease)}
.nav-list>li.is-open .nav-list__toggle svg{transform:rotate(45deg)}
.sub-list{max-height:0;overflow:hidden;transition:max-height var(--dur) var(--ease)}
.sub-list li a{
  display:block;padding:9px 0 9px 2px;font-size:14px;color:var(--ink-soft);
  transition:color var(--dur) var(--ease),padding-left var(--dur) var(--ease);
}
.sub-list li a:hover{color:var(--ink);padding-left:8px}
.sub-list li:last-child a{padding-bottom:22px}
.panel-links{display:grid;gap:14px}
.panel-links a{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.panel-links a:hover{color:var(--ink)}

/* Search overlay ----------------------------------------------------------- */
.search-overlay{
  position:fixed;inset:0;background:var(--paper);z-index:150;
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
  display:flex;flex-direction:column;
}
.search-overlay.is-open{opacity:1;visibility:visible}
.search-overlay__head{height:var(--header-h);display:flex;align-items:center;justify-content:flex-end;padding:0 var(--gutter)}
.search-overlay__body{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:clamp(24px,8vh,90px) var(--gutter)}
.search-overlay form{width:min(760px,100%);border-bottom:1px solid var(--ink);display:flex;align-items:center;gap:16px;padding-bottom:14px}
.search-overlay input[type=search]{
  flex:1;border:0;background:none;font-family:var(--font-display);
  font-size:clamp(26px,4vw,46px);font-weight:300;padding:0;
}
.search-overlay input[type=search]:focus{outline:0}
.search-overlay input::placeholder{color:var(--line-strong)}

/* Cart drawer -------------------------------------------------------------- */
.cart-drawer .widget_shopping_cart_content{display:flex;flex-direction:column;min-height:100%}
.cart-drawer ul.cart_list li{display:grid;grid-template-columns:88px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);position:relative}
.cart-drawer ul.cart_list li img{width:88px;height:auto;background:var(--stone)}
.cart-drawer ul.cart_list li a{font-size:13px;line-height:1.4}
.cart-drawer ul.cart_list li .quantity{font-size:12px;color:var(--muted);display:block;margin-top:6px}
.cart-drawer .remove{position:absolute;right:0;top:20px;font-size:16px;line-height:1;color:var(--muted)}
.cart-drawer .total{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:20px 0;border-bottom:1px solid var(--line);margin:0}
.cart-drawer .total strong{font-weight:400}
.cart-drawer .buttons{display:grid;gap:10px;padding-top:22px}
.cart-drawer .buttons a{
  display:flex;align-items:center;justify-content:center;min-height:52px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--ink);
}
.cart-drawer .buttons a:first-child{background:transparent}
.cart-drawer .buttons a.checkout{background:var(--ink);color:#fff}
.cart-drawer .empty{padding:40px 0;text-align:center;color:var(--muted)}

/* ==========================================================================
   6. Hero
   ========================================================================== */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--ink)}
.hero__media,.hero__media img,.hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,18,15,.46) 0%,rgba(20,18,15,.14) 26%,rgba(20,18,15,.32) 56%,rgba(20,18,15,.70) 100%);
}
.hero__inner{
  position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;text-align:center;color:#fff;
  padding:0 var(--gutter) clamp(46px,8vh,96px);
}
.hero__eyebrow{color:rgba(255,255,255,.82);margin-bottom:18px}
.hero h1{max-width:16ch;margin-bottom:22px;text-shadow:0 1px 40px rgba(0,0,0,.28)}
.hero__sub{max-width:46ch;color:rgba(255,255,255,.9);margin-bottom:32px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.hero__scroll{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;
  color:#fff;font-size:10px;letter-spacing:.24em;text-transform:uppercase;opacity:.75;
}
.placeholder{
  background:
    radial-gradient(120% 90% at 30% 12%,rgba(255,255,255,.14),transparent 60%),
    linear-gradient(140deg,#2B2622 0%,#4A4038 42%,#7C6650 100%);
}
.placeholder--light{background:linear-gradient(140deg,var(--stone) 0%,#E5DED4 55%,#D8CEC0 100%)}

/* ==========================================================================
   7. Home sections
   ========================================================================== */
.section{padding:clamp(64px,9vw,140px) 0}
.section--tight{padding:clamp(44px,6vw,86px) 0}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap--narrow{max-width:900px}
.section__head{text-align:center;margin-bottom:clamp(32px,4vw,64px)}
.section__head .eyebrow{display:block;margin-bottom:16px}
.section__head p{margin:18px auto 0;max-width:58ch;color:var(--ink-soft)}

/* Split tiles */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.tiles--single{grid-template-columns:1fr}
.tiles--single .tile{aspect-ratio:16/7}
.tile{position:relative;aspect-ratio:4/5;overflow:hidden;display:block;background:var(--stone)}
.tile img,.tile .placeholder{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.tile:hover img,.tile:hover .placeholder{transform:scale(1.045)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(20,18,15,.5) 100%)}
.tile__body{position:absolute;inset:auto 0 clamp(28px,4vw,56px);z-index:2;text-align:center;color:#fff;padding:0 20px}
.tile__body h3{font-family:var(--font-display);font-size:clamp(22px,2.2vw,34px);font-weight:300;margin-bottom:16px}
.tile__body .btn{min-height:44px;padding:0 26px}

/* Editorial alternating rows */
.editorial{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(28px,5vw,90px)}
.editorial--flip .editorial__media{order:2}
.editorial__media{aspect-ratio:5/6;background:var(--stone);overflow:hidden}
.editorial__media img,.editorial__media .placeholder{width:100%;height:100%;object-fit:cover}
.editorial__body{max-width:52ch}
.editorial__body .eyebrow{display:block;margin-bottom:18px}
.editorial__body h2{margin-bottom:22px}
.editorial__body p{color:var(--ink-soft)}
.editorial__body .link-u{margin-top:14px}

/* Services trio */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,52px)}
.trio__item{text-align:center}
.trio__media{aspect-ratio:1/1;background:var(--stone);overflow:hidden;margin-bottom:26px}
.trio__media img,.trio__media .placeholder{width:100%;height:100%;object-fit:cover}
.trio__item h3{font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px}
.trio__item p{color:var(--muted);font-size:14px;max-width:34ch;margin:0 auto 16px}

/* Quote band */
.band{background:var(--moss);color:#fff;text-align:center}
.band .display{max-width:22ch;margin:0 auto}
.band cite{display:block;margin-top:26px;font-style:normal;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.7}

/* Marquee strip */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:18px 0}
.strip__track{display:flex;gap:56px;white-space:nowrap;animation:marquee 38s linear infinite;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Wide CTA */
.cta-wide{position:relative;min-height:clamp(380px,52vh,620px);display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--ink)}
.cta-wide__media{position:absolute;inset:0}
.cta-wide__media img,.cta-wide__media .placeholder{width:100%;height:100%;object-fit:cover}
.cta-wide__media::after{content:"";position:absolute;inset:0;background:rgba(20,18,15,.38)}
.cta-wide__body{position:relative;z-index:2;text-align:center;color:#fff;padding:var(--gutter)}
.cta-wide__body h2{margin-bottom:20px}
.cta-wide__body p{max-width:48ch;margin:0 auto 30px;color:rgba(255,255,255,.88)}

/* ==========================================================================
   8. Footer
   ========================================================================== */
.site-footer{background:var(--ink);color:#fff;padding-top:clamp(56px,7vw,100px);overflow:hidden}
.footer-news{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);padding-bottom:clamp(44px,5vw,72px);border-bottom:1px solid rgba(255,255,255,.14)}
.footer-news h2{font-family:var(--font-display);font-size:clamp(24px,2.6vw,38px);font-weight:300;max-width:18ch}
.footer-news p{color:rgba(255,255,255,.6);font-size:14px;max-width:44ch}
.news-form{display:flex;gap:0;border-bottom:1px solid rgba(255,255,255,.34);max-width:460px}
.news-form input{flex:1;background:none;border:0;color:#fff;padding:12px 0;font:inherit;font-size:14px}
.news-form input:focus{outline:0}
.news-form input::placeholder{color:rgba(255,255,255,.42)}
.news-form button{font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:0 4px}
.footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(22px,3vw,48px);padding:clamp(44px,5vw,72px) 0}
.footer-cols h3{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:20px}
.footer-cols a{font-size:13px;color:rgba(255,255,255,.82);display:inline-block;padding:6px 0;border-bottom:1px solid transparent}
.footer-cols a:hover{border-bottom-color:rgba(255,255,255,.6)}
.footer-base{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;padding-bottom:34px;font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.42)}
.footer-mark{
  font-family:var(--font-display);font-weight:300;text-transform:uppercase;
  font-size:clamp(64px,17.5vw,300px);line-height:.82;letter-spacing:.06em;text-indent:.06em;
  color:#fff;opacity:.96;text-align:center;padding:0 var(--gutter);
  margin-bottom:-.14em;user-select:none;
}

/* ==========================================================================
   9. WooCommerce — shared
   ========================================================================== */
.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  list-style:none;margin:0 0 24px;padding:16px 20px;border:1px solid var(--line);
  background:var(--stone);font-size:13px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
}
.woocommerce-error{border-color:#C6493B;color:#8E2B20;background:#FBF0EE}
.woocommerce-message .button,.woocommerce-info .button{order:2;font-size:11px;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid currentColor}

/* Archive header ----------------------------------------------------------- */
.shop-hero{position:relative;height:clamp(300px,62vh,640px);overflow:hidden;background:var(--stone)}
.shop-hero img,.shop-hero .placeholder{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shop-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,15,.30),rgba(20,18,15,.18) 60%,rgba(20,18,15,.42))}
.shop-hero__body{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:0 var(--gutter)}
.shop-hero__body h1{margin-bottom:14px}
.shop-hero__body p{max-width:52ch;color:rgba(255,255,255,.9)}

.shop-subnav{
  position:sticky;top:var(--header-h);z-index:60;background:var(--paper);
  border-bottom:1px solid var(--line);
}
.shop-subnav__inner{display:flex;gap:clamp(16px,2vw,30px);overflow-x:auto;padding:16px var(--gutter);scrollbar-width:none}
.shop-subnav__inner::-webkit-scrollbar{display:none}
.shop-subnav a{font-size:12px;letter-spacing:.1em;white-space:nowrap;color:var(--muted);padding-bottom:2px;border-bottom:1px solid transparent}
.shop-subnav a:hover{color:var(--ink)}
.shop-subnav a.is-current{color:var(--ink);font-weight:500;border-bottom-color:var(--ink)}

.shop-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px var(--gutter);border-bottom:1px solid var(--line);
  font-size:12px;letter-spacing:.06em;
}
.shop-toolbar .woocommerce-result-count{margin:0;color:var(--ink-soft)}
.shop-toolbar .woocommerce-ordering{margin:0}
.shop-toolbar select{
  border:0;background:none;font:inherit;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid var(--ink);padding:2px 22px 3px 0;cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2314120F' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right center;background-size:11px;
}

/* Product grid ------------------------------------------------------------- */
ul.products{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-left:1px solid var(--line);
}
/* WooCommerce ships float-era clearfix pseudo-elements on this list
   (`content:" ";display:table`). In a grid container they are not decoration —
   they become grid ITEMS, so ::before silently eats the first cell and pushes
   every product one place along, and ::after eats another at the end.

   `!important` is deliberate: Woo's rule is `.woocommerce ul.products::before`,
   which outranks a plain `ul.products::before`, and its stylesheet may enqueue
   after the theme's. Matching that selector exactly would leave the fix hostage
   to load order. */
ul.products::before,ul.products::after,
.woocommerce ul.products::before,.woocommerce ul.products::after{
  content:none!important;display:none!important;
}

/* A single product in a four-column grid is a lone quarter-width card with
   three empty cells beside it. Centre and frame it instead.

   `.products--single` is added server-side by monty_loop_single_class(). It
   replaced `:has(> li.product:only-child)`, which Safari applied to descendant
   rules but not to the grid container's own `grid-template-columns` — an
   iPhone kept showing a half-width card in a two-column grid. */
ul.products--single{
  grid-template-columns:minmax(0,min(460px,100%));
  justify-content:center;border-left:0;
}
ul.products--single > li.product{border:1px solid var(--line)}
/* Left-aligned card text is right in a ROW of cards — the eye scans a column of
   shared left edges. A single centred card has no row to align to, so the text
   just hugs one side of a symmetrical object. Centre it while there is one. */
ul.products--single .product-card__body{text-align:center}
ul.products li.product{
  position:relative;margin:0;padding:0;list-style:none;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--paper);
}
.product-card{display:block;position:relative}
.product-card__media{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--stone)}
.product-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .55s var(--ease),transform 1.3s var(--ease)}
.product-card__media img.alt{opacity:0}
.product-card:hover .product-card__media img.main{opacity:0}
.product-card:hover .product-card__media img.alt{opacity:1}
.product-card:hover .product-card__media img{transform:scale(1.03)}
.product-card__flag{
  position:absolute;top:14px;left:14px;z-index:2;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
  background:rgba(248,247,244,.92);padding:5px 10px;
}
.product-card__body{padding:20px clamp(14px,1.4vw,24px) 26px}
.product-card__title{font-size:14px;line-height:1.45;margin-bottom:8px;color:var(--ink)}
.product-card__price{font-size:13px;color:var(--ink-soft)}
.product-card__price del{color:var(--muted);margin-right:8px}
.product-card__price ins{text-decoration:none;color:var(--kraft)}
.product-card__quick{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  background:var(--ink);color:#fff;text-align:center;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:14px 10px;
  opacity:0;transform:translateY(100%);transition:opacity .35s var(--ease),transform .35s var(--ease);
}
li.product:hover .product-card__quick{opacity:1;transform:none}
li.product.editorial-cell{grid-column:span 2;border-bottom:1px solid var(--line)}
li.product.editorial-cell .product-card__media{aspect-ratio:2/1}

.woocommerce-pagination{padding:clamp(40px,5vw,72px) var(--gutter);text-align:center}
.woocommerce-pagination ul{display:inline-flex;gap:6px;align-items:center}
.woocommerce-pagination a,.woocommerce-pagination span{
  display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;
  font-size:12px;border:1px solid transparent;
}
.woocommerce-pagination span.current{border-color:var(--ink)}
.woocommerce-pagination a:hover{border-color:var(--line-strong)}

/* ==========================================================================
   10. Single product
   ========================================================================== */
.pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,38%);align-items:start}
/* Gallery carousel --------------------------------------------------------
   No-JS: the track wraps, so slides stack in a column exactly as before.
   With JS: `gal--multi` switches it to a scroll-snap carousel and shows the
   arrows and thumbnail rail. Native scroll does the swiping, so the JS only
   moves the scroll position and keeps the controls in step. Position is
   announced to screen readers via a .screen-reader-text live region; there is
   deliberately no visible counter. */
.pdp__gallery{background:var(--stone)}
.gal__viewport{position:relative}
.gal__track{display:flex;flex-wrap:wrap;gap:2px}
.gal__slide{margin:0;flex:0 0 100%;aspect-ratio:1/1;background:var(--stone);overflow:hidden}
.gal__slide img{width:100%;height:100%;object-fit:cover;display:block}
.gal__slide--contain img{object-fit:contain}
.gal__slide .pdp__ph{width:100%;height:100%}

.gal--multi .gal__track{
  flex-wrap:nowrap;gap:0;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.gal--multi .gal__track::-webkit-scrollbar{display:none}
.gal--multi .gal__slide{scroll-snap-align:center;scroll-snap-stop:always}

.gal__nav,.gal__thumbs{display:none}
.gal--multi .gal__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(248,247,244,.88);color:var(--ink);
  transition:opacity .2s ease,background .2s ease;
}
.gal--multi .gal__nav:hover{background:var(--paper)}
.gal--multi .gal__nav[disabled]{opacity:.25;cursor:default}
.gal__nav svg{width:15px;height:15px}
.gal__nav--prev{left:16px}
.gal__nav--next{right:16px}

.gal--multi .gal__thumbs{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:2px;margin-top:2px;background:var(--stone);
}
.gal__thumb{
  position:relative;padding:0;border:0;background:var(--stone);cursor:pointer;
  aspect-ratio:1/1;overflow:hidden;opacity:.45;transition:opacity .25s ease;
}
.gal__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gal__thumb:hover,.gal__thumb.is-current{opacity:1}
.gal__thumb.is-current::after{content:"";position:absolute;inset:0;border:1px solid var(--ink);pointer-events:none}
.gal__nav:focus-visible,.gal__thumb:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Touch does the swiping; arrows are for pointers. */
@media (hover:none){ .gal--multi .gal__nav{display:none} }
@media (prefers-reduced-motion:reduce){ .gal--multi .gal__track{scroll-behavior:auto} }
.pdp__aside{position:sticky;top:calc(var(--header-h) + 22px);padding:clamp(30px,4vw,66px) var(--gutter)}
.pdp__eyebrow{display:block;margin-bottom:14px}
.pdp__title{font-family:var(--font-display);font-weight:300;font-size:clamp(26px,2.5vw,40px);line-height:1.12;margin-bottom:14px}
.pdp__price{font-size:16px;margin-bottom:6px}
.pdp__price del{color:var(--muted);margin-right:10px}
.pdp__price ins{text-decoration:none}
.pdp__tax{font-size:12px;color:var(--muted);margin-bottom:26px}
.pdp__excerpt{color:var(--ink-soft);font-size:14px;margin-bottom:26px;max-width:46ch}
.pdp__aside .variations{width:100%;margin-bottom:20px;border-collapse:collapse}
.pdp__aside .variations th{text-align:left;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:400;color:var(--muted);padding:0 0 8px}
.pdp__aside .variations td{padding:0 0 18px}
.pdp__aside select{
  width:100%;border:1px solid var(--line-strong);background:var(--paper);padding:14px 16px;font:inherit;font-size:14px;
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2314120F' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:11px;
}
/* Quantity box.

   WooCommerce ships `.woocommerce .quantity .qty{width:3.631em}` — three
   classes, so it outranks a plain `.pdp__aside .quantity input` (two classes +
   a type) and silently won. On phones the wrapper stretched to 100% while the
   input stayed ~58px at the left, so only the left third of the visible box
   opened the keyboard. Every rule below names `.qty` so the theme outranks it,
   and the input is sized to fill the wrapper: the whole box IS the input. */
.pdp__aside .quantity{display:inline-flex;align-items:stretch;border:1px solid var(--line-strong);margin:0 0 16px}
.pdp__aside .quantity input.qty{
  width:72px;min-height:52px;border:0;background:none;
  text-align:center;font:inherit;padding:14px 4px;cursor:text;
}
.pdp__aside .quantity input.qty:focus{outline:0}
.pdp__aside .quantity input.qty::-webkit-outer-spin-button,
.pdp__aside .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pdp__aside form.cart{margin:0 0 22px}
.pdp__aside .single_add_to_cart_button{
  display:flex;width:100%;align-items:center;justify-content:center;gap:10px;min-height:56px;
  background:var(--ink);color:#fff;border:1px solid var(--ink);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.pdp__aside .single_add_to_cart_button:hover{background:transparent;color:var(--ink)}
.pdp__aside .single_add_to_cart_button.disabled{opacity:.4;cursor:not-allowed}
.pdp__assure{display:grid;gap:14px;border-top:1px solid var(--line);padding-top:24px;margin-top:6px}
.pdp__assure li{display:grid;grid-template-columns:20px 1fr;gap:12px;font-size:13px;color:var(--ink-soft);line-height:1.5}
.pdp__assure svg{width:18px;height:18px;stroke:var(--kraft);fill:none;stroke-width:1.2;margin-top:2px}

.pdp__details{padding:clamp(30px,4vw,60px) var(--gutter) clamp(50px,6vw,90px);max-width:840px}
.acc{border-bottom:1px solid var(--line)}
.acc__btn{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;padding:22px 0;font-size:14px;letter-spacing:.04em;text-align:left}
.acc__btn svg{width:13px;height:13px;flex:0 0 auto;transition:transform var(--dur) var(--ease)}
.acc.is-open .acc__btn svg{transform:rotate(45deg)}
.acc__panel{max-height:0;overflow:hidden;transition:max-height var(--dur) var(--ease)}
.acc__panel>div{padding:0 0 26px;color:var(--ink-soft);font-size:14px}
.acc__panel table{width:100%;border-collapse:collapse;font-size:14px}
.acc__panel th,.acc__panel td{text-align:left;padding:9px 0;border-bottom:1px solid var(--line);font-weight:400}
.acc__panel th{color:var(--muted);width:36%}

.related,.upsells{padding:clamp(50px,6vw,96px) 0 0;border-top:1px solid var(--line)}
.related>h2,.upsells>h2{
  text-align:center;font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  margin:0 0 clamp(28px,3vw,48px);
}

/* ==========================================================================
   11. Cart, checkout, account, forms
   ========================================================================== */
.page-shell{padding:clamp(40px,5vw,80px) 0 clamp(60px,7vw,110px)}
.page-head{text-align:center;margin-bottom:clamp(30px,4vw,56px)}
.page-head h1{margin-bottom:12px}
.woocommerce table.shop_table{width:100%;border-collapse:collapse;font-size:14px}
.woocommerce table.shop_table th{
  text-align:left;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  font-weight:400;padding:0 12px 14px 0;border-bottom:1px solid var(--line);
}
.woocommerce table.shop_table td{padding:22px 12px 22px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.woocommerce table.shop_table img{width:84px;background:var(--stone)}
.woocommerce table.cart td.actions{padding-top:26px;border:0}
.cart-collaterals{margin-top:clamp(30px,4vw,56px);display:flex;justify-content:flex-end}
.cart_totals{width:min(430px,100%)}
.cart_totals h2{font-size:11px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:18px}
.wc-proceed-to-checkout{margin-top:22px}
.woocommerce .button,.woocommerce button.button,.woocommerce input.button,.woocommerce a.button{
  display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;
  background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:0;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.woocommerce .button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,.woocommerce a.button:hover{background:transparent;color:var(--ink)}
.woocommerce .button.alt,.woocommerce button.button.alt{background:var(--ink);color:#fff}
.checkout-columns{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:clamp(30px,5vw,80px);align-items:start}
#order_review,.woocommerce-checkout-review-order{background:var(--stone);padding:clamp(24px,2.6vw,38px);position:sticky;top:calc(var(--header-h) + 20px)}
h3#order_review_heading{font-size:11px;letter-spacing:.22em;text-transform:uppercase;margin:0 0 20px}
.woocommerce form .form-row{display:grid;margin:0 0 18px}
.woocommerce form .form-row label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.select2-container .select2-selection--single{
  border:1px solid var(--line-strong);background:var(--paper);padding:14px 16px;font:inherit;font-size:14px;border-radius:0;height:auto;
}
.woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row textarea:focus{outline:0;border-color:var(--ink)}
.woocommerce-billing-fields h3,.woocommerce-additional-fields h3,.woocommerce-shipping-fields h3{font-size:11px;letter-spacing:.22em;text-transform:uppercase;margin:0 0 22px}
#payment ul.payment_methods{list-style:none;padding:0;margin:0 0 20px;border-bottom:1px solid var(--line-strong)}
#payment ul.payment_methods li{padding:14px 0;border-top:1px solid var(--line-strong);font-size:14px}
#payment .place-order{padding-top:20px}

/* Editor / page content ---------------------------------------------------- */
.entry-content{font-size:16px;line-height:1.8;color:var(--ink-soft)}
.entry-content h2{font-family:var(--font-display);font-size:clamp(26px,2.6vw,38px);font-weight:300;margin:1.6em 0 .5em;color:var(--ink)}
.entry-content h3{font-size:13px;letter-spacing:.18em;text-transform:uppercase;margin:2em 0 .8em;color:var(--ink)}
.entry-content a{border-bottom:1px solid var(--line-strong)}
.entry-content blockquote{margin:2em 0;padding-left:26px;border-left:1px solid var(--kraft);font-family:var(--font-display);font-size:24px;line-height:1.4;color:var(--ink)}
.entry-content img{margin:2em 0}

.post-card{display:block;margin-bottom:clamp(30px,4vw,60px)}
.post-card__media{aspect-ratio:3/2;background:var(--stone);overflow:hidden;margin-bottom:18px}
.post-card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.post-card:hover .post-card__media img{transform:scale(1.04)}
.post-card h2{font-family:var(--font-display);font-size:26px;font-weight:300;margin-bottom:8px}
.post-card time{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* Reveal on scroll --------------------------------------------------------- */
.monty-js .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.monty-js .reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .monty-js .reveal{opacity:1;transform:none}
}

/* ==========================================================================
   12. Responsive
   ========================================================================== */
@media(max-width:1200px){
  ul.products{grid-template-columns:repeat(3,1fr)}
  li.product.editorial-cell{grid-column:span 3}
}
@media(max-width:1024px){
  :root{--header-h:64px}
  .pdp{grid-template-columns:1fr}
  .pdp__aside{position:static;border-top:1px solid var(--line)}
  .checkout-columns{grid-template-columns:1fr}
  #order_review,.woocommerce-checkout-review-order{position:static}
  .footer-news{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .header-note{display:none}
  .brand a{font-size:19px;letter-spacing:.34em;text-indent:.34em}
  .menu-label{display:none}
  .editorial,.editorial--flip .editorial__media{grid-template-columns:1fr;order:0}
  .editorial{gap:26px}
  /* Stacked on a phone, the editorial body has no image column to share a left
     edge with, and it sits between two centred sections. Centre it there only;
     the desktop two-column layout keeps its left alignment. */
  .editorial__body{text-align:center;margin-left:auto;margin-right:auto}
  .editorial__body p{margin-left:auto;margin-right:auto}
  .trio{grid-template-columns:1fr;gap:44px}
  .tiles{grid-template-columns:1fr}
  .tiles--single .tile{aspect-ratio:4/5}
  ul.products{grid-template-columns:repeat(2,1fr)}
  ul.products--single{grid-template-columns:minmax(0,1fr)}
  li.product.editorial-cell{grid-column:span 2}
  li.product.editorial-cell .product-card__media{aspect-ratio:3/2}
  .product-card__quick{display:none}
  .hero{height:88svh}
  .footer-cols{grid-template-columns:1fr;gap:8px}
  .footer-cols>div{border-bottom:1px solid rgba(255,255,255,.12);padding:18px 0}
  .woocommerce table.shop_table img{width:60px}
}
@media(max-width:520px){
  .footer-mark{font-size:19vw}
  .hero__cta{flex-direction:column;width:100%}
  .hero__cta .btn{width:100%}
}

.panel-links ul{display:grid;gap:14px}
.panel-links li{list-style:none}

/* Checkout grid (WooCommerce's own markup) --------------------------------- */
.woocommerce-checkout form.checkout{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  gap:clamp(24px,4vw,72px);align-items:start;
}
.woocommerce-checkout form.checkout #customer_details{grid-column:1;grid-row:1 / span 2}
.woocommerce-checkout form.checkout #order_review_heading{grid-column:2;grid-row:1}
.woocommerce-checkout form.checkout #order_review{grid-column:2;grid-row:2}
#customer_details .col-1,#customer_details .col-2{width:auto;float:none;margin:0 0 30px}
.woocommerce-cart-form__contents td.product-name a{font-size:14px}
@media(max-width:1024px){
  .woocommerce-checkout form.checkout{grid-template-columns:1fr}
  .woocommerce-checkout form.checkout #customer_details,
  .woocommerce-checkout form.checkout #order_review_heading,
  .woocommerce-checkout form.checkout #order_review{grid-column:1;grid-row:auto}
}

/* ==========================================================================
   13. Phone refinements
   ========================================================================== */
html{scroll-padding-top:calc(var(--header-h) + 12px)}
*{-webkit-tap-highlight-color:rgba(20,18,15,.06)}
.hdr-mobile-menu{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-left:-11px}

/* Sticky buy bar — phones only, appears once the real button scrolls away */
.buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  display:none;align-items:center;gap:14px;
  background:var(--paper);border-top:1px solid var(--line);
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));
  transform:translateY(115%);transition:transform .35s var(--ease);
  box-shadow:0 -10px 28px rgba(20,18,15,.09);
}
.buybar.is-in{transform:none}
.buybar__meta{flex:1 1 auto;min-width:0}
.buybar__name{display:block;font-size:12px;line-height:1.3;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar__price{display:block;font-size:14px;margin-top:2px}
.buybar__price del{display:none}
.buybar button{
  flex:0 0 auto;min-height:48px;padding:0 26px;background:var(--ink);color:#fff;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
}

@media(max-width:820px){

  :root{--header-h:60px}

  .announce{font-size:10px;letter-spacing:.12em;padding:9px 14px}

  /* Header: menu left, wordmark centred, search + bag right */
  .site-header__inner{gap:6px}
  .header-note{display:flex;align-items:center}
  .header-note>.icon,.header-note>span,.header-note>a{display:none}
  .hdr-mobile-menu{display:inline-flex}
  .header-actions{gap:0}
  .header-actions .account-link,.header-actions .menu-toggle{display:none}
  .header-actions>a,.header-actions>button{width:44px;height:44px;justify-content:center}
  .cart-btn .cart-count{transform:translate(9px,-10px)}
  .brand a{font-size:18px;letter-spacing:.3em;text-indent:.3em;padding:13px 0;margin:-13px 0}
  .shop-toolbar select{min-height:44px;padding-top:0;padding-bottom:0}
  .shop-toolbar{padding-block:8px}

  /* Tap targets at or above 44px */
  .shop-subnav__inner{padding:4px var(--gutter);-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
  .shop-subnav a{display:inline-flex;align-items:center;min-height:44px}
  .shop-subnav{box-shadow:0 1px 0 0 var(--line)}

  /* Toolbar: count left, plain-language sort right — no shouty caps at 16px */
  .shop-toolbar{background:var(--paper);padding:8px var(--gutter);gap:10px}
  .shop-toolbar .woocommerce-result-count{font-size:12px}
  .shop-toolbar select{
    text-transform:none;letter-spacing:.01em;font-size:16px;min-height:44px;
    max-width:56vw;padding-right:20px;
  }

  /* Variation pickers go full width instead of a cramped two-column table */
  .pdp__aside .variations,
  .pdp__aside .variations tbody,
  .pdp__aside .variations tr,
  .pdp__aside .variations th,
  .pdp__aside .variations td{display:block;width:100%}
  .pdp__aside .variations th{padding:0 0 8px}
  .pdp__aside .variations td{padding:0 0 18px}
  .pdp__aside .quantity{width:100%}
  .pdp__aside .quantity input.qty{width:100%}

  /* Search sits before the bag on phones */
  .header-actions .cart-btn{order:2}
  .link-u{padding-top:11px;padding-bottom:11px}
  .footer-cols a{padding:11px 0}
  .panel-links a,.panel-links li a{padding:11px 0}
  .nav-list>li>a,.nav-list__toggle{padding:21px 0;font-size:24px}
  .sub-list li a{padding:13px 0}
  .acc__btn{padding:24px 0}
  .woocommerce-pagination a,.woocommerce-pagination span{min-width:44px;height:44px}

  /* 16px stops iOS zooming the page on focus */
  input,select,textarea,
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row textarea,
  .pdp__aside select,.shop-toolbar select,.news-form input{font-size:16px}
  /* Full-width box on phones, so the number reads from the left like the size
     select above it rather than floating in the middle of a wide field. The
     whole box is still the input — only the text alignment changes. */
  .pdp__aside .quantity input.qty{font-size:16px;padding:15px 16px;min-height:56px;text-align:left}

  /* Shorter page, same rhythm */
  .section{padding:clamp(48px,11vw,86px) 0}
  .section--tight{padding:clamp(40px,9vw,70px) 0}
  .section__head{margin-bottom:26px}
  .d1{font-size:clamp(38px,10.4vw,60px)}
  .hero__sub{margin-bottom:26px}
  .tile{aspect-ratio:3/4}
  .editorial__media{aspect-ratio:4/5}
  .trio__media{aspect-ratio:4/3;margin-bottom:20px}
  .trio{gap:38px}
  .editorial__body h2{margin-bottom:16px}
  .pdp__aside{padding-top:26px;padding-bottom:26px}
  .gal__track{gap:1px}
  .gal--multi .gal__thumbs{gap:1px;margin-top:1px}
  .pdp__details{padding-top:0}
  .related,.upsells{padding-top:46px}
  .site-footer{padding-top:44px}
  .footer-news{padding-bottom:34px}
  .footer-mark{font-size:20vw}

  /* Product cards sit two-up; keep the type from crowding */
  .product-card__body{padding:14px 12px 20px}
  .product-card__title{font-size:13px}
  .product-card__price{font-size:12px}

  /* Cart and checkout tables read as stacked rows, not a squeezed grid */
  .woocommerce table.shop_table td{padding:16px 8px 16px 0}
  .cart-collaterals{justify-content:stretch}
  .cart_totals{width:100%}

  body.single-product .buybar,.buybar[data-force]{display:flex}
  body.single-product .site-footer{padding-bottom:70px}
}

@media(max-width:400px){
  .buybar{gap:10px}
  .buybar button{padding:0 18px;letter-spacing:.14em}
}

/* ==========================================================================
   14. Logged-in admin bar + hero fit
   ========================================================================== */
/* Keep the site header clear of WordPress's own admin bar. */
body.admin-bar .site-header{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .site-header{top:46px}
}

/* The hero fills the viewport minus whatever fixed chrome sits above it
   (announcement bar, and the admin bar when logged in). --hero-trim is
   measured in monty.js. */
.hero{height:calc(100svh - var(--hero-trim,0px))}
@media(max-width:820px){
  .hero{height:calc(88svh - var(--hero-trim,0px))}
}

/* Hero pages: the header stays in flow below the announcement bar and the
   hero tucks up underneath it, rather than being pinned over the top of it. */
body.has-hero .site-header{
  position:sticky;left:auto;right:auto;
  margin-bottom:calc(var(--header-h) * -1);
}

/* Panels and the search overlay clear the WordPress admin bar too. */
body.admin-bar .panel,
body.admin-bar .search-overlay{top:32px;height:calc(100% - 32px)}
@media screen and (max-width:782px){
  body.admin-bar .panel,
  body.admin-bar .search-overlay{top:46px;height:calc(100% - 46px)}
}

/* ==========================================================================
   15. Content pages (Wide editorial template + policy/FAQ pages)
   ========================================================================== */
.entry-content--wide{font-size:inherit;line-height:inherit;color:inherit}
/* The page header and the first content section each bring their own padding;
   collapse the pair so the gap reads as one interval, not two. */
.page-head--wide{padding-bottom:0}
.page-head--wide .section__head{margin-bottom:0}
.entry-content--wide>.section:first-child,
.entry-content--wide>section:first-child{padding-top:clamp(30px,3.4vw,54px)}

/* A readable measure inside a full-width page */
.prose{max-width:70ch;margin:0 auto}
.prose p{font-size:16px;line-height:1.8;color:var(--ink-soft)}
.prose h2{font-family:var(--font-display);font-weight:300;font-size:clamp(24px,2.4vw,34px);color:var(--ink);margin:1.8em 0 .6em;letter-spacing:-.01em}
.prose h3{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin:2.2em 0 .9em}
.prose ul{margin:0 0 1.4em;padding:0}
.prose ul li{position:relative;padding-left:22px;margin-bottom:9px;color:var(--ink-soft);line-height:1.7}
.prose ul li::before{content:"";position:absolute;left:2px;top:11px;width:6px;height:1px;background:var(--kraft)}
.prose a{border-bottom:1px solid var(--line-strong)}
.prose a:hover{border-bottom-color:var(--ink)}
.prose>p:first-child{font-size:18px;line-height:1.7;color:var(--ink)}

/* Fact rows — shipping tables, spec lists, contact details */
.factlist{display:grid;gap:0;margin:0 0 2em;border-top:1px solid var(--line)}
.factlist>div{display:grid;grid-template-columns:minmax(150px,26%) 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.factlist dt,.factlist .k{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0}
.factlist dd,.factlist .v{margin:0;font-size:15px;color:var(--ink-soft);line-height:1.6}
@media(max-width:640px){
  .factlist>div{grid-template-columns:1fr;gap:6px}
}

/* Three-up cards for contact routes / policy summaries */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:0 0 clamp(30px,4vw,56px)}
.cards>div{background:var(--paper);padding:clamp(24px,2.6vw,40px)}
.cards h3{font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin:0 0 14px}
.cards p{font-size:14px;color:var(--ink-soft);margin:0 0 12px;line-height:1.65}
.cards .link-u{font-size:11px}
@media(max-width:820px){.cards{grid-template-columns:1fr}}

/* Something the user still has to supply */
.todo{
  display:inline-block;background:#FBF3E8;border:1px dashed var(--kraft);color:#7A4F22;
  padding:1px 8px;font-size:12px;letter-spacing:.04em;border-radius:2px;
}

/* Callout band inside page content */
.callout{background:var(--stone);padding:clamp(26px,3vw,44px);margin:2.4em 0}
.callout p:last-child{margin-bottom:0}
.callout h3{margin-top:0}

/* FAQ accordions reuse .acc from the product page; give them a max measure */
.faq{max-width:860px;margin:0 auto}

/* ==========================================================================
   16. Contact form
   ========================================================================== */
.mform{max-width:760px;margin:0 auto}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.mform__trap{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.mform__form{display:grid;gap:clamp(18px,2vw,26px)}
.mform__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2vw,26px)}
.mform__field{display:grid}
.mform__field label{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  margin-bottom:9px;
}
.mform__field label span{text-transform:none;letter-spacing:.02em;font-size:12px;opacity:.75}
.mform__field input,
.mform__field textarea,
.mform__field select{
  border:1px solid var(--line-strong);background:var(--paper);color:var(--ink);
  padding:14px 16px;font:inherit;font-size:15px;border-radius:0;width:100%;
  transition:border-color .3s var(--ease);
}
.mform__field textarea{resize:vertical;min-height:150px;line-height:1.6}
.mform__field select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2314120F' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:11px;
}
.mform__field input:focus,
.mform__field textarea:focus,
.mform__field select:focus{outline:0;border-color:var(--ink)}
.mform__field input::placeholder,
.mform__field textarea::placeholder{color:var(--line-strong)}

.mform__foot{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:4px}
.mform__foot .btn{min-width:200px}
.mform__fine{margin:0;font-size:12px;color:var(--muted)}

.mform__error{
  background:#FBF0EE;border:1px solid #E3B7AF;color:#8E2B20;
  padding:14px 18px;font-size:14px;margin:0 0 22px;
}

.mform__done{border:1px solid var(--line);background:var(--stone);padding:clamp(30px,3.4vw,52px);text-align:center}
.mform__done h3{font-family:var(--font-display);font-weight:300;font-size:clamp(22px,2.2vw,32px);margin-bottom:12px}
.mform__done p{color:var(--ink-soft);max-width:52ch;margin:0 auto 20px;font-size:15px;line-height:1.7}

@media(max-width:820px){
  .mform__row{grid-template-columns:1fr}
  .mform__foot{flex-direction:column;align-items:stretch;gap:14px}
  .mform__foot .btn{width:100%}
  .mform__fine{text-align:center}
}

/* ==========================================================================
   17. Variable products
   ========================================================================== */
/* WooCommerce paints .button.alt.disabled in its own accent; keep the
   add-to-bag button on brand in every state, including the "choose a size
   first" state on a variable product. */
.woocommerce div.product .pdp__aside .single_add_to_cart_button,
.woocommerce div.product .pdp__aside .single_add_to_cart_button.alt,
.woocommerce div.product .pdp__aside .single_add_to_cart_button.alt.disabled,
.woocommerce div.product .pdp__aside .single_add_to_cart_button.disabled,
.woocommerce div.product .pdp__aside .single_add_to_cart_button:disabled,
.woocommerce div.product .pdp__aside .single_add_to_cart_button:disabled[disabled]{
  background:var(--ink);
  color:#fff;
  border:1px solid var(--ink);
  border-radius:0;
}
.woocommerce div.product .pdp__aside .single_add_to_cart_button.alt:hover{
  background:transparent;
  color:var(--ink);
}
.woocommerce div.product .pdp__aside .single_add_to_cart_button.disabled,
.woocommerce div.product .pdp__aside .single_add_to_cart_button.alt.disabled,
.woocommerce div.product .pdp__aside .single_add_to_cart_button:disabled{
  opacity:.32;
  cursor:not-allowed;
}
.woocommerce div.product .pdp__aside .single_add_to_cart_button.disabled:hover{
  background:var(--ink);
  color:#fff;
}

/* Price range on a variable product, and the resolved single price. */
.pdp__price .woocommerce-Price-amount{white-space:nowrap}
.woocommerce-variation-price{margin:0 0 18px}
.woocommerce-variation-price .price{font-size:16px;color:var(--ink)}
.woocommerce-variation-availability{font-size:13px;color:var(--muted);margin-bottom:12px}
.woocommerce-variation-description{font-size:14px;color:var(--ink-soft);margin-bottom:14px}

/* "Clear" link under the size picker */
.pdp__aside .reset_variations{
  display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line-strong);margin-bottom:16px;
}
.pdp__aside .reset_variations:hover{color:var(--ink)}

/* WooCommerce colours the resolved variation price with its own accent —
   keep it in ink like every other price on the site. */
.woocommerce div.product .pdp__aside .woocommerce-variation-price .price,
.woocommerce div.product .pdp__aside .woocommerce-variation-price span.price,
.woocommerce div.product .pdp__aside .woocommerce-variation-price .price .amount,
.woocommerce div.product .pdp__aside .woocommerce-variation-price .price bdi{
  color:var(--ink);
  font-size:17px;
  font-weight:400;
}
.woocommerce div.product .pdp__aside .woocommerce-variation-price del,
.woocommerce div.product .pdp__aside .woocommerce-variation-price del .amount{
  color:var(--muted);
}

/* The headline price updates in place when a size is chosen (monty.js), so
   WooCommerce's separate variation price below the picker is a duplicate.
   Availability and the variation description stay. */
.pdp__aside .woocommerce-variation-price{display:none}
.pdp__aside .pdp__price .price,
.pdp__aside .pdp__price .amount,
.pdp__aside .pdp__price bdi{
  color:var(--ink);
  font-size:inherit;
  font-weight:inherit;
}
.pdp__aside .pdp__price del,
.pdp__aside .pdp__price del .amount{color:var(--muted)}
.pdp__aside .pdp__price ins{text-decoration:none}