/* ============================================================
   Luxury Home Collections
   Light, warm, editorial. Catalogue-first architecture.
   ============================================================ */

:root{
  --paper:   #fcfbf9;
  --paper-2: #f5f2ec;
  --paper-3: #ece7de;

  --ink:   #1b1a18;
  --body:  #4c4842;
  --muted: #8a857c;

  --line:   #e4ded4;
  --line-2: #cfc7ba;

  --brass:   #9a7b45;
  --brass-2: #b8934f;
  --brass-t: #f3ede2;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --gut: clamp(18px, 4.5vw, 60px);
  --maxw: 1340px;
  /* top panel 42 + logo bar 114 + search 72 + type strip 50 */
  --headh: 278px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow: 0 1px 2px rgba(27,26,24,.04), 0 12px 32px rgba(27,26,24,.08);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--sans); font-size:16px; font-weight:300; line-height:1.72;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:400; color:var(--ink); }
p{ margin:0 0 1.1em; }
button{ font-family:inherit; }

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

.skip{ position:absolute; left:-9999px; top:0; z-index:400; background:var(--brass); color:#fff; padding:12px 20px; }
.skip:focus{ left:0; }
::selection{ background:var(--brass); color:#fff; }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

/* ---------- type ---------- */
.eyebrow{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--brass); font-weight:500; margin:0 0 18px; }
.display{ font-family:var(--serif); font-size:clamp(2rem,4.4vw,3.4rem); line-height:1.12; font-weight:300; margin:0 0 22px; }
.display em{ font-style:italic; color:var(--brass); }
.lede{ font-size:clamp(1rem,1.4vw,1.14rem); color:var(--body); line-height:1.78; max-width:58ch; }
.section-head{ max-width:62ch; margin-bottom:clamp(40px,5vw,68px); }
.section-head--center{ margin-inline:auto; text-align:center; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  padding:16px 32px; border:1px solid transparent; cursor:pointer;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .3s var(--ease), box-shadow .4s var(--ease);
}
.btn--solid{ background:var(--ink); color:var(--paper); }
.btn--solid:hover{ background:var(--brass); transform:translateY(-2px); box-shadow:var(--shadow); }
.btn--ghost{ border-color:var(--line-2); color:var(--ink); background:transparent; }
.btn--ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn--full{ width:100%; }

/* ============================================================
   HEADER
   ============================================================ */

.nav{ position:fixed; inset:0 0 auto 0; z-index:150; background:var(--paper); }

/* ---------- top panel: socials | address + phone | about + enquiry ---------- */
.util{
  border-bottom:1px solid var(--line); background:var(--paper-2);
  overflow:hidden; max-height:42px;
  transition:max-height .4s var(--ease), opacity .3s var(--ease);
}
.nav.is-stuck .util{ max-height:0; opacity:0; }
.util__inner{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gut);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; height:42px;
}
.util__social{ display:flex; gap:14px; justify-self:start; }
.util__social a{ width:16px; height:16px; color:var(--muted); transition:color .3s var(--ease); }
.util__social svg{ width:100%; height:100%; display:block; }
.util__social a:hover{ color:var(--brass); }

.util__mid{
  margin:0; justify-self:center; display:flex; align-items:center; gap:12px;
  font-size:11.5px; letter-spacing:.07em; color:var(--ink); white-space:nowrap;
}
.util__mid i{ width:3px; height:3px; border-radius:50%; background:var(--line-2); flex:none; }
.util__mid a{ color:var(--ink); }
.util__mid a:hover{ color:var(--brass); }

.util__right{ display:flex; gap:22px; justify-self:end; }
.util__right a{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  white-space:nowrap; transition:color .3s var(--ease);
}
.util__right a:hover{ color:var(--brass); }

/* ---------- main bar: menu | logo | cart ---------- */
/* `backdrop-filter` makes this a stacking context, so the dropdown's z-index
   counts only INSIDE the bar — the bar itself has to out-rank the search and
   type rows below it, or those paint over the open menu and eat its clicks. */
.bar{
  position:relative; z-index:30;
  border-bottom:1px solid var(--line); background:rgba(252,251,249,.96);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.bar__inner{
  max-width:var(--maxw); margin:0 auto; padding:14px var(--gut);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px;
}
.bar__side{ display:flex; align-items:center; }
.bar__side--left{ justify-content:flex-start; }
.bar__side--right{ justify-content:flex-end; }

/* the logo is the brand lockup — it carries the name, so no wordmark beside it */
.brand{ display:flex; align-items:center; justify-self:center; }
.brand__logo{
  height:86px; width:auto; display:block;
  transition:height .35s var(--ease);
}
.nav.is-stuck .brand__logo{ height:54px; }

/* ---------- menu button + its panel ---------- */
.menuwrap{ position:relative; }
/* bridges the gap between the button and the panel, so moving the mouse down
   onto the menu doesn't count as leaving it */
.menuwrap::after{ content:""; position:absolute; top:100%; left:0; right:0; height:16px; }
.menu-btn{
  display:flex; align-items:center; gap:11px; background:none; border:0; cursor:pointer;
  padding:11px 2px; color:var(--ink); min-height:44px;
}
.menu-btn__lines{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:24px; }
.menu-btn__lines span{ display:block; height:1.5px; width:24px; background:currentColor; transition:transform .4s var(--ease), opacity .25s var(--ease); }
.menu-btn__word{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; }
.menu-btn:hover{ color:var(--brass); }
.menu-btn.is-open .menu-btn__lines span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.menu-btn.is-open .menu-btn__lines span:nth-child(2){ opacity:0; }
.menu-btn.is-open .menu-btn__lines span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.menu{
  position:absolute; top:calc(100% + 14px); left:-14px; z-index:60; width:296px;
  background:var(--paper); border:1px solid var(--line-2);
  box-shadow:0 2px 4px rgba(27,26,24,.04), 0 24px 56px rgba(27,26,24,.14);
  opacity:0; transform:translateY(-8px);
  transition:opacity .24s var(--ease), transform .24s var(--ease);
}
.menu.is-open{ opacity:1; transform:none; }
.menu[hidden]{ display:none !important; }

/* a brass hairline across the top ties it to the rest of the header */
.menu::before{
  content:""; position:absolute; top:-1px; left:-1px; right:-1px; height:2px; background:var(--brass);
}
/* the notch that points back at the button */
.menu::after{
  content:""; position:absolute; top:-7px; left:26px; width:11px; height:11px;
  background:var(--brass); transform:rotate(45deg);
}

.menu a{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:15px 24px; min-height:44px; box-sizing:border-box;
  font-family:var(--serif); font-size:1.3rem; line-height:1.3; color:var(--ink);
  border-bottom:1px solid var(--line);
  transition:color .25s var(--ease), background .25s var(--ease), padding-left .25s var(--ease);
}
.menu a:last-child{ border-bottom:0; }
.menu a::after{
  content:"\2192"; font-family:var(--sans); font-size:13px; color:var(--brass);
  opacity:0; transform:translateX(-6px);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.menu a:hover{ color:var(--brass); background:var(--paper-2); padding-left:29px; }
.menu a:hover::after{ opacity:1; transform:none; }

.menu__foot{
  display:block; padding:14px 24px 16px; background:var(--paper-2); border-top:1px solid var(--line);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.menu__foot b{ display:block; color:var(--brass); font-weight:500; margin-bottom:4px; }

/* ---------- cart ---------- */
.cart-btn{
  display:flex; align-items:center; gap:9px; background:none; border:0; cursor:pointer;
  padding:11px 2px; color:var(--ink); min-height:44px;
}
.cart-btn svg{ width:21px; height:21px; flex:none; }
.cart-btn__word{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; }
.cart-btn__count{
  font-size:10px; font-weight:500; min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:var(--line); color:var(--muted);
  display:grid; place-items:center; transition:background .3s var(--ease), color .3s var(--ease);
}
.cart-btn.has-items .cart-btn__count{ background:var(--brass); color:#fff; }
.cart-btn:hover{ color:var(--brass); }

/* ---------- search ---------- */
.searchrow{ position:relative; z-index:20; border-bottom:1px solid var(--line); background:var(--paper); }
.search{
  max-width:620px; margin:0 auto; padding:14px var(--gut);
  display:flex; align-items:center; gap:11px; position:relative;
}
.search__label{ position:absolute; left:-9999px; }
.search__icon{ width:17px; height:17px; color:var(--muted); flex:none; }
.search input{
  flex:1 1 auto; min-width:0; height:44px; border:0; border-bottom:1px solid var(--line-2);
  background:transparent; font-family:var(--sans); font-size:14px; font-weight:300; color:var(--ink);
  transition:border-color .3s var(--ease);
}
.search input::placeholder{ color:var(--muted); }
.search input:focus{ outline:none; border-bottom-color:var(--brass); }
.search__go{
  flex:none; min-height:44px; padding:0 20px; cursor:pointer;
  background:var(--ink); color:var(--paper); border:1px solid var(--ink);
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.search__go:hover{ background:var(--brass); border-color:var(--brass); }

/* ---------- product types ---------- */
.types{ position:relative; z-index:10; border-bottom:1px solid var(--line); background:var(--paper); }
.types__inner{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gut);
  display:flex; align-items:center; justify-content:center;
  gap:clamp(14px,2.6vw,38px); flex-wrap:wrap; min-height:50px;
}
.types__item{
  display:inline-flex; align-items:center; gap:7px;
  background:none; border:0; cursor:pointer; padding:13px 0; position:relative;
  font-family:var(--sans); font-size:11.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--body); transition:color .3s var(--ease);
}
.types__item::after{
  content:""; position:absolute; left:0; right:0; bottom:7px; height:1px; width:0;
  margin:0 auto; background:var(--brass); transition:width .32s var(--ease);
}
.types__item:hover{ color:var(--ink); }
.types__item:hover::after{ width:100%; }
.types__item em{ font-style:normal; font-size:9.5px; letter-spacing:.1em; color:var(--muted); }
.types__soon{ color:var(--brass) !important; }
.types__item--all{ color:var(--brass); }

/* ============================================================
   0. SLIDING PANEL
   ------------------------------------------------------------
   Image-forward: the photos are the point, so the wash sits only
   under the caption instead of over the whole frame.
   ============================================================ */
.slider{
  position:relative; margin-top:var(--headh);
  height:clamp(400px,62vh,660px); overflow:hidden; background:var(--paper-3);
}
.slider__track{ position:absolute; inset:0; }
.slider__slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .9s var(--ease);
}
.slider__slide.is-on{ opacity:1; animation:slideZoom 9s var(--ease) forwards; }
@keyframes slideZoom{ from{ transform:scale(1.06); } to{ transform:scale(1); } }

.slider__caption{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:clamp(56px,9vw,110px) var(--gut) clamp(26px,3.4vw,44px);
  background:linear-gradient(to top, rgba(20,18,15,.74) 0%, rgba(20,18,15,.34) 48%, rgba(20,18,15,0) 100%);
  color:#fff; text-align:center;
}
.slider__eyebrow{
  margin:0 0 10px; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:#e8d9b8;
}
.slider__title{
  font-family:var(--serif); font-weight:300; color:#fff;
  font-size:clamp(2rem,4.6vw,3.6rem); line-height:1.08; margin:0 0 10px; letter-spacing:-.01em;
}
.slider__title em{ font-style:italic; color:#e8d9b8; }
.slider__note{ margin:0; font-size:13px; color:rgba(255,255,255,.84); }

.slider__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:48px; height:48px; display:grid; place-items:center; cursor:pointer;
  background:rgba(252,251,249,.9); border:0; color:var(--ink);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.slider__arrow svg{ width:20px; height:20px; }
.slider__arrow:hover{ background:var(--ink); color:var(--paper); }
.slider__arrow--prev{ left:clamp(10px,2vw,26px); }
.slider__arrow--next{ right:clamp(10px,2vw,26px); }

.slider__dots{
  position:absolute; z-index:4; left:0; right:0; bottom:clamp(12px,1.6vw,18px);
  display:flex; justify-content:center; gap:9px;
}
.slider__dot{
  width:30px; height:3px; padding:0; border:0; cursor:pointer;
  background:rgba(255,255,255,.42); transition:background .3s var(--ease);
}
.slider__dot.is-on{ background:#e8d9b8; }
.slider__dot:hover{ background:rgba(255,255,255,.75); }

/* ============================================================
   0b. TYPE BOXES
   ============================================================ */
/* The home page is a stack of panels. The space between them matches the gap
   between the boxes themselves, so the whole page reads as one grid rather
   than three sections marooned in white. */
.boxes{ padding:clamp(14px,1.8vw,26px) 0; }
.boxes .section-head{ margin-bottom:clamp(16px,2vw,28px); }

/* ============================================================
   0c. ABOUT, ON THE HOME PAGE
   ============================================================ */
.homeabout{ padding:0 0 clamp(14px,1.8vw,26px); }
.homeabout__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4.5vw,72px); align-items:center;
  background:var(--paper-2); border:1px solid var(--line);
}
.homeabout__media{ margin:0; align-self:stretch; }
.homeabout__media img{ width:100%; height:100%; min-height:340px; object-fit:cover; display:block; }
.homeabout__text{ padding:clamp(28px,3.4vw,54px) clamp(24px,3vw,54px) clamp(28px,3.4vw,54px) 0; }
.homeabout__text .lede{ margin-bottom:24px; }

/* the brand statement, set apart from the factual copy around it */
.brandnote{
  margin:0 0 28px; padding-left:clamp(16px,1.6vw,22px);
  border-left:2px solid var(--brass);
}
.brandnote p{ margin:0 0 .85em; font-size:15px; line-height:1.78; color:var(--body); }
.brandnote p:last-child{ margin-bottom:0; }
.brandnote__head{
  font-family:var(--serif); font-size:clamp(1.15rem,1.9vw,1.42rem) !important;
  line-height:1.3; color:var(--ink); margin-bottom:.7em !important;
}
.brandnote__close{ color:var(--brass) !important; font-style:italic; }
.boxgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,26px); }
.box{
  position:relative; display:block; padding:0; border:0; cursor:pointer;
  overflow:hidden; background:var(--paper-3); text-align:left; aspect-ratio:4/3;
}
.box__media{ position:absolute; inset:0; display:block; }
.box__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.box:hover .box__media img{ transform:scale(1.06); }
.box::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,18,15,.74) 0%, rgba(20,18,15,.18) 46%, rgba(20,18,15,0) 70%);
}
.box__body{
  position:relative; z-index:2; display:flex; flex-direction:column; justify-content:flex-end;
  height:100%; padding:clamp(16px,2vw,26px);
}
.box__name{
  display:block; font-family:var(--serif); font-size:clamp(1.3rem,2.2vw,1.85rem);
  line-height:1.15; color:#fff;
}
.box__count{
  display:block; margin-top:6px; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.8);
}
.box__count--soon{ color:#e8d9b8; }


/* ============================================================
   1. QUALITY CLAIM
   ============================================================ */
.claim{ position:relative; min-height:clamp(420px,54vh,560px); display:flex; align-items:center; overflow:hidden; }
.claim__media{ position:absolute; inset:0; background:var(--paper-3); }
.claim__media img{ width:100%; height:100%; object-fit:cover; }
.claim__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to right, rgba(252,251,249,.97) 0%, rgba(252,251,249,.9) 38%, rgba(252,251,249,.35) 66%, rgba(252,251,249,0) 100%);
}
.claim__inner{ position:relative; z-index:2; padding-block:clamp(50px,6vw,80px); }
.claim .lede{ max-width:46ch; margin-bottom:28px; }

/* ============================================================
   2. CATEGORY CARDS
   ============================================================ */
/* Sections alternate tone so each one reads as its own band and never runs
   into the next: promo (paper) · claim (image) · cats (paper-2) ·
   story (paper) · craft (paper-2) · inspiration (paper) · contact (paper-2) ·
   socials (paper). Every tonal change carries a hairline rule. */
/* Each section is now a page of its own, so every one except the hero has to
   clear the fixed header rather than sitting under it. */
/* Only the FIRST section of a page clears the fixed header. The home page's
   later panels (boxes, about) sit under the slider, which has already done
   it — listing them here rather than overriding afterwards, because this
   selector out-specifies a plain `.boxes` rule and silently won. */
main > section[data-page]:not(.slider):not(.boxes):not(.homeabout){
  padding-top:calc(var(--headh) + clamp(26px,3.5vw,52px));
}
/* the slider clears the header with a margin instead, so it isn't padded */
main > section.slider{ padding-top:0; }

/* The hero and the claim band set `display` themselves, which outranks the
   `hidden` attribute's own display:none — without this they stay on screen on
   every page. */
main > section[data-page][hidden]{ display:none !important; }

/* ============================================================
   FAQs
   ============================================================ */
.faqs{ padding:clamp(64px,8vw,110px) 0; }
.faq{
  max-width:72ch; margin:0 auto; padding:26px 0; border-top:1px solid var(--line);
}
.faq:last-child{ border-bottom:1px solid var(--line); }
.faq h3{
  display:flex; gap:14px; align-items:baseline;
  font-family:var(--serif); font-size:clamp(1.3rem,2.4vw,1.75rem); line-height:1.25; margin:0 0 10px;
}
.faq__n{
  flex:none; width:1.6em; font-family:var(--sans); font-size:11px; font-weight:500;
  letter-spacing:.14em; color:var(--brass);
}
.faq p{ padding-left:calc(1.6em + 14px); }
.faq p{ margin:0; font-size:15.5px; line-height:1.8; color:var(--body); }

.cats{ padding:clamp(64px,8vw,110px) 0; background:var(--paper-2); border-block:1px solid var(--line); }
.catgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); }
.catcard{
  display:block; padding:0; border:1px solid var(--line); background:var(--paper);
  cursor:pointer; text-align:left; overflow:hidden;
  transition:border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.catcard:hover{ border-color:var(--brass); transform:translateY(-4px); box-shadow:var(--shadow); }
.catcard__media{ display:block; overflow:hidden; aspect-ratio:5/3; background:var(--paper-3); }
.catcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.catcard:hover .catcard__media img{ transform:scale(1.06); }
.catcard__body{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:20px clamp(16px,2vw,24px) 22px; }
.catcard__name{ font-family:var(--serif); font-size:1.5rem; color:var(--ink); }
.catcard__count{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
/* a section with nothing listed yet — a stated status, not a count of zero */
.catcard__count--soon{ color:var(--brass); font-weight:500; }

/* ============================================================
   3. BRAND STORY
   ============================================================ */
.story{ padding:clamp(64px,8vw,110px) 0; }
.story__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:center; }
.story__media{ margin:0; }
.story__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--paper-3); }
.story__close{
  font-family:var(--serif); font-size:clamp(1.15rem,2vw,1.5rem); font-style:italic;
  color:var(--brass); margin:0 0 1.4em;
}
/* the showroom detail sits quieter than the brand statement above it */
.story__text > p.reveal:not(.lede):not(.story__close){ font-size:15px; color:var(--muted); }
.story .btn{ margin-top:12px; }

/* ============================================================
   PRODUCT CARDS + RAILS
   ============================================================ */

/* When a collection or finish spans more than one type, its products are
   split under these headings rather than poured into one grid. */
.catsec{ margin-bottom:clamp(30px,4vw,48px); }
.catsec:last-child{ margin-bottom:0; }
.catsec__h{
  display:flex; align-items:baseline; gap:12px;
  font-family:var(--serif); font-size:1.45rem; font-weight:400; color:var(--ink);
  margin:0 0 18px; padding-bottom:10px; border-bottom:1px solid var(--line);
}
.catsec__h em{ font-style:normal; font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); white-space:nowrap; }

.rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,1fr);
  gap:clamp(14px,1.8vw,24px); overflow-x:auto; padding-bottom:12px;
  scroll-snap-type:x mandatory; scrollbar-width:thin;
}
.rail > *{ scroll-snap-align:start; }
.rail--grid{ grid-auto-flow:row; grid-template-columns:repeat(4,1fr); overflow:visible; }

.pc{ position:relative; border:1px solid var(--line); background:var(--paper); cursor:pointer; transition:border-color .4s var(--ease), box-shadow .4s var(--ease); }
.pc:hover{ border-color:var(--brass); box-shadow:var(--shadow); }
.pc:hover .pc__name{ color:var(--brass); }
.pc:focus-within{ border-color:var(--brass); }
.pc__hit{ display:block; width:100%; padding:0; border:0; background:none; cursor:pointer; }
.pc__media{ display:block; overflow:hidden; aspect-ratio:1/1; background:var(--paper-3); }
.pc__media img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.pc:hover .pc__media img{ transform:scale(1.05); }

.pc__wish{
  position:absolute; top:10px; right:10px; width:34px; height:34px;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(252,251,249,.92); border:1px solid var(--line); color:var(--muted);
  transition:color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.pc__wish svg{ width:17px; height:17px; }
.pc__wish:hover{ color:var(--brass); border-color:var(--brass); transform:scale(1.08); }
.pc__wish.is-on{ color:#fff; background:var(--brass); border-color:var(--brass); }
/* fill the bag's body only — filling the handle arc would draw a crescent */
.pc__wish.is-on svg .bag-body{ fill:currentColor; }

.pc__body{ padding:16px clamp(14px,1.6vw,20px) 20px; }
.pc__name{
  display:block; background:none; border:0; padding:0; cursor:pointer; text-align:left;
  font-family:var(--serif); font-size:1.24rem; color:var(--ink); line-height:1.2; margin-bottom:5px;
  transition:color .25s var(--ease);
}
.pc__name:hover{ color:var(--brass); }
.pc__finish{ margin:0 0 8px; font-size:11px; letter-spacing:.06em; color:var(--muted); }
.pc__rrp{ margin:0; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); }

/* ============================================================
   4. CRAFT
   ============================================================ */
.craft{ padding:clamp(64px,8vw,110px) 0; background:var(--paper-2); border-block:1px solid var(--line); }
.craft__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:center; }
.craft__media{ margin:0; }
.craft__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--paper-3); }
.craft__media figcaption{ margin-top:12px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.ticks{ list-style:none; padding:0; margin:28px 0 0; }
.ticks li{ position:relative; padding-left:24px; margin-bottom:11px; font-size:15px; color:var(--body); }
.ticks li::before{ content:""; position:absolute; left:0; top:12px; width:12px; height:1px; background:var(--brass); }

/* ============================================================
   5. INSPIRATION
   ============================================================ */
.insp{ padding:clamp(64px,8vw,110px) 0; }
.inspgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); }
.insp__item{ margin:0; }
.insp__media{ display:block; overflow:hidden; aspect-ratio:4/3; background:var(--paper-3); }
.insp__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.insp__item:hover .insp__media img{ transform:scale(1.05); }
.insp__title{ display:block; font-family:var(--serif); font-size:1.2rem; color:var(--ink); margin:13px 0 9px; }
.insp__tags{ display:flex; flex-wrap:wrap; gap:6px; }
.insp__tags button{
  background:var(--paper-2); border:1px solid var(--line); cursor:pointer;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  padding:5px 10px; transition:border-color .3s var(--ease), color .3s var(--ease);
}
.insp__tags button:hover{ border-color:var(--brass); color:var(--brass); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ padding:clamp(64px,8vw,110px) 0; background:var(--paper-2); border-top:1px solid var(--line); }
.contact__grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(40px,5vw,80px); align-items:start; }
.contact__details{ margin:32px 0 0; }
.contact__details > div{ display:flex; gap:18px; padding:14px 0; border-top:1px solid var(--line-2); }
.contact__details dt{ flex:0 0 96px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); padding-top:4px; }
.contact__details dd{ margin:0; color:var(--body); font-size:15px; line-height:1.6; }
.contact__details a{ border-bottom:1px solid var(--line-2); }
.contact__details a:hover{ border-bottom-color:var(--brass); }

.form{ background:var(--paper); border:1px solid var(--line); padding:clamp(22px,2.8vw,38px); }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hp{ position:absolute; left:-9999px; }
.field{ margin-bottom:18px; }
.field > label{ display:block; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea{
  width:100%; background:var(--paper); color:var(--ink); border:1px solid var(--line-2); border-radius:0;
  padding:13px 14px; font-family:var(--sans); font-size:15px; font-weight:300;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea{ resize:vertical; min-height:104px; }
.field ::placeholder{ color:#a9a49b; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(154,123,69,.11); }
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239a7b45' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:11px; padding-right:40px;
}
.field--check{ border:0; padding:0; margin:0 0 20px; min-width:0; }
.field--check legend{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; padding:0; }
.checks{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.checks label{
  display:flex; align-items:center; gap:8px; cursor:pointer; padding:9px 11px;
  border:1px solid var(--line-2); background:var(--paper); font-size:13px; color:var(--body);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.checks label:hover{ border-color:var(--brass); }
.checks label:has(input:checked){ border-color:var(--brass); background:var(--brass-t); color:var(--ink); }
.checks input{
  appearance:none; -webkit-appearance:none; width:14px; height:14px; flex:none; position:relative; margin:0;
  border:1px solid var(--line-2); background:var(--paper);
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.checks input:checked{ background:var(--brass); border-color:var(--brass); }
.checks input:checked::after{ content:""; position:absolute; left:4px; top:1px; width:4px; height:8px; border:solid #fff; border-width:0 1.5px 1.5px 0; transform:rotate(45deg); }
.form__note{ margin:14px 0 0; font-size:12px; color:var(--muted); text-align:center; transition:color .3s var(--ease); }
.form__note.is-warn{ color:#a3452f; }

/* ============================================================
   SOCIALS
   ============================================================ */
.socials{ padding:clamp(60px,7vw,100px) 0; border-top:1px solid var(--line); }
.soc{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,22px); }
.soc--two{ grid-template-columns:repeat(2,1fr); max-width:620px; margin-inline:auto; }
.soc__item{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  padding:clamp(24px,3vw,36px) 14px; border:1px solid var(--line); background:var(--paper);
  transition:border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.soc__item:hover{ border-color:var(--brass); transform:translateY(-4px); box-shadow:var(--shadow); }
.soc__icon{ display:block; width:26px; height:26px; color:var(--brass); }
.soc__icon svg{ width:100%; height:100%; display:block; }
.soc__name{ font-family:var(--serif); font-size:1.22rem; color:var(--ink); }
.soc__handle{ font-size:11.5px; color:var(--muted); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ padding:clamp(52px,6vw,80px) 0 34px; background:var(--paper-2); border-top:1px solid var(--line); }
.foot__cols{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:clamp(20px,2.4vw,36px); }
.foot__logo{ height:64px; width:auto; display:block; }
.foot__brandcol p{ margin:14px 0 0; font-size:13px; color:var(--muted); max-width:34ch; }
.foot__addr{ line-height:1.8; }
.foot__addr a{ border-bottom:1px solid var(--line-2); }
.foot__col h4{ font-family:var(--sans); font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin:0 0 14px; }
.foot__col a, .foot__col button{
  display:block; width:100%; text-align:left; background:none; border:0; padding:0 0 9px; cursor:pointer;
  font-family:var(--sans); font-size:13px; font-weight:300; color:var(--body); transition:color .3s var(--ease);
}
.foot__col a:hover, .foot__col button:hover{ color:var(--brass); }
.foot__legal{ margin:clamp(34px,4vw,50px) 0 0; padding-top:22px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }

/* ============================================================
   CATALOGUE OVERLAY
   ============================================================ */
.cat{ position:fixed; inset:0; z-index:200; background:var(--paper); display:flex; flex-direction:column; opacity:0; transition:opacity .35s var(--ease); }
.cat.is-open{ opacity:1; }
.cat[hidden]{ display:none; }

.cat__bar{
  flex:none; display:flex; align-items:center; gap:14px; padding:15px var(--gut);
  border-bottom:1px solid var(--line); background:rgba(252,251,249,.95);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.cat__back{
  background:none; border:0; cursor:pointer; padding:7px 0;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass);
  display:inline-flex; align-items:center; gap:8px; transition:gap .3s var(--ease), color .3s var(--ease);
}
.cat__back:hover{ gap:13px; color:var(--ink); }
.cat__back[hidden]{ display:none; }
.cat__title{ font-family:var(--serif); font-size:1.3rem; color:var(--ink); margin-inline:auto; padding-inline:8px; text-align:center; }
.cat__close{ background:none; border:0; cursor:pointer; padding:0; flex:none; width:36px; height:36px; color:var(--ink); display:grid; place-items:center; transition:color .3s var(--ease), transform .3s var(--ease); }
.cat__close svg{ width:21px; height:21px; }
.cat__close:hover{ color:var(--brass); transform:rotate(90deg); }

.cat__scroll{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.cat__body{ padding-block:clamp(30px,4vw,54px) clamp(50px,7vw,86px); }
.cat__blurb{ font-size:clamp(1rem,1.4vw,1.12rem); color:var(--body); max-width:60ch; margin:0 0 9px; }
.cat__count{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:0 0 clamp(24px,3vw,40px); }
.cat__empty{
  font-size:15px; color:var(--body); max-width:52ch; line-height:1.75;
  padding:26px 28px; border:1px solid var(--line); background:var(--paper-2);
}
.catcard__count{ white-space:nowrap; }

/* product detail */
.pd{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(28px,4vw,64px); align-items:start; }
.pd__main{
  position:relative; overflow:hidden; aspect-ratio:4/3;
  background:var(--paper-3); border:1px solid var(--line);
  cursor:grab; user-select:none; -webkit-user-select:none;
  touch-action:pan-y;              /* vertical scrolling still works over the photo */
}
.pd__main.is-dragging{ cursor:grabbing; }
.pd__main img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .32s var(--ease);
  -webkit-user-drag:none; user-drag:none; pointer-events:none;
}

.pd__arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; display:grid; place-items:center; cursor:pointer;
  background:rgba(252,251,249,.9); border:1px solid var(--line); color:var(--ink);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.pd__arrow svg{ width:20px; height:20px; }
.pd__arrow:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.pd__arrow--prev{ left:12px; }
.pd__arrow--next{ right:12px; }

.pd__counter{
  position:absolute; bottom:12px; right:12px;
  background:rgba(27,26,24,.72); color:#fff;
  font-size:11px; letter-spacing:.1em; padding:5px 10px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}

@media (hover:none){
  /* no hover on touch, so make the arrows permanently obvious */
  .pd__arrow{ background:rgba(252,251,249,.95); }
}
.pd__thumbs{ display:flex; gap:9px; margin-top:9px; flex-wrap:wrap; }
.pd__thumb{ width:78px; aspect-ratio:4/3; padding:0; cursor:pointer; background:var(--paper-3); border:1px solid var(--line); overflow:hidden; opacity:.6; transition:border-color .3s var(--ease), opacity .3s var(--ease); }
.pd__thumb img{ width:100%; height:100%; object-fit:cover; }
.pd__thumb:hover{ opacity:1; }
.pd__thumb.is-active{ border-color:var(--brass); opacity:1; }

.pd__coll{ background:none; border:0; padding:0 0 10px; cursor:pointer; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); }
.pd__coll:hover{ color:var(--ink); }
/* shown instead when the product has no collection set in Zoho */
.pd__coll--plain{ margin:0; cursor:default; }
.pd__name{ font-family:var(--serif); font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.12; margin-bottom:7px; }
.pd__price{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); margin:0 0 18px; }
.pd__blurb{ font-size:15px; color:var(--body); line-height:1.75; margin:0 0 22px; }
.pd__blurb p{ margin:0 0 .9em; }
.pd__blurb p:last-child{ margin-bottom:0; }
.pd__subhead{
  font-family:var(--sans); font-size:10px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  margin:20px 0 10px !important;
}
.pd__speclist{ list-style:none; padding:0; margin:0 0 .9em; }
.pd__speclist li{
  display:flex; gap:14px; padding:8px 0; border-bottom:1px solid var(--line);
  font-size:13.5px; line-height:1.6;
}
.pd__speclist li:last-child{ border-bottom:0; }
.pd__speclist b{ flex:0 0 38%; font-weight:400; color:var(--muted); }
/* the first section heading sits right under the price, so it needs
   no extra top rule above it */
.pd__h--first{ padding-top:18px; }
.pd__h{ font-family:var(--sans); font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:0 0 11px; padding-top:18px; border-top:1px solid var(--line); }
.chips{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:4px; }
.chip{ display:inline-flex; align-items:center; gap:7px; background:var(--paper-2); border:1px solid var(--line-2); cursor:pointer; font-size:11.5px; color:var(--body); padding:6px 11px; transition:border-color .3s var(--ease), color .3s var(--ease); }
.chip:hover{ border-color:var(--brass); color:var(--brass); }
.pd__sizes{ list-style:none; padding:0; margin:0 0 4px; display:flex; flex-wrap:wrap; gap:6px; }
.pd__sizes li{ font-size:11.5px; color:var(--body); border:1px solid var(--line-2); padding:6px 12px; background:var(--paper-2); }
.pd__specs{ margin:0 0 4px; }
.pd__specs > div{ display:flex; gap:18px; padding:10px 0; border-bottom:1px solid var(--line); }
.pd__specs > div:last-child{ border-bottom:0; }
.pd__specs dt{ flex:0 0 40%; font-size:13px; color:var(--muted); }
.pd__specs dd{ margin:0; font-size:13px; color:var(--ink); }
/* the buy row: quantity, then Add to cart */
.pd__buy{ display:flex; gap:10px; align-items:stretch; margin-top:26px; }
.pd__add{ flex:1 1 auto; min-height:48px; }
.pd__incart{ margin:10px 0 0; font-size:13px; color:var(--brass); min-height:1.4em; }
.linkbtn{
  background:none; border:0; padding:0; cursor:pointer; font:inherit; color:var(--ink);
  text-decoration:underline; text-underline-offset:3px;
}
.linkbtn:hover{ color:var(--brass); }
.pd__actions{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:14px; }

/* quantity stepper, used on product pages and in the cart */
.qty{ display:inline-flex; align-items:stretch; border:1px solid var(--line-2); background:var(--paper); flex:none; }
.qty__btn{
  width:44px; min-height:44px; display:grid; place-items:center; padding:0; cursor:pointer;
  background:none; border:0; font-size:20px; line-height:1; color:var(--ink);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.qty__btn:hover{ background:var(--paper-2); color:var(--brass); }
.qty__input{
  width:48px; min-height:44px; text-align:center; border:0; border-inline:1px solid var(--line);
  background:transparent; font-family:var(--sans); font-size:15px; color:var(--ink);
  font-variant-numeric:tabular-nums; -moz-appearance:textfield;
}
.qty__input:focus{ outline:2px solid var(--brass); outline-offset:-2px; }

/* the cart page */
.cart{ display:grid; grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr); gap:clamp(24px,3.4vw,52px); align-items:start; }
.cart__list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.cartline{
  display:grid; grid-template-columns:92px minmax(0,1fr) auto 92px; gap:clamp(12px,1.6vw,22px);
  align-items:center; padding:18px 0; border-bottom:1px solid var(--line);
}
.cartline__img{
  display:block; width:92px; height:92px; padding:0; border:1px solid var(--line);
  background:var(--paper-3); cursor:pointer; overflow:hidden;
}
.cartline__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.cartline__info{ min-width:0; }
.cartline__name{
  display:block; padding:0; border:0; background:none; cursor:pointer; text-align:left;
  font-family:var(--serif); font-size:1.28rem; line-height:1.2; color:var(--ink);
}
.cartline__name:hover{ color:var(--brass); }
.cartline__meta{ margin:4px 0 8px; font-size:12px; color:var(--muted); letter-spacing:.04em; }
.cartline__remove{
  padding:0; border:0; background:none; cursor:pointer; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); text-decoration:underline; text-underline-offset:3px;
}
.cartline__remove:hover{ color:var(--brass); }
.cartline__total{ margin:0; text-align:right; font-family:var(--serif); font-size:1.2rem; color:var(--ink); font-variant-numeric:tabular-nums; }

.cartsum{ border:1px solid var(--line); background:var(--paper-2); padding:clamp(20px,2.4vw,30px); position:sticky; top:16px; }
.cartsum__h{ font-family:var(--serif); font-size:1.5rem; margin:0 0 14px; }
.cartsum dl{ margin:0 0 14px; }
.cartsum dl > div{ display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-top:1px solid var(--line-2); }
.cartsum dt{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); padding-top:3px; }
.cartsum dd{ margin:0; font-family:var(--serif); font-size:1.3rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.cartsum__note{ margin:0 0 12px; font-size:13px; line-height:1.6; color:var(--body); }
.cartsum__small{ margin:12px 0 0; font-size:12px; line-height:1.6; color:var(--muted); text-align:center; }
.cartsum__alt{ margin-top:10px; }

/* the payment method choice */
.paymethods{ border:0; margin:6px 0 14px; padding:0; min-width:0; }
.paymethods__h{
  padding:0; margin:0 0 10px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.paym{
  display:flex; gap:12px; align-items:flex-start; padding:12px 14px; margin:0 0 8px; cursor:pointer;
  border:1px solid var(--line-2); background:var(--paper);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.paym:hover{ border-color:var(--brass); }
.paym.is-on{ border-color:var(--brass); background:var(--brass-t); }
.paym input{ margin:4px 0 0; flex:none; accent-color:var(--brass); width:16px; height:16px; }
.paym input:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }
.paym span{ display:block; min-width:0; }
.paym b{ display:block; font-weight:500; font-size:14px; color:var(--ink); }
.paym small{ display:block; margin-top:2px; font-size:12px; line-height:1.5; color:var(--muted); }

/* delivery address, shown when delivery is chosen */
.cartsum__addrlabel{ display:block; margin:12px 0 6px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.cartsum__addr{
  width:100%; box-sizing:border-box; padding:10px 12px; resize:vertical; min-height:76px;
  font-family:var(--sans); font-size:14px; line-height:1.5; color:var(--ink);
  background:var(--paper); border:1px solid var(--line-2);
}
.cartsum__addr:focus{ outline:2px solid var(--brass); outline-offset:-1px; }
.cartsum__total{ border-top:2px solid var(--ink) !important; }
.cartsum__total dt{ color:var(--ink); }
.cartsum .btn[disabled]{ opacity:.6; cursor:progress; }
.cartsum__test{
  margin:0 0 12px; padding:8px 12px; font-size:12px; letter-spacing:.06em; text-align:center;
  color:var(--ink); background:var(--brass-t); border:1px solid var(--brass);
}
.cartsum__msg{ margin:12px 0 0; font-size:13px; line-height:1.6; color:#8a2f25; }
.cartthanks{
  margin:0 0 clamp(20px,3vw,34px); padding:clamp(18px,2.4vw,28px);
  border:1px solid var(--brass); background:var(--brass-t); text-align:center;
}
.cartthanks h3{ font-family:var(--serif); font-size:1.7rem; margin:0 0 6px; }
.cartthanks p{ margin:0 auto; max-width:52ch; font-size:15px; color:var(--body); }

@media (max-width:900px){
  .cart{ grid-template-columns:1fr; }
  .cartsum{ position:static; }
}
@media (max-width:560px){
  .cartline{ grid-template-columns:72px minmax(0,1fr); grid-template-areas:"img info" "qty total"; row-gap:12px; }
  .cartline__img{ grid-area:img; width:72px; height:72px; }
  .cartline__info{ grid-area:info; }
  .cartline .qty{ grid-area:qty; justify-self:start; }
  .cartline__total{ grid-area:total; align-self:center; }
  .pd__buy{ flex-wrap:wrap; }
  .pd__add{ flex:1 1 100%; }
}

.pd__note{ margin:11px 0 0; font-size:12px; color:var(--muted); text-align:center; }
.pd__save.is-on{ border-color:var(--brass); color:var(--brass); background:var(--brass-t); }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:1180px){
  .foot__cols{ grid-template-columns:1fr 1fr 1fr; }
  .foot__brandcol{ grid-column:1 / -1; margin-bottom:12px; }
  .rail--grid{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:1000px){
  .util__inner a:nth-child(n+4){ display:none; }
  .catgrid{ grid-template-columns:repeat(2,1fr); }
  .story__grid, .craft__grid, .contact__grid{ grid-template-columns:1fr; }
  .story__media, .craft__media{ order:-1; }
  .inspgrid{ grid-template-columns:repeat(2,1fr); }
  .menu__inner{ grid-template-columns:1fr; gap:34px; }
  .pd{ grid-template-columns:1fr; }
  .rail--grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:760px){
  :root{ --headh:232px; }

  .slider{ height:clamp(320px,48vh,420px); }
  .slider__arrow{ width:40px; height:40px; }
  .boxgrid{ grid-template-columns:repeat(2,1fr); }
  .soc{ grid-template-columns:repeat(2,1fr); }
  .foot__cols{ grid-template-columns:1fr 1fr; }
  .checks{ grid-template-columns:repeat(2,1fr); }
  .form__row{ grid-template-columns:1fr; gap:0; }
  .claim__scrim{ background:linear-gradient(to bottom, rgba(252,251,249,.94) 0%, rgba(252,251,249,.88) 55%, rgba(252,251,249,.8) 100%); }

  /* the address is the one line worth keeping up there at this width */
  .util__mid{ font-size:10.5px; gap:9px; }
  .util__right a:not(:last-child){ display:none; }
  .brand__logo{ height:60px; }
  .nav.is-stuck .brand__logo{ height:44px; }
  .bar__inner{ padding:11px var(--gut); }
  .search{ padding:11px var(--gut); }
  .search__go{ padding:0 15px; letter-spacing:.12em; }

  /* the type strip scrolls sideways rather than stacking into four rows */
  .types__inner{
    justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto;
    gap:22px; min-height:46px; scrollbar-width:none;
  }
  .types__inner::-webkit-scrollbar{ display:none; }
  .types__item{ white-space:nowrap; }
}

@media (max-width:560px){
  .inspgrid{ grid-template-columns:1fr; }
  .pd__actions{ grid-template-columns:1fr; }

  /* ---- two per row on phones ----
     One card per screen wasted the viewport and made the range feel
     thinner than it is. Two up, with the card furniture scaled down
     so nothing wraps awkwardly at 375px. */
  .catgrid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .catcard__body{ display:block; padding:12px 12px 15px; }
  .catcard__name{ font-size:1.1rem; line-height:1.2; }
  .catcard__count{ display:block; margin-top:4px; font-size:9px; letter-spacing:.14em; }

  .rail--grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .pc__body{ padding:12px 11px 15px; }
  .pc__name{ font-size:1.04rem; }
  .pc__finish{ font-size:10px; margin-bottom:6px; }
  .pc__rrp{ font-size:9.5px; letter-spacing:.07em; }
  .pc__wish{ width:28px; height:28px; top:7px; right:7px; }
  .pc__wish svg{ width:14px; height:14px; }

  /* the featured rail scrolls — show two plus a peek so it reads as scrollable */
  .rail{ grid-auto-columns:minmax(148px,1fr); gap:10px; }
  .contact__details > div{ flex-direction:column; gap:4px; }
  .contact__details dt{ flex:none; }
  .foot__cols{ grid-template-columns:1fr; }

  /* phone header: the words go, the icons stay, so the row still fits 360px */
  :root{ --headh:214px; }
  .util__inner{ gap:10px; }
  .util__mid{ font-size:10px; gap:7px; }
  .util__mid span{ display:none; }        /* phone number is the useful half here */
  .menu-btn__word, .cart-btn__word{ display:none; }
  .bar__inner{ gap:9px; padding:10px var(--gut); }
  .brand__logo{ height:48px; }
  .nav.is-stuck .brand__logo{ height:38px; }
  .search{ padding:10px var(--gut); gap:8px; }
  .search input{ font-size:13px; }
  .search__go{ padding:0 13px; font-size:9.5px; }
  .menu{ width:min(272px, calc(100vw - 32px)); }
  .catsec__h{ font-size:1.2rem; }

  .slider{ height:clamp(280px,42vh,360px); }
  .slider__arrow{ width:36px; height:36px; }
  .slider__caption{ padding-bottom:30px; }
  .boxgrid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .box{ aspect-ratio:1/1; }
  .box__body{ padding:13px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}


/* tapware product shots are cut-outs on white — show the whole tap, never crop it */
img[src*="/images/tapware/"]{ object-fit:contain !important; background:#fff; }

/* tapware colour picker */
.chip[data-variant].is-active{ border-color:var(--brass); color:var(--ink); background:var(--brass-t); }
.pd__colour{ color:var(--ink); letter-spacing:.12em; }

/* ---------- tapware: one block per series, complete rows, even cards ---------- */
.catsec--series .catsec__h{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.catsec__tag{ font-family:var(--sans); font-size:12px; letter-spacing:.06em; color:var(--muted); }
.catsec--series .catsec__h em{ margin-left:auto; }
.rail--series{ grid-template-columns:repeat(3,1fr) !important; }
.rail--series .pc{ display:flex; flex-direction:column; }
.rail--series .pc__body{ flex:1; display:flex; flex-direction:column; }
.rail--series .pc__name{ min-height:2.4em; }
.rail--series .pc__rrp{ margin-top:auto; }
.rail--series .pc__media{ background:#fff; }
.rail--series .pc__media img{ padding:6%; }
.pc__swatches{ display:flex; align-items:center; gap:6px; }
.pc__swatches .sw{ width:13px; height:13px; border-radius:50%; display:inline-block; border:1px solid rgba(0,0,0,.15); }
.pc__fcount{ margin-left:6px; }
@media (max-width:1000px){ .rail--series{ grid-template-columns:repeat(2,1fr) !important; } }

/* tapware cover: keep the taps in frame when the tile crops the wide photo */



/* The Tapware cover is a wide (16:9) photograph and the category tiles are 4:3
   on desktop and square on phones, so the sides are cropped. Anchor the crop
   towards the left so the black, gold and nickel taps stay in view and only the
   freestanding bath mixer at the far right is lost. */
[data-browse="cat:tapware"] .box__media img,
[data-browse="cat:tapware"] .catcard__media img{ object-position:17% 50%; }