:root {
  /* Red & Gold bakery theme: rich red CTAs, white cards, warm gold accents,
     blush-tinted background, warm cocoa text. */
  --forest: #b3272d;
  --forest-dark: #8f1f24;
  --forest-bright: #d6524a;
  --green-tint: #fbe9e6;
  --strawberry: #e94b5f;
  --strawberry-dark: #d63a4e;
  --orange: #f58b32;
  --orange-dark: #d9731f;
  --yellow: #f7c948;
  --green: #e0655a;
  --green-dark: #a4362c;
  --cream-bg: #fdf6f2;
  --ink: #3a221c;
  --ink-soft: #6b3d33;
  --muted: #8a6a5e;
  --line: rgba(58, 34, 28, 0.13);
  --line-strong: rgba(58, 34, 28, 0.22);
  --cream: #fdf6f2;
  --paper: #ffffff;
  --rose: #e94b5f;
  --rose-dark: #d63a4e;
  --teal: #b3272d;
  --gold: #e8a23c;
  --gold-bright: #f3cf7e;
  --gold-deep: #b3272d;
  --gold-wash: linear-gradient(120deg, #f3cf7e, #f6dcd6 45%, #e8a23c);
  --shadow: 0 30px 70px -28px rgba(58, 34, 28, 0.22), 0 8px 24px -12px rgba(58, 34, 28, 0.1);
  --soft-shadow: 0 16px 40px -20px rgba(58, 34, 28, 0.16), 0 3px 10px -4px rgba(58, 34, 28, 0.06);
  --lift-shadow: 0 34px 64px -26px rgba(58, 34, 28, 0.24), 0 10px 24px -12px rgba(214, 82, 74, 0.3);
  --radius: 14px;
  --radius-lg: 22px;
  --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Vanilla-cream base across the whole page. */
html {
  background: linear-gradient(180deg, #fdf9f7, #fdf3ef 60%, #fbe9e6);
  background-attachment: fixed;
}

body::before {
  display: none;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font-body);
  letter-spacing: 0.005em;
  background: transparent;
  background-attachment: fixed;
}

body.drawer-open {
  overflow: hidden;
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

img {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px clamp(16px, 4vw, 54px);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 620;
  letter-spacing: 0.015em;
  line-height: 1.1;
}

.brand small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.brand-mark {
  display: grid;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 12px;
  color: #fff8ec;
  font-family: var(--font-display);
  font-weight: 600;
  background: linear-gradient(135deg, #b3272d, #c23f39 55%, #d6524a);
  box-shadow: inset 0 1px 0 rgba(255, 235, 200, 0.4), var(--soft-shadow);
}

.cart-button,
.primary-button,
.ghost-button,
.danger-button,
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border: 0;
  border-radius: var(--radius);
  padding: 0 16px;
  font-weight: 750;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}

.cart-button,
.primary-button {
  color: #ffffff;
  background: linear-gradient(135deg, #b3272d, #bf3d38 60%, #cf4a42);
  box-shadow: 0 14px 30px -12px rgba(179, 39, 45, 0.55);
}

.primary-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 240, 205, 0.32) 50%, transparent 68%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease-lux);
  pointer-events: none;
}

.primary-button {
  position: relative;
  overflow: hidden;
}

.primary-button:hover::after,
.primary-button:focus-visible::after {
  transform: translateX(120%);
}

.primary-button:hover,
.cart-button:hover {
  background: linear-gradient(135deg, #8f1f24, #b3272d 60%, #e8a23c);
  box-shadow: 0 18px 38px -14px rgba(179, 39, 45, 0.5), 0 0 0 1px rgba(243, 207, 126, 0.45);
}

.cart-button:hover,
.primary-button:hover,
.ghost-button:hover,
.danger-button:hover,
.icon-button:hover {
  transform: translateY(-2px);
}

.cart-count {
  display: grid;
  min-width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, #b3272d, #e8a23c);
  font-size: 0.82rem;
  font-weight: 800;
}

.cart-count.pop {
  animation: cartPop 0.5s var(--ease-lux);
}

.ghost-button {
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  background: rgba(255, 253, 249, 0.72);
  font-weight: 700;
}

.ghost-button:hover {
  border-color: rgba(232, 162, 60, 0.55);
  background: linear-gradient(120deg, rgba(240, 220, 174, 0.28), rgba(255, 253, 249, 0.9));
  color: var(--ink);
}

.danger-button {
  color: #fff;
  background: #e94b5f;
}

.small {
  min-height: 34px;
  padding: 0 10px;
  font-size: 0.84rem;
}

.full {
  width: 100%;
}

.icon-button {
  width: 42px;
  padding: 0;
  color: var(--ink);
  background: #fff6ef;
  border: 1px solid var(--line);
}

main {
  width: 100%;
}

/* Hero load choreography: eyebrow -> title -> copy -> CTA -> image. */
.hero-copy > * {
  animation: riseIn 0.9s var(--ease-lux) both;
}

.hero-copy > *:nth-child(1) { animation-delay: 0.05s; }
.hero-copy > *:nth-child(2) { animation-delay: 0.14s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.24s; }
.hero-copy > .hero-cta { animation-delay: 0.34s; }

.hero-image-wrap {
  animation: riseIn 1s var(--ease-lux) 0.3s both;
}

@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cartPop {
  0% { transform: scale(1); }
  38% { transform: scale(1.45); }
  70% { transform: scale(0.92); }
  100% { transform: scale(1); }
}

@keyframes glowPulse {
  0%,
  100% {
    opacity: 0.7;
    transform: scaleX(1);
  }
  50% {
    opacity: 1;
    transform: scaleX(1.06);
  }
}

.hero-section {
  /* No fixed crop-box ratio here on purpose: this used to be pinned to the
     first banner artwork's own ~2.66:1 ratio, which cropped the top/bottom
     off any other banner image the owner uploaded through the admin panel
     ("increase the length so it is fully visible" bug). Height now just
     follows whatever image is loaded (see .hero-image-wrap img below) -
     this section is a plain wrapper, not a fixed box. */
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #fdf6f2;
}

.hero-copy {
  /* This banner style now bakes its title/CTA directly into the uploaded
     image, so the old text overlay is hidden rather than removed from the
     DOM - keeps renderHero()/showBanner() in storefront.js working
     unchanged (they still set this text, it's just not shown). */
  display: none;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--gold-deep);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.hero-copy h1 {
  margin: 0;
  max-width: 11ch;
  font-family: var(--font-display);
  font-weight: 480;
  font-size: clamp(2.9rem, 7vw, 6.4rem);
  letter-spacing: -0.02em;
  line-height: 0.98;
}

.hero-copy h1 em {
  font-style: italic;
  color: var(--gold-deep);
}

.hero-copy p:not(.eyebrow) {
  max-width: 620px;
  margin: 18px 0 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 2vw, 1.16rem);
  line-height: 1.7;
}

.hero-cta {
  width: fit-content;
  margin-top: 20px;
}

.hero-image-wrap {
  position: relative !important;
  display: block !important;
  cursor: pointer;
}

.hero-image-wrap img {
  /* Show the WHOLE banner image at FULL WIDTH, no cropping, no shrinking
     to fit a height cap (that was leaving blank side-bars on a
     taller/portrait-style banner - see the ops doc). Height simply follows
     the image's own natural ratio at 100% width - whatever that is. */
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 auto;
  transition: opacity 260ms var(--ease-lux), transform 260ms var(--ease-lux);
}

.hero-image-wrap img.changing {
  opacity: 0;
  transform: scale(1.03);
}

.banner-controls {
  position: absolute;
  right: clamp(24px, 5vw, 48px);
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(196, 130, 149, 0.0);
  background: rgba(179, 39, 45, 0.35);
  transition: width 180ms ease, background 180ms ease;
}

.hero-dot.active {
  width: 24px;
  background: var(--gold);
}

.contact-ribbon {
  width: min(1180px, calc(100% - 32px));
  margin: 18px auto 0;
  overflow: hidden;
  border: 1px solid rgba(232, 162, 60, 0.3);
  border-radius: 999px;
  color: var(--gold-deep);
  background: linear-gradient(100deg, rgba(255, 252, 244, 0.95), rgba(250, 240, 219, 0.96), rgba(255, 248, 234, 0.95));
  box-shadow: 0 8px 22px rgba(74, 42, 32, 0.08);
}

.contact-ribbon-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 26px;
  min-height: 44px;
  padding: 0 22px;
  animation: slideContact 42s linear infinite;
  white-space: nowrap;
}

.contact-ribbon-track span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.contact-ribbon-track b {
  color: var(--gold-deep);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
}

.contact-ribbon-track span[aria-hidden="true"] {
  color: var(--gold);
  font-size: 1.1rem;
}

@media (hover: hover) and (pointer: fine) {
  .contact-ribbon:hover .contact-ribbon-track {
    animation-play-state: paused;
  }
}

@media (hover: none) {
  .contact-ribbon-track {
    animation-play-state: running !important;
  }
}

.special-strip,
.catalog-section,
.site-footer {
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
}

.special-strip {
  margin-top: 24px;
  padding: 18px 0 4px;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 18px;
}

.section-heading h2,
.drawer-head h2,
.admin-card h2,
.admin-topbar h1,
.login-card h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.08;
}

.section-heading.compact h2 {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
}

/* Catalog toolbar: search + kg-size filter pills above the grid */
.catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}

.kg-filter {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: var(--soft-shadow);
}

.kg-filter-pill {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s var(--ease-lux), color 0.3s var(--ease-lux), box-shadow 0.3s var(--ease-lux);
}

.kg-filter-pill:hover {
  color: var(--gold-deep);
  background: rgba(179, 39, 45, 0.09);
  }

.kg-filter-pill.active {
  color: #ffffff;
  background: linear-gradient(135deg, #b3272d, #e8a23c);
  box-shadow: 0 8px 18px -8px rgba(179, 39, 45, 0.55);
}

.kg-filter-pill:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(179, 39, 45, 0.5);
}

.catalog-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 260px;
  max-width: 360px;
  min-height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.78);
}

.catalog-search input {
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.catalog-search input:focus {
  box-shadow: none;
}

.catalog-empty {
  grid-column: 1 / -1;
}

/* Admin product-list search sits above the list inside its card */
.admin-product-search {
  width: 100%;
  max-width: none;
  margin: 0 0 14px;
}

.admin-product-search input {
  flex: 1;
}

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

.special-window {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 253, 249, 0.7);
  box-shadow: var(--soft-shadow);
}

.special-track {
  display: flex;
  width: max-content;
  gap: 14px;
  padding: 14px;
  animation: slideSpecials 34s linear infinite;
}

@media (hover: hover) and (pointer: fine) {
  .special-window:hover .special-track {
    animation-play-state: paused;
  }
}

@media (hover: none) {
  .special-track {
    animation-play-state: running !important;
  }
}

.special-card {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  flex: 0 0 min(420px, 86vw);
  gap: 12px;
  align-items: center;
  min-height: 112px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #ffffff, #fdf4e7 60%, #f8ecdc);
  cursor: pointer;
  transition: transform 260ms var(--ease-lux), box-shadow 260ms var(--ease-lux), border-color 260ms var(--ease-lux);
}

.special-card:hover,
.special-card:focus-visible {
  border-color: rgba(232, 162, 60, 0.55);
  box-shadow: var(--lift-shadow);
  transform: translateY(-3px);
  outline: none;
}

.special-card img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 42px 42px 10px 10px;
}

.special-card span,
.category-label,
.admin-item small,
.order-card small {
  color: var(--gold-deep);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.special-card strong {
  display: block;
  margin: 4px 0;
}

.special-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

.special-card b {
  display: block;
  margin-top: 7px;
  color: var(--gold-deep);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
}

.catalog-section {
  padding: 30px 0 54px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 18px;
}

/* Category dropdown blocks: one collapsible Luxe section per category,
   in admin order. Body animates open/closed via max-height + opacity. */
.category-block {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 253, 249, 0.72);
  box-shadow: 0 14px 34px -24px rgba(74, 42, 32, 0.35);
  overflow: hidden;
  transition: border-color 320ms var(--ease-lux), box-shadow 320ms var(--ease-lux);
}

.category-block + .category-block {
  margin-top: 16px;
}

.category-block:hover {
  border-color: rgba(232, 162, 60, 0.45);
}

.category-block.open {
  border-color: rgba(232, 162, 60, 0.55);
  box-shadow: 0 20px 44px -26px rgba(74, 42, 32, 0.4), 0 6px 18px -10px rgba(179, 39, 45, 0.18);
}

.category-head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 14px 18px;
  border: 0;
  background: transparent;
  text-align: left;
}

.category-thumb {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(232, 162, 60, 0.35);
  box-shadow: 0 6px 14px -6px rgba(58, 34, 28, 0.3);
  background: var(--cream);
}

.category-head-text {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.category-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.1;
  color: var(--ink);
  flex: 0 0 auto;
}

.category-count {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  white-space: nowrap;
}

.category-head-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.category-delivery {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8f1f24;
  background: linear-gradient(135deg, #f6dcd6, #f0c4bb);
  border: 1px solid rgba(179, 39, 45, 0.3);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

.category-eggless {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9a5b12;
  background: linear-gradient(135deg, #fdecc8, #f9d896);
  border: 1px solid rgba(217, 115, 31, 0.35);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

.category-chevron {
  flex: 0 0 auto;
  font-size: 0.85rem;
  color: var(--gold-deep);
  transition: transform 360ms var(--ease-lux);
}

.category-block.open .category-chevron {
  transform: rotate(180deg);
}

.category-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--ease-lux);
}

.category-block.open .category-body {
  grid-template-rows: 1fr;
}

.category-body-inner {
  min-height: 0;
  overflow: hidden;
}

.category-body .product-grid {
  padding: 2px 20px 20px;
}

.category-empty-note {
  margin: 0;
  padding: 6px 2px 10px;
  font-size: 0.92rem;
  color: var(--muted);
  font-style: italic;
}

.product-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-lg);
  background: rgba(255, 253, 249, 0.92);
  box-shadow: var(--soft-shadow);
  overflow: hidden;
  transform: translateY(22px);
  opacity: 0;
  transition: transform 500ms var(--ease-lux), opacity 560ms var(--ease-lux), box-shadow 320ms var(--ease-lux), border-color 320ms var(--ease-lux);
  transition-delay: var(--delay);
}

.product-card.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.product-card:hover {
  transform: translateY(-6px);
  border-color: rgba(232, 162, 60, 0.5);
  box-shadow: var(--lift-shadow);
}

.product-image {
  width: 100%;
  aspect-ratio: 1.22;
  object-fit: cover;
  background: #fdf0e0;
  transition: transform 700ms var(--ease-lux);
}

.product-card:hover .product-image {
  transform: scale(1.045);
}

.product-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.product-body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 560;
  letter-spacing: -0.01em;
  font-size: 1.28rem;
  line-height: 1.2;
}

.product-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.48;
}

.details-line {
  min-height: 40px;
  font-size: 0.88rem;
}

.kg-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.kg-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 56px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 10px;
  color: var(--ink);
  background: #fdf9f7;
  text-align: left;
}

.kg-option span,
.kg-option strong {
  overflow-wrap: anywhere;
}

.kg-option strong {
  font-size: 0.88rem;
}

.kg-option.active {
  border-color: rgba(179, 39, 45, 0.75);
  background: linear-gradient(135deg, #fbe9e6, #f6d9d3);
  box-shadow: inset 0 0 0 1px rgba(232, 162, 60, 0.25), 0 4px 12px -6px rgba(179, 39, 45, 0.4);
}

.product-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.product-action span {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.25;
}

/* On-card quantity stepper: ADD morphs into − 1 + instead of opening the drawer */
.qty-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid rgba(179, 39, 45, 0.55);
  border-radius: 999px;
  background: linear-gradient(135deg, #fbe9e6, #f6d9d3);
  box-shadow: inset 0 0 0 1px rgba(232, 162, 60, 0.18), 0 10px 22px -12px rgba(179, 39, 45, 0.45);
  overflow: hidden;
}

.qty-stepper button {
  width: 42px;
  min-height: 44px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--gold-deep);
  font-family: var(--font-body);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s var(--ease-lux), color 0.25s var(--ease-lux);
}

.qty-stepper button:hover {
  background: rgba(179, 39, 45, 0.14);
  color: #9a7227;
}

.qty-stepper button:focus-visible {
  outline: none;
  background: rgba(179, 39, 45, 0.14);
  box-shadow: inset 0 0 0 2px rgba(179, 39, 45, 0.5);
}

.qty-stepper span {
  min-width: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Confetti pop on ADD — 0.5s burst, palette-matched, no libraries */
.confetti-burst {
  position: fixed;
  z-index: 60;
  width: 0;
  height: 0;
  pointer-events: none;
}

.confetti-burst i {
  position: absolute;
  width: 9px;
  height: 13px;
  margin: -6px 0 0 -4.5px;
  border-radius: 2px;
  opacity: 0;
  animation: confetti-fly 2s linear forwards;
  will-change: transform, opacity;
}

@keyframes confetti-fly {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(0.4);
  }

  14% {
    opacity: 1;
    transform: translate(calc(var(--dx) * 0.38), calc(var(--dy) * 0.38 - 40px)) rotate(calc(var(--rot) * 0.3)) scale(1.12);
  }

  38% {
    opacity: 1;
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1);
  }

  62% {
    opacity: 1;
    transform: translate(calc(var(--dx) * 1.04), calc(var(--dy) + var(--fall) * 0.42)) rotate(calc(var(--rot) * 1.5)) scale(0.95);
  }

  86% {
    opacity: 1;
    transform: translate(calc(var(--dx) * 1.08), calc(var(--dy) + var(--fall) * 0.8)) rotate(calc(var(--rot) * 2)) scale(0.9);
  }

  100% {
    opacity: 0;
    transform: translate(calc(var(--dx) * 1.1), calc(var(--dy) + var(--fall))) rotate(calc(var(--rot) * 2.4)) scale(0.85);
  }
}

.luxe-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(1180px, calc(100% - 32px));
  margin: 26px auto 0;
  color: var(--gold);
}

.luxe-divider::before,
.luxe-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 162, 60, 0.45));
}

.luxe-divider::after {
  background: linear-gradient(90deg, rgba(232, 162, 60, 0.45), transparent);
}

.luxe-divider span {
  font-size: 0.85rem;
  animation: sparkle 3.2s ease-in-out infinite;
}

@keyframes sparkle {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 30px 0 38px;
  border-top: 1px solid rgba(232, 162, 60, 0.28);
  color: var(--muted);
}

.site-footer strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
}

.footer-terms-link {
  border: 0;
  background: none;
  padding: 0;
  color: var(--muted);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.footer-terms-link:hover {
  color: var(--ink);
}

.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  justify-content: flex-end;
  background: rgba(74, 42, 32, 0.24);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.preview-modal {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(74, 42, 32, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.preview-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.preview-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(280px, 1fr);
  gap: 22px;
  width: min(900px, 100%);
  max-height: calc(100vh - 36px);
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #ffffff, #fbf2e3 58%, #f6e8d4);
  box-shadow: 0 24px 80px rgba(74, 42, 32, 0.26);
  overflow-y: auto;
  transform: translateY(18px) scale(0.98);
  transition: transform 320ms var(--ease-lux);
}

.preview-modal.open .preview-panel {
  transform: translateY(0) scale(1);
}

.preview-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}

.preview-image {
  width: 100%;
  height: 100%;
  min-height: 330px;
  border-radius: 46% 46% var(--radius) var(--radius);
  object-fit: cover;
  background: #fdf0e0;
}

.preview-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px 10px 8px 0;
}

.preview-content h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1;
}

.preview-content > strong {
  color: var(--gold-deep);
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
}

.preview-category {
  margin-top: -6px !important;
  color: var(--gold-deep) !important;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.preview-content p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.preview-kg-options {
  margin: 6px 0;
}

.cart-drawer.open {
  opacity: 1;
  pointer-events: auto;
}

.drawer-panel {
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  height: 100%;
  padding: 22px;
  background: linear-gradient(180deg, #ffffff, #faf1e2);
  box-shadow: -22px 0 56px rgba(74, 42, 32, 0.24);
  transform: translateX(100%);
  transition: transform 380ms var(--ease-lux);
  overflow-y: auto;
}

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

.drawer-head,
.card-head,
.mini-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.cart-items {
  display: grid;
  gap: 12px;
  margin: 20px 0;
}

.cart-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.cart-item img {
  width: 72px;
  height: 72px;
  border-radius: var(--radius);
  object-fit: cover;
}

.cart-item span {
  display: block;
  margin: 4px 0 8px;
  color: var(--muted);
  font-size: 0.88rem;
}

.qty-control {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.qty-control button {
  min-width: 32px;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: #fdf6f2;
  font-weight: 800;
}

.qty-control span {
  margin: 0;
  min-width: 24px;
  text-align: center;
}

.remove-button {
  padding-inline: 10px;
  color: #e94b5f !important;
}

.total-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 1.12rem;
}

.total-line strong {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--gold-deep);
}

.checkout-form,
.stack-form {
  display: grid;
  gap: 14px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

label {
  display: grid;
  gap: 7px;
  color: #4f403a;
  font-size: 0.88rem;
  font-weight: 750;
}

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

.addon-section {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.addon-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.addon-heading h3 {
  margin: 0;
  font-size: 1.08rem;
}

.addon-heading > span {
  color: var(--muted);
  font-size: 0.8rem;
}

.addon-list {
  display: grid;
  gap: 8px;
}

.addon-empty {
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-soft, inherit);
}

.addon-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.addon-card img {
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  object-fit: cover;
}

.addon-copy {
  min-width: 0;
}

.addon-copy strong,
.addon-copy p,
.addon-copy span {
  display: block;
}

.addon-copy p {
  margin: 3px 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.addon-copy span {
  color: var(--rose-dark);
  font-size: 0.84rem;
  font-weight: 800;
}

input,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  color: var(--ink);
  background: #fff;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

textarea {
  resize: vertical;
}

input:focus,
textarea:focus {
  border-color: rgba(179, 39, 45, 0.72);
  box-shadow: 0 0 0 3px rgba(232, 162, 60, 0.16);
}

.payment-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(224, 101, 90, 0.25);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #fff4f0, #fff8ed);
}

.form-note {
  min-height: 22px;
  margin: 0;
  color: var(--teal);
  line-height: 1.4;
}

.form-note-alert {
  font-weight: 600;
  color: var(--rose-dark);
}

.form-note-alert:empty {
  min-height: 0;
  margin: 0;
  font-weight: 400;
}

.empty-state {
  padding: 20px;
  border: 1px dashed rgba(122, 82, 60, 0.22);
  border-radius: var(--radius);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.55);
}

.empty-state strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
}

.empty-state p {
  margin: 0;
}

/* Admin */

body[data-page="admin"] {
  background: transparent;
}

.admin-shell {
  min-height: 100vh;
}

.login-card {
  width: min(460px, calc(100% - 32px));
  margin: 10vh auto;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow);
}

.login-card p {
  color: var(--muted);
  line-height: 1.6;
}

.dashboard {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  min-height: 100vh;
}

.admin-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100vh;
  padding: 22px;
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px);
}

.admin-brand {
  align-items: flex-start;
}

.admin-nav {
  display: grid;
  gap: 8px;
}

.nav-link {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0 12px;
  color: var(--ink);
  background: transparent;
  text-align: left;
  font-weight: 780;
}

.nav-link.active,
.nav-link:hover {
  border-color: var(--line);
  background: linear-gradient(135deg, #fff, #fff3e5);
}

.admin-main {
  min-width: 0;
  padding: clamp(18px, 3.2vw, 36px);
}

.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.admin-panel {
  display: none;
}

.admin-panel.active {
  display: block;
  animation: panelIn 200ms ease both;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.stat-card,
.admin-card {
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: var(--soft-shadow);
}

.stat-card {
  display: grid;
  gap: 8px;
  padding: 18px;
}

.stat-card span {
  color: var(--muted);
  font-weight: 750;
}

.stat-card strong {
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1;
}

.admin-card {
  padding: 18px;
}

.admin-card p {
  color: var(--muted);
  line-height: 1.6;
}

.admin-layout {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.admin-layout.slim {
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
}

.variant-editor {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.variant-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
}

.admin-preview {
  width: 100%;
  aspect-ratio: 1.45;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.banner-admin-preview {
  aspect-ratio: 1.9;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.check-row input {
  width: 18px;
  height: 18px;
}

.item-list,
.order-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.admin-item {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.admin-item img {
  width: 74px;
  height: 74px;
  border-radius: var(--radius);
  object-fit: cover;
}

.admin-item span,
.admin-item small {
  display: block;
  margin-top: 4px;
}

.admin-item span {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.35;
}

.special-price-list {
  color: var(--rose-dark) !important;
  font-weight: 750;
}

.admin-item-details {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.admin-item-details strong {
  color: var(--ink);
}

.item-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.category-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 10px 8px 14px;
  background: #fffaf3;
  overflow-wrap: anywhere;
}

.category-pill button {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #e94b5f;
}

.order-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.order-card h3 {
  margin: 0;
}

.order-card p {
  margin: 8px 0;
  color: var(--muted);
}

.order-card ul {
  margin: 10px 0;
  padding-left: 20px;
}

.settings-form .danger-button {
  justify-self: start;
}

@keyframes cakeFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-12px) rotate(1deg);
  }
}

@keyframes slideSpecials {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes slideContact {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ---- Offers ribbon (free delivery / 24-7) ---- */
.offers-ribbon {
  width: min(1180px, calc(100% - 32px));
  margin: 14px auto 0;
  overflow: hidden;
  border: 1px dashed rgba(179, 39, 45, 0.45);
  border-radius: 999px;
  background: linear-gradient(100deg, #fdf4ef, #fbe9e6 55%, #fdf6f1);
  box-shadow: 0 8px 22px rgba(74, 42, 32, 0.06);
}

.offers-ribbon-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 24px;
  min-height: 42px;
  padding: 0 20px;
  animation: slideOffers 30s linear infinite;
  white-space: nowrap;
}

.offers-ribbon-track b {
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.offers-ribbon-track span[aria-hidden="true"] {
  color: var(--green);
  font-size: 1rem;
}

@keyframes slideOffers {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (hover: hover) and (pointer: fine) {
  .offers-ribbon:hover .offers-ribbon-track {
    animation-play-state: paused;
  }
}

@media (hover: none) {
  .offers-ribbon-track {
    animation-play-state: running !important;
  }
}

/* ---- Floating Call Now button ---- */
.call-now-fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 12px 14px;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, var(--green), #cf4a42);
  box-shadow: 0 12px 28px -8px rgba(58, 34, 28, 0.55), 0 0 0 0 rgba(179, 39, 45, 0.5);
  animation: fabPulse 2.4s ease-out infinite;
  transition: transform 200ms var(--ease-lux), box-shadow 200ms var(--ease-lux);
}

.call-now-fab:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 16px 32px -8px rgba(58, 34, 28, 0.6);
}

.call-fab-icon {
  font-size: 1.05rem;
  line-height: 1;
}

.call-fab-label {
  line-height: 1;
}

@keyframes fabPulse {
  0% { box-shadow: 0 12px 28px -8px rgba(58, 34, 28, 0.55), 0 0 0 0 rgba(179, 39, 45, 0.45); }
  70% { box-shadow: 0 12px 28px -8px rgba(58, 34, 28, 0.55), 0 0 0 16px rgba(179, 39, 45, 0); }
  100% { box-shadow: 0 12px 28px -8px rgba(58, 34, 28, 0.55), 0 0 0 0 rgba(179, 39, 45, 0); }
}

@media (max-width: 640px) {
  .call-now-fab {
    padding: 11px 16px 11px 12px;
    font-size: 0.85rem;
    bottom: 14px;
    right: 14px;
  }
}

/* ---- Coupon box (cart) ---- */
.coupon-box {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.coupon-box input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px dashed rgba(179, 39, 45, 0.5);
  border-radius: 12px;
  background: #fdf6f1;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.coupon-box input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(224, 101, 90, 0.25);
}

.coupon-apply {
  padding: 10px 18px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  font: inherit;
  font-weight: 800;
  background: linear-gradient(135deg, var(--green), #cf4a42);
  cursor: pointer;
}

.coupon-note {
  min-height: 18px;
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: #b3452f;
}

.coupon-note.success {
  color: var(--green);
  font-weight: 700;
}

.coupon-applied-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(179, 39, 45, 0.35);
  border-radius: 12px;
  background: #fbe9e6;
}

.coupon-chip {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.03em;
}

.coupon-remove {
  border: 0;
  padding: 6px 12px;
  border-radius: 999px;
  color: #b3452f;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  background: #fdf0ec;
  cursor: pointer;
}

/* ---- Coupon popup (5s teaser) ---- */
.coupon-popup {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(58, 34, 28, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--ease-lux);
}

.coupon-popup.show {
  opacity: 1;
  pointer-events: auto;
}

.coupon-card {
  position: relative;
  width: min(360px, 100%);
  padding: 26px 22px 22px;
  border-radius: 22px;
  text-align: center;
  color: var(--ink);
  background: linear-gradient(150deg, #ffffff, #fdf3ef 60%, #fbe9e6);
  border: 1px solid rgba(179, 39, 45, 0.35);
  box-shadow: 0 30px 70px -20px rgba(58, 34, 28, 0.5);
  transform: translateY(14px) scale(0.96);
  transition: transform 300ms var(--ease-lux);
}

.coupon-popup.show .coupon-card {
  transform: translateY(0) scale(1);
  animation: couponWiggle 5s ease-in-out 1s infinite;
}

@keyframes couponWiggle {
  0%, 84%, 100% { transform: translateY(0) scale(1); }
  88% { transform: translateY(0) rotate(-1.4deg) scale(1.01); }
  92% { transform: translateY(0) rotate(1.4deg) scale(1.01); }
  96% { transform: translateY(0) rotate(-0.7deg) scale(1); }
}

.coupon-badge {
  display: inline-block;
  margin: 0 0 10px;
  padding: 6px 14px;
  border-radius: 999px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--green), #cf4a42);
}

.coupon-card h2 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.5rem;
}

.coupon-desc {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.9rem;
}

.coupon-code-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px;
  border: 1.5px dashed rgba(179, 39, 45, 0.55);
  border-radius: 14px;
  background: #fff;
}

.coupon-code {
  font-size: 1.15rem;
  letter-spacing: 0.14em;
}

.coupon-save {
  padding: 5px 10px;
  border-radius: 999px;
  color: #8a5a00;
  font-size: 0.75rem;
  font-weight: 800;
  background: linear-gradient(135deg, #fdf3d7, #fae9b8);
}

.coupon-popup-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  font-size: 1rem;
  background: #f7ede9;
  cursor: pointer;
  transition: background 160ms, color 160ms;
}

.coupon-popup-close:hover {
  background: #f5d8d2;
  color: var(--ink);
}

.coupon-copy {
  padding: 6px 14px;
  border: 1.5px solid var(--green);
  border-radius: 999px;
  color: var(--green);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: #fff;
  cursor: pointer;
  transition: background 160ms, color 160ms;
}

.coupon-copy:hover {
  background: var(--green);
  color: #fff;
}

/* ---- Contact Us sheet (Call / WhatsApp) ---- */
.contact-sheet {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(58, 34, 28, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms var(--ease-lux);
}

.contact-sheet.show {
  opacity: 1;
  pointer-events: auto;
}

.contact-sheet-card {
  position: relative;
  width: min(340px, 100%);
  padding: 24px 20px 20px;
  border-radius: 22px;
  text-align: center;
  background: linear-gradient(150deg, #ffffff, #fdf3ef 65%, #fbe9e6);
  border: 1px solid rgba(179, 39, 45, 0.35);
  box-shadow: 0 30px 70px -20px rgba(58, 34, 28, 0.5);
  transform: translateY(14px) scale(0.96);
  transition: transform 280ms var(--ease-lux);
}

.contact-sheet.show .contact-sheet-card {
  transform: translateY(0) scale(1);
}

.contact-sheet-card h2 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 1.45rem;
}

.contact-option {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 13px 16px;
  border-radius: 16px;
  text-decoration: none;
  text-align: left;
  transition: transform 180ms var(--ease-lux), box-shadow 180ms var(--ease-lux);
}

.contact-option:hover {
  transform: translateY(-2px);
}

.contact-option.call {
  color: #fff;
  background: linear-gradient(135deg, var(--green), #cf4a42);
  box-shadow: 0 10px 24px -10px rgba(58, 34, 28, 0.55);
}

.contact-option.whatsapp {
  color: #fff;
  background: linear-gradient(135deg, #1faa53, #25d366);
  box-shadow: 0 10px 24px -10px rgba(18, 105, 55, 0.5);
}

.contact-option-icon {
  font-size: 1.3rem;
  line-height: 1;
}

.contact-option-text {
  display: grid;
  gap: 2px;
}

.contact-option-text strong {
  font-size: 0.98rem;
}

.contact-option-text small {
  opacity: 0.92;
  font-size: 0.78rem;
}

.contact-sheet-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  font-size: 1rem;
  background: #f7ede9;
  cursor: pointer;
  transition: background 160ms, color 160ms;
}

.contact-sheet-close:hover {
  background: #f5d8d2;
  color: var(--ink);
}

.contact-sheet-card.terms-sheet-card {
  width: min(560px, 100%);
  max-height: 80vh;
  overflow-y: auto;
  text-align: left;
}

.terms-sheet-card h2 {
  text-align: left;
}

.terms-sheet-body {
  display: grid;
  gap: 12px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--muted);
}

.terms-sheet-body p {
  margin: 0;
}

.delivery-line strong {
  color: var(--green);
}

@keyframes panelIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* The announcement tickers are essential store info and must always glide:
     restore them AFTER the global kill-switch so the contact ribbon,
     celebration picks, and offers slider keep moving even when the phone
     has "remove animations" enabled. */
  .contact-ribbon-track {
    animation-duration: 42s !important;
    animation-iteration-count: infinite !important;
  }

  .special-track {
    animation-duration: 34s !important;
    animation-iteration-count: infinite !important;
  }

  .offers-ribbon-track {
    animation-duration: 30s !important;
    animation-iteration-count: infinite !important;
  }

  .product-card,
  .reveal {
    transform: none;
    opacity: 1;
  }
}

@media (max-width: 900px) {
  .hero-section {
    grid-template-columns: 1fr;
  }

  .hero-copy h1 {
    max-width: 11ch;
  }

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

  .admin-sidebar {
    position: static;
    height: auto;
    padding: 16px;
    gap: 16px;
  }

  .admin-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-layout,
  .admin-layout.slim {
    grid-template-columns: 1fr;
  }

  .admin-main {
    padding: 22px 16px 32px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body {
    overflow-x: hidden;
  }

  .site-header {
    align-items: flex-start;
    padding: 12px 10px;
  }

  .brand {
    max-width: calc(100% - 110px);
    gap: 8px;
    min-width: 0;
  }

  .brand-mark {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .cart-button {
    min-height: 40px;
    padding-inline: 10px;
  }

  .banner-controls {
    right: 16px;
    bottom: 16px;
  }

  .banner-controls .icon-button {
    width: 38px;
    height: 38px;
  }

  .section-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .catalog-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .catalog-search {
    width: 100%;
    max-width: none;
    flex: 0 0 auto;
  }

  .category-thumb {
    width: 64px;
    height: 64px;
  }

  .category-head {
    padding: 12px 14px;
    gap: 12px;
  }

  .category-head-text {
    gap: 5px;
  }

  .category-delivery {
    font-size: 0.58rem;
    padding: 2px 7px;
  }

  .kg-filter {
    align-self: stretch;
    justify-content: space-between;
  }

  .kg-filter-pill {
    flex: 1;
  }

  .special-strip,
  .catalog-section,
  .site-footer,
  .contact-ribbon {
    width: min(100% - 20px, 1180px);
  }

  .contact-ribbon {
    margin-top: 14px;
  }

  .contact-ribbon-track {
    gap: 16px;
    min-height: 40px;
    padding-inline: 14px;
  }

  .special-strip {
    margin-top: 14px;
  }

  .special-track {
    gap: 10px;
    padding: 10px;
  }

  .special-card {
    grid-template-columns: 68px minmax(0, 1fr);
    flex-basis: min(360px, calc(100vw - 40px));
    min-height: 96px;
    padding: 10px;
  }

  .special-card img {
    width: 68px;
    height: 68px;
  }

  .special-card p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .catalog-section {
    padding-top: 24px;
  }

  .product-body {
    display: block;
    padding: 8px 8px 14px 0;
  }

  .product-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(136px, 42%);
    gap: 12px;
    min-height: 300px;
    border: 0;
    border-bottom: 1px dashed rgba(122, 82, 60, 0.2);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .product-card:hover {
    transform: translateY(0);
    box-shadow: none;
  }

  .product-image {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    aspect-ratio: 1 / 1;
    align-self: start;
    border-radius: 22px;
  }

  .product-body {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .product-body h3 {
    margin: 8px 0 12px;
    font-size: 1.18rem;
    line-height: 1.18;
  }

  .product-body p {
    line-height: 1.4;
  }

  .product-body .details-line {
    display: -webkit-box;
    min-height: 0;
    max-height: 4.2em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 0.88rem;
  }

  .kg-options {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .kg-options::-webkit-scrollbar {
    display: none;
  }

  .kg-option {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 6px 8px;
    border-radius: 9px;
    font-size: 0.76rem;
  }

  .kg-option strong {
    font-size: 0.76rem;
  }

  .product-action {
    position: absolute;
    top: 220px;
    right: 8px;
    z-index: 2;
    display: block;
    margin: 0;
  }

  .product-action span {
    display: none;
  }

  .product-action .primary-button {
    width: 132px;
    min-height: 54px;
    border: 2px solid rgba(179, 39, 45, 0.6);
    border-radius: 16px;
    color: var(--gold-deep);
    background: #fdf4ef;
    box-shadow: none;
    font-size: 0;
  }

  .product-action .primary-button::before {
    content: "ADD";
    font-size: 1.05rem;
    font-weight: 700;
  }

  .product-action .primary-button::after {
    content: "+";
    margin-left: 14px;
    font-size: 1.35rem;
    font-weight: 500;
  }

  .qty-stepper {
    background: #fdf4ef;
    box-shadow: 0 6px 18px -10px rgba(74, 42, 32, 0.35);
  }

  .qty-stepper button {
    width: 44px;
    min-height: 48px;
    font-size: 1.45rem;
  }

  .qty-stepper span {
    min-width: 26px;
    font-size: 1.1rem;
  }

  .site-footer {
    padding-bottom: 26px;
  }

  .preview-modal {
    align-items: end;
    padding: 8px;
  }

  .preview-panel {
    grid-template-columns: 1fr;
    width: 100%;
    max-height: calc(100dvh - 16px);
    border-radius: var(--radius) var(--radius) 0 0;
  }

  .preview-image {
    min-height: 170px;
    max-height: 30dvh;
  }

  .preview-content {
    padding: 4px 4px 8px;
  }

  .preview-content h2 {
    font-size: clamp(1.8rem, 10vw, 2.5rem);
  }

  .drawer-panel {
    width: 100%;
    padding: 16px 12px;
  }

  .cart-items {
    margin: 14px 0;
  }

  .cart-item {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 10px;
  }

  .cart-item img {
    width: 56px;
    height: 56px;
  }

  .cart-item > strong {
    grid-column: 2;
  }

  .cart-item span,
  .admin-item-details,
  .order-card {
    overflow-wrap: anywhere;
  }

  .admin-topbar {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  /* --- Admin coupon manager --- */
  .coupon-form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .coupon-manage-list {
    display: grid;
    gap: 10px;
  }

  .coupon-manage-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px dashed var(--green-soft-border, #edc0b7);
    border-radius: 14px;
    background: #ffffff;
  }

  .coupon-manage-row > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .coupon-manage-row strong {
    font-family: var(--font-display);
    letter-spacing: 0.06em;
    color: var(--ink, #3a221c);
  }

  .coupon-manage-row span {
    font-size: 0.85rem;
    color: var(--muted, #5c7263);
  }

  .coupon-manage-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
  }

  .admin-topbar .ghost-button {
    width: 100%;
  }

  .admin-card,
  .stat-card {
    padding: 14px;
  }

  .admin-item {
    align-items: start;
    padding: 9px;
  }

  .admin-item img {
    width: 58px;
    height: 58px;
  }

  .admin-item > div:nth-child(2) {
    min-width: 0;
  }

  .admin-item .item-actions {
    grid-column: 1 / -1;
    width: 100%;
  }

  .admin-item .item-actions button {
    flex: 1 1 auto;
  }

  .settings-form .danger-button {
    width: 100%;
  }

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

  .variant-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .variant-row button[data-variant-remove] {
    grid-column: 1 / -1;
    width: 100%;
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }
}

@media (max-width: 380px) {
  .brand small {
    display: none;
  }

  .admin-nav {
    gap: 6px;
  }

  .nav-link {
    padding-inline: 8px;
    font-size: 0.86rem;
  }

  .special-card {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .special-card img {
    width: 58px;
    height: 58px;
  }

  .product-body {
    gap: 10px;
  }
}

.cloud-sync-status.error {
  color: #e94b5f;
  font-weight: 600;
}

.cloud-sync-status {
  font-size: 0.8rem;
  color: var(--muted);
  min-height: 1.2em;
  margin: 6px 0 0;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.cloud-sync-status.error {
  color: #e94b5f;
}