/* ==========================================================================
   Clay Contour - Design System
   Palette and typography derived from the approved mockup.
   ========================================================================== */

:root {
  /* Colour */
  --cream:        #F5F1E8;
  --cream-deep:   #EDE7DA;
  --sage:         #9CA98E;
  --sage-dark:    #7C8A70;
  --blush:        #E8CFC6;
  --blush-deep:   #DBB5A8;
  --charcoal:     #2C2C2C;
  --charcoal-soft:#4A4A4A;
  --gold:         #C9A961;
  --white:        #FFFFFF;
  --muted:        #8A8578;
  --line:         #DED8C9;
  --error:        #A8443A;
  --success:      #5B7355;

  /* Type */
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-body:    "Jost", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, Helvetica, Arial, sans-serif;

  /* Spacing scale */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 6rem;

  --maxw:       1200px;
  --maxw-text:  68ch;
  --radius:     2px;
  --shadow-sm:  0 1px 3px rgba(44, 44, 44, 0.08);
  --shadow-md:  0 4px 16px rgba(44, 44, 44, 0.10);
}

/* --------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }

/* 18px base instead of the browser default 16px. The design reads correctly
   at a 1.125 scale: at 100% zoom the old 16px base left body copy, nav and
   labels looking undersized on desktop. Setting it here rather than on body
   scales the whole system at once, because the spacing tokens, clamp()
   headings and component sizes are all expressed in rem. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  font-size: 112.5%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

img, picture, svg { max-width: 100%; display: block; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 var(--s4);
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

p { margin: 0 0 var(--s4); }

a { color: var(--charcoal); text-decoration: none; }
a:hover { color: var(--sage-dark); }

/* Visible focus for keyboard users. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--sage-dark);
  outline-offset: 2px;
}

/* ---------------------------------------------------------- Utilities */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s5); }
.wrap-text { max-width: var(--maxw-text); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--s4); top: -3rem;
  background: var(--charcoal); color: var(--white);
  padding: var(--s2) var(--s4); z-index: 200;
  transition: top 0.2s;
}
.skip-link:focus { top: var(--s4); color: var(--white); }

/* Uppercase letter-spaced label, as used throughout the mockup. */
.label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--muted);
}

/* Section heading with the centred rule beneath it. */
.section-head { text-align: center; margin-bottom: var(--s6); }
.section-head h2 {
  font-size: 0.8rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--charcoal);
  margin-bottom: var(--s3);
}
.section-head h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  background: var(--gold);
  margin: var(--s3) auto 0;
}
.section-head p { color: var(--charcoal-soft); max-width: 60ch; margin: 0 auto; }

/* ------------------------------------------------------------ Buttons */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: var(--s3) var(--s6);
  border: 1px solid var(--charcoal);
  background: var(--charcoal);
  color: var(--white);
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  text-align: center;
}
.btn:hover { background: var(--sage-dark); border-color: var(--sage-dark); color: var(--white); }

.btn-outline { background: transparent; color: var(--charcoal); }
.btn-outline:hover { background: var(--charcoal); color: var(--white); }

.btn-sage { background: var(--sage); border-color: var(--sage); }
.btn-sage:hover { background: var(--sage-dark); border-color: var(--sage-dark); }

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed; pointer-events: none;
}

.btn-block { display: block; width: 100%; }

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------- Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 241, 232, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: 104px;
}

/* Basket and menu button, kept together on the right. */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex: none;
}

.brand { display: flex; align-items: center; }
/* The square mark keeps the wordmark inside the rope ring. To make the script
   type readable it has to be much larger than the header bar is tall, so the
   mark is allowed to hang below the header and straddle the edge: the top half
   sits on the cream bar, the bottom half overlaps the page beneath it.
   The negative margin keeps its *layout* height at the bar height so it does
   not stretch the header; only the painted image overhangs. */
.brand-mark {
  width: 190px; height: 190px; flex: none;
  display: block;
  /* margin-bottom = header min-height (104px) - width, so layout height stays
     at the bar height and only the painted circle overhangs. */
  margin-bottom: -86px;
  position: relative;
  z-index: 1;
}
@media (max-width: 860px) {
  .brand-mark { width: 150px; height: 150px; margin-bottom: -46px; }
}
@media (max-width: 640px) {
  .brand-mark { width: 118px; height: 118px; margin-bottom: -14px; }
}
/* Accessible name for the brand link, hidden visually. */
.brand-name {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  color: var(--charcoal);
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
}

/* Pushed right, so the links end just before the basket. */
.site-nav { margin-left: auto; }

/* Direct child only, so it cannot override .submenu's display:none. */
.site-nav > ul {
  list-style: none; display: flex; align-items: center;
  gap: var(--s6); margin: 0; padding: 0;
}
.site-nav > ul > li { white-space: nowrap; }
.site-nav ul { list-style: none; }
.site-nav a {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: var(--s2) 0;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"] {
  border-bottom-color: var(--gold);
}

/* Dropdown for collections */
.has-children { position: relative; }
.site-nav .submenu {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  min-width: 210px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  padding: var(--s3) 0;
  margin: 0;
  display: none;
  flex-direction: column;
  gap: 0;
  z-index: 110;
}
.site-nav .has-children:hover > .submenu,
.site-nav .has-children:focus-within > .submenu { display: flex; }
.submenu li { width: 100%; }
.submenu a {
  display: block;
  padding: var(--s2) var(--s5);
  letter-spacing: 0.1em;
  border-bottom: 0;
}
.submenu a:hover { background: var(--cream); border-bottom: 0; }

/* Laptops: eight links plus a basket is tight, so tighten the tracking
   rather than let the menu wrap onto a second line. */
@media (min-width: 861px) and (max-width: 1150px) {
  .site-nav > ul { gap: var(--s4); }
  .site-nav a { letter-spacing: 0.08em; font-size: 0.7rem; }
}

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  /* The nav drops below the header, so the actions no longer need
     pushing right by it. */
  .site-nav { margin-left: 0; }
  .header-actions { margin-left: auto; }
  .site-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    display: none;
    padding: var(--s4) var(--s5) var(--s6);
  }
  /* Above the overhanging brand mark, which also has a z-index. */
  .site-nav { z-index: 2; }
  .site-nav.is-open { display: block; }
  .site-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav > ul > li { border-bottom: 1px solid var(--line); }
  .site-nav a { display: block; padding: var(--s4) 0; }

  /* On mobile the submenus sit inline and expand with their parent. */
  .site-nav .submenu {
    position: static; transform: none; display: block;
    border: 0; box-shadow: none; padding: 0 0 var(--s3) var(--s4);
    background: transparent; min-width: 0;
  }
  .site-nav .submenu a { padding: var(--s2) 0; color: var(--muted); }
}

/* --------------------------------------------------------------- Hero */
.hero {
  position: relative;
  background: var(--cream-deep);
  text-align: center;
  padding: var(--s9) var(--s5);
  overflow: hidden;
}
.hero-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Scrim keeps text AA-readable over any photograph. */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(245, 241, 232, 0.55);
  z-index: 1;
}
.hero-inner { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
.hero-mark {
  width: 72px; height: 72px; margin: 0 auto var(--s4);
  border: 1px solid var(--sage-dark);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 0.74rem; line-height: 1.1;
  color: var(--sage-dark);
  background: rgba(255, 255, 255, 0.5);
}
.hero h1 { margin-bottom: var(--s3); }
.hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.35rem);
  color: var(--charcoal-soft);
  margin-bottom: var(--s5);
}
.hero-rule {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s3); margin-bottom: var(--s6); color: var(--sage);
}
.hero-rule::before, .hero-rule::after {
  content: ""; height: 1px; width: 60px; background: var(--sage);
}

/* ------------------------------------------------------- Product grid */
.section { padding: var(--s8) 0; }
.section-alt { background: var(--white); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--s5) var(--s4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.product-grid.cols-6 {
  grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 1000px) {
  .product-grid.cols-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .product-grid.cols-6, .product-grid { grid-template-columns: repeat(2, 1fr); }
}

.product-card { text-align: center; }
.product-card a { display: block; }

.product-thumb {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: var(--s3);
}
.product-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.product-card a:hover .product-thumb img { transform: scale(1.04); }

.product-title {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 var(--s1);
  font-weight: 400;
  line-height: 1.5;
}
.product-price {
  font-size: 0.82rem;
  color: var(--charcoal-soft);
  margin: 0;
  letter-spacing: 0.04em;
}
.product-price .was {
  text-decoration: line-through;
  color: var(--muted);
  margin-right: var(--s2);
}

/* Corner badge for sold out / made to order */
.badge {
  position: absolute;
  top: var(--s2); left: var(--s2);
  background: var(--charcoal);
  color: var(--white);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px var(--s2);
  z-index: 2;
}
.badge-sage { background: var(--sage-dark); }
.badge-gold { background: var(--gold); color: var(--charcoal); }

/* Placeholder tile shown until real photography is uploaded. */
.placeholder-tile {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  padding: var(--s4);
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--sage-dark);
  background: linear-gradient(135deg, var(--cream) 0%, var(--blush) 100%);
}
.placeholder-tile.v2 {
  background: linear-gradient(135deg, var(--cream) 0%, var(--sage) 120%);
}
.placeholder-tile.v3 {
  background: linear-gradient(160deg, var(--blush) 0%, var(--cream-deep) 100%);
}

/* ----------------------------------------------------- Collection tiles */
.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s4);
  list-style: none; margin: 0; padding: 0;
}
.collection-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cream-deep);
  border: 1px solid var(--line);
}
.collection-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}
.collection-card:hover img { transform: scale(1.05); }
.collection-card span {
  position: absolute;
  inset: auto 0 0 0;
  background: linear-gradient(to top, rgba(44,44,44,0.78), transparent);
  color: var(--white);
  padding: var(--s6) var(--s4) var(--s4);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
}

/* ------------------------------------------------------------- Footer */
.site-footer {
  background: var(--charcoal);
  color: var(--cream);
  padding: var(--s8) 0 var(--s5);
  margin-top: var(--s8);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s6);
  margin-bottom: var(--s7);
}
.site-footer h2 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s4);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--s2); }
.site-footer a, .site-footer p {
  color: var(--cream);
  font-size: 0.86rem;
  opacity: 0.82;
}
.site-footer a:hover { opacity: 1; color: var(--gold); }
.footer-bottom {
  border-top: 1px solid rgba(245, 241, 232, 0.16);
  padding-top: var(--s4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  justify-content: space-between;
  font-size: 0.76rem;
  opacity: 0.7;
}

/* ---------------------------------------------------------- Page header */
.page-head {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: var(--s6) 0 var(--s5);
  text-align: center;
}
.page-head h1 { margin-bottom: var(--s2); }
.intro-copy {
  max-width: 62ch; margin: 0 auto;
  color: var(--charcoal-soft);
}
.intro-copy p:last-child { margin-bottom: 0; }

.breadcrumb {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s4);
  display: flex; flex-wrap: wrap; gap: var(--s2);
  justify-content: center;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--charcoal); }
.breadcrumb [aria-current="page"] { color: var(--charcoal); }

/* ------------------------------------------------------------- Filters */
.filter-bar {
  background: var(--white);
  border: 1px solid var(--line);
  padding: var(--s4);
  margin-bottom: var(--s4);
}
.filter-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s4);
  align-items: end;
}
.filter-field { display: flex; flex-direction: column; gap: var(--s2); }
.filter-field .label { margin: 0; }

.filter-field select,
.filter-field input,
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 300;
  padding: var(--s3);
  border: 1px solid var(--line);
  background: var(--cream);
  color: var(--charcoal);
  border-radius: var(--radius);
  width: 100%;
}
.price-inputs {
  display: flex; align-items: center; gap: var(--s2);
  color: var(--muted);
}
.price-inputs input { min-width: 0; }

.filter-actions {
  display: flex; align-items: center; gap: var(--s4);
  flex-wrap: wrap;
}
.filter-reset {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.filter-reset:hover { color: var(--charcoal); border-bottom-color: var(--charcoal); }

.result-count {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s5);
}

/* -------------------------------------------------------- Empty state */
.empty-state {
  text-align: center;
  padding: var(--s8) var(--s4);
  background: var(--white);
  border: 1px solid var(--line);
}
.empty-state p:last-child {
  display: flex; gap: var(--s3); justify-content: center;
  flex-wrap: wrap; margin-top: var(--s5); margin-bottom: 0;
}

/* --------------------------------------------------------- Pagination */
.pagination {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s5); margin-top: var(--s7);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pagination a { border-bottom: 1px solid var(--gold); padding-bottom: 2px; }
.pagination-status { color: var(--muted); }

/* --------------------------------------------- Subcategory link block */
.subcat-links {
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  text-align: center;
}
.subcat-links h2 { margin-bottom: var(--s4); }
.subcat-links ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s3);
  justify-content: center;
}
.subcat-links a {
  display: inline-block;
  padding: var(--s2) var(--s4);
  border: 1px solid var(--line);
  background: var(--white);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.subcat-links a:hover { border-color: var(--sage); background: var(--cream-deep); }

/* ------------------------------------------------------------- Flashes */
.flash {
  padding: var(--s3) var(--s4);
  border-left: 3px solid var(--sage);
  background: var(--white);
  font-size: 0.9rem;
  margin-bottom: var(--s3);
}
.flash-error   { border-left-color: var(--error); }
.flash-success { border-left-color: var(--success); }

/* ====================================================== Product page */
.product-page { padding: var(--s6) 0 var(--s8); }
.breadcrumb-left { justify-content: flex-start; }

.product-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s7);
  align-items: start;
}
@media (max-width: 860px) {
  .product-layout { grid-template-columns: 1fr; gap: var(--s6); }
}

/* ---------------------------------------------------------- Gallery */
.gallery-main-wrap {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.gallery-main-wrap img,
.gallery-main-wrap .placeholder-tile {
  width: 100%; height: 100%; object-fit: cover;
}

.gallery-thumbs {
  list-style: none; margin: var(--s3) 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: var(--s2);
}
.gallery-thumbs button {
  display: block; width: 100%; padding: 0;
  background: var(--white);
  border: 1px solid var(--line);
  cursor: pointer;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  transition: border-color 0.2s;
}
.gallery-thumbs button:hover { border-color: var(--sage); }
.gallery-thumbs button.is-active { border-color: var(--charcoal); border-width: 2px; }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------ Detail column */
.product-detail h1 { margin-bottom: var(--s3); }
.product-detail > .label { margin-bottom: var(--s3); }

.product-detail-price {
  font-family: var(--font-display);
  font-size: 1.85rem;
  color: var(--charcoal);
  margin-bottom: var(--s4);
}
.product-detail-price .was {
  text-decoration: line-through;
  color: var(--muted);
  font-size: 1.2rem;
  margin-right: var(--s3);
}

.product-lede {
  font-size: 1.05rem;
  color: var(--charcoal-soft);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}

/* ----------------------------------------------------------- Buy box */
.buy-box { margin-bottom: var(--s5); }
.buy-note {
  font-size: 0.92rem;
  color: var(--charcoal-soft);
  margin-bottom: var(--s4);
}
.qty-field {
  display: flex; flex-direction: column; gap: var(--s2);
  max-width: 120px; margin-bottom: var(--s4);
}
.qty-field select {
  font-family: var(--font-body);
  padding: var(--s3);
  border: 1px solid var(--line);
  background: var(--cream);
  border-radius: var(--radius);
}
/* ---------------------------------------------------------- Basket */
.cart-link {
  position: relative; display: inline-flex; align-items: center;
  justify-content: center; color: inherit;
  /* 44px minimum, so it is a comfortable tap target on a phone. */
  width: 44px; height: 44px;
}
.cart-link:hover { color: var(--sage-dark); }
.cart-count {
  position: absolute; top: 2px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--sage-dark); color: #fff;
  border-radius: 9px; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.cart-lines { list-style: none; margin: 0 0 var(--s5); padding: 0; }
.cart-line {
  display: flex; gap: var(--s4); align-items: flex-start;
  padding: var(--s4) 0; border-bottom: 1px solid var(--line);
}
.cart-thumb { flex: 0 0 90px; display: block; }
.cart-thumb img {
  width: 90px; height: 90px; object-fit: cover;
  border-radius: var(--radius);
}
.cart-detail { flex: 1 1 auto; min-width: 0; }
.cart-title { font-size: 1.05rem; margin: 0 0 var(--s1); }
.cart-title a { color: inherit; text-decoration: none; }
.cart-title a:hover { text-decoration: underline; }
.cart-meta { font-size: .9rem; color: var(--muted); margin: 0 0 var(--s2); }
.cart-qty input {
  width: 64px; padding: var(--s2);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--cream); font-family: var(--font-body);
}
.cart-line-total { text-align: right; flex: 0 0 auto; }
.cart-line-total strong { display: block; margin-bottom: var(--s2); }
.link-button {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--muted); font-size: .85rem; text-decoration: underline;
  font-family: inherit;
}
.link-button:hover { color: var(--sage-dark); }

.cart-summary {
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s4); margin-bottom: var(--s4);
}
.cart-totals {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--s2) var(--s4); margin: var(--s4) 0;
}
.cart-totals dt { color: var(--muted); }
.cart-totals dd { margin: 0; text-align: right; }
.cart-ship-row { font-size: .9rem; }
.cart-total {
  font-size: 1.15rem; font-weight: 700; color: var(--charcoal);
  padding-top: var(--s3); border-top: 1px solid var(--line);
}
.cart-nudge {
  background: #f3f6ef; border-left: 3px solid var(--sage);
  padding: var(--s3); margin: 0 0 var(--s3); font-size: .9rem;
}
.cart-checkout { margin-bottom: var(--s6); }
.add-to-cart { margin-bottom: var(--s3); }
.or-divider {
  text-align: center; margin: var(--s3) 0; position: relative;
  color: var(--muted); font-size: .85rem;
}
.or-divider::before {
  content: ''; position: absolute; top: 50%; left: 0; right: 0;
  border-top: 1px solid var(--line);
}
.or-divider span {
  position: relative; background: var(--white); padding: 0 var(--s3);
}

@media (max-width: 520px) {
  .cart-line { flex-wrap: wrap; }
  .cart-line-total { width: 100%; text-align: left; }
}

/* Shipping zone picker in the buy box */
.ship-picker {
  display: flex; flex-direction: column; gap: var(--s2);
  margin-bottom: var(--s4);
}
.ship-picker select {
  font-family: var(--font-body);
  padding: var(--s3);
  border: 1px solid var(--line);
  background: var(--cream);
  border-radius: var(--radius);
  max-width: 220px;
}
.ship-picker .ship-note { margin: 0; }

#paypal-buttons { min-height: 48px; margin-bottom: var(--s3); }

.trust-row {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: var(--s4) 0 0;
}

/* -------------------------------------------------------- Spec list */
.spec-list {
  margin: 0 0 var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s2) var(--s5);
  font-size: 0.9rem;
}
.spec-list dt {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.spec-list dd { margin: 0; color: var(--charcoal-soft); }

.tag-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; }
.tag-row a {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px var(--s3);
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--muted);
}
.tag-row a:hover { border-color: var(--sage); color: var(--charcoal); }

/* ------------------------------------------- Description, FAQ blocks */
.product-description, .product-faq {
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  max-width: var(--maxw-text);
}
.product-description h2, .product-faq h2 { margin-bottom: var(--s4); }
.rich-text p { color: var(--charcoal-soft); }
.rich-text p:last-child { margin-bottom: 0; }

.product-faq details {
  border-bottom: 1px solid var(--line);
  padding: var(--s3) 0;
}
.product-faq summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.1rem;
  padding-right: var(--s4);
}
.product-faq summary:hover { color: var(--sage-dark); }
.product-faq details p {
  margin: var(--s3) 0 0;
  color: var(--charcoal-soft);
  font-size: 0.95rem;
}

/* ================================================ Public forms */
.form-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s7);
  align-items: start;
}
@media (max-width: 880px) {
  .form-layout { grid-template-columns: 1fr; gap: var(--s6); }
}

.form-block {
  border: 0; padding: 0; margin: 0 0 var(--s6);
}
.form-block legend {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0 var(--s4);
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
  width: 100%;
}

.form-field { display: block; margin-bottom: var(--s4); }
.form-field > span, .field-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s2);
}
.form-field textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.65;
  padding: var(--s3);
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--charcoal);
  border-radius: var(--radius);
  width: 100%;
  resize: vertical;
}
.form-field input[type=file] {
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: var(--s3);
  border: 1px dashed var(--line);
  background: var(--white);
  width: 100%;
  border-radius: var(--radius);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: #B5AE9E; }

.form-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
}
@media (max-width: 560px) { .form-pair { grid-template-columns: 1fr; } }

.form-hint { font-size: 0.8rem; color: var(--muted); margin: var(--s2) 0 0; }
.required-dot { color: var(--error); }

.check-field {
  display: flex; align-items: flex-start; gap: var(--s3);
  margin-bottom: var(--s3); font-size: 0.95rem;
}
.check-field input { margin-top: 5px; flex: none; }

/* ------------------------------------------------- Form sidebar */
.form-aside { display: flex; flex-direction: column; gap: var(--s4); }
.aside-card {
  background: var(--white);
  border: 1px solid var(--line);
  padding: var(--s5);
}
.aside-card h2 { margin-bottom: var(--s4); }
.aside-card details {
  border-bottom: 1px solid var(--line);
  padding: var(--s3) 0;
}
.aside-card details:last-child { border-bottom: 0; padding-bottom: 0; }
.aside-card summary {
  cursor: pointer;
  font-size: 0.92rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
}
.aside-card summary:hover { color: var(--sage-dark); }
.aside-card details p {
  margin: var(--s2) 0 0;
  font-size: 0.88rem;
  color: var(--charcoal-soft);
}

.step-list {
  margin: 0; padding-left: var(--s5);
  font-size: 0.92rem; color: var(--charcoal-soft);
}
.step-list li { margin-bottom: var(--s3); }
.step-list li:last-child { margin-bottom: 0; }

/* ---------------------------------------------- Confirmation block */
.confirm-block {
  max-width: 60ch; margin: 0 auto;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--line);
  padding: var(--s8) var(--s5);
}
.confirm-block .label { margin-bottom: var(--s3); }
.confirm-block h2 { margin-bottom: var(--s4); }

/* ------------------------------------------------- Order summary */
.card-plain {
  background: var(--white);
  border: 1px solid var(--line);
  padding: var(--s5);
}
.order-summary { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.order-summary td { padding: var(--s2) 0; border-bottom: 1px solid var(--line-soft, #EFEBE1); }
.order-summary td.num { text-align: right; font-variant-numeric: tabular-nums; }
.order-summary .total-row td {
  border-bottom: 0; border-top: 1px solid var(--line);
  padding-top: var(--s3);
}

/* ------------------------------------------------- Payment messages */
.pay-message {
  font-size: 0.9rem;
  padding: var(--s3);
  background: var(--white);
  border-left: 3px solid var(--sage);
  margin: var(--s3) 0 0;
}
.pay-message:empty { display: none; }
.pay-message.is-error { border-left-color: var(--error); }

/* ------------------------------------------------- Content pages */
.prose { max-width: var(--maxw-text); }
.prose h2 {
  font-size: 1.5rem;
  margin-top: var(--s7);
  margin-bottom: var(--s3);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.15rem; margin-top: var(--s5); }
.prose p, .prose li { color: var(--charcoal-soft); }
.prose ul, .prose ol { padding-left: var(--s5); margin-bottom: var(--s4); }
.prose li { margin-bottom: var(--s2); }
.prose details {
  border-bottom: 1px solid var(--line);
  padding: var(--s4) 0;
}
.prose summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.15rem;
}
.prose summary:hover { color: var(--sage-dark); }
.prose blockquote {
  margin: var(--s5) 0;
  padding: var(--s4) var(--s5);
  border-left: 2px solid var(--gold);
  background: var(--white);
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--charcoal);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose blockquote cite {
  display: block; margin-top: var(--s3);
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--muted);
}

/* ------------------------------------------------- Process list */
.process-list { list-style: none; margin: 0 0 var(--s7); padding: 0; counter-reset: step; }
.process-list li {
  display: flex; gap: var(--s4);
  padding-bottom: var(--s5); margin-bottom: var(--s5);
  border-bottom: 1px solid var(--line);
}
.process-list li:last-child { border-bottom: 0; margin-bottom: 0; }
.process-number {
  flex: none;
  width: 42px; height: 42px;
  border: 1px solid var(--sage);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--sage-dark);
}
.process-list h2 {
  font-size: 1.25rem;
  margin: 6px 0 var(--s2);
}
.process-list p { margin: 0; }

/* --------------------------------------------------- Guide table */
.guide-table {
  width: 100%; border-collapse: collapse;
  margin: 0 0 var(--s5); font-size: 0.92rem;
  background: var(--white);
  border: 1px solid var(--line);
}
.guide-table th {
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--muted);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  background: var(--cream);
}
.guide-table td {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  color: var(--charcoal-soft);
}
.guide-table tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------- Journal list */
.post-list { list-style: none; margin: 0; padding: 0; }
.post-item {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--s5);
  padding-bottom: var(--s6);
  margin-bottom: var(--s6);
  border-bottom: 1px solid var(--line);
}
.post-item:last-child { border-bottom: 0; margin-bottom: 0; }
.post-item h2 {
  font-size: 1.6rem;
  margin: var(--s2) 0 var(--s3);
}
.post-item p { color: var(--charcoal-soft); }
.post-item .label { margin: 0; }
.post-thumb {
  display: block;
  border: 1px solid var(--line);
  background: var(--white);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.post-thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 680px) {
  .post-item { grid-template-columns: 1fr; gap: var(--s4); }
}

/* ===================================================== Article page */
.article-meta {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  align-items: center;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s3);
}

.article-lede {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--charcoal-soft);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}

.article-hero {
  margin: var(--s5) 0;
  border: 1px solid var(--line);
  width: 100%;
}

/* --------------------------------------------- Table of contents */
.toc {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold);
  padding: var(--s4) var(--s5);
  margin: var(--s5) 0 var(--s6);
}
.toc h2 { margin: 0 0 var(--s3); }
.toc ol {
  margin: 0; padding-left: var(--s5);
  font-size: 0.92rem;
}
.toc li { margin-bottom: var(--s2); color: var(--charcoal-soft); }
.toc li:last-child { margin-bottom: 0; }
.toc a { color: var(--charcoal-soft); }
.toc a:hover { color: var(--charcoal); text-decoration: underline; }

/* Offset anchor targets so the sticky header does not cover headings. */
.prose h2[id] { scroll-margin-top: 90px; }

/* ------------------------------------------------- In-article CTA */
.article-cta {
  background: var(--cream-deep);
  border: 1px solid var(--line);
  padding: var(--s6) var(--s5);
  margin: var(--s7) 0 0;
  text-align: center;
}
.article-cta h2 { margin-top: 0; font-size: 1.4rem; }
.article-cta p { color: var(--charcoal-soft); }
.article-cta p:last-child { justify-content: center; }

/* ----------------------------------------------- Related articles */
.related-posts {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s4);
}
.related-posts a {
  display: block; height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  padding: var(--s5);
  transition: border-color 0.2s;
}
.related-posts a:hover { border-color: var(--sage); }
.related-posts h3 {
  font-size: 1.1rem;
  margin: 0 0 var(--s2);
  line-height: 1.3;
}
.related-posts p {
  font-size: 0.88rem;
  color: var(--charcoal-soft);
  margin: 0 0 var(--s3);
}
.read-more {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-dark);
}

/* Reading time on journal index cards */
.post-item .article-meta { margin-bottom: var(--s2); }