/* Luxe Cheesecake — shared stylesheet. GENERATED by design-system/build-css.py;
   edit design-system/tokens.css or a preview page and rebuild. */

/* Reading face: Figtree, loaded by each page's Google Fonts <link> together with Viaoda Libre. */

/* Luxe Cheesecake — design tokens (canonical)
   Consolidated on 2026-09-04 from the inline <style> blocks of index.html,
   order.html and checkout.html. Where the three pages disagreed, the value
   chosen here is the one used on the transactional pages, and the alternatives
   are recorded in the comment so nothing is lost. */
:root {
  /* ---- Surfaces ---- */
  --page-bg: rgb(5, 0, 5);                 /* <body> background on every page */
  --primary-bg: #121212;                   /* text colour on filled gold buttons */
  --secondary-bg: rgba(19, 2, 20, 0.709);
  --third-bg: rgba(19, 2, 20, 0.861);      /* index + order only */
  --card-bg: rgba(167, 15, 184, 0.051);
  --surface-raised: rgba(255, 255, 255, 0.05);   /* product cards */
  --header-bg: rgb(0, 0, 0);

  /* ---- Brand ---- */
  --accent: #c59d5f;                       /* gold: the single brand colour */
  --accent-light: #e0b870;                 /* second gold defined on all three pages */
  --accent-hover: #d4ae78;                 /* footer link hover */
  --accent-border: rgba(197, 157, 95, 0.4);
  --accent-border-soft: rgba(197, 157, 95, 0.2);
  --accent-tint: rgba(197, 157, 95, 0.08);
  --accent-tint-soft: rgba(197, 157, 95, 0.03);   /* a shade darker: wide section grounds */
  --accent-tint-strong: rgba(197, 157, 95, 0.25);

  /* ---- Text ---- */
  --text-light: #ffffff;
  --text-muted: #d0c3d7;    /* order + checkout. index.html declares #ffffff, then #e5dbe8 — drift */
  --text-cream: #f5e9d7;    /* allergen chips, order-page badges */

  /* ---- Status ---- */
  --danger: #ff7575;                       /* WCAG AAA on the dark ground */
  --danger-bg: rgba(255, 117, 117, 0.12);
  --success: #22c55e;                      /* store-open dot */
  --error: #ef4444;                        /* store-closed dot */
  --warning: #ffcc80;                      /* "today" row in opening hours */

  /* ---- Layout ---- */
  --max-width: 1200px;      /* checkout.html uses 1100px — drift */
  --header-offset: 110px;
  --menu-font-size: 1.2rem;

  /* ---- Shape ---- */
  --radius-pill: 999px;
  --radius-card: 12px;
  --radius-control: 8px;
  --radius-popover: 10px;

  /* ---- Type ---- */
  --font-display: 'Viaoda Libre', serif;                     /* headings, product names, logo — not paragraphs */
  --font-ui: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;   /* buttons, controls, eyebrow labels */
  --font-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif; /* paragraphs, descriptions, details (Google Fonts) */
  --font-alt: var(--font-body);            /* older name for the same face; Claude Design output uses it */

  /* ---- Elevation ---- */
  --shadow-card-hover: 0 8px 24px rgba(197, 157, 95, 0.2);
  --shadow-header: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-popover: 0 12px 28px rgba(0, 0, 0, 0.45);
  --shadow-primary: 0 4px 12px rgba(197, 157, 95, 0.25);

  /* ---- Photography ---- */
  --photo-ground: #253746;                 /* the dark teal table in the product photography */
  --photo-ground-deep: #191f26;            /* its shadow side */
  --hero-overlay: linear-gradient(180deg, rgba(15, 5, 25, 0.40) 0%, rgba(10, 5, 20, 0.65) 55%, rgba(8, 3, 15, 0.80) 72%, rgba(5, 0, 10, 0.92) 100%);
  --hero-overlay-mobile: linear-gradient(180deg, transparent 0%, rgba(5, 0, 10, 0.5) 20%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 1) 100%);
}


/* ===== typography ===== */
/* ============================================================================
   Typography contract
   ---------------------------------------------------------------------------
   Reading text is Figtree; Viaoda Libre is reserved for titles and product
   names. Money reads in the body face. Until 2026-09-06 the shop pages set Viaoda on <body>, so any text
   without a rule of its own silently fell back to the serif face (the modal
   "Quantity:" label, the "Requires N days notice" note, the phone menu rows).
   The pages now set the body face to Figtree and the display face is applied
   here, explicitly, to the elements that should carry it.
   ========================================================================== */
h1, h2, h3,
.page-title, .section-title, .product-name, .modal-title { font-family: var(--font-display); }
/* Money is data, not a title: prices and totals read in the body face so the
   figures line up with the rest of the cart and summary text. */
.product-price, .checkout-summary__total, .cart-item-price { font-family: var(--font-body); }
/* Small print, controls and form text always read in the UI/body faces, even
   inside a title block. */
button, input, select, textarea, label, .btn { font-family: var(--font-ui); }


/* ===== buttons ===== */
.icon-inline { width: 1.2rem; height: 1.2rem; display: inline-flex; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
/* Family A — pill buttons (index.html) */
.pill .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: transparent; color: var(--accent);
  padding: 0.6rem 1.6rem; border: 1px solid var(--accent); border-radius: var(--radius-pill); font-family: var(--font-ui); font-size: 1rem; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, opacity 0.2s ease; }
.pill .btn:hover, .pill .btn:focus { background: var(--accent); color: var(--primary-bg); outline: none; transform: translateY(-1px); }
.pill .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.pill .btn-primary { background: var(--accent); color: var(--primary-bg); padding: 0.9rem 2.5rem; font-size: 1.1rem; box-shadow: var(--shadow-primary); }
.pill .btn-primary:hover { background: rgba(197,157,95,0.9); border-color: rgba(197,157,95,0.9); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(197,157,95,0.35); }
.pill .btn-secondary { color: var(--text-muted); border-color: rgba(197,157,95,0.3); }
.pill .btn-secondary:hover { background: var(--accent-tint-strong); color: var(--text-light); border-color: rgba(197,157,95,0.5); }
.pill .btn-outline { border: 1px solid var(--accent-border); }
.pill .btn-outline:hover { background: rgba(197,157,95,0.1); border-color: var(--accent); color: var(--accent); }
.btn-primary-large { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; background: linear-gradient(135deg, var(--accent), #d4a853);
  color: var(--primary-bg); font-size: 1.15rem; font-weight: 600; padding: 1rem 2rem; border-radius: var(--radius-control); border: none; text-decoration: none;
  font-family: var(--font-ui); transition: transform 0.2s, box-shadow 0.2s; cursor: pointer; }
.btn-primary-large:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(197,157,95,0.4); }
.btn-primary-large svg { width: 22px; height: 22px; stroke-width: 1.8; }
.btn-outline-subtle { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: transparent; border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.75); font-size: 0.95rem; padding: 0.75rem 1.5rem; border-radius: 6px; cursor: pointer; font-family: var(--font-ui); transition: all 0.2s; }
.btn-outline-subtle:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); color: rgba(255,255,255,0.9); }
.icon-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; background: transparent; color: var(--text-light);
  border: 1px solid var(--accent-border); padding: 0.45rem 0.85rem; border-radius: var(--radius-pill); cursor: pointer; font-family: var(--font-ui); transition: color 0.3s, border-color 0.3s; }
.icon-button:hover { color: var(--accent); border-color: var(--accent); }
.icon-button svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* Family B — block buttons (order.html + checkout.html) */
.block { max-width: 420px; display: flex; flex-direction: column; gap: 0.9rem; }
.block .btn { display: inline-flex; justify-content: center; align-items: center; gap: 0.6rem; padding: 0.9rem 1.5rem; border-radius: var(--radius-control);
  background: var(--accent); color: var(--primary-bg); font-family: var(--font-ui); font-weight: 600; border: none; cursor: pointer; transition: opacity 0.3s; width: 100%; }
.block .btn:hover { opacity: 0.85; }
.block .btn-secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent-border); }
.block .btn-secondary:hover { color: var(--text-light); background: var(--accent-tint-strong); opacity: 1; }
.block .btn-disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; }
.form-footnote { font-family: var(--font-ui); text-align: center; font-size: 0.85rem; color: rgba(255,255,255,0.7); margin: -0.3rem 0 0; }


/* ===== product-card ===== */
.product-card { background: var(--surface-raised); border: 1px solid var(--accent-border-soft); border-radius: var(--radius-card);
  overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; cursor: pointer; display: flex; flex-direction: column; }
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); border-color: var(--accent); }
.product-card.unavailable { opacity: 0.6; cursor: not-allowed; }
.product-card.unavailable:hover { transform: none; box-shadow: none; }
.product-card .img { width: 100%; aspect-ratio: 1 / 1; background:
  radial-gradient(circle at 30% 30%, rgba(197,157,95,0.35), transparent 55%),
  radial-gradient(circle at 70% 70%, rgba(120,40,140,0.45), transparent 60%), #1a0f1f; }
.product-info { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.product-info h3 { font-size: 1.3rem; color: var(--accent); margin: 0 0 0.5rem; font-weight: 600; }
.product-info p { font-family: var(--font-body); font-size: 0.92rem; line-height: 1.6; color: var(--text-muted); margin: 0 0 0.5rem; flex: 1; }
.dietary-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.35rem 0 0.15rem; }
.dietary-badge { color: #f5f5f5; padding: 0.25rem; border-radius: var(--radius-pill); font-size: 0.8rem; display: inline-flex; align-items: center; gap: 0.35rem; }
.dietary-icon { display: inline-flex; align-items: center; justify-content: center; width: 23px; height: 23px; font-size: 1rem; line-height: 1; }
.product-allergens { font-size: 0.75rem; color: var(--text-cream); margin-top: 0.3rem; padding: 0.4rem 0.65rem; border-radius: var(--radius-control);
  background: var(--accent-tint); border: 1px solid var(--accent-border); font-family: var(--font-alt); }
.product-price { font-size: 1.5rem; color: var(--accent); font-weight: bold; }
.product-status { padding: 0.525rem 1rem; font-size: 0.9rem; font-weight: 600; margin-top: auto; display: flex; align-items: center;
  justify-content: space-between; gap: 0.8rem; min-height: 53px; font-family: var(--font-ui); }
.product-status .stock-count { font-weight: 700; color: #fff; }
.product-status.status-unavailable { justify-content: center; color: var(--danger); background: var(--danger-bg); }
.btn-add { font-family: var(--font-ui); display: inline-flex; align-items: center; gap: 0.4rem; background: var(--accent); color: var(--primary-bg);
  border: none; border-radius: var(--radius-control); padding: 0.55rem 1rem; font-weight: 600; cursor: pointer; }


/* ===== navbar ===== */
header { position: relative; width: 100%; background: var(--header-bg); border-bottom: 1px solid var(--accent-border-soft); box-shadow: var(--shadow-header); }
.navbar { max-width: var(--max-width); margin: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 1rem 0.5rem; }
.logo-container { display: flex; align-items: center; justify-self: start; }
.logo-container img { height: 60px; width: auto; display: block; }
nav ul { list-style: none; display: flex; gap: 1.5rem; margin: 0; padding: 0; justify-self: center; }
nav a { color: var(--text-light); text-decoration: none; font-size: var(--menu-font-size); transition: color 0.3s; }
nav a:hover { color: var(--accent); }
.nav-icons { display: flex; align-items: center; justify-self: end; gap: 1.5rem; }
.nav-icons svg { width: 20px; height: 20px; color: var(--text-light); fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; transition: color 0.3s; cursor: pointer; }
.nav-icons svg:hover { color: var(--accent); }
.icon-link { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
/* Language: a pill like the opening-hours pill next to it — globe, code, chevron.
   The native <select> stays (keyboard, screen readers, iOS picker); only its skin changes. */
.language-switcher { position: relative; display: inline-flex; align-items: center; color: var(--text-light); }
.language-switcher::before, .language-switcher::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none;
  background-color: currentColor; -webkit-mask: var(--ls-icon) center / contain no-repeat; mask: var(--ls-icon) center / contain no-repeat; }
.language-switcher::before { --ls-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E"); left: 0.7rem; width: 14px; height: 14px; color: var(--accent); }
.language-switcher::after { --ls-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); right: 0.6rem; width: 11px; height: 11px; color: var(--text-muted); transition: color 0.2s ease; }
.language-switcher select { appearance: none; -webkit-appearance: none; cursor: pointer; margin: 0;
  height: 32px; padding: 0 1.55rem 0 1.95rem; line-height: 1; font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em;
  color: var(--text-light); background: var(--accent-tint); border: 1px solid var(--accent-border-soft); border-radius: var(--radius-pill);
  transition: border-color 0.2s ease, background-color 0.2s ease; }
.language-switcher select:hover { background: var(--accent-tint-strong); border-color: var(--accent); }
.language-switcher:hover::after { color: var(--text-light); }
.language-switcher select:focus { outline: none; }
.language-switcher select:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(197,157,95,0.25); }
.language-switcher select option { background: #141414; color: var(--text-light); font-family: var(--font-ui); letter-spacing: 0; }
.opening-hours-panel { position: relative; }
.opening-hours-panel__toggle { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.32rem 0.65rem; border-radius: var(--radius-pill); font-family: var(--font-ui);
  font-size: 0.8rem; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap;
  background: linear-gradient(135deg, rgba(80,20,20,0.55) 0%, rgba(60,15,15,0.75) 100%); border: 1px solid rgba(239,68,68,0.45); color: rgba(255,220,220,0.95); }
.store-open .opening-hours-panel__toggle { background: linear-gradient(135deg, rgba(15,62,15,0.55) 0%, rgba(15,60,15,0.8) 100%); border-color: rgba(34,197,94,0.55); color: rgba(220,255,220,0.95); }
.status-indicator { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.status-indicator.status-closed { background: var(--error); box-shadow: 0 0 8px rgba(239,68,68,0.6); }
.status-indicator.status-open { background: var(--success); box-shadow: 0 0 8px rgba(34,197,94,0.6); }
.chevron { width: 12px !important; height: 12px !important; stroke-width: 2.5 !important; }
.opening-hours-panel__content { position: absolute; top: calc(100% + 0.5rem); right: 0; min-width: 200px; padding: 0.5rem; border-radius: var(--radius-popover); box-shadow: var(--shadow-popover);
  background: linear-gradient(135deg, rgba(80,20,20,0.98) 0%, rgba(60,15,15,0.98) 100%); border: 1px solid rgba(180,100,100,0.35); }
.opening-hours-list { list-style: none; margin: 0; padding: 0; font-family: var(--font-ui); }
.opening-hours-list li { display: flex; justify-content: space-between; padding: 0.2rem 0; font-size: 0.65rem; color: rgba(255,255,255,0.8); border-bottom: 1px solid rgba(255,255,255,0.05); }
.opening-hours-list li:last-child { border-bottom: none; }
.opening-hours-list li.today { color: var(--warning); font-weight: 600; }
.opening-hours-list li.closed-day { color: rgba(255,255,255,0.4); }
.opening-hours-list .day-hours { font-size: 0.6rem; }


/* ===== announcement ===== */
/* The bar is the first child of <header>, so the header's measured height includes it
   (index.html derives --header-offset from header.offsetHeight). Rendered by
   js/campaign-bar.js from campaigns_public.php: it slides down once, then crossfades
   between every live campaign that has a message, and shows a countdown while a
   campaign is inside its last week. Variants were compared in
   components/campaign-announcement-variants.html; 1 + 2 were chosen. */
.announcement-bar {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  padding: 0.55rem 3.25rem; min-height: 40px; box-sizing: border-box;
  background: linear-gradient(90deg, rgba(197, 157, 95, 0.22), rgba(197, 157, 95, 0.10) 50%, rgba(197, 157, 95, 0.22));
  border-bottom: 1px solid var(--accent-border-soft);
  color: var(--text-light); font-family: var(--font-ui); font-size: 0.9rem; line-height: 1.35; text-align: center;
}
.announcement-bar__text { margin: 0; }
.announcement-bar__link { color: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
.announcement-bar__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.announcement-bar__close {
  position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1px solid var(--accent-border-soft);
  background: transparent; color: var(--text-muted); font-size: 1rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: color 0.2s ease, border-color 0.2s ease; z-index: 2;
}
.announcement-bar__close:hover { color: var(--accent); border-color: var(--accent); }
/* entrance: one slide-down on first paint, never repeated */
@keyframes lcBarDrop { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.announcement-bar--enter { animation: lcBarDrop 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
/* a wide, faint highlight crossing the bar every nine seconds */
@keyframes lcBarSweep { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(220%); } }
.announcement-bar__sheen {
  position: absolute; inset: 0 auto 0 0; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.13), transparent);
  animation: lcBarSweep 9s ease-in-out infinite;
}
/* rotation: one campaign at a time, crossfaded */
.announcement-bar__rotator { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.75rem; min-height: 1.35em; flex-wrap: wrap; }
.announcement-bar__slide { display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap;
  opacity: 0; transition: opacity 0.45s ease; position: absolute; inset: 0; pointer-events: none; }
.announcement-bar__slide.is-active { opacity: 1; position: relative; inset: auto; pointer-events: auto; }
/* how many campaigns are running */
.announcement-bar__dots { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); display: flex; gap: 5px; }
.announcement-bar__dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); transition: background 0.3s ease; }
.announcement-bar__dot.is-on { background: var(--accent); }
/* countdown, shown only inside the campaign's last week */
.announcement-bar__count { display: inline-flex; align-items: baseline; gap: 0.3rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.announcement-bar__count b { font-weight: 700; color: var(--accent); font-size: 1rem; }
.announcement-bar__count small { font-size: 0.72rem; color: var(--text-muted); }
@keyframes lcBarBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.announcement-bar__sep { opacity: 0.35; margin: 0 0.1rem; animation: lcBarBlink 1s steps(1, end) infinite; }
/* the same campaign, as a pill inside the homepage hero (index.html only) */
.hero-campaign-pill {
  display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 1.1rem;
  padding: 0.35rem 1rem; border-radius: var(--radius-pill);
  background: var(--accent-tint-strong); border: 1px solid var(--accent);
  font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600; color: var(--text-light);
  text-decoration: none; text-align: left;
  transition: background 0.25s ease, color 0.25s ease;
}
.hero-campaign-pill b { color: var(--accent); transition: color 0.25s ease; }
.hero-campaign-pill:hover { background: var(--accent); color: var(--primary-bg); }
.hero-campaign-pill:hover b { color: var(--primary-bg); }
.hero-campaign-pill__text { transition: opacity 0.35s ease; }
.hero-campaign-pill__text.is-fading { opacity: 0; }
@keyframes lcPillRise { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.hero-campaign-pill--enter { animation: lcPillRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both; }
@media (max-width: 600px) {
  .announcement-bar { gap: 0.1rem 0.6rem; padding: 0.5rem 2.75rem 0.5rem 1.6rem; font-size: 0.82rem; }
  .announcement-bar__dots { left: 0.55rem; }
  .hero-campaign-pill { font-size: 0.8rem; padding: 0.3rem 0.85rem; }
}
/* Anyone who asks for less motion gets the same information, still. */
@media (prefers-reduced-motion: reduce) {
  .announcement-bar--enter, .announcement-bar__sheen, .announcement-bar__sep, .hero-campaign-pill--enter {
    animation: none !important; opacity: 1; transform: none;
  }
  .announcement-bar__sheen { display: none; }
  .announcement-bar__slide, .hero-campaign-pill__text { transition: none; }
}
/* Promo pricing on cards and in the selection modal (data from get_products.php `promo`) */
.promo-was { text-decoration: line-through; color: var(--text-muted); font-weight: 400; font-size: 0.8em; margin-right: 0.4em; }
.product-promo-badge {
  display: inline-flex; align-items: center; padding: 0.15rem 0.6rem; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--primary-bg); font-family: var(--font-ui); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
}


/* ===== footer ===== */
footer { font-family: var(--font-body); font-size: 0.95rem; line-height: 1.6; text-align: center; padding: 2rem 1rem; color: var(--text-light); border-top: 1px solid var(--accent-border-soft); }
footer p { margin: 0; }
footer .vat { font-size: 0.85rem; letter-spacing: 0.04em; color: var(--text-muted); margin-top: 0.35rem; }
footer a { color: var(--accent); text-decoration: none; margin: 0 0.8rem; transition: color 0.3s; }
footer a:hover { color: var(--accent-hover); text-decoration: underline; }
.footer-links { font-family: var(--font-ui); font-weight: 500; margin-top: 0.8rem; font-size: 0.95rem; }
.footer-links .sep { color: var(--text-muted); }


/* ===== form-fields ===== */
.form { max-width: 720px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; width: 100%; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: 0.95rem; letter-spacing: 0.04rem; color: var(--text-muted); margin-bottom: 0.3rem; text-transform: uppercase; }
.field input, .field select, .field textarea { width: 100%; background: rgba(0,0,0,0.55); border: 1px solid rgba(197,157,95,0.35); color: var(--text-light);
  font-size: 1rem; padding: 0.65rem 0.75rem; border-radius: var(--radius-control); appearance: none; font-family: var(--font-ui); transition: border-color 0.2s, box-shadow 0.2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(197,157,95,0.2); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); opacity: 0.8; }
.field input[type="date"] { appearance: auto; color-scheme: dark; }
.field textarea { min-height: 110px; resize: vertical; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23c59d5f' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 12px; padding-right: 2.2rem; cursor: pointer; }
.phone-input-wrapper { display: flex; align-items: center; gap: 0.75rem; }
.phone-input-wrapper select { min-width: 5.5rem; max-width: 8rem; flex: 0 0 auto; }
.phone-input-wrapper input { flex: 1; }
.input-hint { display: block; font-size: 0.85rem; color: var(--text-muted); margin-top: 0.4rem; font-family: var(--font-ui); }
.field.is-invalid input { border-color: var(--danger); box-shadow: 0 0 0 2px var(--danger-bg); }
.field.is-invalid .input-hint { color: var(--danger); }
.check { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1rem; color: var(--text-light); }
.check input { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; }
.contact-form { max-width: 600px; display: flex; flex-direction: column; gap: 1rem; }
.contact-form input, .contact-form textarea { background-color: var(--secondary-bg); border: 1px solid rgba(197,157,95,0.3); padding: 0.75rem; border-radius: 4px;
  color: var(--text-light); font-size: 1rem; font-family: var(--font-ui); }
.contact-form textarea { resize: vertical; min-height: 120px; }
.coupon { display: flex; gap: 0.6rem; max-width: 420px; }
.coupon input { flex: 1; background: rgba(0,0,0,0.55); border: 1px solid rgba(197,157,95,0.35); color: var(--text-light); padding: 0.65rem 0.75rem; border-radius: var(--radius-control); font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.06em; }
.coupon button { font-family: var(--font-ui); font-weight: 600; background: transparent; color: var(--accent); border: 1px solid var(--accent-border); border-radius: var(--radius-control); padding: 0.65rem 1.4rem; cursor: pointer; }


/* ===== modal ===== */
.dialog { background: rgba(18,18,18,0.95); border: 1px solid var(--accent-border); border-radius: var(--radius-popover); max-width: 420px; width: 100%; padding: 2rem 1.75rem; text-align: center; box-shadow: 0 18px 45px rgba(0,0,0,0.45); }
.dialog h3 { color: var(--accent); font-size: 1.6rem; margin: 0 0 0.75rem; }
.dialog p { color: var(--text-muted); font-size: 1.05rem; margin: 0 0 1.5rem; }
.dialog .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: transparent; color: var(--accent); padding: 0.6rem 1.6rem;
  border: 1px solid var(--accent); border-radius: var(--radius-pill); font-family: var(--font-ui); font-size: 1rem; font-weight: 600; cursor: pointer; }
.dialog.error { border-color: #ff8585; }
.dialog.error h3 { color: #ff8585; }
.dialog.error .btn { border-color: #ff8585; color: #ff8585; }
.popup { background: rgba(12,0,12,0.92); border: 1px solid rgba(197,157,95,0.6); border-radius: var(--radius-card); padding: 1.5rem; width: min(520px, 92vw); color: var(--text-light); position: relative; }
.popup h4 { margin: 0 0 0.75rem; color: var(--accent); font-size: 1.1rem; }
.popup .body { display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.95rem; color: var(--text-muted); }
.close-btn { position: absolute; top: 0.6rem; right: 0.6rem; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--accent-border); background: transparent; color: var(--text-muted); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.close-btn:hover { background: rgba(197,157,95,0.35); color: var(--accent); }
.product-modal { background: #0000007c; border: 1px solid #363636; max-width: 720px; width: 100%; border-radius: var(--radius-popover); padding: 2rem; position: relative; box-shadow: 0 8px 30px rgba(0,0,0,0.5); display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.product-modal .img { aspect-ratio: 1; border-radius: var(--radius-control); background: radial-gradient(circle at 30% 30%, rgba(197,157,95,0.35), transparent 55%), radial-gradient(circle at 70% 70%, rgba(120,40,140,0.45), transparent 60%), #1a0f1f; }
.product-modal h3 { color: var(--accent); margin: 0 0 0.5rem; }
.product-modal p { color: var(--text-muted); margin: 0 0 0.75rem; }
.modal-more-info { align-self: flex-start; background: transparent; color: var(--accent); border: 1px solid rgba(197,157,95,0.6); border-radius: var(--radius-pill); padding: 0.5rem 1.25rem; font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600; cursor: pointer; }
/* ============================================================================
   Shared dialog system — one look for every overlay on index / order / checkout.
   Loaded after each page's inline <style>, so equal-specificity rules here win.
   Containers: .modal (product / selection / cart), .modal-info-popup (info popovers),
   .partner-modal, .map-modal, .contact-confirmation (alerts, confirms, prompts),
   .search-overlay. Surfaces: the *-content / *__dialog boxes inside them.
   ========================================================================== */
.modal, .modal-info-popup, .partner-modal, .map-modal, .contact-confirmation, .search-overlay { background: rgba(5, 0, 5, 0.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal, .partner-modal, .map-modal, .contact-confirmation { z-index: 2000; }
.modal-info-popup { z-index: 2100; }
.search-overlay { z-index: 2200; }
.notification-container { z-index: 3000; }
.modal-content, .modal-info-popup__content, .partner-modal-content, .map-modal-content, .contact-confirmation__dialog {
  background: rgba(18, 18, 18, 0.96); border: 1px solid var(--accent-border-soft); border-radius: var(--radius-card);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45); color: var(--text-light); }
.contact-confirmation__dialog { max-width: 420px; padding: 1.75rem; }
.modal-content, .modal-info-popup__content { max-width: 560px; padding: 1.75rem; }
.partner-modal-content { max-width: 480px; }
#productModal .modal-content, .map-modal-content { max-width: 900px; }
/* Titles: display face; reading text: Figtree; controls: UI face */
.modal-title, .modal-content h2, .modal-content h3, .modal-info h3, .modal-info-popup__title, .modal-info-popup__content h4,
.partner-modal-header h3, .map-modal-header h3, .contact-confirmation__dialog h3 {
  font-family: var(--font-display); font-weight: 400; color: var(--accent); font-size: 1.6rem; line-height: 1.2; margin: 0 0 0.75rem; }
.modal-info-popup__title, .modal-info-popup__content h4 { font-size: 1.25rem; }
.modal-content p, .modal-info p, .modal-subtitle, .modal-meta, .modal-info-popup__body, .partner-modal-body, .partner-modal-subtitle,
.partner-modal-footer p, .map-modal-body, .contact-confirmation__dialog p, .order-status-modal__message, .order-status-modal__hint,
.app-dialog__prompt label, .modal-carousel__indicator { font-family: var(--font-body); }
.contact-confirmation__dialog p { color: var(--text-muted); font-size: 1.02rem; }
.modal-content input, .modal-content select, .modal-content textarea, .contact-confirmation__dialog input, .contact-confirmation__dialog select,
.contact-confirmation__dialog textarea, .map-modal input, .map-modal select { font-family: var(--font-ui); }
.app-dialog__prompt textarea, .modal-select { border-radius: var(--radius-control); }
/* Labels and small print inside dialogs read in the body face — the pages set
   Viaoda on <body>, so anything without its own rule would fall back to it. */
.modal-content label, .modal-content .quantity-group, .modal-content .quantity-group span,
.contact-confirmation__dialog label, .map-modal label, .partner-modal label { font-family: var(--font-body); }
/* One close button, always the same */
.close-btn, .close-btn--positioned, .close-btn--positioned-tight, .close-btn--circle, .close-btn--fixed, .close-btn--small, .close-btn--muted {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--accent-border-soft); background: transparent; color: var(--text-muted);
  font-size: 1.25rem; line-height: 1; padding: 0; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.close-btn:hover, .close-btn:focus-visible { background: var(--accent-tint-strong); color: var(--accent); }
.map-modal-header .close-btn, .partner-modal-header .close-btn { position: static; flex-shrink: 0; }
.close-btn--notification, .notification .close-btn { position: static; width: 24px; height: 24px; border: 0; font-size: 1.1rem; }
/* Buttons inside dialogs follow the page CTAs: pill, UI face, 44px tall */
.modal-content .btn, .contact-confirmation__dialog .btn, .map-modal-footer .btn, .partner-modal .btn, .modal-order-btn, .modal-more-info {
  font-family: var(--font-ui); border-radius: var(--radius-pill); min-height: 44px; padding: 0 1.4rem; font-weight: 600; font-size: 0.95rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.modal-more-info { min-height: 36px; font-size: 0.8rem; padding: 0 1rem; }
.modal-order-btn, .contact-confirmation__close { background: var(--accent); color: var(--primary-bg); border: 1px solid var(--accent); }
.modal-order-btn:hover, .contact-confirmation__close:hover { background: var(--accent-light); color: var(--primary-bg); }
.contact-confirmation__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.25rem; }
.contact-confirmation__actions .btn { flex: 1 1 140px; width: auto; max-width: 100%; }
.cart-item-actions [data-role="cart-remove"] { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--accent-border-soft);
  background: transparent; color: var(--text-muted); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.cart-item-actions [data-role="cart-remove"]:hover { color: var(--danger); border-color: rgba(255, 117, 117, 0.5); }
/* Phones: tall dialogs become bottom sheets with the primary action pinned */
@media (max-width: 600px) {
  /* On iOS a position:fixed overlay is laid out against the viewport WITHOUT the
     browser toolbars, so `inset: 0` puts its bottom edge behind Safari's/Brave's bar
     and the sheet hangs off-screen. Anchor the overlay to the top and give it the
     height of the *visible* viewport: --vvh (set from visualViewport by the page),
     falling back to dvh and then vh on older browsers. */
  .modal, .contact-confirmation, .partner-modal, .map-modal {
    align-items: flex-end; padding: 0;
    top: 0; bottom: auto; height: 100vh; height: 100dvh; height: var(--vvh, 100dvh); }
  .modal-content, .contact-confirmation__dialog, .partner-modal-content, .map-modal-content {
    max-width: none; width: 100%; border-radius: 16px 16px 0 0; border-bottom: 0; overflow-y: auto;
    max-height: 92%; }
  /* A tall portrait photo must not decide the sheet height. */
  .modal-carousel__slide img, .modal-gallery img {
    max-height: 40vh; max-height: 40dvh; max-height: calc(var(--vvh, 100dvh) * 0.4); width: auto; object-fit: contain; }
  .modal-content, .contact-confirmation__dialog { padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); }
  .map-modal-content, .partner-modal-content { padding: 0 0 env(safe-area-inset-bottom); }
  #selectionModal .actions-row { position: sticky; bottom: calc(-1.25rem - env(safe-area-inset-bottom)); margin: 1.25rem -1.25rem calc(-1.25rem - env(safe-area-inset-bottom));
    padding: 0.9rem 1.25rem calc(0.9rem + env(safe-area-inset-bottom)); background: rgba(18, 18, 18, 0.98); border-top: 1px solid var(--accent-border-soft);
    grid-template-columns: auto 1fr; align-items: center; }
  .contact-confirmation__actions .btn { flex: 1 1 100%; }
}


/* ===== notification ===== */
.notification { background: rgba(18,18,18,0.98); border: 1px solid var(--accent-border); border-radius: var(--radius-card); padding: 1rem 1.25rem; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  display: flex; align-items: flex-start; gap: 0.75rem; font-family: var(--font-ui); }
.notification-icon { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-top: 0.1rem; color: var(--accent); }
.notification-content { flex: 1; color: var(--text-light); font-size: 0.95rem; line-height: 1.5; }
.notification.success { border-color: rgba(34,197,94,0.45); }
.notification.success .notification-icon { color: var(--success); }
.notification.warning { border-color: rgba(255,204,128,0.45); }
.notification.warning .notification-icon { color: var(--warning); }
.notification.error   { border-color: rgba(255,117,117,0.45); }
.notification.error .notification-icon { color: var(--danger); }
.notification.info    { border-color: var(--accent-border); }
.notification.info .notification-icon { color: var(--accent-light); }


/* ===== hero ===== */
.hero { position: relative; min-height: 640px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 1rem; }
.hero-content { position: relative; z-index: 1; max-width: 800px; }
.hero h1 { font-size: 3rem; margin: 0 0 1rem; color: var(--accent); font-weight: 400; }
.hero p { font-size: 1.5rem; color: var(--text-light); margin: 0 0 2rem; }


/* ===== site bridge: the pages' own button and control classes take the UI face ===== */
.btn, .btn-primary, .btn-secondary, .btn-outline, .btn-outline-subtle, .btn-primary-large, .icon-button,
.tab-btn, .filter-toggle, .add-to-cart-btn, .btn-add, .modal-more-info, .slider-nav-btn, .whatsapp-btn,
button, input, select, textarea { font-family: var(--font-ui); }
