/* ==========================================================
   Bouquet builder. Everything here is prefixed bq-.
   ========================================================== */

.bq {
  --bq-stem: #4d7a37;
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto;
  color: var(--text);
  font-family: var(--font-body);
}

.bq-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.bq-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- stage ---------- */
.bq-stage {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  aspect-ratio: 400 / 380;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 58% 50% at 50% 40%, rgba(242, 196, 206, 0.6), rgba(242, 196, 206, 0) 72%),
    radial-gradient(ellipse 90% 45% at 50% 108%, rgba(201, 162, 75, 0.16), rgba(201, 162, 75, 0) 70%),
    repeating-linear-gradient(0deg, rgba(128, 0, 32, 0.014) 0 1px, transparent 1px 4px),
    linear-gradient(172deg, #fff 0%, var(--paper) 55%, #fcefef 100%);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(201, 162, 75, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
@supports not (aspect-ratio: 1) {
  .bq-stage { height: 0; padding-top: 95%; }
}
.bq-stage::after {
  content: "";
  position: absolute;
  z-index: 80;
  inset: 7px;
  border: 1px dashed rgba(201, 162, 75, 0.36);
  border-radius: calc(var(--radius-lg) - 6px);
  pointer-events: none;
}

.bq-artwrap,
.bq-blooms,
.bq-fx {
  position: absolute;
  inset: 0;
}
.bq-artwrap,
.bq-fx { pointer-events: none; }

.bq-art {
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
}

/* stems */
.bq-stem {
  fill: none;
  stroke: var(--bq-stem);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bq-stem-shine {
  fill: none;
  stroke: #8dbb68;
  stroke-opacity: 0.55;
  stroke-width: 1;
  stroke-linecap: round;
  transform: translateX(-0.8px);
}
.bq-stem-g { transition: opacity 0.28s var(--ease); }
.bq-stem-g.is-out { opacity: 0; }

.bq-leaf {
  transform-origin: 0 0;
  animation: bq-leaf 0.6s var(--ease-bounce) 0.28s both;
}
@keyframes bq-leaf {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

/* the twine tie and the ghost guide */
.bq-tie,
.bq-ghost {
  transition: opacity 0.35s var(--ease);
}
.bq-tie { opacity: 0; }
.bq.has-flowers .bq-tie { opacity: 1; }
.bq.is-wrapped .bq-tie { opacity: 0; }
.bq-ghost { opacity: 0; }
.bq.is-empty .bq-ghost { opacity: 1; }

/* wrapping paper + bow (SVG groups, so origins are in viewBox units) */
.bq-wrap-back,
.bq-wrap-front,
.bq-bow,
.bq-string {
  opacity: 0;
}
.bq-wrap-back {
  transform-origin: 200px 374px;
  transform: translateY(90px) scale(var(--bq-sx, 1), var(--bq-sy, 1));
  transition: transform 0.5s var(--ease), opacity 0.3s var(--ease);
}
.bq-wrap-front {
  transform-origin: 200px 374px;
  transform: translateY(170px) scale(var(--bq-sx, 1), 1);
  transition: transform 0.5s var(--ease), opacity 0.3s var(--ease);
}
.bq-bow {
  transform-origin: 200px 300px;
  transform: translateY(-110px) scale(0.35) rotate(-28deg);
  transition: transform 0.35s var(--ease), opacity 0.25s var(--ease);
}
.bq-string { transition: opacity 0.25s var(--ease); }

.bq.is-wrapped .bq-wrap-back {
  opacity: 1;
  transform: translateY(0) scale(var(--bq-sx, 1), var(--bq-sy, 1));
  transition: transform 0.75s var(--ease) 0.05s, opacity 0.4s var(--ease) 0.05s;
}
.bq.is-wrapped .bq-wrap-front {
  opacity: 1;
  transform: translateY(0) scale(var(--bq-sx, 1), 1);
  transition: transform 0.75s var(--ease) 0.2s, opacity 0.3s var(--ease) 0.2s;
}
.bq.is-wrapped .bq-bow {
  opacity: 1;
  transform: none;
  transition: transform 0.7s var(--ease-bounce) 0.95s, opacity 0.2s var(--ease) 0.95s;
}
.bq.is-wrapped .bq-string {
  opacity: 1;
  transition: opacity 0.4s var(--ease) 1.25s;
}

/* the paper gathers the flowers in a touch */
.bq-blooms,
.bq-stems {
  transition: transform 0.9s var(--ease);
}
.bq-stems { transform-origin: 200px 318px; }
.bq-blooms { transform-origin: 50% 83.7%; }
.bq.is-wrapped .bq-blooms,
.bq.is-wrapped .bq-stems {
  transform: scale(0.965);
  transition: transform 1s var(--ease) 0.15s;
}

/* ---------- blooms in the stage ---------- */
.bq-bloom {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  clip-path: circle(56% at 50% 50%);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.bq-bloom:disabled { cursor: default; }
.bq-bloom-rot,
.bq-bloom-pop {
  position: absolute;
  inset: 0;
  display: block;
}
.bq-bloom-pop {
  animation: bq-pop 0.62s var(--ease-bounce) 0.08s both;
  transition: transform 0.25s var(--ease-bounce);
}
.bq-flower {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
}
.bq-bloom .bq-flower {
  filter: drop-shadow(0 2px 2.5px rgba(43, 7, 16, 0.26));
}
.bq-bloom .bq-stub { display: none; }

@media (hover: hover) {
  .bq-bloom:not(:disabled):hover .bq-bloom-pop { transform: scale(1.05); }
}
.bq-bloom:not(:disabled):active .bq-bloom-pop { transform: scale(0.9); }

.bq-bloom.is-out { pointer-events: none; }
.bq-bloom.is-out .bq-bloom-pop {
  animation: bq-out 0.3s var(--ease) both;
}

.bq-bloom-ring {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 2px rgba(255, 250, 246, 0.9);
  opacity: 0;
  pointer-events: none;
}
.bq-bloom:focus { outline: none; }
.bq-bloom:focus-visible { outline: none; }
.bq-bloom:focus-visible .bq-bloom-ring { opacity: 1; }

@keyframes bq-pop {
  0% { transform: scale(0) rotate(-24deg); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes bq-out {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.2) rotate(16deg); opacity: 0; }
}

/* ---------- sparkles ---------- */
.bq-spark {
  position: absolute;
  width: calc(26px * var(--bq-ss, 1));
  height: calc(26px * var(--bq-ss, 1));
  margin: calc(-13px * var(--bq-ss, 1)) 0 0 calc(-13px * var(--bq-ss, 1));
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(243, 220, 155, 0.9));
}
.bq-spark svg { width: 100%; height: 100%; max-width: none; }
.bq.is-wrapped .bq-spark {
  animation: bq-twinkle 1.6s ease-in-out calc(1.35s + var(--bq-sd, 0s)) 3 both;
}
.bq--paused .bq-spark,
.bq--paused .bq-bloom-pop,
.bq--paused .bq-tag {
  animation-play-state: paused;
}
@keyframes bq-twinkle {
  0% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  40% { opacity: 1; transform: scale(1.1) rotate(25deg); }
  70% { opacity: 0.85; transform: scale(0.85) rotate(40deg); }
  100% { opacity: 0; transform: scale(0.3) rotate(70deg); }
}

/* ---------- stage notes ---------- */
.bq-hint {
  position: absolute;
  z-index: 70;
  left: 8%;
  right: 8%;
  top: 27%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--wine);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease);
}
.bq.is-empty .bq-hint {
  opacity: 1;
  transform: none;
}
.bq-hint-text {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(25px, 7.4vw, 32px);
  line-height: 1.05;
  rotate: -3deg;
  text-wrap: balance;
}
.bq-hint-arrow {
  display: block;
  width: 46px;
  height: 37px;
  margin: 6px 0 0 70px;
  color: var(--rose);
  opacity: 0.85;
}
.bq-hint-arrow svg { width: 100%; height: 100%; }
.bq.is-empty .bq-hint-arrow { animation: bq-nudge 2.2s ease-in-out 1s infinite; }
.bq--paused .bq-hint-arrow { animation-play-state: paused; }
@keyframes bq-nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

.bq-rhint {
  position: absolute;
  z-index: 70;
  top: 5.2%;
  left: 6%;
  display: flex;
  align-items: flex-start;
  gap: 2px;
  color: var(--text-soft);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.bq.has-flowers .bq-rhint { opacity: 0.9; }
.bq.is-wrapped .bq-rhint { opacity: 0; }
.bq-rhint-text {
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: clamp(15px, 4.2vw, 18px);
  line-height: 0.95;
  white-space: pre-line;
  rotate: -4deg;
}
.bq-rhint-arrow {
  display: block;
  width: 24px;
  height: 18px;
  margin-top: 14px;
  color: var(--rose);
}
.bq-rhint-arrow svg { width: 100%; height: 100%; }

.bq-count {
  position: absolute;
  z-index: 70;
  top: 5%;
  right: 5.5%;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 11px 0 6px;
  border-radius: 999px;
  background: rgba(255, 250, 246, 0.92);
  box-shadow: 0 2px 8px rgba(74, 14, 28, 0.12), inset 0 0 0 1px rgba(201, 162, 75, 0.55);
  color: var(--burgundy);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s var(--ease), transform 0.4s var(--ease-bounce), background 0.3s;
}
.bq-count svg { width: 18px; height: 18px; flex: none; }
.bq.has-flowers .bq-count { opacity: 1; transform: none; }
.bq.is-wrapped .bq-count { opacity: 0; transform: scale(0.8); }
.bq.is-full .bq-count {
  background: linear-gradient(135deg, var(--wine), var(--burgundy));
  color: var(--paper);
}

/* ---------- toast ---------- */
.bq-toast {
  position: absolute;
  z-index: 90;
  left: 50%;
  bottom: 4.5%;
  width: max-content;
  max-width: calc(100% - 28px);
  padding: 7px 16px 8px;
  border-radius: 18px;
  background: rgba(255, 250, 246, 0.97);
  box-shadow: 0 8px 22px rgba(74, 14, 28, 0.2), inset 0 0 0 1px rgba(201, 162, 75, 0.6);
  color: var(--burgundy-deep);
  text-align: center;
  line-height: 1.15;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 10px) scale(0.96);
  transition: opacity 0.25s var(--ease), transform 0.35s var(--ease);
}
.bq-toast.is-show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  transition: opacity 0.2s var(--ease), transform 0.45s var(--ease-bounce);
}
.bq-toast-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 15px;
  color: var(--burgundy);
}
.bq-toast-text {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 20px;
}
.bq--xs .bq-toast { padding: 6px 12px 7px; max-width: calc(100% - 20px); }
.bq--xs .bq-toast-name { font-size: 13px; }
.bq--xs .bq-toast-text { font-size: 17.5px; }

/* ---------- dock (picker and gift card share one cell) ---------- */
.bq-dock {
  display: grid;
  margin-top: 16px;
}
.bq-panel {
  grid-area: 1 / 1;
  min-width: 0;
  align-self: start;
}
.bq-panel--build {
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease), visibility 0s;
}
.bq.is-wrapped .bq-panel--build {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.4s var(--ease), visibility 0s linear 0.4s;
}
.bq-panel--gift {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s var(--ease), visibility 0s linear 0.2s;
}
.bq.is-wrapped .bq-panel--gift {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.3s var(--ease) 1.2s, visibility 0s linear 1.2s;
}

/* ---------- picker ---------- */
.bq-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 8px;
}
.bq--wide .bq-picker {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
}

.bq-pick {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  min-height: 64px;
  margin: 0;
  padding: 7px 3px 8px;
  border: 0;
  border-radius: 16px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #fff 0%, var(--paper) 100%);
  box-shadow: 0 3px 10px rgba(74, 14, 28, 0.1), inset 0 0 0 1px rgba(201, 162, 75, 0.38);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 0.25s var(--ease-bounce), opacity 0.3s var(--ease), box-shadow 0.3s var(--ease), filter 0.3s;
}
@media (hover: hover) {
  .bq-pick:hover {
    box-shadow: 0 6px 16px rgba(74, 14, 28, 0.16), inset 0 0 0 1.5px rgba(201, 162, 75, 0.7);
    transform: translateY(-2px);
  }
  .bq-pick:hover .bq-pick-art { transform: rotate(-6deg) scale(1.04); }
}
.bq-pick:active { transform: scale(0.93); }
.bq-pick:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.bq-pick-art {
  position: relative;
  display: block;
  width: 76%;
  max-width: 64px;
  aspect-ratio: 1;
  transition: transform 0.35s var(--ease-bounce);
}
.bq-pick-art::before {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(248, 225, 230, 0.95), rgba(248, 225, 230, 0) 70%);
}
.bq-pick-art .bq-flower {
  position: relative;
  filter: drop-shadow(0 1.5px 1.5px rgba(43, 7, 16, 0.22));
}

.bq-pick-name {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
  max-width: 100%;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(15px, 4.2vw, 17px);
  line-height: 0.92;
  color: var(--burgundy-deep);
  text-align: center;
  overflow-wrap: anywhere;
}
.bq--xs .bq-pick-name { font-size: 14.5px; }
.bq-pick-name--long { font-size: clamp(13px, 3.6vw, 15.5px); letter-spacing: -0.01em; }
.bq--xs .bq-pick-name--long { font-size: 12.8px; }
.bq--xs .bq-pick { padding-left: 1px; padding-right: 1px; }

.bq-pick-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--wine), var(--burgundy));
  color: var(--paper);
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(74, 14, 28, 0.3), inset 0 0 0 1px rgba(230, 207, 150, 0.6);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.2s var(--ease), transform 0.35s var(--ease-bounce);
  pointer-events: none;
}
.bq-pick.has-count .bq-pick-badge { opacity: 1; transform: none; }

.bq-pick.is-bump .bq-pick-art { animation: bq-bump 0.45s var(--ease-bounce); }
@keyframes bq-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.18) rotate(-8deg); }
  100% { transform: scale(1); }
}

.bq.is-full .bq-pick {
  opacity: 0.5;
  filter: saturate(0.6);
  box-shadow: 0 1px 4px rgba(74, 14, 28, 0.06), inset 0 0 0 1px rgba(201, 162, 75, 0.25);
}
.bq.is-full .bq-pick:hover { transform: none; }
.bq-pick.is-nope { animation: bq-nope 0.4s var(--ease); }
@keyframes bq-nope {
  0%, 100% { translate: 0 0; }
  25% { translate: -4px 0; }
  50% { translate: 4px 0; }
  75% { translate: -2px 0; }
}

/* ---------- buttons ---------- */
.bq-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}
.bq-btn {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 230px;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.03em;
  line-height: 1.1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s var(--ease-bounce), filter 0.2s, opacity 0.25s, box-shadow 0.25s, background 0.25s;
}
.bq-btn svg {
  width: 20px;
  height: 20px;
  flex: none;
}
.bq-btn span { white-space: nowrap; }
.bq--xs .bq-btn {
  gap: 6px;
  padding: 0 10px;
  font-size: 15px;
  letter-spacing: 0.01em;
}
.bq--xs .bq-btn svg { width: 18px; height: 18px; }
.bq-btn:active:not(:disabled) { transform: scale(0.96); }
.bq-btn:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
.bq-btn:disabled {
  cursor: default;
  opacity: 0.42;
  box-shadow: inset 0 0 0 1.5px rgba(128, 0, 32, 0.2);
}

.bq-btn--primary {
  color: var(--paper);
  background: linear-gradient(135deg, var(--wine) 0%, var(--burgundy) 55%, var(--burgundy-deep) 100%);
  box-shadow: 0 8px 20px rgba(128, 0, 32, 0.28), inset 0 0 0 1.5px rgba(230, 207, 150, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.bq-btn--primary svg { color: var(--gold-soft); }
@media (hover: hover) {
  .bq-btn--primary:not(:disabled):hover { filter: brightness(1.08); }
  .bq-btn--ghost:not(:disabled):hover { background: #fff; }
}
.bq-btn--primary:disabled {
  color: var(--burgundy);
  background: rgba(255, 255, 255, 0.6);
}
.bq-btn--primary:disabled svg { color: currentColor; }
.bq.is-full .bq-btn--primary:not(:disabled) { animation: bq-glow 1.8s ease-in-out infinite; }
.bq--paused .bq-btn--primary { animation-play-state: paused; }
@keyframes bq-glow {
  0%, 100% { box-shadow: 0 8px 20px rgba(128, 0, 32, 0.28), inset 0 0 0 1.5px rgba(230, 207, 150, 0.55), 0 0 0 0 rgba(201, 162, 75, 0.5); }
  50% { box-shadow: 0 8px 20px rgba(128, 0, 32, 0.28), inset 0 0 0 1.5px rgba(230, 207, 150, 0.55), 0 0 0 8px rgba(201, 162, 75, 0); }
}

.bq-btn--ghost {
  color: var(--burgundy);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 2px 8px rgba(74, 14, 28, 0.08), inset 0 0 0 1.5px rgba(128, 0, 32, 0.3);
}

/* ---------- gift card ---------- */
.bq-tagwrap {
  position: relative;
  padding-top: 30px;
  perspective: 900px;
}
.bq-tagstring {
  position: absolute;
  left: 50%;
  top: -16px;
  width: 40px;
  height: 64px;
  margin-left: -20px;
  z-index: 2;
  pointer-events: none;
}
.bq-tagstring svg { width: 100%; height: 100%; max-width: none; }

.bq-tag {
  position: relative;
  width: min(100%, 340px);
  margin: 0 auto;
  padding: 34px clamp(16px, 5vw, 26px) 22px;
  border-radius: 14px;
  text-align: center;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse at center, rgba(201, 162, 75, 0) 60%, rgba(201, 162, 75, 0.16) 100%),
    repeating-linear-gradient(0deg, rgba(128, 0, 32, 0.018) 0 1px, transparent 1px 4px),
    #fffaf2;
  box-shadow: 0 16px 34px rgba(74, 14, 28, 0.22), 0 2px 4px rgba(74, 14, 28, 0.1), inset 0 0 0 1px rgba(201, 162, 75, 0.55);
  transform-origin: 50% 0;
  rotate: -1.5deg;
}
.bq-tag::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px dashed rgba(201, 162, 75, 0.55);
  border-radius: 9px;
  pointer-events: none;
}
.bq.is-wrapped .bq-tag {
  animation: bq-tag-in 1.1s var(--ease) 1.25s both;
}
@keyframes bq-tag-in {
  0% { transform: rotateX(-96deg) rotate(6deg); opacity: 0; }
  35% { opacity: 1; }
  60% { transform: rotateX(14deg) rotate(-3deg); }
  80% { transform: rotateX(-5deg) rotate(1.5deg); }
  100% { transform: rotateX(0deg) rotate(0deg); opacity: 1; }
}

.bq-tag-eyelet {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 14, 28, 0.55) 0 3.5px, transparent 4px), radial-gradient(circle at 35% 30%, #fbeec7, var(--gold) 55%, #8a6a24);
  box-shadow: 0 1px 2px rgba(43, 7, 16, 0.3);
}

.bq-tag-title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(26px, 7.6vw, 32px);
  line-height: 1.1;
  color: var(--burgundy);
  overflow-wrap: break-word;
  text-wrap: balance;
}
.bq-tag-orn {
  display: block;
  width: 120px;
  height: 14px;
  margin: 8px auto 10px;
  color: var(--gold);
}
.bq-tag-orn svg { width: 100%; height: 100%; }
.bq-tag-text {
  margin: 0;
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: clamp(21px, 6vw, 25px);
  line-height: 1.2;
  color: var(--burgundy-deep);
  white-space: pre-line;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.bq-actions--gift { margin-top: 22px; }

/* ---------- reduced motion: fades only ---------- */
@media (prefers-reduced-motion: reduce) {
  .bq-bloom-pop { animation: bq-fade 0.25s linear both; }
  .bq-bloom.is-out .bq-bloom-pop { animation: bq-fade-out 0.18s linear both; }
  .bq-leaf { animation: none; }
  .bq-wrap-back,
  .bq.is-wrapped .bq-wrap-back { transform: scale(var(--bq-sx, 1), var(--bq-sy, 1)); }
  .bq-wrap-front,
  .bq.is-wrapped .bq-wrap-front { transform: scale(var(--bq-sx, 1), 1); }
  .bq-bow,
  .bq.is-wrapped .bq-bow,
  .bq.is-wrapped .bq-blooms,
  .bq.is-wrapped .bq-stems,
  .bq-hint,
  .bq-count,
  .bq-toast,
  .bq-toast.is-show,
  .bq.is-wrapped .bq-panel--build { transform: none; }
  .bq-toast,
  .bq-toast.is-show { transform: translateX(-50%); }
  .bq.is-wrapped .bq-wrap-back,
  .bq.is-wrapped .bq-wrap-front,
  .bq.is-wrapped .bq-bow,
  .bq.is-wrapped .bq-string { transition: opacity 0.3s linear; }
  .bq.is-wrapped .bq-panel--gift { transition: opacity 0.3s linear 0.2s, visibility 0s linear 0.2s; }
  .bq.is-wrapped .bq-tag { animation: bq-fade 0.3s linear 0.2s both; }
  .bq.is-wrapped .bq-spark { animation: none; opacity: 0; }
  .bq-hint-arrow,
  .bq.is-empty .bq-hint-arrow,
  .bq-pick.is-bump .bq-pick-art,
  .bq-pick.is-nope,
  .bq.is-full .bq-btn--primary:not(:disabled) { animation: none; }
  .bq-pick,
  .bq-pick-art,
  .bq-btn { transition: opacity 0.2s linear, box-shadow 0.2s linear; }
  .bq-pick:active,
  .bq-btn:active:not(:disabled),
  .bq-bloom:not(:disabled):active .bq-bloom-pop { transform: none; }
}
@keyframes bq-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes bq-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}