/* ==========================================================================
   Delbee Flowers — style.css
   Elegant, premium flower boutique · white / light pink pastel theme
   Light + dark theme via CSS custom properties ([data-theme="dark"])
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  color-scheme: light;

  /* Brand accents — identical in both themes */
  --pink:        #FADADD;
  --pink-deep:   #e8a8b8;
  --rose:        #d4708c;

  /* Surfaces & text (overridden in dark mode) */
  --pink-soft:   #fdf0f2;
  --cream:       #fffdfb;
  --white:       #ffffff;
  --ink:         #43323a;
  --ink-soft:    #8a7680;

  /* Glassmorphism surfaces */
  --glass-card:   rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.9);
  --glass-cell:   rgba(255, 255, 255, 0.55);
  --nav-glass:    rgba(255, 253, 251, 0.72);
  --nav-glass-strong: rgba(255, 253, 251, 1);

  /* Section-specific tones */
  --hero-title:  #57323f;
  --hero-sub:    #6d5560;

  /* Forms & skeletons */
  --field-border: #f0d3d9;
  --error:        #c0392b;
  --skeleton-a:   #f7e9ec;
  --skeleton-b:   rgba(255, 255, 255, 0.75);

  --font-body:    'Poppins', system-ui, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;

  --radius:     20px;
  --radius-lg:  28px;
  --shadow-sm:  0 4px 16px rgba(212, 112, 140, 0.10);
  --shadow-md:  0 10px 34px rgba(212, 112, 140, 0.16);
  --shadow-lg:  0 24px 60px rgba(120, 60, 80, 0.22);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Dark theme ---------- */
[data-theme="dark"] {
  color-scheme: dark;

  --pink-soft:   #2a1c22;
  --cream:       #171014;
  --white:       #231822;
  --ink:         #f1e5ea;
  --ink-soft:    #b39aa5;

  --glass-card:   rgba(35, 24, 34, 0.68);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-cell:   rgba(35, 24, 34, 0.55);
  --nav-glass:    rgba(23, 16, 20, 0.75);
  --nav-glass-strong: rgba(23, 16, 20, 1);

  --hero-title:  #f7dbe4;
  --hero-sub:    #dcc3cd;

  --field-border: #4a3743;
  --skeleton-a:   #2b1d26;
  --skeleton-b:   rgba(255, 255, 255, 0.06);

  --shadow-sm:  0 4px 16px rgba(0, 0, 0, 0.30);
  --shadow-md:  0 10px 34px rgba(0, 0, 0, 0.40);
  --shadow-lg:  0 24px 60px rgba(0, 0, 0, 0.55);
}

/* Photos stay rich but never glaring in dark mode */
[data-theme="dark"] img { filter: brightness(0.92) saturate(0.97); }

/* Smooth cross-fade while switching themes (class added briefly by JS) */
html.theming *,
html.theming *::before,
html.theming *::after {
  transition: background-color 0.35s ease, color 0.35s ease,
              border-color 0.35s ease, box-shadow 0.35s ease !important;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* BUGFIX: author `display` values used to override the hidden attribute,
   leaving invisible full-screen overlays that swallowed clicks. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;          /* smooth anchor scrolling */
  scroll-padding-top: 84px;         /* offset for sticky nav */
  /* Stop iOS/Android from silently inflating font sizes in landscape —
     a common cause of "the layout looks different on my phone" */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }  /* never overflow, keep ratio */
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* Visible keyboard focus everywhere (WCAG) without hurting mouse users */
:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 3px;
  border-radius: 6px;
}

.container {
  width: min(1140px, 92%);
  margin-inline: auto;
}

/* ---------- Skip link (accessibility) ---------- */
/* Off-screen until keyboard focus lands on it, then slides into view */
.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 1000;
  background: var(--white);
  color: var(--ink);
  padding: 12px 22px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  font-weight: 500;
  transition: top 0.3s var(--ease);
}

.skip-link:focus {
  top: 16px;
  outline: 2px solid var(--rose);
  outline-offset: 2px;
}

/* Generous, professional section spacing */
.section { padding: clamp(72px, 10vw, 128px) 0; }
.section--tinted {
  background: linear-gradient(180deg, var(--pink-soft) 0%, var(--cream) 100%);
}

.section__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.5px;
  text-wrap: balance;                 /* headings wrap evenly on all widths */
}

.section__divider {
  text-align: center;
  color: var(--pink-deep);
  font-size: 1.3rem;
  margin: 14px 0 18px;
  letter-spacing: 12px;
}

.section__lead {
  text-align: center;
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0 auto 48px;
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;               /* ripple anchor */
  overflow: hidden;
  display: inline-block;
  /* Fluid sizing: identical to the old 15px/42px/1rem on desktop, scales
     down smoothly on narrow phones instead of jumping between devices */
  padding: clamp(12px, 1vw + 9px, 15px) clamp(26px, 3vw + 16px, 42px);
  font-size: clamp(0.92rem, 0.4vw + 0.82rem, 1rem);
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: 0.4px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s;
}

.btn--primary {
  background: linear-gradient(135deg, var(--pink) 0%, var(--pink-deep) 100%);
  color: #6d3648;
  box-shadow: var(--shadow-md);
}

.btn--primary:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: var(--shadow-lg);
}

.btn--primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* Ghost variant (product cards, secondary actions) */
.btn--ghost {
  background: transparent;
  border: 1.5px solid var(--pink);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--rose); color: var(--rose); transform: translateY(-2px); }

/* Click ripple (span injected by JS) */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transform: scale(0);
  animation: ripple 0.55s ease-out forwards;
  pointer-events: none;
}
[data-theme="dark"] .ripple { background: rgba(255, 255, 255, 0.22); }

@keyframes ripple {
  to { transform: scale(2.6); opacity: 0; }
}

/* ==========================================================================
   Loading screen
   ========================================================================== */
.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-content: center;
  gap: 10px;
  background: linear-gradient(160deg, var(--white), var(--pink-soft));
  transition: opacity 0.6s ease, visibility 0.6s;
}

.loader--hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.loader__flower {
  font-size: 3.4rem;
  text-align: center;
  animation: bloom 1.6s ease-in-out infinite;
}

.loader__text {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 4px;
  color: var(--rose);
  text-align: center;
}

@keyframes bloom {
  0%, 100% { transform: scale(0.85) rotate(-6deg); opacity: 0.7; }
  50%      { transform: scale(1.1)  rotate(6deg);  opacity: 1; }
}

/* Skeleton shimmer while an image is loading */
.img-shell {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--skeleton-a);
}

.img-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, var(--skeleton-b) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: shimmer 1.4s linear infinite;
}

.img-shell img { opacity: 0; transition: opacity 0.45s ease; }
.img-shell--done::before { display: none; }
.img-shell--done img { opacity: 1; }

@keyframes shimmer {
  from { background-position: 130% 0; }
  to   { background-position: -90% 0; }
}

/* ==========================================================================
   Sticky navigation (glassmorphism)
   ========================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background 0.4s, box-shadow 0.4s, padding 0.4s;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  transition: padding 0.4s var(--ease);
}

/* Frosted glass once the page is scrolled */
.nav--scrolled {
  background: var(--nav-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 2px 24px rgba(212, 112, 140, 0.12);
}

[data-theme="dark"] .nav--scrolled { box-shadow: 0 2px 24px rgba(0, 0, 0, 0.4); }

.nav--scrolled .nav__inner { padding: 8px 0; }

.nav__logo {
  font-family: var(--font-display);
  /* Fluid: 1.3rem on desktop, shrinks gently on narrow phones so the
     logo and the icon cluster never fight for space */
  font-size: clamp(1.05rem, 2.2vw + 0.55rem, 1.3rem);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: clamp(4px, 1vw, 8px);
  white-space: nowrap;
  flex-shrink: 0;
}

.nav__logo em { color: var(--rose); font-style: italic; }

.nav__menu {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav__link {
  font-size: 0.9rem;
  font-weight: 400;
  position: relative;
  padding: 4px 0;
  white-space: nowrap;
}

/* Animated underline */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: var(--rose);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}

.nav__link:hover::after,
.nav__link--active::after { transform: scaleX(1); }

.nav__link--cta {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    width: fit-content;
    min-width: 180px;

    margin: 20px auto;

    padding: 14px 28px;

    background: var(--pink);
    color: #6d3648;
    border-radius: 999px;
}
.nav__link--cta::after { display: none; }
.nav__link--cta:hover { background: var(--pink-deep); transform: translateY(-2px); }

/* Icon cluster: search / theme / language / favorites / cart / burger.
   Flex + fluid gap keeps the icons evenly spaced on every screen width
   instead of crowding together on small phones. */
.nav__actions {
  display: flex;
  align-items: center;
  gap: clamp(2px, 0.6vw, 8px);
}

.nav__icon {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid;
  place-content: center;
  font-size: 1.02rem;
  transition: background 0.3s, transform 0.3s;
}

.nav__icon:hover { background: var(--pink-soft); transform: translateY(-2px); }

.nav__icon--lang {
  width: auto;
  height: 34px;
  padding: 0 13px;
  border: 1.5px solid var(--pink);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1px;
}

.nav__badge {
  position: absolute;
  top: 2px; right: 0;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--rose);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 600;
  display: grid;
  place-content: center;
  line-height: 1;
}

/* Hamburger (collapsed nav) */
.nav__toggle { display: none; flex-direction: column; gap: 5px; padding: 10px 8px; }
.nav__toggle span {
  width: 24px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.35s var(--ease), opacity 0.3s;
}
.nav__toggle--open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle--open span:nth-child(2) { opacity: 0; }
.nav__toggle--open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Live search panel ---------- */
.search-panel {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--nav-glass-strong);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-md);
  padding: 16px 0 10px;
}

.search-panel:not([hidden]) { animation: panel-in 0.32s var(--ease); }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.search-panel__inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-panel__input {
  flex: 1;
  padding: 13px 22px;
  border-radius: 999px;
  border: 1.5px solid var(--pink);
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.98rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.search-panel__input:focus { outline: none; border-color: var(--rose); box-shadow: var(--shadow-sm); }

.search-panel__close {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: background 0.3s, transform 0.3s;
}
.search-panel__close:hover { background: var(--pink-soft); transform: rotate(90deg); }

.search-panel__results {
  margin-top: 8px;
  max-height: min(340px, 48vh);       /* fallback */
  max-height: min(340px, 48dvh);
  overflow: auto;
  display: grid;
  gap: 2px;
  padding-bottom: 8px;
}

.search-result {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 9px 14px;
  border-radius: 14px;
  font-size: 0.93rem;
  transition: background 0.25s;
}

.search-result:hover { background: var(--pink-soft); }

.search-result img {
  width: 42px; height: 42px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}

.search-result small { color: var(--ink-soft); margin-left: auto; white-space: nowrap; }

.search-result mark {
  background: var(--pink);
  color: #6d3648;
  border-radius: 3px;
  padding: 0 2px;
}

.search-group {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ink-soft);
  padding: 10px 14px 2px;
}

.search-empty {
  text-align: center;
  color: var(--ink-soft);
  padding: 18px 0 10px;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  /* 100svh (small viewport height) is intentional: unlike 100dvh it does
     NOT resize while the mobile URL bar collapses, so the hero content
     stays put instead of jumping vertically mid-scroll. 100vh is the
     fallback for older browsers. */
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;                /* always vertically centered */
  /* Reserve space for the fixed nav (top) and the scroll indicator
     (bottom) so "centered" means the same thing on every screen height */
  padding-block: clamp(88px, 13svh, 150px) clamp(80px, 12svh, 120px);
  text-align: center;
  overflow: hidden;                   /* falling petals never spill onto
                                         the sections below the hero */
  background:
    url("https://images.unsplash.com/photo-1462275646964-a0e3386b89fa?auto=format&fit=crop&w=1920&q=80")
    center / cover no-repeat fixed;
}

/* Soft pastel veil over the photo for readability */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255, 253, 251, 0.55) 0%,
    rgba(250, 218, 221, 0.35) 55%,
    rgba(255, 253, 251, 0.9) 100%);
}

[data-theme="dark"] .hero__overlay {
  background: linear-gradient(180deg,
    rgba(23, 16, 20, 0.72) 0%,
    rgba(23, 16, 20, 0.5) 55%,
    var(--cream) 100%);
}

.hero__content { position: relative; z-index: 2; will-change: transform, opacity; }

.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 6px;
  font-size: 0.8rem;
  color: var(--rose);
  font-weight: 500;
  margin-bottom: 14px;
}

.hero__title {
  font-family: var(--font-display);
  /* Slightly lower minimum than before (2.3rem vs 2.6rem) so the title
     fits without awkward wrapping on 320–375px phones; desktop unchanged */
  font-size: clamp(2.3rem, 6vw + 1rem, 5rem);
  font-weight: 700;
  color: var(--hero-title);
  text-shadow: 0 2px 30px rgba(255, 255, 255, 0.6);
  margin-bottom: 16px;
  text-wrap: balance;                 /* even line lengths on every width */
}

[data-theme="dark"] .hero__title { text-shadow: 0 2px 30px rgba(0, 0, 0, 0.6); }

.hero__subtitle {
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  color: var(--hero-sub);
  margin-bottom: clamp(26px, 5vw, 38px);
  text-wrap: balance;                 /* consistent wrapping across devices */
}

/* Floating petals animation.
   BUGFIX: the petal layer used to participate in the hero's grid flow,
   pushing the headline below true center by an amount that varied with
   screen height. As an absolute overlay it no longer affects layout, so
   the hero copy is genuinely centered on every device. */
.hero__petals {
  position: absolute;
  inset: 0;
  overflow: hidden;                   /* petals stay inside the hero */
  pointer-events: none;               /* never block taps/clicks */
}

.hero__petals span {
  position: absolute;
  top: -8%;
  font-size: clamp(1rem, 1.2vw + 0.7rem, 1.5rem);
  opacity: 0.65;
  animation: petal-fall linear infinite;
}
.hero__petals span:nth-child(1) { left: 8%;  animation-duration: 13s; }
.hero__petals span:nth-child(2) { left: 26%; animation-duration: 17s; animation-delay: 3s; font-size: 1.1rem; }
.hero__petals span:nth-child(3) { left: 45%; animation-duration: 15s; animation-delay: 6s; }
.hero__petals span:nth-child(4) { left: 62%; animation-duration: 19s; animation-delay: 1.5s; font-size: 1.2rem; }
.hero__petals span:nth-child(5) { left: 78%; animation-duration: 14s; animation-delay: 8s; }
.hero__petals span:nth-child(6) { left: 92%; animation-duration: 18s; animation-delay: 4.5s; font-size: 1.3rem; }

@keyframes petal-fall {
  0%   { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(115vh) rotate(360deg); }
}

/* Scroll-down indicator */
.hero__scroll {
  position: absolute;
  bottom: clamp(18px, 4svh, 34px); left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 26px; height: 44px;
  border: 2px solid var(--rose);
  border-radius: 999px;
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

.hero__scroll-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--rose);
  animation: scroll-dot 1.8s ease-in-out infinite;
}

@keyframes scroll-dot {
  0%   { transform: translateY(0);    opacity: 1; }
  70%  { transform: translateY(16px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 0; }
}

/* ==========================================================================
   About
   ========================================================================== */
.about__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
  margin-top: 24px;
}

.about__text p { margin-bottom: 20px; font-size: 1.04rem; }
.about__text strong { font-weight: 600; color: var(--rose); }

.about__features { margin-top: 30px; display: grid; gap: 14px; }
.about__features li {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  padding: 14px 22px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font-weight: 400;
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
}
.about__features li:hover { transform: translateX(8px); box-shadow: var(--shadow-md); }

.about__image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: rotate(2deg);
  transition: transform 0.5s var(--ease);
}
.about__image:hover { transform: rotate(0deg) scale(1.02); }
/* Square ratio: the brand logo fills the frame without cropping its text */
.about__image img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }

/* ==========================================================================
   Branches — glassmorphism location cards + interactive map
   ========================================================================== */
.branches__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.branch-card {
  background: var(--glass-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
  text-align: left;
  transition: transform 0.4s var(--ease), box-shadow 0.4s, border-color 0.3s;
}

.branch-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
}

/* Card whose location is currently shown on the map below */
.branch-card--active {
  border-color: var(--rose);
  box-shadow: var(--shadow-md);
}

.branch-card__pin {
  display: inline-grid;
  place-content: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--pink), var(--pink-deep));
  font-size: 1.3rem;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}

.branch-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.branch-card > p { color: var(--ink-soft); font-size: 0.94rem; }

/* Phone / hours / map-link block added under each branch's address */
.branch-card__meta {
  margin-top: 14px;
  display: grid;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.branch-card__meta a {
  color: var(--rose);
  font-weight: 500;
  transition: color 0.3s;
  justify-self: start;
}

.branch-card__meta a:hover { color: var(--pink-deep); }

/* Delivery-availability badge — green for branches that dispatch orders,
   gray/neutral for walk-in-only branches */
.branch-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
  white-space: nowrap;
}

.branch-card__badge--delivery {
  background: rgba(60, 168, 105, 0.16);
  color: #2f8f57;
}

[data-theme="dark"] .branch-card__badge--delivery {
  background: rgba(60, 168, 105, 0.22);
  color: #6fd897;
}

.branch-card__badge--walkin {
  background: rgba(138, 118, 128, 0.14);
  color: var(--ink-soft);
}

[data-theme="dark"] .branch-card__badge--walkin {
  background: rgba(255, 255, 255, 0.08);
}

.branch-card__note {
  font-size: 0.82rem !important;
  color: var(--ink-soft);
  margin-top: 2px;
}

/* Interactive map under the cards */
.branches__map {
  position: relative;
  margin-top: 34px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.branches__map iframe {
  width: 100%;
  height: 380px;
  border: 0;
  display: block;
  filter: saturate(0.85);
}

.branches__directions {
  position: absolute;
  right: 18px; bottom: 18px;
  padding: 12px 26px;
  font-size: 0.9rem;
}

/* ==========================================================================
   Occasion cards — compact chip-style shortcuts (every bouquet already
   includes a gift, so these organise by moment rather than "gift type")
   ========================================================================== */
.occasions__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: clamp(36px, 5vw, 52px);
}

.occasion-card {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--glass-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
  transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.3s, background 0.3s;
}

.occasion-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--rose);
}

.occasion-card__emoji { font-size: 1.05rem; }

.occasion-card--active {
  background: linear-gradient(135deg, var(--pink), var(--pink-deep));
  border-color: transparent;
  color: #6d3648;
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Product toolbar (filter chips + selects + sort)
   ========================================================================== */
.gallery__toolbar {
  display: grid;
  gap: 16px;
  justify-items: center;
  margin-bottom: 36px;
}

.toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.toolbar__select {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.toolbar__select select {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--pink);
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.toolbar__select select:hover { border-color: var(--rose); box-shadow: var(--shadow-sm); }

/* ==========================================================================
   Product cards
   ========================================================================== */
.gallery__grid--products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.gallery__empty {
  text-align: center;
  color: var(--ink-soft);
  padding-top: 26px;
}

.product-card {
  position: relative;               /* anchors the floating heart button */
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  animation: card-in 0.55s var(--ease) both;
  animation-delay: var(--d, 0ms);
  transition: transform 0.4s var(--ease), box-shadow 0.4s;
}

/* Dynamically rendered cards share the same staggered entrance */
.branch-card, .zone-card, .occasion-card {
  animation: card-in 0.55s var(--ease) both;
  animation-delay: var(--d, 0ms);
}

.product-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }

@keyframes card-in {
  from { opacity: 0; transform: translateY(22px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.product-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
}

.product-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.product-card:hover .product-card__media img { transform: scale(1.09); }  /* image zoom */

.product-card__fav {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--glass-cell);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  place-content: center;
  font-size: 1.05rem;
  color: var(--rose);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), background 0.3s;
}

.product-card__fav:hover { transform: scale(1.15); background: var(--white); }
.product-card__fav.is-fav { animation: fav-pop 0.4s var(--ease); }

@keyframes fav-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.product-card__soldout {
  position: absolute;
  top: 14px; left: 12px;
  z-index: 2;
  background: rgba(67, 50, 58, 0.85);
  color: #fff;
  font-size: 0.7rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}

/* Occasion badge overlaid on the product photo */
.product-card__badge {
  position: absolute;
  left: 12px; bottom: 12px;
  z-index: 2;
  background: rgba(23, 16, 20, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.product-card__body {
  padding: 15px 18px 18px;
  display: grid;
  gap: 6px;
  text-align: left;
}

.product-card__name {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
}

.product-card__desc {
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}

.product-card__price {
  color: var(--rose);
  font-weight: 600;
  font-size: 0.98rem;
}

.product-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.product-card__actions .btn {
  flex: 1;
  padding: 10px 8px;
  font-size: 0.82rem;
  text-align: center;
}

/* ==========================================================================
   Delivery coverage
   ========================================================================== */
.delivery__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: stretch;
}

.delivery__zones { display: grid; gap: 16px; align-content: start; }

.zone-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--glass-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
}

.zone-card:hover { transform: translateX(6px); box-shadow: var(--shadow-md); }

.zone-card__icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 14px;
  display: grid;
  place-content: center;
  font-size: 1.3rem;
  background: linear-gradient(135deg, var(--pink), var(--pink-deep));
  box-shadow: var(--shadow-sm);
}

.zone-card h3 {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.zone-card__badge {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--pink);
  color: #6d3648;
}

.zone-card__badge--express { background: var(--rose); color: #fff; }

.zone-card p { color: var(--ink-soft); font-size: 0.9rem; }

.zone-card__time {
  margin-top: 4px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--rose);
}

.zone-card__fee {
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}

/* "Other city areas" premium info card — same shell, softer accent since
   its price is a range confirmed by the operator rather than a flat fee */
.zone-card--info {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--rose) 45%, var(--glass-border));
}

.zone-card__note {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  background: var(--pink-soft);
  padding: 8px 12px;
  border-radius: 12px;
}

.delivery__map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  min-height: 380px;
}

.delivery__map iframe {
  width: 100%; height: 100%;
  min-height: 380px;
  border: 0;
  filter: saturate(0.85);
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(30px, 5vw, 60px);
  align-items: stretch;
}

.contact__cards { display: grid; gap: 18px; align-content: start; }

.contact__card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--glass-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
}

.contact__card:hover { transform: translateY(-5px) scale(1.01); box-shadow: var(--shadow-md); }

.contact__icon {
  display: grid;
  place-content: center;
  width: 52px; height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--pink), var(--pink-deep));
  font-size: 1.35rem;
  flex-shrink: 0;
}

.contact__card h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink-soft); font-weight: 500; }
.contact__card p  { font-weight: 500; font-size: 1.02rem; }

.contact__card--messenger { background: linear-gradient(135deg, #e7f0ff, #f5e6ff); }
[data-theme="dark"] .contact__card--messenger { background: linear-gradient(135deg, #232c3f, #2e2340); }

.contact__card--hours { cursor: default; }
.contact__card--hours:hover { transform: none; box-shadow: var(--shadow-sm); }

/* Map + call/message CTAs stacked in the right-hand column */
.contact__side { display: grid; gap: 18px; align-content: start; }

.contact__map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  min-height: 340px;
}

.contact__map iframe {
  width: 100%; height: 100%;
  min-height: 340px;
  border: 0;
  filter: saturate(0.85);
}

.contact__ctas {
  display: flex;
  gap: 12px;
}

.contact__ctas .btn { flex: 1; text-align: center; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  background: linear-gradient(135deg, #57323f, #7a4457);
  color: rgba(255, 255, 255, 0.9);
  padding: 48px 0 26px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 30px;
  padding-bottom: 28px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.footer__col h4 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0.75;
  margin-bottom: 10px;
  font-weight: 500;
}

.footer__col a,
.footer__link-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 4px 0;
  opacity: 0.85;
  font-size: 0.92rem;
  color: inherit;
  transition: opacity 0.3s, transform 0.3s;
}

.footer__col a:hover,
.footer__link-btn:hover { opacity: 1; transform: translateX(4px); }

.footer__tagline { font-size: 0.9rem; opacity: 0.8; margin-top: 6px; }
.footer__hours { font-size: 0.85rem; opacity: 0.7; margin-top: 10px; }

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.footer__brand { font-family: var(--font-display); letter-spacing: 0.5px; }
.footer__made  { font-size: 0.88rem; opacity: 0.8; }

/* ==========================================================================
   Floating action buttons + expandable contact menu
   ========================================================================== */
.fab {
  width: 54px; height: 54px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  font-size: 1.25rem;
  box-shadow: var(--shadow-md);
  transition: transform 0.35s var(--ease), box-shadow 0.35s, opacity 0.4s, visibility 0.4s;
}

.fab:hover { transform: translateY(-5px) scale(1.06); box-shadow: var(--shadow-lg); }

.fab-menu {
  position: fixed;
  right: 26px;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px)); /* clear the home bar */
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.fab--contact {
  background: linear-gradient(135deg, #8ab6ff, #b48aff);
  animation: fab-float 3.2s ease-in-out infinite;
}

.fab-menu__items {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.fab-menu__items:not([hidden]) .fab-menu__item {
  animation: fab-pop 0.35s var(--ease) both;
}
.fab-menu__items .fab-menu__item:nth-child(1) { animation-delay: 0.14s; }
.fab-menu__items .fab-menu__item:nth-child(2) { animation-delay: 0.1s; }
.fab-menu__items .fab-menu__item:nth-child(3) { animation-delay: 0.06s; }
.fab-menu__items .fab-menu__item:nth-child(4) { animation-delay: 0.02s; }

@keyframes fab-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.85); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.fab-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fab-menu__label {
  background: var(--white);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

.fab-menu__icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  font-size: 1.05rem;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s var(--ease);
}

.fab-menu__item:hover .fab-menu__icon { transform: scale(1.12); }

.fab-menu__icon--ig { background: linear-gradient(135deg, #f9ce34, #ee2a7b 55%, #6228d7); }
.fab-menu__icon--gm { background: linear-gradient(135deg, #fce8e6, #ea4335); }
.fab-menu__icon--ms { background: linear-gradient(135deg, #8ab6ff, #b48aff); }
.fab-menu__icon--ph { background: linear-gradient(135deg, var(--pink), var(--pink-deep)); }

.fab--top {
  position: fixed;
  right: 26px;
  bottom: calc(26px + env(safe-area-inset-bottom, 0px)); /* clear the home bar */
  z-index: 95;
  background: linear-gradient(135deg, var(--pink), var(--pink-deep));
  color: #6d3648;
  font-weight: 600;
  opacity: 0;
  visibility: hidden;
}

.fab--top.fab--visible { opacity: 1; visibility: visible; }

@keyframes fab-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* ==========================================================================
   Modals (shared shell) — gallery lightbox / product / checkout
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* BUGFIX: while fading out (open class removed, hidden not yet set)
   the overlay must not intercept clicks */
.modal:not(.modal--open) { pointer-events: none; }

.modal--open { opacity: 1; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(45, 22, 32, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal__body {
  position: relative;
  z-index: 2;
  width: min(920px, 94vw);
  text-align: center;
  padding: 20px;
}

.modal__title {
  font-family: var(--font-display);
  color: var(--pink);
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  font-weight: 600;
  margin-bottom: 18px;
  letter-spacing: 1px;
}

.modal__stage {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 22px);
}

.modal__figure {
  flex: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  background: #2d1620;
}

.modal__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  opacity: 1;
  transition: opacity 0.3s ease;   /* fade between slides */
}

.modal__image--fading { opacity: 0; }

.modal__arrow {
  width: 52px; height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-size: 1.7rem;
  line-height: 1;
  display: grid;
  place-content: center;
  transition: background 0.3s, transform 0.3s;
}

.modal__arrow:hover { background: var(--pink-deep); transform: scale(1.08); }

.modal__close {
  position: absolute;
  top: -8px; right: 8px;
  z-index: 3;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-size: 1.05rem;
  transition: background 0.3s, transform 0.3s;
}

.modal__close:hover { background: var(--rose); transform: rotate(90deg); }

.modal__counter {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 3px;
  font-size: 0.9rem;
}

/* Lock page scroll while an overlay is open */
body.no-scroll { overflow: hidden; }

/* ---------- Product details modal ---------- */
.pmodal__body {
  position: relative;
  z-index: 2;
  width: min(980px, 94vw);
  max-height: 90vh;                   /* fallback */
  max-height: 90dvh;                  /* never hidden behind mobile URL bar */
  overflow: auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  text-align: left;
}

.pmodal__close {
  position: sticky;
  top: 14px;
  float: right;
  margin: 14px 14px 0 0;
  background: var(--glass-cell);
  border: 1px solid var(--glass-border);
  color: var(--ink);
}

.pmodal__grid {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: clamp(20px, 3vw, 36px);
  padding: clamp(20px, 3vw, 34px);
}

.pmodal__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  cursor: zoom-in;
  box-shadow: var(--shadow-sm);
}

.pmodal__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.45s var(--ease);
  transform-origin: var(--zx, 50%) var(--zy, 50%);
}

.pmodal__media--zoom { cursor: zoom-out; }
.pmodal__media--zoom img { transform: scale(2); }

.pmodal__zoomhint {
  position: absolute;
  right: 12px; bottom: 12px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--glass-cell);
  backdrop-filter: blur(6px);
  display: grid;
  place-content: center;
  font-size: 1rem;
  pointer-events: none;
}

.pmodal__info { display: grid; gap: 8px; align-content: start; }

.pmodal__category {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pmodal__occ-chip {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: var(--rose);
  background: var(--pink-soft);
  padding: 4px 10px;
  border-radius: 999px;
}

.pmodal__name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 700;
  line-height: 1.25;
}

.pmodal__price { color: var(--rose); font-size: 1.25rem; font-weight: 600; }

.pmodal__desc { color: var(--ink-soft); font-size: 0.95rem; }

.pmodal__label {
  margin-top: 10px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ink-soft);
  font-weight: 500;
}

.pmodal__meaning { font-size: 0.92rem; font-style: italic; }
.pmodal__care { font-size: 0.88rem; color: var(--ink-soft); }

.pmodal__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.pmodal__size-note { margin-top: 6px; font-size: 0.8rem; color: var(--ink-soft); }

.pmodal__qty {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.pmodal__qty-count { min-width: 20px; text-align: center; font-weight: 600; }

.pmodal__delivery-est {
  margin-top: 6px;
  font-size: 0.88rem;
  color: var(--ink);
}

.pmodal__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.pmodal__actions .btn { padding: 13px 34px; font-size: 0.92rem; }

.pmodal__fav, .pmodal__share {
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 1.5px solid var(--pink);
  font-size: 1.25rem;
  color: var(--rose);
  display: grid;
  place-content: center;
  transition: transform 0.3s var(--ease), background 0.3s;
}

.pmodal__fav:hover, .pmodal__share:hover { transform: scale(1.1); background: var(--pink-soft); }
.pmodal__fav.is-fav { animation: fav-pop 0.4s var(--ease); }

.pmodal__related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 6px;
}

.related-item {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 1;
  padding: 0;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}

.related-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.related-item img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Checkout modal ---------- */
.comodal__body {
  position: relative;
  z-index: 2;
  width: min(880px, 94vw);
  max-height: 90vh;                   /* fallback */
  max-height: 90dvh;                  /* never hidden behind mobile URL bar */
  overflow: auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  text-align: left;
  padding: clamp(22px, 3.4vw, 36px);
}

.comodal__close {
  position: absolute;
  top: 14px; right: 14px;
  background: var(--glass-cell);
  border: 1px solid var(--glass-border);
  color: var(--ink);
}

.comodal__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 700;
  margin-bottom: 20px;
}

.comodal__form {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(18px, 3vw, 30px);
  align-items: start;
}

.comodal__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.comodal__wide { grid-column: 1 / -1; }

.comodal__fields label {
  display: grid;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-weight: 400;
}

.comodal__fields input,
.comodal__fields textarea {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--field-border);
  background: var(--cream);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.92rem;
  transition: border-color 0.3s, box-shadow 0.3s;
  resize: vertical;
}

.comodal__fields input:focus,
.comodal__fields textarea:focus {
  outline: none;
  border-color: var(--rose);
  box-shadow: var(--shadow-sm);
}

.comodal__fields .is-invalid { border-color: var(--error); }

.field-error { color: var(--error); font-size: 0.74rem; }

/* Capped so the submit button and any warning note are always reachable
   without scrolling the whole modal, even with a full 6-branch pickup
   list open on a short screen. */
.comodal__summary {
  background: var(--pink-soft);
  border-radius: var(--radius);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(72dvh, 640px);
}

.comodal__summary h4 {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.comodal__summary-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  display: grid;
  gap: 8px;
  padding-right: 2px;
}

.comodal__summary p {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.9rem;
}

.comodal__submit,
#coPickupNote,
#checkoutError {
  flex-shrink: 0;
}

.co-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  padding: 3px 0;
}

.comodal__submit { width: 100%; margin-top: 10px; padding: 14px 20px; }

.comodal__error {
  background: color-mix(in srgb, var(--error) 12%, transparent);
  color: var(--error);
  border: 1px solid color-mix(in srgb, var(--error) 35%, transparent);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.85rem;
  text-align: center;
}

/* Success animation */
.comodal__success {
  text-align: center;
  padding: 40px 10px 30px;
  color: var(--rose);
  display: grid;
  justify-items: center;
  gap: 8px;
}

.comodal__success h3 { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); }
.comodal__success p  { color: var(--ink-soft); }

.comodal__check { width: 96px; height: 96px; }

.comodal__check circle {
  stroke-dasharray: 202;
  stroke-dashoffset: 202;
  animation: draw 0.7s var(--ease) forwards;
}

.comodal__check path {
  stroke-dasharray: 44;
  stroke-dashoffset: 44;
  animation: draw 0.45s 0.55s var(--ease) forwards;
}

@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- Footer info modal (delivery info / FAQ / privacy / terms) ---------- */
.infomodal__body {
  position: relative;
  z-index: 2;
  width: min(640px, 94vw);
  max-height: 90vh;                   /* fallback */
  max-height: 90dvh;
  overflow: auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  text-align: left;
  padding: clamp(28px, 4vw, 44px);
}

.infomodal__close {
  position: sticky;
  top: 0;
  float: right;
  background: var(--glass-cell);
  border: 1px solid var(--glass-border);
  color: var(--ink);
}

.infomodal__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  font-weight: 700;
  margin-bottom: 16px;
  clear: both;
}

.infomodal__content { display: grid; gap: 14px; }
.infomodal__content p { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.7; }
.infomodal__content b { color: var(--ink); font-weight: 600; }

/* Clean delivery-price table inside the info modal (FAQ / delivery info) */
.info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.info-table th {
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-weight: 600;
  color: #6d3648;
  background: linear-gradient(135deg, var(--pink), var(--pink-deep));
  padding: 10px 16px;
}

.info-table td {
  padding: 11px 16px;
  color: var(--ink);
  border-bottom: 1px solid var(--field-border);
  background: var(--cream);
}

.info-table tr:last-child td { border-bottom: 0; }
.info-table td:last-child { color: var(--rose); font-weight: 600; white-space: nowrap; }

/* Accent pill that highlights the minimum-order requirement */
.info-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--pink), var(--pink-deep));
  color: #6d3648;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  padding: 3px 12px;
  border-radius: 999px;
  margin-right: 6px;
  box-shadow: var(--shadow-sm);
}

/* Cart notice shown while the subtotal is under the delivery minimum */
.cart__min-note {
  flex-shrink: 0;
  font-size: 0.82rem !important;
  color: var(--rose) !important;
  background: var(--pink-soft);
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px dashed var(--rose);
}

/* ==========================================================================
   Shopping cart drawer
   ========================================================================== */
.cart-scrim {
  position: fixed;
  inset: 0;
  z-index: 204;
  background: rgba(45, 22, 32, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.cart-scrim--show { opacity: 1; }

.cart {
  position: fixed;
  top: 0; right: 0;
  z-index: 205;
  height: 100vh;                      /* fallback */
  height: 100dvh;                     /* tracks the real visible viewport */
  width: min(420px, 100vw);
  background: var(--cream);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
  transition: transform 0.45s var(--ease);
}

.cart--open { transform: translateX(0); }

.cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--field-border);
}

.cart__head h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; }

.cart__close {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: background 0.3s, transform 0.3s;
}

.cart__close:hover { background: var(--pink-soft); transform: rotate(90deg); }

.cart__items {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
  padding: 6px 22px;
}

.cart-item {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px dashed var(--field-border);
}

.cart-item__thumb {
  width: 62px; height: 62px;
  border-radius: 14px;
  overflow: hidden;
}

.cart-item__thumb img { width: 100%; height: 100%; object-fit: cover; }

.cart-item__name { font-weight: 500; font-size: 0.92rem; line-height: 1.35; }
.cart-item__price { color: var(--rose); font-weight: 600; font-size: 0.88rem; }

.cart-item__side {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.cart-item__qty {
  display: flex;
  align-items: center;
  gap: 6px;
}

.qty-btn {
  position: relative;               /* ripple anchor */
  overflow: hidden;
  width: 27px; height: 27px;
  border-radius: 50%;
  border: 1.5px solid var(--pink);
  background: var(--white);
  color: var(--rose);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  display: grid;
  place-content: center;
  transition: background 0.25s, transform 0.25s;
}

.qty-btn:hover { background: var(--pink-soft); transform: scale(1.1); }

.cart-item__count { min-width: 20px; text-align: center; font-weight: 500; font-size: 0.9rem; }

.cart-item__remove {
  color: var(--ink-soft);
  font-size: 0.8rem;
  transition: color 0.25s;
}

.cart-item__remove:hover { color: var(--error); }

.cart__empty {
  text-align: center;
  color: var(--ink-soft);
  padding: 44px 22px;
}

/* Capped relative to the viewport (not just flex distribution) so the
   button and any warning note are NEVER pushed below the visible area,
   even with a full 6-branch pickup list open on a short phone screen. */
.cart__summary {
  flex-shrink: 0;
  max-height: calc(100dvh - 120px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Extra bottom padding keeps the checkout button above the iPhone
     home indicator */
  padding: 16px 22px calc(22px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--field-border);
}

.cart__summary-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  display: grid;
  gap: 6px;
  padding-right: 2px;
}

.cart__summary p {
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
}

.cart__grand { font-size: 1.02rem !important; font-weight: 600; }
.cart__grand b { color: var(--rose); font-size: 1.15em; }

.cart__checkout { flex-shrink: 0; width: 100%; margin-top: 2px; text-align: center; }

.cart__route-label {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--ink-soft);
  margin-top: 4px;
}

/* Radio-style delivery-route picker, shared by the cart drawer and
   the checkout summary */
.route-picker {
  display: grid;
  gap: 8px;
  margin-bottom: 6px;
}

.route-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--field-border);
  cursor: pointer;
  font-size: 0.86rem;
  transition: border-color 0.25s, background 0.25s;
}

.route-pick input { accent-color: var(--rose); flex-shrink: 0; }

.route-pick__label { flex: 1; }
.route-pick__fee { color: var(--rose); font-weight: 600; }

.route-pick--active {
  border-color: var(--rose);
  background: var(--pink-soft);
}

/* ==========================================================================
   Fulfillment toggle (Delivery / Walk-in pickup) — checkout
   ========================================================================== */
.fulfillment-picker {
  display: flex;
  gap: 8px;
  margin: 4px 0 14px;
}

.fulfillment-pick {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 10px;
  border-radius: 14px;
  border: 1.5px solid var(--field-border);
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}

.fulfillment-pick:hover { transform: translateY(-2px); }

.fulfillment-pick--active {
  border-color: var(--rose);
  background: linear-gradient(135deg, var(--pink), var(--pink-deep));
  color: #6d3648;
}

/* ==========================================================================
   Branch radio cards — delivery-branch / pickup-branch pickers (checkout)
   ========================================================================== */
/* Capped + internally scrollable so all 6 branches stay reachable on short
   mobile screens without the whole drawer/modal needing to scroll. */
.branch-picker {
  display: grid;
  gap: 10px;
  margin-bottom: 6px;
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--pink-deep) transparent;
}

.branch-picker::-webkit-scrollbar { width: 6px; }
.branch-picker::-webkit-scrollbar-track { background: transparent; }
.branch-picker::-webkit-scrollbar-thumb { background: var(--pink-deep); border-radius: 999px; }

.branch-pick {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1.5px solid var(--field-border);
  cursor: pointer;
  background: var(--white);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.2s var(--ease), box-shadow 0.25s var(--ease);
}

.branch-pick:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.branch-pick input { position: absolute; opacity: 0; pointer-events: none; }

.branch-pick__radio {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--pink-deep);
  display: grid;
  place-content: center;
  transition: border-color 0.25s var(--ease);
}

.branch-pick__radio::after {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--rose);
  transform: scale(0);
  transition: transform 0.22s var(--ease);
}

.branch-pick__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.branch-pick__name { font-weight: 600; font-size: 0.92rem; }
.branch-pick__addr { font-size: 0.78rem; color: var(--ink-soft); }
.branch-pick__meta { font-size: 0.74rem; color: var(--ink-soft); }

/* Selected-state checkmark badge — hidden (scaled to 0) until active */
.branch-pick__check {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  background: var(--rose);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}

.branch-pick--active {
  border-color: var(--rose);
  background: var(--pink-soft);
  box-shadow: var(--shadow-sm);
}

.branch-pick--active .branch-pick__radio { border-color: var(--rose); }
.branch-pick--active .branch-pick__radio::after { transform: scale(1); }
.branch-pick--active .branch-pick__check { opacity: 1; transform: scale(1); }

/* Route-picker / branch-picker blocks swap smoothly when the fulfillment
   toggle changes, instead of snapping via the `hidden` attribute. The
   max-height only needs to clear the (now internally-scrollable, capped)
   branch-picker's own height plus its label/error text. */
.fulfillment-block {
  max-height: 380px;
  opacity: 1;
  overflow: hidden;
  margin-bottom: 6px;
  transition: max-height 0.4s var(--ease), opacity 0.3s var(--ease), margin 0.35s var(--ease);
}

.fulfillment-block--collapsed {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  pointer-events: none;
}

@media (max-width: 480px) {
  .fulfillment-picker { flex-direction: column; }
}

/* ==========================================================================
   Scroll-reveal animations (fade in + slide up)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Responsive — collapse nav (many items) below 1080px
   ========================================================================== */
@media (max-width: 1080px) {
  .nav__toggle { display: flex; }

  /* Slide-down glass menu.
     BUGFIX: on short screens (small phones, landscape) the open menu used
     to extend past the viewport and cut off the last item ("Холбоо барих").
     It now caps its height to the *dynamic* viewport (100dvh minus the
     ~64px nav bar) and scrolls inside itself, with generous bottom padding
     that also respects the iPhone home-indicator safe area. */
  .nav__menu {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 6px;
    background: var(--nav-glass-strong);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: 16px 24px calc(30px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100vh - 64px);              /* fallback */
    max-height: calc(100dvh - 64px);             /* mobile-URL-bar aware */
    overflow-y: auto;
    overscroll-behavior: contain;                /* don't scroll the page behind */
    box-shadow: var(--shadow-md);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.4s var(--ease), opacity 0.35s, visibility 0.35s;
  }

  .nav__menu--open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav__menu li {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .nav__link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 16px 0;
    font-size: 1rem;
  }
}

/* ==========================================================================
   Responsive — tablet
   ========================================================================== */
@media (max-width: 960px) {
  .about__grid    { grid-template-columns: 1fr; }
  .about__image   { max-width: 440px; margin-inline: auto; }
  .branches__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery__grid--products { grid-template-columns: repeat(3, 1fr); }
  .contact__grid  { grid-template-columns: 1fr; }
  .delivery__grid { grid-template-columns: 1fr; }
  .hero { background-attachment: scroll; }   /* fixed backgrounds are janky on tablets */
  .footer__grid { grid-template-columns: 1fr 1fr; }

  .pmodal__grid  { grid-template-columns: 1fr; }
  .pmodal__media { aspect-ratio: 4 / 3; }
  .comodal__form { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Responsive — mobile
   ========================================================================== */
@media (max-width: 640px) {
  .branches__grid   { grid-template-columns: 1fr; }
  .gallery__grid--products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .product-card__actions { flex-direction: column; }

  .comodal__fields { grid-template-columns: 1fr; }

  .modal__arrow { width: 42px; height: 42px; font-size: 1.4rem; }
  .modal__body  { padding: 12px; }

  .nav__icon { width: 36px; }
  .nav__icon--lang { padding: 0 9px; }

  .fab-menu { right: 16px; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .fab--top { right: 16px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
  .fab { width: 48px; height: 48px; }

  .branches__directions { right: 12px; bottom: 12px; padding: 10px 20px; }

  .footer__grid { grid-template-columns: 1fr; text-align: center; }
  .footer__inner { justify-content: center; text-align: center; }
}

/* ==========================================================================
   Responsive — phones & small tablets (≤820px)
   iOS Safari auto-zooms the page when a focused field's font-size is
   under 16px — the #1 cause of "the site zooms in when I tap the form".
   Forcing 16px on touch-size screens keeps rendering identical everywhere.
   ========================================================================== */
@media (max-width: 820px) {
  .search-panel__input,
  .comodal__fields input,
  .comodal__fields textarea,
  .toolbar__select select {
    font-size: 16px;
  }
}

/* ==========================================================================
   Responsive — narrow phones (≤480px)
   The nav bar gets a slightly wider working area so the logo and the six
   header controls always fit on one row without touching.
   ========================================================================== */
@media (max-width: 480px) {
  .nav__inner { width: min(1140px, 96%); }
}

/* ==========================================================================
   Responsive — ≤430px (iPhone 14/15/16 Pro Max, Pixel, most Androids)
   Compact icon cluster: same icons, fluidly smaller, evenly spaced.
   ========================================================================== */
@media (max-width: 430px) {
  .nav__logo { font-size: 0.98rem; }
  .nav__icon { width: 33px; height: 38px; font-size: 0.95rem; }
  .nav__icon--lang { height: 32px; padding: 0 8px; font-size: 0.72rem; }
  .nav__toggle { padding: 8px 5px; }
}

/* ==========================================================================
   Responsive — ≤350px (iPhone SE 1st gen, compact Androids)
   The italic "Flowers" is dropped from the logo ("🌸 Delbee" remains) so
   the header never overflows; product cards go single-column for
   comfortable reading.
   ========================================================================== */
@media (max-width: 350px) {
  .nav__logo em { display: none; }
  .gallery__grid--products { grid-template-columns: 1fr; }
}