/* Polish layer shared by Version A and Version B: depth, gold detailing, fine typography and gentle motion.
   Loaded after each version's own stylesheet. Everything here is decoration; remove the link in Shell.astro to see the plain version. */
:root {
  --gold: #b79a5b;
  --gold-soft: #d9c79a;
  --gold-deep: #8f7740;
  --lift: 0 1px 1px rgba(20, 30, 24, .04), 0 8px 18px -6px rgba(20, 30, 24, .12), 0 28px 48px -18px rgba(20, 30, 24, .22);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: 'kern', 'liga', 'onum'; }
::selection { background: var(--gold); color: #fff; }

/* Small-caps eyebrow above headings, with a gold rule */
.eyebrow { white-space: nowrap; display: inline-flex; align-items: center; gap: 14px; margin: 0 0 1.4rem; font: 500 .75rem/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--gold-deep); }
.eyebrow::before { content: ''; width: 44px; height: 1px; background: currentColor; }
.on-field .eyebrow, .hero .eyebrow { color: var(--gold-soft); }

/* Buttons: finer, with a quiet lift */
.btn { letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; padding: 1.25em 2em; transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .35); }
.btn:active { transform: none; }
.btn .icon { transition: transform .35s var(--ease); }
.btn:hover .icon { transform: translateX(4px); }
.btn-outline:hover { border-color: var(--gold-soft); color: #fff; }
.link { letter-spacing: .08em; text-decoration-color: var(--gold); text-underline-offset: .5em; }

/* Reveal on scroll (script adds .reveal-ready to the page and .in to each block as it enters) */
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.reveal-ready [data-reveal].in { opacity: 1; transform: none; }
@keyframes rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Version B ---------- */
.proto-b .site-header { background: rgba(20, 42, 32, .88); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); box-shadow: 0 1px 0 rgba(183, 154, 91, .45); }
.proto-b .site-header .nav-desktop a { letter-spacing: .14em; text-transform: uppercase; font-size: .75rem; }
.proto-b .site-header .nav-desktop a:hover, .proto-b .site-header .nav-desktop a[aria-current="page"] { border-color: var(--gold); }

.proto-b .hero { position: relative; isolation: isolate; background:
  radial-gradient(60% 70% at 78% 40%, rgba(70, 118, 90, .55), transparent 70%),
  radial-gradient(50% 60% at 8% 100%, rgba(10, 24, 17, .8), transparent 70%),
  linear-gradient(160deg, #234a39 0%, #1a3528 55%, #112219 100%); }
.proto-b .hero::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5; mix-blend-mode: soft-light; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.proto-b .hero h1 { font-size: clamp(2.875rem, 5.2vw, 5rem); font-weight: 500; letter-spacing: -.015em; line-height: .96; }
.proto-b .hero h1 em { color: var(--gold-soft); }
.proto-b .hero-facts strong { color: var(--gold-soft); }
.proto-b .hero-media { box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .65), 0 0 0 1px rgba(217, 199, 154, .55); outline: 1px solid rgba(217, 199, 154, .35); outline-offset: 14px; border-radius: 999px 999px 0 0; }
.proto-b .hero-media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(20, 42, 32, .0) 55%, rgba(20, 42, 32, .45) 100%); }
.proto-b .media-toggle { z-index: 2; border: 1px solid rgba(217, 199, 154, .5); }

.proto-b h2 { letter-spacing: -.012em; }
.proto-b section:not(.hero):not(.story):not(.amalfi) { position: relative; }
.proto-b .cats-head, .proto-b .steps-head, .proto-b .areas-head { position: relative; }
.proto-b .cat figure { position: relative; box-shadow: var(--lift); transition: transform .8s var(--ease), box-shadow .8s var(--ease); }
.proto-b .cat figure::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(16, 28, 21, .35)); opacity: .7; transition: opacity .6s var(--ease); pointer-events: none; }
.proto-b .cat a:hover figure { transform: translateY(-6px); box-shadow: 0 2px 2px rgba(20, 30, 24, .05), 0 22px 36px -10px rgba(20, 30, 24, .25), 0 50px 70px -26px rgba(20, 30, 24, .35); }
.proto-b .cat a:hover figure::after { opacity: 1; }
.proto-b .cat-label { border-bottom-color: var(--gold-soft); }
.proto-b .cat-label span { letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; color: var(--gold-deep); }

.proto-b .amalfi { background: radial-gradient(70% 90% at 25% 40%, #f6f2e8 0%, var(--linen) 70%); }
.proto-b .plate-stage { position: relative; }
.proto-b .plate-stage img { position: relative; filter: drop-shadow(0 10px 14px rgba(23, 32, 27, .1)); }

.proto-b .steps { border-top-color: var(--gold); }
.proto-b .steps li::before { color: var(--gold-deep); font-size: 3.25rem; font-weight: 400; font-style: italic; }
.proto-b .steps li { transition: background .5s var(--ease); }
.proto-b .steps li:hover { background: linear-gradient(180deg, rgba(183, 154, 91, .1), transparent 70%); }



.proto-b .letters { background: linear-gradient(180deg, var(--porcelain), #efe9dc); border-top: 0; }
.proto-b .letters blockquote { position: relative; }
.proto-b .letters blockquote::before { content: '\201C'; position: absolute; left: -.55em; top: -.35em; font: 500 7rem/1 var(--serif); color: var(--gold-soft); opacity: .7; }
.proto-b .script { color: var(--gold-deep); }


/* Shop cards, forms and the about and FAQ pages */
.proto-b .pcard form { border: 1px solid var(--rule); box-shadow: none; }
/* Soft Mushroom replaces the green on the About hero and the Contact panel; the text colour tokens flip to charcoal with it. */
.proto-b .about-hero, .proto-b .contact-panel { --on-field: #292724; --on-field-soft: #45423d; background: #C8BFB5; color: #292724; }
.proto-b .back-bar:has(+ .about-hero) { background: #C8BFB5; }
.proto-b .about-hero figure { box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(217, 199, 154, .5); }
.proto-b .about-strip figure { box-shadow: var(--lift); }
.proto-b .faq-num, .proto-b .faq-index a::before { color: var(--gold-deep); }

/* ---------- Version A ---------- */
.proto-a .site-header nav a { letter-spacing: .16em; }
.proto-a .site-header nav a:hover { border-color: var(--gold-soft); }
.proto-a .hero h1 { font-size: clamp(3rem, 7vw, 6.5rem); letter-spacing: -.02em; }
.proto-a .hero::after { background: linear-gradient(90deg, rgba(14, 12, 8, .66) 0%, rgba(14, 12, 8, .3) 42%, rgba(14, 12, 8, 0) 70%), linear-gradient(0deg, rgba(14, 12, 8, .6) 0%, rgba(14, 12, 8, 0) 45%), linear-gradient(180deg, rgba(14, 12, 8, .5) 0%, rgba(14, 12, 8, 0) 24%); }
.proto-a h2 { letter-spacing: -.018em; }
.proto-a section:not(.hero) figure { box-shadow: var(--lift); }
.proto-a footer { border-top: 1px solid rgba(183, 154, 91, .5); }
.proto-a .btn-primary { background: linear-gradient(180deg, #36513f, var(--basil-deep)); }

@media (max-width: 900px) {
  .proto-b .hero-media { outline: 0; box-shadow: none; }
  .eyebrow { margin-bottom: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-ready [data-reveal] { opacity: 1; transform: none; }
  
}

/* ---------- Version B header and hero: approved Soft Mushroom direction ----------
   Background #C8BFB5, text and icons deep charcoal #292724 (8.2:1), buttons charcoal with ivory #FAF7F2 (13.9:1).
   No gold here. The rest of the page keeps its own colors. */
.proto-b .site-header, .proto-b .hero {
  --rose: #C8BFB5; --char: #292724; --ivory: #FAF7F2;
  --on-field: var(--char); --on-field-soft: var(--char); --ink: var(--char);
  color: var(--char);
}
.proto-b .site-header { background: var(--rose); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 0 rgba(41, 39, 36, .28); }
.proto-b .hero { background: var(--rose); }
.proto-b .hero::before { content: none; }
.proto-b .site-header :focus-visible, .proto-b .hero :focus-visible { outline: 2px solid var(--char); outline-offset: 3px; }
.proto-b .site-header .nav-desktop a:hover, .proto-b .site-header .nav-desktop a[aria-current="page"] { border-color: var(--char); }
.proto-b .wishlist-link { color: var(--char); }
.proto-b .count { background: var(--char); color: var(--ivory); }
/* Buttons: primary is charcoal with ivory text, secondary is transparent with charcoal text and border */
.proto-b .site-header .btn-porcelain, .proto-b .hero .btn-porcelain { background: var(--char); color: var(--ivory); border-color: var(--char); }
.proto-b .site-header .btn-porcelain:hover, .proto-b .hero .btn-porcelain:hover { background: #000; border-color: #000; color: var(--ivory); }
.proto-b .hero .btn-outline { background: transparent; color: var(--char); border: 1px solid var(--char); }
.proto-b .hero .btn-outline:hover { background: var(--char); color: var(--ivory); border-color: var(--char); }
/* Text */
.proto-b .hero h1, .proto-b .hero p, .proto-b .hero h1 em { color: var(--char); }
.proto-b .hero .eyebrow { color: var(--char); }
.proto-b .hero-facts { color: var(--char); border-top: 1px solid rgba(41, 39, 36, .35); border-image: none; }
.proto-b .hero-facts strong { color: var(--char); }
/* Arched film: charcoal hairline frame in place of gold, softer shadow on the lighter ground */
.proto-b .hero-media { box-shadow: 0 40px 70px -34px rgba(41, 39, 36, .55), 0 0 0 1px rgba(41, 39, 36, .5); outline: 1px solid rgba(41, 39, 36, .3); }
.proto-b .hero-media::after { background: linear-gradient(180deg, rgba(41, 39, 36, 0) 60%, rgba(41, 39, 36, .3) 100%); }
.proto-b .media-toggle { background: rgba(41, 39, 36, .85); color: var(--ivory); border: 1px solid rgba(250, 247, 242, .35); }
.proto-b .media-toggle:focus-visible { outline: 2px solid var(--ivory); outline-offset: 2px; }
/* Mobile menu: button and panel */
.proto-b .mobile-nav summary { color: var(--char); border-radius: 2px; }
.proto-b .mobile-nav summary:hover { background: rgba(41, 39, 36, .1); }
.proto-b .mobile-nav-panel { background: var(--ivory); color: var(--char); border: 1px solid var(--char); }
.proto-b .mobile-nav-panel a:hover, .proto-b .mobile-nav-panel a[aria-current="page"] { background: rgba(41, 39, 36, .08); }
.proto-b .mobile-nav-panel a:focus-visible { outline: 2px solid var(--char); outline-offset: -2px; }

/* The prototype bar stays pinned to the top while scrolling so the customer can compare page by page.
   luxe.js sets --bar-h to its height; Version B's sticky header and side panels sit just below it. */
.proto-bar { position: sticky; top: 0; z-index: 70; }
/* The preview bar: a light panel in its own fixed palette (the appearance controls never recolour it). Top row: what this is,
   the demo note, film speed (Version A home), Compare and Hide. Below it, the appearance controls (bgcontrol.css). */
.proto-bar { --pv-ink: #262523; --pv-soft: #6c6a65; --pv-line: #e3dfd8; --pv-field: #cfcac2; --pv-accent: #2e4a63; --pv-tint: #dde9f3;
  background: #faf8f4; color: var(--pv-ink); border-bottom: 1px solid var(--pv-line); box-shadow: 0 6px 18px -14px rgba(20, 24, 28, .35); font: 400 .9375rem/1.4 var(--sans); }
.proto-bar .wrap { width: min(100% - 2 * clamp(16px, 2.5vw, 40px), 1680px); }
.proto-bar .pv-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding-block: 12px; }
.proto-bar .pv-title { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.proto-bar .pv-title strong { font-weight: 600; font-size: 1.125rem; letter-spacing: .01em; }
.proto-bar .pv-title span { color: var(--pv-soft); }
.proto-bar .pv-demo { margin: 0 auto; position: relative; }
.proto-bar .pv-demo summary { color: var(--pv-soft); text-decoration: underline dotted; text-underline-offset: .3em; }
.proto-bar .pv-demo summary:hover { color: var(--pv-ink); }
.proto-bar .proto-notes { right: 50%; transform: translateX(50%); top: calc(100% + 10px); border-color: var(--pv-line); border-radius: 8px; }
.proto-bar .pv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.proto-bar .pv-sep { width: 1px; height: 28px; background: var(--pv-line); }
.pv-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px; border: 1px solid var(--pv-ink); border-radius: 6px; background: #fff; color: var(--pv-ink); font: 500 .9375rem/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; }
.proto-bar a.pv-btn { color: var(--pv-ink); }
.pv-btn:hover { background: #f0ede7; }
.pv-btn:focus-visible, .proto-bar summary:focus-visible, .pv-speed select:focus-visible { outline: 2px solid var(--pv-accent); outline-offset: 2px; }
.pv-speed { display: inline-flex; align-items: center; gap: 8px; color: var(--pv-soft); white-space: nowrap; }
.pv-speed select { min-height: 38px; padding: 0 8px; border: 1px solid var(--pv-field); border-radius: 6px; background: #fff; color: var(--pv-ink); font: inherit; cursor: pointer; }
.proto-bar .pv-tools { border-top: 1px solid var(--pv-line); }
@media (max-width: 700px) {
  /* On a phone the open bar is too tall to pin: it scrolls away with the page (luxe.js then sets --bar-h to 0). */
  .proto-bar { position: relative; }
  .proto-bar .pv-top { gap: 8px 14px; padding-block: 10px; }
  .proto-bar .pv-demo { margin: 0; order: 3; flex-basis: 100%; }
  .proto-bar .proto-notes { right: auto; left: 0; transform: none; }
  .proto-bar .pv-sep { display: none; }
  .pv-btn { min-height: 36px; padding: 0 12px; font-size: .875rem; }
}
/* Folded-away bar and the small tab that brings it back */
html.bar-hidden .proto-bar { display: none; }
.proto-bar-tab { position: fixed; top: 0; right: clamp(12px, 2vw, 28px); z-index: 80; padding: 6px 14px 7px; border: 1px solid #e3dfd8; border-top: 0; border-radius: 0 0 8px 8px; background: #faf8f4; color: #262523; font: 500 .8125rem/1.2 'Jost', 'Helvetica Neue', Arial, sans-serif; letter-spacing: .02em; cursor: pointer; box-shadow: 0 6px 14px -8px rgba(20, 24, 28, .4); }
.proto-bar-tab:hover { background: #f0ede7; }
.proto-bar-tab:focus-visible { outline: 2px solid #2e4a63; outline-offset: 2px; }
.proto-bar-tab[hidden] { display: none; }
.proto-b .site-header { top: var(--bar-h, 0px); }
/* Version A header: pinned below the bar, except over the home film, where it sits on the film and scrolls away with it.
   Once the film has left the screen luxe.js adds .is-stuck and the header returns pinned and solid, sliding in from the top. */
.proto-a .site-header.overlay { position: absolute; left: 0; right: 0; z-index: 65; }
.proto-a .site-header.overlay.is-stuck { position: fixed; top: var(--bar-h, 0px); animation: head-in .3s ease both; }
@keyframes head-in { from { transform: translateY(-100%); } to { transform: none; } }
.proto-a .site-header.solid { position: sticky; top: var(--bar-h, 0px); z-index: 65; }
.proto-a .site-header.overlay.is-stuck { background: var(--ground); color: var(--ink); box-shadow: 0 1px 0 var(--rule); }
.proto-a .site-header.overlay.is-stuck nav a, .proto-a .site-header.overlay.is-stuck .header-actions a { text-shadow: none; }
.proto-a .site-header.overlay.is-stuck .brand img { filter: none; }
.proto-a .site-header.overlay.is-stuck .count { border-color: currentColor; }
html:has(.proto-a .site-header) { scroll-padding-top: calc(var(--bar-h, 0px) + var(--head-h, 0px) + 12px); }
@media (prefers-reduced-motion: reduce) { .proto-a .site-header.overlay.is-stuck { animation: none; } }
.proto-b .shop-side, .proto-b .faq-index, .proto-b .contact-panel { top: calc(104px + var(--bar-h, 0px)); }
.proto-b .faq-entry { scroll-margin-top: calc(110px + var(--bar-h, 0px)); }
@media (max-width: 900px) {
  .proto-b .shop-side, .proto-b .faq-index, .proto-b .contact-panel { top: auto; }
}
.proto-b .site-header ::selection, .proto-b .hero ::selection { background: var(--char); color: var(--ivory); }
.proto-b .wishlist-link:hover { text-decoration: underline; text-underline-offset: .35em; }
.proto-b .site-header .btn-porcelain:active, .proto-b .hero .btn-porcelain:active { background: #3b3835; border-color: #3b3835; transform: none; box-shadow: none; }
.proto-b .hero .btn-outline:active { background: #3b3835; color: var(--ivory); border-color: #3b3835; transform: none; box-shadow: none; }
.proto-b .mobile-nav summary:active { background: rgba(41, 39, 36, .18); }
.proto-b .mobile-nav-panel a:active { background: rgba(41, 39, 36, .16); }

/* Stable hero overlay and small-screen fixes */
.proto-a .hero h1, .proto-a .hero p { text-shadow: 0 1px 18px rgba(14, 12, 8, .35); }
@media (max-width: 900px) {
  .proto-a .hero::after { background: linear-gradient(180deg, rgba(14, 12, 8, .6) 0%, rgba(14, 12, 8, .42) 38%, rgba(14, 12, 8, .72) 100%); }
  .eyebrow { white-space: normal; letter-spacing: .2em; }
  .eyebrow::before { width: 28px; flex: none; }
}

/* Version B logo readability: larger, and strokes thickened slightly so the thin lettering and tagline hold on Soft Mushroom. Artwork unchanged. */
.proto-b .site-header .brand img {
  width: clamp(190px, 17vw, 250px);
  filter: contrast(1.15) drop-shadow(0 0 .35px #111) drop-shadow(0 0 .35px #111);
}
@media (max-width: 900px) { .proto-b .site-header .brand img { width: clamp(168px, 46vw, 210px); } }

/* Version B category section: left-aligned heading, calm cards, readable charcoal links */
.proto-b .cats-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 16px clamp(32px, 6vw, 96px); }
.proto-b .cats-head h2 { font-family: var(--serif); text-align: left; text-wrap: balance; margin: 0; }
.proto-b .cats-head .lede { font-family: var(--sans); max-width: 46ch; margin: 0 0 .5em; line-height: 1.65; }
.proto-b .cat figure { box-shadow: none; }
.proto-b .cat figure::after { display: none; }
.proto-b .cat a:hover figure { transform: none; box-shadow: none; }
.proto-b .cat img { transition: transform .6s var(--ease); }
.proto-b .cat a:hover img { transform: scale(1.025); }
.proto-b .cat .cat-dinner img { padding: 2%; }
.proto-b .cat-label { border-bottom-color: var(--rule); align-items: baseline; flex-wrap: wrap; gap: 4px 16px; }
.proto-b .cat-label h3 { font-family: var(--serif); }
.proto-b .cat-label span { font-family: var(--sans); letter-spacing: .01em; text-transform: none; font-size: .9375rem; font-weight: 500; color: var(--char, #292724); }
.proto-b .cat a:hover .cat-label span { text-decoration: underline; text-underline-offset: 4px; }
.proto-b .cat a:focus-visible { outline: 2px solid #292724; outline-offset: 4px; }
@media (max-width: 900px) {
  .proto-b .cats-head { grid-template-columns: 1fr; }
  .proto-b .cats { grid-template-columns: 1fr; gap: 28px; }
  .proto-b .cats li:first-child { grid-column: auto; }
  .proto-b .cats li:not(:first-child) .cat-label span { display: inline-flex; }
  .proto-b .cats li:not(:first-child) .cat-label h3 { font-size: clamp(1.75rem, 2.4vw, 2.25rem); }
}

/* Version B Amalfi: coherent selection group, charcoal action, no decorative circle */
.proto-b .plate-stage { aspect-ratio: 560 / 839; max-height: 760px; width: 100%; margin-inline: auto; }
.proto-b .plate-stage img { width: min(100%, 440px); }
.proto-b .amalfi .avail { display: inline-block; margin-top: .25rem; color: var(--char); font-weight: 500; }
.proto-b .amalfi .sub { font-style: italic; }
.proto-b .amalfi .swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.proto-b .amalfi .swatch label { position: relative; align-content: start; height: 100%; }
.proto-b .amalfi .swatch-name { max-width: none; font-size: .8125rem; min-height: 2.5em; }
.proto-b .amalfi .swatch .chip { width: 56px; height: 56px; }
.proto-b .amalfi .swatch input:checked + label .chip { box-shadow: 0 0 0 3px var(--linen), 0 0 0 5px #292724; }
.proto-b .amalfi .swatch input:checked + label::after { content: ''; position: absolute; top: -4px; left: calc(50% + 12px); width: 20px; height: 20px; border-radius: 50%; background: #292724 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23FAF7F2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.proto-b .amalfi .swatch input:focus-visible + label .chip { outline: 2px solid #292724; outline-offset: 6px; }
.proto-b .amalfi .setting-explain { margin-top: 1.4rem; padding-top: 1.2rem; }
.proto-b .amalfi .setting-explain h3 { font-family: var(--serif); font-size: 1.5rem; margin-bottom: .5rem; }
.proto-b .setting-list { list-style: none; margin: 0; padding: 0; }
.proto-b .setting-list li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.proto-b .setting-list .per { color: var(--ink-soft); }
.proto-b .guests { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 1.2rem; }
.proto-b .guests-label { font: 500 .9375rem/1.3 var(--sans); }
.proto-b .setting-line { margin: 1.2rem 0 .8rem; font: 500 1rem/1.4 var(--sans); font-variant-numeric: tabular-nums; min-height: 1.4em; }
.proto-b .btn-charcoal { width: 100%; background: #292724; color: #FAF7F2; justify-content: center; }
.proto-b .btn-charcoal:hover { background: #3a3733; }
.proto-b .btn-charcoal:focus-visible { outline: 2px solid #292724; outline-offset: 3px; }
.proto-b .btn-charcoal:disabled { opacity: .7; cursor: progress; }
.proto-b .amalfi .no-reserve { margin-top: 10px; }
.proto-b .amalfi .added { min-height: 3.2em; margin-top: 6px; }
.proto-b .link-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 500; color: #292724; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 900px) {
  .proto-b .plate-stage { aspect-ratio: auto; max-height: none; }
  .proto-b .plate-stage img { width: min(70%, 320px); }
}

/* Version B story section: Soft Mushroom, charcoal text, left-aligned copy, tighter staggered photographs */
.proto-b .story { background: #C8BFB5; color: #292724; --on-field: #292724; --on-field-soft: #292724; }
.proto-b .story .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); column-gap: 14px; row-gap: 32px; align-items: end; }
.proto-b .story-copy { align-self: center; text-align: left; padding-right: clamp(20px, 4vw, 64px); }
.proto-b .story h2 { font-family: var(--serif); font-weight: 500; color: #292724; text-wrap: balance; font-size: clamp(2.25rem, 3.6vw, 3.25rem); line-height: 1.1; margin: 0; }
.proto-b .story-copy p { font-family: var(--sans); color: #292724; max-width: 38ch; margin: 1.3rem 0 1.4rem; }
.proto-b .story-link { display: inline-flex; align-items: center; gap: .5em; font: 500 1rem/1.4 var(--sans); letter-spacing: .02em; color: #292724; text-decoration: none; border-bottom: 1px solid rgba(41, 39, 36, .45); padding-bottom: 2px; transition: gap .25s ease, border-color .25s ease; }
.proto-b .story-link:hover { gap: .8em; border-color: #292724; }
.proto-b .story-link:focus-visible { outline: 2px solid #292724; outline-offset: 4px; }
.proto-b .story figure { box-shadow: none; }
.proto-b .story .f1 { margin-bottom: 0; }
.proto-b .story .f1 img { aspect-ratio: 3 / 4; object-position: 50% 60%; }
.proto-b .story .f2 img { aspect-ratio: 3 / 4; object-position: 40% 70%; }
.proto-b .story img { transition: transform .8s var(--ease); }
.proto-b .story figure:hover img { transform: scale(1.02); }
@media (max-width: 1100px) and (min-width: 701px) {
  .proto-b .story .wrap { grid-template-columns: 1fr 1fr; }
  .proto-b .story-copy { grid-column: 1 / -1; padding-right: 0; }
  .proto-b .story-copy p { max-width: 52ch; }
}
@media (max-width: 700px) {
  .proto-b .story .wrap { grid-template-columns: 1fr 1fr; column-gap: 10px; }
  .proto-b .story-copy { grid-column: 1 / -1; padding-right: 0; }
  .proto-b .story .f1, .proto-b .story .f2 { align-self: start; }
  .proto-b .story .f1 img, .proto-b .story .f2 img { aspect-ratio: 3 / 4; }
}
.proto-b .story h2 span { display: inline-block; }
@media (min-width: 1101px) { .proto-b .story h2 { font-size: clamp(2rem, 2.9vw, 2.75rem); } .proto-b .story-copy { padding-right: 24px; } }

/* Version B delivery section: compact ivory table, charcoal text, neutral dividers */
.proto-b .areas { background: #FAF7F2; color: #292724; padding-block: clamp(48px, 6vw, 88px); }
.proto-b .areas-head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: end; margin-bottom: clamp(24px, 3vw, 40px); }
.proto-b .areas h2 { font-family: var(--serif); font-weight: 500; color: #292724; text-align: left; text-wrap: balance; margin: 0; font-size: clamp(2.1rem, 3.4vw, 3.1rem); line-height: 1.1; }
.proto-b .areas .lede { font-family: var(--sans); color: #292724; margin: 0; max-width: 52ch; }
.proto-b .delivery { width: 100%; max-width: 880px; border-collapse: collapse; font-family: var(--sans); color: #292724; }
.proto-b .delivery th, .proto-b .delivery td { text-align: left; padding: 16px 0; border-bottom: 1px solid #d9d3c6; font-weight: 400; font-size: 1.0625rem; vertical-align: baseline; }
.proto-b .delivery thead th { font: 500 .8125rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid #292724; padding-block: 0 12px; }
.proto-b .delivery tbody th { font-family: var(--serif); font-size: 1.4rem; font-weight: 500; }
.proto-b .delivery th:last-child, .proto-b .delivery td { text-align: right; font-variant-numeric: tabular-nums; width: 14rem; }
.proto-b .delivery td { font-weight: 500; }
.proto-b .areas .zones-note { margin: 18px 0 0; color: #292724; font-size: 1rem; max-width: 60ch; }
.proto-b .area-actions { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 20px 0 0; }
.proto-b .area-link { display: inline-flex; align-items: center; gap: .5em; font: 500 1rem/1.4 var(--sans); color: #292724; text-decoration: none; border-bottom: 1px solid rgba(41, 39, 36, .4); padding-bottom: 2px; transition: gap .25s ease, border-color .25s ease; }
.proto-b .area-primary { border-bottom-color: #292724; }
.proto-b .area-link:hover { gap: .8em; border-color: #292724; }
.proto-b .area-link:focus-visible { outline: 2px solid #292724; outline-offset: 4px; }
@media (max-width: 900px) {
  .proto-b .areas-head { grid-template-columns: 1fr; gap: 14px; }
  .proto-b .delivery thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .proto-b .delivery, .proto-b .delivery tbody, .proto-b .delivery tr, .proto-b .delivery tbody th, .proto-b .delivery td { display: block; width: auto; text-align: left; }
  .proto-b .delivery tr { padding: 14px 0; border-bottom: 1px solid #d9d3c6; }
  .proto-b .delivery tbody th, .proto-b .delivery td { border: 0; padding: 0; }
  .proto-b .delivery td { margin-top: 4px; font-size: 1rem; }
  .proto-b .delivery td::before { content: attr(data-label) ": "; font-weight: 400; }
}

/* Version B closing invitation (Soft Mushroom) and charcoal footer */
.proto-b .closing-cta { background: #C8BFB5; color: #292724; padding-block: clamp(48px, 6vw, 88px); }
.proto-b .closing-cta .wrap { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.proto-b .closing-cta h2 { font-family: var(--serif); font-weight: 500; color: #292724; font-size: clamp(2.4rem, 4.4vw, 3.75rem); line-height: 1.08; margin: 0; }
.proto-b .closing-cta p { font-family: var(--sans); color: #292724; max-width: 52ch; margin: 1.1rem 0 1.6rem; }
.proto-b .closing-cta .closing-sub { margin: 1.2rem 0 0; }
.proto-b .closing-cta .btn-charcoal { width: auto; }
.proto-b .closing-cta .btn-charcoal:focus-visible { outline: 2px solid #292724; outline-offset: 4px; }
.proto-b .site-footer { background: #292724; color: #FAF7F2; padding-block: clamp(40px, 5vw, 64px) 24px; border: 0; }
.proto-b .site-footer .foot-grid { padding-top: 0; gap: clamp(24px, 4vw, 48px); grid-template-columns: 2fr 1fr 1fr 1.3fr; }
.proto-b .site-footer .foot-grid img { width: 200px; }
.proto-b .site-footer .tagline { color: rgba(250, 247, 242, .8); }
.proto-b .site-footer h3 { color: rgba(250, 247, 242, .65); letter-spacing: .14em; margin-bottom: 14px; }
.proto-b .site-footer a { color: #FAF7F2; font-family: var(--sans); overflow-wrap: anywhere; text-decoration: none; transition: opacity .2s; }
.proto-b .site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.proto-b .site-footer :focus-visible { outline: 2px solid #FAF7F2; outline-offset: 3px; }
.proto-b .site-footer .legal { margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(250, 247, 242, .2); color: rgba(250, 247, 242, .75); }
@media (max-width: 900px) {
  .proto-b .site-footer .foot-grid { grid-template-columns: 1fr 1fr; }
  .proto-b .site-footer .foot-grid > div:first-child { grid-column: 1 / -1; }
  .proto-b .site-footer .foot-grid > nav:last-child { grid-column: 1 / -1; }
  .proto-b .site-footer ul { gap: 14px; }
}
@media (max-width: 600px) { .proto-b .closing-cta .btn-charcoal { width: 100%; justify-content: center; } }

/* Footer credit, version and deploy time */
.build-info { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin: 6px 0 0; font-size: .8125rem; opacity: .85; }
.build-info a { color: inherit; overflow-wrap: anywhere; }
.proto-b .site-footer .legal { margin-bottom: 0; }

/* Version A hero and header: left-aligned headline, readable logo and navigation over the film */
.proto-a .hero h1 { font-size: clamp(2.75rem, 5.6vw, 5.25rem); max-width: none; text-wrap: balance; }
.proto-a .hero p { max-width: 40ch; }
.proto-a .hero .hero-copy { padding-inline: 0; }
.proto-a .hero-actions { gap: 14px 28px; }
.proto-a .hero-quote { display: inline-flex; align-items: center; gap: .5em; padding: .85em .2em; min-height: 44px; }
.proto-a .hero::after { background: linear-gradient(90deg, rgba(14, 12, 8, .72) 0%, rgba(14, 12, 8, .42) 38%, rgba(14, 12, 8, .08) 72%, rgba(14, 12, 8, 0) 100%), linear-gradient(180deg, rgba(14, 12, 8, .55) 0%, rgba(14, 12, 8, 0) 26%), linear-gradient(0deg, rgba(14, 12, 8, .45) 0%, rgba(14, 12, 8, 0) 40%); }
.proto-a .site-header.overlay .brand img { width: clamp(190px, 17vw, 250px); filter: drop-shadow(0 0 .5px #fff) drop-shadow(0 1px 8px rgba(14, 12, 8, .55)); }
.proto-a .site-header.overlay nav a, .proto-a .site-header.overlay .header-actions a { text-shadow: 0 1px 10px rgba(14, 12, 8, .6); }
.proto-a .hero a:focus-visible, .proto-a .hero button:focus-visible, .proto-a .site-header a:focus-visible, .proto-a .site-header summary:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (max-width: 900px) {
  .proto-a .site-header.overlay .brand img { width: clamp(150px, 42vw, 200px); }
  .proto-a .hero h1 { font-size: clamp(2.5rem, 11vw, 3.5rem); }
  .proto-a .hero-actions { flex-direction: column; align-items: flex-start; }
  .proto-a .hero-actions .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .proto-a .hero video:not([data-user-play]) { display: none; } }
.proto-a .site-header .mobile-nav-panel a { text-shadow: none; }

/* Version A introduction and discovery section */
.proto-a .intro { padding-bottom: clamp(36px, 5vw, 72px); }
.proto-a .intro p { max-width: 52ch; }
.proto-a .gathering { padding-top: clamp(56px, 8vw, 112px); }
.proto-a .gathering .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.proto-a .gathering figure { aspect-ratio: 4 / 5; box-shadow: none; }
.proto-a .gathering-copy { min-width: 0; text-align: left; }
.proto-a .gathering h2 { font-size: clamp(2.1rem, 3.8vw, 3.25rem); max-width: 16ch; text-wrap: balance; margin: 0; }
.proto-a .gathering .lede { max-width: 36ch; margin: 1.3rem 0 1.8rem; overflow-wrap: break-word; }
.proto-a .gathering-link { display: inline-flex; align-items: center; gap: .5em; font: 500 1rem/1.4 var(--sans); color: #1f1e1c; text-decoration: none; border-bottom: 1px solid rgba(31, 30, 28, .4); padding-bottom: 2px; transition: gap .25s ease, border-color .25s ease; }
.proto-a .gathering-link:hover { gap: .8em; border-color: #1f1e1c; }
.proto-a .gathering-link:focus-visible { outline: 2px solid #1f1e1c; outline-offset: 4px; }
@media (max-width: 900px) {
  .proto-a .gathering .wrap { grid-template-columns: 1fr; }
  .proto-a .gathering figure { aspect-ratio: 4 / 4.2; }
  .proto-a .gathering h2 { max-width: none; font-size: clamp(2rem, 8vw, 2.6rem); }
}
.proto-a section.gathering figure { box-shadow: none; }
.proto-a .gathering h2 span { display: inline-block; }

/* Version A Amalfi showcase: four colourways, one link each */
.proto-a .amalfi-show { background: #FAF7F2; padding-block: clamp(56px, 7vw, 104px); }
.proto-a .show-head { text-align: left; margin-bottom: clamp(24px, 3.5vw, 48px); }
.proto-a .show-head h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); margin: 0; }
.proto-a .show-sub { font: italic 400 clamp(1.15rem, 1.7vw, 1.4rem)/1.35 var(--serif); color: #4a4a45; margin: .6rem 0 0; }
.proto-a .show-copy { font-family: var(--sans); color: #292724; margin: .8rem 0 0; max-width: 52ch; }
.proto-a .show-origin { font: 500 .8125rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #5b5a54; margin: .6rem 0 0; }
.proto-a .show-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2.4vw, 36px); align-items: stretch; }
.proto-a .show-grid a { display: grid; grid-template-rows: 1fr auto; gap: 14px; height: 100%; text-decoration: none; color: #292724; padding: 8px; border-radius: 2px; }
.proto-a .show-grid figure { margin: 0; aspect-ratio: 560 / 839; box-shadow: none; display: grid; place-items: center; }
.proto-a .show-grid img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s ease; }
.proto-a .show-grid a:hover img { transform: scale(1.025); }
.proto-a .show-grid a:hover .show-label { border-color: #292724; }
.proto-a .show-label { font: 500 .8125rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; text-align: center; padding-bottom: 4px; border-bottom: 1px solid transparent; justify-self: center; min-height: 2.6em; display: flex; align-items: flex-start; }
.proto-a .show-grid a:focus-visible { outline: 2px solid #292724; outline-offset: 2px; }
.proto-a .show-action { margin: clamp(24px, 3vw, 40px) 0 0; }
@media (max-width: 900px) { .proto-a .show-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; } }
.proto-a section.amalfi-show .show-grid figure { box-shadow: none; }

/* Version A banner: a quiet photographic transition with a live-text headline */
.proto-a .band-a { position: relative; display: grid; background: #FAF7F2; padding: 0; }
.proto-a .band-a picture { grid-area: 1 / 1; display: block; }
.proto-a .band-a img { display: block; width: 100%; height: auto; aspect-ratio: 1862 / 640; object-fit: cover; object-position: 70% 55%; }
.proto-a .band-a::after { content: ''; grid-area: 1 / 1; background: linear-gradient(90deg, rgba(250, 247, 242, .78) 0%, rgba(250, 247, 242, .5) 28%, rgba(250, 247, 242, 0) 52%); pointer-events: none; }
.proto-a .band-copy { grid-area: 1 / 1; z-index: 1; align-self: center; justify-self: center; width: min(100% - 2 * var(--gutter), var(--max)); }
.proto-a .band-a h2 { font-family: var(--serif); font-weight: 420; font-size: clamp(2rem, 3.8vw, 3.4rem); line-height: 1.12; color: #292724; text-align: left; max-width: 20ch; margin: 0; }
@media (max-width: 700px) {
  .proto-a .band-a { display: block; }
  .proto-a .band-a::after { display: none; }
  .proto-a .band-copy { padding-block: 40px 24px; width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
  .proto-a .band-a h2 { font-size: clamp(2rem, 9vw, 2.6rem); max-width: none; }
  .proto-a .band-a .br-lg { display: none; }
  .proto-a .band-a img { aspect-ratio: 4 / 3; object-position: 50% 50%; }
}

/* Version A service area: minimums table beside the illustrated home-market map */
.proto-a .areas { background: #FAF7F2; padding-block: clamp(56px, 7vw, 104px); color: #292724; }
.proto-a .areas .wrap { align-items: start; gap: clamp(32px, 6vw, 96px); }
.proto-a .areas h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); text-align: left; max-width: 18ch; margin: 0; text-wrap: balance; }
.proto-a .areas .lede { color: #292724; margin: 1.2rem 0 1.6rem; max-width: 50ch; }
.proto-a .delivery-a { width: 100%; border-collapse: collapse; font-family: var(--sans); color: #292724; }
.proto-a .delivery-a th, .proto-a .delivery-a td { text-align: left; padding: 14px 0; border-bottom: 1px solid var(--rule); font-weight: 400; font-size: 1rem; vertical-align: baseline; }
.proto-a .delivery-a thead th { font: 500 .8125rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; border-bottom-color: #292724; padding-block: 0 10px; }
.proto-a .delivery-a th:last-child, .proto-a .delivery-a td { text-align: right; font-variant-numeric: tabular-nums; }
.proto-a .delivery-a td { font-weight: 500; }
.proto-a .area-actions { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 1.6rem 0 0; }
.proto-a .area-link { display: inline-flex; align-items: center; gap: .5em; font: 500 1rem/1.4 var(--sans); color: #292724; text-decoration: none; border-bottom: 1px solid rgba(41, 39, 36, .4); padding-bottom: 2px; transition: gap .25s ease, border-color .25s ease; }
.proto-a .area-primary { border-bottom-color: #292724; }
.proto-a .area-link:hover { gap: .8em; border-color: #292724; }
.proto-a .area-link:focus-visible { outline: 2px solid #292724; outline-offset: 4px; }
.proto-a .map h3 { font: 500 1.25rem/1.2 var(--serif); margin: 0 0 .6rem; }
.proto-a .map .city { font: 600 14px var(--sans); fill: currentColor; stroke: none; }
.proto-a .map .state { font: 500 12px var(--sans); fill: currentColor; opacity: .7; }
.proto-a .map-note { margin: .4rem 0 0; font-size: .8125rem; color: #5b5a54; }
@media (max-width: 900px) {
  .proto-a .delivery-a thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .proto-a .delivery-a, .proto-a .delivery-a tbody, .proto-a .delivery-a tr, .proto-a .delivery-a tbody th, .proto-a .delivery-a td { display: block; text-align: left; }
  .proto-a .delivery-a tr { padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .proto-a .delivery-a tbody th, .proto-a .delivery-a td { border: 0; padding: 0; }
  .proto-a .delivery-a td { margin-top: 4px; }
  .proto-a .delivery-a td::before { content: attr(data-label) ": "; font-weight: 400; }
  .proto-a .areas .map { margin-top: 24px; }
}

/* Version A: About us / FAQ cards, each one link */
.proto-a .standard { background: #FAF7F2; padding-block: clamp(56px, 7vw, 104px); }
.proto-a .standard h2 { font-size: clamp(1.9rem, 3.6vw, 3.1rem); text-align: center; max-width: 24ch; text-wrap: balance; margin-inline: auto; }
.proto-a .standard h2 span { display: inline-block; }
.proto-a .tiles { margin-top: clamp(28px, 4vw, 48px); gap: clamp(16px, 2.4vw, 32px); }
.proto-a .tile { aspect-ratio: 4 / 3; box-shadow: none; text-align: left; }
.proto-a .tile img { transition: transform .8s ease; }
.proto-a .tile::after { background: linear-gradient(0deg, rgba(20, 18, 14, .82) 0%, rgba(20, 18, 14, .6) 30%, rgba(20, 18, 14, 0) 62%); }
.proto-a .tile div { left: clamp(20px, 3vw, 36px); right: clamp(20px, 3vw, 36px); }
.proto-a .tile h3 { font-family: var(--serif); color: #FAF7F2; }
.proto-a .tile p { font-family: var(--sans); color: #FAF7F2; max-width: 40ch; }
.proto-a .tile-action { display: inline-flex; align-items: center; gap: .5em; margin-top: .9rem; font: 500 .9375rem/1.3 var(--sans); letter-spacing: .02em; color: #FAF7F2; border-bottom: 1px solid rgba(250, 247, 242, .6); padding-bottom: 2px; transition: gap .25s ease; }
.proto-a .tile:hover .tile-action { gap: .8em; }
.proto-a .tile:hover img { transform: scale(1.03); }
.proto-a .tile:focus-visible { outline: 3px solid #292724; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .proto-a .tile img, .proto-a .tile-action { transition: none; } .proto-a .tile:hover img { transform: none; } }
@media (max-width: 900px) { .proto-a .tile { aspect-ratio: 4 / 4.2; } }
.proto-a .tile p { min-height: 3.2em; } @media (max-width: 600px) { .proto-a .tile p { min-height: 0; } }

/* Version A "love letters": only rendered when an approved testimonial and the heading-font licence exist */
.proto-a .letters-a { background: #FAF7F2; color: #292724; text-align: center; padding-block: clamp(40px, 5vw, 72px); }
.proto-a .letters-a h2 { font-family: 'Rustic Glam', var(--serif); font-weight: 400; font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: 1.1; color: #292724; margin: 0 0 1rem; overflow-wrap: anywhere; }
.proto-a .letters-a figure { margin: 0 auto; max-width: 680px; }
.proto-a .letters-a blockquote { margin: 0; font: normal 400 clamp(1.25rem, 2vw, 1.6rem)/1.5 var(--serif); }
.proto-a .letters-a blockquote p { margin: 0; }
.proto-a .letters-a figcaption { margin-top: 1.1rem; font: 500 .8125rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }

/* Version A closing invitation: Soft Mushroom, one centered axis */
.proto-a .closing { background: #C8BFB5; color: #292724; text-align: center; padding-block: clamp(40px, 5vw, 80px); }
.proto-a .closing .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.proto-a .closing h2 { font-family: var(--serif); font-weight: 420; color: #292724; font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.1; max-width: 18ch; margin: 0; text-wrap: balance; }
.proto-a .closing p { font-family: var(--sans); color: #292724; max-width: 46ch; margin: 1.1rem 0 1.75rem; }
.proto-a .closing .closing-btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: .6em; padding-inline: 1.8rem; background: #292724; color: #FAF7F2; border: 0; }
.proto-a .closing .closing-btn:hover { background: #3a3733; }
.proto-a .closing .closing-btn:focus-visible, .proto-a .closing .closing-link:focus-visible { outline: 2px solid #292724; outline-offset: 4px; }
.proto-a .closing .closing-sub { margin: 1.1rem 0 0; max-width: 40ch; }
.proto-a .closing .closing-link { display: inline-flex; align-items: center; gap: .5em; font: 500 1rem/1.4 var(--sans); color: #292724; text-decoration: underline; text-decoration-color: rgba(41, 39, 36, .5); text-underline-offset: 4px; transition: text-decoration-color .2s ease; }
.proto-a .closing .closing-link:hover { text-decoration-color: #292724; }
@media (max-width: 600px) { .proto-a .closing .closing-btn { width: 100%; } }

/* Version A: curated "Table inspiration" strip and light footer */
.proto-a .inspo { background: #FAF7F2; padding-block: clamp(36px, 5vw, 64px) clamp(24px, 3vw, 40px); }
.proto-a .inspo h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0 0 1.2rem; }
.proto-a .inspo-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.proto-a .inspo-grid li { aspect-ratio: 1; background: #FAF7F2; overflow: hidden; }
.proto-a .inspo-grid a { display: block; height: 100%; }
.proto-a .inspo-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proto-a .inspo-grid li:has(img[src$=".webp"]) img { object-fit: contain; padding: 6%; background: #FAF7F2; }
.proto-a .inspo-grid a img { transition: opacity .25s ease; }
.proto-a .inspo-grid a:hover img { opacity: .85; }
.proto-a .inspo-grid a:focus-visible { outline: 2px solid #292724; outline-offset: -2px; }
.proto-a .site-footer-a { background: #FAF7F2; color: #292724; border-top: 1px solid var(--rule); padding-block: clamp(32px, 4vw, 56px) 20px; }
.proto-a .site-footer-a .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: clamp(24px, 4vw, 48px); }
.proto-a .site-footer-a .foot-grid img { width: 200px; height: auto; }
.proto-a .site-footer-a .tagline { color: #4a4a45; }
.proto-a .site-footer-a h3 { font: 500 .8125rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #5b5a54; margin: 0 0 14px; }
.proto-a .site-footer-a ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.proto-a .site-footer-a a { color: #292724; font-family: var(--sans); text-decoration: none; overflow-wrap: anywhere; padding-block: 2px; }
.proto-a .site-footer-a a:hover { text-decoration: underline; text-underline-offset: 4px; }
.proto-a .site-footer-a a:focus-visible { outline: 2px solid #292724; outline-offset: 3px; }
.proto-a .site-footer-a .legal { margin: 28px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); font-size: .875rem; color: #5b5a54; }
@media (max-width: 900px) {
  .proto-a .inspo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .proto-a .site-footer-a .foot-grid { grid-template-columns: 1fr 1fr; }
  .proto-a .site-footer-a .foot-grid > div:first-child, .proto-a .site-footer-a .foot-grid > nav:last-child { grid-column: 1 / -1; }
  .proto-a .site-footer-a ul { gap: 12px; }
}
@media (max-width: 600px) { .proto-a .inspo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.proto-a .site-footer-a .foot-grid { margin-top: 0; padding-top: 0; border-top: 0; } .proto-a .site-footer-a { border-top: 0; }

/* ---------- Refinement pass (Impeccable polish, distill, typeset, layout, adapt): proposed for review ----------
   Shop pages and small screens. Approved copy, fonts, colours, logo, photography and product facts are unchanged. */

/* Typeset: running text never ends on a lone word (both versions) */
.proto p, .proto li, .proto dd { text-wrap: pretty; }

/* Version A shop, distill and layout: the products and their names start about 180 px higher on the page */
.proto-a .page-head:has(+ section .shop-tabs) { padding-block: clamp(28px, 3.5vw, 52px) clamp(28px, 3vw, 40px); }
.proto-a .shop-tabs { margin-bottom: clamp(24px, 2.6vw, 36px); }
.proto-a .shop-source { margin-bottom: clamp(24px, 2.6vw, 36px); }
.proto-a .product-card figure { aspect-ratio: 5 / 4; }
.proto-a .product-card figure img { width: 62%; height: auto; }
/* Polish: one soft lift on the tile instead of a heavy card shadow stacked on the plate's own shadow */
.proto-a .product-card figure { box-shadow: 0 1px 2px rgba(20, 30, 24, .05), 0 14px 28px -20px rgba(20, 30, 24, .28); }
.proto-a .product-card .collection { display: block; line-height: 1.5; }
.proto-a .product-card .view { display: block; line-height: 1.45; }
.proto-a .product-card .view .icon { vertical-align: -0.12em; margin-left: .3em; }

/* Version A home, polish: the Dinnerware tile (a cut-out plate) keeps the plate clear of its label and uses a shorter, lighter shade,
   so it no longer reads as a grey band over the plate */
.proto-a .cat-row img.is-contain { padding: 5% 8% 20%; }
.proto-a .cat-row a:has(img.is-contain)::after { background: linear-gradient(0deg, rgba(15, 18, 16, .62) 0%, rgba(15, 18, 16, 0) 34%); }

/* Version B shop, polish: the Add action uses the approved charcoal of the header and Amalfi actions (the old green is retired) */
.proto-b .shop-layout { --char: #292724; --ivory: #FAF7F2; }
.proto-b .pcard .btn-field { background: var(--char); color: var(--ivory); }
.proto-b .pcard .btn-field:hover { background: #000; }
.proto-b .pcard .btn-field:active { background: #3b3835; transform: none; box-shadow: none; }
.proto-b .shop-layout :focus-visible, .proto-b .pswatch input:focus-visible + label { outline-color: var(--char); }
.proto-b .shop-side li a[aria-current="page"], .proto-b .pcard .added { color: var(--char); }

/* Version B hero, desktop: the whole arch (and its outline) fits on the first screen under the banner and the pinned header.
   Its height is capped to the space left, and the width follows from the 4:5 shape, so the film is never stretched or cropped differently. */
@media (min-width: 901px) {
  .proto-b .hero-media { justify-self: center; align-self: start; width: min(100%, max(300px, calc((100svh - var(--bar-h, 0px) - var(--head-h, 96px) - clamp(40px, 5vw, 72px) - 36px) * .8))); }
}

@media (max-width: 900px) {
  /* Version B hero, adapt: the arched film sits inside the page margins with its whole curve visible, instead of being cut by the screen edges */
  .proto-b .hero { padding-top: clamp(16px, 4vw, 32px); }
  .proto-b .hero-media { margin-inline: 0; width: 100%; max-width: 560px; aspect-ratio: 6 / 5; outline-offset: 8px; }
}

@media (max-width: 520px) {
  /* Version A shop, adapt: all four category tabs fit on a phone (they wrap at 320 px rather than hiding Flatware off-screen) */
  .proto-a .shop-tabs { justify-content: center; flex-wrap: wrap; overflow: visible; gap: 2px 14px; }
  .proto-a .shop-tabs a { font-size: .75rem; letter-spacing: .05em; }
  /* Version A shop, layout and typeset: product text in the two-column grid reads as one compact block */
  .proto-a .product-card figure { margin-bottom: 12px; }
  .proto-a .product-card .collection { font-size: .6875rem; letter-spacing: .1em; }
  .proto-a .product-card h2 { font-size: 1.1875rem; line-height: 1.15; margin: 4px 0 8px; }
  .proto-a .product-card .view { font-size: .8125rem; letter-spacing: .02em; }
  /* Version B shop, distill: shorter photo boxes so a phone shows each product with its controls instead of one plate per screen */
  .proto-b .pcard figure { aspect-ratio: 4 / 3; overflow: hidden; }
  .proto-b .pcard figure img { width: 58%; height: auto; }
  /* Version B hero, typeset: the eyebrow breaks into two even lines instead of leaving "Rentals" alone */
  .proto-b .hero .eyebrow { text-wrap: balance; }
}

/* Footer credit: Business Web Express and its email read as links */
.proto .build-info a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.proto .build-info a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* Back link on every inner page: small caps and the site's own line arrow, pointing left */
.back-bar { padding-top: clamp(14px, 1.8vw, 22px); }
.back-link { display: inline-flex; align-items: center; gap: .6em; min-height: 44px; font: 500 .8125rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #292724; text-decoration: none; }
.back-link { text-underline-offset: .45em; }
.back-link .icon { width: 1.35em; height: 1.35em; transform: rotate(180deg); transition: transform .35s var(--ease); }
.back-link:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.back-link:hover .icon { transform: rotate(180deg) translateX(4px); }
.back-link:focus-visible { outline: 2px solid #292724; outline-offset: 4px; }
.proto-a .back-link:hover { text-decoration-color: var(--gold); }
.proto-a .back-bar + .page-head { padding-top: clamp(28px, 3.5vw, 52px); }
.proto-b .back-bar + .shop-head { padding-top: clamp(28px, 3.5vw, 52px); }

/* Top and bottom arrows: a slim square pair at the lower right, in each version's palette (A ivory and charcoal hairline, B charcoal) */
.page-jump { position: fixed; right: clamp(12px, 2vw, 28px); bottom: clamp(16px, 2.4vw, 32px); z-index: 60; display: grid; gap: 6px; }
.page-jump[hidden], .page-jump button[hidden] { display: none; }
.page-jump button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; cursor: pointer; border: 1px solid rgba(41, 39, 36, .35); background: rgba(250, 247, 242, .94); color: #292724; box-shadow: 0 10px 24px -14px rgba(20, 30, 24, .45); transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
.page-jump .icon { width: 22px; height: 22px; }
.page-jump [data-jump="top"] .icon { transform: rotate(-90deg); }
.page-jump [data-jump="bottom"] .icon { transform: rotate(90deg); }
.page-jump button:hover { background: #292724; color: #FAF7F2; transform: translateY(-2px); }
.page-jump button:focus-visible { outline: 2px solid #292724; outline-offset: 3px; }
.proto-b .page-jump button { background: #292724; color: #FAF7F2; border-color: #292724; }
.proto-b .page-jump button:hover { background: #000; border-color: #000; }
@media (max-width: 600px) { .page-jump { right: 8px; bottom: 12px; gap: 4px; } .page-jump button { width: 40px; height: 40px; } }
@media (prefers-reduced-motion: reduce) { .page-jump button, .back-link .icon { transition: none; } .page-jump button:hover { transform: none; } }

/* Clarity pass: June 2027 availability, pricing and minimums, quote form guidance */
.proto-a .show-date { display: inline-block; margin: 1.1rem 0 0; padding: .55rem 1.1rem; border: 1px solid #292724; font: 500 .9375rem/1.3 var(--sans); letter-spacing: .02em; color: #292724; }
.proto-b .amalfi .note .avail { display: inline-block; margin-top: .6rem; padding: .5rem 1rem; background: #292724; color: #FAF7F2; font: 500 .9375rem/1.3 var(--sans); letter-spacing: .02em; }
.proto-a .zones-note-a { margin: 1rem 0 0; max-width: 60ch; font-size: 1rem; line-height: 1.55; color: #292724; }
.quote-guide { display: grid; gap: 8px; margin: 0 0 1.25rem; padding: 1rem 1.15rem; border-left: 2px solid currentColor; font-size: .9375rem; line-height: 1.55; }
.quote-guide p { margin: 0; max-width: 62ch; }

/* Homepage progression: "next step" links between sections */
.next-step { margin: 1.5rem 0 0; }
.next-step-wrap { padding-top: 0; padding-bottom: 0; }
.proto-a .next-step-wrap { margin: -1.25rem auto 1.5rem; }
.proto-b .next-step-wrap { margin: -1rem auto 1.5rem; }
.proto-a .how-a .next-step, .proto-b #how .next-step { margin-top: 1.25rem; }

/* Type pass: minimum sizes for small text, overlay readability, FAQ heading order */
.proto-b .site-header .nav-desktop a, .proto-b .site-header nav a { font-size: .875rem; }
.proto-a .site-header nav a { font-size: max(.875rem, 1em); }
.btn { font-size: .875rem; }
.back-link { font-size: .875rem; }
.shop-tabs a { font-size: .8125rem; }
.proto-a .product-card .collection, .pcard-coll { font-size: .8125rem; }
.proto-a .show-label, .proto-b .swatch-name, .proto-a .show-origin { font-size: .875rem; }
.proto-a .map-note, .proto-b .shop-source, .proto-a .shop-source { font-size: .875rem; }
.sim-tag { font-size: .8125rem; }
.proto-a .delivery-a th, .proto-b .delivery th, .faq-answer th, .faq-zones th { font-size: .8125rem; }
/* Overlay readability: stronger scrims behind white text on photographs */
.proto-a .cat-row a::after, .proto-a .cat-row a:has(img.is-contain)::after { background: linear-gradient(0deg, rgba(15, 18, 16, .84) 0%, rgba(15, 18, 16, .52) 32%, rgba(15, 18, 16, 0) 64%); }
.proto-a .cat-name { text-shadow: 0 1px 12px rgba(15, 18, 16, .55); }
.proto-a .hero .hero-copy h1, .proto-a .hero .hero-copy p { text-shadow: 0 1px 16px rgba(14, 12, 8, .6); }
@media (max-width: 800px) { .proto-a .hero::after { background: linear-gradient(180deg, rgba(14, 12, 8, .62) 0%, rgba(14, 12, 8, .55) 38%, rgba(14, 12, 8, .78) 100%); } }
.proto-a .shop-tabs a, .collection, .pcard-coll { font-size: .8125rem !important; }

/* Polish pass: product dialog rhythm, matched control heights, two-tone swatches, touch targets */
.product-dialog .pd-add { align-items: stretch; }
.product-dialog .pd-add .btn { min-height: 50px; padding-block: 0; }
.product-dialog .pd-note { margin: .85rem 0 0; line-height: 1.5; }
.product-dialog .variant-note:empty { display: none; }
.variant-choice .dot, .proto-a .variant-choice .dot { border-color: rgba(41, 39, 36, .28); }
.pswatch .pdot, .product-card .swatches-mini span { border-color: rgba(41, 39, 36, .28); }
.pswatch label { width: 40px; height: 40px; }
.pswatch .pdot { width: 26px; height: 26px; }
.proto-b .pcard-add { align-items: stretch; }
.proto-b .pcard-add .pcard-qty, .proto-b .pcard-add .btn { min-height: 50px; }
.product-dialog .wish-status { min-height: 0; margin: .75rem 0 0; }
.product-dialog .wish-status:empty { margin: 0; }
.product-dialog .pd-note { margin-top: .6rem; }
@media (max-width: 640px) { .product-dialog .variant-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .product-dialog .variant-choices legend { grid-column: 1 / -1; } .product-dialog .variant-choice label { height: 100%; width: 100%; box-sizing: border-box; } }

/* Looks, guest helper, sharing, after-quote journey, delivery and care. Shared by both versions through the tokens each defines. */
.looks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: clamp(20px, 3vw, 36px); }
.look { border: 1px solid var(--rule); background: #fff; padding: 20px 20px 22px; display: flex; }
.look form { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.look-plates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.look-plates li { aspect-ratio: 1; background: #fff; border: 1px solid var(--rule); display: grid; place-items: center; }
.look-plates img { width: 100%; height: 100%; object-fit: contain; }
.look-name { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-top: 6px; }
.look-blurb { margin: 0; color: var(--ink-soft); }
.look-set { margin: 0; font-size: .875rem; color: var(--ink-soft); }
.look-guests { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.look-guests label { font: 500 .9375rem/1.3 var(--sans); }
.look .qty { display: inline-flex; align-items: center; border: 1px solid var(--ink); border-radius: 2px; }
.look .qty button { width: 44px; height: 46px; background: none; border: 0; font: 400 1.25rem/1 var(--sans); color: var(--ink); cursor: pointer; }
.look .qty input { width: 64px; height: 46px; border: 0; background: transparent; text-align: center; font: 500 1rem/1 var(--sans); color: var(--ink); -moz-appearance: textfield; }
.look .qty input::-webkit-outer-spin-button, .look .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.look-estimate { background: var(--mist, var(--linen, #f1f1ee)); padding: 12px 14px; font-size: .9375rem; }
.look-estimate p { margin: 0 0 6px; font-weight: 500; }
.look-estimate ul { list-style: none; margin: 0; padding: 0; }
.look-estimate li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.look-estimate li.total { border-top: 1px solid var(--rule); margin-top: 4px; padding-top: 8px; }
.look .btn { justify-content: center; width: 100%; }
.look .added { margin: 0; min-height: 1.5em; font-size: .9375rem; }
.looks-note { margin: 28px 0 0; max-width: 70ch; color: var(--ink-soft); font-size: .9375rem; }
.looks-section { padding-block: clamp(32px, 5vw, 64px); }

.wish-tools { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); display: grid; gap: 8px; font-size: .9375rem; }
.wish-guests { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.wish-guests label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.wish-guests input { width: 84px; height: 40px; border: 1px solid var(--ink); border-radius: 2px; background: #fff; text-align: center; font: 500 1rem/1 var(--sans); color: var(--ink); }
.wish-hint { margin: 0; color: var(--ink-soft); font-size: .875rem; }
.wish-share { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.wish-tools .link-btn { background: none; border: 0; padding: 4px 0; font: inherit; font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wish-tools-status { margin: 0; min-height: 1.4em; font-size: .875rem; color: var(--ink); overflow-wrap: anywhere; }

.shared-section { padding-block: clamp(32px, 5vw, 64px); }
.shared-wishlist { max-width: 720px; }
.shared-print-title { display: none; }
.shared-date { margin: 0 0 12px; color: var(--ink-soft); font-size: .9375rem; }
.shared-lines .wish-line { grid-template-columns: 64px 1fr auto; grid-template-areas: "img text qty"; }
.shared-qty { grid-area: qty; margin: 0; font: 500 1.25rem/1 var(--sans); }
.shared-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 20px; }
.btn-outline-dark { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-outline-dark:hover { background: var(--ink); color: #fff; }
.shared-status { min-height: 1.5em; margin: 12px 0 0; font-size: .9375rem; }
@media print {
  .site-header, .site-footer, .site-footer-a, .closing, .closing-cta, .page-jump, .back-bar, .proto-banner, .shared-actions, .shared-status, .page-head, .shop-head, dialog { display: none !important; }
  body { background: #fff !important; }
  .shared-print-title { display: block; margin: 0 0 4px; font: 400 1.75rem/1.2 var(--serif); }
  .shared-wishlist { max-width: none; }
  .wish-line { break-inside: avoid; }
}

.journey { text-align: left; }
.journey-title { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0 0 8px; }
.journey-title:focus { outline: none; }
.journey-sim { margin: 0 0 12px; }
.journey-facts { list-style: none; margin: 14px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.journey-facts li { display: grid; gap: 2px; padding: 10px 12px; background: rgba(255, 255, 255, .7); border: 1px solid #c8d8c8; }
.journey-facts span { font-size: .8125rem; color: var(--ink-soft); }
.journey-steps { counter-reset: step; list-style: none; margin: 16px 0 6px; padding: 0; display: grid; gap: 12px; }
.journey-steps li { counter-increment: step; position: relative; padding-left: 40px; line-height: 1.5; }
.journey-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; font-size: .875rem; }
.journey-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 14px 0 0; }

.terms { padding-block: clamp(32px, 5vw, 64px); }
.terms > .wrap { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.terms-glance { position: sticky; top: 96px; border: 1px solid var(--rule); background: #fff; padding: 20px 22px; }
.terms-glance h2 { font-size: 1.5rem; margin-bottom: 10px; }
.terms-glance dl { margin: 0; display: grid; gap: 12px; }
.terms-glance dt { font: 500 .8125rem/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.terms-glance dd { margin: 2px 0 0; font-size: .9375rem; }
.terms-section { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--rule); scroll-margin-top: 100px; }
.terms-section h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin-bottom: 12px; }
.terms-cta { margin: 0; }
@media (max-width: 800px) { .terms > .wrap { grid-template-columns: 1fr; } .terms-glance { position: static; } }
.shared-actions[hidden] { display: none; }
.terms .terms-section { padding-block: 0 28px; }

/* Prototype wow features (sample data): table-setting visualizer */
.viz-tag { margin: 0 0 20px; font-size: .9375rem; color: var(--ink-soft); }
.viz-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.viz-stage { margin: 0; position: sticky; top: 96px; }
.viz-picture svg { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.viz-stage figcaption { margin-top: 10px; font-size: .9375rem; color: var(--ink-soft); }
.viz-controls { display: grid; gap: 16px; }
.viz-controls fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.viz-controls legend { padding: 0; margin-bottom: 8px; font-weight: 500; }
.viz-look-buttons { display: grid; gap: 8px; }
.viz-look { text-align: left; border: 1px solid var(--rule); background: #fff; padding: 10px 14px; cursor: pointer; font: inherit; color: var(--ink); display: grid; gap: 2px; min-height: 44px; }
.viz-look span { font-size: .875rem; color: var(--ink-soft); }
.viz-look[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.viz-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.viz-choice { position: relative; }
.viz-choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.viz-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--rule); background: #fff; font-size: .9375rem; }
.viz-chip[style]::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: var(--chip); border: 1px solid rgba(0,0,0,.3); }
.viz-choice input:checked + .viz-chip { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 500; }
.viz-choice input:focus-visible + .viz-chip, .viz-look:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.viz-guests { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.viz-guests input { width: 100px; height: 44px; border: 1px solid var(--ink); border-radius: 2px; text-align: center; font: 500 1rem/1 var(--sans); }
.viz-summary { background: var(--mist, #f1f1ee); padding: 12px 14px; font-size: .9375rem; }
.viz-summary ul { list-style: none; margin: 0 0 8px; padding: 0; }
.viz-summary li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.viz-total { margin: 0; }
.viz-fine { color: var(--ink-soft); font-size: .8125rem; }
@media (max-width: 860px) { .viz-grid { grid-template-columns: 1fr; } .viz-stage { position: static; } }

/* Instant estimate in the wishlist (sample prices) */
.wish-estimate { margin-top: 14px; padding: 12px 14px; background: var(--mist, #f1f1ee); font-size: .9375rem; display: grid; gap: 8px; }
.wish-estimate h3 { margin: 0; font: 500 1rem/1.3 var(--sans); }
.wish-estimate ul { list-style: none; margin: 0; padding: 0; }
.wish-estimate li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.wish-estimate li.total { border-top: 1px solid var(--rule); margin-top: 4px; padding-top: 8px; font-weight: 600; }
.estimate-area { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 500; }
.estimate-area select { min-height: 40px; border: 1px solid var(--ink); background: #fff; padding: 0 8px; font: inherit; }
.estimate-fine { margin: 0; font-size: .8125rem; color: var(--ink-soft); }
.estimate-warn { margin: 0; color: #8a2017; font-size: .875rem; }

/* Mock proposal and deposit (prototype) */
.prop { max-width: 760px; display: grid; gap: 20px; }
.prop-card { border: 1px solid var(--rule); background: #fff; padding: clamp(16px, 3vw, 28px); display: grid; gap: 14px; }
.prop-card h2 { margin: 0; font-size: 1.375rem; }
.prop-totals { list-style: none; margin: 0; padding: 0; }
.prop-totals li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.prop-totals li.total, .prop-totals li.deposit { border-top: 1px solid var(--rule); margin-top: 4px; padding-top: 8px; font-weight: 600; }
.prop-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.prop-agree { display: flex; gap: 10px; align-items: flex-start; }
.prop-done { margin: 0; padding: 10px 12px; background: #eef4ee; border: 1px solid #b9cdb9; color: #1d3a2d; }
.prop-confirm { border-color: #b9cdb9; background: #f6faf6; }
.journey-proposal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.prop .link-btn { background: none; border: 0; padding: 4px 0; font: inherit; font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media print { .prop-card [data-prop-print], .prop-card [data-prop-reset], .viz-tag { display: none; } }
.prop [hidden] { display: none !important; }
.prop-lines { list-style: none; margin: 0; padding: 0; }
.prop-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.prop-lines small { color: var(--ink-soft); }