/* Royal Boutique Surrey. Design system.
   Grid: 12 columns, max 1320px, 24px gutters. Spacing: 8, 16, 24, 32, 48, 64, 96, 128 only.
   Controls: 48px tall, 2px radius. Gold is for hairlines, ornaments and focus rings only. */

@font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces.woff2') format('woff2'); font-weight: 600 800; font-display: optional; }
@font-face { font-family: 'Hanken Grotesk'; src: url('../fonts/hanken-grotesk.woff2') format('woff2'); font-weight: 500 700; font-display: optional; }
@font-face { font-family: 'Fraunces Fallback'; src: local('Georgia'); size-adjust: 104%; ascent-override: 92%; descent-override: 24%; }
@font-face { font-family: 'Hanken Fallback'; src: local('Arial'); size-adjust: 98%; ascent-override: 98%; descent-override: 26%; }

:root {
  --ivory: #FBF7F0;
  --ivory-2: #F4ECDF;
  --paper: #FFFDF9;
  --maroon: #5B0F1E;
  --maroon-d: #3E0813;
  --ink: #1A1414;
  --ink-2: #3A2E2C;
  --gold: #B08A3E;
  --emerald: #0F4D3A;
  --emerald-d: #09352A;
  --error: #9E0F23;
  --line: rgba(26, 20, 20, .16);
  --line-2: rgba(26, 20, 20, .32);
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px; --s12: 96px; --s16: 128px;
  --gut: 16px;
  --ctl: 48px;
  --r: 2px;
  --serif: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
  --sans: 'Hanken Grotesk', 'Hanken Fallback', Arial, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-o: cubic-bezier(.16, 1, .3, 1);
  --ann-h: 40px;
  --bar-h: 64px;
  --nav-h: 0px;
  --top-h: calc(var(--ann-h) + var(--bar-h) + var(--nav-h));
}
@media (min-width: 768px) { :root { --gut: 24px; } }
@media (min-width: 1024px) { :root { --bar-h: 72px; --nav-h: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + var(--s2)); }
html.motion:not(.lenis) { scroll-behavior: smooth; }
body { margin: 0; background: var(--ivory); color: var(--ink); font: 500 17px/1.6 var(--sans); font-kerning: normal; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
picture { display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--maroon); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
legend { padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
::selection { background: var(--maroon); color: var(--ivory); }
main { display: block; padding-top: var(--top-h); }
main:focus { outline: none; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 50%; top: var(--s1); z-index: 10001; transform: translate(-50%, -200%); background: var(--maroon); color: var(--ivory); padding: 12px var(--s3); border-radius: var(--r); font-weight: 700; }
.skip:focus { transform: translate(-50%, 0); color: var(--ivory); }
.no-js .js-only { display: none !important; }
.only-d { display: none !important; }
@media (min-width: 1024px) { .only-d { display: revert !important; } .only-m { display: none !important; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.center-text { text-align: center; }

/* Layout */
.wrap { width: 100%; max-width: calc(1320px + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }
.narrow { max-width: calc(880px + var(--gut) * 2); }
.sec { padding-block: var(--s8); position: relative; }
.sec-tight { padding-top: var(--s4); }
.sec-alt { background: var(--ivory-2); }
@media (min-width: 768px) { .sec { padding-block: var(--s12); } }
@media (min-width: 1440px) { .sec { padding-block: var(--s16); } }

/* Type */
.h-hero, .h-page, .h-sec, .h-sub, .h-prod, .hero-title, .wm-main { font-family: var(--serif); font-optical-sizing: auto; font-weight: 800; letter-spacing: -.02em; line-height: 1.02; color: var(--maroon); }
.h-page { font-size: clamp(40px, 7vw, 88px); }
.h-sec { font-size: clamp(32px, 4.6vw, 60px); line-height: 1.04; }
.h-sub { font-size: 24px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: var(--ink); }
.h-prod { font-size: clamp(32px, 4vw, 48px); line-height: 1.06; }
.label { font: 700 13px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--maroon); }
.lede { font-size: 19px; line-height: 1.6; color: var(--ink-2); max-width: 640px; margin-inline: auto; }
.eyebrow { display: flex; align-items: center; justify-content: center; gap: var(--s2); font: 700 13px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--maroon); margin-bottom: var(--s2); }
.eyebrow-left { justify-content: flex-start; }
.dia { width: 10px; height: 10px; fill: none; stroke: var(--gold); stroke-width: 1.5; flex: none; overflow: visible; }
.credit { font-size: 13px; line-height: 1.5; color: var(--ink-2); font-weight: 500; }
.fine { font-size: 14px; color: var(--ink-2); }
.prose p + p, .prose .h-sub + p { margin-top: var(--s2); }
.prose .h-sub { margin-top: var(--s6); }
.prose .h-sub:first-child { margin-top: 0; }
.prose a { color: var(--maroon); font-weight: 700; }
.linkish { color: var(--maroon); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: var(--s1); min-height: 48px; }

/* [CONFIRM] placeholders: visible on purpose */
.tbc, .tbc-cell { display: inline-block; background: #F7E9C6; color: var(--maroon); border: 1px dashed var(--gold); border-radius: var(--r); font: 700 12px/1.6 var(--sans); letter-spacing: .04em; padding: 0 6px; vertical-align: .08em; white-space: nowrap; }

/* Section heading, centred on the axis */
.sec-head { text-align: center; max-width: 880px; margin: 0 auto var(--s6); }
@media (min-width: 1024px) { .sec-head { margin-bottom: var(--s8); } }
.sec-head .lede { margin-top: var(--s3); }
.rule { display: block; width: 96px; height: 1px; background: var(--gold); margin: var(--s3) auto 0; transform-origin: 50% 50%; }
.split-line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.split-line > span { display: block; }

/* Buttons: one height, one radius, fill wipe from the centre */
.btn { --bg: transparent; --fg: var(--ink); --fill: var(--ink); --fg-h: var(--ivory); position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); height: var(--ctl); padding: 0 var(--s4); border-radius: var(--r); background: var(--bg); color: var(--fg); border: 1px solid transparent; font: 700 14px/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; text-decoration: none; white-space: nowrap; transition: color .35s var(--ease), transform .2s var(--ease); }
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--fill); transform: scaleX(0); transform-origin: 50% 50%; transition: transform .45s var(--ease-o); }
.btn:hover { color: var(--fg-h); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn:active { transform: scale(.97); }
.btn .ico { width: 20px; height: 20px; }
.btn-primary { --bg: var(--maroon); --fg: var(--ivory); --fill: var(--maroon-d); }
.btn-secondary { --bg: var(--emerald); --fg: var(--ivory); --fill: var(--emerald-d); }
.btn-ghost { border-color: var(--ink); }
.btn-sm { padding: 0 var(--s3); font-size: 13px; }
.btn-wide { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.btn-row.center { justify-content: center; }
@media (max-width: 479px) { .btn-row.center .btn { flex: 1 1 100%; white-space: normal; } }

.icon-btn { position: relative; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r); color: var(--ink); text-decoration: none; transition: color .2s var(--ease); }
.icon-btn:hover { color: var(--maroon); }
.icon-btn-line { border: 1px solid var(--line-2); }
.ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.count { position: absolute; top: 6px; right: 4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--maroon); color: var(--ivory); font: 700 11px/18px var(--sans); text-align: center; }
.count.bump { animation: bump .45s var(--ease-o); }
@keyframes bump { 40% { transform: scale(1.35); } }

.chip { display: inline-flex; align-items: center; gap: var(--s1); height: var(--ctl); padding: 0 var(--s2); border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper); font: 700 14px/1 var(--sans); text-decoration: none; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.chip:hover, .chip.is-on { background: var(--maroon); color: var(--ivory); border-color: var(--maroon); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.badge { display: inline-block; background: var(--paper); color: var(--maroon); border: 1px solid var(--maroon); font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: var(--r); vertical-align: middle; }
.badge-sale { background: var(--emerald); color: var(--ivory); border-color: var(--emerald); }
.badge-stock { color: var(--emerald); border-color: var(--emerald); }

/* Fixed top: announcement, bar, nav */
.top { position: fixed; inset: 0 0 auto; z-index: 50; background: var(--ivory); transition: transform .5s var(--ease-o); will-change: transform; }
.top::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
.top.is-compact { transform: translateY(calc(var(--ann-h) * -1)); }
.top.is-hidden { transform: translateY(-100%); }
.top.is-compact .wordmark { transform: scale(.86); }
.ann { height: var(--ann-h); background: var(--maroon); color: var(--ivory); overflow: hidden; display: flex; align-items: center; }
.ann-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.ann:hover .ann-track, .ann:focus-within .ann-track { animation-play-state: paused; }
.ann-run { display: flex; align-items: center; }
.ann-item { font: 700 13px/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; padding-inline: var(--s3); }
.ann-dia { stroke: #D9B66A; }
@keyframes marquee { to { transform: translateX(-50%); } }
.rm .ann-track { animation: none; }

.hdr { position: relative; }
.hdr-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--bar-h); }
.hdr-side { display: flex; align-items: center; gap: 0; }
.hdr-right { justify-content: flex-end; }
.wordmark { display: grid; justify-items: center; text-decoration: none; color: var(--maroon); transition: transform .5s var(--ease-o); transform-origin: 50% 50%; }
.wordmark:hover { color: var(--maroon); }
.wm-main { font-size: 24px; line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.wm-sub { display: flex; align-items: center; gap: var(--s1); font: 700 10px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--ink); margin-top: 6px; padding-left: .32em; }
.wm-rule { width: 24px; height: 1px; background: var(--gold); }
@media (min-width: 768px) { .wm-main { font-size: 30px; } .wm-sub { font-size: 11px; } }
.cur select { height: 48px; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231A1414' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 4px center / 10px; padding: 0 var(--s3) 0 var(--s1); font: 700 13px var(--sans); letter-spacing: .08em; appearance: none; cursor: pointer; }
.hdr-nav { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--nav-h); max-width: calc(1320px + var(--gut) * 2); margin: 0 auto; padding-inline: var(--gut); }
@media (max-width: 1023px) { .hdr-nav { display: none !important; } }
.nav-side { display: flex; gap: var(--s4); }
.nav-l { justify-content: flex-end; }
.nav-dia { margin-inline: var(--s4); width: 12px; height: 12px; }
.nav-link { position: relative; display: inline-flex; align-items: center; height: var(--nav-h); font: 700 14px/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; text-decoration: none; }
.nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: var(--maroon); transform: scaleX(0); transform-origin: 50% 50%; transition: transform .4s var(--ease-o); }
.nav-link:hover::after, .nav-link.is-current::after, .nav-link[aria-expanded="true"]::after { transform: scaleX(1); }

.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--ivory); border-top: 1px solid var(--line); box-shadow: 0 24px 48px rgba(26, 20, 20, .08); padding-block: var(--s6); }
.mega-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.mega-col .label { padding-bottom: var(--s2); margin-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.mega-col li a { display: block; padding: 6px 0; font-weight: 600; text-decoration: none; }
.mega-col li a:hover { color: var(--maroon); text-decoration: underline; }
.mega-card { position: relative; display: block; text-decoration: none; }
.mega-card picture { aspect-ratio: 4 / 5; overflow: hidden; max-height: 280px; }
.mega-card img { width: 100%; height: 100%; object-fit: cover; }
.mega-card .label { display: block; margin-top: var(--s2); }
.mega-card-t { font: 700 20px/1.2 var(--serif); color: var(--ink); }

/* Product cards: one ratio, identical heights per row */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s2); }
@media (min-width: 768px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6) var(--s3); } }
@media (min-width: 1024px) {
  .grid[data-cols="4"], .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid[data-cols="3"], .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 > .card-note { grid-column: 1 / -1; }
  .grid-3 > .card-note .card-note-in { aspect-ratio: auto; padding: var(--s6) var(--s3); }
}
.card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.card-media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ivory-2); }
.card-img { position: absolute; inset: 0; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-o); }
.card-img-b { clip-path: inset(0 50% 0 50%); transition: clip-path .7s var(--ease-o); }
.card:hover .card-img-b, .card-media:focus-visible .card-img-b { clip-path: inset(0 0 0 0); }
.card:hover .card-img-a img { transform: scale(1.04); }
.badges { position: absolute; left: var(--s1); top: var(--s1); display: flex; gap: 4px; flex-wrap: wrap; z-index: 2; }
.card-wish { position: absolute; top: 0; right: 0; z-index: 3; width: 48px; height: 48px; display: grid; place-items: center; color: var(--ink); }
.card-wish .ico, [data-wish] .ico { transition: fill .25s var(--ease), color .25s, transform .3s var(--ease-o); }
[data-wish][aria-pressed="true"] .ico { fill: var(--maroon); stroke: var(--maroon); }
[data-wish].pop .ico { animation: bump .45s var(--ease-o); }
.burst { position: absolute; inset: 0; pointer-events: none; }
.burst i { position: absolute; left: 50%; top: 50%; width: 1px; height: 8px; background: var(--gold); transform-origin: 50% 0; }
.card-wish::before { content: ''; position: absolute; inset: 8px; background: rgba(251, 247, 240, .86); border-radius: 50%; z-index: -1; }
.card-quick { position: absolute; left: 0; right: 0; z-index: 2; top: 0; aspect-ratio: 4 / 5; overflow: hidden; pointer-events: none; display: flex; flex-direction: column; justify-content: flex-end; }
.card-quick > * { pointer-events: auto; }
.card-quick .label { background: var(--ivory); padding: var(--s1) var(--s2) 0; font-size: 11px; transform: translateY(calc(100% + 48px)); transition: transform .45s var(--ease-o); }
.qa-sizes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: var(--ivory); padding: var(--s1); gap: 4px; transform: translateY(100%); transition: transform .45s var(--ease-o); }
.qa-size { height: 48px; border: 1px solid var(--line-2); border-radius: var(--r); font: 700 12px var(--sans); background: var(--paper); }
.qa-size:hover { background: var(--maroon); color: var(--ivory); border-color: var(--maroon); }
.card:hover .qa-sizes, .card:hover .card-quick .label, .card-quick:focus-within .qa-sizes, .card-quick:focus-within .label { transform: translateY(0); }
@media (hover: none), (max-width: 767px) { .card-quick { display: none; } }
.card-body { display: flex; flex-direction: column; flex: 1; padding-top: var(--s2); }
.card-title { font: 700 19px/1.25 var(--serif); letter-spacing: -.01em; min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-title a { text-decoration: none; }
.card-title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.card-title a:hover { color: var(--maroon); }
.card-meta { font: 700 12px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-top: 4px; }
.card-foot { margin-top: auto; padding-top: var(--s1); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1); }
.price { font: 700 16px/1.4 var(--sans); }
.price s { color: var(--ink-2); font-weight: 500; }
.price.is-sale [data-money] { color: var(--emerald); }
.price-tbc { font-size: 14px; }
.sws { position: relative; z-index: 2; display: flex; align-items: center; gap: 4px; }
.sw { width: 20px; height: 20px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(26, 20, 20, .25); display: inline-block; position: relative; }
button.sw { outline-offset: 2px; }
button.sw::before { content: ''; position: absolute; inset: -14px; }
.sw.is-on { box-shadow: inset 0 0 0 1px rgba(26, 20, 20, .25), 0 0 0 2px var(--ivory), 0 0 0 3px var(--ink); }
.sw-more { font: 600 12px var(--sans); color: var(--ink-2); }
.card-note { background: var(--ivory-2); box-shadow: inset 0 0 0 1px var(--line); }
.card-note-in { aspect-ratio: 4 / 5; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--s2); padding: var(--s3); }
.note-dia { width: 24px; height: 24px; }
.skel { background: linear-gradient(90deg, var(--ivory-2) 0 40%, #FAF3E8 50%, var(--ivory-2) 60%) 0 0 / 300% 100%; animation: shimmer 1.4s linear infinite; border-radius: var(--r); }
.skel-media { aspect-ratio: 4 / 5; }
.skel-line { height: 16px; margin-top: var(--s2); }
.skel-line.short { width: 50%; }
@keyframes shimmer { to { background-position: -150% 0; } }
.rm .skel { animation: none; }

/* Page hero */
.phero { padding: var(--s6) 0 var(--s6); text-align: center; }
@media (min-width: 1024px) { .phero { padding: var(--s8) 0; } }
.phero .lede { margin-top: var(--s3); }
.phero + .sec { padding-top: var(--s4); }
.crumbs { margin-bottom: var(--s4); }
.crumbs ol { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s1); font-size: 14px; }
.crumbs li + li::before { content: ''; display: inline-block; width: 6px; height: 6px; border: 1px solid var(--gold); transform: rotate(45deg); margin-right: var(--s1); vertical-align: 2px; }
.crumbs a { color: var(--ink-2); }
.prod .crumbs ol { justify-content: flex-start; }

/* Gold thread on the home page axis */
.thread { position: absolute; left: 50%; top: -48px; width: 24px; height: 96px; margin-left: -12px; z-index: 3; pointer-events: none; }
.thread-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -.5px; background: var(--gold); transform-origin: 50% 0; }
.thread-node { position: absolute; left: 0; top: 36px; width: 24px; height: 24px; fill: var(--ivory); stroke: var(--gold); stroke-width: 1.2; }
.thread-in { fill: none; stroke-dasharray: 2 2; }
.home section { position: relative; }

/* Hero */
.hero { padding: var(--s4) 0 var(--s8); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.hero-title { font-size: clamp(56px, 15vw, 96px); line-height: .95; display: contents; }
.hl { display: block; }
.hl .line { display: block; overflow: hidden; padding-bottom: .08em; }
.hl .line > span { display: block; }
.hl-l { order: 1; }
.hl-r { order: 2; margin-bottom: var(--s4); }
.hero-fig { order: 3; width: 100%; max-width: 480px; }
.hero-media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--ivory-2); }
.hero-media picture, .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-fig .credit { margin-top: var(--s1); }
.hero-foot { order: 4; margin-top: var(--s4); }
.hero-lede { font-size: 19px; color: var(--ink-2); max-width: 560px; margin: 0 auto; }
.hero-foot .btn-row { justify-content: center; }
@media (min-width: 1024px) {
  .hero { padding: var(--s6) 0 var(--s12); }
  .hero-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .hero-title { font-size: clamp(72px, 7.4vw, 128px); }
  .hl { margin: 0; }
  .hl-l { grid-column: 1 / span 4; grid-row: 1; justify-self: end; text-align: right; }
  .hl-r { grid-column: 9 / span 4; grid-row: 1; justify-self: start; text-align: left; margin: 0; }
  .hero-fig { grid-column: 5 / span 4; grid-row: 1; max-width: none; }
  .hero-foot { grid-column: 3 / span 8; grid-row: 2; margin-top: var(--s6); }
}

/* Trust bar */
.trust { padding: var(--s8) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.trust-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: center; }
.trust-grid li { padding: var(--s3) var(--s2); display: grid; justify-items: center; gap: var(--s1); }
.trust-grid li:nth-child(odd) { border-right: 1px solid var(--line); }
.trust-grid li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.trust-t { font: 700 20px/1.2 var(--serif); color: var(--maroon); }
.trust-grid p { font-size: 15px; color: var(--ink-2); }
@media (min-width: 1024px) {
  .trust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trust-grid li { border-bottom: 0 !important; border-right: 1px solid var(--line); padding: var(--s2) var(--s3); }
  .trust-grid li:last-child { border-right: 0; }
}

/* Shop by occasion */
.occ { padding: var(--s12) 0 var(--s8); overflow: hidden; }
.occ-tint { position: absolute; inset: 0; background: #E8B820; opacity: .1; pointer-events: none; transition: background-color .6s var(--ease); }
.occ .wrap { position: relative; }
.occ-viewport { position: relative; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.occ-viewport::-webkit-scrollbar { display: none; }
.occ-track { display: flex; gap: var(--s3); padding-inline: calc(50vw - 36vw); width: max-content; }
.occ-panel { width: 72vw; max-width: 420px; scroll-snap-align: center; flex: none; }
.occ-link { display: grid; text-decoration: none; text-align: center; }
.occ-media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ivory-2); }
.occ-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-o); }
.occ-link:hover .occ-media img { transform: scale(1.04); }
.occ-num { margin-top: var(--s2); font: 700 13px var(--sans); letter-spacing: .08em; color: var(--maroon); }
.occ-name { font: 800 40px/1 var(--serif); letter-spacing: -.02em; color: var(--maroon); margin-top: 4px; }
.occ-line { margin-top: var(--s1); color: var(--ink-2); font-size: 16px; max-width: 320px; justify-self: center; }
.occ-cta { margin-top: var(--s2); display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); font: 700 13px var(--sans); text-transform: uppercase; letter-spacing: .08em; }
.occ-cta .ico { width: 18px; height: 18px; transition: transform .3s var(--ease-o); }
.occ-link:hover .occ-cta .ico { transform: translateX(4px); }
.stitch-progress { position: relative; width: min(320px, 70vw); height: 2px; margin: var(--s6) auto 0; background: repeating-linear-gradient(90deg, var(--line-2) 0 8px, transparent 8px 16px); }
.stitch-fill { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--gold) 0 8px, transparent 8px 16px); transform: scaleX(0); transform-origin: 50% 50%; }
@media (min-width: 1024px) {
  .occ-panel { width: 30vw; max-width: 440px; }
  .occ-track { padding-inline: calc(50vw - 15vw); gap: var(--s6); }
  .is-pinned .occ-viewport { overflow: visible; scroll-snap-type: none; }
}

/* Categories */
.cats { padding: var(--s12) 0; }
.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s2); }
@media (min-width: 1024px) { .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6) var(--s3); } }
.cat a { display: grid; text-align: center; text-decoration: none; }
.cat-media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ivory-2); }
.cat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-o); }
.cat a:hover .cat-media img { transform: scale(1.04); }
.cat-name { margin-top: var(--s2); font: 800 24px/1.1 var(--serif); letter-spacing: -.01em; color: var(--maroon); }
.cat-line { margin-top: 4px; font-size: 15px; color: var(--ink-2); }
.cat-count { margin-top: var(--s1); font: 700 12px var(--sans); text-transform: uppercase; letter-spacing: .08em; }

/* New arrivals rail */
.rail-sec { padding: var(--s12) 0; background: var(--ivory-2); }
.rail { overflow: hidden; }
.rail-track { display: flex; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); padding: 0 var(--gut) var(--s2); scrollbar-width: none; }
.rail-track::-webkit-scrollbar { display: none; }
.rail-track > .card { flex: 0 0 70%; scroll-snap-align: center; }
@media (min-width: 768px) { .rail-track > .card { flex-basis: calc((100% - var(--s3) * 2) / 3); } }
@media (min-width: 1024px) {
  .rail-track { max-width: calc(1320px + var(--gut) * 2); margin: 0 auto; }
  .rail-track > .card { flex-basis: calc((100% - var(--s3) * 3) / 4); scroll-snap-align: start; }
}
.rail-ctrl { display: flex; justify-content: center; align-items: center; gap: var(--s2); margin-top: var(--s4); }

/* Custom order story */
.story { padding: var(--s12) 0; }
.story-stage { position: relative; display: grid; justify-items: center; }
.story-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 960px; position: relative; z-index: 1; }
.story-step { display: grid; justify-items: center; gap: var(--s1); text-align: center; color: var(--ink-2); transition: color .4s var(--ease); }
.story-n { position: relative; isolation: isolate; width: 48px; height: 48px; display: grid; place-items: center; font: 800 20px/1 var(--serif); }
.story-n::before { content: ''; position: absolute; inset: 8px; z-index: -1; border: 1px solid var(--line-2); background: var(--ivory); transform: rotate(45deg); transition: background .4s, border-color .4s; }
.story-step.is-on .story-n { color: var(--ivory); }
.story-step.is-on .story-n::before { background: var(--maroon); border-color: var(--maroon); }
.story-t { font: 700 16px/1.3 var(--sans); max-width: 180px; }
.story-step.is-on { color: var(--maroon); }
.story-stitch { position: absolute; top: 20px; left: 50%; width: 100%; max-width: 960px; height: 8px; transform: translateX(-50%); overflow: visible; }
.story-stitch path { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 6 6; }
.story-media { position: relative; width: 100%; max-width: 420px; aspect-ratio: 4 / 5; margin-top: var(--s6); overflow: hidden; background: var(--ivory-2); }
.story-img { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); }
.story-img.is-on { opacity: 1; }
.story-img img { width: 100%; height: 100%; object-fit: cover; }
.story-copy { position: relative; width: 100%; max-width: 560px; margin-top: var(--s4); text-align: center; min-height: 104px; }
.story-p { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); font-size: 18px; color: var(--ink-2); }
.story-p.is-on { opacity: 1; transform: none; position: relative; }
.no-js .story-img, .rm .story-img { opacity: 1; position: relative; }
.no-js .story-media, .rm .story-media { aspect-ratio: auto; max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); background: none; }
.no-js .story-p, .rm .story-p { opacity: 1; position: relative; transform: none; margin-bottom: var(--s2); }
@media (max-width: 767px) {
  .story-t { font-size: 14px; }
  .no-js .story-media, .rm .story-media { grid-template-columns: minmax(0, 1fr); }
}

/* Real weddings lookbook: five mirrored columns */
.look { padding: var(--s12) 0; background: var(--ivory-2); overflow: hidden; }
.look-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.look-col { display: contents; }
.look-item a { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ivory); }
.look-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-o); }
.look-item a:hover img { transform: scale(1.04); }
.look-item figcaption { padding-top: var(--s1); display: grid; gap: 2px; }
.look-occ { font: 700 12px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--maroon); }
@media (min-width: 1024px) {
  .look-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s3); align-items: start; }
  .look-col { display: grid; gap: var(--s4); }
  .look-c1, .look-c3 { margin-top: var(--s12); }
  .look-c2 { margin-top: var(--s6); }
}
.lb-grid .lb-media { display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.lb-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-o); }
.lb-grid .lb-media:hover img { transform: scale(1.04); }
.lb-item figcaption { padding-top: var(--s1); display: grid; gap: 2px; }

/* Visit */
.visit { padding: var(--s12) 0; }
.visit-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
@media (min-width: 768px) { .visit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.visit-img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--ivory-2); }
.visit-img img { width: 100%; height: 100%; object-fit: cover; }
.map { position: relative; aspect-ratio: 4 / 5; background: var(--paper); border: 1px solid var(--line); overflow: hidden; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-facade { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s2); text-align: center; padding: var(--s3); background: repeating-linear-gradient(0deg, transparent 0 47px, rgba(176, 138, 62, .18) 47px 48px), repeating-linear-gradient(90deg, transparent 0 47px, rgba(176, 138, 62, .18) 47px 48px), var(--paper); }
.map-facade .ico { width: 48px; height: 48px; color: var(--maroon); }
.map-t { font: 700 22px/1.3 var(--serif); color: var(--maroon); }
.map-note { font-size: 13px; color: var(--ink-2); }
.visit-facts { display: grid; grid-template-columns: minmax(0, 1fr); text-align: center; margin-top: var(--s6); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.visit-facts > div { padding: var(--s3) var(--s2); }
.visit-facts > div + div { border-top: 1px solid var(--line); }
.visit-facts dd { margin-top: var(--s1); }
@media (min-width: 768px) {
  .visit-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .visit-facts-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .visit-facts > div + div { border-top: 0; border-left: 1px solid var(--line); }
  .visit-facts-4 > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .visit-facts-4 > div:nth-child(4) { border-top: 1px solid var(--line); }
}
@media (min-width: 1024px) { .visit-facts-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .visit-facts-4 > div:nth-child(n+3) { border-top: 0; border-left: 1px solid var(--line); } }

/* Instagram grid */
.ig { padding: var(--s12) 0; background: var(--ivory-2); }
.ig-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); }
@media (min-width: 1024px) { .ig-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s2); } }
.ig-grid a { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.ig-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-o); }
.ig-hover { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(91, 15, 30, .55); color: var(--ivory); opacity: 0; transition: opacity .3s; }
.ig-grid a:hover .ig-hover, .ig-grid a:focus-visible .ig-hover { opacity: 1; }
.ig-grid a:hover img { transform: scale(1.04); }

/* Newsletter */
.news { padding: var(--s12) 0; }
.news-box { max-width: 720px; margin: 0 auto; text-align: center; }
.news-form { text-align: left; max-width: 560px; margin: 0 auto; }
.news-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
@media (min-width: 640px) { .news-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }
.news-form .check { margin-top: var(--s2); }
.news-form .fine { margin-top: var(--s2); text-align: center; }

/* Fields: floating labels, inline validation */
.fld { position: relative; }
.fld input, .fld select, .fld textarea { width: 100%; height: var(--ctl); padding: 16px var(--s2) 0; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper); font-size: 16px; font-weight: 500; transition: border-color .2s, box-shadow .2s; appearance: none; }
.fld textarea { height: auto; min-height: 120px; padding-top: 24px; resize: vertical; line-height: 1.5; }
.fld select { padding-right: var(--s6); background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231A1414' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center / 12px; }
.fld input[type="date"] { padding-right: var(--s2); }
.fld label { position: absolute; left: var(--s2); top: 14px; font-size: 16px; color: var(--ink-2); pointer-events: none; transform-origin: 0 0; transition: transform .25s var(--ease-o), color .2s; white-space: nowrap; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; }
.fld .opt { font-size: 13px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--maroon); box-shadow: 0 0 0 2px var(--ivory), 0 0 0 4px var(--gold); }
.fld input:focus + label, .fld input:not(:placeholder-shown) + label, .fld textarea:focus + label, .fld textarea:not(:placeholder-shown) + label, .fld-select.has-value label, .fld select:focus + label, .fld input[type="date"] + label, .fld input[type="file"] + label { transform: translateY(-9px) scale(.72); color: var(--maroon); font-weight: 700; }
.fld-ok { position: absolute; right: 12px; top: 12px; width: 24px; height: 24px; fill: none; stroke: var(--emerald); stroke-width: 2; stroke-dasharray: 3 2.2; stroke-dashoffset: 30; opacity: 0; transition: stroke-dashoffset .6s var(--ease-o), opacity .2s; pointer-events: none; }
.fld-select .fld-ok { right: 40px; }
.fld.is-valid .fld-ok { opacity: 1; stroke-dashoffset: 0; }
.fld.is-invalid input, .fld.is-invalid select, .fld.is-invalid textarea { border-color: var(--error); }
.fld.shake, .check.shake, .opt-group.shake { animation: shake .4s var(--ease); }
@keyframes shake { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
.rm .shake { animation: none; }
.err { color: var(--error); font-size: 14px; font-weight: 700; margin-top: 4px; }
.err:empty { display: none; }
.hint { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.check { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; }
.check input { width: 24px; height: 24px; margin: 0; appearance: none; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper); display: grid; place-items: center; cursor: pointer; margin-top: 1px; }
.check input::after { content: ''; width: 12px; height: 7px; border-left: 2px solid var(--ivory); border-bottom: 2px solid var(--ivory); transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .2s var(--ease-o); }
.check input:checked { background: var(--maroon); border-color: var(--maroon); }
.check input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.check label { font-size: 15px; cursor: pointer; }
.check .err { grid-column: 2; }
.form { display: grid; gap: var(--s3); }
.form-sec { display: grid; gap: var(--s2); }
.form-sec > .label, .form-sec > legend { margin-bottom: var(--s2); }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
@media (min-width: 640px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.form-status:empty { display: none; }
.form-status { padding: var(--s3); border: 1px solid var(--emerald); background: #EAF2EE; border-radius: var(--r); text-align: center; }
.form-status.is-error { border-color: var(--error); background: #FBEDEE; }
.nojs-box { padding: var(--s3); border: 1px solid var(--gold); background: var(--paper); border-radius: var(--r); max-width: 720px; margin: 0 auto var(--s4); }
.nojs-box ul { margin-top: var(--s2); display: grid; gap: var(--s1); }

.upload-drop { display: grid; justify-items: center; gap: 4px; padding: var(--s4); border: 1px dashed var(--gold); border-radius: var(--r); background: var(--paper); text-align: center; cursor: pointer; font-weight: 700; }
.upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload input:focus-visible + .upload-drop { outline: 2px solid var(--gold); outline-offset: 3px; }
.upload-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s1); margin-top: var(--s2); }
.upload-list li { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r); background: var(--ivory-2); }
.upload-list img { width: 100%; height: 100%; object-fit: cover; }
.upload-list button { position: absolute; top: 0; right: 0; width: 32px; height: 32px; background: rgba(251, 247, 240, .9); display: grid; place-items: center; }
.upload-list .ico { width: 16px; height: 16px; }

/* Shop */
.shop { padding: 0 0 var(--s12); }
.cat-links ul { display: flex; gap: var(--s1); overflow-x: auto; padding-bottom: var(--s1); scrollbar-width: none; justify-content: flex-start; }
.cat-links ul::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .cat-links ul { flex-wrap: wrap; justify-content: center; overflow: visible; } }
.toolbar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s2); margin-top: var(--s4); padding-block: var(--s2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.result-count { font-size: 15px; }
.sort { display: none; }
@media (min-width: 1024px) {
  .toolbar { grid-template-columns: 1fr auto 1fr; }
  .sort { display: flex; align-items: center; gap: var(--s2); justify-self: center; }
  .grid-toggle { display: flex !important; justify-self: end; gap: 4px; }
}
.sort select, .est select { height: 48px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231A1414' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center / 12px; padding: 0 var(--s6) 0 var(--s2); font-weight: 700; appearance: none; }
.grid-toggle button { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid transparent; border-radius: var(--r); color: var(--ink-2); }
.grid-toggle button[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }
.filters { display: grid; gap: 0; }
@media (min-width: 1024px) {
  .sheet { margin-top: var(--s2); }
  .filters { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s1); }
  .flt { position: relative; }
  .flt-body { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 20; min-width: 240px; max-height: 400px; overflow: auto; background: var(--paper); border: 1px solid var(--line-2); box-shadow: 0 16px 32px rgba(26, 20, 20, .1); padding: var(--s2); border-radius: var(--r); }
}
.flt-sum { display: flex; align-items: center; gap: var(--s1); height: var(--ctl); padding: 0 var(--s2); border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper); font: 700 14px var(--sans); cursor: pointer; list-style: none; }
.flt-sum::-webkit-details-marker { display: none; }
.flt[open] .flt-sum { border-color: var(--maroon); color: var(--maroon); }
.flt-ico { width: 16px; height: 16px; transition: transform .3s var(--ease-o); }
.flt[open] .flt-ico { transform: rotate(45deg); }
.flt-n:empty { display: none; }
.flt-n { min-width: 20px; height: 20px; border-radius: 10px; background: var(--maroon); color: var(--ivory); font-size: 11px; display: grid; place-items: center; padding: 0 6px; }
.flt-opt { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; font-weight: 600; }
.flt-opt input { width: 20px; height: 20px; accent-color: var(--maroon); margin: 0; }
.applied { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s1); margin-top: var(--s2); }
.applied:empty { display: none; }
.applied .chip .ico { width: 16px; height: 16px; }
.price-note { text-align: center; font-size: 14px; color: var(--ink-2); margin: var(--s3) 0 var(--s4); }
.more { display: grid; justify-items: center; gap: var(--s2); margin-top: var(--s8); }
.more-t { font-size: 14px; color: var(--ink-2); }
.more-bar { width: 240px; height: 1px; background: var(--line-2); position: relative; }
.more-bar span { position: absolute; inset: 0; background: var(--maroon); transform-origin: 50% 50%; transform: scaleX(var(--p, 0)); transition: transform .6s var(--ease-o); }
.empty { display: grid; justify-items: center; gap: var(--s2); text-align: center; padding: var(--s8) var(--s2); max-width: 640px; margin: 0 auto; }
.empty-dia { width: 32px; height: 32px; }
@media (max-width: 1023px) {
  .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; max-height: 86vh; display: flex; flex-direction: column; background: var(--ivory); border-radius: 8px 8px 0 0; box-shadow: 0 -16px 48px rgba(26, 20, 20, .18); transform: translateY(105%); transition: transform .5s var(--ease-o); visibility: hidden; }
  .sheet.is-open { transform: translateY(0); visibility: visible; }
  .sheet-handle { display: grid; place-items: center; height: 32px; cursor: grab; touch-action: none; }
  .sheet-handle span { width: 48px; height: 4px; border-radius: 2px; background: var(--line-2); }
  .sheet-head { display: flex !important; justify-content: space-between; align-items: center; padding: 0 var(--s2) var(--s1); }
  .filters { overflow: auto; padding: 0 var(--s2); flex: 1; }
  .flt { border-bottom: 1px solid var(--line); }
  .flt-sum { border: 0; padding: 0; background: none; justify-content: space-between; height: 56px; }
  .flt-body { padding-bottom: var(--s2); }
  .sheet-foot { display: grid !important; grid-template-columns: 1fr 1fr; gap: var(--s1); padding: var(--s2); border-top: 1px solid var(--line); }
}

/* Product page */
.prod { padding: var(--s3) 0 var(--s12); }
.prod-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
@media (min-width: 1024px) { .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); align-items: start; } .pinfo { position: sticky; top: calc(var(--top-h) - var(--ann-h) + var(--s3)); padding-left: var(--s6); } }
.gal-main { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ivory-2); }
.gal-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease); }
.gal-slide.is-on { opacity: 1; z-index: 1; }
.gal-slide img, .gal-slide video { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) {
  .gal-main { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gut) * -1); aspect-ratio: auto; }
  .gal-main::-webkit-scrollbar { display: none; }
  .gal-slide { position: relative; flex: 0 0 100%; opacity: 1; aspect-ratio: 4 / 5; scroll-snap-align: center; }
}
.lens { position: absolute; z-index: 5; width: 192px; height: 192px; border-radius: 50%; border: 1px solid var(--gold); box-shadow: 0 0 0 4px rgba(251, 247, 240, .7), 0 16px 32px rgba(26, 20, 20, .25); background-repeat: no-repeat; pointer-events: none; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .3s var(--ease-o); }
.lens.is-on { opacity: 1; transform: scale(1); }
.gal-thumbs { display: flex; justify-content: center; gap: var(--s1); margin-top: var(--s2); }
.gal-thumb { position: relative; width: 64px; aspect-ratio: 4 / 5; overflow: hidden; opacity: .6; transition: opacity .3s; }
.gal-thumb picture, .gal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gal-thumb::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--maroon); clip-path: inset(0 50% 0 50%); transition: clip-path .4s var(--ease-o); }
.gal-thumb.is-on { opacity: 1; }
.gal-thumb.is-on::after { clip-path: inset(0 0 0 0); }
.gal-thumb-video span { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(26, 20, 20, .35); color: var(--ivory); }
.gal-thumb-video .ico { fill: currentColor; stroke: none; }
@media (min-width: 1024px) { .gal-thumb { width: 96px; } }
.gal-credit { margin-top: var(--s2); text-align: center; }
.gal-credit a { color: var(--maroon); font-weight: 700; }
.pinfo .eyebrow { margin-bottom: var(--s1); }
.pprice { margin-top: var(--s2); }
.pprice .price { font-size: 20px; }
.psum { margin-top: var(--s2); color: var(--ink-2); }
.pform { margin-top: var(--s3); display: grid; gap: var(--s3); }
.opt-group { display: grid; gap: var(--s1); }
.opt-group legend { display: flex; align-items: center; gap: var(--s1); width: 100%; margin-bottom: var(--s1); }
.opt-group legend .linkish { margin-left: auto; }
.opt-group legend [data-colour-name] { color: var(--ink); }
.swatch-row, .size-row { display: flex; flex-wrap: wrap; gap: var(--s1); }
.swatch-opt { position: relative; width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer; }
.swatch-opt input, .size-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw-lg { width: 32px; height: 32px; transition: box-shadow .2s; }
.swatch-opt input:checked + .sw-lg { box-shadow: inset 0 0 0 1px rgba(26, 20, 20, .25), 0 0 0 3px var(--ivory), 0 0 0 4px var(--ink); }
.swatch-opt input:focus-visible + .sw-lg, .size-opt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
.size-opt span { display: grid; place-items: center; min-width: 48px; height: 48px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r); font: 700 14px var(--sans); cursor: pointer; transition: background .2s, color .2s, transform .2s var(--ease-o); }
.size-opt input:checked + span { background: var(--maroon); color: var(--ivory); border-color: var(--maroon); }
.size-opt:hover span { border-color: var(--ink); }
.custom-colour summary, .acc-item summary { list-style: none; cursor: pointer; }
.custom-colour summary::-webkit-details-marker, .acc-item summary::-webkit-details-marker { display: none; }
.custom-colour summary { display: inline-flex; align-items: center; gap: var(--s1); min-height: 48px; font-weight: 700; color: var(--maroon); }
.custom-colour summary .ico { width: 18px; height: 18px; transition: transform .3s var(--ease-o); }
.custom-colour[open] summary .ico { transform: rotate(45deg); }
.meas { display: grid; gap: var(--s2); padding: var(--s3); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.meas-t { font-size: 15px; }
.meas-t a { color: var(--maroon); font-weight: 700; }
.meas-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.stock, .deliv { display: flex; align-items: center; gap: var(--s1); font-size: 15px; font-weight: 600; }
.stock-in { color: var(--emerald); }
.deliv .ico { width: 20px; height: 20px; flex: none; }
.buy-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s1); }
.buy-row2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
@media (min-width: 480px) { .buy-row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.buy-row2 .btn { padding: 0 var(--s2); }
.qty { display: flex; height: 48px; border: 1px solid var(--line-2); border-radius: var(--r); }
.qty button { width: 40px; display: grid; place-items: center; }
.qty .ico { width: 16px; height: 16px; }
.qty input { width: 40px; border: 0; text-align: center; font-weight: 700; background: transparent; -moz-appearance: textfield; appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.acc { margin-top: var(--s4); border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 64px; font: 700 17px/1.3 var(--sans); }
.acc-item summary .ico { width: 20px; height: 20px; flex: none; transition: transform .4s var(--ease-o); }
.acc-item[open] summary .ico { transform: rotate(45deg); }
.acc-body { padding-bottom: var(--s3); color: var(--ink-2); }
.acc-body a { color: var(--maroon); font-weight: 700; }
.acc-faq .acc-item summary { font: 700 20px/1.3 var(--serif); color: var(--ink); }
.spec { display: grid; gap: var(--s1); }
.spec > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s2); }
.spec dt { font-weight: 700; color: var(--ink); }
.ctl, .related, .recent { padding: var(--s12) 0; }
.ctl { background: var(--ivory-2); }
.satc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--ivory); border-top: 1px solid var(--line); padding: var(--s1) var(--gut); padding-bottom: max(var(--s1), env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform .45s var(--ease-o); }
.satc.is-on { transform: translateY(0); }
.satc-in { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--s2); align-items: center; }
.satc-img { width: 40px; aspect-ratio: 4 / 5; overflow: hidden; }
.satc-img img { width: 100%; height: 100%; object-fit: cover; }
.satc-t { display: grid; font-size: 14px; font-weight: 700; min-width: 0; }
.satc-t > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.satc .price { font-size: 13px; }
@media (min-width: 1024px) { .satc { display: none; } }

/* Modal */
.modal { width: min(760px, calc(100% - 32px)); max-height: calc(100vh - 64px); padding: 0; border: 0; border-radius: var(--r); background: var(--ivory); color: var(--ink); box-shadow: 0 32px 64px rgba(26, 20, 20, .3); }
.modal::backdrop { background: rgba(26, 20, 20, .55); }
.modal[open] { animation: modalIn .45s var(--ease-o); }
@keyframes modalIn { from { opacity: 0; transform: scale(.96); } }
.modal-in { padding: var(--s4); display: grid; gap: var(--s3); }
.modal-head { display: flex; justify-content: space-between; align-items: center; }
.modal-in a { color: var(--maroon); font-weight: 700; }
.table-wrap { overflow-x: auto; }
.size-table, .policy-table { width: 100%; border-collapse: collapse; font-size: 15px; text-align: center; }
.size-table caption { caption-side: bottom; padding-top: var(--s2); font-size: 14px; color: var(--ink-2); }
.size-table th, .size-table td, .policy-table th, .policy-table td { border-bottom: 1px solid var(--line); padding: 12px var(--s1); }
.size-table thead th, .policy-table thead th { font: 700 12px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--maroon); border-bottom-color: var(--gold); }
.size-table tbody th { font-weight: 700; }
.tbc-cell { font-size: 10px; padding: 0 4px; }
.policy-table { text-align: left; margin-top: var(--s2); }

/* Size guide diagrams */
.dg-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
@media (min-width: 640px) { .dg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .dg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6) var(--s3); } }
.dg { display: grid; justify-items: center; text-align: center; gap: var(--s2); padding: var(--s4) var(--s3); background: var(--paper); border: 1px solid var(--line); }
.dg svg { width: 160px; height: 200px; overflow: visible; }
.dg-o { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.dg-m { fill: none; stroke: var(--maroon); stroke-width: 2.5; stroke-linecap: round; }
.dg p { color: var(--ink-2); font-size: 15px; }

/* About, contact */
.about-grid, .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
@media (min-width: 1024px) { .about-grid, .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); align-items: start; } .about-grid .prose, .contact-grid .form { padding-left: var(--s6); } }
.about-img { aspect-ratio: 4 / 5; overflow: hidden; }
.about-img img { width: 100%; height: 100%; object-fit: cover; }
.contact-list { display: grid; border-top: 1px solid var(--line); }
.contact-list li { display: grid; gap: 4px; padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.contact-list a { color: var(--maroon); font-weight: 700; font-size: 19px; }
.steps3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); text-align: center; }
@media (min-width: 1024px) { .steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); } }
.steps3 li { display: grid; justify-items: center; gap: var(--s2); }
.steps3 picture { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; }
.steps3 img { width: 100%; height: 100%; object-fit: cover; }
.step-n { width: 48px; height: 48px; display: grid; place-items: center; background: var(--maroon); color: var(--ivory); font: 800 20px var(--serif); margin-top: calc(var(--s3) * -1 - 8px); position: relative; outline: 4px solid var(--ivory); }
.steps3 p { color: var(--ink-2); max-width: 360px; }
.policy .toc { padding: var(--s3); border: 1px solid var(--line); background: var(--paper); margin-bottom: var(--s6); }
.policy .toc ol { list-style: decimal; padding-left: var(--s3); margin-top: var(--s1); display: grid; gap: 4px; }

/* Cart drawer, search, mobile nav, scrim */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(26, 20, 20, .5); opacity: 0; transition: opacity .4s var(--ease); }
.scrim.is-on { opacity: 1; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 65; width: min(440px, 100%); background: var(--ivory); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .55s var(--ease-o); box-shadow: -24px 0 48px rgba(26, 20, 20, .15); }
.drawer.is-open { transform: translateX(0); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
.drawer-title { font: 800 28px/1 var(--serif); color: var(--maroon); }
.drawer-body { flex: 1; overflow: auto; padding: 0 var(--s3); overscroll-behavior: contain; }
.drawer-foot { padding: var(--s3); border-top: 1px solid var(--line); display: grid; gap: var(--s1); }
.ship-bar { padding: var(--s2) var(--s3); display: grid; gap: var(--s1); font-size: 14px; text-align: center; }
.ship-bar:empty { display: none; }
.ship-track { position: relative; height: 4px; background: var(--ivory-2); border-radius: 2px; overflow: hidden; }
.ship-track span { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--emerald) 0 8px, #2B7A5C 8px 16px); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform .9s var(--ease-o); }
.line-item { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: var(--s2); padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.line-img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--ivory-2); }
.line-img img { width: 100%; height: 100%; object-fit: cover; }
.line-t { font: 700 17px/1.25 var(--serif); }
.line-t a { text-decoration: none; }
.line-meta { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.line-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); margin-top: var(--s1); }
.line-row .qty { height: 40px; }
.line-rm { font-size: 13px; font-weight: 700; color: var(--ink-2); text-decoration: underline; min-height: 40px; }
.sum-lines { display: grid; gap: var(--s1); }
.sum-lines > div { display: flex; justify-content: space-between; gap: var(--s2); }
.sum-lines .sum-total { font-weight: 700; font-size: 19px; padding-top: var(--s1); border-top: 1px solid var(--line); }
.empty-cart { display: grid; justify-items: center; gap: var(--s2); text-align: center; padding: var(--s8) 0; }
.empty-cart svg { width: 96px; height: 96px; }
.empty-cart .es-o { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.empty-cart .es-g { fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-dasharray: 3 3; }
.search { position: fixed; inset: 0 0 auto; z-index: 66; background: var(--ivory); max-height: 100vh; overflow: auto; clip-path: inset(0 0 100% 0); transition: clip-path .55s var(--ease-o); box-shadow: 0 24px 48px rgba(26, 20, 20, .15); }
.search.is-open { clip-path: inset(0 0 0 0); }
.search-inner { padding-block: var(--s3) var(--s6); }
.search-form { display: grid; grid-template-columns: 24px minmax(0, 1fr) 48px; align-items: center; gap: var(--s2); border-bottom: 1px solid var(--ink); }
.search-form input { height: 64px; border: 0; background: transparent; font: 700 clamp(20px, 3vw, 32px)/1 var(--serif); outline: none; width: 100%; }
.search-suggest { margin-top: var(--s3); }
.search-suggest .label { margin-bottom: var(--s1); }
.search-count { margin-top: var(--s3); font-size: 14px; color: var(--ink-2); }
.search-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s2); margin-top: var(--s2); }
@media (min-width: 1024px) { .search-results { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); } }
.sr-card { display: grid; gap: var(--s1); text-decoration: none; }
.sr-card .sr-img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--ivory-2); }
.sr-card img { width: 100%; height: 100%; object-fit: cover; }
.sr-card strong { font: 700 17px/1.25 var(--serif); }
.sr-card span { font-size: 13px; color: var(--ink-2); }
.mnav { position: fixed; inset: 0; z-index: 66; background: var(--ivory); overflow: auto; padding: var(--s2) var(--gut) var(--s6); clip-path: inset(0 50% 0 50%); transition: clip-path .6s var(--ease-o); }
.mnav.is-open { clip-path: inset(0 0 0 0); }
.mnav-head { display: flex; justify-content: space-between; align-items: center; }
.mnav-main { margin-top: var(--s3); border-top: 1px solid var(--line); }
.mnav-main a { display: flex; align-items: center; min-height: 64px; border-bottom: 1px solid var(--line); font: 800 28px/1 var(--serif); color: var(--maroon); text-decoration: none; }
.mnav-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s4); }
.mnav-cols a { display: block; padding: 10px 0; font-weight: 600; text-decoration: none; }
.mnav-foot { display: flex; justify-content: space-between; align-items: center; margin-top: var(--s4); padding-top: var(--s2); border-top: 1px solid var(--line); }
.mnav-foot a { font-weight: 700; min-height: 48px; display: inline-flex; align-items: center; }
.mnav-foot .cur { display: flex; align-items: center; gap: var(--s1); font-weight: 700; }

/* Toasts, floats, cookie */
.toasts { position: fixed; left: 50%; bottom: var(--s3); z-index: 90; transform: translateX(-50%); display: grid; gap: var(--s1); width: min(440px, calc(100% - 32px)); pointer-events: none; }
.toast { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s2); padding: 12px var(--s2); background: var(--ink); color: var(--ivory); border-radius: var(--r); box-shadow: 0 16px 32px rgba(26, 20, 20, .3); pointer-events: auto; animation: toastIn .5s var(--ease-o); }
.toast.out { animation: toastOut .4s var(--ease) forwards; }
.toast img { width: 40px; aspect-ratio: 4 / 5; object-fit: cover; }
.toast .dia { stroke: #D9B66A; width: 14px; height: 14px; }
.toast a { color: #F3D9A0; font-weight: 700; }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px); } }
.wa-float { position: fixed; right: var(--s2); bottom: var(--s2); z-index: 45; display: flex; align-items: center; gap: var(--s1); height: 56px; padding: 0 16px; border-radius: 28px; background: var(--emerald); color: var(--ivory); text-decoration: none; font: 700 14px var(--sans); box-shadow: 0 12px 24px rgba(15, 77, 58, .35); transition: transform .3s var(--ease-o), opacity .3s; }
.wa-float:hover { color: var(--ivory); transform: translateY(-2px); }
.wa-float .ico { width: 24px; height: 24px; }
.wa-float span { display: none; }
@media (min-width: 1024px) { .wa-float { right: var(--s3); bottom: var(--s3); } .wa-float span { display: inline; } }
.sticky-book { position: fixed; left: 50%; bottom: var(--s2); z-index: 44; transform: translate(-50%, 0); display: inline-flex; align-items: center; gap: var(--s1); height: 48px; padding: 0 var(--s3); border-radius: 24px; background: var(--maroon); color: var(--ivory); font: 700 13px var(--sans); text-transform: uppercase; letter-spacing: .08em; text-decoration: none; box-shadow: 0 12px 24px rgba(91, 15, 30, .3); transition: transform .4s var(--ease-o); }
.sticky-book:hover { color: var(--ivory); }
.sticky-book .ico { width: 20px; height: 20px; }
.sticky-book.is-off { transform: translate(-50%, 160%); }
@media (min-width: 1024px) { .sticky-book { display: none; } }
.product-page .sticky-book, .book-page .sticky-book, .checkout-page .sticky-book, .cart-page-b .sticky-book { display: none; }
@media (max-width: 1023px) { .product-page .wa-float { bottom: 80px; } }
.cookie { position: fixed; left: 50%; bottom: var(--s2); z-index: 92; transform: translateX(-50%); width: min(720px, calc(100% - 32px)); padding: var(--s3); background: var(--paper); border: 1px solid var(--gold); border-radius: var(--r); box-shadow: 0 24px 48px rgba(26, 20, 20, .2); display: grid; gap: var(--s2); text-align: center; font-size: 15px; }
.cookie a { color: var(--maroon); font-weight: 700; }
.cookie-btns { display: flex; justify-content: center; gap: var(--s1); flex-wrap: wrap; }

/* Page transition panels and opening reveal */
.tx { position: fixed; inset: 0; z-index: 9990; pointer-events: none; }
.tx-panel { position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--maroon); transform: scaleX(0); }
.tx-l { left: 0; transform-origin: 0 50%; }
.tx-r { right: 0; transform-origin: 100% 50%; }
.tx-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(100% - 32px); max-width: 960px; text-align: center; font: 800 clamp(32px, 6vw, 72px)/1.05 var(--serif); letter-spacing: -.02em; color: var(--ivory); opacity: 0; }
.tx-in .tx-panel { transform: scaleX(1); }
.tx-in .tx-title { opacity: 1; }
.rm .tx { display: none; }
.intro-ov { display: none; }
.intro .intro-ov { display: block; position: fixed; inset: 0; z-index: 9995; }
.intro-panel { position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--ivory); }
.intro-l { left: 0; }
.intro-r { right: 0; }
.intro-mark { position: absolute; left: 50%; top: 50%; width: 160px; height: 120px; transform: translate(-50%, -50%); overflow: visible; }
.intro-stroke, .intro-rule { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.intro-rule { stroke-width: 1.5; stroke-dasharray: 4 4; }
.intro-skip { position: absolute; left: 50%; bottom: var(--s6); transform: translateX(-50%); height: 48px; padding: 0 var(--s3); font: 700 13px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.cursor-view { position: fixed; left: 0; top: 0; z-index: 80; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--maroon); color: var(--ivory); display: none; place-items: center; font: 700 12px var(--sans); text-transform: uppercase; letter-spacing: .08em; pointer-events: none; transform: scale(0); }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) { .motion .cursor-view { display: grid; } }

/* Booking */
.book { max-width: 1080px; margin: 0 auto; }
.bk-progress { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--s6); }
.bk-node { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--s1); text-align: center; color: var(--ink-2); }
.bk-dot { width: 40px; height: 40px; display: grid; place-items: center; background: var(--ivory); }
.bk-dot .dia { width: 20px; height: 20px; transition: fill .3s; }
.bk-node.is-on .dia, .bk-node.is-done .dia { fill: var(--maroon); stroke: var(--maroon); }
.bk-node.is-on { color: var(--maroon); }
.bk-label { font: 700 12px var(--sans); text-transform: uppercase; letter-spacing: .08em; }
.bk-stitch { position: absolute; left: 12.5%; right: 12.5%; top: 20px; height: 1px; background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 12px); }
.bk-stitch span { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 12px); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform .7s var(--ease-o); }
.bk-viewport { overflow: hidden; }
.bk-track { display: flex; transition: transform .6s var(--ease-o); }
.bk-step { flex: 0 0 100%; min-width: 0; padding: 4px; }
.bk-step legend { margin-bottom: var(--s3); text-align: center; width: 100%; }
.svc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
@media (min-width: 768px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc { position: relative; cursor: pointer; }
.svc input { position: absolute; opacity: 0; }
.svc-in { display: grid; gap: var(--s1); height: 100%; padding: var(--s3); border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper); transition: border-color .2s, box-shadow .2s; }
.svc-t { font: 700 20px/1.2 var(--serif); color: var(--maroon); }
.svc-s { font-size: 15px; color: var(--ink-2); }
.svc-d { font-size: 13px; font-weight: 700; margin-top: auto; }
.svc input:checked + .svc-in { border-color: var(--maroon); box-shadow: inset 0 0 0 1px var(--maroon); }
.svc input:focus-visible + .svc-in { outline: 2px solid var(--gold); outline-offset: 3px; }
.cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
@media (min-width: 1024px) { .cal-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); } }
.cal { background: var(--paper); border: 1px solid var(--line); padding: var(--s2); }
.cal-head { display: flex; align-items: center; justify-content: space-between; }
.cal-month { font: 700 20px var(--serif); }
.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; }
.cal-dow { font: 700 11px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); padding: var(--s1) 0; }
.cal-day { height: 48px; border-radius: var(--r); font-weight: 700; transition: background .2s, color .2s; }
.cal-day:disabled { color: rgba(26, 20, 20, .3); cursor: default; }
.cal-day:not(:disabled):hover { background: var(--ivory-2); }
.cal-day[aria-pressed="true"] { background: var(--maroon); color: var(--ivory); }
.cal-day.is-today { box-shadow: inset 0 -2px 0 var(--gold); }
.slots { display: grid; gap: var(--s2); align-content: start; }
.slot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); }
.slot { height: 48px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper); font-weight: 700; transition: background .2s, color .2s; }
.slot[aria-checked="true"] { background: var(--maroon); color: var(--ivory); border-color: var(--maroon); animation: pop .4s var(--ease-o); }
@keyframes pop { 50% { transform: scale(1.06); } }
.bk-nav { display: flex; justify-content: center; gap: var(--s2); margin-top: var(--s4); }
.bk-review { display: grid; gap: 0; border-top: 1px solid var(--line); max-width: 640px; margin: 0 auto; text-align: left; }
.bk-review > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--s2); padding: 12px 0; border-bottom: 1px solid var(--line); }
.bk-review dt { font-weight: 700; }
.bk-done { text-align: center; display: grid; justify-items: center; gap: var(--s2); }
.bk-done:focus { outline: none; }
.tick { width: 96px; height: 96px; }
.tick circle, .tick path { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tick path { stroke: var(--emerald); stroke-width: 3; }

/* Cart page, checkout, account */
.cart-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
.co { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
@media (min-width: 1024px) { .cart-page, .co { grid-template-columns: 7fr 5fr; gap: var(--s3); align-items: start; } .summary { position: sticky; top: calc(var(--top-h) - var(--ann-h) + var(--s3)); } }
.summary { background: var(--paper); border: 1px solid var(--line); padding: var(--s3); display: grid; gap: var(--s3); }
.cart-lines .line-item { grid-template-columns: 112px minmax(0, 1fr); }
.promo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1); align-items: start; }
.est { display: grid; gap: var(--s1); }
.ship-methods { display: grid; gap: var(--s1); }
.ship-opt { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 56px; padding: 0 var(--s2); border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper); cursor: pointer; }
.ship-opt input { accent-color: var(--maroon); width: 20px; height: 20px; margin: 0; }
.ship-opt:has(input:checked) { border-color: var(--maroon); box-shadow: inset 0 0 0 1px var(--maroon); }
.ship-t { font-weight: 700; }
.ship-p { font-size: 14px; text-align: right; }
.pay-box { padding: var(--s3); border: 1px dashed var(--gold); background: var(--paper); display: grid; gap: var(--s1); }
.co-items { display: grid; }
.co-items .line-item { grid-template-columns: 64px minmax(0, 1fr); }
.conf { min-height: 60vh; }
.conf-box { margin: var(--s4) auto 0; max-width: 560px; text-align: left; }
.acct-auth { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
@media (min-width: 1024px) { .acct-auth { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); } .acct-track { padding-left: var(--s6); border-left: 1px solid var(--line); } }
.acct-form { max-width: 520px; }
.track-out { margin-top: var(--s3); }
.acct-hello { text-align: center; margin-bottom: var(--s4); }
.tabs { position: relative; display: flex; justify-content: center; gap: 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs button { height: 48px; padding: 0 var(--s2); font: 700 14px var(--sans); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; color: var(--ink-2); }
.tabs button[aria-selected="true"] { color: var(--maroon); }
.tab-ink { position: absolute; bottom: -1px; left: 0; height: 2px; width: 1px; background: var(--maroon); transform-origin: 0 0; transition: transform .45s var(--ease-o); }
.tab-panel { padding-top: var(--s4); }
.order-card { border: 1px solid var(--line); background: var(--paper); padding: var(--s3); display: grid; gap: var(--s1); margin-bottom: var(--s2); }
.order-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s1); font-weight: 700; }
.track-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: var(--s2); text-align: center; font-size: 12px; font-weight: 700; }
.track-steps li { padding-top: var(--s2); border-top: 3px solid var(--line); }
.track-steps li.is-done { border-color: var(--emerald); color: var(--emerald); }
.addr-list { display: grid; gap: var(--s1); margin-bottom: var(--s4); }
.addr-list li { padding: var(--s2); border: 1px solid var(--line); background: var(--paper); display: flex; justify-content: space-between; gap: var(--s2); }

/* 404 */
.nf { padding: var(--s8) 0 var(--s12); }
.nf-thread { width: 120px; height: 156px; margin: 0 auto var(--s4); overflow: visible; }
.nf-line, .nf-node { fill: none; stroke: var(--gold); stroke-width: 1.5; }
.nf-broken { stroke-dasharray: 4 4; }
.nf-node { fill: var(--ivory); }
.nf .lede { margin-top: var(--s3); }

/* Footer */
.ft { background: var(--maroon); color: var(--ivory); padding: var(--s12) 0 var(--s4); margin-top: 0; }
.ft a { color: var(--ivory); }
.ft a:hover { color: #F3D9A0; }
.ft .label { color: #F3D9A0; }
.ft-top { text-align: center; display: grid; justify-items: center; gap: var(--s2); padding-bottom: var(--s6); border-bottom: 1px solid rgba(251, 247, 240, .2); }
.wordmark-ft, .wordmark-ft:hover { color: var(--ivory); }
.wordmark-ft .wm-main { font-size: clamp(36px, 6vw, 56px); color: var(--ivory); }
.wordmark-ft .wm-sub { color: var(--ivory); }
.ft-line { max-width: 560px; color: rgba(251, 247, 240, .86); }
.ft-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s3); padding: var(--s6) 0; }
@media (min-width: 1024px) { .ft-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 479px) { .ft-grid { grid-template-columns: minmax(0, 1fr); } }
.ft-col h2 { margin-bottom: var(--s2); }
.ft-col li a { display: inline-block; padding: 6px 0; text-decoration: none; }
.ft-col li a:hover { text-decoration: underline; }
.ft-col p + p { margin-top: var(--s2); }
.ft .tbc { background: rgba(251, 247, 240, .14); color: #F3D9A0; border-color: #D9B66A; }
.social { display: flex; gap: var(--s1); margin-top: var(--s2); }
.social a { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(251, 247, 240, .35); border-radius: var(--r); }
.ft-base { display: grid; gap: var(--s2); justify-items: center; text-align: center; padding-top: var(--s4); border-top: 1px solid rgba(251, 247, 240, .2); font-size: 14px; color: rgba(251, 247, 240, .86); }
.ft-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--s3); }
.ft-legal a, .ft-legal .linkish { color: var(--ivory); font-weight: 600; min-height: 48px; display: inline-flex; align-items: center; }
.ft .linkish { color: var(--ivory); }

/* Motion initial states. Applied only once a motion engine has started (html.gs or html.lite),
   and never to elements that were already on screen at that moment (they get .is-in). */
html.motion:is(.gs, .lite) [data-split]:not(.is-split):not(.is-in) { opacity: 0; }
html.motion:is(.gs, .lite) [data-reveal]:not(.is-in) { clip-path: inset(0 50% 0 50%); }
html.motion:is(.gs, .lite) [data-rule]:not(.is-in) { transform: scaleX(0); }
html.motion:is(.gs, .lite) .thread:not(.is-in) .thread-line { transform: scaleY(0); }
html.motion:is(.gs, .lite) .thread:not(.is-in) .thread-node { transform: scale(0); }
.thread-node { transform-origin: 50% 50%; }
html.motion:is(.gs, .lite) [data-stagger] > :not(.is-in), html.motion:is(.gs, .lite) [data-grid] > .card:not(.is-in) { opacity: 0; transform: translateY(24px); }
html.motion:is(.gs, .lite) svg:not(.is-in) [data-draw] { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); }
.mf [data-stagger] > *, .mf .grid > .card { opacity: 1 !important; transform: none !important; }
.motion [data-grid] > .card:nth-child(-n+4) { animation: fadeUp .7s cubic-bezier(.16, 1, .3, 1) both; }
.motion [data-grid] > .card:nth-child(1), .motion [data-grid] > .card:nth-child(4) { animation-delay: .06s; }
@media (max-width: 1023px) {
  .home main > section:nth-of-type(n+4), .shop .grid > .card:nth-child(n+7) { content-visibility: auto; contain-intrinsic-size: auto 720px; }
  .shop .grid > .card:nth-child(n+7) { contain-intrinsic-size: auto 360px; }
}

/* Entrances that run in CSS, so first paint never waits for a script */
.motion .hero .line > span { animation: lineUp .9s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--d, .15s); }
.motion .hero .line:nth-child(2) > span { --d: .27s; }
.motion .hero-media { animation: settle 1.4s cubic-bezier(.33, 1, .68, 1) both; }
.motion .hero-foot > * { animation: fadeUp .7s cubic-bezier(.16, 1, .3, 1) both; animation-delay: .45s; }
.motion .hero-foot > * + * { animation-delay: .53s; }
.motion .hero-foot > * + * + * { animation-delay: .61s; }
.intro:not(.intro-done) .hero .line > span { animation-delay: calc(var(--d, .15s) + .95s); }
.intro:not(.intro-done) .hero-media { animation-delay: .8s; }
.intro:not(.intro-done) .hero-foot > * { animation-delay: 1.3s; }
.motion .phero .h-page { animation: fadeUp .8s cubic-bezier(.16, 1, .3, 1) both; }
.motion .phero .lede, .motion .phero .eyebrow { animation: fadeUp .7s cubic-bezier(.16, 1, .3, 1) .12s both; }
@keyframes lineUp { from { transform: translateY(105%); } }
@keyframes settle { from { transform: scale(1.08); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } }


/* Opening reveal: stitched monogram, then the curtain parts from the centre (about 1.35s) */
.intro .intro-stroke { stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawIn .62s cubic-bezier(.65, 0, .35, 1) .1s forwards; }
.intro .intro-stroke + .intro-stroke { animation-delay: .18s; }
.intro .intro-rule { transform-box: fill-box; transform-origin: 50% 50%; transform: scaleX(0); animation: ruleIn .3s cubic-bezier(.16, 1, .3, 1) .55s forwards; }
.intro .intro-mark { animation: markOut .25s ease-in .8s forwards; }
.intro .intro-l { animation: partL .5s cubic-bezier(.65, 0, .35, 1) .85s forwards; }
.intro .intro-r { animation: partR .5s cubic-bezier(.65, 0, .35, 1) .85s forwards; }
.intro .intro-ov { animation: ovOut 0s linear 1.4s forwards; }
.intro-done .intro-ov { display: none !important; }
@keyframes drawIn { to { stroke-dashoffset: 0; } }
@keyframes ruleIn { to { transform: scaleX(1); } }
@keyframes markOut { to { opacity: 0; transform: translate(-50%, -50%) scale(.96); } }
@keyframes partL { to { transform: translateX(-100%); } }
@keyframes partR { to { transform: translateX(100%); } }
@keyframes ovOut { to { visibility: hidden; } }

/* Light motion engine (phones and tablets): CSS transitions, triggered by IntersectionObserver */
.lite [data-split]:not(.is-in) .split-line > span { transform: translateY(105%); }
.lite [data-split] .split-line > span { transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.lite [data-split].is-in .split-line > span { transform: none; }
.lite [data-rule] { transition: transform .8s cubic-bezier(.65, 0, .35, 1); }
html.lite [data-rule].is-in { transform: scaleX(1); }
.lite [data-reveal] { transition: clip-path .9s cubic-bezier(.65, 0, .35, 1); }
html.lite [data-reveal].is-in { clip-path: inset(0 0 0 0); }
.lite [data-stagger] > *, .lite [data-grid] > .card { transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); }
html.lite [data-stagger] > .is-in, html.lite [data-grid] > .card.is-in { opacity: 1; transform: none; }
.lite .thread-line { transition: transform .9s cubic-bezier(.65, 0, .35, 1); }
.lite .thread-node { transition: transform .5s cubic-bezier(.34, 1.3, .64, 1) .7s; }
html.lite [data-thread].is-in .thread-line { transform: scaleY(1); }
html.lite [data-thread].is-in .thread-node { transform: scale(1); }
.lite .occ-tint { transition: background-color .6s ease; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .card-img-b { clip-path: none !important; opacity: 0; transition: opacity .3s !important; }
  .card:hover .card-img-b { opacity: 1; }
}
@media print { .top, .ft, .wa-float, .sticky-book, .cookie, .toasts { display: none !important; } main { padding-top: 0; } }

.contact-list .tbc, .visit-facts .tbc { justify-self: start; }
.visit-facts .tbc { justify-self: center; }

/* Cards past the first page are not laid out until shop.js takes over (no-JS shows them all). */
html.js .grid[data-grid]:not(.is-ready) > .card:nth-child(n+13) { display: none; }

.js .bk-step:not(.seen) { content-visibility: hidden; }