/* Mrad Flowers public site. Tokens from BRAND.md. Mobile first: base styles
   target 375 px, then min-width layers at 768 px (tablet) and 1024/1280 px
   (desktop).

   The finish is editorial: one serif at large sizes and light weight, small
   tracked capitals for labels, hairline rules instead of boxes, square
   buttons, generous space, numbered chapters, and a faint paper grain.

   Dark (Omar, 2026-11-05): the whole site follows the opening film, near
   black with cream type. Burgundy stays for surfaces and buttons; the one
   accent for words is a soft rose (--accent), since burgundy text would
   disappear on black. Token names are the old ones: --cream is the page,
   --charcoal is the text. */
:root {
  color-scheme: dark;
  --burgundy: #3F1215;
  --burgundy-2: #2A0B0E;
  --wine: #5C1D24;
  --blush: #C6AAA7;
  --mauve: #82464D;
  --cream: #120A0B;
  --cream-ink: #F2E4DE;
  --paper: #180C0E;
  --ink: #0B0708;
  --gold: #C8A96A;
  --gold-ink: #CDB07A;
  --charcoal: #EFE4DE;
  --olive: #A7AE8C;
  --taupe: #181311;
  --taupe-deep: #211A17;
  --text: #EFE4DE;
  --accent: #DDA3AC;
  --muted: #ADA099;
  --line: rgba(221, 163, 172, .14);
  --line-strong: rgba(221, 163, 172, .3);
  --radius: 2px;
  --gutter: 22px;
  --section: 96px;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Montserrat", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-soft: cubic-bezier(.25, .1, .1, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); font-size: 16px; font-weight: 400; color: var(--text); background: var(--cream); line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--burgundy); color: var(--cream-ink); }
.wrap { width: min(1240px, 100% - var(--gutter) * 2); margin-inline: auto; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.04; letter-spacing: -.015em; text-wrap: balance; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--accent); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--burgundy); color: var(--cream-ink); padding: 12px 18px; text-decoration: none; }
.skip:focus { top: 12px; }

/* A faint paper grain over everything, like a printed catalogue. */
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .05; mix-blend-mode: screen; 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 .25 0 0 0 0 .07 0 0 0 0 .08 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------------------------------------------------------------- labels */
.eyebrow { display: flex; align-items: center; gap: 14px; font-size: 11px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--olive); }
.eyebrow .idx { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--charcoal); }
.eyebrow .idx::after { content: ""; display: inline-block; vertical-align: middle; width: 36px; height: 1px; margin-inline-start: 14px; background: var(--line-strong); }

/* ---------------------------------------------------------------- buttons
   Square, tracked capitals, a 44 px minimum hit target everywhere. */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 30px; border-radius: var(--radius); font: 600 11.5px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; cursor: pointer; overflow: hidden; isolation: isolate; transition: color .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleY(0); transform-origin: 50% 100%; transition: transform .55s var(--ease); }
.btn:hover::before { transform: scaleY(1); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn-burgundy { background: var(--burgundy); color: var(--cream-ink); }
.btn-burgundy::before { background: var(--wine); }
.btn-ghost { border-color: var(--line-strong); color: var(--charcoal); background: transparent; }
.btn-ghost::before { background: var(--burgundy); }
.btn-ghost:hover { color: var(--cream-ink); border-color: var(--charcoal); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold::before { background: #D9BE85; }
.btn-cream { background: var(--cream-ink); color: var(--burgundy); }
.btn-cream::before { background: #fff; }

/* A text link with a hairline that draws in on hover. */
.text-link, .shot .order { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--charcoal); text-decoration: none; }
.text-link::after, .shot .order::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: currentColor; transform: scaleX(.35); transform-origin: 0 50%; transition: transform .5s var(--ease); }
.text-link:hover::after, .shot .order:hover::after { transform: scaleX(1); }

/* ---------------------------------------------------------------- scroll progress */
.progress { position: fixed; inset: 0 0 auto 0; height: 1px; z-index: 70; pointer-events: none; }
.progress span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--accent); }

/* ---------------------------------------------------------------- header
   Transparent over the hero, a cream bar with a hairline after it, tucked
   away while scrolling down. */
header.top { position: fixed; inset: 0 0 auto 0; z-index: 60; border-bottom: 1px solid transparent; transition: background .5s ease, transform .5s var(--ease), border-color .5s ease; }
header.top.solid { background: rgba(42, 11, 14, .88); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-color: var(--line); }
header.top.away { transform: translateY(-100%); }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 16px; }
header.top .logo { display: inline-flex; min-height: 44px; align-items: center; }
header.top .logo img { height: 28px; width: auto; }
header.top nav { display: flex; align-items: center; gap: 28px; }
header.top nav a.link { position: relative; display: none; padding: 12px 0; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--charcoal); text-decoration: none; }
header.top nav a.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease); }
header.top nav a.link:hover::after { transform: scaleX(1); }
header.top .btn { min-height: 44px; padding: 0 14px; font-size: 10px; letter-spacing: .14em; white-space: nowrap; }
@media (min-width: 768px) { header.top .btn { padding: 0 20px; font-size: 10.5px; letter-spacing: .2em; } }
header.top .lang { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-size: 14px; font-weight: 600; color: var(--charcoal); text-decoration: none; }
header.top .lang:hover { color: var(--olive); }

/* ---------------------------------------------------------------- sections */
section { padding: var(--section) 0; }
.head { display: grid; gap: 22px; margin-bottom: 52px; }
.head h2, .visit h2 { font-size: clamp(42px, 10.5vw, 96px); margin-top: 18px; color: var(--charcoal); }
.head p { max-width: 42ch; color: var(--muted); font-size: 15.5px; }

[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
[data-split] .w > * { display: inline-block; transform: translateY(110%); transition: transform 1.2s var(--ease) calc(var(--i) * 80ms); }
[data-split].in .w > * { transform: none; }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1.1s var(--ease-soft), transform 1.2s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.frame.reveal img, .shot.reveal img { transition: clip-path 1.5s var(--ease), transform 2s var(--ease), opacity .6s ease; }
.frame.reveal img, .shot.reveal img { clip-path: inset(100% 0 0 0); transform: scale(1.14); }
.frame.reveal.in img, .shot.reveal.in img { clip-path: inset(0 0 0 0); transform: none; }

/* ---------------------------------------------------------------- occasions
   The occasions as a line of serif words, each one a WhatsApp message. */
.occasions { background: var(--cream); }
.chips { list-style: none; display: grid; grid-template-columns: 1fr; column-gap: 56px; border-top: 1px solid var(--line-strong); }
.chips li { border-bottom: 1px solid var(--line); }
.chip { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; font-family: var(--serif); font-size: clamp(28px, 6.4vw, 44px); line-height: 1.15; color: var(--charcoal); text-decoration: none; transition: color .45s var(--ease), padding .6s var(--ease); }
.chip::after { content: ""; flex: none; width: 34px; height: 1px; background: currentColor; transition: width .6s var(--ease); }
.chip:hover { color: var(--accent); font-style: italic; padding-inline-start: 14px; }
.chip:hover::after { width: 64px; }
.chips li.is-season .chip { font-style: italic; color: var(--accent); }
.chips li.is-season .chip::after { width: 64px; height: 2px; background: var(--gold); }

/* ---------------------------------------------------------------- how to order */
.open-status { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--muted); }
.open-status svg { width: 16px; height: 16px; flex: none; }
.open-status.is-open { color: #8FCB9A; }
.open-status.is-open::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 rgba(143, 203, 154, .45); animation: pulse 2.4s ease-out infinite; }
.open-status.is-open svg { display: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(143, 203, 154, 0); } 100% { box-shadow: 0 0 0 0 rgba(143, 203, 154, 0); } }

/* ---------------------------------------------------------------- gallery */
.gallery { background: var(--cream); }
.shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 14px; align-items: start; }
.shots .shot:nth-child(even) { margin-top: 56px; }
.shot .frame img { aspect-ratio: 3 / 4; }
.shot .frame img, .shot:hover .frame img { transition: clip-path 1.5s var(--ease), transform 1.4s var(--ease); }
.shot:hover .frame img { transform: scale(1.04); }
.shot figcaption { margin-top: 14px; display: grid; gap: 2px; }
.shot figcaption span { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.3; color: var(--charcoal); }
.shot .order { justify-self: start; font-size: 10.5px; }

/* ---------------------------------------------------------------- frames */
.frame { position: relative; border-radius: var(--radius); overflow: hidden; transition: transform .5s var(--ease), opacity 1.1s ease; }
.frame img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* ---------------------------------------------------------------- luxury
   The one place gold appears: hairline frames set off the photos. */
.lux { background: var(--cream); color: var(--charcoal); overflow: hidden; }
.lux .wrap { display: grid; gap: 64px; align-items: center; }
.lux .eyebrow { color: var(--gold-ink); }
.lux .eyebrow .idx { color: var(--gold-ink); }
.lux .eyebrow .idx::after { background: var(--gold); }
.lux h2 { font-size: clamp(42px, 10vw, 92px); margin: 20px 0 16px; }
.lux h2 em { color: var(--gold-ink); }
.lux .script { font-family: var(--serif); font-style: italic; color: var(--gold-ink); font-size: 24px; margin-bottom: 22px; }
.lux p { color: var(--muted); max-width: 42ch; }
.lux .actions { margin-top: 36px; }
.lux .pics { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 14px 0 0 14px; align-items: start; }
.lux .pics .frame img { aspect-ratio: 4 / 5; }
.lux .pics .frame { overflow: visible; }
.lux .pics .frame img { border-radius: var(--radius); }
.lux .pics .frame::before { content: ""; position: absolute; inset: -12px 12px 12px -12px; border: 1px solid var(--gold); pointer-events: none; }
.lux .pics .frame:last-child { margin-top: 64px; }

/* ---------------------------------------------------------------- visit */
.visit .grid { display: grid; gap: 56px; align-items: center; }
.visit .pics { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.visit .pics .frame:last-child { margin-top: 48px; }
.visit h2 { margin: 18px 0 34px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 34px; }
.stats div { border-top: 1px solid var(--line-strong); padding-top: 14px; }
.stats strong { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 9vw, 56px); line-height: 1; color: var(--charcoal); }
.stats span { display: block; margin-top: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.facts { display: grid; margin: 8px 0 36px; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.facts dd { font-size: 16px; color: var(--text); }
.facts dd a { text-decoration: none; border-bottom: 1px solid var(--blush); display: inline-block; padding: 8px 0; margin: -8px 0; transition: border-color .3s ease; }
.facts dd a:hover { border-color: var(--charcoal); }

/* ---------------------------------------------------------------- footer */
footer.bottom { background: var(--cream); color: var(--olive); padding: 72px 0 40px; overflow: hidden; border-top: 1px solid var(--line); }
.bigword { font-family: var(--serif); font-weight: 400; font-size: clamp(64px, 19vw, 260px); line-height: .88; letter-spacing: -.035em; color: var(--charcoal); margin-bottom: 48px; }
.bigword em { color: var(--accent); }
footer.bottom .row { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--line); }
footer.bottom img { height: 40px; width: auto; }
footer.bottom nav { display: flex; gap: 0 26px; flex-wrap: wrap; }
footer.bottom nav a { display: inline-block; padding: 12px 0; font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--charcoal); text-decoration: none; }
footer.bottom nav a:hover { color: var(--olive); }
footer.bottom small { display: block; margin-top: 22px; font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------- the opening (film)
   The bouquet floating apart (assets/video/intro.mp4), one screen, full
   bleed. js/intro.js holds the page on the first frame; the first scroll
   plays the film by itself, the words leave (--words) and the page glides
   down to Collections. Without JS or with reduced motion it is the still
   first frame. */
.intro { position: relative; height: 100vh; height: 100svh; padding: 0; background: #0E0C0B; color: var(--cream-ink); }
.intro-stage { position: relative; height: 100%; overflow: hidden; display: flex; align-items: flex-end; }
.intro-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* Shade for the words; it lifts as they leave. */
.intro-stage::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(14, 12, 11, .85) 0%, rgba(14, 12, 11, .35) 42%, rgba(14, 12, 11, 0) 70%), linear-gradient(180deg, rgba(14, 12, 11, .55) 0, rgba(14, 12, 11, 0) 140px); opacity: calc(.3 + .7 * var(--words, 1)); }
.intro-text { position: relative; z-index: 2; width: min(1240px, 100% - var(--gutter) * 2); margin: 0 auto; padding-bottom: 64px; opacity: var(--words, 1); transform: translate3d(0, calc((1 - var(--words, 1)) * -40px), 0); }
.intro.is-done .intro-text, .intro.is-done .cue { visibility: hidden; }
html.intro-locked { overflow: hidden; }
html.intro-locked body { overscroll-behavior: none; }
html:not(.intro-live) .cue { display: none; }
.intro .eyebrow { color: var(--blush); }
.intro .eyebrow::before { content: ""; width: 36px; height: 1px; background: rgba(242, 228, 222, .5); }
.intro h1 { margin: 14px 0 16px; max-width: 11ch; font-size: clamp(50px, 13vw, 150px); line-height: .94; letter-spacing: -.03em; color: var(--cream-ink); }
.intro h1 em { color: var(--accent); }
.intro .lede { max-width: 40ch; font-size: 15.5px; color: rgba(242, 228, 222, .86); }
.hero-links { display: flex; flex-wrap: wrap; gap: 6px 34px; margin-top: 20px; }
.intro .arrow-link, .intro .arrow-link.quiet { color: var(--cream-ink); }
.intro .open-status { margin-top: 10px; color: rgba(242, 228, 222, .8); }
.arrow-link { position: relative; display: inline-flex; align-items: center; gap: 14px; min-height: 48px; font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
.arrow-link::after { content: ""; position: absolute; inset-inline: 0 30px; bottom: 11px; height: 1px; background: currentColor; transform-origin: 0 50%; transition: transform .6s var(--ease); }
.arrow-link .arr { width: 22px; height: 22px; flex: none; transition: transform .6s var(--ease); }
.arrow-link:hover .arr { transform: translateX(8px); }
.arrow-link:hover::after { transform: scaleX(.6); }
.arrow-link.quiet { color: var(--charcoal); }
.cue { position: absolute; z-index: 3; inset-inline-end: var(--gutter); bottom: 30px; display: flex; align-items: center; gap: 14px; font-size: 10px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: rgba(242, 228, 222, .8); opacity: var(--words, 1); }
.cue span { width: 1px; height: 40px; background: linear-gradient(rgba(242, 228, 222, .8), transparent); animation: cue 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-width: 767px) {
  /* Phones (#147): the 16:9 film is not stretched to the full height (that
     made the bouquet huge and cut it at the edge). It is scaled so the
     whole bouquet fits, centred on the screen, fading into the dark above
     and below (a gradient over the stage, not a mask on the playing video). The bouquet starts right of the film's centre, so the film
     slides to keep it in the middle as it comes apart. */
  .intro-film { inset: auto; left: 50%; top: 40%; width: 235vw; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transform: translate(-68%, -50%); transition: transform 3.2s cubic-bezier(.4, 0, .2, 1); }
  .intro-stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, #0E0C0B calc(40% - 66vw), rgba(14, 12, 11, 0) calc(40% - 45vw), rgba(14, 12, 11, 0) calc(40% + 45vw), #0E0C0B calc(40% + 66vw)); }
  .intro.is-playing .intro-film { transform: translate(-66%, -38%); }
  .intro-text { padding-bottom: 40px; }
  .arrow-link.quiet, .cue { display: none; }
}
@media (min-width: 1024px) {
  .intro-text { padding-bottom: 88px; }
  .intro h1 { font-size: clamp(84px, 9vw, 150px); }
}
/* The header reads light while it sits on the film. */
header.top.on-film:not(.solid) nav a.link, header.top.on-film:not(.solid) .lang { color: var(--cream-ink); }

/* ---------------------------------------------------------------- seasonal note */
.season[hidden] { display: none; }
.season { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 4px 4px 16px; margin-bottom: 18px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: rgba(255, 255, 255, .06); color: var(--charcoal); font-size: 12.5px; font-weight: 500; text-decoration: none; }
.season .dot { width: 7px; height: 7px; border-radius: 50%; background: #B3262E; flex: none; }
.season .when { margin-inline-start: -12px; }
.season .go { padding: 9px 14px; background: var(--burgundy); color: var(--cream-ink); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }

/* ---------------------------------------------------------------- order bar
   Phones and tablets: fixed at the bottom once the visitor scrolls past the
   opening (js/alive.js toggles .on). Desktop keeps the header button. */
.order-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); background: rgba(42, 11, 14, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .5s var(--ease); }
.order-bar.on { transform: none; }
.order-bar .btn { width: 100%; min-height: 54px; }
footer.bottom { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }

/* ---------------------------------------------------------------- tablet */
@media (min-width: 768px) {
  :root { --gutter: 40px; --section: 132px; }
  .head { grid-template-columns: 1.4fr 1fr; align-items: end; gap: 40px; }
  .head p { justify-self: end; }
  .shots { gap: 48px 26px; }
  .shots .shot:nth-child(even) { margin-top: 80px; }
  .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; }
  .chips li:nth-child(-n + 2) { border-top: 1px solid var(--line-strong); }
  .facts div { grid-template-columns: 140px 1fr; gap: 12px; align-items: baseline; }
}

/* ---------------------------------------------------------------- desktop */
@media (min-width: 1024px) {
  :root { --gutter: 56px; --section: 140px; }
  header.top .wrap { height: 80px; }
  header.top .logo img { height: 34px; }
  header.top nav a.link { display: inline-block; }
  .shots { grid-template-columns: repeat(3, 1fr); gap: 56px 36px; }
  .shots .shot:nth-child(even) { margin-top: 0; }
  .shots .shot:nth-child(3n + 2) { margin-top: 96px; }
  .lux .wrap { grid-template-columns: 1fr 1.15fr; gap: 96px; }
  .visit .grid { grid-template-columns: 1.1fr 1fr; gap: 96px; }
  .order-bar { display: none; }
  footer.bottom { padding-bottom: 40px; }
}
@media (max-width: 767px) { .season .when { display: none; } }

/* ---------------------------------------------------------------- reduced motion
   alive.js adds html.still; nothing moves on its own. */
html.still .reveal, html.still [data-split] .w > * { opacity: 1; transform: none; transition: none; }
html.still .frame.reveal img, html.still .shot.reveal img { clip-path: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .cue span { animation: none; }
}

/* Small tags on the gallery photos (from the research: product badges).
   Descriptive only: what the piece is, never a sales claim. */
.shot .frame .tag { position: absolute; z-index: 2; top: 12px; inset-inline-start: 12px; padding: 6px 10px; background: rgba(251, 247, 243, .92); color: #1A1513; font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; line-height: 1.2; opacity: 0; transform: translateY(-4px); transition: opacity .6s ease .7s, transform .6s var(--ease) .7s; }
.shot.in .frame .tag, html.still .shot .frame .tag { opacity: 1; transform: none; }
.shot .frame .tag.is-lux { color: var(--gold-ink); box-shadow: inset 0 0 0 1px var(--gold); }

/* Gallery: a second view of each piece (from the research: a second image on
   hover or swipe). It is a close-up of the same photo; hover shows it on
   desktop, the round button flips it anywhere (touch, keyboard). */
.shot .frame .alt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s var(--ease-soft); }
.shot .frame.show-alt .alt { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .shot .frame:hover .alt { opacity: 1; }
}
.shot .flip { position: absolute; z-index: 3; bottom: 12px; inset-inline-end: 12px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(251, 247, 243, .9); color: #1A1513; cursor: pointer; opacity: 0; transition: opacity .6s ease .7s, background .3s ease, color .3s ease; }
.shot.in .flip, html.still .shot .flip { opacity: 1; }
.shot .flip svg { width: 18px; height: 18px; }
.shot .flip[aria-pressed="true"] { background: var(--burgundy); color: var(--cream-ink); }
.shot .dots { position: absolute; z-index: 3; bottom: 28px; inset-inline-start: 14px; display: flex; gap: 6px; }
.shot .dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(251, 247, 243, .55); transition: background .4s ease; }
.shot .dots i:first-child, .shot .frame.show-alt .dots i:last-child { background: #fff; }
.shot .frame.show-alt .dots i:first-child { background: rgba(251, 247, 243, .55); }
@media (hover: hover) and (pointer: fine) {
  .shot .frame:hover .dots i:first-child { background: rgba(251, 247, 243, .55); }
  .shot .frame:hover .dots i:last-child { background: #fff; }
}

header.top.away { transform: translateY(-100%); }

  }

/* ---------------------------------------------------------------- build your own
   Under the occasions: steps on hairlines on the left, the bouquet so far on
   a burgundy card on the right (sticky on desktop, last on phones). */
.byo { display: grid; gap: 40px; margin-top: 88px; padding-top: 56px; border-top: 1px solid var(--line-strong); }
.byo-kicker { font-size: 10.5px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--olive); }
.byo-intro h3 { margin: 14px 0 14px; font-size: clamp(34px, 7.6vw, 60px); line-height: 1.02; color: var(--charcoal); }
.byo-intro p:last-child { max-width: 46ch; color: var(--muted); font-size: 15.5px; }
.byo-steps { display: grid; gap: 44px; min-width: 0; }
.byo-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.byo-step legend { display: flex; align-items: baseline; gap: 14px; padding: 0; margin-bottom: 14px; font-size: 11px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--charcoal); }
.byo-step legend .n { font-family: var(--serif); font-style: italic; font-size: 22px; font-weight: 400; letter-spacing: 0; color: var(--olive); }
.stems { list-style: none; border-top: 1px solid var(--line-strong); }
.stem { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.stem-name { display: grid; gap: 0; }
.stem-name .en { font: 400 24px/1.2 var(--serif); color: var(--charcoal); transition: color .4s var(--ease); }
.stem.is-on .stem-name .en { color: var(--accent); }
.qty { display: flex; align-items: center; gap: 6px; }
.qty .step { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; background: none; color: var(--charcoal); cursor: pointer; touch-action: manipulation; user-select: none; transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.qty .step { padding: 0; line-height: 0; }
.qty .step svg { display: block; width: 16px; height: 16px; }
.qty .step:hover { background: var(--burgundy); border-color: var(--burgundy); color: var(--cream-ink); }
.qty input { width: 64px; height: 44px; border: 0; background: none; text-align: center; font: 400 26px/1 var(--serif); color: var(--charcoal); -moz-appearance: textfield; appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.opts { display: flex; flex-wrap: wrap; gap: 4px 26px; border-top: 1px solid var(--line-strong); padding-top: 10px; }
.opt { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 14.5px; color: var(--muted); }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt .t { padding: 4px 0; border-bottom: 1px solid transparent; transition: color .35s var(--ease), border-color .35s var(--ease); }
.opt:hover .t { color: var(--charcoal); }
.opt input:checked ~ .t { color: var(--accent); border-bottom-color: var(--accent); }
.opt input:focus-visible ~ .t { outline: 2px solid var(--gold); outline-offset: 3px; }
.sw { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1px solid rgba(239, 228, 222, .3); transition: box-shadow .35s var(--ease); }
.opt input:checked + .sw { box-shadow: 0 0 0 3px var(--cream), 0 0 0 4px var(--accent); }
.sw-choice { background: conic-gradient(#8E1B2A, #E9A6B8, #F6F1EA, #E8C24A, #8E1B2A); }
.sw-red { background: #8E1B2A; }
.sw-pink { background: #E9A6B8; }
.sw-white { background: #F6F1EA; }
.sw-yellow { background: #E8C24A; }
.sw-pastel { background: linear-gradient(135deg, #F3C9D3 0 33%, #F6EFE2 33% 66%, #D9C9E6 66%); }
.sw-bright { background: linear-gradient(135deg, #D7263D 0 33%, #F49D37 33% 66%, #E85D9E 66%); }
.byo-last { display: grid; gap: 22px; }
.field { display: grid; gap: 6px; }
.field .lbl { font-size: 10.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.field select, .field textarea { width: 100%; min-height: 48px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background: transparent; font: 400 19px/1.4 var(--serif); color: var(--charcoal); }
.field select { appearance: none; -webkit-appearance: none; padding-inline-end: 28px; background: linear-gradient(45deg, transparent 50%, var(--charcoal) 50%) right 8px top 50% / 6px 6px no-repeat, linear-gradient(-45deg, transparent 50%, var(--charcoal) 50%) right 2px top 50% / 6px 6px no-repeat; }
.field textarea { resize: vertical; min-height: 92px; }
.field select:focus-visible, .field textarea:focus-visible { outline: none; border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.field .hint { font-size: 12.5px; color: var(--muted); }
.byo-card { align-self: start; display: grid; gap: 18px; padding: 34px 28px 30px; border-radius: var(--radius); background: var(--burgundy); color: var(--cream-ink); }
.byo-card .byo-kicker { color: var(--blush); }
.byo-total { display: flex; align-items: baseline; gap: 14px; }
.byo-total strong { font: 400 clamp(64px, 16vw, 96px)/.9 var(--serif); color: var(--cream-ink); }
.byo-total span { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--blush); }
.byo-lines { list-style: none; display: grid; }
.byo-lines li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid rgba(242, 228, 222, .18); font-family: var(--serif); font-size: 19px; }
.byo-lines li:last-child { border-bottom: 1px solid rgba(242, 228, 222, .18); }
.byo-empty { font-family: var(--serif); font-style: italic; font-size: 18px; color: rgba(242, 228, 222, .72); }
.byo-empty[hidden] { display: none; }
.byo-facts { display: grid; gap: 6px; font-size: 13.5px; }
.byo-facts div { display: flex; justify-content: space-between; gap: 16px; }
.byo-facts dt { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--blush); }
.byo-facts dd { margin: 0; text-align: end; }
.byo-send { width: 100%; background: var(--cream-ink); color: var(--burgundy); }
.byo-send::before { background: var(--cream); }
.byo-send[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.byo-send[aria-disabled="true"]::before { display: none; }
.byo-note { font-size: 12.5px; line-height: 1.6; color: rgba(242, 228, 222, .78); }
@media (min-width: 1024px) {
  .byo { grid-template-columns: minmax(0, 1.3fr) minmax(320px, .8fr); gap: 72px; margin-top: 112px; padding-top: 72px; }
  .byo-card { position: sticky; top: 96px; padding: 44px 40px 38px; }
  .stems { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; border-top: 0; }
  .stem:nth-child(-n + 2) { border-top: 1px solid var(--line-strong); }
  .byo-last { grid-template-columns: 1fr 1.4fr; gap: 40px; align-items: start; }
}

/* ---------------------------------------------------------------- collections showcase
   "Six ways to say it" (#98). A stage holds one piece at a time on a glow
   tinted for it, with a huge outline numeral behind; the six names scroll
   past it and the one nearest the middle (or under the pointer) takes the
   stage (js/showcase.js). Phones: the stage sticks under the header and the
   list scrolls beneath. Desktop: list left, stage right. */
@property --tint { syntax: "<color>"; inherits: true; initial-value: #5C1D24; }
.showcase { position: relative; display: grid; gap: 0; }
.sc-stage { position: sticky; top: 74px; z-index: 2; height: 46vh; height: 46svh; min-height: 300px; border-radius: var(--radius); overflow: hidden; isolation: isolate; background: #170708; transition: --tint 1.1s var(--ease-soft); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(242, 228, 222, .06); }
.sc-glow { position: absolute; inset: -10%; z-index: 0; background:
  radial-gradient(50% 46% at calc(50% + var(--px, 0) * 8%) calc(48% + var(--py, 0) * 8%), var(--tint) 0%, color-mix(in srgb, var(--tint) 55%, var(--burgundy-2)) 42%, var(--burgundy-2) 74%, #0B0405 100%);
  transition: --tint 1.1s var(--ease-soft); }
.sc-glow::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 40% at 50% 100%, rgba(0, 0, 0, .55), transparent 70%); }
.sc-big { position: absolute; z-index: 1; inset-inline-start: 4%; bottom: -6%; font: italic 400 clamp(160px, 46vw, 420px)/.8 var(--serif); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px rgba(242, 228, 222, .3); pointer-events: none; user-select: none; }
.sc-pics { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; transform: translate3d(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -14px), 0); transition: transform .8s var(--ease); }
.sc-pic { grid-area: 1 / 1; width: auto; height: 82%; max-width: 82%; object-fit: contain; opacity: 0; transform: translate3d(0, 24px, 0) scale(.9) rotate(-3deg); filter: drop-shadow(0 28px 34px rgba(0, 0, 0, .55)) blur(6px); transition: opacity .7s var(--ease-soft), transform 1.1s var(--ease), filter .9s var(--ease-soft); }
.sc-pic.is-active { opacity: 1; transform: none; filter: drop-shadow(0 28px 34px rgba(0, 0, 0, .55)) blur(0); animation: sc-float 7s ease-in-out 1.1s infinite; }
.sc-pic.was { transform: translate3d(0, -18px, 0) scale(1.06) rotate(2deg); }
@keyframes sc-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.sc-count { position: absolute; z-index: 3; direction: ltr; unicode-bidi: isolate; top: 16px; inset-inline-end: 18px; font-size: 10.5px; font-weight: 600; letter-spacing: .28em; color: rgba(242, 228, 222, .7); }
.sc-list { list-style: none; position: relative; z-index: 1; padding: 8px 0 18vh; }
.sc-item { border-bottom: 1px solid var(--line); }
.sc-link { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "n name" ". desc" ". go"; align-items: baseline; gap: 6px 16px; min-height: 22vh; min-height: 22svh; align-content: center; padding: 22px 0; color: var(--charcoal); text-decoration: none; }
.sc-n { grid-area: n; font: italic 400 16px/1 var(--serif); color: var(--olive); }
.sc-name { grid-area: name; white-space: nowrap; font: 400 clamp(44px, 12vw, 96px)/1.02 var(--serif); letter-spacing: -.02em; color: var(--charcoal); opacity: .32; transition: opacity .6s var(--ease-soft), color .6s var(--ease-soft), transform .8s var(--ease); transform-origin: 0 50%; }
.sc-desc { grid-area: desc; max-width: 36ch; font-size: 14.5px; color: var(--muted); opacity: .45; transition: opacity .6s var(--ease-soft); }
.sc-go { grid-area: go; justify-self: start; margin-top: 8px; display: inline-flex; align-items: center; gap: 12px; font-size: 10.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); opacity: 0; transform: translateX(-10px); transition: opacity .5s var(--ease-soft), transform .6s var(--ease); }
.sc-go span { display: none; }
.sc-go svg { width: 18px; height: 18px; padding: 12px; box-sizing: content-box; border: 1px solid currentColor; border-radius: 50%; }
.sc-item.is-active .sc-name { opacity: 1; font-style: italic; color: var(--cream-ink); }
.sc-item.is-active .sc-desc { opacity: 1; }
.sc-item.is-active .sc-go { opacity: 1; transform: none; }
.sc-link:hover .sc-go svg { background: var(--accent); color: var(--cream); border-color: var(--accent); }
/* Without the script every name is lit and the stage shows the first piece. */
.showcase:not(.is-live) .sc-name, .showcase:not(.is-live) .sc-desc, .showcase:not(.is-live) .sc-go { opacity: 1; transform: none; }
.showcase.is-still .sc-pic, .showcase.is-still .sc-glow, .showcase.is-still .sc-stage { transition: none; animation: none; }
@media (min-width: 768px) {
  .sc-stage { top: 92px; height: 52vh; height: 52svh; }
}
@media (min-width: 1024px) {
  .showcase { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 64px; align-items: start; }
  .sc-stage { grid-column: 2; grid-row: 1; top: calc(50vh - 36vh); top: calc(50svh - 36svh); height: 72vh; height: 72svh; max-height: 760px; }
  .sc-list { grid-column: 1; grid-row: 1; padding: 4vh 0 22vh; }
  .sc-link { min-height: 26vh; min-height: 26svh; }
  .sc-go span { display: inline; }
  .sc-name { font-size: clamp(56px, 6.2vw, 96px); }
  .sc-big { font-size: clamp(260px, 30vw, 460px); }
}
@media (prefers-reduced-motion: reduce) {
  .sc-pic.is-active { animation: none; }
}

/* ---------------------------------------------------------------- burgundy bands
   More burgundy (Omar, #100): the black has a wine undertone, and the page
   ends on a rich burgundy band (the footer), its labels in blush. */
footer.bottom {
  background: radial-gradient(120% 90% at 50% 0%, #521A20 0%, var(--burgundy) 42%, var(--burgundy-2) 100%);
  --line: rgba(242, 228, 222, .16);
  --line-strong: rgba(242, 228, 222, .32);
  --muted: #D2BDB8;
}
footer.bottom { color: var(--blush); }
footer.bottom .bigword em { color: #F0B9C1; }

/* ---------------------------------------------------------------- mobile polish (#104)
   A Menu button and full-screen section list below 1024 px, a pinned
   build-your-own bar on phones, larger small type and 44 px targets. */
.menu-btn { display: inline-flex; align-items: center; gap: 10px; min-width: 44px; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--charcoal); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
header.top.on-film:not(.solid) .menu-btn { color: var(--cream-ink); }
.menu-btn .bars { position: relative; width: 22px; height: 12px; }
.menu-btn .bars i { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform .45s var(--ease), top .45s var(--ease); }
.menu-btn .bars i:first-child { top: 0; }
.menu-btn .bars i:last-child { top: 10px; }
.menu-btn[aria-expanded="true"] .bars i:first-child { top: 5px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .bars i:last-child { top: 5px; transform: rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 58; display: flex; padding: 96px var(--gutter) calc(28px + env(safe-area-inset-bottom)); background: radial-gradient(120% 70% at 50% 0%, #521A20 0%, var(--burgundy) 45%, var(--burgundy-2) 100%); opacity: 0; transition: opacity .45s var(--ease-soft); overflow-y: auto; }
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }
.menu-inner { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; width: 100%; }
.menu-links { list-style: none; }
.menu-links li { border-bottom: 1px solid rgba(242, 228, 222, .16); opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease-soft), transform .6s var(--ease); }
.menu.is-open .menu-links li { opacity: 1; transform: none; }
.menu.is-open .menu-links li:nth-child(2) { transition-delay: .04s; }
.menu.is-open .menu-links li:nth-child(3) { transition-delay: .08s; }
.menu.is-open .menu-links li:nth-child(4) { transition-delay: .12s; }
.menu.is-open .menu-links li:nth-child(5) { transition-delay: .16s; }
.menu.is-open .menu-links li:nth-child(6) { transition-delay: .2s; }
.menu.is-open .menu-links li:nth-child(7) { transition-delay: .24s; }
.menu.is-open .menu-links li:nth-child(8) { transition-delay: .28s; }
.menu-links a { display: flex; align-items: baseline; gap: 16px; min-height: 56px; padding: 10px 0; color: var(--cream-ink); text-decoration: none; font: 400 clamp(28px, 8vw, 40px)/1.15 var(--serif); }
.menu-links a .n { font: italic 400 14px/1 var(--serif); color: var(--blush); }
.menu-links a:active span:last-child, .menu-links a:hover span:last-child { font-style: italic; color: #F0B9C1; }
.menu-foot { display: grid; gap: 18px; }
.menu-foot .btn { width: 100%; min-height: 54px; }
.menu-small { display: flex; justify-content: space-between; }
.menu-small a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cream-ink); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.menu-small a[lang="ar"] { font-size: 16px; letter-spacing: 0; text-transform: none; }
html.menu-open { overflow: hidden; }
html.menu-open header.top { transform: none; background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
html.menu-open header.top .menu-btn, html.menu-open header.top .lang { color: var(--cream-ink); }
html.menu-open .order-bar { transform: translateY(110%); }
@media (min-width: 1024px) {
  .menu-btn, .menu { display: none; }
}
@media (max-width: 479px) {
  header.top .head-order { display: none; }
  header.top nav { gap: 18px; }
}

/* Build your own on phones: the bouquet so far, pinned to the bottom while
   the builder is on screen (it takes the order bar's place). */
.byo-mini { display: none; }
@media (max-width: 1023px) {
  .byo-mini { position: fixed; left: 0; right: 0; bottom: 0; z-index: 56; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)) 20px; background: rgba(42, 11, 14, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid rgba(242, 228, 222, .14); transform: translateY(110%); transition: transform .5s var(--ease); }
  html.byo-in-view .byo-mini { transform: none; }
  html.byo-in-view .order-bar { transform: translateY(110%); }
  .byo-mini p { display: flex; align-items: baseline; gap: 10px; color: var(--cream-ink); }
  .byo-mini strong { font: 400 34px/1 var(--serif); }
  .byo-mini span { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--blush); }
  .byo-mini .btn { min-height: 50px; padding: 0 26px; }
  .byo-mini .btn[aria-disabled="true"] { opacity: .5; }
}

/* Small type and tap targets on phones. */
@media (max-width: 767px) {
  .eyebrow, .kicker, .byo-kicker, .field .lbl, .byo-facts dt, .byo-total span, .sc-count { font-size: 12px; }
  .intro .eyebrow { font-size: 11.5px; letter-spacing: .2em; gap: 10px; }
  .intro .eyebrow::before { width: 24px; }
  .btn { font-size: 12px; letter-spacing: .14em; }
  .lux .btn { width: 100%; padding: 0 18px; }
  .shot .frame .tag { font-size: 10.5px; }
  .shot .order, .arrow-link, .sc-go { font-size: 11.5px; }
  .opt { font-size: 15.5px; }
  .facts dt, .stats span { font-size: 11.5px; }
  footer.bottom nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 11.5px; }
  footer.bottom small { font-size: 12px; }
}
header.top .lang { min-width: 44px; justify-content: center; }
.opt { min-width: 44px; }

/* ---------------------------------------------------------------- live bouquet (#105)
   Build your own draws the bouquet from above as it is built (js/bouquet.js):
   real heads from the shop's photos in a sunflower spiral, the wrapping
   around them. Desktop: top of the card. Phones: pinned under the header
   while the steps scroll. */
.byo-preview { position: relative; width: 100%; max-width: 340px; aspect-ratio: 1 / 1; margin: 0 auto; }
.bp-wrap { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.bp-wrap::before { content: ""; width: calc(var(--ring, .45) * 100%); aspect-ratio: 1 / 1; background: url("/assets/byo/paper-pink.webp") center / contain no-repeat; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .5)); transition: width .7s var(--ease); }
.byo-preview[data-wrap="box"] .bp-wrap::before { width: calc(var(--dome, .3) * 100% + 22%); border-radius: 50%; background: radial-gradient(circle, #10161A 0 70%, #070809 71%, #2B2427 73%, #121011 80%, #0A0809 100%); box-shadow: 0 18px 30px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.byo-preview[data-wrap="vase"] .bp-wrap::before { width: calc(var(--dome, .3) * 100% + 14%); border-radius: 50%; background: radial-gradient(circle, #0E1A14 0 72%, rgba(210, 230, 240, .35) 74%, rgba(255, 255, 255, .12) 80%, rgba(210, 230, 240, .3) 86%, transparent 88%); filter: none; }
.byo-preview.is-empty .bp-wrap::before { opacity: .35; }
.bp-heads { position: absolute; inset: 0; container-type: size; }
.bp-head { position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%) translate(calc(var(--x) * 50cqw), calc(var(--y) * 50cqh)) rotate(var(--r)) scale(calc(var(--s) / .62)); transition: transform .6s var(--ease), opacity .4s ease; }
.bp-head img { display: block; width: 100%; height: 100%; }
.bp-head.pop { opacity: 0; --pop: .3; }
.bp-head.standin { border-radius: 50%; background: radial-gradient(circle, #F4EDF5 0%, #E1D0E6 45%, #C9B2D2 66%, rgba(201, 178, 210, 0) 72%); }
.bp-head.standin::after { content: ""; position: absolute; inset: 18%; border-radius: 50%; border: 1px dashed rgba(60, 30, 60, .45); }
.bp-head.standin img { display: none; }
.bp-empty { position: absolute; inset: 0; display: none; place-items: center; padding: 0 22%; text-align: center; font: italic 400 16px/1.4 var(--serif); color: var(--blush); }
.byo-preview.is-empty .bp-empty { display: grid; }
.bp-note, .bp-standin { font-size: 12px; line-height: 1.55; color: rgba(242, 228, 222, .7); text-align: center; }
.bp-standin { display: none; color: #F0B9C1; }
.byo-card.has-standin .bp-standin { display: block; }
.byo-live { display: none; }
@media (max-width: 1023px) {
  .byo-preview.is-card, .byo-card .bp-note, .byo-card .bp-standin { display: none; }
  .byo-live { display: block; position: sticky; top: 66px; z-index: 4; margin: -8px calc(-1 * var(--gutter)) 0; padding: 8px var(--gutter) 10px; background: var(--cream); }
  .byo-live::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px; background: linear-gradient(var(--cream), rgba(18, 10, 11, 0)); pointer-events: none; }
  .byo-live .byo-preview { max-width: 230px; }
  .byo-live.has-standin .bp-standin { display: block; margin-top: 4px; font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .bp-head, .bp-wrap::before { transition: none; }
}

/* ---------------------------------------------------------------- catalogue (#107)
   /flowers, /flowers/bouquet, /flowers/bouquet/hb12 and the rest render into
   [data-catalog] (js/catalog.js); the home sections hide meanwhile. Phone
   first: two-column grids, big tap targets, the order button pinned at the
   bottom of a product. */
.catalog { display: none; }
html.view-catalog .catalog { display: block; padding: 96px 0 var(--section); min-height: 100vh; }
html.view-catalog main > :not(.catalog) { display: none; }
html.view-catalog .progress { display: none; }
.catalog > * { width: min(1240px, 100% - var(--gutter) * 2); margin-inline: auto; }
.cat-back { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--blush); text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.cat-back svg { width: 20px; height: 20px; }
.cat-head { display: grid; gap: 10px; margin-bottom: 26px; }
.cat-title { font-size: clamp(44px, 12vw, 96px); line-height: 1; color: var(--charcoal); }
.cat-blurb { color: var(--muted); max-width: 44ch; font-size: 15.5px; }
.cat-note { color: var(--muted); font-size: 13.5px; line-height: 1.6; max-width: 52ch; border-inline-start: 2px solid var(--accent); padding-inline-start: 12px; }
.cat-tiles { list-style: none; display: grid; gap: 12px; }
.cat-tile { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 16px; min-height: 104px; padding: 8px; padding-inline-end: 16px; border-radius: var(--radius); background: linear-gradient(90deg, rgba(63, 18, 21, .55), rgba(63, 18, 21, .2)); border: 1px solid var(--line); color: var(--charcoal); text-decoration: none; transition: background .4s var(--ease), border-color .4s var(--ease); }
.cat-tile:hover, .cat-tile:focus-visible { background: rgba(63, 18, 21, .8); border-color: var(--line-strong); }
.cat-pic { width: 96px; height: 96px; border-radius: 2px; overflow: hidden; background: radial-gradient(60% 55% at 50% 45%, #6A2430 0%, #3F1215 60%, #24090C 100%); display: grid; place-items: center; }
.cat-pic img { width: 100%; height: 100%; object-fit: cover; }
.cat-tile-text { display: grid; gap: 4px; }
.cat-tile-name { font: 400 26px/1.1 var(--serif); }
.cat-tile-sub { font-size: 12.5px; color: var(--muted); }
.cat-go { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--accent); }
.cat-go svg { width: 18px; height: 18px; }
.cat-grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; margin-top: 26px; }
.cat-card { display: grid; gap: 8px; color: var(--charcoal); text-decoration: none; }
.cat-card-pic { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 2px; background: #1A0D0F; }
.cat-card-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.cat-card:hover .cat-card-pic img { transform: scale(1.04); }
.cat-card-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cat-code { font: 400 21px/1.1 var(--serif); }
.cat-price { font-size: 14px; font-weight: 600; color: var(--accent); }
.cat-noimg { display: grid; place-items: center; width: 100%; height: 100%; padding: 12px; text-align: center; font: italic 400 22px/1.2 var(--serif); color: var(--blush); background: radial-gradient(60% 55% at 50% 45%, #6A2430 0%, #3F1215 60%, #24090C 100%); }
.cat-demo { position: absolute; top: 8px; inset-inline-start: 8px; padding: 4px 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; background: rgba(18, 10, 11, .78); color: var(--cream-ink); border: 1px dashed rgba(242, 228, 222, .45); }
/* A product */
.prod { display: grid; gap: 18px; padding-bottom: 90px; }
.prod-photos { display: grid; gap: 10px; }
.prod-photos img { width: 100%; max-height: 78vh; object-fit: contain; background: #140A0C; border-radius: 2px; }
.prod-photos.is-many { grid-auto-flow: column; grid-auto-columns: 88%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.prod-photos.is-many img { scroll-snap-align: start; }
.prod-more { font-size: 12px; color: var(--muted); }
.prod-info { display: grid; gap: 12px; align-content: start; }
.prod-section { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--olive); }
.prod-code { font-size: clamp(54px, 15vw, 104px); line-height: .95; color: var(--charcoal); }
.prod-price { font: 400 30px/1 var(--serif); color: var(--accent); }
.prod-price.is-quote { font-size: 20px; font-style: italic; }
.prod-lines { list-style: none; border-top: 1px solid var(--line-strong); }
.prod-lines li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.prod-hint { font-size: 13.5px; color: var(--muted); max-width: 46ch; }
.prod-cta { display: none; }
.prod-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 57; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)) 20px; background: rgba(42, 11, 14, .95); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid rgba(242, 228, 222, .14); }
.prod-bar-code { font: 400 20px/1.2 var(--serif); color: var(--cream-ink); }
.prod-bar .btn { min-height: 50px; padding: 0 22px; }
.prod-bar .btn svg, .prod-cta svg { width: 18px; height: 18px; }
.prod-bar .btn[aria-disabled="true"] { opacity: .5; }
html.view-catalog .order-bar { display: none; }
/* Balloons and letters */
.cfg { position: relative; display: grid; gap: 26px; padding-bottom: 90px; }
.cfg-photo { width: 100%; max-height: 300px; object-fit: cover; border-radius: 2px; }
.cfg-demo { top: 10px; }
.cfg-qty { justify-content: flex-start; }
.cfg-letters { display: grid; place-items: center; min-height: 200px; border-radius: 2px; font: 400 clamp(90px, 30vw, 180px)/1 var(--serif); letter-spacing: .06em; color: #F0B9C1; background: radial-gradient(60% 60% at 50% 45%, #6A2430 0%, #3F1215 55%, #1A0709 100%); overflow: hidden; white-space: nowrap; }
.cfg .field input { width: 100%; min-height: 52px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line-strong); background: transparent; font: 400 28px/1.2 var(--serif); letter-spacing: .1em; color: var(--charcoal); text-transform: uppercase; }
.cfg .field input:focus-visible { outline: none; border-bottom-color: var(--accent); }
@media (min-width: 768px) {
  .cat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; }
}
@media (min-width: 1024px) {
  html.view-catalog .catalog { padding-top: 130px; }
  .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cat-tile { grid-template-columns: 140px 1fr auto; min-height: 156px; }
  .cat-pic { width: 140px; height: 140px; }
  .prod { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: start; padding-bottom: 0; }
  .prod > .cat-back { grid-column: 1 / -1; }
  .prod-more { grid-column: 1; }
  .prod-photos.is-many { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; }
  .prod-info { position: sticky; top: 110px; grid-row: 2 / span 2; grid-column: 2; }
  .prod-cta { display: inline-flex; width: 100%; margin-top: 8px; }
  .prod-bar:not(.is-static) { display: none; }
  .prod-bar.is-static { position: static; padding: 18px 20px; border: 1px solid var(--line); }
  .cfg { max-width: 720px; padding-bottom: 0; }
}

/* The five sections on phones (#107): the stage is smaller and sits clear
   of the names, which scroll beneath it on a solid band, one per screen
   third, each opening its section. */
@media (max-width: 1023px) {
  .sc-stage { height: 40vh; height: 40svh; min-height: 260px; }
  .sc-list { background: var(--cream); padding-top: 14px; }
  .sc-link { min-height: 30vh; min-height: 30svh; }
  .sc-name { font-size: clamp(40px, 11vw, 64px); }
  .sc-big { font-size: clamp(140px, 40vw, 260px); }
  .sc-item:not(.is-active) .sc-desc { opacity: 0; }
}

/* Our collections on phones (#149): a card for each section instead of the
   showcase. The stage hides; each name becomes a card with its picture on
   the section's glow, a line about it and an Explore arrow. Tablet and
   desktop keep the showcase. */
.sc-card-pic { display: none; }
@media (max-width: 767px) {
  .showcase { display: block; }
  .sc-stage { display: none; }
  .sc-list { display: grid; gap: 14px; padding: 4px 0 0; background: none; }
  .sc-item { border: 0; }
  .sc-link { grid-template-columns: 1fr auto; grid-template-areas: "pic pic" "name go" "desc go"; gap: 6px 14px; min-height: 0; padding: 0 0 18px; border-radius: 3px; overflow: hidden; background: linear-gradient(180deg, rgba(63, 18, 21, .65), rgba(42, 11, 14, .9)); border: 1px solid var(--line); }
  .sc-card-pic { grid-area: pic; display: grid; place-items: center; height: 230px; margin-bottom: 8px; background: radial-gradient(60% 60% at 50% 48%, var(--tint, #6A2430) 0%, #3F1215 58%, #1A0709 100%); }
  .sc-card-pic img { max-height: 205px; max-width: 80%; width: auto; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .55)); }
  .sc-n { display: none; }
  .sc-name, .sc-item.is-active .sc-name { grid-area: name; padding-inline: 18px; font-size: 34px; font-style: normal; opacity: 1; color: var(--cream-ink); white-space: normal; }
  .sc-desc, .sc-item:not(.is-active) .sc-desc { grid-area: desc; padding-inline: 18px; opacity: 1; font-size: 14px; }
  .sc-go, .sc-item.is-active .sc-go { grid-area: go; align-self: center; margin: 0 16px 0 0; opacity: 1; transform: none; }
  .sc-go span { display: none; }
}

/* Build your own on phones (#151): two flowers per row. Each flower is a
   small tile, its name over the minus, count and plus; the buttons stay
   44 px. */
@media (max-width: 767px) {
  .stems { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; border-top: 0; }
  .stem { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 8px; border: 1px solid var(--line); border-radius: 3px; background: rgba(63, 18, 21, .28); text-align: center; transition: border-color .35s var(--ease), background .35s var(--ease); }
  .stem.is-on { border-color: var(--accent); background: rgba(63, 18, 21, .55); }
  .stem-name { justify-items: center; }
  .qty { justify-content: space-between; gap: 2px; }
  .qty input { width: 44px; font-size: 22px; }
}

/* ---------------------------------------------------------------- phone performance (#157)
   No full-screen grain blend and no backdrop blur on phones and touch
   screens (the bars are near opaque anyway); the showcase picture stops
   floating and the glow stops easing there; parallax elements get a layer
   only on desktop, where parallax runs. */
@media (max-width: 1023px), (pointer: coarse) {
  body::after { display: none; }
  header.top.solid, .order-bar, .byo-mini, .prod-bar { backdrop-filter: none; -webkit-backdrop-filter: none; }
  header.top.solid { background: rgba(42, 11, 14, .97); }
  .sc-pic.is-active { animation: none; }
  .sc-stage, .sc-glow { transition: none; }
}
@media (min-width: 1024px) {
  [data-speed] { will-change: translate; }
  .sc-pic.is-active { will-change: translate; }
}

/* Opening a section (#159): no smooth scroll when the view switches, and
   cards below the screen are not laid out or painted until they are near. */
html.view-catalog { scroll-behavior: auto; }
.cat-grid > li { content-visibility: auto; contain-intrinsic-size: auto 280px; }
.cat-tiles > li { content-visibility: auto; contain-intrinsic-size: auto 112px; }

/* Five sections on one screen on phones (#161, option A): Flowers as a wide
   card on top, the other four in two rows of two, the heading compact. */
@media (max-width: 767px) {
  .collections .head { gap: 8px; margin-bottom: 16px; }
  .collections .head h2 { font-size: 40px; }
  .collections .head p { display: none; }
  .sc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sc-item:first-child { grid-column: 1 / -1; }
  .sc-link { grid-template-areas: "pic pic" "name name"; padding-bottom: 10px; border-radius: 14px; }
  .sc-card-pic { height: 104px; margin-bottom: 2px; }
  .sc-card-pic img { max-height: 92px; }
  .sc-item:first-child .sc-card-pic { height: 146px; }
  .sc-item:first-child .sc-card-pic img { max-height: 132px; }
  .sc-name, .sc-item.is-active .sc-name { padding-inline: 12px; font-size: 22px; }
  .sc-item:first-child .sc-name { font-size: 30px; }
  .sc-desc, .sc-item:not(.is-active) .sc-desc, .sc-go, .sc-item.is-active .sc-go { display: none; }
}

/* The phone tab bar (#163, option B): the five sections at the bottom of
   every page, the current one lit. The order bars sit above it. */
.tabbar { display: none; }
@media (max-width: 767px) {
  :root { --tabbar: calc(62px + env(safe-area-inset-bottom)); }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 59; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: var(--tabbar); padding: 6px 4px env(safe-area-inset-bottom); background: #1C0B0D; border-top: 1px solid rgba(242, 228, 222, .12); }
  .tab { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 48px; color: #A9958F; font-size: 10.5px; font-weight: 500; text-decoration: none; transition: color .3s var(--ease); }
  .tab-pic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle, #5C1D24, #2A0B0E); border: 1px solid rgba(221, 163, 172, .28); overflow: hidden; transition: border-color .3s var(--ease), transform .3s var(--ease); }
  .tab-pic img { width: 26px; height: 26px; object-fit: contain; }
  .tab[aria-current="page"] { color: var(--cream-ink); }
  .tab[aria-current="page"] .tab-pic { border: 2px solid var(--accent); transform: scale(1.08); }
  .order-bar, .byo-mini, .prod-bar { bottom: var(--tabbar); padding-bottom: 10px; }
  .order-bar .btn { min-height: 48px; }
  footer.bottom { padding-bottom: calc(110px + var(--tabbar)); }
  .intro-text { padding-bottom: calc(28px + var(--tabbar)); }
  .prod, .cfg { padding-bottom: calc(90px + var(--tabbar)); }
  html.menu-open .tabbar { display: none; }
}

/* Story circles on the phone's opening screen (#165, option C): five round
   pictures under the header, over the film; a tap opens the section. */
.stories { display: none; }
@media (max-width: 767px) {
  .stories { position: absolute; z-index: 3; top: 72px; left: 0; right: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0 8px; opacity: var(--words, 1); transition: opacity .3s ease; }
  .intro.is-done .stories { visibility: hidden; }
  .story { display: grid; justify-items: center; gap: 5px; min-height: 44px; color: var(--cream-ink); font-size: 11px; font-weight: 500; text-decoration: none; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
  .story-ring { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; padding: 2px; background: conic-gradient(from 200deg, #DDA3AC, #8E1C28, #C8A96A, #DDA3AC); }
  .story-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; padding: 4px; background: radial-gradient(circle, #5C1D24, #1A0709); border: 2px solid #120A0B; }
  .story:active .story-ring { transform: scale(.94); }
}

/* App-like pages on phones (#167): a page slides in from the right and back
   out to the right (View Transitions; a short slide of the new page where the
   browser has none). The header and tab bar stay put. A product is a
   full-screen photo with a sheet over it, pulled down to close. */
@keyframes page-in-right { from { transform: translateX(100%); } }
@keyframes page-out-left { to { transform: translateX(-28%); opacity: .4; } }
@keyframes page-in-left { from { transform: translateX(-28%); opacity: .4; } }
@keyframes page-out-right { to { transform: translateX(100%); } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .34s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); mix-blend-mode: normal; }
html[data-nav="forward"]::view-transition-old(root) { animation-name: page-out-left; }
html[data-nav="forward"]::view-transition-new(root) { animation-name: page-in-right; }
html[data-nav="back"]::view-transition-old(root) { animation-name: page-out-right; z-index: 1; }
html[data-nav="back"]::view-transition-new(root) { animation-name: page-in-left; }
html[data-nav-fallback="forward"] main { animation: page-in-right .3s cubic-bezier(.2, .8, .2, 1); }
html[data-nav-fallback="back"] main { animation: page-in-left .3s cubic-bezier(.2, .8, .2, 1); }
@media (max-width: 767px) {
  header.top { view-transition-name: top; }
  .tabbar { view-transition-name: tabbar; }
  html.view-catalog main { background: var(--cream); }
  html.view-product { overscroll-behavior-y: none; }
  html.view-product header.top { display: none; }
  html.view-product .catalog { padding-top: 0; }
  html.view-product .catalog > .prod { width: 100%; }
  .prod { gap: 0; padding-bottom: 0; }
  .prod > .cat-back { position: fixed; z-index: 58; top: calc(10px + env(safe-area-inset-top)); left: 12px; width: 44px; height: 44px; justify-content: center; border-radius: 50%; background: rgba(18, 10, 11, .72); color: var(--cream-ink); }
  .prod > .cat-back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .prod-photos { position: sticky; top: 0; height: 68svh; gap: 0; }
  .prod-photos img { height: 68svh; max-height: none; object-fit: cover; border-radius: 0; }
  .prod-photos.is-many { grid-auto-columns: 100%; }
  .prod-more { position: relative; z-index: 1; height: 56px; margin-top: -56px; padding: 8px 20px 0; color: var(--cream-ink); text-align: right; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
  .prod-info { position: relative; z-index: 2; margin-top: -22px; min-height: calc(32svh + 22px); padding: 30px 20px calc(96px + var(--tabbar)); background: var(--cream); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .45); }
  .prod-info::before { content: ""; position: absolute; top: 10px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: rgba(242, 228, 222, .28); }
  .prod-code { font-size: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  html[data-nav-fallback] main { animation: none; }
}

/* Motion (#169): the tapped photo grows into the product page, the first
   cards of a section rise one after another, photos fade in once loaded and
   buttons press in. Transform and opacity only; none of it under reduced
   motion. */
::view-transition-group(hero) { z-index: 2; animation-duration: .42s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(hero), ::view-transition-new(hero) { height: 100%; object-fit: cover; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: no-preference) {
  .catalog li.rise { animation: rise .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 45ms); }
  .catalog img { transition: opacity .45s ease; }
  .catalog img.is-loading { opacity: 0; }
  .btn { transition: color .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease), transform .15s ease; }
  .cat-tile { transition: background .4s var(--ease), border-color .4s var(--ease), transform .15s ease; }
  .cat-card, .sc-link, .story-ring { transition: transform .15s ease; }
  .qty .step { transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .15s ease; }
  .tab { transition: color .3s var(--ease), transform .15s ease; }
  .btn:active, .cat-tile:active, .cat-card:active, .sc-link:active, .tab:active { transform: scale(.97); }
  .qty .step:active { transform: scale(.9); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(hero), ::view-transition-old(hero), ::view-transition-new(hero) { animation: none; }
}

/* Build your own, one Add button (#171): the stem rows hide behind a sheet
   that picks the flower, then how many; chosen flowers show as chips. Square
   corners like the rest of the site; on phones the sheet rises from the
   bottom and is pulled down to close. */
.byo.has-sheet .stems { display: none; }
.byo-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.byo-chips:empty { display: none; }
.byo-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 14px 4px 4px; border: 1px solid var(--accent); border-radius: 3px; background: rgba(63, 18, 21, .55); color: var(--cream-ink); font: 500 14px/1 var(--sans); cursor: pointer; }
.chip-pic, .sheet-pic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle, #5C1D24, #1A0709); }
.chip-pic img, .sheet-pic img, .byo-fly img { width: 100%; height: 100%; object-fit: cover; }
.chip-pic.is-standin, .sheet-pic.is-standin, .byo-fly.is-standin { background: radial-gradient(circle, #F4EDF5 0%, #E1D0E6 45%, #C9B2D2 72%); }
.byo-add { width: 100%; }
.byo-add[hidden] { display: none; }
.byo-add svg { width: 18px; height: 18px; }
.byo-sheet { width: min(520px, 100% - 32px); max-width: 100%; max-height: 88vh; margin: auto; padding: 28px 20px calc(24px + env(safe-area-inset-bottom)); border: 1px solid var(--line); border-radius: 4px; background: #1C0B0D; color: var(--cream-ink); overflow: auto; overscroll-behavior: contain; }
.byo-sheet::backdrop { background: rgba(8, 3, 4, .62); }
.sheet-grip { display: none; }
.sheet-close { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; color: var(--cream-ink); cursor: pointer; }
.sheet-close svg, .sheet-back svg { width: 20px; height: 20px; }
.sheet-title { margin: 0 0 18px; font: 400 28px/1.15 var(--serif); text-align: center; color: var(--cream-ink); }
.sheet-flowers { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sheet-flower { display: grid; justify-items: center; align-content: start; gap: 8px; width: 100%; min-height: 128px; padding: 14px 6px; border: 1px solid var(--line); border-radius: 3px; background: rgba(63, 18, 21, .35); color: var(--cream-ink); font: 500 14px/1.2 var(--sans); cursor: pointer; }
.sheet-flower.is-in { border-color: var(--accent); }
.sheet-flower .sheet-pic { width: 64px; height: 64px; }
.sheet-soon { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #F0B9C1; }
.sheet-count { display: grid; justify-items: center; gap: 14px; }
.sheet-panel[hidden] { display: none; }
.sheet-back { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; background: none; border: 0; color: var(--blush); font: 600 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.sheet-pic.is-big { width: 110px; height: 110px; }
.sheet-count .sheet-title { margin: 0; }
.sheet-qty { gap: 18px; }
.sheet-n { min-width: 2.4ch; font: 400 56px/1 var(--serif); text-align: center; color: var(--cream-ink); }
.sheet-quick { display: flex; gap: 8px; }
.sheet-quick button { min-width: 56px; min-height: 44px; border: 1px solid var(--line-strong); border-radius: 3px; background: none; color: var(--cream-ink); font: 500 15px/1 var(--sans); cursor: pointer; }
.sheet-quick button[aria-pressed="true"] { border-color: var(--accent); background: rgba(63, 18, 21, .7); }
.sheet-ok { width: 100%; }
.sheet-remove { min-height: 44px; background: none; border: 0; color: var(--muted); font: 500 13px/1 var(--sans); text-decoration: underline; cursor: pointer; }
.byo-fly { position: fixed; z-index: 70; display: block; border-radius: 50%; overflow: hidden; pointer-events: none; }
[data-byo-total], [data-byo-mini-total] { display: inline-block; }
@keyframes sheet-up { from { transform: translateY(100%); } }
@media (max-width: 767px) {
  .byo-sheet { width: 100%; margin: auto 0 0; padding-top: 32px; border: 0; border-top: 1px solid var(--line); border-radius: 22px 22px 0 0; }
  .sheet-grip { display: block; position: absolute; top: 10px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: rgba(242, 228, 222, .28); }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .byo-sheet[open] { animation: sheet-up .32s cubic-bezier(.2, .8, .2, 1); }
}

/* Turn the bouquet (#173): the paper and the heads live in a 3D scene that
   drag turns (--spin round the stems, --tilt to look from the side). Each
   head sits at its height on the dome (--z) and keeps facing the viewer, so
   turning shows the dome lift off the paper. The one shadow moved to the
   preview because a filter inside the scene would flatten it. */
.byo-preview { perspective: 900px; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .45)); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.byo-preview.is-turning { cursor: grabbing; }
.byo-preview.is-empty { cursor: default; touch-action: auto; }
.bp-scene { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--tilt, 0deg)) rotateZ(var(--spin, 0deg)); transition: transform .5s var(--ease); }
.bp-heads { transform-style: preserve-3d; }
.bp-head { transform: translate(-50%, -50%) translate3d(calc(var(--x) * 50cqw), calc(var(--y) * 50cqh), calc(var(--z, 0) * 50cqw)) rotateZ(calc(-1 * var(--spin, 0deg))) rotateX(calc(-1 * var(--tilt, 0deg))) rotate(var(--r)) scale(calc(var(--s) / .62 * var(--pop, 1))); }
.byo-preview.is-turning .bp-scene, .byo-preview.is-turning .bp-head { transition: none; }
.byo-live .byo-preview { touch-action: pan-y; }
.bp-turn { display: none; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(242, 228, 222, .55); text-align: center; }
.byo-live:has(.byo-preview:not(.is-empty)) .bp-turn { display: block; margin-top: 2px; }

/* Share a bouquet (#179): top right of the product details (on phones, of
   the sheet). */
@media (max-width: 1023px) { .prod-info { position: relative; } }
.prod-share { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px 0 12px; background: none; border: 0; color: var(--blush); font: 600 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.prod-share svg { width: 20px; height: 20px; }
@media (max-width: 767px) {
  .prod-share { top: 22px; right: 14px; }
}

/* Swipe between pieces (#181): previous, place and next under the details;
   the same moves as a left or right swipe on phones. */
.prod-steps { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 4px; }
.prod-step { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--blush); font: 600 12px/1 var(--sans); letter-spacing: .14em; text-decoration: none; }
.prod-step svg { width: 18px; height: 18px; }
.prod-step.is-next { justify-self: end; }
.prod-place { font: 400 15px/1 var(--serif); color: var(--muted); }

/* See it in your room (#183): the camera full screen, the bouquet tilted
   over it as if standing on a table, dragged into place and sized. */
.room-open { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; margin-top: 6px; padding: 0 6px; background: none; border: 0; color: var(--blush); font: 600 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.room-open[hidden] { display: none; }
.room-open:disabled { opacity: .45; cursor: default; }
.room-open svg { width: 20px; height: 20px; }
.byo-live .room-open { display: flex; margin: 2px auto 0; }
.byo-live .room-open[hidden] { display: none; }
.byo-card .room-open { width: 100%; }
.room { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #000; color: var(--cream-ink); overflow: hidden; }
.room::backdrop { background: #000; }
.room-cam { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.room-bouquet { position: absolute; left: calc(var(--x, .5) * 100%); top: calc(var(--y, .62) * 100%); width: calc(var(--size, .6) * min(100vw, 100dvh)); transform: translate(-50%, -50%); touch-action: none; cursor: grab; }
.room-bouquet .byo-preview { max-width: none; touch-action: none; }
.byo-preview.is-room .bp-scene { --tilt: 55deg; transform: rotateX(var(--tilt)); }
.room-hint { position: absolute; top: calc(18px + env(safe-area-inset-top)); left: 16px; right: 16px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-align: center; text-transform: uppercase; text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }
.room-blocked { display: none; position: absolute; inset: 0; place-items: center; padding: 0 32px; font: italic 400 20px/1.4 var(--serif); text-align: center; }
.room.is-blocked .room-blocked { display: grid; }
.room.is-blocked .room-bouquet, .room.is-blocked .room-hint { display: none; }
.room-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .78)); }
.room-size { flex: 1; display: grid; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.room-size input { width: 100%; min-height: 32px; accent-color: #DDA3AC; }
.room-bar .btn { min-height: 48px; padding: 0 18px; }
.room-done { border-color: rgba(242, 228, 222, .5); color: var(--cream-ink); background: none; }

/* Pinch to zoom (#190): a product photo full screen on black; pinch,
   double tap or double click, drag while zoomed, swipe for the next photo,
   pull down or the cross to close. */
.prod-photos img { cursor: zoom-in; }
.zoom { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #000; color: var(--cream-ink); overflow: hidden; }
.zoom::backdrop { background: #000; }
.zoom-stage { position: absolute; inset: 0; display: grid; place-items: center; touch-action: none; overflow: hidden; user-select: none; -webkit-user-select: none; }
.zoom-img { max-width: 100%; max-height: 100%; object-fit: contain; transform: translate(var(--zx, 0), var(--zy, 0)) scale(var(--zs, 1)); transition: transform .25s cubic-bezier(.2, .8, .2, 1); will-change: transform; -webkit-user-drag: none; }
.zoom-stage:active .zoom-img { transition: none; }
.zoom-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: calc(8px + env(safe-area-inset-top)) 8px 8px 18px; background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); font-size: 13px; letter-spacing: .08em; }
.zoom-close { display: grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; color: var(--cream-ink); cursor: pointer; }
.zoom-close svg { width: 24px; height: 24px; }
.zoom-hint { position: absolute; left: 0; right: 0; bottom: calc(22px + env(safe-area-inset-bottom)); font-size: 12px; letter-spacing: .12em; text-align: center; text-transform: uppercase; text-shadow: 0 1px 6px #000; transition: opacity .3s ease; pointer-events: none; }
.zoom.is-zoomed .zoom-hint { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .zoom-img { transition: none; } }

/* Save and ask which one (#192): a heart on each coded card and on the
   product page, a small counter while something is saved, and the list as a
   sheet (the Build your own sheet's look). */
.cat-grid > li { position: relative; }
.heart { position: absolute; top: 6px; right: 6px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: radial-gradient(circle, rgba(18, 10, 11, .72) 0 18px, transparent 19px); color: var(--cream-ink); cursor: pointer; }
.heart svg, .prod-save svg { width: 20px; height: 20px; transition: transform .2s ease; }
.heart.is-on, .prod-save.is-on { color: #F0B9C1; }
.heart.is-on svg, .prod-save.is-on svg { fill: currentColor; }
.prod-save { position: absolute; top: 0; right: 108px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; background: none; border: 0; color: var(--blush); font: 600 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.cat-head, .prod { position: relative; }
.saved-pill { position: absolute; z-index: 2; top: 0; right: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1px solid var(--accent); border-radius: 3px; background: rgba(42, 11, 14, .94); color: var(--cream-ink); font: 600 14px/1 var(--sans); cursor: pointer; }
.saved-pill span { color: #F0B9C1; }
.saved-pill[hidden] { display: none; }
.saved-list { list-style: none; display: grid; gap: 8px; margin-bottom: 16px; }
.saved-list li { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.saved-item { flex: 1; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 14px; min-height: 72px; color: var(--cream-ink); text-decoration: none; }
.saved-item img { width: 48px; height: 64px; object-fit: cover; border-radius: 2px; }
.saved-code { font: 400 22px/1 var(--serif); }
.saved-price { color: var(--accent); font-size: 14px; }
.saved-remove { display: grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; color: var(--muted); cursor: pointer; }
.saved-remove svg { width: 18px; height: 18px; }
.saved-ask { width: 100%; background: #25D366; color: #0B2416; }
.saved-note { margin-top: 10px; font-size: 12px; color: var(--muted); text-align: center; }
@media (max-width: 767px) {
  .prod > .saved-pill { position: fixed; z-index: 58; top: calc(10px + env(safe-area-inset-top)); right: auto; left: 64px; }
  .prod-save { top: 22px; right: 120px; }
}
@media (prefers-reduced-motion: no-preference) {
  .heart:active svg, .prod-save:active svg { transform: scale(1.25); }
}

/* Deliver to my location (#194): above the order button on a product and
   in the Build your own card. */
.locate { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 14px; border: 1px dashed rgba(221, 163, 172, .45); border-radius: 3px; background: none; color: var(--blush); font: 500 13.5px/1.35 var(--sans); text-align: left; cursor: pointer; }
.locate[hidden] { display: none; }
.locate svg { flex: none; width: 20px; height: 20px; }
.locate.is-on { border-style: solid; border-color: var(--accent); background: rgba(63, 18, 21, .5); color: var(--cream-ink); }
.byo-card .locate { margin-bottom: 12px; }

/* The bouquet feed (#196): one piece per screen, snapped, on black; the
   actions in a column under the right thumb. */
.feed-open { display: inline-flex; align-items: center; gap: 10px; justify-self: start; min-height: 44px; margin-top: 4px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 3px; background: none; color: var(--cream-ink); font: 600 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.feed-open svg { width: 20px; height: 20px; }
.feed { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #000; color: var(--cream-ink); overflow: hidden; }
.feed::backdrop { background: #000; }
.feed-list { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; outline: none; scrollbar-width: none; }
.feed-list::-webkit-scrollbar { display: none; }
.feed-slide { position: relative; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }
.feed-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feed-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .82)); pointer-events: none; }
.feed-info { position: absolute; z-index: 1; left: 20px; right: 96px; bottom: calc(40px + env(safe-area-inset-bottom)); }
.feed-code { display: inline-block; font: 400 48px/1 var(--serif); color: var(--cream-ink); text-decoration: none; }
.feed-price { margin-top: 6px; font: 400 22px/1.2 var(--serif); color: #F0B9C1; }
.feed-lines { margin-top: 6px; font-size: 13.5px; color: rgba(242, 228, 222, .8); }
.feed-acts { position: absolute; z-index: 1; right: 12px; bottom: calc(40px + env(safe-area-inset-bottom)); display: grid; gap: 14px; }
.feed-act { display: grid; justify-items: center; gap: 4px; min-width: 56px; padding: 0; background: none; border: 0; color: var(--cream-ink); font: 500 11px/1 var(--sans); text-decoration: none; cursor: pointer; }
.feed-act svg { box-sizing: content-box; width: 22px; height: 22px; padding: 13px; border-radius: 50%; background: rgba(18, 10, 11, .6); }
.feed-act.is-on svg { color: #F0B9C1; fill: currentColor; }
.feed-act.is-order svg { background: #25D366; color: #0B2416; }
.feed-hint { position: absolute; z-index: 1; left: 0; right: 0; bottom: 10px; font-size: 11px; letter-spacing: .16em; text-align: center; text-transform: uppercase; color: rgba(242, 228, 222, .7); }
.feed-top { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: calc(8px + env(safe-area-inset-top)) 8px 8px 18px; font-size: 13px; letter-spacing: .08em; pointer-events: none; }
.feed-close { display: grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; color: var(--cream-ink); cursor: pointer; pointer-events: auto; }
.feed-close svg { width: 24px; height: 24px; }
@media (min-width: 768px) {
  .feed-slide img { object-fit: contain; }
}

/* Find yours (#198): a Filter button under the section heading, the choices
   as a sheet, and a "Showing 7 of 26" line while a filter is on. */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.filter-open { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid var(--accent); border-radius: 3px; background: rgba(63, 18, 21, .5); color: var(--cream-ink); font: 600 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.filter-open svg { width: 20px; height: 20px; }
.filter-note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.filter-note[hidden] { display: none; }
.filter-note button { min-height: 44px; padding: 0 6px; background: none; border: 0; color: var(--blush); font: 600 12px/1 var(--sans); text-decoration: underline; cursor: pointer; }
.filter-kick { margin: 16px 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--olive); }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip { min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 3px; background: none; color: var(--cream-ink); font: 500 13.5px/1 var(--sans); cursor: pointer; }
.filter-chip[aria-pressed="true"] { border-color: var(--accent); background: rgba(63, 18, 21, .8); }
.filter-apply { width: 100%; margin-top: 20px; }
.filter-apply:disabled { opacity: .5; }
.filter-clear { display: block; min-height: 44px; margin: 6px auto 0; background: none; border: 0; color: var(--muted); font: 500 13px/1 var(--sans); text-decoration: underline; cursor: pointer; }

/* Light mode on weak signal (#200): a thin note under the header. */
.lite-note { position: fixed; z-index: 59; top: 66px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 12px; height: 36px; padding: 0 14px; background: #2B2412; border-bottom: 1px solid rgba(232, 194, 74, .35); color: #F2DE9C; font-size: 12.5px; white-space: nowrap; }
html.lite .stories { top: 110px; }
html.lite.view-catalog .catalog { padding-top: 132px; }
@media (min-width: 768px) { html.lite.view-catalog .catalog { padding-top: 166px; } }
.lite-note button { min-height: 36px; padding: 0 6px; background: none; border: 0; color: #F2DE9C; font: 600 12.5px/1 var(--sans); text-decoration: underline; cursor: pointer; }
html.view-product .lite-note { display: none; }
@media (max-width: 767px) { html.lite.view-product .catalog { padding-top: 0; } }
.lite-note { transition: transform .5s var(--ease); }
header.top.away + .lite-note { transform: translateY(-66px); }

/* Visit us on phones (#202): Call, WhatsApp and Directions as three big
   buttons above the facts, with the open-now line; wider screens keep the
   facts and the Get directions button. */
.visit-acts, .visit-open { display: none; }
@media (max-width: 767px) {
  .visit-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 20px 0 10px; }
  .visit-act { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 84px; padding: 12px 6px; border: 1px solid var(--line-strong); border-radius: 3px; background: rgba(63, 18, 21, .5); color: var(--cream-ink); font: 600 12px/1 var(--sans); letter-spacing: .08em; text-decoration: none; }
  .visit-act svg { width: 26px; height: 26px; color: var(--blush); }
  .visit-act.is-wa svg { color: #25D366; }
  .visit-open { display: flex; margin-bottom: 18px; }
  .visit-dir { display: none; }
}