/* ============================================================
   KOTEL ARTSTORE — design system
   Neutral frame (ivory / stone / gold / charcoal); the art brings the colour.
   Tokens are carried over verbatim from design-reference/kotelv2/styles.css.
   ============================================================ */

:root{
  --ivory:        #F6F1E8;
  --ivory-card:   #FBF8F1;
  --ivory-deep:   #EFE8DB;
  --stone:        #E5DCCC;
  --stone-deep:   #CDBFA8;
  --gold:         #A8843F;   /* decoration only — rules, borders, icons (3:1 is enough) */
  --gold-text:    #806430;   /* gold TEXT: 4.56:1 on the darkest surface it sits on */
  --gold-btn:     #907236;   /* gold BUTTON behind white text: 4.52:1 */
  --gold-soft:    #C0A368;
  --gold-pale:    #E8DCC2;
  --charcoal:     #26221C;
  --ink:          #2A2620;
  --ink-soft:     #5C564C;
  --ink-faint:    #6E685E;   /* was #8A8275 (3.38:1); now 4.53:1 on ivory-deep */
  --emerald:      #1E4A3B;
  --line:         rgba(38,34,28,.13);
  --line-soft:    rgba(38,34,28,.08);

  --shadow-sm: 0 1px 2px rgba(38,34,28,.05), 0 6px 18px rgba(38,34,28,.05);
  --shadow-md: 0 4px 14px rgba(38,34,28,.07), 0 24px 50px rgba(38,34,28,.09);
  --shadow-lg: 0 10px 30px rgba(38,34,28,.10), 0 40px 90px rgba(38,34,28,.14);

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Mulish', -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --maxw: 1440px;
  --gutter: clamp(20px, 4vw, 64px);
  --header-h: 84px;
  --radius: 3px;
}

/*
 * Overlay stacking, in one place so it stays consistent.
 *
 *   50  sticky header
 *  100  terms notice (a passive bar — everything deliberate outranks it)
 *  110  mobile drawer scrim
 *  120  mobile drawer
 *  130  lightbox
 */
:root{
  --z-header:50; --z-consent:100; --z-scrim:110; --z-drawer:120; --z-lightbox:130;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  background:var(--ivory);
  color:var(--ink);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul{ margin:0; padding:0; list-style:none; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--charcoal); color:var(--ivory); padding:12px 20px;
}
.skip-link:focus{ left:0; }

.screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

/* ---------- typography ---------- */
.display{
  font-family:var(--serif); font-weight:500; line-height:1.04;
  letter-spacing:-.01em; color:var(--ink); margin:0;
}
h1.display{ font-size:clamp(2.2rem, 5vw, 3.8rem); }
h2.display{ font-size:clamp(2.1rem, 4.2vw, 3.6rem); }
h3.display{ font-size:clamp(1.5rem, 2.4vw, 2rem); }

.eyebrow{
  font-size:.72rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-text); margin:0 0 1.1rem; display:inline-flex; align-items:center; gap:.7rem;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--gold); opacity:.7; }

.lede{ font-size:1.06rem; color:var(--ink-soft); line-height:1.7; max-width:46ch; }

/* ---------- layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(48px, 7vw, 100px); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-size:.8rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  padding:1.05em 2.1em; border-radius:var(--radius);
  transition:.35s cubic-bezier(.2,.6,.2,1); white-space:nowrap;
}
.btn .arr{ transition:transform .35s cubic-bezier(.2,.6,.2,1); }
.btn:hover .arr{ transform:translateX(4px); }
.btn-primary{ background:var(--ink); color:var(--ivory-card); }
.btn-primary:hover{ background:var(--charcoal); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-gold{ background:var(--gold-btn); color:#fff; }
.btn-gold:hover{ background:#7C6230; transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-ghost{ border:1px solid var(--line); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--ink); background:rgba(38,34,28,.03); }

.link-arrow{
  font-size:.78rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.55em; min-height:24px;
  padding-bottom:3px; border-bottom:1px solid var(--line); transition:.3s;
}
.link-arrow:hover{ border-color:var(--gold-text); color:var(--gold-text); }

/* ---------- announcement bar ---------- */
.announce{
  background:var(--charcoal); color:var(--ivory);
  font-size:.76rem; letter-spacing:.1em; text-align:center;
  padding:9px var(--gutter);
}
.announce b{ color:var(--gold-soft); font-weight:600; }

/* ---------- header ---------- */
.header{
  position:sticky; top:0; z-index:var(--z-header);
  background:rgba(246,241,232,.86);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line-soft);
}
.header-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:84px;
}
.logo{ justify-self:start; }
.logo-img{ height:48px; width:auto; }

.nav{ justify-self:center; display:flex; gap:clamp(14px,1.6vw,30px); }
.nav a{
  font-size:.79rem; font-weight:500; letter-spacing:.04em; color:var(--ink-soft);
  position:relative; padding:6px 0; transition:color .25s;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--gold); transition:width .3s;
}
.nav a:hover, .nav a[aria-current]{ color:var(--ink); }
.nav a:hover::after, .nav a[aria-current]::after{ width:100%; }

.head-actions{ justify-self:end; display:flex; align-items:center; gap:4px; }
.icon-btn{
  /* 44, not 42. It is the size a thumb is measured against, and the cart and the menu are the
     two controls in the header a phone user reaches for. */
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  transition:background .25s;
}
.icon-btn:hover{ background:rgba(38,34,28,.06); }
.icon-btn svg{ width:20px; height:20px; }
.menu-btn{ display:none; }

/* ---------- mobile nav ---------- */
.scrim{
  position:fixed; inset:0; background:rgba(20,16,10,.46); z-index:var(--z-scrim);
  opacity:0; visibility:hidden; transition:.35s;
}
.scrim.show{ opacity:1; visibility:visible; }
.mobile-nav{
  position:fixed; top:0; left:0; height:100%; width:min(360px,86vw); z-index:var(--z-drawer);
  background:var(--ivory-card); box-shadow:var(--shadow-lg); transform:translateX(-100%);
  transition:transform .45s cubic-bezier(.3,.7,.3,1);
  display:flex; flex-direction:column; padding:26px;
}
.mobile-nav.show{ transform:translateX(0); }
.mn-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex:none; }

/*
 * The link list scrolls, the Etsy button stays pinned to the bottom.
 *
 * Without this the drawer was 620px of content in a 568px viewport on a small phone, with
 * overflow visible — the last link was simply unreachable, with no indication it existed.
 */
.mn-body{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.mn-link{
  display:block;
  font-family:var(--serif); font-size:clamp(1.25rem,5vw,1.55rem); padding:13px 0;
  border-bottom:1px solid var(--line-soft); transition:color .2s;
}
.mn-link:hover{ color:var(--gold-text); }

.mn-secondary{ display:flex; flex-wrap:wrap; gap:2px 20px; margin-top:20px; }
.mn-secondary a{
  display:inline-block; padding:10px 0; font-size:.84rem; color:var(--ink-soft);
  border-bottom:1px solid transparent; transition:.2s;
}
.mn-secondary a:hover{ color:var(--gold-text); border-bottom-color:var(--gold-text); }

.mn-etsy{ flex:none; margin-top:20px; width:100%; }

/* ---------- breadcrumbs ---------- */
.crumbs{ font-size:.78rem; color:var(--ink-faint); padding-block:22px 0; }
.crumbs a, .crumbs > span{ display:inline-block; padding-block:5px; }
.crumbs a:hover{ color:var(--gold-text); }
.crumbs .sep{ margin-inline:.5em; opacity:.5; }

/* ============================================================
   PRODUCT (single artwork)
   ============================================================ */
.product{ padding-block:clamp(28px,4vw,52px) clamp(48px,7vw,100px); }
.product-grid{
  display:grid; grid-template-columns:1.5fr 1fr;
  gap:clamp(28px,4vw,72px); align-items:start;
}

/* gallery */
/* --stage-ratio comes from the artwork itself (see kotel_stage_ratio). It is fixed for the
   whole product, so clicking through thumbnails never resizes the stage and shifts the page. */
.gallery-main{
  position:relative; background:var(--ivory-deep); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-md);
  aspect-ratio:var(--stage-ratio, 1); display:grid; place-items:center;
  /* An upright piece at 2:3 would otherwise make a stage taller than the window, so the
     buy button starts below the fold. Capping against the viewport is what galleries do:
     tall work is shown large but always whole, and the price stays in view. */
  max-height:78vh;
  max-height:78dvh;
}
.gallery-main img{ width:100%; height:100%; object-fit:contain; }
.gallery-thumbs{
  display:grid; grid-template-columns:1fr; gap:8px; margin-top:0;
}
.gallery-thumb{
  position:relative; aspect-ratio:var(--stage-ratio, 1); overflow:hidden; border-radius:2px;
  border:1px solid var(--line-soft); background:var(--ivory-deep);
  padding:0; transition:border-color .25s;
}
.gallery-thumb img{ width:100%; height:100%; object-fit:contain; }
.gallery-thumb[aria-current="true"]{ border-color:var(--gold); }
.gallery-thumb:hover{ border-color:var(--ink-faint); }

/* summary */
.product-style{
  font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-text);
}
.product-title{ margin:.6rem 0 1rem; font-size:clamp(1.9rem,3.6vw,2.9rem); }
.product-price{
  font-family:var(--serif); font-size:2rem; color:var(--ink); line-height:1;
  display:flex; align-items:baseline; gap:.6rem;
}
.product-price small{
  font-family:var(--sans); font-size:.76rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint);
}
.product-sizes{
  margin:.9rem 0 0; font-size:.85rem; color:var(--ink-soft); line-height:1.7;
}
.product-sizes-label{
  display:inline-block; margin-right:.5em; font-size:.7rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint);
}

.product-buy{ margin:1.8rem 0 1rem; display:flex; flex-direction:column; gap:.9rem; }

/* trust points */
.trust{
  display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1.2rem;
  margin:1.6rem 0 0; padding-top:1.5rem; border-top:1px solid var(--line-soft);
}
.trust li{ display:flex; align-items:center; gap:.6rem; font-size:.82rem; color:var(--ink-soft); }
.trust svg{ width:17px; height:17px; color:var(--gold); flex:none; }

/* social proof */
.proof{ margin-top:1.8rem; padding-top:1.6rem; border-top:1px solid var(--line-soft); }
.proof-item{ margin:0 0 1.1rem; }
.proof-item p{ margin:.4rem 0 .3rem; font-size:.9rem; line-height:1.65; color:var(--ink-soft); }
.proof-item cite{
  font-style:normal; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint);
}
.stars{ display:inline-flex; gap:2px; color:var(--gold); }
.stars svg{ width:13px; height:13px; }
.proof-link{
  display:inline-block; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  border-bottom:1px solid var(--line); padding:4px 0 6px; transition:.25s;
}
.proof-link:hover{ color:var(--gold-text); border-color:var(--gold-text); }
.product-buy .btn{ width:100%; }
.buy-note{
  font-size:.78rem; color:var(--ink-faint); text-align:center; line-height:1.6;
}
/* the medium, stated where nobody has to open anything to find it. slightly
   stronger than .buy-note because it is a fact about the goods rather than a
   note about the checkout */
.buy-medium{
  font-size:.78rem; color:var(--ink-soft); text-align:center; line-height:1.6;
  margin-top:.85rem; padding-top:.85rem; border-top:1px solid var(--line);
}
.product-desc{ margin-top:2rem; color:var(--ink-soft); line-height:1.75; }
.product-desc p{ margin:0 0 1rem; }

/* shared spec block — identical on every artwork by design, so it lives in the
   template rather than being duplicated into 30 descriptions */
.spec{ margin-top:2.2rem; border-top:1px solid var(--line); }
.spec-item{ border-bottom:1px solid var(--line); }
.spec-q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.1rem 0; font-size:.95rem; font-weight:600; text-align:left; color:var(--ink);
}
.spec-q .pm{ color:var(--gold-text); font-size:1.2rem; line-height:1; flex:none; }
.spec-a{ padding:0 0 1.2rem; color:var(--ink-soft); font-size:.92rem; line-height:1.7; }
.spec-a p{ margin:0 0 .8rem; }
.spec-a ul{ list-style:disc; padding-left:1.2rem; }
.spec-a li{ margin-bottom:.4rem; }
.spec-item:not([open]) .spec-a{ display:none; }

/* related */
.related{ border-top:1px solid var(--line); padding-block:clamp(48px,6vw,86px); }
/* Three across, not four. Every frame is square so that portrait pieces can be added
   without cropping, and a square frame spends height on letterboxing for the landscape
   work that fills the catalogue today. Three columns buy that height back: the artwork
   renders ~37% wider and nearly twice the area, which is the difference between a
   thumbnail and something a buyer can actually judge. */
.grid-artworks{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,30px);
}

/* ---------- artwork card ---------- */
.card{
  display:flex; flex-direction:column; background:var(--ivory-card);
  border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.6,.2,1), box-shadow .45s;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
/* A 4:3 frame, because every card cover is the 4:3 gallery shot: the artwork on a lit
   wall, portrait pieces included. The frame used to be square, from when covers were the
   bare artwork in mixed shapes, and printed empty bands above and below every card.
   object-fit stays `contain`, not `cover`, so a cover that is ever a different shape is
   letterboxed rather than cropped: an art shop must never cut the artwork. */
.card-media{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:var(--ivory-deep); display:grid; place-items:center;
}
.card-media img{
  width:100%; height:100%; object-fit:contain;
  transition:transform 1.1s cubic-bezier(.2,.6,.2,1);
}
.card:hover .card-media img{ transform:scale(1.06); }
.card-body{ padding:20px 20px 24px; display:flex; flex-direction:column; gap:.35rem; flex:1; }
.card-title{ font-family:var(--serif); font-weight:500; font-size:1.25rem; margin:0; line-height:1.2; }
.card-style{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-text); }
.card-price{
  margin-top:auto; padding-top:.7rem; font-family:var(--serif); font-size:1.2rem;
  display:flex; align-items:baseline; gap:.45rem;
}
.card-price small{
  font-family:var(--sans); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint);
}

/* ---------- footer ---------- */
.footer{
  background:var(--charcoal); color:rgba(246,241,232,.7);
  padding-block:clamp(56px,6vw,80px) 36px;
}
.footer-top{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px; margin-bottom:48px;
}
.footer-about{ font-size:.9rem; line-height:1.7; max-width:34ch; margin:1.2rem 0 0; }
.footer h2{
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-soft); margin:0 0 1.1rem; font-weight:600;
}
.footer-col a{ display:block; font-size:.9rem; padding:7px 0; color:rgba(246,241,232,.7); transition:color .25s; }
.footer-col a:hover{ color:var(--ivory); }
.footer-bottom{
  border-top:1px solid rgba(246,241,232,.12); padding-top:26px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:.78rem; color:rgba(246,241,232,.5);
}
.footer-disclaimer{
  margin-top:18px; font-size:.72rem; line-height:1.6; color:rgba(246,241,232,.55);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .nav{ display:none; }
  .menu-btn{ display:grid; }
  .header-inner{ grid-template-columns:auto 1fr auto; }
  .grid-artworks{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; gap:34px; }
}
@media (max-width:820px){
  :root{ --header-h:70px; }
  .product-grid{ grid-template-columns:1fr; }
  .header-inner{ height:70px; }
  .logo-img{ height:40px; }

  /*
   * Mobile hero rhythm.
   *
   * Measured on a 375x812 phone: the sticky chrome, a 250px image and the default vertical
   * gaps pushed the primary button to 763px — the very bottom edge of the screen, and fully
   * behind the terms notice on a first visit. Every value below is buying that button its
   * way back above the fold.
   */
  .hero{ padding-block:20px 32px; }
  .hero-grid{ gap:20px; }
  .hero-copy .eyebrow{ display:none; }
  .hero-copy h1{ font-size:clamp(1.9rem,7.5vw,2.4rem); margin-bottom:.9rem; }
  .hero-copy .lede{ font-size:1rem; line-height:1.6; margin-bottom:1.4rem; }
  .hero-cta{ gap:10px; margin-bottom:1.1rem; }
}
@media (max-width:560px){
  .grid-artworks{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .card-body{ padding:14px 14px 18px; }
  .card-title{ font-size:1.05rem; }
  .footer-top{ grid-template-columns:1fr; }
  .gallery-thumbs{ gap:6px; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ============================================================
   HOME
   ============================================================ */
.section-head.center{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.section-head{ margin-bottom:clamp(36px,5vw,60px); }
.eyebrow.center{ justify-content:center; }
.center .lede{ margin-inline:auto; }

.hero{ padding-block:clamp(36px,5vw,72px) clamp(44px,6vw,90px); }
.hero-grid{
  display:grid; grid-template-columns:1fr 1.15fr;
  gap:clamp(28px,4.5vw,72px); align-items:center;
}
/* The hero heading carries keywords now, so it is a longer line than a two-word brand
   statement. Capping it slightly below the global h1 size keeps it from swallowing the
   fold, and a ch-based max-width stops it running to a single awkward line on wide screens. */
.hero-copy h1{
  margin-bottom:1.4rem;
  font-size:clamp(2rem, 4.2vw, 3.2rem);
  max-width:16ch;
}
.hero-copy .lede{ font-size:1.1rem; max-width:44ch; margin:0 0 2rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:1.7rem; }
.hero-trust{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem;
  font-size:.79rem; color:var(--ink-faint);
}
.hero-trust .dot{ width:3px; height:3px; border-radius:50%; background:var(--stone-deep); }
/* Price, shipping and the Etsy rating: the reasons to press the button, placed before it. */
.hero-proof{
  list-style:none; margin:-.6rem 0 1.6rem; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:.45rem 1.1rem;
  font-size:.88rem; line-height:1.45; color:var(--ink-soft);
}
.hero-proof .hero-price{ flex-basis:100%; color:var(--ink); }
.hero-proof strong{ font-weight:700; color:var(--ink); }
.hero-proof s{ color:var(--ink-faint); }
.hero-rating{
  display:inline-flex; align-items:center; gap:.45rem; padding-block:4px;
  color:var(--ink-soft); transition:.25s;
}
.hero-rating > span{ border-bottom:1px solid var(--line); }
.hero-rating:hover{ color:var(--gold-text); }
.hero-rating:hover > span{ border-bottom-color:var(--gold-text); }
.hero-rating .hero-star{ width:13px; height:13px; color:var(--gold); flex:none; }
.hero-price-until{ white-space:nowrap; color:var(--gold-text); font-weight:600; }
.hero-visual{ position:relative; }
.hero-img{
  width:100%; height:auto; border-radius:var(--radius);
  box-shadow:var(--shadow-lg); background:var(--stone);
}

/* style showcase — two per row, by design */
.showcase{ background:var(--ivory-deep); }
.showcase-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.4vw,34px); }
.showcase-card{
  display:flex; flex-direction:column; background:var(--ivory-card);
  border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.6,.2,1), box-shadow .45s;
}
.showcase-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.showcase-media{
  aspect-ratio:4/3; overflow:hidden; background:var(--ivory-deep);
  display:grid; place-items:center;
}
.showcase-media img{
  width:100%; height:100%; object-fit:contain;
  transition:transform 1.1s cubic-bezier(.2,.6,.2,1);
}
.showcase-card:hover .showcase-media img{ transform:scale(1.05); }
.showcase-body{ padding:clamp(18px,2vw,30px); display:flex; flex-direction:column; gap:.5rem; flex:1; }
.showcase-body h3{ margin:0; }
.showcase-body p{ margin:0; color:var(--ink-soft); font-size:.92rem; }
.showcase-body .link-arrow{ margin-top:auto; padding-top:1rem; align-self:flex-start; }
.card-num{ font-family:var(--serif); font-size:.95rem; font-style:italic; color:var(--gold-text); }

/* reviews */
.reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.2vw,32px); }
.review{
  margin:0; background:var(--ivory-card); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:clamp(24px,2.6vw,36px);
}
.review p{ margin:.7rem 0 .9rem; font-size:.95rem; line-height:1.7; color:var(--ink-soft); }
.review cite{
  font-style:normal; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint);
}
.reviews-foot{ text-align:center; margin-top:clamp(32px,4vw,52px); }

/* ============================================================
   SHOP
   ============================================================ */
.shop-head{ padding-block:clamp(24px,3vw,44px) clamp(20px,2.4vw,32px); }
.shop-head h1{ margin:.4rem 0 .8rem; }

.filters{
  display:flex; flex-wrap:wrap; gap:10px;
  padding-bottom:clamp(20px,2.5vw,30px); border-bottom:1px solid var(--line);
}
.chip{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.8rem; font-weight:500; letter-spacing:.02em;
  padding:9px 17px; border:1px solid var(--line); border-radius:30px;
  color:var(--ink-soft); transition:.25s;
}
.chip:hover{ border-color:var(--ink); color:var(--ink); background:rgba(38,34,28,.03); }
.chip.is-active{ background:var(--ink); border-color:var(--ink); color:var(--ivory-card); }
.chip-count{ font-size:.68rem; opacity:.6; }

.shop-count{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); margin:clamp(22px,2.6vw,32px) 0 clamp(16px,1.8vw,22px);
}
.grid-artworks{ margin-bottom:clamp(40px,5vw,72px); }

.pagination{ display:flex; justify-content:center; padding-bottom:clamp(48px,6vw,90px); }
.pagination .nav-links{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.pagination .page-numbers{
  min-width:40px; height:40px; padding:0 12px; border-radius:var(--radius);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.85rem; border:1px solid var(--line); transition:.25s;
}
.pagination .page-numbers:hover{ border-color:var(--ink); }
.pagination .page-numbers.current{ background:var(--ink); border-color:var(--ink); color:var(--ivory-card); }

/* ============================================================
   PAGES
   ============================================================ */
.page-body{ padding-block:clamp(40px,5vw,80px) clamp(56px,7vw,110px); }
.page-body h1{ margin-bottom:1.6rem; }
.prose{ max-width:68ch; color:var(--ink-soft); line-height:1.8; }
.prose h2{
  font-family:var(--serif); font-weight:500; color:var(--ink);
  font-size:clamp(1.5rem,2.4vw,2rem); margin:2.4rem 0 .9rem; line-height:1.2;
}
.prose p{ margin:0 0 1.15rem; }
.prose ul{ list-style:disc; padding-left:1.3rem; margin:0 0 1.15rem; }
.prose li{ margin-bottom:.45rem; }
.prose a{ color:var(--gold-text); border-bottom:1px solid rgba(134,106,50,.45); }
.prose a:hover{ border-color:var(--gold); }

/*
 * The artist's portrait on the About page, with his bio. Beside the text on a wide screen, so the
 * bio reads as his; its own block on a phone, where a 300px float would leave a sliver of text.
 * Square and shown whole: the photograph is used exactly as Eran supplied it.
 */
.artist-portrait{ margin:.3rem 0 1.6rem; }
.artist-portrait-img{
  display:block; width:100%; max-width:420px; height:auto; aspect-ratio:1/1;
  border-radius:var(--radius); background:var(--stone); box-shadow:var(--shadow-sm);
}
@media (min-width:641px){
  .artist-portrait{ float:right; width:300px; margin:.4rem 0 1.2rem 2.2rem; }
  .prose .artist-portrait ~ h2{ clear:both; }
}

@media (max-width:1024px){
  .reviews-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; }
  /*
   * The hero on a phone is the canvas, not the gallery shot (2026-09-29). The frame is 16:10 and
   * the same file is zoomed 1.2x inside it, which crops away the lit wall around the canvas and
   * leaves the piece edge to edge: at 375px that is the difference between a Kotel and a beige
   * rectangle. The frame's ratio is fixed, so nothing shifts while the image loads. The old 24vh
   * cap is gone; the eyebrow below, which repeats the logo's own tagline, pays for the height.
   */
  .hero-visual{
    aspect-ratio:16/10; overflow:hidden; border-radius:var(--radius);
    box-shadow:var(--shadow-md); background:var(--stone);
  }
  .hero-img{
    width:100%; height:100%; object-fit:cover; transform:scale(1.2);
    border-radius:0; box-shadow:none;
  }
  .hero{ padding-top:14px; }
  .hero-grid{ gap:16px; }
  .hero-proof{ margin:0 0 1rem; font-size:.84rem; gap:.1rem 1rem; }
  .hero-copy h1{ margin-bottom:.7rem; }
  .hero-copy .lede{ margin-bottom:1.1rem; }
}
@media (max-width:560px){
  .showcase-grid{ gap:12px; }
  .showcase-body{ padding:14px 14px 18px; }
  .showcase-body p{ display:none; }
  .showcase-body h3{ font-size:1.15rem; }
  .reviews-grid{ grid-template-columns:1fr; }
  .filters{ gap:8px; }
  .chip{ padding:8px 14px; font-size:.76rem; }
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(32px,5vw,80px); align-items:start;
}
.contact-intro h1{ margin:.4rem 0 1.2rem; }
.contact-meta{ margin:2.2rem 0 0; padding-top:1.6rem; border-top:1px solid var(--line); }
.contact-meta dt{
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint); margin-top:1.1rem;
}
.contact-meta dt:first-child{ margin-top:0; }
.contact-meta dd{ margin:.25rem 0 0; font-size:.94rem; color:var(--ink-soft); }
.contact-meta dd a{ display:inline-block; padding-block:3px; }
.contact-meta a{ color:var(--gold-text); border-bottom:1px solid rgba(134,106,50,.45); }

.contact-form-wrap{
  background:var(--ivory-card); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:clamp(22px,3vw,40px);
}
.field{ margin:0 0 1.3rem; display:flex; flex-direction:column; gap:.45rem; }
.field label{
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
}
.field .opt{ font-weight:400; letter-spacing:.06em; color:var(--ink-faint); text-transform:none; }
.field input, .field textarea{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--ivory); border:1px solid var(--line); border-radius:var(--radius);
  padding:.85em 1em; transition:border-color .25s, background .25s;
}
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--gold); background:#fff;
}
.field textarea{ resize:vertical; min-height:9em; line-height:1.65; }
.field.has-error input, .field.has-error textarea{ border-color:#9B3B2F; }
.field-error{ font-size:.82rem; color:#9B3B2F; }

/* the honeypot: off-screen rather than display:none, which some bots skip */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.notice{ border-radius:var(--radius); padding:clamp(18px,2vw,26px); }
.notice h2{ font-family:var(--serif); font-weight:500; font-size:1.6rem; margin:0 0 .4rem; }
.notice p{ margin:0; line-height:1.7; }
.notice-good{ background:rgba(30,74,59,.06); border:1px solid rgba(30,74,59,.22); color:var(--ink); }
.notice-bad{
  background:rgba(155,59,47,.06); border:1px solid rgba(155,59,47,.25);
  color:#7C2E24; margin-bottom:1.4rem;
}

@media (max-width:820px){
  .contact-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   GALLERY + LIGHTBOX
   ============================================================ */
/* Thumbnails run down the left of the stage, and the gallery stays put while the long
   right-hand column scrolls past it. Sticky needs the grid to align items to `start` —
   a stretched item fills the row and has nothing left to stick within. */
.product-gallery{
  position:sticky; top:calc(var(--header-h) + 24px);
  display:grid; grid-template-columns:76px minmax(0,1fr);
  gap:12px; align-items:start;
}
.product-gallery > .gallery-main{ grid-column:2; grid-row:1; }
.product-gallery > .gallery-thumbs{ grid-column:1; grid-row:1; }
/* Under the picture it belongs to, in the picture's own column. Every child here is placed
   explicitly, so a new one with no placement of its own lands in the next free cell, which is
   the 76px thumbnail column: the note rendered one word per line down the left edge. */
.product-gallery > .gallery-note{ grid-column:2; grid-row:2; }

.gallery-main{ display:block; width:100%; padding:0; }

.gallery-zoom{
  position:absolute; right:14px; bottom:14px; z-index:2;
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; color:var(--ink);
  background:rgba(251,248,241,.9); backdrop-filter:blur(4px);
  box-shadow:var(--shadow-sm); transition:background .25s, transform .25s;
}
.gallery-zoom svg{ width:19px; height:19px; }
.gallery-zoom:hover{ background:#fff; transform:scale(1.06); }

/* Shown only while a video is on the stage. */
.gallery-play{
  position:absolute; inset:0; z-index:1; width:100%; height:100%;
  display:grid; place-items:center; background:rgba(20,16,10,.12);
  transition:background .25s;
}
.gallery-play[hidden]{ display:none; }
.gallery-play:hover{ background:rgba(20,16,10,.04); }
.gallery-play svg{
  width:34px; height:34px; color:#fff; padding:16px; box-sizing:content-box;
  background:rgba(20,16,10,.55); border-radius:50%; backdrop-filter:blur(3px);
  transition:transform .25s;
}
.gallery-play:hover svg{ transform:scale(1.06); }

.thumb-play{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
  background:rgba(20,16,10,.18);
}
.thumb-play svg{
  width:26px; height:26px; color:#fff;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.gallery-thumb.is-video:hover .thumb-play{ background:rgba(20,16,10,.08); }

/*
 * Mobile gallery.
 *
 * This block has to sit AFTER the desktop rules above, not up in the responsive section at
 * the top of the file. It was written there first and lost every time: same specificity,
 * earlier in the source, so the 76px thumbnail column survived onto phones and rendered the
 * thumbnails at 10x8 pixels — unusable, and invisible in any test that only checked for
 * horizontal overflow.
 */
@media (max-width:820px){
  .product-gallery{
    position:static;
    grid-template-columns:1fr;
    gap:10px;
  }
  .product-gallery > .gallery-main{ grid-column:1; grid-row:1; }
  /* Still directly under the picture, so the thumbnails move down one. */
  .product-gallery > .gallery-note{ grid-column:1; grid-row:2; }
  .product-gallery > .gallery-thumbs{ grid-column:1; grid-row:3; }

  /* A horizontal strip that scrolls, rather than five squeezed squares. Each thumbnail keeps
     a real tap target however many images an artwork ends up with. */
  .gallery-thumbs{
    display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; padding-bottom:4px;
  }
  .gallery-thumb{
    flex:0 0 auto; width:64px; scroll-snap-align:start;
  }
}

/* The lightbox is rendered on every product page and simply hidden, so its images are in
   the HTML for crawlers and the gallery degrades to a list of pictures without JavaScript. */
.lightbox{ position:fixed; inset:0; z-index:var(--z-lightbox); --lightbox-chrome:13rem; }
.lightbox[hidden]{ display:none; }
.lightbox-backdrop{ position:absolute; inset:0; background:rgba(18,15,11,.94); cursor:zoom-out; }
.lightbox-panel{
  position:absolute; inset:0; display:grid; place-items:center;
  padding:clamp(52px,7vw,88px) clamp(16px,6vw,110px);
}
.lightbox-stage{
  position:relative; width:100%; min-height:0;
  display:grid; place-items:center;
}
.lightbox-slide{
  margin:0; width:100%; min-height:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem;
}
.lightbox-slide[hidden]{ display:none; }

/*
 * The media is capped against the viewport, not against its parent. A percentage max-height
 * needs a definite height all the way up the tree, and inside a centred grid it silently
 * resolves to something larger than the screen — the image then runs off the bottom edge
 * with no way to scroll to it. --lightbox-chrome is the space the padding, the caption and
 * the counter need; dvh keeps it honest on mobile, where the browser bar changes the height.
 */
.lightbox-slide img,
.lightbox-slide video,
.lightbox-embed{
  max-width:100%;
  max-height:calc(100vh - var(--lightbox-chrome));
  max-height:calc(100dvh - var(--lightbox-chrome));
}
.lightbox-slide img,
.lightbox-slide video{
  width:auto; height:auto; object-fit:contain; border-radius:2px; background:transparent;
}
.lightbox-embed{
  width:min(100%, 1100px); aspect-ratio:16/9; background:#000; border-radius:2px;
}
.lightbox-embed iframe{ width:100%; height:100%; border:0; display:block; }
.lightbox-slide figcaption{
  color:rgba(246,241,232,.7); font-size:.85rem; text-align:center; max-width:60ch;
}

.lightbox-btn{
  position:absolute; z-index:2; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; color:var(--ivory);
  background:rgba(246,241,232,.1); backdrop-filter:blur(6px);
  transition:background .25s, transform .25s;
}
.lightbox-btn:hover{ background:rgba(246,241,232,.22); }
.lightbox-btn svg{ width:22px; height:22px; }
.lightbox-close{ top:clamp(14px,2vw,26px); right:clamp(14px,2vw,26px); }
.lightbox-prev{ left:clamp(10px,2vw,26px); top:50%; transform:translateY(-50%); }
.lightbox-next{ right:clamp(10px,2vw,26px); top:50%; transform:translateY(-50%); }
.lightbox-prev:hover{ transform:translateY(-50%) translateX(-2px); }
.lightbox-next:hover{ transform:translateY(-50%) translateX(2px); }

.lightbox-count{
  position:absolute; bottom:clamp(14px,2vw,26px); left:50%; transform:translateX(-50%);
  margin:0; color:rgba(246,241,232,.6); font-size:.76rem; letter-spacing:.16em;
}

body.lightbox-open{ overflow:hidden; }

@media (max-width:640px){
  /* The arrows come off the artwork and sit either side of the counter. On a narrow screen
     there is no margin to put them in, and a control laid over the picture both hides part
     of it and catches taps meant for the image. Swiping is the primary gesture here. */
  .lightbox{ --lightbox-chrome:11rem; }
  .lightbox-panel{ padding:60px 10px 74px; }
  .lightbox-btn{ width:44px; height:44px; }
  .lightbox-prev,
  .lightbox-next{ top:auto; bottom:12px; transform:none; }
  .lightbox-prev{ left:calc(50% - 84px); }
  .lightbox-next{ right:calc(50% - 84px); }
  .lightbox-prev:hover{ transform:none; }
  .lightbox-next:hover{ transform:none; }
  .lightbox-count{ bottom:26px; }
}

/* ============================================================
   FOOTER LEGAL + TERMS NOTICE
   ============================================================ */
.footer-legal{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; }
.footer-legal a{
  color:rgba(246,241,232,.6); padding-block:4px;
  border-bottom:1px solid transparent; transition:.25s;
}
.footer-legal a:hover{ color:var(--ivory); border-bottom-color:rgba(246,241,232,.4); }

/*
 * A slim bar at the foot of the page rather than a card in a corner.
 *
 * The corner card looked better and was measurably worse: at 1280x620 — an ordinary laptop
 * once browser chrome is subtracted — bottom-left covered both homepage CTAs, and bottom-right
 * covered the buy button on every product page. There is no safe corner on a layout that puts
 * its primary action on the left of one template and the right of another.
 *
 * A full-width bar plus matching padding on <body> means the notice occupies space of its own
 * instead of borrowing space from something that matters.
 */
.consent{
  position:fixed; z-index:var(--z-consent); left:0; right:0; bottom:0;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.6rem clamp(16px,3vw,32px);
  background:rgba(251,248,241,.97); backdrop-filter:blur(10px);
  color:var(--ink); border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(38,34,28,.07);
  padding:11px clamp(16px,4vw,64px);
  animation:consent-in .45s cubic-bezier(.2,.6,.2,1) both;
}
.consent[hidden]{ display:none; }
.consent-text{ margin:0; font-size:.82rem; line-height:1.5; color:var(--ink-soft); }
.consent-text a{
  color:var(--gold-text); border-bottom:1px solid rgba(128,100,48,.45);
  display:inline-block; padding-block:2px;
}
.consent-text a:hover{ border-bottom-color:var(--gold-text); }
.consent-accept{
  flex:none; min-height:24px;
  font-size:.7rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  background:var(--ink); color:var(--ivory-card);
  padding:.75em 1.7em; border-radius:var(--radius); transition:background .25s;
}
.consent-accept:hover{ background:var(--charcoal); }

/* The bar reserves its own height so it never sits on top of page content. */
body.consent-open{ padding-bottom:var(--consent-h, 64px); }

@keyframes consent-in{ from{ opacity:0; transform:translateY(100%); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .consent{ animation:none; } }

@media (max-width:760px){
  /* Text and button on one row rather than stacked — it halves the height of the notice,
     which is height taken straight off whatever is above it. */
  .consent{
    flex-wrap:nowrap; justify-content:space-between; align-items:center;
    gap:12px; padding:10px 14px;
  }
  .consent-text{ font-size:.76rem; line-height:1.4; }
  .consent-accept{ padding:.7em 1.2em; font-size:.66rem; }
  body.consent-open{ padding-bottom:var(--consent-h, 70px); }
}
}

/* ============================================================
   RATING + FAQ
   ============================================================ */
.rating{
  display:inline-flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  margin:.2rem 0 1rem; padding-block:4px;
  font-size:.82rem; color:var(--ink-soft);
}
.rating .stars svg{ width:14px; height:14px; }
.rating-score{ font-weight:700; color:var(--ink); }
.rating-count{ color:var(--ink-faint); border-bottom:1px solid transparent; transition:.25s; }
.rating:hover .rating-count{ border-bottom-color:var(--line); color:var(--ink-soft); }
.section-head .rating{ justify-content:center; margin-top:1rem; }

.faq-head{ max-width:68ch; margin-bottom:clamp(36px,4vw,56px); }
.faq-head h1{ margin:.4rem 0 1.2rem; }
.faq-list{
  display:grid; gap:clamp(24px,3vw,40px);
  max-width:74ch; padding-top:clamp(28px,3vw,40px); border-top:1px solid var(--line);
}
/* h2 on the FAQ page, h3 inside a guide, where a section heading already sits above them.
   The question should look identical either way: the level is about document structure,
   not about how loud the question is. */
.faq-item h2,
.faq-question{
  font-family:var(--serif); font-weight:500; color:var(--ink);
  font-size:clamp(1.3rem,2vw,1.65rem); line-height:1.25; margin:0 0 .7rem;
}

/* Inside a guide the list is a section among others, so it borrows the rhythm of .related
   and drops the standalone page's own top rule. */
.guide-faq{ border-top:1px solid var(--line); padding-block:clamp(48px,6vw,86px); }
.guide-faq .faq-list{ padding-top:0; border-top:0; }
.faq-list-head{ margin:0 0 clamp(24px,3vw,36px); font-size:clamp(1.6rem,3vw,2.1rem); }
.faq-cta{
  margin-top:clamp(44px,5vw,72px); padding-top:clamp(28px,3vw,40px);
  border-top:1px solid var(--line); max-width:74ch;
}
.faq-cta p{ margin:0 0 1.3rem; color:var(--ink-soft); }

/* ============================================================
   GUIDES
   ============================================================ */
.guide-head{ max-width:70ch; margin-bottom:clamp(30px,3.5vw,48px); }
.guide-head h1{ margin:0 0 1.1rem; }
.guide-byline{
  margin:1.4rem 0 0; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint);
}
.guide-byline .sep{ margin-inline:.5em; opacity:.6; }
.guide-body{ max-width:70ch; }
.guide-body h2{ margin-top:2.8rem; }
.guide-body blockquote{
  margin:2rem 0; padding:0 0 0 1.4rem; border-left:2px solid var(--gold);
  font-family:var(--serif); font-size:1.25rem; line-height:1.5; color:var(--ink);
}

.guide-groups{ padding-bottom:clamp(48px,6vw,90px); display:grid; gap:clamp(44px,5vw,76px); }
.guide-group > h2{ font-size:clamp(1.7rem,3vw,2.4rem); margin:0 0 .6rem; }
.guide-group > .lede{ margin:0 0 clamp(22px,2.5vw,34px); }
.guide-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,26px); }
.guide-list a{
  display:flex; flex-direction:column; height:100%; overflow:hidden;
  background:var(--ivory-card); border:1px solid var(--line-soft); border-radius:var(--radius);
  transition:transform .4s cubic-bezier(.2,.6,.2,1), box-shadow .4s;
}
.guide-list a:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.guide-media{
  display:block; aspect-ratio:16/9; overflow:hidden; background:var(--ivory-deep);
}
.guide-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s cubic-bezier(.2,.6,.2,1);
}
.guide-list a:hover .guide-media img{ transform:scale(1.04); }
.guide-text{
  display:flex; flex-direction:column; flex:1;
  padding:clamp(18px,2vw,26px);
}
.guide-list h3{
  font-family:var(--serif); font-weight:500; font-size:clamp(1.15rem,1.7vw,1.45rem);
  line-height:1.25; margin:0 0 .5rem; color:var(--ink);
}
.guide-list p{ margin:0 0 1rem; font-size:.9rem; line-height:1.65; color:var(--ink-soft); }
.guide-list .link-arrow{ margin-top:auto; align-self:flex-start; }

@media (max-width:760px){
  .guide-list{ grid-template-columns:1fr; }
}

/* prose tables — the size guide needs one, and it must not break narrow screens */
.prose table{
  width:100%; border-collapse:collapse; margin:1.6rem 0; font-size:.92rem;
  display:block; overflow-x:auto;
}
.prose thead th{
  text-align:left; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:600; padding:0 1rem .7rem 0;
  border-bottom:1px solid var(--line); white-space:nowrap;
}
.prose tbody td{
  padding:.85rem 1rem .85rem 0; border-bottom:1px solid var(--line-soft);
  vertical-align:top; line-height:1.55;
}
.prose tbody tr:last-child td{ border-bottom:0; }
.prose ol{ padding-left:1.3rem; margin:0 0 1.15rem; }
.prose ol li{ margin-bottom:.5rem; }

/*
 * Data tables on a phone.
 *
 * A three-column table does not shrink to 375px, it compresses — 110px per column, every
 * cell wrapping to four lines. Horizontal scrolling inside an article is little better.
 * Each row becomes its own small card instead, with the column heading carried down as a
 * label, so the table reads as a list rather than a spreadsheet nobody can use.
 */
@media (max-width:700px){
  .prose table.stack-on-mobile{ display:block; overflow:visible; }
  .prose table.stack-on-mobile thead{
    position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px);
  }
  .prose table.stack-on-mobile tbody,
  .prose table.stack-on-mobile tr,
  .prose table.stack-on-mobile td{ display:block; width:100%; }
  .prose table.stack-on-mobile tr{
    background:var(--ivory-card); border:1px solid var(--line-soft); border-radius:var(--radius);
    padding:14px 16px; margin-bottom:12px;
  }
  .prose table.stack-on-mobile td{ padding:6px 0; border:0; }
  .prose table.stack-on-mobile td::before{
    content:attr(data-label);
    display:block; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--ink-faint); margin-bottom:2px;
  }
  .prose table.stack-on-mobile td:first-child{
    font-family:var(--serif); font-size:1.15rem; color:var(--ink); line-height:1.25;
  }
  .prose table.stack-on-mobile td:first-child::before{ display:none; }
}

/* further reading, at the foot of the product summary */
.reading{ margin-top:2.2rem; padding-top:1.7rem; border-top:1px solid var(--line); }
.reading h2{
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 .9rem; font-weight:600;
}
.reading .reading-second{ margin-top:1.6rem; }
.reading li{ border-bottom:1px solid var(--line-soft); }
.reading li:last-child{ border-bottom:0; }
.reading a{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.75rem 0; font-size:.9rem; color:var(--ink-soft); transition:color .25s;
}
.reading a:hover{ color:var(--gold-text); }
.reading .arr{ transition:transform .25s; }
.reading a:hover .arr{ transform:translateX(3px); }

/* CPRA opt-out control — a footer link in appearance, a button in behaviour */
.footer-optout{
  padding:4px 0; font-family:inherit; font-size:inherit; text-align:left;
  color:rgba(246,241,232,.6); border-bottom:1px solid transparent; transition:.25s;
}
.footer-optout[hidden]{ display:none; }
.footer-optout:hover:not(:disabled){ color:var(--ivory); border-bottom-color:rgba(246,241,232,.4); }
.footer-optout:disabled{ cursor:default; opacity:.75; }

/* ============================================================
   TOUCH REFINEMENTS
   ============================================================ */
/*
 * WCAG's floor is 24px and the site already clears it everywhere. Apple and Google both ask
 * for 44px, which is the size a thumb actually needs, so on touch pointers the standalone
 * controls are raised to that. Inline links inside a sentence are deliberately excluded —
 * padding them apart would break the line they belong to, and the spec exempts them for
 * exactly that reason.
 */
@media (hover:none) and (pointer:coarse){
  .btn{ min-height:48px; }
  .contact-form button[type="submit"],
  .hero-cta .btn{ width:100%; }

  .rating,
  .proof-link,
  .link-arrow,
  .footer-col a,
  .footer-legal a,
  .footer-optout,
  .crumbs a,
  .mn-secondary a,
  .reading a,
  .pagination .page-numbers,
  .consent-text a,
  .consent-accept,
  .chip{ min-height:44px; display:inline-flex; align-items:center; }
  /* 36px rather than 44: it shares the hero's first screen with the button that matters more,
     and it sits on its own with nothing to mis-tap beside it. */
  .hero-rating{ min-height:36px; }

  /* The accept button is the one control every first-time visitor touches, and the compact
     bar had squeezed it to 28px tall. */
  .consent-accept{ justify-content:center; padding-inline:1.4em; }

  .footer-col a,
  .footer-legal a,
  .footer-optout{ display:flex; }

  .reading a{ display:flex; justify-content:space-between; }

  /* The spec accordion is the one place a visitor taps repeatedly. */
  .spec-q{ padding-block:1.25rem; }

  .menu-btn{ width:44px; height:44px; }

  /* A one-line card title was a 20px target. The card image above it is a large link too,
     but the title is the one a screen reader and a careful thumb both go for. */
  .card-title a{ display:block; min-height:44px; }
}

@media (max-width:560px){
  /* Two columns of five-word trust points is four lines of ragged text; one column reads
     as a list, which is what it is. */
  .trust{ grid-template-columns:1fr; gap:.55rem; }
  .lightbox-count{ font-size:.7rem; }
}

/* ------------------------------------------------------- contact form consent boxes */

/*
 * Named .form-consent, not .consent: that one is already the cookie bar at the foot of every
 * page, and reusing it here would have styled the two as one thing.
 */

/*
 * Checkbox and label sit on one baseline rather than the label wrapping under the box, which
 * is what happens by default once the text runs to two lines. The 44px tap target comes from
 * WCAG 2.5.5; the box itself is 18px, so the padding on the label is what makes the whole row
 * touchable rather than asking for a fingertip on an 18px square.
 */
.form-consent {
	margin: 1.5rem 0 1.75rem;
	padding: 1.1rem 1.25rem;
	background: var(--ivory-deep);
	border: 1px solid var(--stone);
	border-radius: 3px;
}

.field-check {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	margin: 0 0 .75rem;
}

.field-check:last-child {
	margin-bottom: 0;
}

.field-check input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--gold-btn);
	cursor: pointer;
}

.field-check label {
	font-size: .9rem;
	line-height: 1.5;
	color: var(--ink);
	cursor: pointer;
	/* Pulls the first line of text level with the box, which sits lower than the cap height. */
	margin-top: -2px;
}

.field-check label a {
	color: var(--gold-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.field-check.has-error input[type="checkbox"] {
	outline: 2px solid #9B3B2F;
	outline-offset: 2px;
}

.form-consent .field-error {
	display: block;
	margin: -.35rem 0 .75rem 1.6rem;
}

/* ------------------------------------------------------- artwork figures inside a guide */

/*
 * Figures break out slightly wider than the 72ch measure the prose is set to, because an image
 * held to the width of a text column reads as an afterthought rather than as part of the
 * argument. Clamped so it never exceeds the wrap on a narrow window.
 */
.prose-figure {
	margin: clamp(28px, 4vw, 48px) 0;
	width: min(100%, 92vw);
}

.prose-figure .figure-media {
	display: block;
	border-radius: 3px;
	overflow: hidden;
	background: var(--ivory-deep);
}

.prose-figure.is-row .figure-media {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
	background: none;
	overflow: visible;
}

.prose-figure .figure-item {
	display: block;
	text-decoration: none;
	color: inherit;
}

.prose-figure img {
	display: block;
	width: 100%;
	height: auto;
	/* contain, never cover: cropping the artwork is the one thing this site must not do. */
	object-fit: contain;
}

.prose-figure.is-row .figure-item img {
	border-radius: 3px;
	background: var(--ivory-deep);
}

/*
 * The piece's name sits under each image only in a comparison, where "which one is that" is the
 * question a reader is actually asking. A single figure carries its name in the caption instead.
 */
.prose-figure .figure-name {
	display: none;
	margin-top: .5rem;
	font-size: .8rem;
	letter-spacing: .02em;
	color: var(--ink-faint);
}

.prose-figure.is-row .figure-name {
	display: block;
	text-align: center;
}

.prose-figure .figure-item:hover .figure-name {
	color: var(--gold-text);
}

.prose-figure figcaption {
	margin-top: .8rem;
	font-size: .88rem;
	line-height: 1.55;
	color: var(--ink-soft);
	/* A rule rather than italics: the caption is editorial, not an aside to be skimmed past. */
	border-left: 2px solid var(--stone);
	padding-left: .9rem;
}

@media (max-width: 560px) {
	.prose-figure figcaption {
		font-size: .84rem;
	}
}

/* ------------------------------------------------------------------- format picker */

/*
 * Real links to ?format=, not buttons. With scripting off they still work, each format is
 * something a person can send to someone else, and the gallery code never had to learn about
 * variants at all.
 */
.format-picker {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 8px;
	margin: 1.4rem 0 1.6rem;
}

.format-option {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding: .7rem .85rem;
	border: 1px solid var(--stone);
	border-radius: 3px;
	background: var(--ivory-card);
	text-decoration: none;
	color: var(--ink);
	transition: border-color .15s ease, background .15s ease;
}

.format-option:hover {
	border-color: var(--gold-soft);
	background: var(--ivory-deep);
}

.format-option.is-current {
	border-color: var(--charcoal);
	background: var(--ivory-deep);
	/* A second cue beside colour, so the choice is not carried by hue alone. */
	box-shadow: inset 0 0 0 1px var(--charcoal);
}

.format-name {
	font-size: .88rem;
	letter-spacing: .01em;
}

.format-price {
	font-size: .8rem;
	color: var(--ink-faint);
}

.format-option.is-current .format-price {
	color: var(--gold-text);
}

/* The line tying a gift guide back to its hub. Quiet: it is navigation, not content. */
.guide-cluster{
  max-width:70ch; margin:clamp(28px,3vw,40px) 0 0; padding-top:clamp(20px,2vw,28px);
  border-top:1px solid var(--line); font-size:.9rem; color:var(--ink-soft);
}

.guide-group-hub{ margin:-.4rem 0 clamp(20px,2vw,28px); font-size:.95rem; }
.guide-group-hub a{ color:var(--gold); text-decoration:none; }
.guide-group-hub a:hover{ text-decoration:underline; }


/* The word between the two ends of a price range. Quieter than the figures it joins. */
.price-to{ color:var(--ink-soft); font-size:.62em; font-weight:400; letter-spacing:.02em; }
.card-price .price-to{ font-size:.72em; }

/* The formats a piece is sold in, on its card.
   Set in gold rather than the muted ink used for secondary text: on a grid where almost every
   piece is a stretched canvas, the two that are also framed or on metal are the differentiator,
   and in grey at 11px it read as a footnote nobody was going to notice. Still text rather than
   a badge over the image, because a badge on a page of artwork cheapens the artwork. */
.card-formats{
  margin:.35rem 0 0; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); font-weight:600;
}

/* A card showing more than one format crossfades between them: the same painting stretched,
   then framed. All the images occupy one grid cell so the card never changes height, which on
   a grid of twenty-four would be a shelf of shifting rows. */
.card-media.has-formats .card-frame{
  grid-area:1 / 1;
  opacity:0; transition:opacity .9s ease, transform 1.1s cubic-bezier(.2,.6,.2,1);
}
.card-media.has-formats .card-frame.is-on{ opacity:1; }

/* Reduced motion means no crossfade and no rotation: the first format simply stays. The script
   checks the same query, so the images never start cycling in the first place. */
@media (prefers-reduced-motion: reduce){
  .card-media.has-formats .card-frame{ transition:none; }
}

/* Shop notes: the reading matter under the grid.
   Deliberately quiet. A visitor who came to look at art has already seen the art by the time
   they reach this, and anybody still scrolling is deciding rather than browsing. Narrow
   measure, softer ink, and a rule above it so it reads as a separate part of the page rather
   than as more shop. */
.shop-notes{
  border-top:1px solid var(--line); margin-top:clamp(48px,6vw,86px);
  padding-block:clamp(40px,5vw,68px);
}
.shop-notes .wrap{ max-width:70ch; }
.shop-notes h2{
  font-family:var(--serif); font-weight:500; color:var(--ink);
  font-size:clamp(1.15rem,1.8vw,1.4rem); margin:clamp(24px,3vw,34px) 0 .5rem;
}
.shop-notes h2:first-child{ margin-top:0; }
.shop-notes p{ margin:0 0 .9rem; color:var(--ink-soft); font-size:.95rem; line-height:1.72; }
.shop-notes a{ color:var(--gold); }

/* ---------------------------------------------------------------- buying a variation
 *
 * Sizes and frame colours, once a format is sold here rather than at Etsy. Built to read as a
 * quieter relative of .format-picker above: the format is the bigger decision and keeps the
 * larger control, and these sit under it without competing.
 */

.buy-axis {
	margin: 0 0 1rem;
}

.buy-axis-label {
	display: block;
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted, #7a7266);
	margin-bottom: .5rem;
}

.buy-axis-options {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.buy-option {
	padding: .42rem .8rem;
	border: 1px solid var(--stone);
	border-radius: 3px;
	background: var(--ivory-card);
	color: var(--ink);
	text-decoration: none;
	font-size: .92rem;
	line-height: 1.2;
	transition: border-color .15s ease, background .15s ease;
}

.buy-option:hover {
	border-color: var(--gold-soft);
	background: var(--ivory-deep);
}

.buy-option.is-current {
	border-color: var(--charcoal);
	background: var(--charcoal);
	color: var(--ivory);
	/* Colour is not the only cue, for the same reason it is not on .format-option. */
	font-weight: 600;
}

.product-price-chosen {
	margin: 1.2rem 0 1rem;
}

/*
 * Choosing a size or a colour reloads the page, and landing at the top of the document would
 * make the gallery and the title scroll past every time. Landing on the product instead keeps
 * the title, the format tabs and the picker in the same place they were, so the only thing that
 * appears to change is the choice. The margin clears the sticky header.
 */
#product {
	scroll-margin-top: 96px;
}

.buy-form {
	margin: 0 0 .9rem;
}

.btn-buy {
	width: 100%;
}

/* ------------------------------------------------------------------------ the basket */

.cart-btn {
	position: relative;
	text-decoration: none;
	color: var(--ink);
}

.cart-count {
	position: absolute;
	top: -2px;
	right: -4px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--gold);
	color: #fff;
	font-size: .68rem;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

/*
 * WooCommerce's notices, in this theme's voice rather than its own. The success one carries the
 * "added to your basket" message, which is the only feedback the buy button gives.
 */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	margin: 0 0 1.2rem;
	padding: .8rem 1rem;
	border-left: 3px solid var(--gold);
	background: var(--ivory-card);
	border-radius: 3px;
	font-size: .95rem;
	list-style: none;
}

.woocommerce-error {
	border-left-color: #b23c3c;
}

.woocommerce-message a,
.woocommerce-info a {
	color: var(--gold);
	font-weight: 600;
}

/* ------------------------------------------------------- the basket drawer, after adding */

.drawer-scrim {
	position: fixed;
	inset: 0;
	z-index: 120;
	background: rgba(38, 34, 28, .38);
	animation: drawer-fade .2s ease-out;
}

/*
 * From the side, not the middle. The artwork stays visible behind it, so the page reads as
 * having gained something rather than as having been interrupted.
 */
.drawer {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	width: min(420px, 100%);
	height: 100%;
	background: var(--ivory);
	box-shadow: -14px 0 44px rgba(38, 34, 28, .2);
	animation: drawer-in .22s cubic-bezier(.22, .8, .3, 1);
}

.drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.3rem;
	border-bottom: 1px solid var(--stone);
	background: var(--ivory-card);
}

.drawer-title {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin: 0;
	font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
	font-size: 1.4rem;
	font-weight: 600;
}

.drawer-icon {
	position: relative;
	display: inline-flex;
	width: 26px;
	height: 26px;
	color: var(--ink);
}

.drawer-icon svg { width: 100%; height: 100%; }

.drawer-count {
	position: absolute;
	top: -5px;
	right: -7px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--gold);
	color: #fff;
	font-family: var(--sans, Mulish, system-ui, sans-serif);
	font-size: .66rem;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

.drawer-x {
	font-size: 1.7rem;
	line-height: 1;
	color: var(--muted, #7a7266);
	text-decoration: none;
}

.drawer-x:hover { color: var(--ink); }

.drawer-items {
	flex: 1;
	overflow-y: auto;
	padding: 1.1rem 1.3rem;
}

.drawer-item {
	position: relative;
	display: grid;
	grid-template-columns: 92px 1fr;
	gap: 1rem;
	padding: 1rem;
	margin-bottom: .8rem;
	border: 1px solid var(--stone);
	border-radius: 5px;
	background: var(--ivory-card);
}

/* Big enough to recognise the piece, which a 32px square is not. */
.drawer-thumb img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 3px;
}

.drawer-lines {
	display: flex;
	flex-direction: column;
	gap: .18rem;
	min-width: 0;
	padding-right: 1.2rem;
}

.drawer-name {
	font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
	font-size: 1.14rem;
	line-height: 1.2;
}

.drawer-spec {
	font-size: .84rem;
	color: var(--muted, #7a7266);
}

.drawer-price {
	margin-top: .25rem;
	font-weight: 600;
}

.drawer-price .was {
	margin-right: .4rem;
	color: var(--muted, #7a7266);
	font-weight: 400;
	text-decoration: line-through;
}

.drawer-remove {
	position: absolute;
	top: .45rem;
	right: .6rem;
	font-size: 1.2rem;
	line-height: 1;
	color: var(--muted, #7a7266);
	text-decoration: none;
}

.drawer-remove:hover { color: #b23c3c; }

.drawer-foot {
	padding: 1.1rem 1.3rem 1.4rem;
	border-top: 1px solid var(--stone);
	background: var(--ivory-card);
}

.drawer-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 1.05rem;
}

.drawer-sum { font-weight: 700; }

.drawer-note {
	margin: .3rem 0 1rem;
	font-size: .82rem;
	color: var(--muted, #7a7266);
}

/* The reason the panel exists gets the gold and the total on it. */
.drawer-checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	width: 100%;
	margin-bottom: 8px;
}

.drawer-total { font-weight: 700; }

.btn-quiet {
	display: block;
	width: 100%;
	padding: .78rem 1rem;
	border: 1px solid var(--stone);
	border-radius: 3px;
	background: transparent;
	color: var(--ink);
	text-align: center;
	text-decoration: none;
	font-size: .92rem;
}

.btn-quiet:hover {
	border-color: var(--gold-soft);
	background: var(--ivory-deep);
}

.drawer-trust {
	display: flex;
	justify-content: space-between;
	gap: .5rem;
	list-style: none;
	margin: 1.1rem 0 0;
	padding: .7rem 0 0;
	border-top: 1px solid var(--stone);
	font-size: .74rem;
	color: var(--muted, #7a7266);
	text-align: center;
}

.drawer-keep {
	display: block;
	margin-top: .9rem;
	text-align: center;
	font-size: .86rem;
	color: var(--muted, #7a7266);
}

@keyframes drawer-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes drawer-in   { from { transform: translateX(100%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.drawer-scrim, .drawer { animation: none; }
}

/* --------------------------------------------------------------------------- the basket page */

.cart-lines {
	list-style: none;
	margin: 0 0 1.6rem;
	padding: 0;
	border-top: 1px solid var(--stone);
}

.cart-line {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 1.6rem;
	padding: 1.6rem 0;
	border-bottom: 1px solid var(--stone);
}

/*
 * The artwork at a size worth looking at. WooCommerce's default is a 32px thumbnail, which is an
 * identifier for a row in a table; this is the picture somebody is about to pay for.
 */
.cart-art {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	border: 1px solid var(--stone);
	background: var(--ivory-deep);
}

.cart-line-name {
	margin: 0 0 .7rem;
	font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
	font-size: 1.55rem;
	line-height: 1.15;
	font-weight: 600;
}

.cart-line-name a {
	color: var(--ink);
	text-decoration: none;
}

.cart-line-name a:hover {
	color: var(--gold);
}

.cart-line-specs {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .18rem .8rem;
	margin: 0 0 .9rem;
	font-size: .92rem;
}

.cart-line-specs dt {
	color: var(--muted, #7a7266);
}

.cart-line-specs dd {
	margin: 0;
	font-weight: 600;
}

.cart-line-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .55rem;
	margin: 0 0 .9rem;
}

.cart-line-price .now {
	font-size: 1.3rem;
	font-weight: 600;
}

.cart-line-price .was {
	color: var(--muted, #7a7266);
	text-decoration: line-through;
}

.cart-line-price .saved {
	padding: .12rem .5rem;
	border-radius: 3px;
	background: var(--gold);
	color: #fff;
	font-size: .78rem;
	font-weight: 600;
}

/* The one expectation this product can disappoint, said before the money and not after. */
.cart-note {
	margin: 0 0 1.6rem;
	padding: 1rem 1.2rem;
	border: 1px solid var(--stone);
	border-left: 3px solid var(--gold-soft);
	border-radius: 3px;
	background: var(--ivory-card);
	font-size: .92rem;
	line-height: 1.6;
}

.cart-note p {
	margin: 0;
}

.cart-note-head {
	margin: 0 0 .3rem !important;
	font-size: .74rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted, #7a7266);
}

.cart-actions {
	margin-bottom: 2rem;
}

@media (max-width: 640px) {
	.cart-line {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.cart-line-art {
		max-width: 280px;
	}
}

/* ------------------------------------------------------------------ checkout and account
 *
 * From the checkout Eran designed in Claude Design, applied to the markup WooCommerce actually
 * emits.
 *
 * What is taken: the panel language -- numbered heads, ivory cards, the field grid, the focus
 * ring, the secure line under the button. What is not: the design's accordion, where each step
 * collapses to a one-line recap with an Edit link. That would mean re-implementing WooCommerce's
 * checkout in JavaScript, and a bespoke reimplementation of a payment form is the last place to
 * put one. The panels are open; everything else is the design.
 */

.woocommerce-checkout .wrap,
.woocommerce-cart .wrap,
.woocommerce-account .wrap {
	max-width: 1180px;
}

/*
 * WooCommerce wraps billing and shipping in .col2-set > .col-1 / .col-2 and gives each a floated
 * 47%. Inside a grid column that is 47% of an already narrow column, which is how the form ended
 * up about 290px wide with "First name" wrapping onto two lines. The float is undone before the
 * page grid is applied, or the two fight each other.
 */
.woocommerce-checkout .col2-set { width: 100%; }

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	width: 100%;
	float: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 900px) {
	form.checkout.woocommerce-checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 380px;
		gap: clamp(28px, 4vw, 64px);
		align-items: start;
	}

	#customer_details { grid-column: 1; min-width: 0; }

	form.checkout.woocommerce-checkout > .checkout-summary { grid-column: 2; }
}

/* Each block of the checkout as one of the design's panels. */
.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields {
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	background: var(--ivory-card);
	margin-bottom: 14px;
	padding: 18px 22px 24px;
}

/*
 * The panel heads a buyer fills in sit on one line beside their number, so the badge has to be a
 * flex row. The summary head is not numbered and takes a rule under it instead -- an earlier edit
 * caught the shared selector list and turned all four into blocks, which dropped the "1" onto its
 * own line above "Billing details".
 */
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 1.35rem;
	margin: 0 0 1.1rem;
	color: var(--ink);
}

#order_review_heading {
	display: block;
	padding-bottom: .9rem;
	border-bottom: 1px solid var(--line-soft);
	font-family: var(--serif);
	font-weight: 400;
	font-size: 1.5rem;
	margin: 0 0 1.2rem;
	color: var(--ink);
}

/*
 * The numbered badge beside each step. Counted in CSS so the numbers follow whatever panels are
 * actually printed -- WooCommerce hides the shipping block when it is not needed, and a hardcoded
 * 1/2/3 would then read 1, 3 with nothing in between. Only visible headings increment.
 */
form.checkout { counter-reset: kotel-step; }

/*
 * Only the panels a buyer fills in. The order summary carried a "3" and it is not a third step --
 * nothing is completed there, it is the thing being confirmed. Numbering it made the form look
 * like it had one more stage than it has.
 */
.woocommerce-billing-fields > h3::before,
.woocommerce-shipping-fields > h3::before {
	counter-increment: kotel-step;
	content: counter(kotel-step);
	width: 24px;
	height: 24px;
	border-radius: 50%;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	background: var(--ink);
	color: #fff;
	font-family: var(--sans);
	font-size: .72rem;
	font-weight: 700;
}

/* --- fields --- */

.woocommerce form .form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 13px;
	padding: 0;
}

.woocommerce form .form-row label {
	font-size: .74rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-faint);
	font-weight: 600;
}

.woocommerce form .form-row .required { color: var(--gold-text, var(--gold)); text-decoration: none; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
	width: 100%;
	min-height: 45px;
	box-sizing: border-box;
	padding: 12px 13px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	color: var(--ink);
	font-family: var(--sans);
	font-size: .92rem;
	line-height: 1.4;
	outline: none;
	transition: border-color .2s, box-shadow .2s;
}

.woocommerce form .form-row input.input-text::placeholder { color: var(--stone-deep); }

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(168, 132, 63, .12);
}

/*
 * Country and state are select2, which draws its own box inside the one above and brings its own
 * height, padding and line-height with it. Left alone the chosen value rendered below the border
 * rather than inside it, so those two fields stood out from every text field beside them.
 * select2's inner parts are neutralised and the outer box does the work.
 */
.woocommerce .select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
	height: auto;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 1.4;
	color: var(--ink);
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: 10px;
	height: 20px;
	transform: translateY(-50%);
}

.woocommerce .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(168, 132, 63, .12);
}

.select2-container--default .select2-dropdown {
	border-color: var(--line);
	border-radius: var(--radius);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	padding: 9px 11px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-family: var(--sans);
	font-size: .92rem;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--ivory-deep);
	color: var(--ink);
}

/* Woo marks a failed field with a class and a colour and nothing else. Colour alone is not a
   message, so the border thickens too. */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: #8C3B2F;
	border-width: 2px;
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: 100%; float: none; }

@media (min-width: 560px) {
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 13px;
	}

	.woocommerce form .form-row-wide,
	.woocommerce form .form-row.notes { grid-column: 1 / -1; }
}

/* --- the order summary --- */

/* The card is the aside; #order_review inside it is just content. */
#order_review { padding: 0; border: none; background: transparent; }

.checkout-summary { position: sticky; top: 100px; }

@media (max-width: 899px) { .checkout-summary { position: static; } }

.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.2rem;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding: 7px 0;
	border-bottom: 1px solid var(--line-soft);
	text-align: left;
	vertical-align: top;
	font-size: .92rem;
	font-weight: 400;
}

.woocommerce-checkout-review-order-table th { color: var(--ink-soft); font-weight: 300; }

.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table th:last-child {
	text-align: right;
	white-space: nowrap;
	color: var(--ink);
	font-weight: 500;
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
	border-bottom: none;
	border-top: 1px solid var(--line);
	padding-top: 1rem;
}

.woocommerce-checkout-review-order-table .order-total th {
	font-size: .76rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-faint);
	font-weight: 600;
}

.woocommerce-checkout-review-order-table .order-total td {
	font-family: var(--serif);
	font-size: 2rem;
	line-height: 1;
	color: var(--ink);
}

.woocommerce-checkout-review-order-table .variation {
	margin: .2rem 0 0;
	font-size: .82rem;
	color: var(--ink-faint);
}

.woocommerce-checkout-review-order-table .variation dt,
.woocommerce-checkout-review-order-table .variation dd { display: inline; margin: 0; padding: 0; }
.woocommerce-checkout-review-order-table .variation dd { margin-right: .5rem; }

/* --- payment --- */

#payment { border: none; background: transparent; }

#payment ul.payment_methods {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	border: none;
}

#payment ul.payment_methods li {
	padding: 11px 13px;
	margin-bottom: 8px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
}

#payment ul.payment_methods li label { font-weight: 600; cursor: pointer; }

#payment .payment_box {
	margin: .7rem 0 0;
	padding: .8rem 1rem;
	border-radius: var(--radius);
	background: var(--ivory-deep);
	font-size: .88rem;
	color: var(--ink-soft);
}

#payment .payment_box p:last-child { margin-bottom: 0; }

#place_order {
	width: 100%;
	padding: .95rem 1rem;
	border: none;
	border-radius: var(--radius);
	background: var(--gold-btn, var(--gold));
	color: #fff;
	font-family: var(--sans);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .15s ease;
}

#place_order:hover { background: var(--charcoal); }

/* The line under the button, which is the design's own reassurance. */
#payment::after {
	content: "\1F512  Secure checkout";
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 1.2rem;
	font-size: .76rem;
	color: var(--ink-faint);
}

.woocommerce-terms-and-conditions-wrapper { margin-bottom: 1rem; font-size: .88rem; }

/* ------------------------------------------------------------------ consent
 * The one control that blocks the sale, made to read like one.
 *
 * It was inheriting the theme's field-label treatment -- 11.8px, uppercase,
 * letter-spaced, muted -- beside a 13px browser-default checkbox, under a 14px
 * privacy paragraph that is optional reading. The required thing was the
 * smallest and palest thing in the block, so shoppers skipped it, pressed Place
 * order and met an error notice at the top of the page, nowhere near the cause.
 *
 * Not pre-ticked and not hidden: consent still has to be given. Only made
 * legible, and given a box big enough to aim at on a phone.
 */
.woocommerce-privacy-policy-text p{
  font-size:.78rem; line-height:1.65; color:var(--ink-faint); margin:0 0 .9rem;
}
/*
 * Selectors carry the full .woocommerce form .form-row weight on purpose. The generic checkout
 * label rule above is two classes and two elements deep, so a plain .kotel-consent label loses to
 * it and the consent line stayed uppercase and tiny while the rest of the block changed -- which
 * is exactly how it looked when this was first deployed. Matching the weight beats reaching for
 * !important, which would only move the same fight one round later.
 */
.woocommerce form .form-row.kotel-consent{
  display:block; margin:0 0 1.2rem; padding:.85rem 1rem;
  background:#fff; border:1px solid var(--stone); border-radius:var(--radius);
  transition:border-color .2s, background .2s;
}
.woocommerce form .form-row.kotel-consent label{
  display:flex; align-items:flex-start; gap:.7rem; margin:0; cursor:pointer;
  font-size:.88rem; line-height:1.55; letter-spacing:normal; text-transform:none;
  color:var(--ink); font-weight:400;
}
.woocommerce form .form-row.kotel-consent input[type="checkbox"]{
  flex:0 0 auto; width:19px; height:19px; margin:1px 0 0; accent-color:var(--gold-btn);
  cursor:pointer;
}
.woocommerce form .form-row.kotel-consent a{
  color:var(--gold-text); border-bottom:1px solid var(--gold-pale);
}
.woocommerce form .form-row.kotel-consent a:hover{ border-bottom-color:var(--gold-text); }
.woocommerce form .form-row.kotel-consent .required{
  border:0; text-decoration:none; color:var(--gold-text);
}

/* Ticked, and visibly so -- on the way back up the page a shopper should be able to tell at a
   glance that this one is already dealt with. */
.woocommerce form .form-row.kotel-consent:has(input:checked){
  background:var(--ivory-card); border-color:var(--gold-pale);
}

/* And when the browser stops the submit, the block says so, rather than leaving the shopper to
   hunt for a notice somewhere above the fold. */
.woocommerce form .form-row.kotel-consent:has(input:invalid:focus){
  border-color:#B3261E; background:#FDF6F5;
}
.woocommerce form .form-row.kotel-consent input:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px;
}

/* --- coupon and login bars --- */

.woocommerce-form-coupon-toggle,
.woocommerce-form-login-toggle { margin-bottom: 1.2rem; }

.woocommerce form.checkout_coupon,
.woocommerce form.login {
	padding: 1.1rem;
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	background: var(--ivory-card);
}

.woocommerce form.checkout_coupon .button,
.woocommerce-cart .actions .button {
	padding: .7rem 1.1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: transparent;
	color: var(--ink);
	font: inherit;
	font-size: .9rem;
	cursor: pointer;
}

/* --- cart totals, which the cart page hands to WooCommerce --- */

.cart_totals {
	max-width: 420px;
	margin-left: auto;
	padding: 26px 24px;
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	background: var(--ivory-card);
}

.cart_totals h2 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 1.5rem;
	margin: 0 0 1.2rem;
	padding-bottom: .9rem;
	border-bottom: 1px solid var(--line-soft);
}

.cart_totals table { width: 100%; border-collapse: collapse; }

.cart_totals th,
.cart_totals td {
	padding: 7px 0;
	border-bottom: 1px solid var(--line-soft);
	text-align: left;
	font-size: .92rem;
	font-weight: 400;
}

.cart_totals th { color: var(--ink-soft); font-weight: 300; }
.cart_totals td { text-align: right; color: var(--ink); font-weight: 500; }

.cart_totals .order-total th,
.cart_totals .order-total td {
	border-bottom: none;
	border-top: 1px solid var(--line);
	padding-top: 1rem;
}

.cart_totals .order-total th {
	font-size: .76rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-faint);
	font-weight: 600;
}

.cart_totals .order-total td {
	font-family: var(--serif);
	font-size: 2rem;
	line-height: 1;
}

.wc-proceed-to-checkout { margin-top: 1.4rem; }

.wc-proceed-to-checkout .checkout-button {
	display: block;
	width: 100%;
	padding: .95rem 1rem;
	border-radius: var(--radius);
	background: var(--gold-btn, var(--gold));
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.wc-proceed-to-checkout .checkout-button:hover { background: var(--charcoal); }

/* ----------------------------------------------------------- order confirmation and flow
 *
 * From the confirmation Eran designed in Claude Design. That design was built on this theme's
 * own stylesheet, so it reuses .wrap, .eyebrow, .section and .cart-lines and adds only what a
 * confirmation needs.
 *
 * Every token it referenced already existed here at the same value, with one exception: it
 * carries --ink-faint at #8A8275, and this file corrected that to #6E685E because the original
 * measures 3.38:1 and fails contrast. The design's value is not restored -- it would undo a fix
 * on the small print of a receipt, which is the last text anyone should have to squint at.
 */

.steps {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding-block: 4px 0;
}

.step { display: flex; align-items: center; gap: 9px; }

.step .dot {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	border: 1px solid var(--stone-deep);
	color: var(--ink-faint);
	font-size: .7rem;
	font-weight: 700;
	background: var(--ivory-card);
}

.step .nm {
	font-size: .74rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-faint);
	font-weight: 600;
	white-space: nowrap;
}

.step.done .dot { background: var(--gold); border-color: var(--gold); color: #fff; }
.step.done .nm  { color: var(--ink-soft); }
.step.active .dot { background: var(--ink); border-color: var(--ink); color: #fff; }
.step.active .nm  { color: var(--ink); }

.conf-hero {
	text-align: center;
	padding-block: clamp(46px, 6vw, 84px) clamp(30px, 4vw, 48px);
}

.conf-hero .seal {
	width: 82px;
	height: 82px;
	border-radius: 50%;
	margin: 0 auto 26px;
	display: grid;
	place-items: center;
	border: 1px solid var(--gold);
	color: var(--gold);
	background: rgba(168, 132, 63, .06);
}

.conf-hero .seal svg { width: 34px; height: 34px; }
.conf-hero .eyebrow { justify-content: center; }

.conf-hero h1 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(2.1rem, 3.8vw, 3.1rem);
	line-height: 1.08;
	margin: 0 0 .8rem;
	color: var(--ink);
}

.conf-hero p {
	color: var(--ink-soft);
	font-weight: 300;
	font-size: 1.05rem;
	max-width: 52ch;
	margin: 0 auto;
	line-height: 1.7;
}

.conf-meta {
	display: flex;
	justify-content: center;
	gap: clamp(20px, 4vw, 54px);
	flex-wrap: wrap;
	margin-top: clamp(28px, 3.5vw, 40px);
	padding-top: clamp(24px, 3vw, 32px);
	border-top: 1px solid var(--line-soft);
}

.conf-meta .cell { text-align: center; }

.conf-meta .k {
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-faint);
	font-weight: 600;
}

.conf-meta .v {
	font-family: var(--serif);
	font-size: 1.2rem;
	color: var(--ink);
	margin-top: 5px;
}

/* The four stages, on a rule that runs behind them. */
.timeline {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(14px, 2vw, 26px);
}

.tl-step { position: relative; padding-top: 26px; }

.tl-step::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--line);
}

.tl-step:first-child::before { left: 8px; }
.tl-step:last-child::before { right: calc(100% - 9px); }

.tl-step .pin {
	position: absolute;
	top: 3px;
	left: 0;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--ivory);
	border: 1px solid var(--stone-deep);
}

.tl-step.on .pin { background: var(--gold); border-color: var(--gold); }

.tl-step .when {
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold-text, var(--gold));
	font-weight: 600;
	margin-bottom: .4rem;
}

.tl-step h3 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 1.15rem;
	margin: 0 0 .3rem;
	color: var(--ink);
}

.tl-step p {
	font-size: .85rem;
	color: var(--ink-soft);
	font-weight: 300;
	line-height: 1.6;
	margin: 0;
}

/* The order beside its receipt. */
.flow-grid {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
	padding-bottom: clamp(60px, 8vw, 110px);
}

.conf-h2 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 1.9rem;
	margin: 0 0 .3rem;
}

.conf-ship {
	font-size: .88rem;
	color: var(--ink-soft);
	margin: 0 0 1.2rem;
}

.conf-lines { border-top: 1px solid var(--line); }

.cart-foot-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	padding-top: 22px;
}

.summary {
	position: sticky;
	top: 100px;
	background: var(--ivory-card);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	padding: 26px 24px;
}

.summary h2 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 1.5rem;
	margin: 0 0 1.2rem;
	color: var(--ink);
	padding-bottom: .9rem;
	border-bottom: 1px solid var(--line-soft);
}

.sum-line {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 7px 0;
	font-size: .92rem;
}

.sum-line .k { color: var(--ink-soft); font-weight: 300; }
.sum-line .v { color: var(--ink); font-weight: 500; }

.sum-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
}

.sum-total .k {
	font-size: .76rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-faint);
	font-weight: 600;
}

.sum-total .v {
	font-family: var(--serif);
	font-size: 2rem;
	color: var(--ink);
	line-height: 1;
}

.sum-tax {
	font-size: .74rem;
	color: var(--ink-faint);
	margin: .5rem 0 0;
	text-align: right;
}

.sum-assure {
	margin: 1.3rem 0 0;
	padding-top: 1.2rem;
	border-top: 1px solid var(--line-soft);
	display: grid;
	gap: .6rem;
	list-style: none;
}

.sum-assure li {
	font-size: .8rem;
	color: var(--ink-soft);
	font-weight: 300;
}

.btn-ghost {
	display: inline-block;
	padding: .8rem 1.4rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink);
	background: transparent;
	text-decoration: none;
	font-size: .9rem;
}

.btn-ghost:hover { border-color: var(--ink); background: rgba(38, 34, 28, .03); }

@media (max-width: 960px) {
	.flow-grid { grid-template-columns: 1fr; gap: 34px; }
	.summary { position: static; }
	.timeline { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
	.tl-step::before { display: none; }
}

@media (max-width: 640px) {
	.steps .nm { display: none; }
	.steps .step.active .nm { display: inline; }
	.timeline { grid-template-columns: 1fr; }
	.conf-meta { gap: 22px; }
}

/* ------------------------------------------------------------------ the basket, redesigned
 *
 * From the cart Eran designed in Claude Design. The design drew each artwork in CSS because it
 * had no photographs to hand; here the real photograph goes inside the same white-bordered piece
 * on the same wall, which is what the drawing stood in for.
 */

.cart-row {
	display: grid;
	grid-template-columns: 120px 1fr auto;
	gap: clamp(14px, 2vw, 26px);
	padding: 24px 0;
	border-bottom: 1px solid var(--line-soft);
	align-items: start;
}

.cart-row .mount {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--radius);
	display: grid;
	place-items: center;
	padding: 12%;
	background:
		radial-gradient(120% 100% at 30% 18%, #FBF7EF 0%, transparent 60%),
		linear-gradient(150deg, #F0E9DA 0%, #E4DAC6 100%);
}

.cart-row .mount .piece {
	position: relative;
	background: #fff;
	padding: 5px;
	max-width: 100%;
	box-shadow: 0 1px 2px rgba(38, 30, 18, .1), 0 8px 18px rgba(38, 30, 18, .14);
}

.cart-row .mount .piece img {
	display: block;
	width: 100%;
	height: auto;
}

.cart-row .info { min-width: 0; }

.cart-row .info .c-meta {
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold-text, var(--gold));
	font-weight: 600;
}

.cart-row .info h3 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 1.35rem;
	line-height: 1.2;
	margin: .3rem 0 .45rem;
	color: var(--ink);
}

.cart-row .info h3 a { color: inherit; text-decoration: none; }
.cart-row .info h3 a:hover { color: var(--gold-text, var(--gold)); }

.cart-row .specs {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem 1rem;
	font-size: .84rem;
	color: var(--ink-soft);
	font-weight: 300;
}

.cart-row .specs .k { color: var(--ink-faint); }

.cart-row .made {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: .7rem;
	font-size: .75rem;
	color: var(--ink-faint);
}

.cart-row .made .d {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--emerald);
	flex: 0 0 auto;
}

.cart-row .right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .9rem;
}

.cart-row .price-col { text-align: right; }

.cart-row .price-col .now {
	font-family: var(--serif);
	font-size: 1.5rem;
	color: var(--ink);
	line-height: 1;
}

.cart-row .price-col .was {
	font-size: .85rem;
	color: var(--ink-faint);
	text-decoration: line-through;
	margin-left: .4rem;
}

.cart-row .price-col .each {
	font-size: .72rem;
	color: var(--ink-faint);
	margin-top: 3px;
}

.cart-row .rm {
	font-size: .74rem;
	color: var(--ink-faint);
	text-decoration: none;
	transition: color .2s;
}

.cart-row .rm:hover { color: #b23c3c; }

.cart-empty-page { text-align: center; padding: clamp(50px, 8vw, 100px) 0; }

.cart-empty-page .ring {
	width: 74px;
	height: 74px;
	border-radius: 50%;
	border: 1px solid var(--gold);
	display: grid;
	place-items: center;
	margin: 0 auto 22px;
	color: var(--gold);
}

.cart-empty-page .ring svg { width: 28px; height: 28px; }

.cart-empty-page h2 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 1.9rem;
	margin: 0 0 .5rem;
	color: var(--ink);
}

.cart-empty-page p {
	color: var(--ink-soft);
	font-weight: 300;
	max-width: 40ch;
	margin: 0 auto 1.8rem;
}

@media (max-width: 640px) {
	.cart-row { grid-template-columns: 88px 1fr; }
	.cart-row .right { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
	.cart-row .price-col { text-align: left; order: 2; }
}

/* --------------------------------------------------------------- the basket as a page
 *
 * The design lays the basket out as lines beside a summary that stays in view, under a crumb
 * trail and the same four-step rail the confirmation ends on. WooCommerce prints the totals as a
 * block that floats right underneath instead, so the template wraps both and this places them.
 */

.cart-grid {
	grid-template-columns: minmax(0, 1fr) 380px;
	padding-bottom: clamp(60px, 8vw, 110px);
}

.flow-main { min-width: 0; }

.woocommerce-cart .crumbs { margin-bottom: 1.4rem; }
.woocommerce-cart .steps { margin-bottom: clamp(26px, 3vw, 40px); }

/* The step a buyer has not reached yet is numbered rather than ticked. */
.steps .step:not(.done):not(.active) .dot {
	background: var(--ivory-card);
	border-color: var(--stone-deep);
	color: var(--ink-faint);
}

/* WooCommerce's totals block, wearing the summary panel. */
.summary.cart-collaterals { padding: 0; border: none; background: transparent; }

.summary .cart_totals {
	max-width: none;
	margin: 0;
	position: sticky;
	top: 100px;
}

@media (max-width: 960px) {
	.cart-grid { grid-template-columns: 1fr; }
	.summary .cart_totals { position: static; }
}

/*
 * The artwork inside the mount. The design drew each piece at a fixed ratio because it invented
 * the art; these are real photographs in several shapes, so the piece takes the picture's own
 * proportions and is held to the height of the mount instead. Without this a panoramic canvas
 * sits in a square of empty wall.
 */
.cart-row .mount {
	aspect-ratio: 4 / 3;
	padding: 9%;
}

.cart-row .mount .piece {
	max-width: 100%;
	max-height: 100%;
	display: flex;
}

.cart-row .mount .piece img {
	max-height: 100%;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/* The note sits under the lines, not beside the summary. */
.cart-note { max-width: 100%; }

/*
 * The page template wraps its content in .prose, which is capped at a reading measure of about
 * 650px. That is right for a guide and wrong for a basket: it was squeezing a two-column layout
 * into 215px beside a 380px summary. Cart, checkout and account are pages by post type only.
 */
.woocommerce-cart .prose,
.woocommerce-checkout .prose,
.woocommerce-account .prose {
	max-width: none;
}

/* The checkout summary shows the pieces, not a table of names. */

.review-lines { margin-bottom: 1.2rem; }

.review-line {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid var(--line-soft);
}

.review-thumb img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 2px;
	border: 1px solid var(--line-soft);
	background: var(--ivory-deep);
}

.review-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.review-name {
	font-family: var(--serif);
	font-size: 1.02rem;
	line-height: 1.2;
	color: var(--ink);
}

.review-spec { font-size: .78rem; color: var(--ink-faint); }

.review-price { font-weight: 600; font-size: .95rem; white-space: nowrap; }

/* WooCommerce prints shipping as a table row; here it is a summary line like the rest. */
.review-totals .woocommerce-shipping-totals,
.review-totals tr {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 7px 0;
	font-size: .92rem;
}

.review-totals .woocommerce-shipping-totals th,
.review-totals th {
	color: var(--ink-soft);
	font-weight: 300;
	text-align: left;
	padding: 0;
	border: none;
}

.review-totals .woocommerce-shipping-totals td,
.review-totals td {
	text-align: right;
	padding: 0;
	border: none;
	color: var(--ink);
}

.review-totals ul#shipping_method { list-style: none; margin: 0; padding: 0; }
.review-totals ul#shipping_method li { margin: 0; }

/* Three answers under the buy button, where the questions are actually asked. */

.buy-assure {
	list-style: none;
	margin: 1.1rem 0 0;
	padding: 1.1rem 0 0;
	border-top: 1px solid var(--line-soft);
	display: grid;
	gap: .55rem;
}

.buy-assure li {
	position: relative;
	padding-left: 1.15rem;
	font-size: .86rem;
	line-height: 1.55;
	color: var(--ink-soft);
	font-weight: 300;
}

.buy-assure li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--gold);
}

.buy-assure strong {
	color: var(--ink);
	font-weight: 600;
}

/* Two real reviews, beside the decision rather than three screens below it. */

.buy-voices {
	margin-top: 1.3rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--line-soft);
	display: grid;
	gap: 1rem;
}

.voice { margin: 0; }

.voice blockquote {
	margin: 0 0 .4rem;
	padding: 0 0 0 .9rem;
	border-left: 2px solid var(--gold-pale, var(--stone));
	font-size: .92rem;
	line-height: 1.6;
	color: var(--ink-soft);
	font-style: normal;
}

.voice blockquote::before { content: "\201C"; }
.voice blockquote::after  { content: "\201D"; }

.voice figcaption {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding-left: .9rem;
	font-size: .74rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.voice-stars {
	color: var(--gold);
	letter-spacing: .06em;
	font-size: .8rem;
}

/* ============================================================
   REVIEWS — left here, by people who bought here
   Distinct from .proof, which quotes Etsy beside the buy button.
   ============================================================ */

.reviews{
  margin-top:2.6rem; padding-top:2rem; border-top:1px solid var(--line);
}
.reviews-head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem 1.2rem; margin-bottom:1.4rem;
}
.reviews-head h2{ margin:0; font-family:var(--serif); font-size:1.6rem; font-weight:500; }
.reviews-average{ display:inline-flex; align-items:center; gap:.5rem; margin:0; font-size:.85rem; }
.reviews-score{ font-weight:700; color:var(--ink); }
.reviews-count{ color:var(--ink-faint); }

/*
 * Why the page has no review box. Reviews are invited by email after delivery, so saying so is
 * the difference between a shop that looks like it has few reviews and one that is explaining
 * that every review it has came from somebody holding the piece.
 */
.reviews-invite{
  margin:1.4rem 0 0; padding-top:1.2rem; border-top:1px solid var(--line-soft);
  font-size:.8rem; line-height:1.7; color:var(--ink-faint); max-width:56ch;
}

.reviews-list{ list-style:none; margin:0 0 2rem; padding:0; }
/* Scoped to the list. ".review" is also the testimonial card on the home page, and this block
   sits later in the file, so it was winning and setting the card's left and right padding to
   zero: the quotes were flush against the border on the busiest page on the site. */
.reviews-list .review{ padding:1.2rem 0; border-top:1px solid var(--line-soft); }
.reviews-list .review:first-child{ border-top:0; padding-top:0; }
.review-body{ margin:.5rem 0 .5rem; font-size:.92rem; line-height:1.7; color:var(--ink-soft); }
.review-body p:last-child{ margin-bottom:0; }
.review-by{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .8rem; margin:0;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);
}
.review-name{ color:var(--ink); font-weight:600; letter-spacing:.06em; }
.review-verified{
  padding:2px 8px; border:1px solid var(--gold-pale); border-radius:999px;
  color:var(--gold-text); letter-spacing:.08em;
}

/* ============================================================
   GIFT MESSAGE AT CHECKOUT
   ============================================================ */
.kotel-gift{
  margin:0 0 1.4rem; padding:clamp(16px,1.6vw,22px);
  background:var(--ivory-card); border:1px solid var(--line-soft); border-radius:var(--radius);
}
.kotel-gift-toggle{ margin:0 !important; }
.kotel-gift-toggle label{ display:flex; align-items:center; gap:.6rem; cursor:pointer; font-weight:500; }
.kotel-gift-hint{
  display:block; margin:.4rem 0 0 1.7rem; font-size:.78rem; line-height:1.6; color:var(--ink-faint);
}
/* Closed until the box is ticked, opened by the box alone, no script involved.
   The hiding is inside the @supports on purpose. :has() is what opens them, so a browser without
   it would leave a customer ticking the box and watching nothing happen. There, the fields are
   simply always visible instead, which costs a little tidiness and loses nobody's message: the
   server treats a message typed without the tick as a gift either way. */
.kotel-gift-fields{ margin-top:1rem; }
@supports selector(:has(*)){
  .kotel-gift-fields{ display:none; }
  .kotel-gift:has(#kotel_is_gift:checked) .kotel-gift-fields{ display:block; }
}

/* ============================================================
   SEE IT ON YOUR WALL
   ============================================================ */

.room-steps{ margin:1.6rem 0 0; padding:0; list-style:none; counter-reset:room; }
.room-steps li{
  position:relative; margin:0 0 1.1rem; padding-left:2.4rem;
  font-size:.88rem; line-height:1.7; color:var(--ink-soft);
}
.room-steps li::before{
  counter-increment:room; content:counter(room);
  position:absolute; left:0; top:.05rem;
  display:flex; align-items:center; justify-content:center;
  width:1.7rem; height:1.7rem; border-radius:50%;
  background:var(--gold); color:#fff; font-size:.75rem; font-weight:600;
}
.room-steps strong{ display:block; color:var(--ink); font-weight:600; }

.room-privacy, .room-free{
  margin:1.2rem 0 0; font-size:.78rem; line-height:1.7; color:var(--ink-faint);
}
.room-free{ margin-top:.5rem; }

/* The piece they came from, at a size that reads as a picture rather than an icon. Uncropped:
   these are landscape and 3:1 panoramic canvases, and a square crop of a panorama shows its
   middle third, which is exactly the reassurance this block exists to give. */
.room-chosen{
  display:flex; align-items:center; gap:1.1rem; margin:0 0 1.4rem; padding:1rem;
  background:var(--ivory-card); border:1px solid var(--line-soft); border-radius:var(--radius);
}
.room-chosen img{
  width:150px; height:auto; flex:none; border-radius:3px;
  border:1px solid var(--line-soft);
}
.room-chosen-label{
  display:block; margin-bottom:.2rem;
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
}
.room-chosen strong{ display:block; font-size:1rem; line-height:1.35; color:var(--ink); }
.room-chosen a{ display:inline-block; margin-top:.35rem; font-size:.78rem; color:var(--ink-faint); }

@media (max-width:640px){
  /* On a phone the row squeezes the picture to a stamp, which is the opposite of the point.
     Stack it and let it have the full width. */
  .room-chosen{ flex-direction:column; align-items:stretch; text-align:left; gap:.8rem; }
  .room-chosen img{ width:100%; }
}

/* The file field. Styled with ::file-selector-button rather than the usual trick of hiding the
   input behind a label: that trick needs JavaScript to show which file was picked, and it breaks
   the keyboard and the screen reader when it is done carelessly. This keeps the native control,
   its focus ring and its filename text, and only changes how it looks. */
.room-form input[type=file]{
  display:block; width:100%; padding:1.1rem; font-size:.82rem; color:var(--ink-soft);
  background:#fff; border:1px dashed var(--stone); border-radius:var(--radius);
  cursor:pointer; transition:border-color .18s ease, background .18s ease;
}
.room-form input[type=file]:hover{ border-color:var(--gold-soft); background:var(--ivory-card); }
.room-form input[type=file]:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.room-form input[type=file]::file-selector-button{
  margin-right:.9rem; padding:.55rem 1rem;
  background:var(--gold); color:#fff; border:0; border-radius:var(--radius);
  font:inherit; font-size:.78rem; font-weight:600; letter-spacing:.02em; cursor:pointer;
  transition:background .18s ease;
}
.room-form input[type=file]:hover::file-selector-button{ background:var(--charcoal); }
.room-form .has-error input[type=file], .room-form input[type=file][aria-invalid=true]{
  border-color:#8C3A22;
}

.field-hint{
  display:block; margin-top:.35rem; font-size:.74rem; line-height:1.6; color:var(--ink-faint);
}

/* ============================================================
   THE ARTWORK ON ITS OWN
   ============================================================ */

/* Said under the picture, where there is room for a sentence. The thumbnail badge carries two
   words and this carries the rest. */
.gallery-note{
  margin:0; padding:.55rem .75rem;
  background:var(--ivory-card); border-left:2px solid var(--gold-soft);
  border-radius:0 var(--radius) var(--radius) 0;
  font-size:.78rem; line-height:1.6; color:var(--ink-soft);
}

/* On the thumbnail, not shouting. This is a label, not a warning: the other images are honest
   mockups of a real product and nothing here should imply otherwise. */
/*
 * A mark, not a word.
 *
 * It was "ARTWORK ONLY" set in uppercase with letter-spacing, and the thumbnail it labels is
 * 76px wide on a desktop and 64px on a phone. At the size that fits, it came out three lines
 * deep, covered half the picture it was pointing at, and was readable by nobody at either width.
 *
 * The words were never the right tool for a box that size. The sentence under the stage carries
 * the meaning, in full, and appears exactly when this image is the one on screen. Here a gold dot
 * is enough to say "this one is different, look at it". The text stays in the DOM, off-screen,
 * so a screen reader still hears which thumbnail it is.
 */
.thumb-badge{
  position:absolute; top:5px; right:5px;
  width:13px; height:13px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 2px rgba(251,248,241,.9);
  overflow:hidden; text-indent:-999em; white-space:nowrap;
  pointer-events:none;
}

.lightbox-slide .slide-note{
  display:block; margin-bottom:.3rem; color:var(--gold-soft); font-weight:600;
}

/* ============================================================
   MOBILE: THE THINGS A THUMB AND A PHONE SCREEN ACTUALLY HIT
   ============================================================ */

/*
 * iOS Safari zooms the page in whenever a focused input is smaller than 16px, and it does not
 * zoom back out. The checkout fields are .92rem, so tapping the first address field threw the
 * customer into a magnified page they then had to pinch out of, on every field, while paying.
 * Sixteen pixels on a phone only; the desktop size is deliberate and stays.
 */
@media (max-width:820px){
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row textarea,
  .woocommerce form .form-row select,
  .woocommerce .select2-container .select2-selection--single,
  .woocommerce .select2-container .select2-search__field{
    font-size:16px;
  }
}

/*
 * The controls on the money path.
 *
 * Choosing how to pay is the single most consequential tap on this site and WooCommerce draws it
 * as a 13px browser-default radio. The label is clickable, which saves most people, but the dot
 * itself is a third of the 44px a thumb is measured against. The same for the consent boxes,
 * where a mis-tap means an error message instead of an order.
 */
#payment ul.payment_methods input.input-radio,
.woocommerce form .form-row input[type="checkbox"],
.woocommerce-checkout input[type="checkbox"],
.woocommerce-cart input[type="checkbox"]{
  width:20px; height:20px; min-width:20px; min-height:20px;
  accent-color:var(--gold-btn); cursor:pointer;
}

/* The whole row is the target, not the dot. */
#payment ul.payment_methods li label{
  display:flex; align-items:center; gap:.6rem; min-height:32px; margin:0;
}
#payment ul.payment_methods li{ padding:0; }
#payment ul.payment_methods li > label:first-of-type,
#payment ul.payment_methods li > input + label{ padding:13px; }

/* The theme's own consent boxes, same reasoning. */
.field-check input[type="checkbox"]{ width:20px; height:20px; min-width:20px; min-height:20px; }

/*
 * Labels that had shrunk past reading size on a phone.
 *
 * These are all uppercase and letter-spaced, which costs roughly a size on legibility before the
 * screen is even small. 8.8px on the gallery badge was the worst of them, over an image, at a
 * size nobody reads on a moving bus.
 */
@media (max-width:820px){
  .room-chosen-label{ font-size:.68rem; }
  .card-style{ font-size:.72rem; }
  .consent-accept{ font-size:.78rem; padding:.75em 1.3em; }
}

/* The chosen size, with the artwork on its own beside it: what arrives, on any screen. */

.buy-chosen {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 1.2rem 0 1rem;
}

.buy-chosen .product-price-chosen {
	margin: 0;
}

.buy-chosen-art {
	flex: none;
	width: 120px;
}

.buy-chosen-art img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 80px;
	box-shadow: 0 1px 4px rgba(38, 34, 28, .2);
}

.buy-chosen-label {
	display: block;
	margin-top: .15rem;
	font-size: .82rem;
	color: var(--ink-soft);
}

/* Under the button: the button's own margin is the gap, and the assurances below draw the rule. */
.buy-medium-under {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* Discounts: the price before, struck through, and how much is off. */

.price-was {
	color: var(--ink-faint);
	font-size: .78em;
	font-weight: 400;
	margin-right: .3em;
	text-decoration-thickness: 1px;
}

.price-off {
	display: inline-block;
	margin-left: .45rem;
	padding: .12rem .45rem;
	border: 1px solid var(--gold);
	border-radius: 2px;
	color: var(--gold-text);
	font-family: var(--font-sans, inherit);
	font-size: .68rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}

/* The coupon box in the basket. */

.cart-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .8rem;
}

.cart-actions .coupon {
	display: flex;
	flex: 1 1 18rem;
	gap: .5rem;
}

.cart-actions .coupon input {
	flex: 1 1 auto;
	min-width: 0;
	padding: .7rem .85rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--ivory-card);
	font-size: 16px;
}

/* How prices look: WooCommerce > Discounts. "classic" and "outline" leave the site as it was. */

.price-figures-lining :is(.product-price, .card-price, .format-price, .product-price-chosen, .drawer-price, .cart-line-price, .price-col) {
	font-variant-numeric: lining-nums;
	font-feature-settings: "lnum" 1;
}

.price-figures-caslon :is(.product-price, .card-price, .format-price, .product-price-chosen, .drawer-price, .cart-line-price, .price-col) {
	font-family: 'Libre Caslon Text', Georgia, serif;
	font-weight: 400;
	font-variant-numeric: lining-nums;
}

/* Caslon sets larger than Cormorant at the same size; brought back to the same visual weight. */
.price-figures-caslon .product-price { font-size: 1.75rem; }
.price-figures-caslon .card-price { font-size: 1.05rem; }
.price-figures-caslon .product-price.product-price-chosen { font-size: 1.75rem; }

.price-badge-gold .price-off,
.price-badge-dark .price-off,
.price-badge-soft .price-off {
	padding: .28rem .6rem;
	border-radius: 3px;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .06em;
}

.price-badge-gold .price-off { background: var(--gold); border-color: var(--gold); color: #fff; }
.price-badge-dark .price-off { background: var(--charcoal, #26221C); border-color: var(--charcoal, #26221C); color: var(--ivory, #F6F1E8); }
.price-badge-soft .price-off { background: #efe3c8; border-color: #d9c190; color: #7a5a1f; }

/* Under Add to cart, made to be read before buying: Eran's design 1, 2026-09-18. */

.buy-medium-under {
	font-size: .95rem;
	line-height: 1.65;
	text-align: left;
	margin-bottom: 1.1rem;
}

.buy-assure-icons {
	gap: .9rem;
	padding-top: 1.15rem;
}

.buy-assure-icons li {
	display: flex;
	gap: .85rem;
	align-items: flex-start;
	padding-left: 0;
	font-size: .92rem;
	font-weight: 400;
}

.buy-assure-icons li::before {
	content: none;
}

.buy-assure-icons svg {
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: .05rem;
	fill: none;
	stroke: var(--gold);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.buy-assure-icons strong {
	display: block;
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: .1rem;
}

.buy-assure-icons .assure-sub {
	display: block;
	color: var(--ink-soft);
	line-height: 1.5;
}

.buy-promise {
	margin: 1rem 0 0;
	font-size: .88rem;
	line-height: 1.55;
	color: var(--ink-soft);
}

.buy-promise strong {
	color: var(--ink);
	font-weight: 700;
}


/* ============================================================
   BUY AREA, PART TWO (2026-09-18)
   ============================================================ */

/* The flat, labelled on the picture: white, gold border, gold text, along the bottom edge. */
.gallery-main > .gallery-note{
  position:absolute; left:50%; bottom:14px; z-index:2; transform:translateX(-50%);
  width:max-content; max-width:calc(100% - 128px);
  margin:0; padding:.4rem .8rem;
  background:#fff; border:1px solid var(--gold); border-radius:var(--radius);
  font-size:.72rem; font-weight:600; line-height:1.4; letter-spacing:.02em;
  color:var(--gold); text-align:center;
  box-shadow:0 1px 6px rgba(38,34,28,.12);
}
.gallery-main > .gallery-note[hidden]{ display:none; }

/* A sale price on a phone: the struck range broke into three lines ("$65 / to / $641") and the
   sale range split mid-way. Each piece stays whole, and under 600px the struck price takes its
   own line above the price that is paid. */
.product-price{ flex-wrap:wrap; row-gap:.4rem; }
.price-was, .price-off{ white-space:nowrap; }
@media (max-width:600px){
  .product-price .price-was{ flex-basis:100%; margin:0; }
}

/* When the sale ends, under the price, only when it has an end. */
.price-until{ margin:.45rem 0 0; font-size:.82rem; font-weight:600; color:var(--gold-text, var(--gold)); }

/* Under the sizes: the answer to "which size", where the question is asked. */
.size-help{
  display:inline-block; margin-top:.6rem; font-size:.82rem; color:var(--gold-text, var(--gold));
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
}
.size-help:hover{ color:var(--ink); }

/* One block of reviews, ending with the way to all of them. */
.buy-voices .proof-link{ display:inline-block; margin-top:.4rem; font-size:.82rem; color:var(--gold-text, var(--gold)); }

/* The phone bar: price and button while the real button is out of view. */
.buy-bar{ display:none; }
@media (max-width:820px){
  .buy-bar:not([hidden]){
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(251,248,241,.97); backdrop-filter:blur(10px);
    border-top:1px solid var(--line-soft); box-shadow:0 -4px 16px rgba(38,34,28,.08);
  }
  .buy-bar-text{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
  .buy-bar-size{ font-size:.76rem; color:var(--ink-soft); }
  .buy-bar-price{ font-family:var(--serif); font-size:1.3rem; color:var(--ink); }
  .buy-bar .btn{ flex:none; padding:.8rem 1.3rem; }
  body.has-buy-bar{ padding-bottom:76px; }
}
.product-price + .price-until{ margin-top:-.5rem; margin-bottom:1rem; }
@media (max-width:820px){
  .buy-bar .btn{ width:auto; min-width:0; margin:0; flex:0 0 auto; }
}

/* 2026-09-18, round three */
.size-help{
  display:flex; align-items:flex-start; gap:.5rem; margin-top:.9rem;
  font-size:1rem; font-weight:600; line-height:1.45; text-decoration:none;
}
.size-help span{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.size-help svg{
  flex:none; width:22px; height:22px; margin-top:.05rem;
  fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round;
}

.buy-chosen{ gap:1rem; }
.buy-chosen-art{ width:auto; max-width:120px; }
.buy-chosen-label{ font-size:1.05rem; color:var(--ink); margin:0; }

.gallery-main > .gallery-note{ font-size:.82rem; padding:.5rem 1rem; letter-spacing:.01em; }

/* Under the sizes: the offer to see it on the wall, quiet, gold. */
.buy-axis .size-help{
  display:inline-flex; align-items:center; gap:.35rem; margin:.7rem 0 0;
  font-size:.8rem; font-weight:500; line-height:1.3; letter-spacing:.01em;
  color:var(--gold-text, var(--gold)); text-decoration:none;
  border-bottom:1px solid rgba(168,132,63,.35); padding-bottom:1px;
  transition:color .15s ease, border-color .15s ease;
}
.buy-axis .size-help:hover{ color:var(--ink); border-color:var(--ink); }
.buy-axis .size-help svg{ width:15px; height:15px; margin:0; }

/* Add to cart pressed with no size: the sizes say so. */
.buy-axis.needs-size .buy-axis-label{ color:#9b3b2a; font-weight:600; }
.buy-axis.needs-size .buy-option{ border-color:#c98f84; animation:kotel-nudge .35s ease 1; }
@keyframes kotel-nudge{ 0%,100%{ transform:none; } 30%{ transform:translateX(-3px); } 70%{ transform:translateX(3px); } }
@media (prefers-reduced-motion:reduce){ .buy-axis.needs-size .buy-option{ animation:none; } }

/* The chosen size's price, by the button: as large as the range at the top, so nothing jumps. */
.product-price.product-price-chosen,
.price-figures-caslon .product-price.product-price-chosen{ font-size:2rem; }
.buy-chosen .buy-chosen-label{ font-size:1rem; color:var(--ink-soft); margin-top:.35rem; display:block; }
.buy-chosen-text{ min-width:0; }

/* The flat label in the site's own black, so it is read and not skimmed; the gold stays in the border. */
.gallery-main > .gallery-note{ color:var(--ink); font-weight:600; }
/* On a phone the row beside the thumbnail is narrow: the badge is already on the range above. */
@media (max-width:600px){
  .product-price-chosen .price-off{ display:none; }
}

/* On a phone the label is a small tag in the corner, one fact per line, not a card over the art. */
@media (max-width:600px){
  .gallery-main > .gallery-note{
    left:10px; bottom:10px; transform:none; max-width:64%;
    padding:.3rem .55rem; font-size:.66rem; line-height:1.35; letter-spacing:0;
    text-align:left; border-radius:3px; box-shadow:0 1px 4px rgba(38,34,28,.15);
  }
  .gallery-main > .gallery-note .sep{ display:none; }
  .gallery-main > .gallery-note .note-part{ display:block; }
}

/* Sizes on a fixed grid: four equal boxes a row, so seven sizes read as four and three,
   and the widths do not change with the digits in each. */
[data-size-axis] .buy-axis-options{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px;
}
[data-size-axis] .buy-option{
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:.55rem .3rem; white-space:nowrap;
}
/* Size and its price, stacked, at least a 44px touch target. */
[data-size-axis] .buy-option.has-price{
  flex-direction:column; gap:.1rem; min-height:48px; padding:.4rem .3rem;
}
.buy-option .opt-price{ font-size:.78rem; color:var(--ink-soft); font-weight:400; }
.buy-option.is-current .opt-price{ color:var(--ivory); }
.order-by{
  margin:.2rem 0 1rem; padding:.6rem .8rem; border-left:2px solid var(--gold);
  background:var(--ivory-card); font-size:.9rem; line-height:1.45; color:var(--ink);
}
.prose .order-by-inline{ margin:1.2rem 0; }
.product-price .price-from{ font-size:.8em; color:var(--ink-soft); }
.buy-axis .size-help{ font-size:.86rem; }
.buy-axis .size-help svg{ width:16px; height:16px; }

/* See it on your wall: the size guide of the piece they came from. */
.room-size-guide{ margin:1.8rem 0 1.4rem; }
.room-size-guide figcaption{ margin-bottom:.7rem; font-size:.9rem; line-height:1.55; color:var(--ink-soft); }
.room-size-guide figcaption strong{ display:block; font-family:var(--serif); font-size:1.3rem; font-weight:500; color:var(--ink); margin-bottom:.2rem; }
.room-size-guide a{ display:block; text-decoration:none; border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; background:#fff; }
.room-size-guide img{ display:block; width:100%; height:auto; }
.room-size-guide-open{ display:block; padding:.5rem .8rem; font-size:.8rem; color:var(--gold-text, var(--gold)); border-top:1px solid var(--line-soft); }
.room-size-guide a:hover .room-size-guide-open{ color:var(--ink); }

/* Under Add to cart, centred on the button, in the same quiet gold. */
.size-help.size-help-under{
  display:flex; width:max-content; max-width:100%; margin:.75rem auto 0;
  align-items:center; gap:.35rem; font-size:.86rem; font-weight:500; line-height:1.3;
  color:var(--gold-text, var(--gold)); text-decoration:none;
  border-bottom:1px solid rgba(168,132,63,.35); padding-bottom:1px;
}
.size-help.size-help-under:hover{ color:var(--ink); border-color:var(--ink); }
.size-help.size-help-under svg{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; }
.size-help.size-help-under{ font-size:.93rem; }
.size-help.size-help-under svg{ width:17px; height:17px; }