/* Bouquet Studio app styles. Mobile first; Fluent tokens from tokens.css.
 * App-level tokens below are the brand's warm surfaces (recommendation: a cream canvas
 * and a stage behind the bouquet); everything else reads the Fluent tokens. */
:root {
  --appCanvas: #f6f1ea;
  --appSurface: var(--colorNeutralBackground1);
  --appStage: #efe6da;
  --appStageGlow: #fbf7f1;
  --appInk: var(--colorNeutralForeground1);
  --fontDisplay: 'Fraunces', Georgia, 'Times New Roman', serif;
  --topbarH: 56px;
  --barH: 56px;
  --dockSpace: calc(88px + var(--safeB));
  --safeB: env(safe-area-inset-bottom, 0px);
  --stageH: clamp(260px, 46svh, 480px);
  --ui-scroll-padding-top: 72px;
}
:root[data-theme='dark'] {
  --appCanvas: #171214;
  --appStage: #231b1e;
  --appStageGlow: #2f2427;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) { --appCanvas: #171214; --appStage: #231b1e; --appStageGlow: #2f2427; }
}

html { background: var(--appCanvas); }
body { background: var(--appCanvas); min-height: 100svh; overscroll-behavior-y: none; }
main { padding-bottom: var(--spacingVerticalXXXL); }
.route-studio main { padding-bottom: var(--safeB); }
main:focus { outline: none; }
img { max-width: 100%; }
button { -webkit-tap-highlight-color: transparent; }

.t-display { font-family: var(--fontDisplay); font-weight: 500; letter-spacing: -0.01em; font-optical-sizing: auto; }
.t-eyebrow { font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); font-weight: var(--fontWeightSemibold); color: var(--colorBrandForeground1); }
.t-muted { color: var(--colorNeutralForeground3); }
.t-secondary { color: var(--colorNeutralForeground2); }
.icon { width: 20px; height: 20px; flex: none; fill: currentColor; }
.icon--24 { width: 24px; height: 24px; }
.icon--mirror { transform: rotate(90deg); }
.wrap { width: 100%; max-width: 1328px; margin-inline: auto; padding-inline: var(--spacingHorizontalL); }
@media (min-width: 640px) { .wrap { padding-inline: var(--spacingHorizontalXXL); } }
@media (min-width: 1024px) { .wrap { padding-inline: var(--spacingHorizontalXXXL); } }

/* ---------- Top bar (all widths) and tab bar (below 1024px) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20; height: var(--topbarH);
  background: color-mix(in srgb, var(--appCanvas) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
}
.topbar__inner { height: 100%; display: flex; align-items: center; gap: var(--spacingHorizontalM); }
.brand { display: inline-flex; align-items: center; gap: var(--spacingHorizontalS); color: var(--colorNeutralForeground1); text-decoration: none; min-height: 44px; }
.brand__mark { width: 28px; height: 28px; color: var(--colorBrandForeground1); }
.brand__name { font-family: var(--fontDisplay); font-size: var(--fontSizeBase500); line-height: var(--lineHeightBase500); font-weight: 500; white-space: nowrap; }
.topnav { display: none; gap: var(--spacingHorizontalXS); margin-inline-start: var(--spacingHorizontalXL); }
.topnav a { display: inline-flex; align-items: center; gap: var(--spacingHorizontalSNudge); padding: var(--spacingVerticalS) var(--spacingHorizontalM); border-radius: var(--borderRadiusMedium); color: var(--colorNeutralForeground2); text-decoration: none; font-weight: var(--fontWeightSemibold); }
.topnav a:hover { background: var(--colorSubtleBackgroundHover); color: var(--colorNeutralForeground1); }
.topnav a[aria-current='page'] { color: var(--colorBrandForeground1); background: var(--colorBrandBackground2); }
.topbar__actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--spacingHorizontalXS); }
.topbar__ask { display: none; }
@media (min-width: 640px) { .topbar__ask { display: inline-flex; } }
.count-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--borderRadiusCircular); background: var(--colorBrandBackground); color: var(--colorNeutralForegroundOnBrand); font-size: var(--fontSizeBase100); line-height: 20px; font-weight: var(--fontWeightSemibold); text-align: center; }

/* Phones: a floating dock with the two places (Shop, Studio) and the florist.
 * From 640px the top nav takes over. Pages with their own bottom bar hide the dock. */
.dock { position: fixed; z-index: 30; inset-inline: 0; bottom: calc(var(--spacingVerticalM) + var(--safeB)); display: grid; justify-items: center; gap: var(--spacingVerticalS); pointer-events: none; }
.dock > * { pointer-events: auto; }
.dock__row { display: flex; align-items: center; gap: var(--spacingHorizontalS); }
.dock__nav { display: flex; gap: var(--spacingHorizontalXS); padding: var(--spacingVerticalXS); border-radius: var(--borderRadiusCircular); background: var(--colorNeutralBackground1); box-shadow: var(--shadow16); border: var(--strokeWidthThin) solid var(--colorNeutralStroke2); }
.dock__item { display: inline-flex; align-items: center; gap: var(--spacingHorizontalSNudge); height: 48px; padding: 0 var(--spacingHorizontalXL); border-radius: var(--borderRadiusCircular); color: var(--colorNeutralForeground2); text-decoration: none; font-weight: var(--fontWeightSemibold); transition: background var(--durationFaster) var(--curveEasyEase); }
.dock__item:hover { background: var(--colorSubtleBackgroundHover); }
.dock__item .icon--filled, .topnav .icon--filled { display: none; }
.dock__item[aria-current='page'] { background: var(--colorBrandBackground2); color: var(--colorBrandForeground1); }
.dock__item[aria-current='page'] .icon--regular { display: none; }
.dock__item[aria-current='page'] .icon--filled { display: block; }
.dock__ai { width: 56px; height: 56px; border-radius: var(--borderRadiusCircular); border: 0; display: grid; place-items: center; color: var(--colorNeutralForegroundOnBrand); background: var(--colorBrandBackground); box-shadow: var(--shadow16); cursor: pointer; transition: transform var(--durationFast) var(--curveEasyEase); }
.dock__ai:hover { background: var(--colorBrandBackgroundHover); }
.dock__ai:active { transform: scale(0.96); }
.dock__ai .icon { width: 24px; height: 24px; }
.dock__ai:focus-visible { outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2); outline-offset: 2px; }
.compare-tray { display: inline-flex; align-items: center; gap: var(--spacingHorizontalS); min-height: 40px; padding: 0 var(--spacingHorizontalM) 0 var(--spacingHorizontalL); border-radius: var(--borderRadiusCircular); background: var(--colorNeutralBackgroundInverted); color: var(--colorNeutralForegroundInverted); box-shadow: var(--shadow16); text-decoration: none; font-weight: var(--fontWeightSemibold); }
.compare-tray[hidden] { display: none; }
.compare-tray b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--borderRadiusCircular); background: var(--colorBrandBackground); color: var(--colorNeutralForegroundOnBrand); font-size: var(--fontSizeBase100); line-height: 20px; text-align: center; }
.route-b .dock__row, .route-checkout .dock__row, .route-studio .dock__row { display: none; }
@media (min-width: 640px) {
  .dock__row { display: none; }
  .topnav { display: flex; }
}

/* ---------- Shared bits ---------- */
.icon-btn { min-width: 44px; min-height: 44px; }
.chips { display: flex; gap: var(--spacingHorizontalS); overflow-x: auto; scrollbar-width: none; padding: 2px var(--spacingHorizontalL); margin-inline: calc(-1 * var(--spacingHorizontalL)); scroll-padding-inline: var(--spacingHorizontalL); }
.chips::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .chips { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; overflow: visible; } }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: var(--spacingHorizontalXS);
  min-height: 36px; padding: 0 var(--spacingHorizontalM); border-radius: var(--borderRadiusCircular);
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); background: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground1); font: inherit; font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); cursor: pointer; white-space: nowrap;
  transition: background var(--durationFaster) var(--curveEasyEase), border-color var(--durationFaster) var(--curveEasyEase);
}
.chip:hover { background: var(--colorNeutralBackground1Hover); }
.chip[aria-pressed='true'], .chip[aria-checked='true'] { background: var(--colorBrandBackground2); border-color: var(--colorBrandStroke1, var(--colorBrandBackground)); color: var(--colorBrandForeground2, var(--colorBrandForeground1)); font-weight: var(--fontWeightSemibold); }
.chip .icon { width: 16px; height: 16px; }
.chip--ai { border-color: var(--colorBrandBackground); color: var(--colorBrandForeground1); }

.section-title { font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); font-weight: var(--fontWeightSemibold); margin: 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacingHorizontalM); margin: var(--spacingVerticalXL) 0 var(--spacingVerticalM); }
.empty { text-align: center; padding: var(--spacingVerticalXXXL) var(--spacingHorizontalL); color: var(--colorNeutralForeground2); }
.empty__art { width: 120px; margin: 0 auto var(--spacingVerticalL); opacity: .9; }
.empty__title { font-family: var(--fontDisplay); font-size: var(--fontSizeBase500); line-height: var(--lineHeightBase500); color: var(--colorNeutralForeground1); margin: 0 0 var(--spacingVerticalS); }
.empty p { max-width: 376px; margin: 0 auto var(--spacingVerticalL); }

.tag-row { display: flex; flex-wrap: wrap; gap: var(--spacingHorizontalXS); }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--spacingHorizontalS); border-radius: var(--borderRadiusCircular); background: var(--colorNeutralBackground3); color: var(--colorNeutralForeground2); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); }
.pill .icon { width: 16px; height: 16px; }
.pill--ok { color: var(--colorStatusSuccessForeground1); background: var(--colorStatusSuccessBackground1); }
.pill--warn { color: var(--colorStatusWarningForeground3); background: var(--colorStatusWarningBackground1); }

.bq { width: 100%; height: 100%; display: block; object-fit: contain; opacity: 0; transition: opacity var(--durationSlow) var(--curveEasyEase); }
.bq[src] { opacity: 1; }
.stagebox { background: radial-gradient(120% 90% at 50% 30%, var(--appStageGlow), var(--appStage) 70%); border-radius: var(--borderRadius3XLarge); overflow: hidden; }

/* ---------- Shop ---------- */
.hero { padding: var(--spacingVerticalXL) 0 var(--spacingVerticalL); display: grid; gap: var(--spacingVerticalM); }
.hero__title { margin: 0; font-size: var(--fontSizeHero800); line-height: var(--lineHeightHero800); }
.hero__lede { margin: 0; max-width: 52ch; color: var(--colorNeutralForeground2); font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); }
.hero__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacingVerticalS) var(--spacingHorizontalS); max-width: 480px; margin-top: var(--spacingVerticalXS); }
.hero__actions .ui-button { width: 100%; justify-content: center; }
@media (min-width: 480px) { .hero__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px) { .hero__title { font-size: var(--fontSizeHero900); line-height: var(--lineHeightHero900); } }
@media (min-width: 1024px) { .hero { padding-top: var(--spacingVerticalXXXL); } .hero__title { font-size: var(--fontSizeHero1000); line-height: var(--lineHeightHero1000); } }

.filters { position: sticky; top: var(--topbarH); z-index: 10; background: var(--appCanvas); padding: var(--spacingVerticalS) 0; display: grid; gap: var(--spacingVerticalS); border-bottom: var(--strokeWidthThin) solid transparent; }
.filters.is-stuck { border-bottom-color: var(--colorNeutralStroke2); }
.filters__more { display: none; }
.filters__toggle .count-badge { margin-inline-start: 2px; }
@media (min-width: 640px) { .filters__more { display: flex; } .filters__toggle { display: none; } }
.chips--wrap { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; overflow: visible; }
.sheet { width: 100%; max-width: 100%; max-height: 85svh; margin: auto 0 0; padding: 0 var(--spacingHorizontalL) calc(var(--spacingVerticalL) + var(--safeB)); border: 0; border-radius: var(--borderRadius4XLarge) var(--borderRadius4XLarge) 0 0; background: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); box-shadow: var(--shadow64); }
.sheet[open] { animation: sheet-in var(--durationGentle) var(--curveDecelerateMid); }
.sheet::backdrop { background: var(--colorBackgroundOverlay); }
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet__grab { width: 36px; height: 4px; margin: var(--spacingVerticalS) auto; border-radius: var(--borderRadiusCircular); background: var(--colorNeutralStroke1); }
.sheet__head { display: flex; justify-content: space-between; align-items: center; }
.sheet__label { margin: var(--spacingVerticalL) 0 var(--spacingVerticalS); font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); font-weight: var(--fontWeightSemibold); color: var(--colorNeutralForeground2); }
.sheet__foot { display: grid; grid-template-columns: 1fr 2fr; gap: var(--spacingHorizontalS); margin-top: var(--spacingVerticalXXL); }
.results-line { display: flex; justify-content: space-between; align-items: center; margin: var(--spacingVerticalM) 0; color: var(--colorNeutralForeground3); font-size: var(--fontSizeBase200); }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacingVerticalL) var(--spacingHorizontalM); }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacingVerticalXXL) var(--spacingHorizontalL); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card { position: relative; display: grid; gap: var(--spacingVerticalS); }
.card__media { display: block; aspect-ratio: 4 / 5; border-radius: var(--borderRadius3XLarge); color: inherit; transition: transform var(--durationNormal) var(--curveDecelerateMid); }
.card__media:hover { transform: translateY(-2px); }
.card__media:focus-visible { outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2); outline-offset: 2px; }
.card__media .bq { width: 100%; height: 100%; object-fit: contain; display: block; padding: 6%; }
.card__media { position: relative; }
.card__badge { position: absolute; left: var(--spacingHorizontalS); top: var(--spacingVerticalS); display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--spacingHorizontalS); border-radius: var(--borderRadiusCircular); background: var(--colorNeutralBackground1); color: var(--colorStatusSuccessForeground1); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); font-weight: var(--fontWeightSemibold); box-shadow: var(--shadow4); }
.card__badge .icon { width: 16px; height: 16px; }
.card__title { margin: 0; font-family: var(--fontDisplay); font-weight: 500; font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); }
.card__title a { color: inherit; text-decoration: none; }
.card__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--spacingHorizontalS); }
.card__price { font-weight: var(--fontWeightSemibold); font-variant-numeric: tabular-nums; }
.card__meta { color: var(--colorNeutralForeground3); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); }
.swatch-dots { display: inline-flex; }
.swatch-dots span { width: 12px; height: 12px; border-radius: var(--borderRadiusCircular); border: 1.5px solid var(--colorNeutralBackground1); margin-inline-start: -4px; }
.swatch-dots span:first-child { margin-inline-start: 0; }

.hero__copy { display: grid; gap: var(--spacingVerticalM); align-content: center; }
.hero__perks { list-style: none; margin: var(--spacingVerticalXS) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--spacingVerticalXS) var(--spacingHorizontalL); color: var(--colorNeutralForeground2); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); }
.hero__perks li { display: inline-flex; align-items: center; gap: var(--spacingHorizontalXS); }
.hero__perks .icon { width: 16px; height: 16px; color: var(--colorBrandForeground1); }
.hero__art { display: none; position: relative; color: inherit; text-decoration: none; }
.hero__stage { display: block; aspect-ratio: 4 / 5; max-height: 560px; margin-inline-start: auto; box-shadow: var(--shadow16); }
.hero__stage .bq { width: 100%; height: 100%; object-fit: contain; padding: 5%; transition: transform var(--durationSlow) var(--curveDecelerateMid); }
.hero__art:hover .hero__stage .bq { transform: scale(1.03); }
.hero__art:focus-visible { outline: none; }
.hero__art:focus-visible .hero__stage { outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2); outline-offset: 2px; }
.hero__bubble { position: absolute; left: 0; bottom: 12%; max-width: 300px; display: flex; gap: var(--spacingHorizontalS); padding: var(--spacingVerticalM) var(--spacingHorizontalL); border-radius: var(--borderRadius3XLarge) var(--borderRadius3XLarge) var(--borderRadius3XLarge) var(--borderRadiusMedium); background: var(--colorNeutralBackground1); box-shadow: var(--shadow16); border: var(--strokeWidthThin) solid var(--colorTransparentStroke); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); color: var(--colorNeutralForeground2); }
.hero__bubble b { display: block; color: var(--colorNeutralForeground1); font-size: var(--fontSizeBase300); }
.hero__tag { position: absolute; top: 6%; right: 6%; display: grid; padding: var(--spacingVerticalS) var(--spacingHorizontalM); border-radius: var(--borderRadiusXLarge); background: var(--colorNeutralBackground1); box-shadow: var(--shadow8); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); color: var(--colorNeutralForeground2); }
.hero__tag b { font-family: var(--fontDisplay); font-weight: 500; font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); color: var(--colorNeutralForeground1); }
@media (min-width: 768px) {
  .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--spacingHorizontalXXXL); align-items: center; padding-bottom: var(--spacingVerticalXXL); }
  .hero__art { display: block; }
}
@media (min-width: 1366px) { .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); } }
.shop-title { font-weight: 500; font-size: var(--fontSizeBase500); line-height: var(--lineHeightBase500); }
@media (min-width: 1024px) { .shop-title { font-size: var(--fontSizeBase600); line-height: var(--lineHeightBase600); } }

.footer { border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2); margin-bottom: var(--dockSpace); color: var(--colorNeutralForeground3); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); }
.footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--spacingVerticalM) var(--spacingHorizontalXXL); padding-block: var(--spacingVerticalXL); }
.footer p { margin: var(--spacingVerticalXS) 0 0; max-width: 56ch; }
.footer .brand__name { color: var(--colorNeutralForeground1); }
.footer__nav { display: flex; gap: var(--spacingHorizontalL); align-items: center; }
.footer__nav a { color: var(--colorNeutralForeground2); min-height: 44px; display: inline-flex; align-items: center; }
.route-studio .footer { display: none; }
.route-b .footer, .route-checkout .footer { margin-bottom: 0; }
@media (min-width: 640px) { .footer { margin-bottom: 0; } }

/* ---------- Bouquet detail ---------- */
.detail { display: grid; gap: var(--spacingVerticalXL); padding-top: var(--spacingVerticalM); }
.detail__media { aspect-ratio: 4 / 5; max-height: 62svh; width: 100%; margin-inline: auto; }
.detail__media .bq { width: 100%; height: 100%; object-fit: contain; display: block; padding: 4%; }
.detail__title { margin: 0; font-size: var(--fontSizeHero800); line-height: var(--lineHeightHero800); }
.detail__price { font-size: var(--fontSizeBase500); line-height: var(--lineHeightBase500); font-weight: var(--fontWeightSemibold); font-variant-numeric: tabular-nums; }
.detail__blurb { margin: 0; color: var(--colorNeutralForeground2); max-width: 56ch; font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); }
.backlink { display: inline-flex; align-items: center; gap: var(--spacingHorizontalXS); min-height: 44px; color: var(--colorNeutralForeground2); text-decoration: none; font-weight: var(--fontWeightSemibold); }
.backlink:hover { color: var(--colorNeutralForeground1); }
@media (min-width: 1024px) {
  .detail { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; gap: var(--spacingHorizontalXXXL); }
  .detail__media { position: sticky; top: calc(var(--topbarH) + var(--spacingVerticalL)); max-height: calc(100svh - 120px); }
}
.facts { list-style: none; margin: 0; padding: 0; border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2); }
.facts li { display: flex; justify-content: space-between; gap: var(--spacingHorizontalL); padding: var(--spacingVerticalM) 0; border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2); }
.facts dt, .facts .k { color: var(--colorNeutralForeground3); }
.facts .v { text-align: end; display: inline-flex; align-items: center; gap: var(--spacingHorizontalXS); }
.meanings { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--spacingVerticalS); }
.meanings li { display: grid; grid-template-columns: 44px 1fr; gap: var(--spacingHorizontalM); align-items: center; }
.meanings img { width: 44px; height: 44px; background: var(--appStage); border-radius: var(--borderRadiusCircular); padding: 4px; }
.meanings b { display: block; font-weight: var(--fontWeightSemibold); }
.meanings span { color: var(--colorNeutralForeground3); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); }

.actionbar {
  position: sticky; bottom: 0; z-index: 15;
  display: flex; gap: var(--spacingHorizontalS); padding: var(--spacingVerticalM) var(--spacingHorizontalL) calc(var(--spacingVerticalM) + var(--safeB));
  margin: var(--spacingVerticalL) calc(-1 * var(--spacingHorizontalL)) 0;
  background: color-mix(in srgb, var(--appCanvas) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
}
.actionbar .ui-button { flex: 1; }
@media (min-width: 640px) { .actionbar { margin-inline: 0; padding-inline: 0; border: 0; background: none; backdrop-filter: none; position: static; } .actionbar .ui-button { flex: 0 1 auto; } }

/* ---------- Compare ---------- */
.compare { display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 320px); gap: var(--spacingHorizontalM); overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--spacingVerticalXS) var(--spacingHorizontalL) var(--spacingVerticalL); margin-inline: calc(-1 * var(--spacingHorizontalL)); scroll-padding-inline: var(--spacingHorizontalL); }
@media (min-width: 1024px) { .compare { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin: 0; padding-inline: 0; } }
.ccard { scroll-snap-align: start; background: var(--colorNeutralBackground1); border-radius: var(--borderRadius3XLarge); box-shadow: var(--shadow4); border: var(--strokeWidthThin) solid var(--colorTransparentStroke); padding: var(--spacingVerticalM) var(--spacingHorizontalL) var(--spacingVerticalL); display: grid; gap: var(--spacingVerticalS); align-content: start; }
.ccard__media { aspect-ratio: 1; }
.ccard__media .bq { width: 100%; height: 100%; object-fit: contain; padding: 5%; }
.ccard__head { display: flex; justify-content: space-between; align-items: start; gap: var(--spacingHorizontalS); }
.ccard .facts li { padding: var(--spacingVerticalS) 0; font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); }
.ccard__actions { display: grid; gap: var(--spacingVerticalS); margin-top: var(--spacingVerticalS); }

/* ---------- Studio ---------- */
.route-studio .topbar { display: none; }
@media (min-width: 1024px) { .route-studio .topbar { display: block; } }
.studio-bar {
  position: sticky; top: 0; z-index: 20; height: var(--barH);
  display: flex; align-items: center; gap: var(--spacingHorizontalXS); padding-inline: var(--spacingHorizontalS);
  background: var(--appCanvas); border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
}
.studio-bar__title { flex: 1; min-width: 0; display: grid; }
.studio-bar__title b { font-family: var(--fontDisplay); font-weight: 500; font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.studio-bar__title span { font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); color: var(--colorNeutralForeground3); font-variant-numeric: tabular-nums; }
.studio-bar .ui-button--primary { white-space: nowrap; }
@media (min-width: 1024px) { .studio-bar { top: var(--topbarH); padding-inline: var(--spacingHorizontalXXXL); } }

.stage { position: sticky; top: var(--barH); z-index: 12; height: var(--stageH); border-radius: 0; touch-action: none; user-select: none; -webkit-user-select: none; }
.stage > svg { width: 100%; height: 100%; display: block; }
.stage:focus-visible { outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2); outline-offset: -2px; }
.stage .fl { cursor: grab; }
.stage .fl.is-dragging { cursor: grabbing; }
.sel__ring { fill: none; stroke: var(--colorBrandForeground1); stroke-width: 2; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.sel__dot { fill: var(--colorNeutralBackground1); stroke: var(--colorBrandForeground1); stroke-width: 2.5; }
.sel__hit { fill: transparent; cursor: nwse-resize; }
.stage__status { position: absolute; top: var(--spacingVerticalS); left: var(--spacingHorizontalS); display: flex; gap: var(--spacingHorizontalXS); }
.stage__status .pill { box-shadow: var(--shadow4); background: var(--colorNeutralBackground1); border: 0; cursor: pointer; font: inherit; font-size: var(--fontSizeBase200); min-height: 28px; }
.stage__tools { position: absolute; bottom: var(--spacingVerticalS); right: var(--spacingHorizontalS); display: flex; gap: var(--spacingHorizontalXS); }
.fab { width: 44px; height: 44px; border-radius: var(--borderRadiusCircular); border: var(--strokeWidthThin) solid var(--colorNeutralStroke2); background: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); display: grid; place-items: center; box-shadow: var(--shadow8); cursor: pointer; }
.fab:hover { background: var(--colorNeutralBackground1Hover); }
.fab--danger { color: var(--colorStatusDangerForeground1); }
.stage__ai { position: absolute; left: var(--spacingHorizontalS); bottom: var(--spacingVerticalS); display: inline-flex; align-items: center; gap: var(--spacingHorizontalSNudge); height: 44px; padding: 0 var(--spacingHorizontalL) 0 var(--spacingHorizontalM); border-radius: var(--borderRadiusCircular); border: 0; background: var(--colorBrandBackground); color: var(--colorNeutralForegroundOnBrand); font: inherit; font-weight: var(--fontWeightSemibold); box-shadow: var(--shadow8); cursor: pointer; }
.stage__ai:hover { background: var(--colorBrandBackgroundHover); }
.stage__ai:focus-visible { outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2); outline-offset: 2px; }
@media (min-width: 1024px) { .stage__ai { display: none; } }
.panel__hint { display: flex; gap: var(--spacingHorizontalS); align-items: flex-start; margin: 0 0 var(--spacingVerticalXS); padding: var(--spacingVerticalS) var(--spacingHorizontalM); border-radius: var(--borderRadiusXLarge); background: var(--colorNeutralBackground3); color: var(--colorNeutralForeground2); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); }
.panel__hint .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--colorBrandForeground1); }
.panel__tabs[hidden] { display: none; }

.panel { background: var(--appCanvas); }
.panel__tabs { position: sticky; top: calc(var(--barH) + var(--stageH)); z-index: 11; background: var(--appCanvas); border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2); }
.panel__tabs .ui-tablist { overflow-x: auto; scrollbar-width: none; padding-inline: var(--spacingHorizontalS); }
.panel__body { padding: var(--spacingVerticalM) var(--spacingHorizontalL) var(--spacingVerticalXXL); min-height: 50svh; }
.panel__body > h3:first-child, .panel__body > .section-head:first-child { margin-top: var(--spacingVerticalXS); }

@media (min-width: 1024px) {
  .studio { display: grid; grid-template-columns: minmax(0, 1fr) 440px; align-items: start; }
  .studio-bar { grid-column: 1 / -1; }
  .stage { top: calc(var(--topbarH) + var(--barH)); height: calc(100svh - var(--topbarH) - var(--barH)); }
  .panel { border-inline-start: var(--strokeWidthThin) solid var(--colorNeutralStroke2); min-height: calc(100svh - var(--topbarH) - var(--barH)); }
  .panel__tabs { top: calc(var(--topbarH) + var(--barH)); }
  .panel__body { padding-inline: var(--spacingHorizontalXL); }
}

.kinds { display: grid; grid-auto-flow: column; grid-auto-columns: 92px; gap: var(--spacingHorizontalS); overflow-x: auto; padding: 2px var(--spacingHorizontalL) var(--spacingVerticalS); margin-inline: calc(-1 * var(--spacingHorizontalL)); scrollbar-width: thin; }
@media (min-width: 1024px) { .kinds { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); margin: 0; padding-inline: 0; } }
.kind { display: grid; justify-items: center; gap: 2px; padding: var(--spacingVerticalS) var(--spacingHorizontalXS); border-radius: var(--borderRadiusXLarge); border: var(--strokeWidthThin) solid var(--colorNeutralStroke2); background: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); cursor: pointer; font: inherit; text-align: center; }
.kind:hover { background: var(--colorNeutralBackground1Hover); }
.kind:active { background: var(--colorNeutralBackground1Pressed); }
.kind[aria-pressed='true'] { border-color: var(--colorBrandBackground); background: var(--colorBrandBackground2); }
.kind img { width: 56px; height: 56px; }
.kind b { font-weight: var(--fontWeightRegular); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 32px; }
.kind span { font-size: var(--fontSizeBase100); line-height: var(--lineHeightBase100); color: var(--colorNeutralForeground3); font-variant-numeric: tabular-nums; }

.layers { list-style: none; margin: 0; padding: 0; }
.layer { display: flex; align-items: center; gap: var(--spacingHorizontalXS); border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2); background: var(--appCanvas); }
.layer.is-selected { background: var(--colorBrandBackground2); box-shadow: inset 3px 0 0 var(--colorBrandBackground); }
.layer.is-drag { opacity: .6; }
.layer__grip { width: 36px; min-height: 48px; display: grid; place-items: center; color: var(--colorNeutralForeground3); cursor: grab; touch-action: none; border: 0; background: none; }
.layer__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--spacingHorizontalS); min-height: 48px; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; padding: 0; }
.layer__main img { width: 32px; height: 32px; flex: none; }
.layer__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layer__warn { color: var(--colorStatusWarningForeground3); display: inline-flex; align-items: center; gap: 2px; font-size: var(--fontSizeBase200); }

.radio-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacingHorizontalS); }
.option { display: grid; gap: 2px; justify-items: center; padding: var(--spacingVerticalS); min-height: 56px; border-radius: var(--borderRadiusXLarge); border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); background: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); font: inherit; cursor: pointer; }
.option span { font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground3); font-variant-numeric: tabular-nums; }
.option[aria-checked='true'] { border-color: var(--colorBrandBackground); background: var(--colorBrandBackground2); font-weight: var(--fontWeightSemibold); box-shadow: inset 0 0 0 1px var(--colorBrandBackground); }

.swatches { display: flex; flex-wrap: wrap; gap: var(--spacingHorizontalS); align-items: center; }
.swatch { width: 36px; height: 36px; border-radius: var(--borderRadiusCircular); border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); cursor: pointer; position: relative; padding: 0; }
.swatch[aria-checked='true'] { box-shadow: 0 0 0 2px var(--colorNeutralBackground1), 0 0 0 4px var(--colorBrandForeground1); }
.swatch[aria-checked='true']::after { content: ''; position: absolute; inset: 12px; border-radius: var(--borderRadiusCircular); background: var(--colorNeutralBackground1); box-shadow: var(--shadow4); }
.swatch-custom { display: inline-flex; align-items: center; gap: var(--spacingHorizontalXS); font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground2); }
.swatch-custom input[type='color'] { width: 36px; height: 36px; padding: 0; border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); border-radius: var(--borderRadiusCircular); background: none; cursor: pointer; }
.swatch-custom input[type='color']::-webkit-color-swatch-wrapper { padding: 2px; }
.swatch-custom input[type='color']::-webkit-color-swatch { border: 0; border-radius: var(--borderRadiusCircular); }
.wrap-group { display: grid; gap: var(--spacingVerticalS); padding: var(--spacingVerticalM) 0; border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2); }
.wrap-group__head { display: flex; justify-content: space-between; align-items: center; }
.wrap-group__head code { font-family: var(--fontFamilyMonospace); font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground3); }

.adjust-head { display: flex; align-items: center; gap: var(--spacingHorizontalM); margin-bottom: var(--spacingVerticalS); }
.adjust-head img { width: 52px; height: 52px; background: var(--appStage); border-radius: var(--borderRadiusCircular); padding: 4px; flex: none; }
.adjust-head > div { flex: 1; min-width: 0; }
.adjust-head .ui-button { flex: none; }
.adjust-head h3 { margin: 0; font-family: var(--fontDisplay); font-weight: 500; font-size: var(--fontSizeBase500); line-height: var(--lineHeightBase500); }
.adjust-head p { margin: 0; color: var(--colorNeutralForeground3); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); }
.slider-row { display: grid; grid-template-columns: 44px 1fr 44px; grid-template-rows: auto auto; column-gap: var(--spacingHorizontalXS); align-items: center; padding: var(--spacingVerticalXS) 0; }
.slider-row label { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); color: var(--colorNeutralForeground2); font-weight: var(--fontWeightSemibold); }
.slider-row output { font-variant-numeric: tabular-nums; color: var(--colorNeutralForeground1); font-weight: var(--fontWeightRegular); }
.slider-row .ui-slider { width: 100%; }
.btn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacingHorizontalS); margin-top: var(--spacingVerticalM); }
@media (min-width: 480px) { .btn-grid { grid-template-columns: repeat(3, 1fr); } }
.btn-grid .ui-button { justify-content: center; }
.danger-text { color: var(--colorStatusDangerForeground1); }

.check { display: grid; gap: var(--spacingVerticalM); padding: var(--spacingVerticalL); border-radius: var(--borderRadiusXLarge); background: var(--colorNeutralBackground1); box-shadow: var(--shadow4); border: var(--strokeWidthThin) solid var(--colorTransparentStroke); }
.meter { display: grid; gap: 4px; }
.meter__top { display: flex; justify-content: space-between; font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); }
.meter__top b { font-variant-numeric: tabular-nums; }
.meter__bar { height: 6px; border-radius: var(--borderRadiusCircular); background: var(--colorNeutralBackground3); overflow: hidden; position: relative; }
.meter__bar i { position: absolute; inset-block: 0; left: 0; border-radius: inherit; background: var(--colorStatusSuccessBackground3); }
.meter__bar i.is-warn { background: var(--colorStatusWarningBackground3); }
.meter__bar s { position: absolute; inset-block: -2px; width: 2px; background: var(--colorNeutralForeground3); }
.issues { margin: 0; padding-inline-start: var(--spacingHorizontalL); color: var(--colorNeutralForeground2); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); display: grid; gap: 4px; }
.price-lines { list-style: none; padding: 0; margin: 0; }
.price-lines li { display: flex; justify-content: space-between; padding: var(--spacingVerticalS) 0; border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2); font-variant-numeric: tabular-nums; }
.price-lines li.total { font-weight: var(--fontWeightSemibold); border-bottom: 0; font-size: var(--fontSizeBase400); }
.snaps { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacingHorizontalM); }
@media (min-width: 480px) { .snaps { grid-template-columns: repeat(3, 1fr); } }
.snap { position: relative; display: grid; gap: 4px; }
.snap__open { display: block; aspect-ratio: 4 / 5; border: var(--strokeWidthThin) solid var(--colorNeutralStroke2); padding: 0; cursor: pointer; }
.snap__open .bq { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.snap__name { font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); font-weight: var(--fontWeightSemibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snap__del { position: absolute; top: 4px; right: 4px; }
.save-row { display: flex; gap: var(--spacingHorizontalS); }
.save-row .ui-input { flex: 1; }

/* ---------- Checkout and confirmation ---------- */
.input-prefix { display: inline-flex; align-items: center; padding-inline-start: var(--spacingHorizontalM); color: var(--colorNeutralForeground3); font-variant-numeric: tabular-nums; }
.slots { border: 0; margin: 0; padding: 0; display: grid; gap: var(--spacingVerticalS); grid-template-columns: 1fr; }
@media (min-width: 480px) { .slots { grid-template-columns: 1fr 1fr; } }
.slots legend { padding: 0; margin-bottom: var(--spacingVerticalS); }
.slot { position: relative; display: flex; align-items: center; gap: var(--spacingHorizontalM); min-height: 56px; padding: var(--spacingVerticalS) var(--spacingHorizontalM); border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); border-radius: var(--borderRadiusXLarge); background: var(--colorNeutralBackground1); cursor: pointer; }
.slot:hover { background: var(--colorNeutralBackground1Hover); }
.slot input { accent-color: var(--colorBrandBackground); width: 18px; height: 18px; margin: 0; flex: none; }
.slot:has(input:checked) { border-color: var(--colorBrandBackground); background: var(--colorBrandBackground2); box-shadow: inset 0 0 0 1px var(--colorBrandBackground); }
.slot:has(input:focus-visible) { outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2); outline-offset: 1px; }
.slot__body { flex: 1; display: grid; }
.slot__body span { color: var(--colorNeutralForeground3); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); }
.slot__fee { font-weight: var(--fontWeightSemibold); font-variant-numeric: tabular-nums; }
.confirm__from { display: block; margin-top: var(--spacingVerticalS); font-family: var(--fontFamilyBase); font-style: normal; font-size: var(--fontSizeBase300); color: var(--colorNeutralForeground3); }
.confirm__facts div span:last-child:not(:first-child) { font-size: var(--fontSizeBase200); }
.checkout { display: grid; gap: var(--spacingVerticalXL); padding-top: var(--spacingVerticalM); }
@media (min-width: 1024px) { .checkout { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; gap: var(--spacingHorizontalXXXL); } .summary { position: sticky; top: calc(var(--topbarH) + var(--spacingVerticalL)); } }
.page-title { margin: 0; font-size: var(--fontSizeHero800); line-height: var(--lineHeightHero800); }
.form-section { display: grid; gap: var(--spacingVerticalM); padding: var(--spacingVerticalL) 0; border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2); }
.form-section h2 { margin: 0; font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); font-weight: var(--fontWeightSemibold); }
.form-row { display: grid; gap: var(--spacingVerticalM); }
@media (min-width: 480px) { .form-row--3 { grid-template-columns: 2fr 1fr 1fr; gap: var(--spacingHorizontalM); } .form-row--2 { grid-template-columns: 1fr 1fr; gap: var(--spacingHorizontalM); } }
.ui-field .ui-input, .ui-field .ui-textarea, .ui-field .ui-select { width: 100%; }
.ui-input input, .ui-textarea textarea { font-size: max(16px, var(--fontSizeBase300)); }
@media (min-width: 640px) { .ui-input input, .ui-textarea textarea { font-size: var(--fontSizeBase300); } }
.note-tools { display: flex; justify-content: space-between; align-items: center; gap: var(--spacingHorizontalS); flex-wrap: wrap; }
.summary { background: var(--colorNeutralBackground1); border-radius: var(--borderRadius3XLarge); box-shadow: var(--shadow4); border: var(--strokeWidthThin) solid var(--colorTransparentStroke); padding: var(--spacingVerticalL); display: grid; gap: var(--spacingVerticalM); }
.summary__item { display: grid; grid-template-columns: 88px 1fr; gap: var(--spacingHorizontalM); align-items: center; }
.summary__item .stagebox { aspect-ratio: 4 / 5; border-radius: var(--borderRadiusXLarge); }
.summary__item .bq { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.summary__item b { font-family: var(--fontDisplay); font-weight: 500; font-size: var(--fontSizeBase400); display: block; }
.demo-note { display: flex; gap: var(--spacingHorizontalS); align-items: flex-start; color: var(--colorNeutralForeground3); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); }
.place-bar { position: static; padding: var(--spacingVerticalXS) 0 0; background: none; }
.place-bar .ui-button { width: 100%; }

.confirm { display: grid; gap: var(--spacingVerticalXL); padding-top: var(--spacingVerticalXL); max-width: 960px; margin-inline: auto; }
@media (min-width: 768px) { .confirm { grid-template-columns: 1fr 1.2fr; align-items: center; gap: var(--spacingHorizontalXXXL); } }
.confirm__media { aspect-ratio: 4 / 5; max-height: 56svh; width: 100%; }
.confirm__media .bq { width: 100%; height: 100%; object-fit: contain; padding: 4%; }
.confirm__badge { display: inline-flex; align-items: center; gap: var(--spacingHorizontalS); color: var(--colorBrandForeground1); font-weight: var(--fontWeightSemibold); }
.confirm__badge .icon { width: 24px; height: 24px; }
.confirm__title { margin: var(--spacingVerticalS) 0 0; font-size: var(--fontSizeHero900); line-height: var(--lineHeightHero900); }
.confirm__note { margin: var(--spacingVerticalL) 0; padding: var(--spacingVerticalL) 0; border-block: var(--strokeWidthThin) solid var(--colorNeutralStroke2); font-family: var(--fontDisplay); font-style: italic; font-size: var(--fontSizeBase500); line-height: var(--lineHeightBase500); color: var(--colorNeutralForeground1); }
.confirm__facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacingHorizontalL); margin-bottom: var(--spacingVerticalXL); }
.confirm__facts div { display: grid; gap: 2px; }
.confirm__facts span { font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground3); }
.confirm__facts b { font-variant-numeric: tabular-nums; }

/* ---------- Florist (maker bar) ----------
 * A floating bar, not a chat: status line, idea chips, then mic + text + go. */
.maker { position: fixed; z-index: 40; left: 50%; bottom: calc(var(--spacingVerticalM) + var(--safeB)); width: min(640px, calc(100vw - var(--spacingHorizontalL))); transform: translateX(-50%); transition: transform var(--durationGentle) var(--curveDecelerateMid), opacity var(--durationNormal) var(--curveEasyEase); }
.maker[hidden] { display: block; visibility: hidden; opacity: 0; transform: translate(-50%, 24px); transition: transform var(--durationNormal) var(--curveAccelerateMin), opacity var(--durationFast) var(--curveEasyEase), visibility 0s linear var(--durationNormal); }
@media (min-width: 1024px) { .route-studio .maker { left: calc((100vw - 440px) / 2); width: min(640px, calc(100vw - 440px - var(--spacingHorizontalXXL))); } }
/* While the florist works in the studio, the canvas shrinks to the space above it, so the whole
 * bouquet stays in view. On phones and tablets the tool panel steps aside. */
.maker-open.route-studio .stage { height: calc(100svh - var(--barH) - var(--makerH, 180px) - var(--spacingVerticalXL) - var(--safeB)); transition: height var(--durationNormal) var(--curveDecelerateMid); }
.maker-open .stage__ai { display: none; }
@media (max-width: 1023.98px) { .maker-open.route-studio .panel { display: none; } }
@media (min-width: 1024px) { .maker-open.route-studio .stage { height: calc(100svh - var(--topbarH) - var(--barH) - var(--makerH, 180px) - var(--spacingVerticalXL)); } }
/* Flowers the florist (or you) just added grow in, one after another. */
.fl.is-new image { transform-box: fill-box; transform-origin: center; animation: bloom var(--durationSlow) var(--curveDecelerateMid) both; }
@keyframes bloom { from { opacity: 0; transform: scale(0.55); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fl.is-new image { animation: none; } .maker-open.route-studio .stage { transition: none; } }
.maker-open .dock__row, .maker-open .compare-tray { display: none; }
.maker__card { display: grid; gap: var(--spacingVerticalS); padding: var(--spacingVerticalM); border-radius: var(--borderRadius4XLarge); background: var(--colorNeutralBackground1); box-shadow: var(--shadow64); border: var(--strokeWidthThin) solid var(--colorNeutralStroke2); }
.maker__top { display: flex; align-items: flex-start; gap: var(--spacingHorizontalM); }
.maker__top .ai-mark { margin-top: 2px; }
.maker__status { flex: 1; min-width: 0; min-height: 36px; display: flex; align-items: center; }
.maker__line { display: grid; gap: 2px; width: 100%; }
.maker__line > b { font-weight: var(--fontWeightSemibold); font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); color: var(--colorNeutralForeground1); }
.maker__line > span { color: var(--colorNeutralForeground3); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); }
.maker__line > .ui-button { justify-self: start; margin-inline-start: -8px; }
.maker__done, .maker__error, .maker__note { display: flex; gap: var(--spacingHorizontalS); align-items: flex-start; }
.maker__note .icon { color: var(--inkMuted); flex: none; margin-top: 1px; }
.maker__done .icon { color: var(--colorStatusSuccessForeground1); flex: none; margin-top: 1px; }
.maker__error { color: var(--colorStatusDangerForeground1); }
.maker__error .icon { flex: none; margin-top: 1px; }
.maker .steps { margin-top: var(--spacingVerticalXS); max-height: 132px; overflow-y: auto; }
.maker__ideas { padding-block: 2px; }
.maker__ideas[hidden] { display: none; }
.maker__ideas .chip { font-size: var(--fontSizeBase200); min-height: 32px; }
@media (min-width: 640px) { .maker__ideas.chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } }
/* The composer is one pill: mic, text field and send sit inside it. While the florist listens the field gives
   way to the voice ribbons (canvas, assistant.js); while it works, to a thread with a running highlight. */
.maker__bar { position: relative; display: flex; align-items: center; gap: 2px; height: 52px; padding: 4px; border-radius: var(--borderRadiusCircular); border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); background: var(--colorNeutralBackground3);
  transition: height var(--durationNormal) var(--curveDecelerateMid), box-shadow var(--durationNormal) var(--curveEasyEase), border-color var(--durationNormal) var(--curveEasyEase), background-color var(--durationNormal) var(--curveEasyEase); }
.maker__bar:focus-within { border-color: var(--colorBrandBackground); box-shadow: inset 0 0 0 1px var(--colorBrandBackground); background: var(--colorNeutralBackground1); }
.maker__bar input { flex: 1; min-width: 0; height: 44px; padding: 0 var(--spacingHorizontalS) 0 var(--spacingHorizontalM); border: 0; background: transparent; color: var(--colorNeutralForeground1); font: inherit; font-size: 16px; }
.maker__bar input::placeholder { color: var(--colorNeutralForeground4); }
.maker__bar input:focus { outline: none; }
.maker__mic, .maker__go { width: 44px; height: 44px; flex: none; border-radius: var(--borderRadiusCircular); border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; transition: background-color var(--durationFast) var(--curveEasyEase), color var(--durationFast) var(--curveEasyEase); }
.maker__mic { color: var(--colorBrandForeground1); }
.maker__go { color: var(--colorNeutralForeground1); }
.maker__mic:hover, .maker__go:hover { background: var(--colorSubtleBackgroundHover); }
.maker__mic:disabled { color: var(--colorNeutralForegroundDisabled); cursor: default; background: transparent; }
.maker__mic:focus-visible, .maker__go:focus-visible { outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2); outline-offset: -2px; }
.maker[data-state='working'] .maker__go, .maker[data-state='hearing'] .maker__go { color: var(--colorStatusDangerForeground1); }
.maker__wave { position: absolute; top: 4px; bottom: 4px; left: 14px; right: 96px; pointer-events: none; opacity: 0; transition: opacity var(--durationNormal) var(--curveEasyEase); }
.maker__wave canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.maker__glow { filter: blur(7px) saturate(1.2); opacity: .55; }
.maker__foot { margin: 0; text-align: center; font-size: var(--fontSizeBase100); line-height: var(--lineHeightBase100); color: var(--colorNeutralForeground3); }
.ai-mark { width: 32px; height: 32px; border-radius: var(--borderRadiusCircular); display: grid; place-items: center; color: var(--colorNeutralForegroundOnBrand); background: var(--colorBrandBackground); flex: none; }
.ai-mark .icon { width: 18px; height: 18px; }
.steps { list-style: none; margin: 0; padding: var(--spacingVerticalS) var(--spacingHorizontalM); display: grid; gap: 4px; border-radius: var(--borderRadiusXLarge); background: var(--colorNeutralBackground3); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); color: var(--colorNeutralForeground2); }
.steps li { display: flex; gap: var(--spacingHorizontalXS); align-items: flex-start; }
.steps .icon { width: 16px; height: 16px; color: var(--colorStatusSuccessForeground1); }
@media (prefers-reduced-motion: reduce) { .step-run::before { animation: none; } }

/* ---------- Toast ---------- */
.toaster { position: fixed; z-index: 50; left: 50%; transform: translateX(-50%); bottom: calc(var(--dockSpace) + var(--spacingVerticalXXL)); display: grid; gap: var(--spacingVerticalS); width: min(92vw, 420px); pointer-events: none; }
@media (min-width: 1024px) { .toaster { bottom: var(--spacingVerticalXXL); } }
.toast { pointer-events: auto; display: flex; align-items: center; gap: var(--spacingHorizontalM); padding: var(--spacingVerticalM) var(--spacingHorizontalL); border-radius: var(--borderRadiusXLarge); background: var(--colorNeutralBackgroundInverted, #292929); color: var(--colorNeutralForegroundInverted, #fff); box-shadow: var(--shadow16); animation: toast-in var(--durationGentle) var(--curveDecelerateMid); }
.toast span { flex: 1; }
.toast button { border: 0; background: none; color: var(--colorBrandForegroundInverted, var(--colorNeutralForegroundInverted)); font: inherit; font-weight: var(--fontWeightSemibold); cursor: pointer; min-height: 32px; padding: 0 var(--spacingHorizontalS); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Forced colors ---------- */
@media (forced-colors: active) {
  .chip[aria-pressed='true'], .option[aria-checked='true'], .kind[aria-pressed='true'] { border: 2px solid Highlight; }
  .swatch { forced-color-adjust: none; }
  .swatch[aria-checked='true'] { outline: 3px solid Highlight; outline-offset: 2px; }
  .layer.is-selected { outline: 2px solid Highlight; outline-offset: -2px; }
  .sel__ring, .sel__dot { stroke: Highlight; }
  .stage > svg, .stagebox .bq, .kind img, .meanings img, .layer__main img, .adjust-head img { forced-color-adjust: none; }
  .meter__bar i { background: Highlight; }
}

/* =====================================================================================
 * EvesDrops look — "Ink & Terracotta": warm paper, ink type, one terracotta action colour,
 * flat surfaces with hairline borders, Fraunces headlines and a warm geometric sans.
 * This layer overrides the Fluent tokens so every component follows. The terracotta is a
 * touch deeper than EvesDrops' #C6613F so white button text keeps 4.5:1 contrast.
 * ===================================================================================== */
:root, :root[data-theme='light'] {
  --fontFamilyBase: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fontDisplay: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ink: #1a1917; --inkMuted: #5b5751; --inkFaint: #757067;
  --paper: #f6f4ee; --paperDeep: #ece8de; --surface: #fffefa; --surfaceHigh: #f0ede5; --outline: #d7d3ca; --hairline: #e4e0d6;
  --ember: #b5553a; --emberHover: #a34a32; --emberPressed: #8f402b; --emberText: #a94b37; --emberTint: #f6e5dd;
  --onEmber: #ffffff;
  --appCanvas: var(--paper); --appStage: #eeeae0; --appStageGlow: #fbf9f4;
  --radiusCard: 18px; --radiusControl: 12px; --radiusButton: 14px;
}
:root[data-theme='dark'] {
  --ink: #f7f4ee; --inkMuted: #b9b5ac; --inkFaint: #949087;
  --paper: #181816; --paperDeep: #11110f; --surface: #22211f; --surfaceHigh: #2c2a27; --outline: #403e39; --hairline: #34322e;
  --ember: #d97858; --emberHover: #e28a6c; --emberPressed: #c86a4c; --emberText: #e8987c; --emberTint: #3a2620;
  --onEmber: #181816;
  --appCanvas: var(--paper); --appStage: #201f1c; --appStageGlow: #2a2825;
}
:root, :root[data-theme='light'], :root[data-theme='dark'] {
  --colorNeutralBackground1: var(--surface); --colorNeutralBackground2: var(--paper); --colorNeutralBackground3: var(--surfaceHigh); --colorNeutralBackground4: var(--paperDeep);
  --colorNeutralBackground1Hover: color-mix(in srgb, var(--ink) 4%, var(--surface)); --colorNeutralBackground1Pressed: color-mix(in srgb, var(--ink) 8%, var(--surface)); --colorNeutralBackground1Selected: var(--surfaceHigh);
  --colorSubtleBackgroundHover: color-mix(in srgb, var(--ink) 5%, transparent); --colorSubtleBackgroundPressed: color-mix(in srgb, var(--ink) 9%, transparent); --colorSubtleBackgroundSelected: color-mix(in srgb, var(--ink) 7%, transparent);
  --colorNeutralForeground1: var(--ink); --colorNeutralForeground1Hover: var(--ink); --colorNeutralForeground1Pressed: var(--ink);
  --colorNeutralForeground2: var(--inkMuted); --colorNeutralForeground2Hover: var(--ink); --colorNeutralForeground2Pressed: var(--ink);
  --colorNeutralForeground3: var(--inkFaint); --colorNeutralForeground4: var(--inkFaint);
  --colorNeutralStroke1: var(--outline); --colorNeutralStroke1Hover: color-mix(in srgb, var(--ink) 25%, var(--outline)); --colorNeutralStroke1Pressed: color-mix(in srgb, var(--ink) 35%, var(--outline));
  --colorNeutralStroke2: var(--hairline); --colorNeutralStrokeAccessible: var(--inkFaint);
  --colorBrandBackground: var(--ember); --colorBrandBackgroundHover: var(--emberHover); --colorBrandBackgroundPressed: var(--emberPressed);
  --colorBrandBackground2: var(--emberTint); --colorBrandForeground1: var(--emberText); --colorBrandForeground2: var(--emberText);
  --colorBrandForegroundLink: var(--emberText); --colorBrandForegroundLinkHover: var(--emberHover); --colorBrandStroke1: var(--ember);
  --colorCompoundBrandBackground: var(--ember); --colorCompoundBrandBackgroundHover: var(--emberHover); --colorCompoundBrandStroke: var(--ember);
  --colorNeutralForegroundOnBrand: var(--onEmber);
  --colorStrokeFocus2: var(--ink);
}

body { font-family: var(--fontFamilyBase); color: var(--ink); -webkit-font-smoothing: antialiased; }
.t-display, .hero__title, .detail__title, .page-title, .confirm__title, .brand__name, .card__title, .adjust-head h3, .empty__title, .studio-bar__title b, .auth__title, .account__who h1 {
  font-family: var(--fontDisplay); font-weight: 600; letter-spacing: -0.02em; font-variation-settings: 'SOFT' 24, 'WONK' 0;
}
.t-eyebrow { text-transform: uppercase; font-size: 11px; line-height: 16px; letter-spacing: 1.6px; font-weight: 700; color: var(--emberText); }
.section-title { font-weight: 700; }

/* Buttons: solid terracotta primary, hairline secondary, generous height. */
.ui-button { border-radius: var(--radiusControl); font-family: var(--fontFamilyBase); font-weight: 700; min-height: 40px; box-shadow: none; }
.ui-button--large { min-height: 52px; padding-inline: 24px; border-radius: var(--radiusButton); font-size: 15px; }
.ui-button--small { min-height: 32px; border-radius: 10px; }
.ui-button--primary { box-shadow: none; }
.ui-button:not(.ui-button--primary):not(.ui-button--subtle):not(.ui-button--transparent) { border-color: var(--outline); border-width: 1.2px; }

/* Chips and segmented choices: 12px corners, not pills. */
.chip { border-radius: var(--radiusControl); font-size: 13px; font-weight: 600; border-color: var(--outline); background: var(--surface); min-height: 36px; }
.chip[aria-pressed='true'], .chip[aria-checked='true'], .chip--radio:has(input:checked) { background: var(--emberTint); border-color: var(--ember); color: var(--emberText); }
.option, .slot, .kind, .swatch-custom input[type='color'] { border-radius: var(--radiusControl); }

/* Inputs: rounded field with a hairline; terracotta ring on focus instead of Fluent's underline. */
.ui-input, .ui-textarea { border-radius: var(--radiusControl); border: 1px solid var(--outline); background: var(--surface); min-height: 48px; }
.ui-input::after, .ui-textarea::after { display: none; }
.ui-input:focus-within, .ui-textarea:focus-within, .ui-select > select:focus-visible { border-color: var(--ember); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ember) 20%, transparent); }
.ui-select > select { height: 48px; border-radius: var(--radiusControl); border-color: var(--outline); background-color: var(--surface); }
.ui-field__label { font-weight: 600; color: var(--ink); }

/* Flat surfaces with hairline borders (EvesDrops uses no resting shadows). */
.ccard, .summary, .check, .order-card, .addr-card, .card-form, .step, .auth { box-shadow: none; border: 1px solid var(--hairline); border-radius: var(--radiusCard); background: var(--surface); }
.stagebox { border-radius: var(--radiusCard); }
.hero__stage { box-shadow: none; border: 1px solid var(--hairline); }
.hero__bubble, .hero__tag { box-shadow: 0 8px 24px rgba(26, 25, 23, 0.08); border: 1px solid var(--hairline); }
.maker__card { border-radius: 20px; border-color: var(--hairline); box-shadow: 0 12px 40px rgba(26, 25, 23, 0.14); }
.dock__nav { border-color: var(--hairline); box-shadow: 0 8px 28px rgba(26, 25, 23, 0.12); }
.sheet { border-radius: 20px 20px 0 0; }
.ui-tablist .ui-tab { font-weight: 600; }
.pill { border-radius: 8px; font-weight: 600; }
.card__badge { border-radius: 8px; box-shadow: none; border: 1px solid var(--hairline); }

/* ---------- Account, sign-in, checkout steps ---------- */
.page-pad { padding-top: var(--spacingVerticalXL); }
.account-btn { display: inline-flex; align-items: center; gap: var(--spacingHorizontalXS); min-height: 44px; padding: 0 var(--spacingHorizontalS); border-radius: var(--radiusControl); color: var(--ink); text-decoration: none; font-weight: 600; }
.account-btn:hover { background: var(--colorSubtleBackgroundHover); }
.account-btn__label { display: none; }
@media (min-width: 640px) { .account-btn__label { display: inline; } }
.avatar { width: 56px; height: 56px; border-radius: var(--borderRadiusCircular); display: grid; place-items: center; background: var(--emberTint); color: var(--emberText); font-weight: 700; font-size: 20px; flex: none; }
.avatar--sm { width: 32px; height: 32px; font-size: 13px; }

.auth-page { max-width: 440px; margin: 0 auto; }
.auth { display: grid; gap: var(--spacingVerticalM); padding: var(--spacingVerticalXXL) var(--spacingHorizontalXL); }
.auth__title { margin: 0; font-size: 30px; line-height: 36px; }
.auth__lede { margin: 0; color: var(--inkMuted); }
.auth__google { width: 100%; justify-content: center; gap: var(--spacingHorizontalM); background: var(--surface); }
.auth__g { width: 20px; height: 20px; }
.auth__error { margin: 0; color: var(--colorStatusDangerForeground1); font-size: 13px; }
.auth__error:empty { display: none; }
.auth__trust { list-style: none; margin: var(--spacingVerticalS) 0 0; padding: var(--spacingVerticalM) 0 0; border-top: 1px solid var(--hairline); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacingHorizontalS); text-align: center; font-size: 12px; line-height: 16px; color: var(--inkMuted); font-weight: 600; }
.auth__trust li { display: grid; justify-items: center; gap: 4px; }
.auth__trust .icon { color: var(--ink); }

.account { display: grid; gap: var(--spacingVerticalL); max-width: 860px; }
.account__head { display: flex; align-items: center; gap: var(--spacingHorizontalL); }
.account__who { flex: 1; min-width: 0; }
.account__who h1 { margin: 0; font-size: 28px; line-height: 34px; }
.account__who p { margin: 2px 0 0; color: var(--inkMuted); overflow-wrap: anywhere; }
.segmented { display: flex; gap: 4px; padding: 4px; border-radius: var(--radiusButton); background: var(--surfaceHigh); width: fit-content; max-width: 100%; overflow-x: auto; }
.segmented button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--spacingHorizontalL); border: 0; border-radius: 10px; background: none; color: var(--inkMuted); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.segmented button[aria-selected='true'] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(26, 25, 23, 0.08); }
.order-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacingVerticalM); }
.order-card { display: grid; grid-template-columns: 72px 1fr auto; gap: var(--spacingHorizontalM); align-items: center; padding: var(--spacingVerticalM); color: inherit; text-decoration: none; }
.order-card:hover { border-color: var(--outline); }
.order-card__thumb { aspect-ratio: 4 / 5; border-radius: var(--radiusControl); }
.order-card__thumb .bq { padding: 4%; }
.order-card__body { display: grid; gap: 4px; min-width: 0; }
.order-card__body b { font-family: var(--fontDisplay); font-weight: 600; font-size: 17px; }
.order-card__body > span:not(.pill) { color: var(--inkMuted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-card__body .pill { justify-self: start; }
.order-card__total { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-variant-numeric: tabular-nums; }
.addr-list { display: grid; gap: var(--spacingVerticalM); }
@media (min-width: 640px) { .addr-list { grid-template-columns: 1fr 1fr; } }
.addr-card { padding: var(--spacingVerticalL); display: grid; gap: var(--spacingVerticalS); }
.addr-card.is-default { border-color: var(--ember); }
.addr-card__top { display: flex; justify-content: space-between; align-items: center; }
.addr-card p { margin: 0; color: var(--inkMuted); line-height: 1.5; }
.addr-card p b { color: var(--ink); }
.addr-card__actions { display: flex; flex-wrap: wrap; gap: var(--spacingHorizontalS); }
.card-form { padding: var(--spacingVerticalL); display: grid; gap: var(--spacingVerticalM); margin-top: var(--spacingVerticalM); }
.addr-form { display: grid; gap: var(--spacingVerticalM); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--spacingHorizontalS); }
.add-btn { margin-top: var(--spacingVerticalM); width: 100%; justify-content: center; border-style: dashed !important; }
.chip--radio { cursor: pointer; }
.chip--radio input { position: absolute; opacity: 0; pointer-events: none; }
.chip--radio:has(input:focus-visible) { outline: 2px solid var(--colorStrokeFocus2); outline-offset: 1px; }
.profile-form { display: grid; gap: var(--spacingVerticalM); max-width: 440px; }

.checkout__steps { display: grid; gap: var(--spacingVerticalM); align-content: start; }
.step { padding: var(--spacingVerticalL); display: grid; gap: var(--spacingVerticalM); }
.step--done { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.step--auth { padding: 0; border: 0; background: none; }
.step__title { display: flex; align-items: center; gap: var(--spacingHorizontalS); margin: 0; font-size: 17px; line-height: 24px; font-weight: 700; }
.step__n { width: 26px; height: 26px; border-radius: var(--borderRadiusCircular); display: grid; place-items: center; background: var(--ink); color: var(--paper); font-size: 13px; flex: none; }
.step--done .step__n { background: var(--colorStatusSuccessBackground3, #597c50); color: #fff; }
.step__n .icon { width: 16px; height: 16px; }
.addr-choices { display: grid; gap: var(--spacingVerticalS); }
.addr-choice { display: flex; gap: var(--spacingHorizontalM); align-items: flex-start; padding: var(--spacingVerticalM); border: 1px solid var(--outline); border-radius: var(--radiusControl); cursor: pointer; line-height: 1.5; color: var(--inkMuted); }
.addr-choice b { color: var(--ink); }
.addr-choice input { accent-color: var(--ember); width: 18px; height: 18px; margin-top: 2px; flex: none; }
.addr-choice:has(input:checked) { border-color: var(--ember); background: var(--emberTint); }
.addr-choice--new span { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); }
.checkline { display: flex; gap: var(--spacingHorizontalS); align-items: center; font-weight: 600; cursor: pointer; }
.checkline input { accent-color: var(--ember); width: 18px; height: 18px; }
.new-addr { display: grid; gap: var(--spacingVerticalM); padding-top: var(--spacingVerticalS); }
.summary__gst { font-weight: 400; font-size: 12px; }
.secure-note { display: flex; gap: var(--spacingHorizontalS); align-items: flex-start; margin: 0; color: var(--inkMuted); font-size: 13px; line-height: 18px; }
.secure-note .icon { flex: none; color: var(--colorStatusSuccessForeground1); }
.confirm__badge.is-pending { color: var(--colorStatusWarningForeground3); }
.segmented { width: 100%; }
.segmented button { flex: 1; justify-content: center; padding: 0 var(--spacingHorizontalS); }
@media (max-width: 419.98px) { .segmented .icon { display: none; } }
@media (min-width: 640px) { .segmented { width: fit-content; } .segmented button { flex: none; padding: 0 var(--spacingHorizontalL); } }

/* ---------- The florist, always one tap away ----------
 * One floating button on every page: a round mic on phones (tap to speak), a labelled
 * "Ask the florist" on wider screens (opens to typing). It lifts above bottom action bars,
 * stays over the canvas in the desktop studio, and hides while the florist panel is open. */
.fab-ai {
  position: fixed; z-index: 35; right: var(--spacingHorizontalL); bottom: calc(var(--spacingVerticalM) + var(--safeB));
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacingHorizontalS);
  width: 60px; height: 60px; padding: 0; border: 0; border-radius: var(--borderRadiusCircular);
  background: var(--ember); color: var(--onEmber); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(26, 25, 23, 0.18);
  transition: transform var(--durationNormal) var(--curveDecelerateMid), opacity var(--durationFast) var(--curveEasyEase), background var(--durationFaster) var(--curveEasyEase);
}
.fab-ai:hover { background: var(--emberHover); }
.fab-ai:active { transform: scale(0.96); }
.fab-ai:focus-visible { outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2); outline-offset: 3px; }
.fab-ai .icon { width: 26px; height: 26px; }
.fab-ai__spark, .fab-ai__label { display: none; }
.maker-open .fab-ai { opacity: 0; transform: scale(0.85); pointer-events: none; }
.route-b .fab-ai, .route-checkout .fab-ai { bottom: calc(84px + var(--safeB)); }
.route-studio .panel__body { padding-bottom: 104px; }
@media (min-width: 640px) {
  .fab-ai { width: auto; height: 56px; padding: 0 var(--spacingHorizontalXL) 0 var(--spacingHorizontalL); right: var(--spacingHorizontalXXL); bottom: var(--spacingVerticalXXL); }
  .route-b .fab-ai, .route-checkout .fab-ai { bottom: var(--spacingVerticalXXL); }
  .fab-ai .icon { width: 22px; height: 22px; }
  .fab-ai__mic { display: none; }
  .fab-ai__spark, .fab-ai__label { display: inline; }
}
@media (min-width: 1024px) { .route-studio .fab-ai { right: calc(440px + var(--spacingHorizontalXXL)); } .route-studio .panel__body { padding-bottom: var(--spacingVerticalXXL); } }
@media (prefers-reduced-motion: reduce) { .fab-ai { transition: none; } }

/* The Shop/Studio pill moves left so it never collides with the florist button. */
.dock { justify-items: start; inset-inline: var(--spacingHorizontalL) auto; }

/* One-time tip beside the button. */
.fab-hint {
  position: fixed; z-index: 35; right: var(--spacingHorizontalL); bottom: calc(var(--spacingVerticalM) + var(--safeB) + 72px);
  display: flex; align-items: center; gap: var(--spacingHorizontalXS); max-width: min(280px, calc(100vw - 32px));
  padding: var(--spacingVerticalS) var(--spacingHorizontalXS) var(--spacingVerticalS) var(--spacingHorizontalM);
  border-radius: var(--radiusButton) var(--radiusButton) 4px var(--radiusButton);
  background: var(--ink); color: var(--paper); font-size: 14px; line-height: 20px; font-weight: 600; cursor: pointer;
  box-shadow: 0 10px 28px rgba(26, 25, 23, 0.2); animation: hint-in var(--durationGentle) var(--curveDecelerateMid);
}
.fab-hint[hidden] { display: none; }
.fab-hint__close { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: 0; border-radius: 10px; background: none; color: inherit; cursor: pointer; opacity: .75; }
.fab-hint__close:hover { opacity: 1; background: color-mix(in srgb, var(--paper) 14%, transparent); }
.route-b .fab-hint, .route-checkout .fab-hint { bottom: calc(84px + var(--safeB) + 72px); }
@media (min-width: 640px) { .fab-hint { right: var(--spacingHorizontalXXL); bottom: calc(var(--spacingVerticalXXL) + 68px); } }
@media (min-width: 1024px) { .route-studio .fab-hint { right: calc(440px + var(--spacingHorizontalXXL)); } }
@keyframes hint-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fab-hint { animation: none; } }

/* On wider screens the florist panel opens from the button's corner instead of the centre. */
@media (min-width: 640px) {
  .maker { left: auto; right: var(--spacingHorizontalXXL); bottom: var(--spacingVerticalXXL); width: min(460px, calc(100vw - 2 * var(--spacingHorizontalXXL))); transform: none; transform-origin: bottom right; }
  .maker[hidden] { transform: translateY(16px) scale(0.98); }
}
@media (min-width: 1024px) {
  .route-studio .maker { left: auto; right: calc(440px + var(--spacingHorizontalXXL)); width: min(520px, calc(100vw - 440px - 2 * var(--spacingHorizontalXXL))); }
}

/* ---------- Product lighting ----------
 * A soft key light from above, a warm glow behind the bouquet and a gentle sheen over the blooms,
 * so the bouquet reads like a studio photograph. */
/* The studio canvas stays sticky; every other lit backdrop is a plain positioned box. */
.stagebox:not(.stage) { position: relative; }
.stagebox { isolation: isolate;
  background:
    radial-gradient(55% 38% at 50% 18%, var(--keyLight), transparent 72%),
    radial-gradient(120% 95% at 50% 42%, var(--appStageGlow), var(--appStage) 78%); }
.stagebox::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(60% 45% at 38% 16%, rgba(255, 249, 238, 0.42), transparent 62%),
    radial-gradient(140% 110% at 50% 45%, transparent 62%, rgba(40, 30, 20, 0.07));
  mix-blend-mode: soft-light; }
:root, :root[data-theme='light'] { --keyLight: rgba(255, 255, 255, 0.95); }
:root[data-theme='dark'] { --keyLight: rgba(255, 236, 214, 0.10); }
.stagebox > .bq, .stage > svg { position: relative; z-index: 0; }
.stage .stage__status, .stage .stage__tools { z-index: 2; }

/* Bouquet page: full view. Edge to edge on phones, tall, with the 3D view one tap away. */
.detail__media { position: relative; }
@media (max-width: 1023.98px) {
  .detail__media { margin-inline: calc(-1 * var(--spacingHorizontalL)); width: auto; max-height: none; height: min(78svh, 680px); aspect-ratio: auto; border-radius: 0; border: 0; }
  .detail__media .bq { padding: 2% 0 0; }
}
@media (min-width: 640px) and (max-width: 1023.98px) { .detail__media { margin-inline: calc(-1 * var(--spacingHorizontalXXL)); } }
.view3d-btn { position: absolute; z-index: 2; right: var(--spacingHorizontalL); top: var(--spacingVerticalL); display: inline-flex; align-items: center; gap: var(--spacingHorizontalS); min-height: 44px; padding: 0 var(--spacingHorizontalL); border-radius: var(--borderRadiusCircular); border: 1px solid var(--hairline); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.view3d-btn:hover { background: var(--surface); }
.view3d-btn .icon { width: 20px; height: 20px; }

/* ---------- Delivery date: day chips + an iOS-style month calendar ---------- */
.dates { display: flex; gap: var(--spacingHorizontalS); overflow-x: auto; scrollbar-width: none; padding: 2px; margin: 0 -2px; scroll-snap-type: x proximity; }
.dates::-webkit-scrollbar { display: none; }
.date-chip { flex: none; scroll-snap-align: start; display: grid; justify-items: center; align-content: center; gap: 2px; width: 72px; min-height: 84px; padding: var(--spacingVerticalS) 4px; border: 1px solid var(--outline); border-radius: 16px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; transition: background var(--durationFaster) var(--curveEasyEase), border-color var(--durationFaster) var(--curveEasyEase); }
.date-chip span { font-size: 12px; line-height: 16px; color: var(--inkMuted); font-weight: 600; }
.date-chip b { font-size: 22px; line-height: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.date-chip:hover { border-color: color-mix(in srgb, var(--ink) 30%, var(--outline)); }
.date-chip[aria-checked='true'] { background: var(--ember); border-color: var(--ember); color: var(--onEmber); }
.date-chip[aria-checked='true'] span { color: color-mix(in srgb, var(--onEmber) 82%, transparent); }
.date-chip--more { width: 84px; }
.date-chip--more .icon { width: 22px; height: 22px; color: var(--emberText); }
.date-chip--more[aria-checked='true'] .icon { color: inherit; }
.date-chip:focus-visible { outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2); outline-offset: 2px; }

.cal { padding-bottom: calc(var(--spacingVerticalL) + var(--safeB)); }
.cal[open] { display: grid; gap: var(--spacingVerticalM); }
.cal__head { display: flex; align-items: center; justify-content: space-between; }
.cal__head h2 { margin: 0; font-size: 17px; line-height: 22px; font-weight: 700; }
.cal__nav { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--borderRadiusCircular); background: none; color: var(--emberText); cursor: pointer; }
.cal__nav:hover { background: var(--emberTint); }
.cal__nav:disabled { color: var(--outline); cursor: default; background: none; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 4px; justify-items: center; }
.cal__wd { font-size: 12px; line-height: 20px; font-weight: 700; color: var(--inkFaint); text-transform: uppercase; }
.cal__day { width: 42px; height: 42px; border: 0; border-radius: var(--borderRadiusCircular); background: none; color: var(--ink); font: inherit; font-size: 17px; font-variant-numeric: tabular-nums; cursor: pointer; }
.cal__day:hover:not(:disabled) { background: var(--surfaceHigh); }
.cal__day.is-today { color: var(--emberText); font-weight: 700; }
.cal__day[aria-pressed='true'] { background: var(--ember); color: var(--onEmber); font-weight: 700; }
.cal__day:disabled { color: color-mix(in srgb, var(--inkFaint) 45%, transparent); cursor: default; }
.cal__day:focus-visible { outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2); outline-offset: 1px; }
.cal__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--spacingHorizontalM); padding-top: var(--spacingVerticalS); border-top: 1px solid var(--hairline); }
@media (min-width: 640px) { .cal { margin: auto; width: 380px; max-width: calc(100vw - 32px); border-radius: 20px; padding: var(--spacingVerticalL) var(--spacingHorizontalL); } .cal .sheet__grab { display: none; } }

/* ---------- 3D view ---------- */
.v3d { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: auto 1fr auto; color: var(--ink);
  background: radial-gradient(70% 55% at 50% 34%, var(--v3dLight), var(--v3dMid) 62%, var(--v3dEdge)); animation: v3d-in var(--durationGentle) var(--curveDecelerateMid); }
:root, :root[data-theme='light'] { --v3dLight: #fffaf2; --v3dMid: #ece6da; --v3dEdge: #d9d0c1; }
:root[data-theme='dark'] { --v3dLight: #34302b; --v3dMid: #1d1b19; --v3dEdge: #121110; }
.v3d.is-closing { opacity: 0; transition: opacity 160ms var(--curveAccelerateMin); }
@keyframes v3d-in { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: none; } }
.v3d__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--spacingHorizontalM); padding: calc(var(--spacingVerticalL) + env(safe-area-inset-top, 0px)) var(--spacingHorizontalL) 0; }
.v3d__bar b { display: block; font-size: 24px; line-height: 30px; }
.v3d__bar span { display: block; color: var(--inkMuted); font-size: 14px; }
.v3d__close { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--borderRadiusCircular); border: 1px solid var(--hairline); background: var(--surface); color: var(--ink); cursor: pointer; }
.v3d__stage { position: relative; display: grid; place-items: center; overflow: hidden; perspective: 1400px; perspective-origin: 50% 40%; touch-action: none; cursor: grab; outline: none; }
.v3d__stage:active { cursor: grabbing; }
.v3d__stage:focus-visible { box-shadow: inset 0 0 0 2px var(--colorStrokeFocus2); }
.v3d__fit { position: relative; width: 400px; height: 500px; flex: none; transform-style: preserve-3d; }
.v3d__scene { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 200px 300px; will-change: transform; }
.v3d__strip, .v3d__plane, .v3d__bloom { position: absolute; transform-style: preserve-3d; }
.v3d__bloom { transform: translateZ(var(--z)) rotateY(calc(-1 * var(--yaw, 0deg))); }
.v3d__bloom img { width: 100%; height: 100%; display: block; transform: rotate(var(--rot)) scaleX(var(--flip)); filter: drop-shadow(0 3px 4px rgba(43, 29, 16, 0.24)); -webkit-user-drag: none; user-select: none; }
.v3d__floor { position: absolute; left: 70px; top: 470px; width: 260px; height: 40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(40, 28, 16, 0.3), transparent); filter: blur(3px); }
.v3d__hint { display: inline-flex; justify-self: center; align-items: center; gap: var(--spacingHorizontalS); margin: 0 0 calc(var(--spacingVerticalXL) + var(--safeB)); padding: var(--spacingVerticalS) var(--spacingHorizontalL); border-radius: var(--borderRadiusCircular); background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--inkMuted); font-weight: 600; font-size: 14px; transition: opacity var(--durationSlow) var(--curveEasyEase); }
.v3d.is-touched .v3d__hint { opacity: 0; }
.v3d-open { overflow: hidden; }
.v3d-open .fab-ai, .v3d-open .dock, .v3d-open .fab-hint { display: none; }
.stage__3d { position: absolute; z-index: 2; top: var(--spacingVerticalS); right: var(--spacingHorizontalS); display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--spacingHorizontalM); border-radius: var(--borderRadiusCircular); border: 1px solid var(--hairline); background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.stage__3d .icon { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .v3d { animation: none; } }
.v3d__paper { position: absolute; }
.v3d__tint, .v3d__shade { position: absolute; inset: 0; }
/* A soft band of light across each sheet; edges fall into shade like a curved cone. */
.v3d__paper--front .v3d__shade { background: linear-gradient(90deg, rgba(20, 12, 6, 0.26) 0%, rgba(255, 250, 240, 0.12) var(--hlF, 50%), rgba(20, 12, 6, 0.3) 100%); }
.v3d__paper--back .v3d__shade { background: linear-gradient(90deg, rgba(255, 250, 240, 0.08) 0%, rgba(20, 12, 6, 0.22) var(--hlB, 50%), rgba(255, 250, 240, 0.06) 100%); }

/* ---------- Voice and work in the pill ----------
 * listening: the text field steps aside for the ribbons, the pill grows and glows warm with the voice (--lvl,
 * 0-1, set every frame), the mic becomes stop and send hides. hearing / working: the thread with a running
 * highlight shows the florist is busy. A soft warm glow rises behind the pill while it listens. */
.maker[data-state='listening'] .maker__bar, .maker[data-state='hearing'] .maker__bar, .maker[data-state='working'] .maker__bar { height: 60px; background: var(--colorNeutralBackground1); }
.maker[data-state='listening'] .maker__bar { border-color: color-mix(in srgb, var(--ember) 45%, var(--hairline)); box-shadow: 0 0 0 calc(2px + var(--lvl, 0) * 3px) color-mix(in srgb, var(--ember) 14%, transparent), 0 6px calc(18px + var(--lvl, 0) * 22px) rgba(217, 120, 88, calc(0.16 + var(--lvl, 0) * 0.3)); transition: height var(--durationNormal) var(--curveDecelerateMid), box-shadow 120ms linear; }
.maker[data-state='listening'] .maker__bar input, .maker[data-state='hearing'] .maker__bar input, .maker[data-state='working'] .maker__bar input { visibility: hidden; }
.maker[data-state='listening'] .maker__wave, .maker[data-state='hearing'] .maker__wave, .maker[data-state='working'] .maker__wave { opacity: 1; }
.maker[data-state='listening'] .maker__go { display: none; }
.maker[data-state='listening'] .maker__wave, .maker[data-state='hearing'] .maker__wave, .maker[data-state='working'] .maker__wave { right: 52px; }
/* while the florist is busy only stop is needed on the right */
.maker[data-state='hearing'] .maker__mic, .maker[data-state='working'] .maker__mic { display: none; }
.maker[data-state='listening'] .maker__mic { color: var(--colorStatusDangerForeground1); }
.maker__card { position: relative; isolation: isolate; overflow: hidden; }
.maker__card::before { content: ''; position: absolute; z-index: -1; left: 0; right: 0; bottom: -60px; height: 170px; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 70% at 50% 100%, rgba(217, 120, 88, 0.22), rgba(226, 92, 122, 0.10) 55%, rgba(255, 255, 255, 0) 100%); transition: opacity var(--durationNormal) var(--curveEasyEase); }
.maker[data-state='listening'] .maker__card::before { opacity: calc(0.5 + var(--lvl, 0) * 0.5); transition: opacity 120ms linear; }
/* a running step: a short line of light, like the thread, instead of a spinning arrow */
.step-run { flex: none; width: 16px; height: 16px; position: relative; }
.step-run::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, transparent, var(--ember), #e8a43c, transparent); background-size: 200% 100%; animation: step-run 1.1s linear infinite; }
@keyframes step-run { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* The small florist mark thinks while it works, then settles with a pop. */
.ai-mark { position: relative; overflow: hidden; }
.ai-mark .icon { position: relative; z-index: 1; }
.ai-mark[data-mode='done'] { animation: mark-pop 420ms var(--curveDecelerateMid); }
@keyframes mark-pop { 0% { transform: scale(0.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .ai-mark[data-mode='done'] { animation: none !important; }
  .maker__card::before, .maker__bar { transition: none !important; }
}