/** Shopify CDN: Minification failed

Line 1389:0 Unexpected "}"

**/
/* ==========================================================================
   ZARQA COUTURE
   Palette from the brand kit: burgundy, antique gold, light gold, soft ivory.
   Type from the logo: Cinzel (ZARQA) + Parisienne (Couture),
   with Cormorant Garamond for editorial lines and Jost for everything else.
   ========================================================================== */

/* ---------- TOKENS : light (default) ----------
   Colours from the ZARQA Couture brand kit:
   Signature Burgundy #4E0812 · Antique Gold #C9A24A · Light Gold #E3C77A · Soft Ivory #F7F2EA.
   --rose and --sage keep their old names so nothing else has to change; they now
   carry the burgundy and the gold. True brand gold is too pale to read as small
   text on ivory, so --gold is a deepened gold and --gold-line is the real #C9A24A. */
:root {
  --ground:        #FBF8F3;
  --ground-2:      #F4EEE4;
  --surface:       #FFFFFF;
  --surface-warm:  #F7F2EA;

  --ink:           #241014;
  --ink-soft:      #6B5852;
  --ink-faint:     #8F7E78;

  --rose:          #7A1020;
  --rose-deep:     #4E0812;
  --rose-wash:     #F6E8EA;
  --rose-line:     rgba(122, 16, 32, 0.26);

  --sage:          #8C6B1C;
  --sage-wash:     #F6EFDC;

  --gold:          #8C6B1C;
  --gold-line:     rgba(201, 162, 74, 0.55);

  --hair:          rgba(36, 16, 20, 0.14);
  --hair-soft:     rgba(36, 16, 20, 0.07);
  --shadow:        0 24px 60px -28px rgba(36, 16, 20, 0.34);
  --shadow-sm:     0 10px 30px -16px rgba(36, 16, 20, 0.3);
  --overlay:       rgba(24, 8, 12, 0.52);

  --ok:            #4f7a4b;
  --warn:          #b0413e;
  --focus:         #4E0812;

  --wine:          #4E0812;   /* the measurement form's header bars */
  --on-wine:       #F7F2EA;

  --t-xs:   0.76rem;
  --t-sm:   0.88rem;
  --t-base: 1rem;
  --t-md:   1.12rem;
  --t-lg:   1.45rem;
  --t-xl:   2rem;

  --page:   1320px;
  --gutter: clamp(16px, 4.5vw, 60px);
  --nav-h:  76px;

  color-scheme: light;
}

/* ---------- TOKENS : dark ----------
   The dark theme is the burgundy field from the brand kit, with gold as the accent. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:        #1C0409;
    --ground-2:      #26060C;
    --surface:       #2E070E;
    --surface-warm:  #380A11;
    --ink:           #F4EBE0;
    --ink-soft:      #D3BCAF;
    --ink-faint:     #A8918A;
    --rose:          #E3C77A;
    --rose-deep:     #F0DCA8;
    --rose-wash:     #3A0C14;
    --rose-line:     rgba(227, 199, 122, 0.34);
    --sage:          #E3C77A;
    --sage-wash:     #2E2213;
    --gold:          #E3C77A;
    --gold-line:     rgba(227, 199, 122, 0.42);
    --hair:          rgba(244, 235, 224, 0.16);
    --hair-soft:     rgba(244, 235, 224, 0.08);
    --shadow:        0 24px 60px -26px rgba(0, 0, 0, 0.82);
    --shadow-sm:     0 10px 30px -14px rgba(0, 0, 0, 0.72);
    --overlay:       rgba(6, 2, 3, 0.7);
    --ok:            #9cc596;
    --warn:          #f0908b;
    --focus:         #E3C77A;
    --wine:          #4E0812;
    --on-wine:       #F7F2EA;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground:        #1C0409;
  --ground-2:      #26060C;
  --surface:       #2E070E;
  --surface-warm:  #380A11;
  --ink:           #F4EBE0;
  --ink-soft:      #D3BCAF;
  --ink-faint:     #A8918A;
  --rose:          #E3C77A;
  --rose-deep:     #F0DCA8;
  --rose-wash:     #3A0C14;
  --rose-line:     rgba(227, 199, 122, 0.34);
  --sage:          #E3C77A;
  --sage-wash:     #2E2213;
  --gold:          #E3C77A;
  --gold-line:     rgba(227, 199, 122, 0.42);
  --hair:          rgba(244, 235, 224, 0.16);
  --hair-soft:     rgba(244, 235, 224, 0.08);
  --shadow:        0 24px 60px -26px rgba(0, 0, 0, 0.82);
  --shadow-sm:     0 10px 30px -14px rgba(0, 0, 0, 0.72);
  --overlay:       rgba(6, 2, 3, 0.7);
  --ok:            #9cc596;
  --warn:          #f0908b;
  --focus:         #E3C77A;
  --wine:          #4E0812;
  --on-wine:       #F7F2EA;
  color-scheme: dark;
}

/* ==========================================================================
   BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;   /* native - no smooth-scroll library, on purpose */
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}
[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Jost", "Avenir Next", "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--rose); color: var(--ground); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.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;
}

/* ---------- type roles ---------- */
.display {
  font-family: "Cinzel", "Trajan Pro", Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.045em;
  line-height: 1.2;
  text-wrap: balance;
}
.editorial { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; }
.label {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--rose);
}
.ref {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}
.price {
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.02em;
}

.shell { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 10vw, 124px); }
.section--tight { padding-block: clamp(44px, 6vw, 76px); }
.section--wash { background: var(--surface-warm); border-block: 1px solid var(--hair-soft); }

.section-head { display: flex; flex-direction: column; gap: 14px; max-width: 64ch; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head--row {
  max-width: none;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.section-head--row > div { display: flex; flex-direction: column; gap: 14px; max-width: 60ch; }
.section-head h1, .section-head h2 { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.5rem); }
.section-head p { margin: 0; color: var(--ink-soft); font-size: var(--t-md); max-width: 58ch; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--t-sm); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--rose); text-decoration: none; padding-block: 6px;
  border-bottom: 1px solid var(--rose-line);
  transition: gap 0.3s ease, border-color 0.3s ease;
}
.link-arrow:hover { gap: 16px; border-color: var(--rose); }
.link-arrow svg { width: 16px; height: 16px; }

/* ==========================================================================
   ANNOUNCEMENT + NAV
   ========================================================================== */
.announce {
  background: var(--rose);
  color: var(--ground);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  padding: 9px var(--gutter);
  line-height: 1.5;
}
.announce span + span::before { content: "·"; margin-inline: 12px; opacity: 0.7; }
@media (max-width: 1000px) { .announce .hide-md { display: none; } }
@media (max-width: 640px) { .announce .hide-sm { display: none; } }

.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 90;
  background: var(--gold); transform: scaleX(0); transform-origin: left; pointer-events: none;
}

/* Deliberately a solid background, not backdrop-filter: the nav is always on
   screen, and a blur re-composites every photograph scrolling behind it. */
.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60;
  background: var(--ground);
  border-bottom: 1px solid var(--hair-soft);
}
.nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  min-height: var(--nav-h);
}
.nav__links { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); list-style: none; margin: 0; padding: 0; }
.nav__links a {
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap;
  text-decoration: none; color: var(--ink-soft); padding-block: 6px; position: relative;
  transition: color 0.24s ease;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rose);
  transform: scaleX(0); transform-origin: left; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--rose); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }

.wordmark {
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  text-decoration: none; line-height: 1;
}
.wordmark__z {
  font-family: "Cinzel", Georgia, serif; font-weight: 600; font-size: 1.28rem;
  letter-spacing: 0.2em; text-indent: 0.2em; color: var(--rose);
}
.wordmark__c {
  font-family: "Parisienne", cursive; font-size: 1.42rem; line-height: 0.95; color: var(--rose); margin-top: 2px;
}
.wordmark__sub {
  font-size: 0.56rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: 4px;
}

.nav__right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.icon-btn {
  position: relative;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--hair); border-radius: 50%;
  background: transparent; color: var(--ink-soft);
  cursor: pointer; padding: 0; text-decoration: none;
  transition: color 0.24s ease, border-color 0.24s ease;
}
.icon-btn:hover { color: var(--rose); border-color: var(--rose-line); }
.icon-btn svg { width: 18px; height: 18px; }
.bag-count {
  position: absolute; top: -4px; right: -4px;
  min-width: 19px; height: 19px; padding-inline: 5px;
  border-radius: 10px; background: var(--rose); color: var(--ground);
  font-size: 0.68rem; font-weight: 600; line-height: 19px; text-align: center;
  font-variant-numeric: tabular-nums;
  transform: scale(0); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bag-count.is-on { transform: scale(1); }

.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display: block; }
}

.nav__burger { display: none; }
@media (min-width: 901px) { .nav__links .menu-only { display: none; } }

@media (max-width: 900px) {
  :root { --nav-h: 66px; }
  .nav__inner { grid-template-columns: 40px 1fr auto; }
  .nav__burger { display: grid; }
  .nav .wordmark { justify-self: center; }
  .nav .wordmark__sub { display: none; }
  .nav__menu {
    position: fixed; left: 0; right: 0; top: var(--menu-top, 100px);
    background: var(--ground); border-bottom: 1px solid var(--hair);
    padding: 12px var(--gutter) 28px; box-shadow: var(--shadow-sm);
    display: none;
  }
  .nav__menu.is-open { display: block; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__links li + li { border-top: 1px solid var(--hair-soft); }
  .nav__links a { display: block; padding: 16px 0; font-size: 0.86rem; }
  .nav__links a::after { display: none; }
}

/* ==========================================================================
   BUTTONS · CHIPS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: var(--t-sm); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; text-align: center;
  padding: 16px 30px; min-height: 52px;
  border: 1px solid var(--rose); border-radius: 0;
  background: transparent; color: var(--rose); cursor: pointer;
  transition: background-color 0.26s ease, color 0.26s ease, border-color 0.26s ease;
}
.btn:hover { background: var(--rose); color: var(--ground); }
.btn--solid { background: var(--rose); color: var(--ground); }
.btn--solid:hover { background: var(--rose-deep); border-color: var(--rose-deep); }
.btn--ghost { border-color: var(--hair); color: var(--ink-soft); }
.btn--ghost:hover { background: transparent; border-color: var(--rose); color: var(--rose); }
.btn--wide { width: 100%; }
.btn--sm { padding: 10px 18px; min-height: 40px; font-size: 0.74rem; }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; min-height: 40px;
  border: 1px solid var(--hair); border-radius: 999px;
  background: var(--surface); color: var(--ink-soft);
  font-size: var(--t-sm); font-weight: 500; letter-spacing: 0.02em;
  cursor: pointer; line-height: 1.2;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.chip:hover { border-color: var(--rose-line); color: var(--ink); }
.chip[aria-pressed="true"], .chip[aria-checked="true"] {
  border-color: var(--rose); background: var(--rose-wash); color: var(--rose-deep);
}
.chip i {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  background: var(--sw, var(--hair)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

/* sizes: squarer, tighter */
.sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.size {
  min-width: 52px; height: 48px; padding-inline: 14px;
  border: 1px solid var(--hair); background: var(--surface); color: var(--ink);
  font-size: var(--t-sm); font-weight: 500; letter-spacing: 0.06em; cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.size:hover { border-color: var(--rose); }
.size[aria-checked="true"] { background: var(--rose); border-color: var(--rose); color: var(--ground); }
.size--wide { padding-inline: 18px; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em;
  padding: 4px 11px; border-radius: 999px;
  background: var(--rose-wash); color: var(--rose-deep);
}
.tag--sage { background: var(--sage-wash); color: var(--sage); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { border-bottom: 1px solid var(--hair-soft); overflow: hidden; }
.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  padding-block: clamp(36px, 6vw, 84px);
}
.hero__copy { display: flex; flex-direction: column; gap: 24px; }
.hero__mark { display: flex; flex-direction: column; gap: 2px; }
.hero__mark .z {
  font-family: "Cinzel", Georgia, serif; font-weight: 600;
  font-size: clamp(2.6rem, 6.4vw, 4.4rem);
  letter-spacing: 0.15em; line-height: 1.04; color: var(--rose);
}
.hero__mark .c {
  font-family: "Parisienne", cursive;
  font-size: clamp(2.3rem, 5.2vw, 3.7rem); line-height: 1; color: var(--rose);
  margin-top: 4px; margin-left: 0.06em;
}
.hero__mark .sub {
  font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: 12px;
}
.hero__thesis {
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600;
  font-size: clamp(1.55rem, 2.8vw, 2.25rem); line-height: 1.25;
  margin: 0; max-width: 22ch; text-wrap: balance;
}
.hero__thesis em { color: var(--rose); }
.hero__note { margin: 0; color: var(--ink-soft); max-width: 44ch; font-size: var(--t-md); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__trust {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 6px 0 0; padding: 0; list-style: none;
  font-size: var(--t-sm); color: var(--ink-soft);
}
.hero__trust li { display: inline-flex; align-items: center; gap: 8px; }
.hero__trust svg { width: 16px; height: 16px; color: var(--gold); }

.hero__art { position: relative; padding: 0 0 clamp(40px, 6vw, 70px) clamp(40px, 7vw, 96px); }
.hero__main {
  position: relative; margin: 0;
  border: 1px solid var(--gold-line); padding: 10px; background: var(--surface-warm);
}
.hero__main img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 62%; }
.hero__inset {
  position: absolute; left: 0; bottom: 0; width: 38%; margin: 0;
  border: 1px solid var(--gold-line); padding: 7px; background: var(--ground);
  box-shadow: var(--shadow);
}
.hero__inset img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.hero__tag {
  position: absolute; right: 26px; top: 26px;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 14px 12px 18px;
  background: var(--ground); color: var(--ink); text-decoration: none;
  box-shadow: var(--shadow-sm); border: 1px solid var(--hair-soft);
  transition: transform 0.3s ease;
}
.hero__tag:hover { transform: translateY(-2px); }
.hero__tag b { display: block; font-family: "Cinzel", serif; font-weight: 600; letter-spacing: 0.08em; font-size: 0.98rem; }
.hero__tag small { display: block; color: var(--ink-soft); font-size: 0.8rem; }
.hero__tag .go {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--rose); color: var(--ground);
}
.hero__tag .go svg { width: 15px; height: 15px; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { order: -1; padding: 0; }
  .hero__inset { display: none; }
  .hero__main img { aspect-ratio: 4 / 4.4; }
}
@media (max-width: 600px) {
  /* the header already carries the wordmark; on a phone, get to the point */
  .hero__mark { display: none; }
  .hero__copy { gap: 18px; }
  .hero__tag { right: 18px; top: 18px; }
}

/* ==========================================================================
   PRODUCT CARDS
   ========================================================================== */
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 48px) clamp(14px, 2vw, 28px);
}
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1080px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grid, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.card { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: inherit; }
.card__media {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ground-2);
}
.card__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity 0.6s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.card__media .alt { opacity: 0; }
@media (hover: hover) {
  .card:hover .card__media img { transform: scale(1.035); }
  .card:hover .card__media .alt { opacity: 1; }
}
.card__flag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--ground); color: var(--rose);
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 6px 10px;
}
.card__cta {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
  background: var(--ground); color: var(--ink);
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  text-align: center; padding: 11px;
  opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.3s ease;
}
@media (hover: hover) { .card:hover .card__cta { opacity: 1; transform: none; } }
.card__meta { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; }
.card__name { font-family: "Cinzel", serif; font-weight: 600; font-size: 1.04rem; letter-spacing: 0.08em; margin: 0; }
.card__price { font-size: 1rem; }
.card__kind {
  grid-column: 1 / -1; font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600;
  font-size: 1.06rem; color: var(--ink-soft); line-height: 1.3;
}
@media (max-width: 520px) {
  .card__meta { grid-template-columns: 1fr; }
  .card__name { font-size: 0.94rem; }
  .card__kind { font-size: 0.98rem; }
}

/* home: Tehzeeb as a spread */
.spread {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 5vw, 72px); align-items: center;
  margin-bottom: clamp(48px, 7vw, 88px);
}
.spread__media { position: relative; display: block; border: 1px solid var(--gold-line); padding: 10px; background: var(--surface-warm); }
.spread__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.spread__body { display: flex; flex-direction: column; gap: 18px; max-width: 48ch; }
.spread__name { margin: 0; font-size: clamp(2rem, 4.4vw, 3.3rem); color: var(--rose); letter-spacing: 0.1em; }
.spread__kind { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; font-size: 1.4rem; color: var(--ink-soft); margin: -8px 0 0; }
.spread__blurb { margin: 0; color: var(--ink-soft); font-size: var(--t-md); }
.spread__price { font-size: 1.5rem; }
.spread__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 820px) { .spread { grid-template-columns: 1fr; } }

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee { overflow: hidden; border-block: 1px solid var(--hair-soft); background: var(--surface-warm); padding-block: 22px; }
.marquee__track { display: flex; width: max-content; }
.marquee__group { display: flex; align-items: center; flex: none; }
.marquee__word {
  font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 2.2rem); color: var(--rose); padding-inline: 26px; white-space: nowrap;
  display: inline-block;
}
.marquee__dot { width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); flex: none; }

/* ==========================================================================
   TWO WAYS TO ORDER
   ========================================================================== */
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 36px); }
.way {
  display: grid; grid-template-columns: 0.8fr 1fr; background: var(--surface);
  border: 1px solid var(--hair-soft); text-decoration: none; color: inherit;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.way:hover { border-color: var(--rose-line); box-shadow: var(--shadow-sm); }
.way__img { position: relative; overflow: hidden; min-height: 100%; }
.way__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.way__body { padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; gap: 14px; }
.way__body h3 { margin: 0; font-size: 1.35rem; }
.way__body p { margin: 0; color: var(--ink-soft); }
.way__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: var(--t-sm); color: var(--ink-soft); }
.way__list li { display: flex; gap: 10px; }
.way__list svg { width: 16px; height: 16px; color: var(--sage); flex: none; margin-top: 3px; }
.way .link-arrow { margin-top: auto; align-self: flex-start; }
@media (max-width: 1000px) { .ways { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .way { grid-template-columns: 1fr; }
  .way__img { aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   HAND-WORK
   ========================================================================== */
.craft { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2.2vw, 28px); }
.craft__card { background: var(--surface); border: 1px solid var(--hair-soft); display: flex; flex-direction: column; }
.craft__card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.craft__card .body { padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 6px; }
.craft__card .native { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; font-size: 1.35rem; color: var(--rose); }
.craft__card h3 { margin: 0; font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }
.craft__card p { margin: 6px 0 0; font-size: 0.95rem; color: var(--ink-soft); }
@media (max-width: 1000px) { .craft { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .craft__card .body { padding: 14px 14px 18px; } .craft__card p { font-size: 0.88rem; } }

/* ==========================================================================
   STEPS
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; border-top: 1px solid var(--gold); padding-top: 22px; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block; font-family: "Cinzel", serif; font-weight: 600; font-size: 1.6rem; color: var(--gold); margin-bottom: 10px;
}
.steps h3 { margin: 0 0 6px; font-size: 1.05rem; font-family: "Cinzel", serif; font-weight: 600; letter-spacing: 0.06em; }
.steps p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }

/* ==========================================================================
   INSTAGRAM BAND
   ========================================================================== */
.band {
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
  padding: clamp(28px, 4vw, 48px); border: 1px solid var(--gold-line); background: var(--surface-warm);
}
.band h2 { margin: 0 0 6px; font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
.band p { margin: 0; color: var(--ink-soft); }
.band__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 760px) { .band { grid-template-columns: 1fr; } }

/* ==========================================================================
   SHOP PAGE
   ========================================================================== */
.page-head { padding-block: clamp(40px, 6vw, 72px) clamp(24px, 3vw, 36px); }
.page-head h1 { margin: 10px 0 12px; font-size: clamp(1.9rem, 4.2vw, 3rem); }
.page-head p { margin: 0; color: var(--ink-soft); font-size: var(--t-md); max-width: 60ch; }
.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  padding-block: 16px; margin-bottom: clamp(24px, 3vw, 40px);
  border-block: 1px solid var(--hair-soft);
}
.toolbar__right { display: flex; align-items: center; gap: 14px; color: var(--ink-faint); font-size: var(--t-sm); }
.select {
  appearance: none; -webkit-appearance: none;
  padding: 10px 38px 10px 14px; min-height: 40px;
  border: 1px solid var(--hair); background: var(--surface); border-radius: 0; cursor: pointer;
  font-size: var(--t-sm);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23857a73' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}
.empty { padding: 60px 0; text-align: center; color: var(--ink-soft); }

/* ==========================================================================
   PIECE PAGE
   ========================================================================== */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 22px; font-size: var(--t-sm); color: var(--ink-faint); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--rose); }
.crumbs span[aria-hidden] { opacity: 0.6; }

.piece { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(24px, 4.5vw, 72px); padding-block: 22px clamp(56px, 8vw, 96px); align-items: start; }
@media (max-width: 900px) { .piece { grid-template-columns: 1fr; } }

.gallery { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: start; }
/* height 0 + min-height 100%: the thumbnails never make the row taller than
   the photograph, and scroll inside it when there are many */
.gallery__thumbs {
  display: flex; flex-direction: column; gap: 10px;
  height: 0; min-height: 100%; overflow-y: auto; scrollbar-width: none;
}
.gallery__thumbs::-webkit-scrollbar { display: none; }
.gallery__thumbs button { flex: none; }
.gallery__thumbs button {
  padding: 0; border: 1px solid transparent; background: none; cursor: pointer; opacity: 0.62;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.gallery__thumbs button:hover { opacity: 1; }
.gallery__thumbs button[aria-current="true"] { opacity: 1; border-color: var(--rose); }
.gallery__thumbs img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.gallery__stage { position: relative; min-width: 0; }
.gallery__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  background: var(--ground-2); overscroll-behavior-x: contain;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track figure { flex: 0 0 100%; margin: 0; scroll-snap-align: start; aspect-ratio: 4 / 5; }
.gallery__track img { width: 100%; height: 100%; object-fit: cover; }
.gallery__arrow {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: var(--ground); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-sm);
  opacity: 0; transition: opacity 0.25s ease;
}
.gallery__arrow svg { width: 18px; height: 18px; }
.gallery__arrow--prev { left: 14px; }
.gallery__arrow--next { right: 14px; }
.gallery__stage:hover .gallery__arrow, .gallery__arrow:focus-visible { opacity: 1; }
.gallery__count {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  background: var(--ground); font-size: 0.74rem; letter-spacing: 0.14em; padding: 5px 10px;
  font-variant-numeric: tabular-nums;
}
.gallery__flag { position: absolute; top: 14px; left: 14px; z-index: 2; }
/* a video in the gallery (a reel): shown whole, with the page colour either
   side, so a tall 9:16 clip is never cropped at the head or the hem */
.gallery__video { position: relative; }
.gallery__video video, .gallery__video iframe, .gallery__video img {
  width: 100%; height: 100%; object-fit: contain; display: block; border: 0;
}
.gallery__video video { cursor: pointer; }
.gallery__sound {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--ground); color: var(--ink); box-shadow: var(--shadow-sm);
}
.gallery__sound svg { width: 19px; height: 19px; }
.gallery__sound .i-on, .gallery__sound[aria-pressed="true"] .i-off { display: none; }
.gallery__sound[aria-pressed="true"] .i-on { display: block; }
.gallery__thumbs button { position: relative; }
.gallery__play {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
}
.gallery__play svg {
  width: 26px; height: 26px; padding: 6px; border-radius: 50%;
  background: rgba(251, 248, 243, 0.9); color: var(--rose);
}
@media (max-width: 900px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery__thumbs { order: 2; flex-direction: row; overflow-x: auto; height: auto; min-height: 0; }
  .gallery__thumbs button { flex: 0 0 62px; }
  .gallery__arrow { display: none; }
  .piece__info { position: static !important; }
}

.piece__info { position: sticky; top: calc(var(--nav-h) + 24px); display: flex; flex-direction: column; gap: 22px; }
.piece__head { display: flex; flex-direction: column; gap: 6px; }
.piece__name { margin: 0; font-size: clamp(2rem, 4vw, 2.9rem); color: var(--rose); letter-spacing: 0.1em; }
.piece__kind { margin: 0; font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; font-size: 1.35rem; color: var(--ink-soft); }
.piece__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.piece__price .price { font-size: 1.65rem; }
.piece__price small { color: var(--ink-faint); font-size: var(--t-sm); }
.piece__blurb { margin: 0; color: var(--ink-soft); font-size: 1.04rem; }
.piece__set { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: var(--t-sm); color: var(--ink-soft); margin: 0; padding: 0; list-style: none; }
.piece__set li { display: inline-flex; align-items: center; gap: 8px; }
.piece__set li + li::before { content: ""; width: 4px; height: 4px; background: var(--gold); transform: rotate(45deg); }

.field-row { display: flex; flex-direction: column; gap: 10px; }
.field-row__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.field-row__head .label { color: var(--ink); letter-spacing: 0.2em; }
.textbtn {
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--rose);
  font-size: var(--t-sm); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rose-line);
}
.textbtn:hover { text-decoration-color: var(--rose); }
.hint { font-size: var(--t-sm); color: var(--ink-faint); margin: 0; }
.err { font-size: var(--t-sm); color: var(--warn); margin: 0; min-height: 0; }

.piece__actions { display: grid; gap: 10px; }
.piece__assure {
  display: grid; gap: 10px; margin: 0; padding: 18px 0 0; list-style: none;
  border-top: 1px solid var(--hair-soft); font-size: var(--t-sm); color: var(--ink-soft);
}
.piece__assure li { display: flex; gap: 12px; align-items: flex-start; }
.piece__assure svg { width: 18px; height: 18px; color: var(--gold); flex: none; margin-top: 2px; }

.acc { border-top: 1px solid var(--hair-soft); }
.acc details { border-bottom: 1px solid var(--hair-soft); }
.acc summary {
  list-style: none; cursor: pointer; padding: 18px 0;
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--t-sm); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-size: 1.3rem; font-weight: 400; color: var(--rose); transition: transform 0.25s ease; }
.acc details[open] summary::after { transform: rotate(45deg); }
.acc .acc__body { padding: 0 0 20px; color: var(--ink-soft); font-size: 0.97rem; }
.acc .acc__body p { margin: 0 0 10px; }
.acc dl { display: grid; grid-template-columns: 110px 1fr; gap: 10px 16px; margin: 0; }
.acc dt { font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); padding-top: 3px; }
.acc dd { margin: 0; }

.detail-band { margin: 0 0 clamp(56px, 8vw, 96px); }
.detail-band img { width: 100%; max-height: 360px; object-fit: cover; border: 1px solid var(--gold-line); padding: 8px; background: var(--surface-warm); }
.detail-band figcaption { margin-top: 12px; font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; font-size: 1.1rem; color: var(--ink-soft); }

/* ==========================================================================
   FORMS
   ========================================================================== */
.form { display: grid; gap: 18px; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: end; }
.form__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form__grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 600px) {
  .form__grid { grid-template-columns: 1fr; }
  .form__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > label, .field > .field__label {
  font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft);
}
.field label .opt { text-transform: none; letter-spacing: 0; color: var(--ink-faint); font-weight: 400; }
.input, .field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; min-height: 50px;
  border: 1px solid var(--hair); border-radius: 0; background: var(--surface); color: var(--ink);
  font-size: 1rem; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px var(--rose-wash);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); opacity: 0.8; }
.field.is-bad input, .field.is-bad select, .field.is-bad textarea { border-color: var(--warn); }
.field__note { font-size: 0.84rem; color: var(--ink-faint); }
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23857a73' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 0.97rem; color: var(--ink-soft); cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--rose); flex: none; }

.block { background: var(--surface); border: 1px solid var(--hair-soft); padding: clamp(20px, 3vw, 32px); }
.block + .block { margin-top: 18px; }
.block__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.block__num { font-family: "Cinzel", serif; font-weight: 600; color: var(--gold); font-size: 1.1rem; }
.block__head h2 { margin: 0; font-family: "Cinzel", serif; font-weight: 600; font-size: 1.12rem; letter-spacing: 0.08em; }
.block__head p { margin: 0; }
.block__sub { margin: -8px 0 18px; color: var(--ink-soft); font-size: 0.95rem; }

/* ==========================================================================
   CHECKOUT
   ========================================================================== */
.checkout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(20px, 3.5vw, 48px); align-items: start; padding-bottom: clamp(56px, 8vw, 96px); }
@media (max-width: 960px) { .checkout { grid-template-columns: 1fr; } .checkout .summary { position: static; } }

.summary {
  position: sticky; top: calc(var(--nav-h) + 20px);
  background: var(--surface-warm); border: 1px solid var(--gold-line); padding: clamp(20px, 3vw, 30px);
  display: flex; flex-direction: column; gap: 18px;
}
.summary h2 { margin: 0; font-family: "Cinzel", serif; font-weight: 600; font-size: 1.1rem; letter-spacing: 0.08em; }
.lines { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.line { display: grid; grid-template-columns: 58px 1fr auto; gap: 14px; align-items: center; }
.line img { width: 58px; aspect-ratio: 4 / 5; object-fit: cover; }
.line__name { font-family: "Cinzel", serif; font-weight: 600; font-size: 0.92rem; letter-spacing: 0.06em; }
.line__meta { font-size: 0.84rem; color: var(--ink-soft); }
.totals { display: grid; gap: 8px; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--hair); }
.totals div { display: flex; justify-content: space-between; gap: 12px; font-size: 0.97rem; }
.totals dt { color: var(--ink-soft); }
.totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.totals .grand { padding-top: 10px; border-top: 1px solid var(--hair-soft); font-size: 1.1rem; font-weight: 500; }
.totals .grand dt { color: var(--ink); }
.totals .advance { color: var(--rose-deep); font-weight: 500; }
.totals .advance dt { color: var(--rose-deep); }
.summary__note { margin: 0; font-size: 0.86rem; color: var(--ink-faint); }

.bag-empty { text-align: center; padding: clamp(48px, 8vw, 96px) 0; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.bag-empty p { margin: 0; color: var(--ink-soft); }

.done { max-width: 720px; margin-inline: auto; padding-bottom: clamp(56px, 8vw, 96px); display: flex; flex-direction: column; gap: 22px; text-align: center; align-items: center; }
.done__seal {
  width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--gold); color: var(--gold);
}
.done__seal svg { width: 30px; height: 30px; }
.done h1 { margin: 0; font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
.done__no { font-size: 1rem; letter-spacing: 0.2em; color: var(--rose); font-weight: 500; }
.done p { margin: 0; color: var(--ink-soft); max-width: 52ch; }
.done__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.pay { width: 100%; text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
.pay__qr { background: #fff; padding: 10px; border: 1px solid var(--hair); width: 184px; height: 184px; }
.pay__qr img, .pay__qr canvas { width: 164px !important; height: 164px !important; }
@media (max-width: 560px) { .pay { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

/* ==========================================================================
   CUSTOMISE
   ========================================================================== */
.studio { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: clamp(20px, 3.5vw, 48px); align-items: start; padding-bottom: clamp(56px, 8vw, 96px); }
@media (max-width: 960px) { .studio { grid-template-columns: 1fr; } .studio .summary { position: static; } }

.bases { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.base {
  position: relative; display: flex; flex-direction: column; gap: 8px; text-align: left;
  padding: 0 0 10px; border: 1px solid var(--hair-soft); background: var(--surface); cursor: pointer;
  transition: border-color 0.2s ease;
}
.base:hover { border-color: var(--rose-line); }
.base[aria-checked="true"] { border-color: var(--rose); box-shadow: 0 0 0 1px var(--rose); }
.base img, .base .base__blank { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.base__blank { display: grid; place-items: center; background: var(--rose-wash); color: var(--rose); }
.base__blank svg { width: 44px; height: 44px; }
.base b { padding-inline: 10px; font-family: "Cinzel", serif; font-weight: 600; font-size: 0.84rem; letter-spacing: 0.06em; line-height: 1.2; }
.base small { padding-inline: 10px; font-size: 0.76rem; color: var(--ink-faint); line-height: 1.3; margin-top: -4px; }
.base__tick {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--rose); color: var(--ground); display: none; place-items: center;
}
.base__tick svg { width: 14px; height: 14px; }
.base[aria-checked="true"] .base__tick { display: grid; }
.bases__label { margin: 22px 0 10px; font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }

.opts { display: grid; gap: 0; }
.opt { padding: 18px 0; border-top: 1px solid var(--hair-soft); display: grid; grid-template-columns: 170px 1fr; gap: 12px 20px; }
.opt:first-child { border-top: 0; padding-top: 0; }
.opt__title { display: flex; flex-direction: column; gap: 2px; }
.opt__title b { font-weight: 500; font-size: 0.98rem; }
.opt__title small { font-size: 0.8rem; color: var(--ink-faint); }
.opt__title small.is-changed { color: var(--rose); }
.opt .field { margin-top: 10px; }
@media (max-width: 700px) { .opt { grid-template-columns: 1fr; } }

.request { display: grid; gap: 14px; }
.request__base { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; }
.request__base img, .request__base .base__blank { width: 64px; aspect-ratio: 4 / 5; object-fit: cover; }
.request__base .base__blank svg { width: 28px; height: 28px; }
.request__base b { display: block; font-family: "Cinzel", serif; font-weight: 600; letter-spacing: 0.06em; }
.request__base span { font-size: 0.86rem; color: var(--ink-soft); }
.request ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 0.93rem; }
.request li { display: grid; grid-template-columns: 96px 1fr; gap: 10px; }
.request li span:first-child { color: var(--ink-faint); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; padding-top: 2px; }
.request__none { color: var(--ink-faint); font-size: 0.93rem; margin: 0; font-style: italic; }

/* ==========================================================================
   DRAWER · MODAL · TOAST
   ========================================================================== */
.scrim {
  position: fixed; inset: 0; z-index: 80; background: var(--overlay);
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.scrim.is-on { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 85;
  width: min(440px, 100vw); background: var(--ground);
  display: flex; flex-direction: column;
  transform: translateX(102%); transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: var(--shadow);
  visibility: hidden;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.drawer.is-open { transform: none; visibility: visible; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--hair-soft); }
.drawer__head h2 { margin: 0; font-family: "Cinzel", serif; font-weight: 600; font-size: 1.1rem; letter-spacing: 0.1em; }
.drawer__body { flex: 1; overflow-y: auto; padding: 8px 24px; overscroll-behavior: contain; }
.drawer__foot { padding: 20px 24px 24px; border-top: 1px solid var(--hair-soft); display: grid; gap: 12px; background: var(--surface-warm); }
.drawer__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.05rem; }
.drawer__total .price { font-size: 1.25rem; }

.item { display: grid; grid-template-columns: 84px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--hair-soft); }
.item img { width: 84px; aspect-ratio: 4 / 5; object-fit: cover; }
.item__top { display: flex; justify-content: space-between; gap: 10px; }
.item__name { font-family: "Cinzel", serif; font-weight: 600; font-size: 0.96rem; letter-spacing: 0.06em; text-decoration: none; }
.item__meta { font-size: 0.86rem; color: var(--ink-soft); margin-top: 2px; }
.item__row { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; gap: 10px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--hair); }
.qty button { width: 34px; height: 34px; border: 0; background: none; cursor: pointer; color: var(--ink-soft); font-size: 1.1rem; }
.qty button:hover { color: var(--rose); }
.qty span { min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; font-size: 0.94rem; }
.remove { background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink-faint); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; }
.remove:hover { color: var(--warn); }

.modal { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; background: var(--overlay); }
.modal__panel {
  position: relative; width: min(640px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--ground); border: 1px solid var(--gold-line); padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--shadow);
}
.modal__close { position: absolute; top: 14px; right: 14px; }
.modal h2 { margin: 0 0 6px; font-size: 1.4rem; }
.modal__lede { margin: 0 0 22px; color: var(--ink-soft); }

.chart { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-bottom: 26px; }
.chart th, .chart td { padding: 11px 8px; text-align: center; border-bottom: 1px solid var(--hair-soft); font-size: 0.95rem; }
.chart thead th { font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); border-bottom-color: var(--gold-line); }
.chart tbody th { font-family: "Cinzel", serif; font-weight: 600; color: var(--rose); }
.howto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 0; padding: 0; list-style: none; }
.howto li { font-size: 0.93rem; color: var(--ink-soft); }
.howto b { display: block; color: var(--ink); font-weight: 500; }
@media (max-width: 560px) { .howto { grid-template-columns: 1fr; } .chart th, .chart td { padding: 9px 4px; font-size: 0.86rem; } }

.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 99;
  translate: -50% 0; transform: translateY(20px);
  background: var(--ink); color: var(--ground);
  padding: 13px 22px; font-size: var(--t-sm); letter-spacing: 0.04em;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: var(--shadow-sm); max-width: calc(100vw - 32px); text-align: center;
}
.toast.is-on { opacity: 1; transform: none; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot { border-top: 1px solid var(--hair-soft); background: var(--surface-warm); padding-block: clamp(48px, 7vw, 80px) 28px; }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; }
.foot .wordmark { align-items: flex-start; }
.foot__blurb { margin: 16px 0 0; color: var(--ink-soft); font-size: 0.95rem; max-width: 34ch; }
.foot h4 { margin: 0 0 14px; font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot a { text-decoration: none; color: var(--ink-soft); font-size: 0.95rem; display: inline-flex; align-items: center; gap: 10px; }
.foot a:hover { color: var(--rose); }
.foot a svg { width: 16px; height: 16px; flex: none; }
.foot__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  margin-top: clamp(36px, 5vw, 60px); padding-top: 22px; border-top: 1px solid var(--hair-soft);
  font-size: 0.82rem; color: var(--ink-faint);
}
@media (max-width: 900px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   MEASUREMENT FORM - after the house form: wine header bars, label | value rows
   ========================================================================== */
.mform { display: flex; flex-direction: column; }
.mform + .mform { margin-top: 22px; }
.mform__bar {
  background: var(--wine); color: var(--on-wine);
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 10px 14px; margin-top: 22px;
}
.mform__bar:first-child { margin-top: 0; }
.mform__bar small { text-transform: none; letter-spacing: 0.02em; opacity: 0.82; font-size: 0.8rem; }
.mgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--hair); border-top: 0; background: var(--surface); }
.mrow {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) 104px; align-items: center; gap: 10px;
  padding: 5px 8px 5px 12px; min-height: 52px; cursor: text;
  border-bottom: 1px solid var(--hair-soft);
}
.mgrid .mrow:nth-child(odd) { border-right: 1px solid var(--hair-soft); }
.mgrid .mrow:nth-last-child(-n+2) { border-bottom: 0; }
.mrow__num {
  width: 22px; height: 22px; border-radius: 50%; background: var(--wine); color: var(--on-wine);
  font-size: 0.7rem; font-weight: 600; display: grid; place-items: center; flex: none;
}
.mrow__num--blank { background: transparent; }
.mrow__label { font-size: 0.93rem; line-height: 1.3; }
.req { color: var(--warn); font-weight: 500; }
.mrow__input { display: flex; align-items: center; gap: 6px; border-left: 1px solid var(--hair-soft); padding-left: 10px; height: 100%; }
.mrow__input input {
  width: 100%; min-width: 0; border: 0; background: transparent; padding: 8px 4px; min-height: 40px;
  font-size: 1rem; text-align: right; font-variant-numeric: tabular-nums; border-radius: 0;
}
.mrow__input input:focus { outline: none; background: var(--rose-wash); }
.mrow__input em { font-style: normal; font-size: 0.78rem; color: var(--ink-faint); }
.mrow.is-bad { background: color-mix(in srgb, var(--warn) 9%, transparent); }
.mrow.is-bad .mrow__input { box-shadow: inset 0 -2px 0 var(--warn); }
.mrow--text { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); }
.mrow--text .mrow__input input { text-align: left; }
@media (max-width: 640px) {
  .mgrid { grid-template-columns: 1fr; }
  .mgrid .mrow:nth-child(odd) { border-right: 0; }
  .mgrid .mrow:nth-last-child(2) { border-bottom: 1px solid var(--hair-soft); }
  .mgrid .mrow { order: var(--n, 0); }   /* read 1 → 10 in one column */
  .mrow { grid-template-columns: 22px minmax(0, 1fr) 96px; }
  .mrow--text { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); }
}

.mstyles { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 16px 14px; border: 1px solid var(--hair); border-top: 0; background: var(--surface); }
.mstyle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.95rem; }
.mstyle input { width: 18px; height: 18px; margin: 0; accent-color: var(--wine); }
.mstyle small { color: var(--ink-faint); }
.mstyles__other { flex: 1 1 220px; border: 0; border-bottom: 1px solid var(--hair); background: transparent; padding: 6px 2px; font-size: 1rem; }
.mstyles__other:focus { outline: none; border-color: var(--rose); }

.mform__note {
  margin-top: 18px; padding: 16px 20px; background: var(--rose-wash);
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
}
.mform__note b { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rose-deep); }
.mform__note ul { margin: 6px 0 0; padding-left: 18px; font-size: 0.9rem; color: var(--ink-soft); }
.mform__thanks { text-align: center; padding-inline: 12px; }
.mform__thanks span { display: block; font-family: "Parisienne", cursive; font-size: 2rem; line-height: 1; color: var(--rose); }
.mform__thanks small { font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-faint); }
@media (max-width: 520px) { .mform__note { grid-template-columns: 1fr; } .mform__thanks { text-align: left; padding: 0; } }

/* the guide */
.guide { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.mguide .guide__fig { position: sticky; top: calc(var(--nav-h) + 20px); }
.guide__fig { margin: 0; background: var(--surface-warm); border: 1px solid var(--hair-soft); padding: 18px 12px 10px; }
.guide__fig svg { width: 100%; height: auto; display: block; overflow: visible; }
.guide svg .garment { fill: var(--surface); stroke: var(--ink-soft); stroke-width: 1.2; stroke-linejoin: round; }
.guide svg .ml { fill: none; stroke: var(--rose); stroke-width: 1.2; stroke-dasharray: 3 3; }
.guide svg .tick { fill: none; stroke: var(--rose); stroke-width: 1.2; }
.guide svg .mk circle { fill: var(--wine); }
.guide svg .mk text { fill: var(--on-wine); font: 600 9px "Jost", sans-serif; text-anchor: middle; }
.guide svg .cap { fill: var(--ink-faint); font: 500 9px "Jost", sans-serif; letter-spacing: 0.2em; text-anchor: middle; text-transform: uppercase; }
.guide__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.guide__list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.5; }
.guide__list b, .guide__plain b { display: block; color: var(--ink); font-weight: 500; }
.guide__h { margin: 0 0 12px; font-family: "Cinzel", serif; font-weight: 600; font-size: 1rem; letter-spacing: 0.08em; }
.guide__more { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; margin-top: 28px; align-items: start; }
.guide__plain { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; font-size: 0.92rem; color: var(--ink-soft); }
.guide__note { background: var(--rose-wash); padding: 14px 16px; font-size: 0.9rem; color: var(--ink-soft); }
.guide__note b { display: block; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rose-deep); margin-bottom: 4px; }
.bstyles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bstyle { text-align: center; background: var(--surface-warm); border: 1px solid var(--hair-soft); padding: 14px 6px 10px; font-size: 0.84rem; color: var(--ink-soft); }
.bstyle svg { width: 60px; height: 78px; margin: 0 auto 8px; display: block; overflow: visible; }
.bstyle svg path { fill: var(--surface); stroke: var(--ink-soft); stroke-width: 1.2; stroke-linejoin: round; }
.bstyle svg .pl { fill: none; }
@media (max-width: 760px) { .guide, .guide__more { grid-template-columns: 1fr; } }

.modal__panel--wide { width: min(980px, 100%); }

.mpage { display: grid; gap: 0; }
.mpage__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 22px; }
.mguide { margin-top: 18px; }

.fallback { border: 1px solid var(--warn); background: color-mix(in srgb, var(--warn) 7%, var(--surface)); padding: 16px; display: grid; gap: 8px; font-size: 0.93rem; }
.fallback b { color: var(--warn); }
.fallback p { margin: 0; color: var(--ink-soft); }
.fallback__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.done__wa { width: 100%; display: grid; gap: 12px; justify-items: center; text-align: center; }
.done__wa p { margin: 0; }

@media print {
  .announce, .nav, .foot, .progress, .no-print, .toast, .drawer, .scrim, .page-head p { display: none !important; }
  body { background: #fff; color: #000; font-size: 12px; }
  .block { border: 0; padding: 0; background: none; }
  .mform__bar, .mrow__num, .mform__note, .guide svg { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mguide { break-before: page; }
}

/* ==========================================================================
   CUSTOMISE - how to start, and the hand-work note
   ========================================================================== */
.modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mode {
  display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; gap: 4px 14px; align-items: start;
  text-align: left; padding: 18px; cursor: pointer;
  border: 1px solid var(--hair); background: var(--surface); color: var(--ink);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.mode:hover { border-color: var(--rose-line); }
.mode[aria-checked="true"] { border-color: var(--rose); background: var(--rose-wash); box-shadow: 0 0 0 1px var(--rose); }
.mode__icon {
  grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--rose-wash); color: var(--rose);
}
.mode[aria-checked="true"] .mode__icon { background: var(--rose); color: var(--ground); }
.mode__icon svg { width: 22px; height: 22px; }
.mode b { font-family: "Cinzel", serif; font-weight: 600; font-size: 1rem; letter-spacing: 0.06em; }
.mode small { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.45; }
@media (max-width: 640px) { .modes { grid-template-columns: 1fr; } }
#picker { margin-top: 6px; }

.handnote {
  display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start;
  padding: 16px 18px; background: var(--rose-wash); border-left: 3px solid var(--gold);
}
.handnote svg { width: 24px; height: 24px; color: var(--gold); margin-top: 2px; }
.handnote p { margin: 0; font-size: 0.97rem; color: var(--ink-soft); }
.handnote b { color: var(--ink); font-weight: 500; }
.handnote strong { color: var(--rose-deep); font-weight: 500; }
.request__design { margin: 0; font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; font-size: 1.08rem; color: var(--ink-soft); line-height: 1.4; }

/* ==========================================================================
   FIT - what a piece is cut to (product page, checkout, size guide)
   ========================================================================== */
.fit { display: grid; gap: 14px; margin-top: 4px; }
.fit__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.fit__head b { font-family: "Cinzel", serif; font-weight: 600; letter-spacing: 0.06em; font-size: 1rem; }
.fit__head span { font-size: 0.84rem; color: var(--ink-faint); }
.fit__intro { margin: 0; font-size: 0.93rem; color: var(--ink-soft); }
.fit__label { display: block; margin-bottom: 8px; font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.fit__style .mstyles { border: 1px solid var(--hair); }
.fit .mform__note { margin-top: 12px; }

.fit__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0;
  border: 1px solid var(--hair); background: var(--surface);
}
.fit__grid > div {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; min-height: 42px; border-bottom: 1px solid var(--hair-soft);
}
.fit__grid > div:nth-child(odd) { border-right: 1px solid var(--hair-soft); }
.fit__grid > div:nth-last-child(-n+2) { border-bottom: 0; }
.fit__grid dt { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--ink-soft); line-height: 1.25; min-width: 0; }
.fit__grid dt .mrow__num { width: 19px; height: 19px; font-size: 0.62rem; flex: none; }
.fit__grid dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; text-align: right; }
.fit__grid dd small { display: block; font-weight: 400; font-size: 0.7rem; color: var(--ink-faint); letter-spacing: 0.04em; }
.fit__grid .is-std dd { color: var(--ink-soft); }
@media (max-width: 420px) {
  .fit__grid { grid-template-columns: 1fr; }
  .fit__grid > div:nth-child(odd) { border-right: 0; }
  .fit__grid > div:nth-last-child(2) { border-bottom: 1px solid var(--hair-soft); }
}

/* the measurement form inside the narrow product column: one column, 1 → 10 */
.fit .mgrid { grid-template-columns: 1fr; }
.fit .mgrid .mrow:nth-child(odd) { border-right: 0; }
.fit .mgrid .mrow:nth-last-child(2) { border-bottom: 1px solid var(--hair-soft); }
.fit .mgrid .mrow { order: var(--n, 0); }

/* checkout: one row per piece */
.fits { display: grid; gap: 10px; }
.fitrow { border: 1px solid var(--hair-soft); background: var(--surface-warm); }
.fitrow summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 14px 16px; flex-wrap: wrap;
}
.fitrow summary::-webkit-details-marker { display: none; }
.fitrow summary::after { content: "+"; color: var(--rose); font-size: 1.2rem; line-height: 1; margin-left: auto; }
.fitrow[open] summary::after { content: "−"; }
.fitrow__name { font-family: "Cinzel", serif; font-weight: 600; letter-spacing: 0.06em; }
.fitrow__size { font-size: 0.9rem; color: var(--ink-soft); }
.fitrow .fit__grid { margin: 0 16px 16px; }
.fitrow > .hint { padding: 0 16px 16px; }

/* size guide: every measurement, every size */
.chart-wrap { overflow-x: auto; margin-bottom: 8px; -webkit-overflow-scrolling: touch; }
.chart--full { min-width: 520px; }
.chart--full thead th:not(:first-child) { font-family: "Cinzel", serif; font-weight: 600; color: var(--rose); letter-spacing: 0.06em; font-size: 0.9rem; }
.chart--full tbody th { font-family: "Jost", sans-serif; font-weight: 400; color: var(--ink); text-align: left; white-space: nowrap; font-size: 0.9rem; }
.chart__label { display: inline-flex; align-items: center; gap: 8px; }
.chart--full tbody th .mrow__num { width: 19px; height: 19px; font-size: 0.62rem; }
.chart--full td { font-variant-numeric: tabular-nums; }
.chart__group th {
  background: var(--wine); color: var(--on-wine) !important; text-align: left;
  font-size: 0.72rem !important; font-weight: 500 !important; letter-spacing: 0.16em; text-transform: uppercase; padding: 7px 10px !important;
}

/* ==========================================================================
   SHIPPING CHOICE · PAYMENT STAGES
   ========================================================================== */
.ships { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.ship {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; cursor: pointer;
  padding: 14px 16px; border: 1px solid var(--hair); background: var(--surface);
}
.ship:has(input:checked) { border-color: var(--rose); background: var(--rose-wash); }
.ship input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--rose); }
.ship b { display: block; font-weight: 500; }
.ship small { display: block; color: var(--ink-soft); font-size: 0.84rem; margin-top: 2px; }
@media (max-width: 600px) { .ships { grid-template-columns: 1fr; } }

.totals .plan__head { padding-top: 10px; border-top: 1px solid var(--hair-soft); }
.totals .plan__head dt { color: var(--ink); font-weight: 500; font-size: 0.86rem; letter-spacing: 0.12em; text-transform: uppercase; }
.totals .stage dt { color: var(--ink-soft); }
.totals .advance dt, .totals .stage dt { max-width: 24ch; font-size: 0.92rem; line-height: 1.35; }
.totals .advance dd, .totals .stage dd { white-space: nowrap; }
.stages { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 4px; }
.stages b { color: var(--ink); font-weight: 500; }

/* ==========================================================================
   SHOPIFY THEME ADDITIONS - everything above is the website's stylesheet, unchanged
   ========================================================================== */
/* Shopify's image_tag adds width/height attributes; without this they override the
   aspect-ratio crops the website relies on. Class rules that set a height still win. */
img { height: auto; }
.sr-only:focus { position: fixed; top: 8px; left: 8px; width: auto; height: auto; clip: auto; margin: 0; padding: 10px 14px; background: var(--ground); z-index: 100; }
.hero__thesis p { margin: 0; }
.page-head__text p, .page-head__text { margin: 0; color: var(--ink-soft); font-size: var(--t-md); max-width: 60ch; }
@media (max-width: 700px) { .hide-sm-inline { display: none !important; } }

/* bag drawer: the refreshed part sits in #drawer-inner */
.drawer__inner { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.drawer__inner .drawer__body { flex: 1; }
.drawer__total--today { font-size: 0.97rem; color: var(--rose-deep); }
.drawer__total--today .price { font-size: 1.05rem; }
.drawer.is-busy .drawer__inner { opacity: 0.55; pointer-events: none; transition: opacity 0.2s ease; }

/* product page */
.piece__form { display: flex; flex-direction: column; gap: 18px; }
.stages-box { border-top: 1px solid var(--hair-soft); border-bottom: 1px solid var(--hair-soft); padding: 12px 0 4px; }
.stages-box__today { margin: 0 0 8px; color: var(--ink-soft); }
.stages-box__today b { color: var(--ink); font-weight: 500; }
.stages-box__list { list-style: none; margin: 0; padding: 0; }
.stages-box__list li { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; padding: 7px 0; border-top: 1px solid var(--hair-soft); font-size: 0.93rem; }
.stages-box__list b { color: var(--rose); font-weight: 600; }
.stages-box__list span { color: var(--ink-soft); }
.stages-box__list em { font-style: normal; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rte p { margin: 0 0 10px; }
.rte p:last-child { margin-bottom: 0; }
.rte strong { color: var(--ink); font-weight: 500; }
.rte ul, .rte ol { padding-left: 20px; }
.page-body { max-width: 72ch; color: var(--ink-soft); font-size: 1.02rem; }
.page-body h2, .page-body h3 { font-family: "Cinzel", serif; font-weight: 600; letter-spacing: 0.04em; color: var(--ink); }

/* contact */
.contact { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(16px, 3vw, 32px); align-items: start; }
.contact__ways { display: grid; gap: 14px; }
.contact__way { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: center; text-decoration: none; color: inherit; padding: 12px 0; border-bottom: 1px solid var(--hair-soft); }
.contact__way svg { width: 22px; height: 22px; color: var(--rose); }
.contact__way b { display: block; font-weight: 500; }
.contact__way small { display: block; color: var(--ink-faint); font-size: 0.86rem; }
@media (max-width: 760px) { .contact { grid-template-columns: 1fr; } }

/* bag page */
.qty-input { width: 80px; min-height: 40px; padding: 6px 10px; }

/* pagination */
.pagination { display: flex; justify-content: center; gap: 10px; margin-top: 36px; font-size: var(--t-sm); }
.pagination a, .pagination .current { padding: 8px 12px; border: 1px solid var(--hair); text-decoration: none; }
.pagination .current { background: var(--rose); border-color: var(--rose); color: var(--ground); }

/* Shopify's own pages: policies, account */
.shopify-policy__container { max-width: 760px !important; margin: 0 auto; padding: clamp(40px, 6vw, 72px) var(--gutter) clamp(56px, 8vw, 96px); }
.shopify-policy__title h1 { font-family: "Cinzel", serif; font-weight: 600; letter-spacing: 0.045em; font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 20px; }
.shopify-policy__body { color: var(--ink-soft); font-size: 1.02rem; }
.shopify-policy__body h2, .shopify-policy__body h3 { color: var(--ink); font-size: 1.05rem; margin: 22px 0 6px; }

/* password page */
.password-body { min-height: 100vh; display: grid; place-items: center; }
.password { text-align: center; display: grid; justify-items: center; gap: 18px; padding-block: 60px; }
.password .wordmark { align-items: center; }
.password__lede { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 1.5rem; margin: 0; max-width: 30ch; }
.password__form .form { margin-top: 16px; min-width: min(360px, 90vw); text-align: left; }

/* --------------------------------------------------------------------------
   Size chart: body measurements (bust, waist, hip), inches over centimetres
   -------------------------------------------------------------------------- */
.chart--body { min-width: 0; }
.chart--body tbody th { vertical-align: middle; }
.chart--body tbody th small { display: block; font-size: 0.68rem; letter-spacing: 0.08em; color: var(--ink-faint); }
.chart--body td b { display: block; font-weight: 500; }
.chart--body td small { display: block; font-size: 0.74rem; color: var(--ink-faint); }
@media (max-width: 560px) { .chart--body { min-width: 440px; } }
.chart-note { font-size: 0.9rem; color: var(--ink-soft); margin: -8px 0 0; }
.chart-note p { margin: 0 0 8px; }
.fit__body { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--hair); }
.fit__body > div { padding: 12px 10px; text-align: center; }
.fit__body > div + div { border-left: 1px solid var(--hair-soft); }
.fit__body dt { font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.fit__body dd { margin: 4px 0 0; font-size: 1.05rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.fit__body dd small { display: block; font-size: 0.74rem; font-weight: 400; color: var(--ink-faint); }

/* --------------------------------------------------------------------------
   One-line drawings in the How to order cards (needle and thread; paisley in a
   hoop). Each fills the space left in its card, so the two cards stay even.
   -------------------------------------------------------------------------- */
.way__art { position: relative; flex: 1 1 auto; min-height: 120px; margin: 4px 0; }
.stitch-art { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--gold); overflow: visible; }
.stitch-art__tool { color: var(--rose); }
.stitch-art__run { stroke-dasharray: 8 7; opacity: 0.6; }
.stitch-art__line { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 2.8s cubic-bezier(0.45, 0.05, 0.25, 1) 0.35s; }
.stitch-art__tool { transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.stitch-art__run { transition: opacity 0.8s ease 2.4s; }
.stitch-art.is-waiting .stitch-art__line { stroke-dashoffset: 1; transition: none; }
.stitch-art.is-waiting .stitch-art__tool { opacity: 0; transform: translate(14px, -14px); transition: none; }
.stitch-art.is-waiting .stitch-art__run { opacity: 0; transition: none; }
@media (max-width: 560px) { .way__art { min-height: 120px; } }

/* --------------------------------------------------------------------------
   Payment choice: "Pay in full" is the main button, paying in stages the option
   -------------------------------------------------------------------------- */
.sizes--choice { align-items: stretch; }
.sizes--choice .size { height: auto; min-height: 48px; padding-block: 8px; display: inline-flex; flex-direction: column; justify-content: center; line-height: 1.25; }
.sizes--choice .size small { display: block; margin-top: 2px; font-size: 0.74rem; font-weight: 400; letter-spacing: 0.02em; opacity: 0.85; }
.size--main { min-width: 170px; }
.size--minor { font-size: 0.8rem; color: var(--ink-soft); }
.size--minor[aria-checked="true"] { color: var(--ground); }
.stages-box__alt { margin: 2px 0 8px; font-size: 0.86rem; color: var(--ink-faint); }
.stages-box__alt em { font-style: normal; color: var(--ink-soft); font-weight: 500; }

/* ==========================================================================
   THE NEW IDENTITY
   The logo is supplied artwork, so it is placed as an image and never
   rebuilt in a font. See the brand kit: "do not redraw the lettering".
   ========================================================================== */
.wordmark--foot img { display: block; width: clamp(170px, 24vw, 236px); height: auto; }
/* the gold artwork was drawn for a burgundy ground; on the dark theme it is
   lifted very slightly so it keeps its shine */
:root[data-theme="dark"] .wordmark img,
:root[data-theme="dark"] .hero__mark img,
:root[data-theme="dark"] .foot .wordmark img { filter: brightness(1.12) saturate(1.04); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wordmark img,
  :root:not([data-theme="light"]) .hero__mark img { filter: brightness(1.12) saturate(1.04); }
}

/* The header carries the ZQ monogram on its own; the hero carries the full
   stacked logo. Both are the supplied artwork, so nothing is typed out.
   Both files are exported at the master's own resolution (1203px) and then
   palette-compressed, so "The Label by Harsh" still has enough pixels to stay
   crisp on a retina screen instead of filling in. The hero logo is also drawn
   a little larger, to give that line room. */
.wordmark--mono img { display: block; width: clamp(58px, 6vw, 78px); height: auto; }
.hero__logo { display: block; width: clamp(260px, 33vw, 420px); height: auto; }
/* The lock-up ends in its own small-caps strapline, and that line is centred
   inside the artwork: it starts 24.8% in, about 104px at the size we draw it.
   A second left-aligned small-caps line directly underneath made that indent
   read as a misalignment, so there is only one now. */
.hero__mark { align-items: flex-start; gap: 0; margin-bottom: 6px; }

}

/* ==========================================================================
   THE HERO SLIDER
   Slides sit in one grid cell so the tallest sets the height, and they
   crossfade with a plain CSS transition. Nothing is tweened on scroll.
   ========================================================================== */
.hero__slider { position: relative; }
.hero__stage { display: grid; }
.hero__stage > .hero__main {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.7s;
}
.hero__stage > .hero__main.is-on { opacity: 1; visibility: visible; }
.hero__stage > .hero__main:only-child { opacity: 1; visibility: visible; }

.hero__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--gold-line); border-radius: 50%;
  background: var(--ground); color: var(--ink-soft);
  cursor: pointer; padding: 0;
  opacity: 0; transition: opacity 0.3s ease, color 0.24s ease, border-color 0.24s ease;
}
.hero__nav svg { width: 17px; height: 17px; }
.hero__nav:hover { color: var(--rose); border-color: var(--rose); }
.hero__nav--prev { left: -14px; }
.hero__nav--next { right: -14px; }
.hero__art:hover .hero__nav, .hero__nav:focus-visible { opacity: 1; }

.hero__dots {
  position: absolute; z-index: 3; left: 50%; transform: translateX(-50%);
  bottom: -26px; display: flex; gap: 10px;
}
.hero__dot {
  width: 8px; height: 8px; padding: 0; border: 1px solid var(--rose-line);
  background: transparent; transform: rotate(45deg); cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.hero__dot.is-on { background: var(--gold); border-color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .hero__stage > .hero__main { transition: none; }
}
@media (max-width: 900px) {
  .hero__nav { opacity: 1; width: 38px; height: 38px; }
  .hero__nav--prev { left: 2px; }
  .hero__nav--next { right: 2px; }
}

/* ==========================================================================
   COLLECTIONS on the home page (sections/collections.liquid)
   ========================================================================== */
/* One row per collection: the name, a fine gold rule, and a slider of its
   pieces. On a phone two cards and a sliver of the third show, so the row
   invites a swipe; on a computer four show and the arrows appear only when
   there is more to see. The row runs out to the edge of the screen but its
   first card lines up with everything else on the page. */
.shelf + .shelf { margin-top: clamp(40px, 6vw, 68px); }
.shelf__head {
  display: flex; align-items: center; gap: 14px 18px;
  margin-bottom: clamp(16px, 2.4vw, 26px);
}
.shelf__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; min-width: 0; }
.shelf__name {
  margin: 0; font-family: "Cinzel", serif; font-weight: 600; line-height: 1.25;
  font-size: clamp(1rem, 1.7vw, 1.22rem); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose);
}
.shelf__count {
  font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600;
  font-size: 1.06rem; color: var(--ink-soft); white-space: nowrap;
}
.shelf__rule { flex: 1 1 24px; height: 1px; background: var(--gold-line); }
.shelf__nav { display: none; gap: 8px; flex: none; }
.shelf__btn {
  width: 40px; height: 40px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--gold-line); background: transparent; color: var(--rose);
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}
.shelf__btn svg { width: 16px; height: 16px; }
.shelf__btn:hover:not(:disabled) { background: var(--rose); border-color: var(--rose); color: var(--ground); }
.shelf__btn:disabled { opacity: 0.32; cursor: default; }
.shelf__all { flex: none; border-bottom-color: transparent; }

.shelf__track {
  --g: clamp(14px, 2vw, 28px);
  --per: 4;
  display: flex; gap: var(--g);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
  padding-bottom: 4px;
}
.shelf__track::-webkit-scrollbar { display: none; }
.shelf__item { flex: 0 0 calc((100% - var(--g) * (var(--per) - 1)) / var(--per)); min-width: 0; scroll-snap-align: start; }
.shelf__item .card { height: 100%; }

@media (hover: hover) and (min-width: 700px) {
  .shelf.is-scrollable .shelf__nav { display: flex; }
}
@media (max-width: 1080px) { .shelf__track { --per: 3.2; } }
@media (max-width: 700px) {
  .shelf__track { --per: 2.15; }
  .shelf__head { align-items: flex-end; justify-content: space-between; }
  .shelf__rule { display: none; }
  .shelf__title { flex-direction: column; gap: 2px; }
}

/* ==========================================================================
   THE CONSULTATION FORM
   ========================================================================== */
.cform { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 34px); max-width: 780px; }
.cform .block {
  border: 1px solid var(--gold-line); background: var(--surface-warm);
  padding: clamp(22px, 3vw, 34px);
}
.cform .block h2 { margin: 6px 0 18px; font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cform__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.cform .hint { display: block; margin-top: 6px; font-size: var(--t-xs); color: var(--ink-faint); }
.cform .err { margin: 14px 0 0; color: var(--warn); font-size: var(--t-sm); }
.cform .opt { color: var(--ink-faint); font-weight: 400; }
@media (max-width: 700px) { .cform__row { grid-template-columns: 1fr; } }

/* ==========================================================================
   BRIDAL TROUSSEAU (sections/trousseau.liquid)
   A burgundy panel in the brand kit's own colours in both themes: Signature
   Burgundy ground, Soft Ivory type, Light Gold accents.
   ========================================================================== */
.trousseau {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  background: #4E0812; color: #F7F2EA; border: 1px solid rgba(201, 162, 74, 0.55);
  overflow: hidden;
}
.trousseau--plain { grid-template-columns: 1fr; }
.trousseau__media { display: block; position: relative; min-height: 100%; overflow: hidden; }
.trousseau__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) { .trousseau:hover .trousseau__media img { transform: scale(1.03); } }
.trousseau__body {
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  padding: clamp(28px, 5vw, 72px);
}
.trousseau .label { color: #E3C77A; }
.trousseau h2 { margin: 0; color: #F7F2EA; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.15; }
.trousseau__text { margin: 0; color: rgba(247, 242, 234, 0.86); font-size: var(--t-md); line-height: 1.65; max-width: 52ch; }
/* the functions, strung along a gold thread */
.trousseau__thread {
  list-style: none; margin: 4px 0; padding: 14px 0; display: flex; flex-wrap: wrap; gap: 6px 0;
  border-block: 1px solid rgba(227, 199, 122, 0.4);
  font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600;
  font-size: clamp(1.08rem, 1.6vw, 1.26rem); color: #E3C77A;
}
.trousseau__thread li { display: inline-flex; align-items: center; }
.trousseau__thread li + li::before {
  content: ""; width: 5px; height: 5px; margin-inline: 12px; flex: none;
  background: #C9A24A; transform: rotate(45deg);
}
.trousseau__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.trousseau .btn--solid { background: #E3C77A; border-color: #E3C77A; color: #4E0812; }
.trousseau .btn--solid:hover { background: #F7F2EA; border-color: #F7F2EA; color: #4E0812; }
.trousseau .btn--ghost { border-color: rgba(247, 242, 234, 0.4); color: #F7F2EA; }
.trousseau .btn--ghost:hover { border-color: #E3C77A; color: #E3C77A; }
.trousseau__note { margin: 0; font-size: var(--t-sm); color: rgba(247, 242, 234, 0.66); }
@media (max-width: 820px) {
  .trousseau { grid-template-columns: 1fr; }
  .trousseau__media { aspect-ratio: 4 / 3; min-height: 0; }
  .trousseau__actions .btn { flex: 1 1 100%; }
}

/* the same invitation, as one line at the top of the footer on other pages */
.foot__bride {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding-bottom: clamp(24px, 3vw, 34px); margin-bottom: clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--gold-line);
}
.foot__bride p { margin: 0; font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--ink); }
.foot__bride p b { font-family: "Cinzel", serif; font-weight: 600; font-size: 0.8em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rose); margin-right: 8px; }

/* ==========================================================================
   CONSULTATION: a consultation, or bridal trousseau planning
   ========================================================================== */
.cform__part { display: contents; }
.cform__part[hidden] { display: none; }
.cform > .block, .cform__part > .block { margin-top: 0; }
.cform__kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cform__kind {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
  padding: 18px 20px; cursor: pointer; font: inherit; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--hair);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.cform__kind b {
  font-family: "Cinzel", serif; font-weight: 600; font-size: 0.98rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink);
}
.cform__kind span { font-size: var(--t-sm); line-height: 1.5; }
.cform__kind:hover { border-color: var(--rose-line); }
.cform__kind[aria-pressed="true"] { border-color: var(--rose); background: var(--rose-wash); box-shadow: inset 0 0 0 1px var(--rose); }
.cform__kind[aria-pressed="true"] b { color: var(--rose-deep); }
@media (max-width: 560px) { .cform__kinds { grid-template-columns: 1fr; } }

/* ==========================================================================
   SAVED MEASUREMENTS (both measurement forms)
   ========================================================================== */
.mprof {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 18px; margin-bottom: 18px;
  border: 1px dashed var(--gold-line); background: var(--surface-warm);
}
.mprof[hidden] { display: none; }
.mprof--save { margin: 18px 0 0; }
.mprof__label {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rose-deep);
}
.mprof__list { display: flex; flex-wrap: wrap; gap: 8px; }
.mprof__item { display: inline-flex; align-items: center; }
.mprof__item .chip { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.mprof__x {
  display: grid; place-items: center; width: 34px; min-height: 40px; padding: 0; margin-left: -1px;
  border: 1px solid var(--hair); border-radius: 0 999px 999px 0; background: var(--surface);
  color: var(--ink-faint); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease;
}
.mprof__x svg { width: 14px; height: 14px; }
.mprof__x:hover { color: var(--warn); border-color: var(--warn); }
.mprof__save { display: flex; gap: 10px; }
.mprof__save input {
  flex: 1; min-width: 0; min-height: 40px; padding: 8px 12px; font: inherit;
  border: 1px solid var(--hair); background: var(--surface); color: var(--ink);
}
.mprof__save input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.mprof__note { margin: 0; font-size: var(--t-xs); color: var(--ink-faint); }
@media print { .mprof { display: none !important; } }

/* ==========================================================================
   ABOUT US (sections/about.liquid)
   ========================================================================== */
.about__head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.about__head h1 { font-size: clamp(2rem, 5vw, 3.4rem); color: var(--rose); letter-spacing: 0.06em; }
.about__meaning { padding-bottom: clamp(56px, 8vw, 104px); }
.about__words {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-block: 1px solid var(--gold-line);
}
.about__word { padding: clamp(28px, 4vw, 52px) clamp(20px, 4vw, 56px); display: flex; flex-direction: column; gap: 10px; }
.about__word + .about__word { border-left: 1px solid var(--gold-line); }
.about__term {
  margin: 0; font-family: "Cinzel", serif; font-weight: 600; color: var(--rose);
  font-size: clamp(1.8rem, 3.6vw, 2.6rem); letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.1;
}
.about__note { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; font-size: 1.12rem; color: var(--gold); }
.about__word p { margin: 6px 0 0; font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: clamp(1.2rem, 1.9vw, 1.38rem); line-height: 1.6; color: var(--ink); }
.about__together {
  margin: clamp(40px, 6vw, 72px) auto 0; max-width: 780px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.about__together::before, .about__together::after {
  content: ""; width: 7px; height: 7px; background: var(--gold-line); transform: rotate(45deg);
}
.about__together p {
  margin: 0; font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.3; color: var(--rose);
}
.about__piece {
  margin: clamp(28px, 4vw, 40px) auto 0; max-width: 56ch; text-align: center;
  font-size: var(--t-md); line-height: 1.75; color: var(--ink-soft);
}
.about__sign { display: flex; justify-content: center; margin-top: clamp(36px, 5vw, 56px); }
.about__sign img { width: clamp(200px, 22vw, 240px); height: auto; }

.about__founder { background: var(--surface-warm); border-block: 1px solid var(--hair-soft); padding-block: clamp(56px, 8vw, 104px); }
.about__founder-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.about__founder-grid--text { grid-template-columns: minmax(0, 1fr); max-width: 760px; text-align: center; }
.about__founder-grid--text .about__founder-body { align-items: center; }
.about__portrait { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--gold-line); padding: 10px; background: var(--ground); }
.about__portrait img { width: 100%; height: 100%; object-fit: cover; }
.about__founder-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.about__name { margin: 0; font-size: clamp(2rem, 4vw, 3rem); color: var(--rose); letter-spacing: 0.08em; }
.about__role { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; font-size: 1.2rem; color: var(--gold); }
.about__founder-text p { margin: 14px 0 0; font-size: var(--t-md); line-height: 1.8; color: var(--ink-soft); }

.about__close { padding-block: clamp(56px, 8vw, 96px); display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.about__close p { margin: 0; font-family: "Cormorant Garamond", serif; font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--ink); max-width: 40ch; }
.about__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

@media (max-width: 760px) {
  .about__words { grid-template-columns: 1fr; }
  .about__word + .about__word { border-left: 0; border-top: 1px solid var(--gold-line); }
  .about__founder-grid { grid-template-columns: 1fr; }
}