/* ==========================================================================
   LivLocal
   Design tokens live in the :root block below. Change a value here and the
   whole site follows. Brand colours are provisional and easy to swap.
   ========================================================================== */

:root {
  /* Brand palette (provisional, swap freely) */
  --clay: #9C4A32;
  --clay-hover: #863D28;
  --clay-tint: #F7EAE4;
  --sage: #5F6F55;
  --sage-tint: #EDF1EA;
  --gold: #C9962F;
  --gold-tint: #FBF3E0;

  /* Neutrals */
  --canvas: #FAF6F0;
  --surface: #FFFFFF;
  --surface-alt: #F4EEE5;
  --ink: #262220;
  --ink-soft: #6B6259;
  --border: #E8E0D6;
  --border-strong: #D8CDBE;

  /* Semantic */
  --accent: var(--clay);
  --accent-hover: var(--clay-hover);
  --danger: #B3261E;
  --focus: #1F6FEB;

  /* The collar pick is outlined blue so the two fabric slots never get confused. */
  --contrast-line: #A8C0CE;
  --contrast-line-strong: #7C9DAF;

  /* Type */
  --font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Shape and depth */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(38, 34, 32, .05), 0 4px 12px rgba(38, 34, 32, .04);
  --shadow-lift: 0 2px 4px rgba(38, 34, 32, .06), 0 12px 28px rgba(38, 34, 32, .08);

  /* Layout */
  --rail-w: 72px;
  --rail-gap: 12px;
  --maxw: 1120px;
  --gutter: 24px;
  --header-h: 68px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --clay: #D98A6E;
    --clay-hover: #E39B80;
    --clay-tint: #3A2A24;
    --sage: #9DB192;
    --sage-tint: #2A3128;
    --gold: #D9B25E;
    --gold-tint: #332C1D;

    --canvas: #17150F;
    --surface: #1F1C16;
    --surface-alt: #262219;
    --ink: #F5F1EA;
    --ink-soft: #B0A79B;
    --border: #332E25;
    --border-strong: #443D31;

    --accent: var(--clay);
    --accent-hover: var(--clay-hover);
    --danger: #E97366;
    --focus: #7FB0F5;

    --contrast-line: #5E7885;
    --contrast-line-strong: #8FAEBE;

    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .3);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, .4), 0 12px 28px rgba(0, 0, 0, .35);
  }
}

/* ---------------------------------- base ---------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--accent); text-underline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--ink);
}
h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 760px; }
.center { text-align: center; }
.left { text-align: left; }
.center-row { justify-content: center; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--surface); color: var(--ink);
  padding: 10px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .74rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 10px;
}

/* --------------------------------- header --------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  border-top: 3px solid var(--accent);
}
.header-inner {
  min-height: var(--header-h);
  display: flex; align-items: center; gap: 24px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 26px; height: 26px; color: var(--accent); flex: none; }
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-text { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: var(--radius-sm);
  color: var(--ink-soft); text-decoration: none; font-size: .95rem; font-weight: 500;
}
.nav-link:hover { color: var(--ink); background: var(--surface-alt); }
.nav-link.is-active { color: var(--ink); font-weight: 600; }
.nav-link.is-active::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 2px; background: var(--accent); border-radius: 2px;
}
.cart-count[hidden] { display: none; }
.cart-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--accent); color: #fff; border-radius: 999px;
  font-size: .72rem; font-weight: 700; line-height: 1;
}

.nav-toggle {
  display: none; margin-left: auto;
  width: 44px; height: 44px; padding: 11px;
  background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; margin: 4px 0; }
.mobile-nav { border-top: 1px solid var(--border); background: var(--surface); }
.mobile-nav .wrap { display: flex; flex-direction: column; padding-block: 8px; }
.mobile-nav a { padding: 13px 0; text-decoration: none; color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--border); }
.mobile-nav a:last-child { border-bottom: 0; }

/* --------------------------------- buttons -------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 12px 22px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-family: inherit; font-size: .96rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--surface-alt); }
.btn-light { background: #fff; color: #262220; }
.btn-light:hover { background: #F3EDE4; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.link-arrow { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 5px 0; }
.link-arrow::after { content: '\2192'; transition: transform .15s ease; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------------------------------- hero ---------------------------------- */

.hero { position: relative; isolation: isolate; overflow: hidden; background: #221E19; }
.hero-media {
  position: absolute; inset: 0; z-index: -2;
  background-image: url('/assets/img/hero.jpg');
  background-image: image-set(url('/assets/img/hero.webp') type('image/webp'), url('/assets/img/hero.jpg') type('image/jpeg'));
  background-size: 120%; background-position: 0% center;
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(26,22,18,1) 0%, rgba(26,22,18,.874) 20%, rgba(26,22,18,.529) 38%, rgba(26,22,18,.161) 54%, rgba(26,22,18,0) 66%);
}
.hero-inner { padding-block: clamp(72px, 10vw, 132px); color: #fff; }
.hero-inner > * { max-width: 660px; }
@media (max-width: 900px) { .hero-media { background-size: cover; background-position: center; } }
@media (max-width: 720px) { .hero::after { background: linear-gradient(100deg, rgba(26,22,18,1) 0%, rgba(26,22,18,.851) 52%, rgba(26,22,18,.46) 100%); } }
.hero-inner h1 { color: #fff; margin-bottom: 16px; }
.hero .eyebrow { color: #F0C89B; }
.hero-sub { font-size: 1.08rem; color: rgba(255,255,255,.88); margin-bottom: 28px; }
.hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,.42); }
.hero .btn-ghost:hover { background: rgba(255,255,255,.14); }

/* --------------------------------- sections -------------------------------- */

.section { padding-block: clamp(52px, 7vw, 88px); }
.section-alt { background: var(--surface-alt); }
.section-head { max-width: 680px; margin-bottom: 36px; }
.section-head p { color: var(--ink-soft); }
.section-more { margin-top: 28px; }

.page-head { padding-block: clamp(44px, 6vw, 72px) 8px; }
.page-sub { color: var(--ink-soft); font-size: 1.06rem; max-width: 640px; }

.props { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.prop h3 { margin-bottom: 6px; }
.prop p { color: var(--ink-soft); font-size: .96rem; }
.prop-icon { display: block; width: 30px; height: 30px; color: var(--accent); margin-bottom: 14px; }
.prop-icon svg { width: 100%; height: 100%; }

/* ----------------------------------- grid ---------------------------------- */

.grid { display: grid; gap: 26px; }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); border-color: var(--border-strong); }
.card-media { display: block; }
.card-body { padding: 18px 20px 22px; }
.card-cat { text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; font-weight: 700; color: var(--ink-soft); margin: 0 0 6px; }
.card-title { font-size: 1.16rem; margin: 0 0 6px; }
.card-title a { color: var(--ink); text-decoration: none; display: inline-block; padding: 6px 0; }
.card-title a:hover { color: var(--accent); }
.card-price { margin: 0; font-weight: 600; color: var(--accent); }
.card--quote { justify-content: center; }
.card--quote .card-body { padding: 28px 24px; }
.card--quote p { color: var(--ink-soft); font-size: .95rem; margin-bottom: 14px; }

/* Fabric tile: CSS-drawn stand-in until real product photos land. */
.tile {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: linear-gradient(150deg, var(--tile-a), var(--tile-b));
  display: grid; align-items: end; justify-items: start;
}
.tile--lg { aspect-ratio: 1 / 1; border-radius: var(--radius-lg); }
.tile-weave {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.07) 0 1px, transparent 1px 6px);
}
.tile--clay { --tile-a: #C4795C; --tile-b: #8A4230; }
.tile--sage { --tile-a: #9AA88D; --tile-b: #5B6B51; }
.tile--gold { --tile-a: #E2BE76; --tile-b: #A67C2A; }

/* ---------------------------------- fabric --------------------------------- */

.fabric-strip {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.fabric-strip li { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--ink-soft); }
.fabric-dot, .swatch-chip {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: var(--chip);
  background-image: var(--chip-image, none);
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.06);
}
.fabric-dot { width: 42px; height: 42px; }
.provisional { margin-top: 20px; font-size: .88rem; color: var(--ink-soft); font-style: italic; }

/* ---------------------------------- steps ---------------------------------- */

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.steps li { display: flex; gap: 18px; align-items: flex-start; }
.steps h3 { margin-bottom: 4px; }
.steps p { color: var(--ink-soft); font-size: .95rem; }
.steps--tight { gap: 16px; }
.step-num {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--clay-tint); color: var(--clay);
  font-weight: 700; font-size: .95rem;
}
@media (prefers-color-scheme: dark) { .step-num { color: var(--gold); background: var(--gold-tint); } }

/* ---------------------------------- split ---------------------------------- */

.split { display: grid; gap: clamp(28px, 5vw, 56px); grid-template-columns: 1fr 1fr; align-items: center; }
.split--reverse .split-media { order: 2; }
.split-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.split-copy p { color: var(--ink-soft); }

/* ------------------------------ photo grids ------------------------------- */

.photo-grid { display: grid; gap: clamp(10px, 1.4vw, 16px); grid-template-columns: repeat(4, 1fr); }
.photo-grid--six { grid-template-columns: repeat(3, 1fr); }
.photo-grid picture { display: block; }
.photo-grid img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow);
  background: var(--surface-alt);
}
@media (max-width: 900px) { .photo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .photo-grid, .photo-grid--six { grid-template-columns: repeat(2, 1fr); }
  .photo-grid > picture:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .photo-grid > picture:last-child:nth-child(odd) img { aspect-ratio: 16 / 10; }
}

/* ---------------------------------- table ---------------------------------- */

.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.price-table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 460px; }
.price-table th, .price-table td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--border); }
.price-table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); background: var(--surface-alt); }
.price-table tbody tr:last-child td { border-bottom: 0; }
/* The Lydia Dress size chart, shown with the same table the price tiers use. */
.size-table { min-width: 520px; }
.size-table tbody th { font-weight: 600; color: var(--ink); }
.size-table tbody tr:last-child th { border-bottom: 0; }
.accordion .table-scroll { margin-top: 12px; }
.price-cell { font-weight: 700; color: var(--accent); }
.table-note { margin-top: 14px; font-size: .88rem; color: var(--ink-soft); }

/* --------------------------------- cta band -------------------------------- */

.cta-band { background: #262220; color: #fff; padding-block: clamp(48px, 6vw, 76px); }
@media (prefers-color-scheme: dark) { .cta-band { background: #0F0D0A; } }
.cta-inner { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; }
.cta-inner h2 { color: #fff; margin-bottom: 8px; }
.cta-inner p { color: rgba(255,255,255,.76); max-width: 560px; margin: 0; }

/* --------------------------------- product --------------------------------- */

.product-page { padding-top: clamp(28px, 4vw, 44px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: .86rem; color: var(--ink-soft); margin-bottom: 26px; }
.crumbs a { color: var(--ink-soft); text-decoration: none; display: inline-block; padding: 6px 2px; }
.crumbs a:hover { color: var(--accent); }

.product-layout {
  display: grid;
  /* the photo column carries the main photo, so it takes the larger share */
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  column-gap: clamp(28px, 5vw, 60px);
  row-gap: 20px;
  grid-template-rows: max-content 1fr;
  grid-template-areas:
    "media head"
    "media buy"
    "sub   .";
  align-items: start;
}
/* The photo frame is laid out by .product-layout itself. The only thing that
   follows it is the "we have your exact pair" note, so the page runs straight
   from the photo and buy area into the fabric picker. */
.product-media, .product-media .gallery { display: contents; }
.product-media .gallery-frame,
.product-media .tile { grid-area: media; }
.product-media .gallery-meta { grid-area: sub; display: grid; gap: 10px; }
.product-media .media-note { grid-area: sub; }
/* The picker takes the full width straight under the buy area, and the details
   follow it, so changing fabric never means scrolling past the write-up. */
.product-layout:has(.product-picker) {
  grid-template-areas:
    "media head"
    "media buy"
    "sub   ."
    "picker picker"
    "more more";
}
.product-media { grid-area: media; }
.product-head { grid-area: head; }
.product-buy { grid-area: buy; }
.product-more { grid-area: more; }
.product-picker { grid-area: picker; }
.media-note { margin-top: 14px; font-size: .86rem; color: var(--ink-soft); }
/* in the product grid the row gap already spaces it, so drop the extra margin */
.product-media .media-note { margin-top: 0; }
.product-head h1 { margin-bottom: 10px; }
.product-price { font-size: 1.35rem; font-weight: 700; color: var(--accent); margin-bottom: 12px; }
.product-summary { color: var(--ink-soft); }

.buy { margin: 0; display: grid; gap: 12px; }
.opt { border: 0; padding: 0; margin: 0; }
.opt legend, .opt-label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 4px; padding: 0; }
.req { color: var(--danger); margin-left: 3px; }
/* The size hint shares the label line, so the buy area stays level with the photo. */
.opt-label { display: inline-block; margin: 0 6px 0 0; }
.opt-help { display: inline; margin: 0; }
.opt .select-wrap { margin-top: 8px; }

.select-wrap { position: relative; }
.select-wrap::after {
  content: ''; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
select, input[type="number"] {
  width: 100%; min-height: 46px; padding: 11px 14px;
  font-family: inherit; font-size: .96rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  appearance: none;
}
select { padding-right: 42px; }
select:hover, input[type="number"]:hover { border-color: var(--ink-soft); }

.swatches { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.swatch {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 10px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer; text-align: center;
}
.swatch-chip { width: 64px; height: 64px; }
.swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatch-name { font-size: .78rem; color: var(--ink-soft); line-height: 1.25; }
.swatch:hover { border-color: var(--border-strong); }
.swatch:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.swatch:has(input:checked) .swatch-name { color: var(--ink); font-weight: 600; }
.swatch:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Fabric picker filters: a colour row and a search box above the grid.
   Both reuse the existing shop filter pills and form field styling. */
.fabric-filters { display: grid; gap: 10px; margin: 0 0 14px; }
.fabric-filters .filters { margin-bottom: 0; }
.fabric-search {
  width: 100%; min-height: 46px; padding: 11px 14px;
  font-family: inherit; font-size: .96rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.fabric-search:hover { border-color: var(--ink-soft); }
.fabric-search:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.fabric-status { font-size: .86rem; color: var(--ink-soft); margin: 0; }
.fabric-status:empty { display: none; }
.swatch.is-filtered-out { display: none; }

.buy-row { display: flex; gap: 14px; align-items: flex-end; }
.qty-field { width: 104px; flex: none; }
.qty-field label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 6px; }
.buy-row .btn { flex: 1; }
.buy-note { font-size: .86rem; color: var(--ink-soft); margin: 0; }
/* points from Add to cart down to the fabric picker: a step up from the note above it */
.buy-jump { margin: 0; font-size: 1rem; font-weight: 600; color: var(--ink); }
.buy-jump-arrow { display: inline-block; }

/* Embroidery add-on: one tick box, then the wording field it reveals. */
.opt-embroidery { display: grid; gap: 8px; }
.check-line {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-weight: 600; font-size: .95rem; color: var(--ink);
}
.check-line input[type="checkbox"] {
  flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer;
}
.check-line:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.opt-price { font-weight: 600; color: var(--ink-soft); }
.embroidery-field { display: grid; gap: 6px; }
.embroidery-field[hidden] { display: none; }
.embroidery-field input[type="text"] {
  width: 100%; padding: 11px 13px; font: inherit; font-size: .95rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.embroidery-field input[type="text"]:hover { border-color: var(--ink-soft); }
.embroidery-field input[type="text"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.form-error { margin: 0; color: var(--danger); font-size: .9rem; font-weight: 600; }

.quote-box {
  margin: 26px 0 22px; padding: 22px;
  background: var(--gold-tint); border: 1px solid var(--border); border-radius: var(--radius);
}
.quote-box p { margin-bottom: 16px; }

.bullets { margin: 22px 0; padding-left: 20px; color: var(--ink-soft); }
.bullets li { margin-bottom: 8px; }

.accordion { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 8px; }
.accordion summary {
  cursor: pointer; font-weight: 600; font-family: var(--font-display); font-size: 1.08rem;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: '+'; font-size: 1.3rem; color: var(--ink-soft); line-height: 1; }
.accordion[open] summary::after { content: '\2013'; }
.accordion > p, .accordion > dl { color: var(--ink-soft); margin-top: 10px; }

.spec-list { display: grid; grid-template-columns: minmax(110px, 34%) 1fr; gap: 8px 18px; margin: 12px 0 0; font-size: .93rem; }
.spec-list dt { font-weight: 600; color: var(--ink); }
.spec-list dd { margin: 0; }

/* --------------------------------- filters --------------------------------- */

.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.filter {
  min-height: 44px; padding: 10px 18px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px;
  font-family: inherit; font-size: .92rem; font-weight: 500; color: var(--ink-soft); cursor: pointer;
}
.filter:hover { border-color: var(--ink-soft); color: var(--ink); }
.filter.is-active { background: var(--ink); border-color: var(--ink); color: var(--canvas); font-weight: 600; }
.grid-item[hidden] { display: none; }
.shop-empty { margin-top: 28px; color: var(--ink-soft); }

/* --------------------------------- notices --------------------------------- */

.notice {
  margin-top: 34px; padding: 24px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.notice h3 { margin-bottom: 10px; }
.notice .bullets { margin-bottom: 0; }

.faq-list { display: grid; gap: 0; }
.faq-list .accordion:first-child { border-top: 1px solid var(--border); }
.faq-list .accordion { margin-top: 0; padding: 18px 0; }

.contact-card {
  padding: 30px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}

.big-check { display: inline-grid; place-items: center; width: 56px; height: 56px; color: var(--accent); margin-bottom: 18px; }
.big-check svg { width: 100%; height: 100%; }

/* --------------------------------- utilities -------------------------------- */

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

/* ---------------------------------- cart ----------------------------------- */

/* The hidden attribute has to beat the grid display, or an empty cart still
   shows its summary and a checkout button. */
.cart-layout[hidden], .cart-empty[hidden] { display: none; }
.cart-layout { display: grid; gap: 34px; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.cart-empty { padding: 48px 0; max-width: 480px; }
.cart-empty h2 { margin-bottom: 8px; }
.cart-empty p { color: var(--ink-soft); margin-bottom: 22px; }

.cart-line {
  display: grid; grid-template-columns: 84px 1fr auto; gap: 18px;
  padding: 20px 0; border-bottom: 1px solid var(--border); align-items: start;
}
.cart-line:first-child { border-top: 1px solid var(--border); }
.cart-thumb { aspect-ratio: 1 / 1; border-radius: var(--radius-sm); overflow: hidden; }
.cart-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cart-line h3 { font-size: 1.02rem; margin-bottom: 4px; }
.cart-line h3 a { color: var(--ink); text-decoration: none; }
.cart-opts { font-size: .86rem; color: var(--ink-soft); margin: 0 0 12px; }
.cart-opts span { display: block; }
.cart-line-controls { display: flex; align-items: center; gap: 14px; }
.cart-line-controls input[type="number"] { width: 76px; min-height: 40px; }
.cart-remove {
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  font-family: inherit; font-size: .88rem; color: var(--ink-soft); text-decoration: underline;
}
.cart-remove:hover { color: var(--danger); }
.cart-line-price { font-weight: 700; white-space: nowrap; }
/* The embroidery charge reads as a small add-on under the piece it belongs to. */
.cart-line--addon { background: var(--surface-alt); }

.cart-summary {
  position: sticky; top: calc(var(--header-h) + 20px);
  padding: 24px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.cart-summary h2 { font-size: 1.15rem; }
.totals { margin: 0 0 20px; }
.totals > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.totals > div:last-child { border-bottom: 0; }
.totals dt { color: var(--ink-soft); font-size: .94rem; }
.totals dd { margin: 0; font-weight: 600; }
#cart-subtotal { font-size: 1.1rem; }
.cart-summary .link-arrow { margin-top: 16px; font-size: .92rem; }

/* --------------------------------- footer ---------------------------------- */

.site-footer { background: var(--surface); border-top: 1px solid var(--border); padding-block: clamp(40px, 5vw, 60px) 28px; margin-top: 0; }
.footer-inner { display: grid; gap: 34px; grid-template-columns: 1.6fr 1fr 1fr 1fr; }
.footer-brand .brand-text { display: block; margin-bottom: 10px; }
.footer-brand p { color: var(--ink-soft); font-size: .93rem; max-width: 320px; }
.footer-col h3 { font-size: .76rem; text-transform: uppercase; letter-spacing: .11em; color: var(--ink-soft); margin-bottom: 12px; font-family: var(--font-body); font-weight: 700; }
.footer-col a { display: block; padding: 9px 0; color: var(--ink); text-decoration: none; font-size: .94rem; }
.footer-col a:hover { color: var(--accent); }
.footer-base {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
}
.footer-base p { margin: 0; font-size: .85rem; color: var(--ink-soft); }

/* -------------------------------- responsive ------------------------------- */

@media (max-width: 900px) {
  .site-nav { display: none; }
  .nav-toggle { display: block; }
  .product-layout {
    /* minmax(0, ...) so a wide table inside can scroll instead of widening the page */
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "media" "sub" "head" "buy" "more";
  }
  .product-layout:has(.product-picker) {
    grid-template-areas: "media" "sub" "head" "buy" "picker" "more";
  }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split-media { order: 0; }
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  :root { --gutter: 18px; }
  .hero-inner { padding-block: 64px; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
  .btn-row .btn { width: 100%; }
  .buy-row { flex-direction: column; align-items: stretch; }
  .qty-field { width: 100%; }
  .cart-line { grid-template-columns: 64px 1fr; }
  .cart-line-price { grid-column: 2; }
  .footer-inner { grid-template-columns: 1fr; }
  .price-table { min-width: 0; font-size: .88rem; }
  .price-table th, .price-table td { padding: 10px 12px; }
  .size-table { min-width: 460px; }
  .gallery-nav { width: 38px; height: 38px; font-size: 1.4rem; }
  .gallery-nav--prev { left: 6px; }
  .gallery-nav--next { right: 6px; }
  .gallery-count { right: 6px; bottom: 6px; }
  .spec-list { grid-template-columns: 1fr; gap: 2px 0; }
  .spec-list dd { margin-bottom: 10px; }
}

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


/* ---------------------- product photos and photo gallery -------------------- */

.card-img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  background: var(--surface);
}
.gallery { display: grid; gap: 14px; }
.gallery-stage { position: relative; margin: 0; touch-action: pan-y; user-select: none; }
.gallery-stage:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: var(--radius-lg); }
/* Without this the browser starts a native image drag and the swipe never lands. */
.gallery-stage img { -webkit-user-drag: none; user-drag: none; }
.gallery-stage picture { display: block; }
.gallery-main {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow);
}
/* The photo strip runs down the left of the main photo and scrolls on its own. */
.gallery-frame { position: relative; padding-left: calc(var(--rail-w) + var(--rail-gap)); }
.gallery-thumbs {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--rail-w);
  list-style: none; margin: 0; padding: 0 2px 0 0;
  display: grid; gap: 8px; align-content: start;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.gallery-thumbs::-webkit-scrollbar { width: 6px; }
.gallery-thumbs::-webkit-scrollbar-track { background: transparent; }
.gallery-thumbs::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
/* On a narrow screen the strip goes back under the photo and runs sideways. */
@media (max-width: 900px) {
  .gallery-frame { padding-left: 0; padding-bottom: calc(var(--rail-w) + 10px); }
  .gallery-thumbs {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; height: var(--rail-w);
    grid-auto-flow: column; grid-auto-columns: var(--rail-w); align-content: stretch;
    overflow-x: auto; overflow-y: hidden; padding: 0 0 2px;
  }
}
.gallery-thumb {
  display: block; width: 100%; padding: 0; cursor: pointer; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
.gallery-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.gallery-thumb:hover { border-color: var(--border-strong); }
.gallery-thumb.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.gallery-thumb:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.gallery-caption { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.gallery-status {
  margin: 0; padding: 10px 12px; font-size: .9rem; color: var(--ink);
  background: var(--gold-tint); border: 1px solid var(--border); border-radius: var(--radius);
}

/* Carousel controls: previous and next over the photo, and a position counter. */
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; padding: 0; display: grid; place-items: center;
  font-family: inherit; font-size: 1.7rem; line-height: 1; cursor: pointer;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 50%; box-shadow: var(--shadow);
}
.gallery-nav:hover { color: var(--accent); border-color: var(--accent); }
.gallery-nav--prev { left: 10px; }
.gallery-nav--next { right: 10px; }
.gallery-count {
  position: absolute; right: 10px; bottom: 10px; margin: 0;
  padding: 5px 11px; font-size: .8rem; font-weight: 600; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  box-shadow: var(--shadow);
}

/* -------------------------- fabric preview popover -------------------------- */

.swatch { position: relative; }
.swatch-zoom {
  position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center; cursor: zoom-in; opacity: .85;
  background: var(--surface); color: var(--ink); font-size: .8rem; line-height: 1;
  border: 1px solid var(--border-strong); border-radius: 50%;
}
.swatch-zoom:hover, .swatch-zoom:focus-visible { opacity: 1; color: var(--accent); border-color: var(--accent); }
.fabric-preview {
  position: absolute; z-index: 60; width: 280px; max-width: calc(100vw - 20px);
  padding: 12px; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.fabric-preview img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; }
.fabric-preview-name { margin: 10px 0 0; font-size: .92rem; font-weight: 600; }
.fabric-preview-close {
  position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center; cursor: pointer; font-size: 1rem; line-height: 1;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 50%;
}

/* Pointer devices preview on hover and keyboard focus, so the tap control stays
   for touch screens only. */
@media (hover: hover) and (pointer: fine) { .swatch-zoom { display: none; } }

/* ------------------------- fabric picker (product) ------------------------- */
/* Two slots stay pinned while the fabric list scrolls. One panel holds the
   search box, a pattern row, a colour row, and the grid. */

.picker { display: grid; gap: 12px; margin: 2px 0 18px; }

.picker-slots {
  /* the header sits above this bar, and its borders add 4px to --header-h */
  position: sticky; top: calc(var(--header-h) + 4px); z-index: 30;
  display: grid; gap: 10px; grid-template-columns: 1fr 1fr;
  padding: 10px 0; background: var(--canvas); border-bottom: 1px solid var(--border);
}
.slot {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 12px; font-family: inherit; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.slot:hover { border-color: var(--border-strong); }
/* The collar slot is outlined blue so it never reads as the dress body. */
.slot[data-slot="secondaryFabric"] { border-color: var(--contrast-line); }
.slot[data-slot="secondaryFabric"]:hover { border-color: var(--contrast-line-strong); }
.slot[data-slot="secondaryFabric"].is-active {
  border-color: var(--contrast-line-strong); box-shadow: 0 0 0 1px var(--contrast-line-strong);
}
.slot.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.slot:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.slot-chip {
  flex: none; width: 48px; height: 48px; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background-color: var(--chip, #E8E0D6); background-image: var(--chip-image);
  background-size: cover; background-position: center;
}
.slot-text { display: block; min-width: 0; }
.slot-label { display: block; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.slot-name { display: block; font-size: .92rem; font-weight: 600; color: var(--ink); }
.slot-change { flex: none; margin-left: auto; font-size: .84rem; font-weight: 600; color: var(--accent); }

.picker-help { margin: 0; font-size: .86rem; color: var(--ink-soft); }
.picker-help:empty { display: none; }
.picker-inputs { display: none; }

.picker-panel { padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.picker-row-label { margin: 16px 0 8px; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.picker-panel .picker-row-label:first-of-type { margin-top: 0; }
.picker-panel .filters { margin-bottom: 0; }

/* Fold the search and the two filter rows away, so the grid is what you see. */
.picker-filters[hidden] { display: none; }
.picker-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  min-height: 44px; margin-bottom: 12px; padding: 8px 12px;
  font-family: inherit; font-size: .84rem; font-weight: 600; color: var(--ink);
  background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
}
.picker-toggle:hover { border-color: var(--ink-soft); }
.picker-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.picker-toggle-caret {
  width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s ease;
}
.picker-toggle[aria-expanded="false"] .picker-toggle-caret { transform: rotate(-45deg); }

.picker-panel .swatch { padding: 0; }
.swatch-pick {
  display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%;
  padding: 10px 6px; font-family: inherit; text-align: center; cursor: pointer;
  background: none; border: 0; border-radius: inherit;
}
.swatch-pick:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.swatch.is-picked { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
/* A tile taken by the collar keeps the collar's blue outline in the grid. */
.swatch.is-picked[data-picked-slot="secondaryFabric"] {
  border-color: var(--contrast-line-strong); box-shadow: 0 0 0 1px var(--contrast-line-strong);
}
.swatch.is-picked .swatch-name { color: var(--ink); font-weight: 600; }

.picker-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.picker-reset {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 12px;
  font-family: inherit; font-size: .84rem; font-weight: 600;
  color: var(--ink-soft); background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer;
}
.picker-reset:hover { color: var(--accent); text-decoration: underline; }
.picker-reset:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.picker-empty { display: none; margin: 0; padding: 24px 8px; font-size: .92rem; color: var(--ink-soft); }
.picker-empty.is-on { display: block; }

/* The magnifier is the only way into the preview, so it stays visible everywhere. */
.swatch-zoom { display: grid; opacity: 1; }
.fabric-preview-meta { margin: 4px 0 0; font-size: .82rem; line-height: 1.45; color: var(--ink-soft); }

@media (max-width: 560px) {
  .picker-slots { grid-template-columns: 1fr; gap: 8px; padding: 8px 0; }
  .slot { padding: 8px 10px; gap: 10px; }
  .slot-chip { width: 40px; height: 40px; }
  .slot-change { font-size: .8rem; }
  .picker-panel { padding: 14px 12px; }
}

/* ---------------------------------- social --------------------------------- */

.social { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 12px; }
.social-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-soft); text-decoration: none; min-height: 34px;
}
.social-icon { display: inline-flex; flex: none; }
.social-icon svg { display: block; width: 20px; height: 20px; }
.social-text { font-size: .94rem; }
.social-link:hover, .social-link:focus-visible { color: var(--accent); }
.social-link.is-placeholder { opacity: .5; cursor: default; }
.social--nav { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--border); }
.social--footer, .social--mobile { display: block; }
.social--mobile { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border); }

/* The header runs out of room for the icons before the nav collapses. */
@media (max-width: 1100px) {
  .social--nav { display: none; }
}

/* --------------------------------- contact --------------------------------- */

.contact-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.contact-form { margin-top: 18px; }
.contact-form .field { margin-bottom: 15px; }
.contact-form label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 6px; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%; padding: 11px 13px; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.field-hint { margin: 6px 0 0; font-size: .84rem; color: var(--ink-soft); }
.contact-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-status { margin: 0 0 14px; font-size: .92rem; color: var(--ink-soft); }
.contact-status.is-good { color: var(--ink); font-weight: 600; }
.contact-status.is-bad { color: var(--danger); font-weight: 600; }

/* Desktop only: the section uses the page width, the cards become tinted panels,
   the email block sits under the form, and name and email share one row. */
.contact-or { margin: 6px 0 0; font-size: .95rem; color: var(--ink-soft); }
.contact-or a { display: inline-block; padding: 8px 0; }

@media (min-width: 900px) {
  .contact-section { padding-top: 64px; }
  .contact-card { background: var(--surface-alt); border-color: transparent; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
  .contact-form > .field { grid-column: 1 / -1; }
  .contact-form > .field--half { grid-column: span 1; }
  .contact-form > .contact-status,
  .contact-form > .btn-block { grid-column: 1 / -1; }
}