/*!****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/components/personal/personal-layer.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************/
/* Returning-customer personal layer (phase 3) — ONE pattern, FOUR skins.
 *
 * The markup is skin-agnostic; each `personal-skin-{ag|ql|pd|pm}` root maps that
 * template's palette variables onto a common `--pl-*` set the blocks consume. So
 * the personal layer always wears the active template's colours without
 * duplicating the block CSS four times. Layout/spacing are shared; only the
 * palette differs per skin. */

/* ---- Per-skin palette mapping (template vars → shared --pl-* tokens) ------- */
.personal-skin-ag {
  --pl-bg: var(--ag-bg-alt, #f6f7f9);
  --pl-surface: var(--ag-surface, #fff);
  --pl-ink: var(--ag-ink, #14181f);
  --pl-ink-2: var(--ag-ink-2, #5a6472);
  --pl-line: var(--ag-line, #e6e9ee);
  --pl-brand: var(--ag-brand, #00b3a4);
  --pl-brand-ink: var(--ag-brand-ink, #fff);
  --pl-brand-soft: var(--ag-brand-soft, #e3f7f5);
  --pl-radius: 16px;
}
.personal-skin-ql {
  --pl-bg: var(--ql-bg-alt, #f4f5fb);
  --pl-surface: var(--ql-surface, #fff);
  --pl-ink: var(--ql-ink, #161a2b);
  --pl-ink-2: var(--ql-ink-2, #5b6178);
  --pl-line: var(--ql-line, #e4e6f0);
  --pl-brand: var(--ql-brand, #3b48d6);
  --pl-brand-ink: var(--ql-brand-ink, #fff);
  --pl-brand-soft: var(--ql-brand-soft, #e7e9fb);
  --pl-radius: 12px;
}
.personal-skin-pd {
  --pl-bg: var(--pd-surface-2, #16140f);
  --pl-surface: var(--pd-surface, #1d1a13);
  --pl-ink: var(--pd-ink, #f0ead9);
  --pl-ink-2: var(--pd-ink-2, #b7ad95);
  --pl-line: var(--pd-line, #353026);
  --pl-brand: var(--pd-gold, #c9a24b);
  --pl-brand-ink: var(--pd-gold-ink, #1a160e);
  --pl-brand-soft: color-mix(in srgb, var(--pd-gold, #c9a24b) 16%, transparent);
  --pl-radius: 10px;
}
.personal-skin-pm {
  --pl-bg: var(--pm-bg-alt, #fff8e6);
  --pl-surface: var(--pm-surface, #fff);
  --pl-ink: var(--pm-ink, #1c1a14);
  --pl-ink-2: var(--pm-ink-2, #6a6452);
  --pl-line: var(--pm-line, #efe6cf);
  --pl-brand: var(--pm-yellow, #ffcc00);
  --pl-brand-ink: var(--pm-yellow-ink, #1c1a14);
  --pl-brand-soft: color-mix(in srgb, var(--pm-yellow, #ffcc00) 22%, transparent);
  --pl-radius: 14px;
}

/* ---- Layer frame ---------------------------------------------------------- */
.personal-layer {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: var(--ag-container, var(--ql-container, var(--pm-container, 1180px)));
  margin: 0 auto;
  padding: 16px clamp(12px, 4vw, 28px) 6px;
  box-sizing: border-box;
}

/* ---- §4 Greeting ---------------------------------------------------------- */
.pl-greeting {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--pl-bg);
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius);
  color: var(--pl-ink);
}
.pl-greeting.is-birthday {
  background: var(--pl-brand-soft);
  border-color: var(--pl-brand);
}
.pl-greeting__avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--pl-brand);
  color: var(--pl-brand-ink);
  font-weight: 700;
  font-size: 15px;
}
.pl-greeting__text {
  flex: 1 1 auto;
  font-size: 15px;
  min-width: 0;
}
.pl-greeting__hi b { font-weight: 700; }
.pl-greeting__bonus {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--pl-brand-soft);
  color: var(--pl-brand);
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}
.personal-skin-pm .pl-greeting__bonus,
.personal-skin-pd .pl-greeting__bonus { color: var(--pl-ink); }

/* ---- §6 Reorder ----------------------------------------------------------- */
.pl-reorder {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--pl-surface);
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius);
  color: var(--pl-ink);
}
.pl-reorder__info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pl-reorder__title { font-weight: 700; font-size: 15px; }
.pl-reorder__items {
  font-size: 13px;
  color: var(--pl-ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pl-reorder__note { font-size: 12px; color: var(--pl-brand); }
.pl-reorder__cta {
  flex: 0 0 auto;
  border: none;
  cursor: pointer;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--pl-brand);
  color: var(--pl-brand-ink);
  font-weight: 700;
  font-size: 14px;
}
.personal-skin-pd .pl-reorder__cta {
  background: transparent;
  color: var(--pl-brand);
  border: 1px solid var(--pl-brand);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- §5 Your usual rail --------------------------------------------------- */
.pl-usual__title {
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--pl-ink);
}
.personal-skin-pd .pl-usual__title { font-family: Georgia, "Times New Roman", serif; }
.pl-usual__sub { margin: 0 0 8px; font-size: 12px; color: var(--pl-ink-2); }
.pl-usual__rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
.pl-usual__rail::-webkit-scrollbar { height: 6px; }
.pl-usual__rail::-webkit-scrollbar-thumb {
  background: var(--pl-line);
  border-radius: 999px;
}
.pl-card {
  flex: 0 0 auto;
  width: 200px;
  scroll-snap-align: start;
  background: var(--pl-surface);
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pl-card__media {
  border: none;
  padding: 0;
  cursor: pointer;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--pl-bg);
  display: block;
  position: relative;
}
.pl-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-card__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 40px;
  font-weight: 700;
  color: var(--pl-ink-2);
}
.pl-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
  flex: 1 1 auto;
}
.pl-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--pl-ink);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pl-card__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pl-card__price { font-weight: 700; font-size: 14px; color: var(--pl-ink); }
.pl-card__add {
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--pl-brand);
  color: var(--pl-brand-ink);
  font-size: 20px;
  line-height: 1;
  display: grid;
  place-items: center;
}

/* ---- §7 Personal coupons -------------------------------------------------- */
.pl-coupons__title {
  margin: 4px 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--pl-ink);
}
.personal-skin-pd .pl-coupons__title { font-family: Georgia, "Times New Roman", serif; }
.pl-coupons__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}
.pl-coupon {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 14px 20px;
  background: var(--pl-surface);
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius);
  overflow: hidden;
}
.pl-coupon::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--pl-brand);
}
.pl-coupon__discount {
  font-size: 22px;
  font-weight: 800;
  color: var(--pl-brand);
}
.personal-skin-pd .pl-coupon__discount { color: var(--pl-brand); font-weight: 700; }
.pl-coupon__name { font-size: 14px; font-weight: 600; color: var(--pl-ink); }
.pl-coupon__meta { font-size: 12px; color: var(--pl-ink-2); }
.pl-coupon__code {
  font-weight: 700;
  color: var(--pl-ink);
  background: var(--pl-bg);
  padding: 1px 6px;
  border-radius: 6px;
}
.pl-coupon__cta {
  margin-top: 6px;
  align-self: flex-start;
  border: 1px solid var(--pl-brand);
  cursor: pointer;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--pl-brand);
  color: var(--pl-brand-ink);
  font-weight: 700;
  font-size: 13px;
}
.pl-coupon__cta:disabled {
  cursor: default;
  background: transparent;
  color: var(--pl-ink-2);
  border-color: var(--pl-line);
}

/* ---- Mobile --------------------------------------------------------------- */
@media (max-width: 760px) {
  .personal-layer { gap: 12px; padding: 12px 14px 4px; }
  .pl-card { width: 150px; }
  .pl-coupons__row { grid-template-columns: 1fr; }
  .pl-reorder { flex-wrap: wrap; }
  .pl-reorder__cta { width: 100%; }
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/templates/promo-market/promo-market.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************/
/* ===========================================================================
 * Promo-Market (vitrine D) — self-contained visual template (la.ua style).
 *
 * ISOLATION: this file is imported ONLY from PromoMarket.tsx. Every class is
 * prefixed `pm-`. The palette lives in LOCAL custom properties on `.pm-root`
 * (NOT global :root / NOT the admin themeizer), so the dark festa theme can
 * never bleed into this template. No `pm-` class appears in styles.css.
 * Spec: docs/ux/promo-market-visual-template.md
 * ======================================================================== */

.pm-root {
  /* §1 fixed la.ua palette — never read from --bg/--surface/--ink/--brand. */
  --pm-bg: #ffffff;
  --pm-bg-alt: #f7f7f5;
  --pm-surface: #ffffff;
  --pm-ink: #1a1a1a;
  --pm-ink-2: #6b6b6b;
  --pm-line: #ececec;
  --pm-yellow: #ffd60a;
  --pm-yellow-ink: #1a1a1a;
  --pm-yellow-press: #f2c200;
  --pm-red: #e2333c;
  --pm-red-ink: #ffffff;
  --pm-green: #1fa463;
  --pm-shadow-card: 0 2px 10px rgba(20, 20, 20, 0.06);
  --pm-shadow-hover: 0 8px 24px rgba(20, 20, 20, 0.12);
  --pm-shadow-float: 0 12px 32px rgba(20, 20, 20, 0.16);

  --pm-container: 1200px;
  --pm-pad: 24px;

  /* Hard reset of inherited theme colours so the page is genuinely light. */
  background: var(--pm-bg);
  color: var(--pm-ink);
  min-height: 100vh;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.pm-root *,
.pm-root *::before,
.pm-root *::after {
  box-sizing: border-box;
}

.pm-root button {
  font-family: inherit;
  cursor: pointer;
}

.pm-container {
  max-width: var(--pm-container);
  margin: 0 auto;
  padding: 0 var(--pm-pad);
}

/* ===== §8 Header ========================================================= */
.pm-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--pm-bg);
  border-bottom: 1px solid var(--pm-line);
}
.pm-header.is-stuck {
  box-shadow: var(--pm-shadow-card);
}
.pm-header__inner {
  max-width: var(--pm-container);
  margin: 0 auto;
  padding: 0 var(--pm-pad);
  height: 72px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.pm-header__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.pm-header__logo img {
  height: 40px;
  width: auto;
  display: block;
}
.pm-header__brand {
  font-size: 20px;
  font-weight: 800;
  color: var(--pm-ink);
  white-space: nowrap;
}
.pm-city {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--pm-ink);
  white-space: nowrap;
}
.pm-header__search {
  flex: 1 1 auto;
  min-width: 0;
}
.pm-header__right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.pm-speed {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--pm-green);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.pm-cart-btn {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--pm-line);
  background: var(--pm-surface);
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.pm-cart-btn:hover {
  background: var(--pm-bg-alt);
}
.pm-cart-btn__count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--pm-yellow);
  color: var(--pm-yellow-ink);
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pm-header__search-icon {
  display: none;
}

/* ===== §8 Search ========================================================= */
.pm-search {
  position: relative;
  display: flex;
  align-items: center;
}
.pm-search__icon {
  position: absolute;
  left: 14px;
  font-size: 16px;
  color: var(--pm-ink-2);
  pointer-events: none;
}
.pm-search input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--pm-line);
  background: var(--pm-bg-alt);
  border-radius: 14px;
  padding: 0 16px 0 40px;
  font-size: 15px;
  color: var(--pm-ink);
  outline: none;
}
.pm-search input::placeholder {
  color: var(--pm-ink-2);
}
.pm-search input:focus {
  border-color: var(--pm-yellow);
  background: var(--pm-surface);
}
.pm-search__clear {
  position: absolute;
  right: 10px;
  border: 0;
  background: none;
  color: var(--pm-ink-2);
  font-size: 18px;
  line-height: 1;
  padding: 4px;
}

/* ===== §6 Promo carousel ================================================= */
.pm-promo {
  max-width: var(--pm-container);
  margin: 24px auto 0;
  padding: 0 var(--pm-pad);
  position: relative;
}
/* Per-device carousel visibility (promo-banner-popup-settings-spec §4): the
   section carries promo-on-d / promo-on-m; the OTHER device is hidden by CSS.
   Desktop = wide viewport AND not a Mini App; mobile = narrow OR Mini App. */
@media (min-width: 761px) {
  .pm-promo:not(.promo-on-d) { display: none; }
}
@media (max-width: 760px) {
  .pm-promo:not(.promo-on-m) { display: none; }
}
.pm-promo.is-miniapp:not(.promo-on-m) { display: none; }
.pm-promo__rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 24px;
}
.pm-promo__rail::-webkit-scrollbar {
  display: none;
}
.pm-promo__slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  height: 300px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--pm-bg-alt);
  display: block;
  text-decoration: none;
}
.pm-promo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pm-promo__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 48px 32px 28px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.62),
    rgba(0, 0, 0, 0)
  );
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pm-promo__caption strong {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
}
.pm-promo__caption span {
  font-size: 16px;
  font-weight: 500;
  opacity: 0.95;
}
.pm-promo__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: #fff;
  box-shadow: var(--pm-shadow-float);
  font-size: 20px;
  color: var(--pm-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.pm-promo__arrow--prev {
  left: 36px;
}
.pm-promo__arrow--next {
  right: 36px;
}
.pm-promo__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.pm-promo__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: var(--pm-line);
  transition: width 0.2s ease, background 0.2s ease;
}
.pm-promo__dot.is-active {
  width: 22px;
  background: var(--pm-yellow);
}

/* ===== §5.1 Category tiles =============================================== */
.pm-tiles {
  max-width: var(--pm-container);
  margin: 28px auto 0;
  padding: 0 var(--pm-pad);
}
/* «Сортування» dropdown above the catalog (search lives in the pm header). */
.pm-sortbar {
  max-width: var(--pm-container);
  margin: 16px auto 0;
  padding: 0 var(--pm-pad);
  display: flex;
  justify-content: flex-end;
}
.pm-sort { display: inline-flex; align-items: center; gap: 8px; }
.pm-sort__lbl { font-size: 13px; font-weight: 700; color: #2a2a2a; }
.pm-sort__select {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--pm-line);
  background: var(--pm-surface);
  color: #2a2a2a;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
}
.pm-sort__select:focus { border-color: var(--pm-green); }
.pm-tiles__rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.pm-tiles__rail::-webkit-scrollbar {
  display: none;
}
.pm-tile {
  position: relative;
  flex: 0 0 200px;
  height: 140px;
  border-radius: 20px;
  overflow: hidden;
  scroll-snap-align: start;
  border: 0;
  padding: 0;
  background: var(--pm-bg-alt);
  text-align: left;
  box-shadow: var(--pm-shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pm-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--pm-shadow-hover);
}
.pm-tile.is-active {
  outline: 3px solid var(--pm-yellow);
  outline-offset: -1px;
}
.pm-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pm-tile__ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  background: var(--pm-bg-alt);
}
.pm-tile__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55),
    rgba(0, 0, 0, 0) 60%
  );
}
.pm-tile__name {
  position: absolute;
  left: 14px;
  bottom: 12px;
  right: 14px;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.pm-tile__time {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--pm-green);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
}
.pm-tile__time.is-closed {
  background: rgba(20, 20, 20, 0.6);
}

/* ===== §3/§5.2 Catalog =================================================== */
.pm-catalog {
  max-width: var(--pm-container);
  margin: 0 auto;
  padding: 0 var(--pm-pad);
}
.pm-section {
  margin-top: 48px;
  scroll-margin-top: 88px;
}
.pm-section__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pm-line);
  margin-bottom: 24px;
}
.pm-section__title {
  font-size: 28px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--pm-ink);
  margin: 0;
}
.pm-section__window {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(31, 164, 99, 0.12);
  color: var(--pm-green);
}
.pm-section__window.is-closed {
  background: var(--pm-bg-alt);
  color: var(--pm-ink-2);
}
.pm-section__desc {
  margin: -12px 0 20px;
  color: var(--pm-ink-2);
  font-size: 14px;
}

.pm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 24px;
  gap: 24px;
}

.pm-empty {
  padding: 64px 0;
  text-align: center;
  color: var(--pm-ink-2);
  font-size: 16px;
}

/* ===== §4 Product card =================================================== */
.pm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--pm-surface);
  border: 1px solid var(--pm-line);
  border-radius: 20px;
  padding: 12px;
  box-shadow: var(--pm-shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pm-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--pm-shadow-hover);
}
.pm-card__media {
  position: relative;
  width: 100%;
  height: 220px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--pm-bg-alt);
  cursor: pointer;
  border: 0;
  padding: 0;
  display: block;
}
.pm-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}
.pm-card:hover .pm-card__img {
  transform: scale(1.04);
}
.pm-card__ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
}
.pm-card.is-unavailable .pm-card__media {
  filter: grayscale(0.3) opacity(0.85);
}
.pm-card__discount {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--pm-red);
  color: var(--pm-red-ink);
  font-size: 13px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 10px;
  z-index: 2;
}
.pm-card__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--pm-yellow);
  color: var(--pm-yellow-ink);
  font-size: 12px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 10px;
  z-index: 2;
}
.pm-card__discount + .pm-card__tag {
  top: 46px;
}
.pm-card__fav {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--pm-shadow-card);
  font-size: 18px;
  line-height: 1;
  color: var(--pm-ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.pm-card__fav.is-active {
  color: var(--pm-red);
}
.pm-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 6px 4px;
  flex: 1 1 auto;
}
.pm-card__name {
  font-size: 17px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--pm-ink);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.25em * 2);
}
.pm-card__desc {
  font-size: 13px;
  line-height: 1.4;
  color: var(--pm-ink-2);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pm-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.pm-chip {
  font-size: 12px;
  color: var(--pm-ink-2);
  background: var(--pm-bg-alt);
  border-radius: 8px;
  padding: 3px 8px;
  white-space: nowrap;
}
.pm-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 12px 6px 4px;
}
.pm-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.pm-price__now {
  font-size: 19px;
  line-height: 1;
  font-weight: 800;
  color: var(--pm-ink);
}
.pm-price__old {
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  color: var(--pm-ink-2);
  text-decoration: line-through;
}

/* yellow "+ Add" pill */
.pm-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pm-yellow);
  color: var(--pm-yellow-ink);
  border: 0;
  font-size: 15px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 14px;
  transition: background 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}
.pm-add:hover {
  background: var(--pm-yellow-press);
  transform: translateY(-1px);
}

/* ===== Card config knobs (Потік 2) — owner overrides in the pm- space ====== */
/* D default = hero 220px media; ratio/size knobs reshape it. Button default is
   the yellow «+ Додати» pill; round = compact «+» square, text = borderless
   word. grid-columns overrides the 3-up grid on desktop (guarded ≤1024). */
.pm-card--ratio-square .pm-card__media { height: auto; aspect-ratio: 1 / 1; }
.pm-card--ratio-landscape .pm-card__media { height: auto; aspect-ratio: 4 / 3; }
.pm-card--ratio-wide .pm-card__media { height: auto; aspect-ratio: 16 / 9; }
.pm-card--photo-s .pm-card__media { max-height: 170px; }
.pm-card--photo-m .pm-card__media { max-height: 240px; }
.pm-card--photo-l .pm-card__media { max-height: 320px; }
.pm-card--no-photo .pm-card__media { display: none; }
.pm-card--btn-round .pm-add {
  width: 44px;
  height: 44px;
  padding: 0;
  justify-content: center;
  border-radius: 999px;
  font-size: 22px;
  gap: 0;
}
.pm-card--btn-text .pm-add {
  background: transparent;
  color: var(--pm-yellow-ink, #1a1a1a);
  padding: 8px 6px;
  border-radius: 8px;
}
.pm-card--btn-text .pm-add:hover {
  background: var(--pm-bg-alt);
}
.pm-card__hot {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 16px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
  z-index: 2;
}

@media (min-width: 1025px) {
  .pm-grid.pm-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
  .pm-grid.pm-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
  .pm-grid.pm-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.pm-add--block {
  width: 100%;
  justify-content: center;
  height: 52px;
  font-size: 18px;
  font-weight: 800;
}
.pm-add:disabled {
  background: var(--pm-bg-alt);
  color: var(--pm-ink-2);
  cursor: not-allowed;
  transform: none;
}
.pm-card__unavail {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--pm-ink-2);
  background: var(--pm-bg-alt);
  padding: 10px 14px;
  border-radius: 14px;
}

/* inline stepper (card + drawer) */
.pm-stepper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pm-step-btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--pm-line);
  background: var(--pm-surface);
  font-size: 18px;
  line-height: 1;
  color: var(--pm-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pm-step-btn:hover {
  background: var(--pm-bg-alt);
}
.pm-step-val {
  min-width: 22px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--pm-ink);
}

/* ===== §7 Product detail — la.ua two-panel modal / mobile bottom-sheet === */
.pm-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(20, 20, 20, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pm-detail {
  position: relative;
  width: 920px;
  max-width: 100%;
  max-height: 90vh;
  background: var(--pm-surface);
  border-radius: 24px;
  box-shadow: var(--pm-shadow-float);
  /* two-panel grid: photo-hero | info column ; footer spans both. */
  display: grid;
  grid-template-columns: 44% 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas: "hero body" "foot foot";
  overflow: hidden;
}
.pm-detail__handle {
  display: none;
}
.pm-detail__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  background: #fff;
  box-shadow: var(--pm-shadow-card);
  font-size: 22px;
  line-height: 1;
  color: var(--pm-ink);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pm-detail__hero {
  grid-area: hero;
  min-height: 0;
  background: var(--pm-bg-alt);
}
.pm-detail__media {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
}
.pm-detail__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pm-detail__ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 96px;
}
.pm-detail__scrim {
  display: none;
}
.pm-detail__flags {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}
.pm-detail__flag {
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 6px 10px;
  border-radius: 10px;
  color: var(--pm-yellow-ink);
  background: var(--pm-yellow);
  box-shadow: var(--pm-shadow-card);
}
.pm-detail__flag.is-sale {
  background: var(--pm-red);
  color: var(--pm-red-ink);
}
.pm-detail__flag.is-hot {
  background: var(--pm-ink);
  color: #fff;
}
.pm-detail__fav {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--pm-shadow-card);
  font-size: 20px;
  line-height: 1;
  color: var(--pm-ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.pm-detail__fav.is-active {
  color: var(--pm-red);
}
.pm-detail__body {
  grid-area: body;
  padding: 28px 26px 16px;
  overflow-y: auto;
  min-height: 0;
}
.pm-detail__title {
  font-size: 26px;
  line-height: 1.18;
  font-weight: 800;
  color: var(--pm-ink);
  margin: 6px 36px 8px 0;
}
.pm-detail__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--pm-ink-2);
  margin: 0 0 14px;
}
.pm-detail__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}
.pm-fact {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  background: var(--pm-bg-alt);
  border-radius: 10px;
  padding: 6px 10px;
  min-width: 56px;
}
.pm-fact__k {
  font-size: 10px;
  line-height: 1;
  color: var(--pm-ink-2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.pm-fact__v {
  font-size: 13px;
  font-weight: 700;
  color: var(--pm-ink);
}
.pm-fact--icon {
  flex-direction: row;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--pm-ink);
}
.pm-modset {
  margin: 18px 0 0;
}
.pm-modset__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.pm-modset__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--pm-ink);
}
.pm-modset__rule {
  font-size: 12px;
  font-weight: 500;
  color: var(--pm-ink-2);
}
.pm-modset__rule.is-req {
  color: var(--pm-red);
}
.pm-modset__rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2px 2px 8px;
  margin: 0 -2px;
  -webkit-overflow-scrolling: touch;
}
.pm-modset__rail::-webkit-scrollbar {
  height: 6px;
}
.pm-modset__rail::-webkit-scrollbar-thumb {
  background: var(--pm-line);
  border-radius: 999px;
}
.pm-modtile {
  position: relative;
  flex: 0 0 auto;
  width: 100px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1.5px solid var(--pm-line);
  border-radius: 14px;
  background: var(--pm-surface);
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.pm-modtile:hover {
  box-shadow: var(--pm-shadow-card);
}
.pm-modtile.is-checked {
  border-color: var(--pm-yellow);
  background: var(--pm-bg-alt);
}
.pm-modtile.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
}
.pm-modtile__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--pm-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pm-modtile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pm-modtile__ph {
  font-size: 26px;
  font-weight: 800;
  color: var(--pm-ink-2);
}
.pm-modtile__check {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--pm-yellow);
  color: var(--pm-yellow-ink);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pm-modtile__name {
  font-size: 13px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--pm-ink);
}
.pm-modtile__meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: var(--pm-ink-2);
}
.pm-modtile__price {
  font-weight: 700;
  color: var(--pm-ink);
}
.pm-detail__foot {
  grid-area: foot;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 26px;
  border-top: 1px solid var(--pm-line);
  background: var(--pm-surface);
}
.pm-detail__priceblock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.pm-detail__foot .pm-step-btn {
  width: 36px;
  height: 36px;
}
.pm-detail__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.pm-detail__price-now {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: var(--pm-ink);
}
.pm-detail__price-old {
  font-size: 16px;
  font-weight: 500;
  color: var(--pm-ink-2);
  text-decoration: line-through;
}
.pm-detail__sumrow {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: var(--pm-ink-2);
}
.pm-detail__sumrow b {
  color: var(--pm-ink);
}
.pm-detail__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border: 0;
  border-radius: 14px;
  background: var(--pm-yellow);
  color: var(--pm-yellow-ink);
  font-size: 16px;
  font-weight: 800;
}
.pm-detail__cta:hover:not(:disabled) {
  background: var(--pm-yellow-press);
}
.pm-detail__cta:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ===== §9 Cart — floating drawer / mobile bar =========================== */
.pm-cart-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--pm-yellow);
  color: var(--pm-yellow-ink);
  border: 0;
  border-radius: 16px;
  padding: 14px 20px;
  box-shadow: var(--pm-shadow-float);
  font-weight: 800;
  font-size: 15px;
}
.pm-cart-fab__count {
  font-size: 14px;
  font-weight: 700;
  opacity: 0.8;
}
.pm-cart-fab__sum {
  font-size: 16px;
  font-weight: 800;
}

.pm-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(20, 20, 20, 0.4);
}
.pm-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 56;
  width: 420px;
  max-width: 100%;
  background: var(--pm-surface);
  box-shadow: var(--pm-shadow-float);
  display: flex;
  flex-direction: column;
}
.pm-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--pm-line);
}
.pm-drawer__head h2 {
  font-size: 20px;
  font-weight: 800;
  margin: 0;
  color: var(--pm-ink);
}
.pm-drawer__close {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--pm-line);
  background: var(--pm-surface);
  font-size: 20px;
  color: var(--pm-ink);
}
.pm-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 20px;
}
.pm-drawer__foot {
  flex: 0 0 auto;
  padding: 16px 20px;
  border-top: 1px solid var(--pm-line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pm-cart-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--pm-line);
}
.pm-cart-line:last-child {
  border-bottom: 0;
}
.pm-cart-line__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pm-cart-line__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--pm-ink);
}
.pm-cart-line__mods {
  font-size: 12px;
  color: var(--pm-ink-2);
}
.pm-cart-line__unit {
  font-size: 12px;
  color: var(--pm-ink-2);
}
.pm-cart-line__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: 0 0 auto;
}
.pm-cart-line__total {
  font-size: 15px;
  font-weight: 800;
  color: var(--pm-ink);
}
.pm-cart-line__rm {
  border: 0;
  background: none;
  color: var(--pm-ink-2);
  font-size: 12px;
  text-decoration: underline;
  padding: 0;
}
.pm-cart-empty {
  padding: 48px 0;
  text-align: center;
  color: var(--pm-ink-2);
}
.pm-cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 16px;
}
.pm-cart-total strong {
  font-size: 20px;
  font-weight: 800;
  color: var(--pm-ink);
}
.pm-checkout {
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 14px;
  background: var(--pm-yellow);
  color: var(--pm-yellow-ink);
  font-size: 18px;
  font-weight: 800;
}
.pm-checkout:hover {
  background: var(--pm-yellow-press);
}
.pm-checkout:disabled {
  background: var(--pm-bg-alt);
  color: var(--pm-ink-2);
  cursor: not-allowed;
}

/* mobile sticky cart bar */
.pm-cart-bar {
  display: none;
}

/* ===== Adaptive ========================================================= */
@media (max-width: 1023px) {
  .pm-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .pm-card__media {
    height: 200px;
  }
  .pm-promo__slide {
    height: 240px;
  }
  .pm-promo__arrow {
    display: none;
  }
  .pm-section {
    margin-top: 40px;
  }
}

@media (max-width: 639px) {
  .pm-root {
    --pm-pad: 16px;
  }
  .pm-header__inner {
    height: 60px;
    gap: 10px;
  }
  .pm-header__brand {
    font-size: 17px;
  }
  /* collapse the inline search into an icon that expands a row below */
  .pm-header__search {
    display: none;
  }
  .pm-header__search.is-open {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 60px;
    padding: 10px 16px;
    background: var(--pm-bg);
    border-bottom: 1px solid var(--pm-line);
  }
  .pm-header__search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--pm-line);
    background: var(--pm-surface);
    font-size: 18px;
  }
  .pm-speed {
    font-size: 11px;
    padding: 5px 9px;
  }

  .pm-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .pm-card__media {
    height: auto;
    aspect-ratio: 16 / 10;
  }
  .pm-section {
    margin-top: 32px;
  }
  .pm-section__title {
    font-size: 22px;
  }

  .pm-promo {
    margin-top: 16px;
  }
  .pm-promo__slide {
    flex: 0 0 92%;
    height: 180px;
  }
  .pm-promo__caption {
    padding: 32px 20px 18px;
  }
  .pm-promo__caption strong {
    font-size: 20px;
  }
  .pm-promo__caption span {
    font-size: 13px;
  }

  .pm-detail-backdrop {
    padding: 0;
    align-items: flex-end;
  }
  /* bottom-sheet: photo on top (16:10), info, sticky footer (single column). */
  .pm-detail {
    width: 100%;
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "hero" "body" "foot";
  }
  .pm-detail__handle {
    display: block;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    z-index: 5;
  }
  .pm-detail__media {
    min-height: 0;
    aspect-ratio: 16 / 10;
    height: auto;
  }
  .pm-detail__body {
    padding: 16px 18px 12px;
  }
  .pm-detail__title {
    font-size: 22px;
  }
  .pm-detail__foot {
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  }

  /* desktop floating cart → mobile bottom bar */
  .pm-cart-fab {
    display: none;
  }
  .pm-cart-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    background: var(--pm-surface);
    border-top: 1px solid var(--pm-line);
    box-shadow: var(--pm-shadow-float);
    padding: 12px 16px;
  }
  .pm-cart-bar__info {
    display: flex;
    flex-direction: column;
  }
  .pm-cart-bar__count {
    font-size: 12px;
    color: var(--pm-ink-2);
  }
  .pm-cart-bar__sum {
    font-size: 18px;
    font-weight: 800;
    color: var(--pm-ink);
  }
  .pm-cart-bar__btn {
    border: 0;
    border-radius: 14px;
    background: var(--pm-yellow);
    color: var(--pm-yellow-ink);
    font-size: 16px;
    font-weight: 800;
    padding: 12px 22px;
  }
  .pm-drawer {
    top: auto;
    width: 100%;
    max-height: 88vh;
    border-radius: 20px 20px 0 0;
  }
  .pm-tile {
    flex: 0 0 160px;
    height: 120px;
  }
}

/* On wide screens the floating drawer leaves room; pad catalog bottom so the
   fixed cart widgets never cover the last row. */
.pm-catalog {
  padding-bottom: 96px;
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/templates/apetit-grid/apetit-grid.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/
/* ===========================================================================
 * Apetit grid (vitrine A) — self-contained visual template (Wolt-market style).
 *
 * ISOLATION: imported ONLY from ApetitGrid.tsx. Every class is prefixed `ag-`.
 * The palette lives in LOCAL custom properties on `.ag-root` (NOT global :root /
 * NOT the admin themeizer), so the dark festa theme can never bleed in.
 * Spec: docs/ux/template-apetit-grid-visual.md
 * ======================================================================== */

.ag-root {
  /* §1 fixed warm-white + aqua palette. */
  --ag-bg: #fafafa;
  --ag-surface: #ffffff;
  --ag-bg-alt: #f2f3f5;
  --ag-ink: #16181d;
  --ag-ink-2: #70747c;
  --ag-line: #eaebee;
  --ag-brand: #00b8c4;
  --ag-brand-ink: #ffffff;
  --ag-brand-press: #009aa4;
  --ag-brand-soft: #e1f7f8;
  --ag-discount: #ff5a3c;
  --ag-discount-ink: #ffffff;
  --ag-star: #ffb400;
  --ag-shadow-card: 0 1px 4px rgba(20, 20, 25, 0.06);
  --ag-shadow-hover: 0 6px 20px rgba(20, 20, 25, 0.1);
  --ag-shadow-float: 0 12px 32px rgba(20, 20, 25, 0.16);

  --ag-container: 1240px;
  --ag-pad: 20px;

  background: var(--ag-bg);
  color: var(--ag-ink);
  min-height: 100vh;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.ag-root *,
.ag-root *::before,
.ag-root *::after {
  box-sizing: border-box;
}
.ag-root button {
  font-family: inherit;
  cursor: pointer;
}

/* ===== §4.2 Header ======================================================= */
.ag-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ag-surface);
  border-bottom: 1px solid var(--ag-line);
}
.ag-header.is-stuck {
  box-shadow: var(--ag-shadow-card);
}
.ag-header__inner {
  max-width: var(--ag-container);
  margin: 0 auto;
  padding: 0 var(--ag-pad);
  height: 68px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.ag-header__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.ag-header__logo img {
  height: 40px;
  width: auto;
  display: block;
}
.ag-header__brand {
  font-size: 20px;
  font-weight: 800;
  color: var(--ag-ink);
  white-space: nowrap;
}
.ag-header__search {
  flex: 1 1 auto;
  min-width: 0;
}
.ag-header__right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.ag-speed {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--ag-brand);
  color: var(--ag-brand-press);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.ag-cart-btn {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--ag-line);
  background: var(--ag-surface);
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.ag-cart-btn:hover {
  background: var(--ag-bg-alt);
}
.ag-cart-btn__count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--ag-brand);
  color: var(--ag-brand-ink);
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ag-header__search-icon {
  display: none;
}

/* ===== §4.2 Search ======================================================= */
.ag-search {
  position: relative;
  display: flex;
  align-items: center;
}
.ag-search__icon {
  position: absolute;
  left: 14px;
  font-size: 16px;
  color: var(--ag-ink-2);
  pointer-events: none;
}
.ag-search input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--ag-line);
  background: var(--ag-bg-alt);
  border-radius: 12px;
  padding: 0 16px 0 40px;
  font-size: 15px;
  color: var(--ag-ink);
  outline: none;
}
.ag-search input::placeholder {
  color: var(--ag-ink-2);
}
.ag-search input:focus {
  border-color: var(--ag-brand);
  background: var(--ag-surface);
}
.ag-search__clear {
  position: absolute;
  right: 10px;
  border: 0;
  background: none;
  color: var(--ag-ink-2);
  font-size: 18px;
  line-height: 1;
  padding: 4px;
}

/* ===== §4.2 Hero ========================================================= */
.ag-hero {
  max-width: var(--ag-container);
  margin: 20px auto 0;
  padding: 0 var(--ag-pad);
}
.ag-hero__banner {
  position: relative;
  display: block;
  height: 240px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--ag-bg-alt);
  text-decoration: none;
}
.ag-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ag-hero__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 44px 28px 24px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ag-hero__caption strong {
  font-size: 24px;
  font-weight: 750;
  line-height: 1.2;
}
.ag-hero__caption span {
  font-size: 15px;
  opacity: 0.95;
}

/* ===== §4.2 Section chips ================================================ */
.ag-chips {
  position: -webkit-sticky;
  position: sticky;
  top: 68px;
  z-index: 30;
  background: var(--ag-bg);
  border-bottom: 1px solid var(--ag-line);
  margin-top: 20px;
}
.ag-chips__rail {
  max-width: var(--ag-container);
  margin: 0 auto;
  padding: 10px var(--ag-pad);
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ag-chips__rail::-webkit-scrollbar {
  display: none;
}
.ag-chip-btn {
  flex: 0 0 auto;
  border: 1px solid var(--ag-line);
  background: var(--ag-surface);
  color: var(--ag-ink-2);
  font-size: 14px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ag-chip-btn:hover {
  background: var(--ag-bg-alt);
}
.ag-chip-btn.is-active {
  background: var(--ag-brand);
  border-color: var(--ag-brand);
  color: var(--ag-brand-ink);
}

/* ===== §4.2 Popular rail ================================================= */
.ag-popular {
  max-width: var(--ag-container);
  margin: 28px auto 0;
  padding: 0 var(--ag-pad);
}
.ag-popular__title {
  font-size: 22px;
  font-weight: 750;
  color: var(--ag-ink);
  margin: 0 0 16px;
}
.ag-popular__rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.ag-popular__rail::-webkit-scrollbar {
  display: none;
}
.ag-popular__item {
  flex: 0 0 200px;
  scroll-snap-align: start;
}

/* ===== §4.2/§5 Catalog =================================================== */
.ag-catalog {
  max-width: var(--ag-container);
  margin: 0 auto;
  padding: 0 var(--ag-pad) 96px;
}
.ag-section {
  margin-top: 40px;
  scroll-margin-top: 132px;
}
.ag-section__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.ag-section__title {
  font-size: 26px;
  line-height: 1.2;
  font-weight: 750;
  color: var(--ag-ink);
  margin: 0;
}
.ag-section__window {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ag-brand-soft);
  color: var(--ag-brand-press);
}
.ag-section__window.is-closed {
  background: var(--ag-bg-alt);
  color: var(--ag-ink-2);
}
.ag-section__desc {
  margin: -8px 0 16px;
  color: var(--ag-ink-2);
  font-size: 14px;
}
.ag-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  gap: 20px;
}
.ag-empty {
  padding: 64px 0;
  text-align: center;
  color: var(--ag-ink-2);
  font-size: 16px;
}

/* ===== §5 Product card =================================================== */
.ag-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ag-surface);
  border: 1px solid var(--ag-line);
  border-radius: 16px;
  padding: 10px;
  box-shadow: var(--ag-shadow-card);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.ag-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ag-shadow-hover);
}
.ag-card__media {
  position: relative;
  width: 100%;
  height: 170px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--ag-bg-alt);
  cursor: pointer;
  border: 0;
  padding: 0;
  display: block;
}
.ag-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.16s ease;
}
.ag-card:hover .ag-card__img {
  transform: scale(1.05);
}
.ag-card__ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}
.ag-card.is-unavailable .ag-card__media {
  filter: opacity(0.85);
}
.ag-card__discount {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--ag-discount);
  color: var(--ag-discount-ink);
  font-size: 12px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 8px;
  z-index: 2;
}
.ag-card__star {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 14px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  z-index: 2;
}
.ag-card__discount + .ag-card__star {
  top: 36px;
}
.ag-card__fav {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--ag-shadow-card);
  font-size: 16px;
  line-height: 1;
  color: var(--ag-ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.ag-card__fav.is-active {
  color: var(--ag-discount);
}
.ag-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 4px 4px;
  flex: 1 1 auto;
}
.ag-card__name {
  font-size: 16px;
  line-height: 1.3;
  font-weight: 650;
  color: var(--ag-ink);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ag-card__desc {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ag-ink-2);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ag-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ag-chip {
  font-size: 12px;
  color: var(--ag-ink-2);
  background: var(--ag-bg-alt);
  border-radius: 8px;
  padding: 3px 8px;
  white-space: nowrap;
}
.ag-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 10px 4px 4px;
}
.ag-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.ag-price__now {
  font-size: 17px;
  line-height: 1;
  font-weight: 750;
  color: var(--ag-ink);
}
.ag-price__old {
  font-size: 13px;
  line-height: 1;
  font-weight: 500;
  color: var(--ag-ink-2);
  text-decoration: line-through;
}

/* round aqua «+» */
.ag-card__add {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  background: var(--ag-brand);
  color: var(--ag-brand-ink);
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease;
}
.ag-card__add:hover {
  background: var(--ag-brand-press);
  transform: translateY(-1px);
}
.ag-card__unavail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 15px;
  color: var(--ag-ink-2);
  background: var(--ag-bg-alt);
  border-radius: 999px;
  cursor: not-allowed;
}
.ag-card__hot {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 16px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
  z-index: 2;
}

/* ===== Card config knobs (Потік 2) — owner overrides in the ag- space ====== */
/* A's default = square 1:1 media; landscape/wide change only the aspect-ratio
   (height becomes auto so the ratio rules). photo-size scales the media height
   preset; the add-button geometry switches between round and pill/text. The
   grid-columns override sets the desktop column count (guarded ≤980 below). */
.ag-card--ratio-square .ag-card__media {
  height: auto;
  aspect-ratio: 1 / 1;
}
.ag-card--ratio-landscape .ag-card__media {
  height: auto;
  aspect-ratio: 4 / 3;
}
.ag-card--ratio-wide .ag-card__media {
  height: auto;
  aspect-ratio: 16 / 9;
}
.ag-card--photo-s .ag-card__media { max-height: 130px; }
.ag-card--photo-m .ag-card__media { max-height: 190px; }
.ag-card--photo-l .ag-card__media { max-height: 260px; }
.ag-card--no-photo .ag-card__media { display: none; }

/* Add-button shapes. Default markup is round; pill/text widen + show the word. */
.ag-card--btn-pill .ag-card__add,
.ag-card--btn-text .ag-card__add {
  width: auto;
  min-width: 0;
  height: 34px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 700;
  gap: 4px;
}
.ag-card--btn-text .ag-card__add {
  background: transparent;
  color: var(--ag-brand);
  padding: 0 6px;
}
.ag-card--btn-text .ag-card__add:hover {
  background: var(--ag-bg-alt);
}

@media (min-width: 981px) {
  .ag-grid.ag-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
  .ag-grid.ag-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
  .ag-grid.ag-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* inline stepper (card + drawer + modal) */
.ag-stepper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ag-step-btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--ag-brand);
  background: var(--ag-surface);
  font-size: 18px;
  line-height: 1;
  color: var(--ag-brand-press);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ag-step-btn:hover {
  background: var(--ag-brand-soft);
}
.ag-step-val {
  min-width: 22px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--ag-ink);
}

/* ===== §6 Product detail (modal / bottom-sheet) ========================= */
/* ===== Product detail — la.ua two-panel modal / mobile bottom-sheet ====== */
.ag-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(20, 20, 25, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.ag-detail {
  position: relative;
  width: 920px;
  max-width: 100%;
  max-height: 90vh;
  background: var(--ag-surface);
  border-radius: 20px;
  box-shadow: var(--ag-shadow-float);
  display: grid;
  grid-template-columns: 44% 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas: "hero body" "foot foot";
  overflow: hidden;
}
.ag-detail__handle {
  display: none;
}
.ag-detail__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  background: #fff;
  box-shadow: var(--ag-shadow-card);
  font-size: 22px;
  line-height: 1;
  color: var(--ag-ink);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ag-detail__hero {
  grid-area: hero;
  min-height: 0;
  background: var(--ag-bg-alt);
}
.ag-detail__media {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
}
.ag-detail__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ag-detail__ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 96px;
}
.ag-detail__scrim {
  display: none;
}
.ag-detail__flags {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}
.ag-detail__flag {
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 6px 10px;
  border-radius: 10px;
  color: var(--ag-brand-ink);
  background: var(--ag-brand);
  box-shadow: var(--ag-shadow-card);
}
.ag-detail__flag.is-sale {
  background: var(--ag-discount);
  color: var(--ag-discount-ink);
}
.ag-detail__flag.is-hot {
  background: var(--ag-brand);
}
.ag-detail__flag.is-new {
  background: var(--ag-ink);
  color: #fff;
}
.ag-detail__fav {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--ag-shadow-card);
  font-size: 20px;
  line-height: 1;
  color: var(--ag-ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.ag-detail__fav.is-active {
  color: var(--ag-discount);
}
.ag-detail__body {
  grid-area: body;
  padding: 28px 24px 14px;
  overflow-y: auto;
  min-height: 0;
}
.ag-detail__title {
  font-size: 24px;
  line-height: 1.22;
  font-weight: 750;
  color: var(--ag-ink);
  margin: 6px 36px 8px 0;
}
.ag-detail__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ag-ink-2);
  margin: 0 0 14px;
}
.ag-detail__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}
.ag-fact {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  background: var(--ag-bg-alt);
  border-radius: 10px;
  padding: 6px 10px;
  min-width: 56px;
}
.ag-fact__k {
  font-size: 10px;
  line-height: 1;
  color: var(--ag-ink-2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ag-fact__v {
  font-size: 13px;
  font-weight: 700;
  color: var(--ag-ink);
}
.ag-fact--icon {
  flex-direction: row;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ag-ink);
}
.ag-modset {
  margin: 18px 0 0;
}
.ag-modset__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.ag-modset__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--ag-ink);
}
.ag-modset__rule {
  font-size: 12px;
  font-weight: 500;
  color: var(--ag-ink-2);
}
.ag-modset__rule.is-req {
  color: var(--ag-discount);
}
.ag-modset__rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2px 2px 8px;
  margin: 0 -2px;
  -webkit-overflow-scrolling: touch;
}
.ag-modset__rail::-webkit-scrollbar {
  height: 6px;
}
.ag-modset__rail::-webkit-scrollbar-thumb {
  background: var(--ag-line);
  border-radius: 999px;
}
.ag-modtile {
  position: relative;
  flex: 0 0 auto;
  width: 100px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1.5px solid var(--ag-line);
  border-radius: 14px;
  background: var(--ag-surface);
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.ag-modtile:hover {
  box-shadow: var(--ag-shadow-card);
}
.ag-modtile.is-checked {
  border-color: var(--ag-brand);
  background: var(--ag-brand-soft);
}
.ag-modtile.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
}
.ag-modtile__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ag-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ag-modtile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ag-modtile__ph {
  font-size: 26px;
  font-weight: 800;
  color: var(--ag-ink-2);
}
.ag-modtile__check {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--ag-brand);
  color: var(--ag-brand-ink);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ag-modtile__name {
  font-size: 13px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--ag-ink);
}
.ag-modtile__meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: var(--ag-ink-2);
}
.ag-modtile__price {
  font-weight: 700;
  color: var(--ag-ink);
}
.ag-detail__foot {
  grid-area: foot;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--ag-line);
  background: var(--ag-surface);
}
.ag-detail__priceblock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.ag-detail__foot .ag-step-btn {
  width: 36px;
  height: 36px;
}
.ag-detail__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.ag-detail__price-now {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: var(--ag-brand);
}
.ag-detail__price-old {
  font-size: 16px;
  font-weight: 500;
  color: var(--ag-ink-2);
  text-decoration: line-through;
}
.ag-detail__sumrow {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: var(--ag-ink-2);
}
.ag-detail__sumrow b {
  color: var(--ag-ink);
}
.ag-detail__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border: 0;
  border-radius: 12px;
  background: var(--ag-brand);
  color: var(--ag-brand-ink);
  font-size: 16px;
  font-weight: 700;
}
.ag-detail__cta:hover:not(:disabled) {
  background: var(--ag-brand-press);
}
.ag-detail__cta:disabled {
  background: var(--ag-bg-alt);
  color: var(--ag-ink-2);
  cursor: not-allowed;
}

/* ===== Cart — floating drawer / mobile bar ============================== */
.ag-cart-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--ag-brand);
  color: var(--ag-brand-ink);
  border: 0;
  border-radius: 16px;
  padding: 14px 20px;
  box-shadow: var(--ag-shadow-float);
  font-weight: 800;
  font-size: 15px;
}
.ag-cart-fab__count {
  font-size: 14px;
  font-weight: 700;
  opacity: 0.85;
}
.ag-cart-fab__sum {
  font-size: 16px;
  font-weight: 800;
}
.ag-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(20, 20, 25, 0.4);
}
.ag-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 56;
  width: 420px;
  max-width: 100%;
  background: var(--ag-surface);
  box-shadow: var(--ag-shadow-float);
  display: flex;
  flex-direction: column;
}
.ag-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--ag-line);
}
.ag-drawer__head h2 {
  font-size: 20px;
  font-weight: 800;
  margin: 0;
  color: var(--ag-ink);
}
.ag-drawer__close {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--ag-line);
  background: var(--ag-surface);
  font-size: 20px;
  color: var(--ag-ink);
}
.ag-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 20px;
}
.ag-drawer__foot {
  flex: 0 0 auto;
  padding: 16px 20px;
  border-top: 1px solid var(--ag-line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ag-cart-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ag-line);
}
.ag-cart-line:last-child {
  border-bottom: 0;
}
.ag-cart-line__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ag-cart-line__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ag-ink);
}
.ag-cart-line__mods,
.ag-cart-line__unit {
  font-size: 12px;
  color: var(--ag-ink-2);
}
.ag-cart-line__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: 0 0 auto;
}
.ag-cart-line__total {
  font-size: 15px;
  font-weight: 800;
  color: var(--ag-ink);
}
.ag-cart-line__rm {
  border: 0;
  background: none;
  color: var(--ag-ink-2);
  font-size: 12px;
  text-decoration: underline;
  padding: 0;
}
.ag-cart-empty {
  padding: 48px 0;
  text-align: center;
  color: var(--ag-ink-2);
}
.ag-cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 16px;
}
.ag-cart-total strong {
  font-size: 20px;
  font-weight: 800;
  color: var(--ag-ink);
}
.ag-checkout {
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 12px;
  background: var(--ag-brand);
  color: var(--ag-brand-ink);
  font-size: 18px;
  font-weight: 800;
}
.ag-checkout:hover {
  background: var(--ag-brand-press);
}
.ag-checkout:disabled {
  background: var(--ag-bg-alt);
  color: var(--ag-ink-2);
  cursor: not-allowed;
}
.ag-cart-bar {
  display: none;
}

/* ===== Adaptive ========================================================= */
@media (max-width: 1023px) {
  .ag-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .ag-card__media {
    height: 150px;
  }
  .ag-hero__banner {
    height: 180px;
  }
  .ag-section {
    margin-top: 32px;
  }
}

@media (max-width: 639px) {
  .ag-root {
    --ag-pad: 14px;
  }
  .ag-header__inner {
    height: 60px;
    gap: 10px;
  }
  .ag-header__brand {
    font-size: 17px;
  }
  .ag-header__search {
    display: none;
  }
  .ag-header__search.is-open {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 60px;
    padding: 10px 14px;
    background: var(--ag-bg);
    border-bottom: 1px solid var(--ag-line);
  }
  .ag-header__search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--ag-line);
    background: var(--ag-surface);
    font-size: 18px;
  }
  .ag-speed {
    font-size: 11px;
    padding: 5px 9px;
  }
  .ag-chips {
    top: 60px;
  }

  /* §3 mobile = 2 squares per row */
  .ag-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .ag-card {
    padding: 8px;
  }
  .ag-card__media {
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .ag-popular__item {
    flex-basis: 160px;
  }
  .ag-hero {
    margin-top: 14px;
  }
  .ag-hero__banner {
    height: 150px;
  }
  .ag-hero__caption strong {
    font-size: 20px;
  }
  .ag-section {
    margin-top: 28px;
  }
  .ag-section__title {
    font-size: 21px;
  }

  .ag-detail-backdrop {
    padding: 0;
    align-items: flex-end;
  }
  .ag-detail {
    width: 100%;
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "hero" "body" "foot";
  }
  .ag-detail__handle {
    display: block;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    z-index: 5;
  }
  .ag-detail__media {
    min-height: 0;
    aspect-ratio: 16 / 10;
    height: auto;
  }
  .ag-detail__body {
    padding: 16px 18px 12px;
  }
  .ag-detail__title {
    font-size: 22px;
  }
  .ag-detail__foot {
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  }

  .ag-cart-fab {
    display: none;
  }
  .ag-cart-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    background: var(--ag-surface);
    border-top: 1px solid var(--ag-line);
    box-shadow: var(--ag-shadow-float);
    padding: 12px 14px;
  }
  .ag-cart-bar__info {
    display: flex;
    flex-direction: column;
  }
  .ag-cart-bar__count {
    font-size: 12px;
    color: var(--ag-ink-2);
  }
  .ag-cart-bar__sum {
    font-size: 18px;
    font-weight: 800;
    color: var(--ag-ink);
  }
  .ag-cart-bar__btn {
    border: 0;
    border-radius: 12px;
    background: var(--ag-brand);
    color: var(--ag-brand-ink);
    font-size: 16px;
    font-weight: 800;
    padding: 12px 22px;
  }
  .ag-drawer {
    top: auto;
    width: 100%;
    max-height: 88vh;
    border-radius: 18px 18px 0 0;
  }
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/templates/quick-list/quick-list.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************/
/* ===========================================================================
 * Quick list (vitrine B) — self-contained visual template (fast list-menu).
 *
 * ISOLATION: imported ONLY from QuickList.tsx. Every class is prefixed `ql-`.
 * The palette lives in LOCAL custom properties on `.ql-root` (NOT global :root /
 * NOT the admin themeizer). list-first: a left sticky section index + dense,
 * elegant rows with a right-aligned price column.
 * Spec: docs/ux/template-quick-list-visual.md
 * ======================================================================== */

.ql-root {
  /* §1 fixed white + indigo palette. */
  --ql-bg: #ffffff;
  --ql-surface: #ffffff;
  --ql-bg-alt: #f6f7f9;
  --ql-ink: #1b1d23;
  --ql-ink-2: #737884;
  --ql-line: #edeef1;
  --ql-brand: #3b5bff;
  --ql-brand-ink: #ffffff;
  --ql-brand-press: #2e48d6;
  --ql-brand-soft: #eaeeff;
  --ql-discount: #e23744;
  --ql-ok: #1f9d55;
  --ql-shadow-row: 0 1px 2px rgba(20, 20, 30, 0.04);
  --ql-shadow-float: 0 12px 32px rgba(20, 20, 30, 0.16);

  --ql-container: 1040px;
  --ql-pad: 20px;
  --ql-index-w: 220px;

  background: var(--ql-bg);
  color: var(--ql-ink);
  min-height: 100vh;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.ql-root *,
.ql-root *::before,
.ql-root *::after {
  box-sizing: border-box;
}
.ql-root button {
  font-family: inherit;
  cursor: pointer;
}

/* ===== §4.2 Header ======================================================= */
.ql-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ql-bg);
  border-bottom: 1px solid var(--ql-line);
}
.ql-header.is-stuck {
  box-shadow: var(--ql-shadow-row);
}
.ql-header__inner {
  max-width: var(--ql-container);
  margin: 0 auto;
  padding: 0 var(--ql-pad);
  height: 60px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.ql-header__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.ql-header__logo img {
  height: 34px;
  width: auto;
  display: block;
}
.ql-header__brand {
  font-size: 18px;
  font-weight: 800;
  color: var(--ql-ink);
  white-space: nowrap;
}
.ql-header__search {
  flex: 0 1 360px;
  min-width: 0;
  margin-left: auto;
}
.ql-header__right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.ql-speed {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--ql-brand-soft);
  color: var(--ql-brand-press);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.ql-cart-btn {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--ql-line);
  background: var(--ql-surface);
  font-size: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.ql-cart-btn:hover {
  background: var(--ql-bg-alt);
}
.ql-cart-btn__count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--ql-brand);
  color: var(--ql-brand-ink);
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ql-header__search-icon {
  display: none;
}

/* ===== §4.2 Search ======================================================= */
.ql-search {
  position: relative;
  display: flex;
  align-items: center;
}
.ql-search__icon {
  position: absolute;
  left: 13px;
  font-size: 15px;
  color: var(--ql-ink-2);
  pointer-events: none;
}
.ql-search input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--ql-line);
  background: var(--ql-bg-alt);
  border-radius: 10px;
  padding: 0 14px 0 36px;
  font-size: 14px;
  color: var(--ql-ink);
  outline: none;
}
.ql-search input::placeholder {
  color: var(--ql-ink-2);
}
.ql-search input:focus {
  border-color: var(--ql-brand);
  background: var(--ql-surface);
}
.ql-search__clear {
  position: absolute;
  right: 8px;
  border: 0;
  background: none;
  color: var(--ql-ink-2);
  font-size: 17px;
  line-height: 1;
  padding: 4px;
}

/* ===== §4.2 Promo strip (thin, optional) ================================ */
.ql-promo-strip {
  max-width: var(--ql-container);
  margin: 16px auto 0;
  padding: 0 16px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--ql-brand-soft);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ql-ink);
}
.ql-promo-strip {
  width: calc(100% - 2 * var(--ql-pad));
  margin-left: auto;
  margin-right: auto;
}
.ql-promo-strip__text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.ql-promo-strip__text strong {
  font-size: 15px;
  font-weight: 700;
}
.ql-promo-strip__text span {
  font-size: 13px;
  color: var(--ql-ink-2);
}
.ql-promo-strip__arrow {
  font-size: 18px;
  color: var(--ql-brand);
  font-weight: 700;
}

/* ===== §3 Two-column layout ============================================= */
.ql-layout {
  max-width: var(--ql-container);
  margin: 0 auto;
  padding: 0 var(--ql-pad) 96px;
  display: grid;
  grid-template-columns: var(--ql-index-w) minmax(0, 1fr);
  grid-gap: 28px;
  gap: 28px;
  align-items: start;
}

/* ===== §4.2 Sticky section index (left) ================================= */
.ql-index {
  position: -webkit-sticky;
  position: sticky;
  top: 76px;
  align-self: start;
}
.ql-index__rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 24px;
}
.ql-index__item {
  text-align: left;
  border: 0;
  background: none;
  color: var(--ql-ink-2);
  font-size: 14px;
  font-weight: 600;
  padding: 9px 12px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s ease, color 0.15s ease;
}
.ql-index__item:hover {
  background: var(--ql-bg-alt);
  color: var(--ql-ink);
}
.ql-index__item.is-active {
  background: var(--ql-brand-soft);
  color: var(--ql-brand);
}

/* ===== §4.2/§5 Content (right) ========================================== */
.ql-content {
  min-width: 0;
  max-width: 720px;
}
.ql-block {
  margin-top: 24px;
  scroll-margin-top: 80px;
}
.ql-block:first-child {
  margin-top: 24px;
}
.ql-block__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 8px;
  margin-bottom: 4px;
}
.ql-block__title {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 750;
  color: var(--ql-ink);
  margin: 0;
}
.ql-block__window {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(31, 157, 85, 0.12);
  color: var(--ql-ok);
}
.ql-block__window.is-closed {
  background: var(--ql-bg-alt);
  color: var(--ql-ink-2);
}
.ql-list {
  display: flex;
  flex-direction: column;
}
.ql-empty {
  padding: 64px 0;
  text-align: center;
  color: var(--ql-ink-2);
  font-size: 16px;
}

/* ===== §5 Quick row ===================================================== */
.ql-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 84px;
  padding: 14px 8px;
  border-bottom: 1px solid var(--ql-line);
  border-radius: 10px;
  transition: background 0.12s ease;
}
.ql-row:hover {
  background: var(--ql-bg-alt);
}
.ql-row.is-unavailable {
  opacity: 0.7;
}
.ql-row__media {
  flex: 0 0 auto;
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ql-bg-alt);
  cursor: pointer;
  border: 0;
  padding: 0;
}
.ql-row__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ql-row__ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}
.ql-row.is-unavailable .ql-row__media {
  filter: opacity(0.8);
}

/* ===== Card config knobs (Потік 2) — B maps photo knobs to the ROW THUMBNAIL.
   Default = 72px square. photo-size scales it (72→60/84); ratio widens it to a
   landscape/wide mini-thumb. The add-button + grid-columns modifiers are inert
   in B (the row always uses the round «+»; B is a list, not a grid). ====== */
.ql-row--photo-s .ql-row__media { width: 60px; height: 60px; }
.ql-row--photo-m .ql-row__media { width: 72px; height: 72px; }
.ql-row--photo-l .ql-row__media { width: 84px; height: 84px; }
.ql-row--ratio-square .ql-row__media { aspect-ratio: auto; }
.ql-row--ratio-landscape .ql-row__media { width: 96px; height: 72px; }
.ql-row--ratio-wide .ql-row__media { width: 112px; height: 64px; }
.ql-row--no-photo .ql-row__media { display: none; }
.ql-row__hot {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 13px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}
.ql-row__star { color: var(--ql-accent, #6366f1); }
.ql-row__discount {
  position: absolute;
  top: 4px;
  left: 4px;
  background: var(--ql-discount);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 6px;
}
.ql-row__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ql-row__name {
  font-size: 15px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ql-ink);
  margin: 0;
  cursor: pointer;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ql-row__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: var(--ql-ink-2);
  line-height: 1.35;
}
.ql-row__desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.ql-row__chip {
  white-space: nowrap;
}
.ql-row__fav {
  border: 0;
  background: none;
  color: var(--ql-ink-2);
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}
.ql-row__fav.is-active {
  color: var(--ql-discount);
}
.ql-row__price {
  flex: 0 0 auto;
  min-width: 96px;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.ql-row__now {
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  color: var(--ql-ink);
}
.ql-row__now.is-sale {
  color: var(--ql-discount);
}
.ql-row__old {
  font-size: 12px;
  line-height: 1;
  color: var(--ql-ink-2);
  text-decoration: line-through;
}
.ql-row__add {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  background: var(--ql-brand);
  color: var(--ql-brand-ink);
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.ql-row__add:hover {
  background: var(--ql-brand-press);
}
.ql-row__unavail {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--ql-ink-2);
  background: var(--ql-bg-alt);
  border-radius: 999px;
  cursor: not-allowed;
}

/* inline stepper */
.ql-stepper {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ql-step-btn {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--ql-brand);
  background: var(--ql-surface);
  font-size: 17px;
  line-height: 1;
  color: var(--ql-brand-press);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ql-step-btn:hover {
  background: var(--ql-brand-soft);
}
.ql-step-val {
  min-width: 20px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--ql-ink);
}

/* ===== §6 Product detail (compact modal / bottom-sheet) ================= */
/* ===== Product detail — la.ua two-panel modal / mobile bottom-sheet ====== */
.ql-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(20, 20, 30, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.ql-detail {
  position: relative;
  width: 920px;
  max-width: 100%;
  max-height: 90vh;
  background: var(--ql-surface);
  border-radius: 16px;
  box-shadow: var(--ql-shadow-float);
  display: grid;
  grid-template-columns: 44% 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas: "hero body" "foot foot";
  overflow: hidden;
}
.ql-detail__handle {
  display: none;
}
.ql-detail__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--ql-line);
  background: var(--ql-surface);
  font-size: 20px;
  line-height: 1;
  color: var(--ql-ink);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ql-detail__hero {
  grid-area: hero;
  min-height: 0;
  background: var(--ql-bg-alt);
}
.ql-detail__media {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
}
.ql-detail__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ql-detail__ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 96px;
}
.ql-detail__scrim {
  display: none;
}
.ql-detail__flags {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}
.ql-detail__flag {
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--ql-brand-ink);
  background: var(--ql-brand);
  box-shadow: var(--ql-shadow-float);
}
.ql-detail__flag.is-sale {
  background: var(--ql-discount);
  color: #fff;
}
.ql-detail__flag.is-new {
  background: var(--ql-ink);
  color: #fff;
}
.ql-detail__fav {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--ql-line);
  background: rgba(255, 255, 255, 0.92);
  font-size: 20px;
  line-height: 1;
  color: var(--ql-ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.ql-detail__fav.is-active {
  border-color: var(--ql-discount);
  color: var(--ql-discount);
}
.ql-detail__body {
  grid-area: body;
  padding: 24px 22px 14px;
  overflow-y: auto;
  min-height: 0;
}
.ql-detail__title {
  font-size: 22px;
  line-height: 1.22;
  font-weight: 750;
  color: var(--ql-ink);
  margin: 6px 36px 8px 0;
}
.ql-detail__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ql-ink-2);
  margin: 0 0 14px;
}
.ql-detail__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}
.ql-fact {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  background: var(--ql-bg-alt);
  border-radius: 8px;
  padding: 6px 10px;
  min-width: 56px;
}
.ql-fact__k {
  font-size: 10px;
  line-height: 1;
  color: var(--ql-ink-2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ql-fact__v {
  font-size: 13px;
  font-weight: 700;
  color: var(--ql-ink);
}
.ql-fact--icon {
  flex-direction: row;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ql-ink);
}
.ql-modset {
  margin: 18px 0 0;
}
.ql-modset:first-of-type {
  margin-top: 4px;
}
.ql-modset__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.ql-modset__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ql-ink);
}
.ql-modset__rule {
  font-size: 12px;
  font-weight: 500;
  color: var(--ql-ink-2);
}
.ql-modset__rule.is-req {
  color: var(--ql-discount);
}
.ql-modset__rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2px 2px 8px;
  margin: 0 -2px;
  -webkit-overflow-scrolling: touch;
}
.ql-modset__rail::-webkit-scrollbar {
  height: 6px;
}
.ql-modset__rail::-webkit-scrollbar-thumb {
  background: var(--ql-line);
  border-radius: 999px;
}
.ql-modtile {
  position: relative;
  flex: 0 0 auto;
  width: 100px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1.5px solid var(--ql-line);
  border-radius: 12px;
  background: var(--ql-surface);
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ql-modtile.is-checked {
  border-color: var(--ql-brand);
  background: var(--ql-brand-soft);
}
.ql-modtile.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
}
.ql-modtile__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ql-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ql-modtile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ql-modtile__ph {
  font-size: 26px;
  font-weight: 800;
  color: var(--ql-ink-2);
}
.ql-modtile__check {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--ql-brand);
  color: var(--ql-brand-ink);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ql-modtile__name {
  font-size: 13px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--ql-ink);
}
.ql-modtile__meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: var(--ql-ink-2);
}
.ql-modtile__price {
  font-weight: 700;
  color: var(--ql-ink);
}
.ql-detail__foot {
  grid-area: foot;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--ql-line);
  background: var(--ql-surface);
}
.ql-detail__priceblock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.ql-detail__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.ql-detail__price-now {
  font-size: 27px;
  font-weight: 800;
  line-height: 1;
  color: var(--ql-ink);
}
.ql-detail__price-old {
  font-size: 16px;
  font-weight: 500;
  color: var(--ql-ink-2);
  text-decoration: line-through;
}
.ql-detail__sumrow {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: var(--ql-ink-2);
}
.ql-detail__sumrow b {
  color: var(--ql-ink);
}
.ql-detail__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border: 0;
  border-radius: 10px;
  background: var(--ql-brand);
  color: var(--ql-brand-ink);
  font-size: 16px;
  font-weight: 700;
}
.ql-detail__cta:hover:not(:disabled) {
  background: var(--ql-brand-press);
}
.ql-detail__cta:disabled {
  background: var(--ql-bg-alt);
  color: var(--ql-ink-2);
  cursor: not-allowed;
}

/* ===== Cart — floating drawer / mobile bar ============================== */
.ql-cart-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--ql-brand);
  color: var(--ql-brand-ink);
  border: 0;
  border-radius: 14px;
  padding: 13px 18px;
  box-shadow: var(--ql-shadow-float);
  font-weight: 800;
  font-size: 15px;
}
.ql-cart-fab__count {
  font-size: 14px;
  font-weight: 700;
  opacity: 0.85;
}
.ql-cart-fab__sum {
  font-size: 16px;
  font-weight: 800;
}
.ql-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(20, 20, 30, 0.4);
}
.ql-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 56;
  width: 400px;
  max-width: 100%;
  background: var(--ql-surface);
  box-shadow: var(--ql-shadow-float);
  display: flex;
  flex-direction: column;
}
.ql-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--ql-line);
}
.ql-drawer__head h2 {
  font-size: 19px;
  font-weight: 800;
  margin: 0;
  color: var(--ql-ink);
}
.ql-drawer__close {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--ql-line);
  background: var(--ql-surface);
  font-size: 20px;
  color: var(--ql-ink);
}
.ql-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 20px;
}
.ql-drawer__foot {
  flex: 0 0 auto;
  padding: 16px 20px;
  border-top: 1px solid var(--ql-line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ql-cart-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ql-line);
}
.ql-cart-line:last-child {
  border-bottom: 0;
}
.ql-cart-line__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ql-cart-line__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ql-ink);
}
.ql-cart-line__mods,
.ql-cart-line__unit {
  font-size: 12px;
  color: var(--ql-ink-2);
}
.ql-cart-line__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: 0 0 auto;
}
.ql-cart-line__total {
  font-size: 15px;
  font-weight: 800;
  color: var(--ql-ink);
}
.ql-cart-line__rm {
  border: 0;
  background: none;
  color: var(--ql-ink-2);
  font-size: 12px;
  text-decoration: underline;
  padding: 0;
}
.ql-cart-empty {
  padding: 48px 0;
  text-align: center;
  color: var(--ql-ink-2);
}
.ql-cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 16px;
}
.ql-cart-total strong {
  font-size: 20px;
  font-weight: 800;
  color: var(--ql-ink);
}
.ql-checkout {
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: 12px;
  background: var(--ql-brand);
  color: var(--ql-brand-ink);
  font-size: 17px;
  font-weight: 800;
}
.ql-checkout:hover {
  background: var(--ql-brand-press);
}
.ql-checkout:disabled {
  background: var(--ql-bg-alt);
  color: var(--ql-ink-2);
  cursor: not-allowed;
}
.ql-cart-bar {
  display: none;
}

/* ===== Adaptive ========================================================= */
@media (max-width: 760px) {
  /* §3 mobile: index → horizontal sticky chips, content full-width. */
  .ql-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .ql-index {
    position: -webkit-sticky;
    position: sticky;
    top: 60px;
    z-index: 30;
    margin: 0 calc(-1 * var(--ql-pad));
    background: var(--ql-bg);
    border-bottom: 1px solid var(--ql-line);
  }
  .ql-index__rail {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 8px var(--ql-pad);
    gap: 6px;
  }
  .ql-index__rail::-webkit-scrollbar {
    display: none;
  }
  .ql-index__item {
    flex: 0 0 auto;
    border: 1px solid var(--ql-line);
    padding: 6px 12px;
    font-size: 13px;
  }
  .ql-content {
    max-width: 100%;
  }
  .ql-block {
    scroll-margin-top: 110px;
  }
}

@media (max-width: 639px) {
  .ql-root {
    --ql-pad: 16px;
  }
  .ql-header__inner {
    gap: 10px;
  }
  .ql-header__brand {
    font-size: 16px;
  }
  .ql-header__search {
    display: none;
    flex-basis: auto;
  }
  .ql-header__search.is-open {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 60px;
    padding: 10px 16px;
    background: var(--ql-bg);
    border-bottom: 1px solid var(--ql-line);
  }
  .ql-header__search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--ql-line);
    background: var(--ql-surface);
    font-size: 17px;
  }
  .ql-speed {
    display: none;
  }

  .ql-row {
    min-height: 76px;
    padding: 12px 4px;
    gap: 12px;
  }
  .ql-row__media {
    width: 60px;
    height: 60px;
  }
  .ql-row__price {
    min-width: 72px;
  }

  .ql-detail-backdrop {
    padding: 0;
    align-items: flex-end;
  }
  .ql-detail {
    width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "hero" "body" "foot";
  }
  .ql-detail__handle {
    display: block;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    z-index: 5;
  }
  .ql-detail__media {
    min-height: 0;
    aspect-ratio: 16 / 10;
    height: auto;
  }
  .ql-detail__body {
    padding: 16px 18px 12px;
  }
  .ql-detail__foot {
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  }

  .ql-cart-fab {
    display: none;
  }
  .ql-cart-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    background: var(--ql-surface);
    border-top: 1px solid var(--ql-line);
    box-shadow: var(--ql-shadow-float);
    padding: 12px 16px;
  }
  .ql-cart-bar__info {
    display: flex;
    flex-direction: column;
  }
  .ql-cart-bar__count {
    font-size: 12px;
    color: var(--ql-ink-2);
  }
  .ql-cart-bar__sum {
    font-size: 18px;
    font-weight: 800;
    color: var(--ql-ink);
  }
  .ql-cart-bar__btn {
    border: 0;
    border-radius: 12px;
    background: var(--ql-brand);
    color: var(--ql-brand-ink);
    font-size: 16px;
    font-weight: 800;
    padding: 12px 22px;
  }
  .ql-drawer {
    top: auto;
    width: 100%;
    max-height: 88vh;
    border-radius: 16px 16px 0 0;
  }
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/templates/premium-dark/premium-dark.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************/
/* ===========================================================================
 * Premium dark (vitrine C) — self-contained visual template (fine-dining).
 *
 * ISOLATION: imported ONLY from PremiumDark.tsx. Every class is prefixed `pd-`.
 * The palette lives in LOCAL custom properties on `.pd-root` (NOT global :root /
 * NOT the admin themeizer) — a FIXED dark+gold face that deliberately ignores
 * the admin light/dark theme. Serif headings (Playfair → Georgia fallback).
 * Spec: docs/ux/template-premium-dark-visual.md
 * ======================================================================== */

.pd-root {
  /* §1 fixed dark + gold palette. */
  --pd-bg: #0c0c0e;
  --pd-surface: #16161a;
  --pd-surface-2: #1e1e24;
  --pd-ink: #f4f1ec;
  --pd-ink-2: #9a968e;
  --pd-line: #2a2a30;
  --pd-gold: #c9a227;
  --pd-gold-2: #e3c766;
  --pd-gold-ink: #0c0c0e;
  --pd-copper: #b06a3b;
  --pd-discount: #c0524e;
  --pd-shadow-card: 0 4px 18px rgba(0, 0, 0, 0.45);
  --pd-shadow-float: 0 20px 60px rgba(0, 0, 0, 0.6);
  --pd-scrim: linear-gradient(to top, rgba(8, 8, 10, 0.92), rgba(8, 8, 10, 0));

  --pd-serif: "Playfair Display", "PT Serif", Georgia, "Times New Roman", serif;
  --pd-sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --pd-container: 1200px;
  --pd-pad: 32px;

  background: var(--pd-bg);
  color: var(--pd-ink);
  min-height: 100vh;
  font-family: var(--pd-sans);
  -webkit-font-smoothing: antialiased;
}

.pd-root *,
.pd-root *::before,
.pd-root *::after {
  box-sizing: border-box;
}
.pd-root button {
  font-family: inherit;
  cursor: pointer;
}

/* ===== §4.2 Header ======================================================= */
.pd-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--pd-bg);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.pd-header.is-stuck {
  border-bottom-color: var(--pd-line);
}
.pd-header__inner {
  max-width: var(--pd-container);
  margin: 0 auto;
  padding: 0 var(--pd-pad);
  height: 72px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.pd-header__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.pd-header__logo img {
  height: 38px;
  width: auto;
  display: block;
}
.pd-header__brand {
  font-family: var(--pd-serif);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--pd-ink);
  white-space: nowrap;
}
.pd-header__dot {
  color: var(--pd-gold);
}
.pd-header__nav {
  flex: 1 1 auto;
  display: flex;
  gap: 24px;
}
.pd-header__nav a {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pd-ink-2);
  text-decoration: none;
  transition: color 0.2s ease;
}
.pd-header__nav a:hover {
  color: var(--pd-gold);
}
.pd-header__right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
}
.pd-speed {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--pd-gold);
  color: var(--pd-gold);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.pd-cart-btn {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--pd-line);
  background: var(--pd-surface);
  font-size: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease;
}
.pd-cart-btn:hover {
  border-color: var(--pd-gold);
}
.pd-cart-btn__count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--pd-gold);
  color: var(--pd-gold-ink);
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===== §4.2 Cinematic hero ============================================== */
.pd-hero {
  position: relative;
  height: 460px;
  overflow: hidden;
  background: var(--pd-bg);
}
.pd-hero__layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--pd-surface);
  opacity: 0;
  transition: opacity 1.2s ease;
}
.pd-hero__layer.is-active {
  opacity: 1;
}
.pd-hero__fallback {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--pd-bg), var(--pd-surface));
}
.pd-hero__scrim {
  position: absolute;
  inset: 0;
  background: var(--pd-scrim);
}
.pd-hero__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: var(--pd-container);
  margin: 0 auto;
  padding: 0 var(--pd-pad) 56px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pd-hero__title {
  font-family: var(--pd-serif);
  font-size: 44px;
  line-height: 1.1;
  font-weight: 600;
  color: var(--pd-ink);
  margin: 0;
}
.pd-hero__sub {
  font-size: 16px;
  color: var(--pd-ink-2);
  margin: 0;
  max-width: 560px;
}
.pd-hero__rule {
  display: block;
  width: 64px;
  height: 2px;
  background: var(--pd-gold);
  margin-top: 6px;
}
.pd-hero__dots {
  position: absolute;
  right: var(--pd-pad);
  bottom: 56px;
  display: flex;
  gap: 8px;
}
.pd-hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid var(--pd-gold);
  background: transparent;
  padding: 0;
  transition: background 0.2s ease, width 0.2s ease;
}
.pd-hero__dot.is-active {
  width: 22px;
  background: var(--pd-gold);
}

/* ===== §4.2 Section nav (thin, sticky) ================================= */
.pd-section-nav {
  position: -webkit-sticky;
  position: sticky;
  top: 72px;
  z-index: 30;
  background: var(--pd-bg);
  border-bottom: 1px solid var(--pd-line);
}
.pd-section-nav__rail {
  max-width: var(--pd-container);
  margin: 0 auto;
  padding: 12px var(--pd-pad);
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pd-section-nav__rail::-webkit-scrollbar {
  display: none;
}
.pd-section-nav__item {
  flex: 0 0 auto;
  border: 0;
  background: none;
  color: var(--pd-ink-2);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 0;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.pd-section-nav__item:hover {
  color: var(--pd-ink);
}
.pd-section-nav__item.is-active {
  color: var(--pd-gold);
}

/* ===== §4.2/§5 Catalog ================================================= */
.pd-catalog {
  max-width: var(--pd-container);
  margin: 0 auto;
  padding: 0 var(--pd-pad) 120px;
}
.pd-section {
  margin-top: 56px;
  scroll-margin-top: 120px;
}
.pd-section__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.pd-section__title {
  font-family: var(--pd-serif);
  font-size: 30px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--pd-ink);
  margin: 0;
}
.pd-section__window {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--pd-gold);
  color: var(--pd-gold);
}
.pd-section__window.is-closed {
  border-color: var(--pd-line);
  color: var(--pd-ink-2);
}
.pd-section__rule {
  display: block;
  height: 1px;
  background: var(--pd-gold);
  opacity: 0.6;
  margin: 14px 0 24px;
}
.pd-section__desc {
  margin: -12px 0 22px;
  color: var(--pd-ink-2);
  font-size: 14px;
}
.pd-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 28px;
  gap: 28px;
}
.pd-empty {
  padding: 80px 0;
  text-align: center;
  color: var(--pd-ink-2);
  font-size: 16px;
}

/* ===== §5 Premium card ================================================= */
.pd-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--pd-surface);
  border: 1px solid var(--pd-line);
  border-radius: 12px;
  padding: 14px;
  box-shadow: var(--pd-shadow-card);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.pd-card:hover {
  border-color: var(--pd-gold);
  transform: translateY(-2px);
}
.pd-card__media {
  position: relative;
  width: 100%;
  height: 210px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--pd-surface-2);
  cursor: pointer;
  border: 0;
  padding: 0;
  display: block;
}
.pd-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.pd-card:hover .pd-card__img {
  transform: scale(1.03);
}
.pd-card__ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
}
.pd-card__inner-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 8, 10, 0.5), rgba(8, 8, 10, 0) 45%);
  pointer-events: none;
}
.pd-card.is-unavailable .pd-card__media {
  filter: opacity(0.7);
}
.pd-card__discount {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--pd-discount);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 6px;
  z-index: 2;
}
.pd-card__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  color: var(--pd-copper);
  background: rgba(8, 8, 10, 0.6);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
  z-index: 2;
}
.pd-card__discount + .pd-card__tag {
  top: 42px;
}
.pd-card__fav {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 0;
  background: rgba(8, 8, 10, 0.4);
  font-size: 16px;
  line-height: 1;
  color: var(--pd-ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.pd-card__fav.is-active {
  color: var(--pd-gold);
}
.pd-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 4px 4px;
  flex: 1 1 auto;
}
.pd-card__name {
  font-family: var(--pd-serif);
  font-size: 19px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--pd-ink);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pd-card__desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--pd-ink-2);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pd-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pd-chip {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--pd-ink-2);
  border: 1px solid var(--pd-line);
  border-radius: 6px;
  padding: 3px 8px;
  white-space: nowrap;
}
.pd-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding: 14px 4px 4px;
}
.pd-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.pd-price__now {
  font-size: 18px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--pd-gold);
}
.pd-price__old {
  font-size: 13px;
  line-height: 1;
  color: var(--pd-ink-2);
  text-decoration: line-through;
}

/* stroked gold uppercase button */
.pd-card__add {
  border: 1px solid var(--pd-gold);
  background: transparent;
  color: var(--pd-gold);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 9px 18px;
  border-radius: 10px;
  transition: background 0.2s ease, color 0.2s ease;
}
.pd-card__add:hover {
  background: var(--pd-gold);
  color: var(--pd-gold-ink);
}

/* ===== Card config knobs (Потік 2) — owner overrides in the pd- space ====== */
/* C default = wide 210px media; ratio/size knobs reshape it. Button default is
   the stroked-gold word; the round modifier turns it into a gold «+» circle.
   grid-columns overrides the spacious 3-up grid on desktop (guarded ≤1024). */
.pd-card--ratio-square .pd-card__media { height: auto; aspect-ratio: 1 / 1; }
.pd-card--ratio-landscape .pd-card__media { height: auto; aspect-ratio: 4 / 3; }
.pd-card--ratio-wide .pd-card__media { height: auto; aspect-ratio: 16 / 9; }
.pd-card--photo-s .pd-card__media { max-height: 160px; }
.pd-card--photo-m .pd-card__media { max-height: 230px; }
.pd-card--photo-l .pd-card__media { max-height: 300px; }
.pd-card--no-photo .pd-card__media { display: none; }
.pd-card--btn-round .pd-card__add {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  font-size: 22px;
  letter-spacing: 0;
}
.pd-card__hot {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 16px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  z-index: 2;
}

@media (min-width: 1025px) {
  .pd-grid.pd-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
  .pd-grid.pd-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
  .pd-grid.pd-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.pd-card__unavail {
  font-size: 12px;
  font-style: italic;
  color: var(--pd-ink-2);
  letter-spacing: 0.02em;
}

/* delicate gold stepper */
.pd-stepper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pd-step-btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--pd-gold);
  background: transparent;
  font-size: 17px;
  line-height: 1;
  color: var(--pd-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.pd-step-btn:hover {
  background: var(--pd-gold);
  color: var(--pd-gold-ink);
}
.pd-step-val {
  min-width: 20px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--pd-ink);
}

/* ===== §6 Product detail (modal / bottom-sheet) ======================== */
/* ===== Product detail — la.ua two-panel modal / mobile bottom-sheet ====== */
/* C-nuance: restrained gold-on-dark «tasting menu» — serif title, gold flags
 * and tile borders, uppercase gold CTA. Same structure as A/B/D. */
.pd-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(4, 4, 6, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pd-detail {
  position: relative;
  width: 920px;
  max-width: 100%;
  max-height: 90vh;
  background: var(--pd-surface-2);
  border: 1px solid var(--pd-line);
  border-radius: 14px;
  box-shadow: var(--pd-shadow-float);
  display: grid;
  grid-template-columns: 44% 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas: "hero body" "foot foot";
  overflow: hidden;
}
.pd-detail__handle {
  display: none;
}
.pd-detail__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--pd-line);
  background: rgba(8, 8, 10, 0.6);
  font-size: 22px;
  line-height: 1;
  color: var(--pd-ink);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pd-detail__hero {
  grid-area: hero;
  min-height: 0;
  background: var(--pd-surface);
}
.pd-detail__media {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
}
.pd-detail__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pd-detail__ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 96px;
}
.pd-detail__scrim {
  position: absolute;
  inset: 0;
  background: var(--pd-scrim);
  pointer-events: none;
}
.pd-detail__flags {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}
.pd-detail__flag {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 4px;
  color: var(--pd-gold-ink);
  background: var(--pd-gold);
}
.pd-detail__flag.is-sale {
  background: var(--pd-discount);
  color: #fff;
}
.pd-detail__flag.is-hot {
  background: var(--pd-copper);
  color: #fff;
}
.pd-detail__fav {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--pd-line);
  background: rgba(8, 8, 10, 0.5);
  font-size: 20px;
  line-height: 1;
  color: var(--pd-ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.pd-detail__fav.is-active {
  color: var(--pd-gold);
}
.pd-detail__body {
  grid-area: body;
  padding: 30px 28px 16px;
  overflow-y: auto;
  min-height: 0;
}
.pd-detail__title {
  font-family: var(--pd-serif);
  font-size: 30px;
  line-height: 1.18;
  font-weight: 600;
  color: var(--pd-ink);
  margin: 4px 36px 10px 0;
}
.pd-detail__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--pd-ink-2);
  margin: 0 0 16px;
}
.pd-detail__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}
.pd-fact {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  background: var(--pd-surface);
  border: 1px solid var(--pd-line);
  border-radius: 8px;
  padding: 6px 10px;
  min-width: 56px;
}
.pd-fact__k {
  font-size: 10px;
  line-height: 1;
  color: var(--pd-ink-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pd-fact__v {
  font-size: 13px;
  font-weight: 700;
  color: var(--pd-ink);
}
.pd-fact--icon {
  flex-direction: row;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--pd-ink);
}
.pd-modset {
  margin: 22px 0 0;
}
.pd-modset__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.pd-modset__name {
  font-family: var(--pd-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--pd-ink);
}
.pd-modset__rule {
  font-family: var(--pd-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--pd-ink-2);
}
.pd-modset__rule.is-req {
  color: var(--pd-gold);
}
.pd-modset__rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2px 2px 8px;
  margin: 0 -2px;
  -webkit-overflow-scrolling: touch;
}
.pd-modset__rail::-webkit-scrollbar {
  height: 6px;
}
.pd-modset__rail::-webkit-scrollbar-thumb {
  background: var(--pd-line);
  border-radius: 999px;
}
.pd-modtile {
  position: relative;
  flex: 0 0 auto;
  width: 100px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--pd-line);
  border-radius: 10px;
  background: var(--pd-surface);
  text-align: left;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.pd-modtile.is-checked {
  border-color: var(--pd-gold);
  background: rgba(201, 162, 39, 0.1);
}
.pd-modtile.is-locked {
  opacity: 0.4;
  cursor: not-allowed;
}
.pd-modtile__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--pd-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd-modtile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pd-modtile__ph {
  font-family: var(--pd-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--pd-gold);
}
.pd-modtile__check {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--pd-gold);
  color: var(--pd-gold-ink);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd-modtile__name {
  font-size: 13px;
  line-height: 1.25;
  font-weight: 500;
  color: var(--pd-ink);
}
.pd-modtile__meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: var(--pd-ink-2);
}
.pd-modtile__price {
  font-weight: 700;
  color: var(--pd-gold);
}
.pd-detail__foot {
  grid-area: foot;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 28px;
  border-top: 1px solid var(--pd-line);
  background: var(--pd-surface-2);
}
.pd-detail__priceblock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.pd-detail__foot .pd-step-btn {
  width: 36px;
  height: 36px;
}
.pd-detail__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.pd-detail__price-now {
  font-family: var(--pd-serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--pd-gold-2);
}
.pd-detail__price-old {
  font-size: 16px;
  font-weight: 500;
  color: var(--pd-ink-2);
  text-decoration: line-through;
}
.pd-detail__sumrow {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: var(--pd-ink-2);
}
.pd-detail__sumrow b {
  color: var(--pd-ink);
}
.pd-detail__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  border: 1px solid var(--pd-gold);
  border-radius: 10px;
  background: transparent;
  color: var(--pd-gold-2);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: background 0.2s ease, color 0.2s ease;
}
.pd-detail__cta:hover:not(:disabled) {
  background: var(--pd-gold);
  color: var(--pd-gold-ink);
}
.pd-detail__cta:disabled {
  border-color: var(--pd-line);
  color: var(--pd-ink-2);
  cursor: not-allowed;
  letter-spacing: normal;
  text-transform: none;
}

/* ===== Cart — floating drawer / mobile bar ============================== */
.pd-cart-fab {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--pd-surface);
  border: 1px solid var(--pd-gold);
  color: var(--pd-gold);
  border-radius: 12px;
  padding: 13px 20px;
  box-shadow: var(--pd-shadow-float);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.pd-cart-fab__count {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.85;
}
.pd-cart-fab__sum {
  font-size: 15px;
  font-weight: 700;
}
.pd-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(4, 4, 6, 0.6);
}
.pd-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 56;
  width: 420px;
  max-width: 100%;
  background: var(--pd-surface-2);
  border-left: 1px solid var(--pd-line);
  box-shadow: var(--pd-shadow-float);
  display: flex;
  flex-direction: column;
}
.pd-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--pd-line);
}
.pd-drawer__head h2 {
  font-family: var(--pd-serif);
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  color: var(--pd-ink);
}
.pd-drawer__close {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--pd-line);
  background: var(--pd-surface);
  font-size: 20px;
  color: var(--pd-ink);
}
.pd-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 22px;
}
.pd-drawer__foot {
  flex: 0 0 auto;
  padding: 16px 22px;
  border-top: 1px solid var(--pd-line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pd-cart-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--pd-line);
}
.pd-cart-line:last-child {
  border-bottom: 0;
}
.pd-cart-line__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pd-cart-line__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--pd-ink);
}
.pd-cart-line__mods,
.pd-cart-line__unit {
  font-size: 12px;
  color: var(--pd-ink-2);
}
.pd-cart-line__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: 0 0 auto;
}
.pd-cart-line__total {
  font-size: 15px;
  font-weight: 700;
  color: var(--pd-gold);
}
.pd-cart-line__rm {
  border: 0;
  background: none;
  color: var(--pd-ink-2);
  font-size: 12px;
  text-decoration: underline;
  padding: 0;
}
.pd-cart-empty {
  padding: 48px 0;
  text-align: center;
  color: var(--pd-ink-2);
}
.pd-cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 16px;
  color: var(--pd-ink);
}
.pd-cart-total strong {
  font-size: 20px;
  font-weight: 700;
  color: var(--pd-gold);
}
.pd-checkout {
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 10px;
  background: var(--pd-gold);
  color: var(--pd-gold-ink);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.pd-checkout:hover {
  background: var(--pd-gold-2);
}
.pd-checkout:disabled {
  background: var(--pd-line);
  color: var(--pd-ink-2);
  cursor: not-allowed;
  letter-spacing: normal;
  text-transform: none;
}
.pd-cart-bar {
  display: none;
}

/* ===== Adaptive ========================================================= */
@media (max-width: 1023px) {
  .pd-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
  .pd-card__media {
    height: 190px;
  }
  .pd-hero {
    height: 380px;
  }
  .pd-hero__title {
    font-size: 36px;
  }
  .pd-section {
    margin-top: 44px;
  }
  .pd-header__nav {
    display: none;
  }
}

@media (max-width: 639px) {
  .pd-root {
    --pd-pad: 18px;
  }
  .pd-header__inner {
    height: 64px;
    gap: 12px;
  }
  .pd-header__brand {
    font-size: 20px;
  }
  .pd-section-nav {
    top: 64px;
  }

  .pd-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .pd-card__media {
    height: auto;
    aspect-ratio: 16 / 10;
  }
  .pd-hero {
    height: 320px;
  }
  .pd-hero__caption {
    padding-bottom: 36px;
  }
  .pd-hero__title {
    font-size: 30px;
  }
  .pd-hero__dots {
    bottom: 36px;
  }
  .pd-section {
    margin-top: 36px;
  }
  .pd-section__title {
    font-size: 24px;
  }

  .pd-detail-backdrop {
    padding: 0;
    align-items: flex-end;
  }
  .pd-detail {
    width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "hero" "body" "foot";
  }
  .pd-detail__handle {
    display: block;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    border-radius: 999px;
    background: var(--pd-gold);
    z-index: 5;
  }
  .pd-detail__media {
    min-height: 0;
    aspect-ratio: 16 / 10;
    height: auto;
  }
  .pd-detail__body {
    padding: 18px 18px 12px;
  }
  .pd-detail__title {
    font-size: 26px;
  }
  .pd-detail__foot {
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  }

  .pd-cart-fab {
    display: none;
  }
  .pd-cart-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    background: var(--pd-surface-2);
    border-top: 1px solid var(--pd-line);
    box-shadow: var(--pd-shadow-float);
    padding: 12px 16px;
  }
  .pd-cart-bar__info {
    display: flex;
    flex-direction: column;
  }
  .pd-cart-bar__count {
    font-size: 12px;
    color: var(--pd-ink-2);
  }
  .pd-cart-bar__sum {
    font-size: 18px;
    font-weight: 700;
    color: var(--pd-gold);
  }
  .pd-cart-bar__btn {
    border: 1px solid var(--pd-gold);
    border-radius: 10px;
    background: transparent;
    color: var(--pd-gold);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 12px 20px;
  }
  .pd-drawer {
    top: auto;
    width: 100%;
    max-height: 88vh;
    border-radius: 16px 16px 0 0;
    border-left: 0;
  }
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/templates/festa-premium/festa-premium.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************/
/* Festa «Преміум» vitrine — ONE module: editorial cream/maroon landing on top,
 * the real catalog + cart + product-detail below, one brand, one CSS space.
 * Landing values are ported VERBATIM from premium.dc.html (colours, clamps,
 * radii, shadows, animations). Everything is `fpm-` namespaced and tokens live
 * on `.fpm-root` (NOT global :root), so the skin never leaks into / is leaked
 * into by the storefront theme. */

.fpm-root {
  /* ---- Brand tokens (Преміум palette) ---- */
  --fpm-brand: #7f151f;
  --fpm-brand-dark: #5e1018;
  --fpm-brand-bright: #d4283a;
  --fpm-cream: #faf3ec;
  --fpm-white: #ffffff;
  --fpm-ink: #1b1113;
  --fpm-footer: #420b10;
  --fpm-muted: #6e5c5e;
  --fpm-muted-2: #7a6a6c;
  --fpm-muted-3: #8a7779;

  /* Display stack === prototype, Cyrillic-aware (Anton latin, Oswald cyrillic). */
  --fpm-display: var(--fpm-font-display, "Anton"),
    var(--fpm-font-head, "Oswald"), sans-serif;
  --fpm-head: var(--fpm-font-head, "Oswald"), sans-serif;
  --fpm-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

  font-family: var(--fpm-body);
  color: var(--fpm-ink);
  background: var(--fpm-cream);
  /* `clip` (not `hidden`) so the root still trims any horizontal off-canvas
     overflow WITHOUT becoming a scroll container — `overflow-x: hidden` forces
     `overflow-y: auto`, which silently breaks `position: sticky` on the topbar
     (sticky would measure against this box instead of the viewport). Verified
     live: with `hidden` the topbar scrolled away; with `clip` it pins at top:0. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.fpm-root *,
.fpm-root *::before,
.fpm-root *::after {
  box-sizing: border-box;
}
.fpm-root a {
  color: inherit;
  text-decoration: none;
}
.fpm-root ::selection {
  background: var(--fpm-brand);
  color: #fff;
}

/* ---- Shared layout helpers ---- */
.fpm-container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
}
.fpm-promos .fpm-container {
  max-width: 1200px;
}
.fpm-section {
  padding: clamp(60px, 9vw, 120px) clamp(16px, 4vw, 56px);
}

/* ---- Headings / eyebrow ---- */
.fpm-h1 {
  font-family: var(--fpm-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.01em;
  margin: 0;
  font-size: clamp(38px, 9vw, 100px);
  color: var(--fpm-ink);
}
.fpm-h2 {
  font-family: var(--fpm-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin: 0;
  font-size: clamp(34px, 7vw, 76px);
  color: var(--fpm-ink);
}
.fpm-h2--light {
  color: #fff;
}
.fpm-eyebrow {
  font-family: var(--fpm-head);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: clamp(11px, 1.6vw, 14px);
  color: var(--fpm-brand);
  font-weight: 600;
  margin-bottom: 16px;
}
.fpm-eyebrow--light {
  color: rgba(255, 255, 255, 0.75);
}

/* ---- Buttons (pills) ---- */
.fpm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fpm-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 999px;
  font-size: clamp(14px, 2.2vw, 17px);
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.2s, color 0.2s, transform 0.2s, border-color 0.2s;
  text-decoration: none;
}
.fpm-btn--primary {
  background: var(--fpm-brand);
  color: #fff;
  padding: 18px 38px;
}
.fpm-btn--primary:hover {
  background: var(--fpm-brand-dark);
  transform: translateY(-2px);
}
.fpm-btn--outline {
  border-color: var(--fpm-brand);
  color: var(--fpm-brand);
  background: transparent;
  padding: 16px 36px;
}
.fpm-btn--outline:hover {
  background: var(--fpm-brand);
  color: #fff;
}
.fpm-btn--white {
  background: #fff;
  color: var(--fpm-brand);
  padding: 16px 34px;
}
.fpm-btn--white:hover {
  transform: translateY(-2px);
}
.fpm-btn--outline-white {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  background: transparent;
  padding: 16px 38px;
}
.fpm-btn--outline-white:hover {
  background: #fff;
  color: var(--fpm-ink);
  border-color: #fff;
}

/* ---- Scroll progress bar ---- */
.fpm-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--fpm-brand);
  z-index: 120;
}

/* ---- Scroll reveal (JS adds .is-in) ---- */
.fpm-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.fpm-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ====================================================================== */
/* TOP-BAR (header + top-marquee as one sticky block — sticky-header-spec) */
/* ====================================================================== */
/* The shell wraps FpmHeader (+ the premium/street `top`-marquee on «Головна»)
   in `.fpm-topbar`. With `--sticky` (owner toggle ON, the default) the WHOLE
   strip pins to the top on scroll; without it the strip scrolls away with the
   page. z-index sits BELOW the fixed drawer/cart/detail overlays. */
.fpm-topbar {
  position: relative;
  z-index: 60;
}
.fpm-topbar--sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

/* ====================================================================== */
/* HEADER                                                                 */
/* ====================================================================== */
/* Stickiness now lives on the `.fpm-topbar` wrapper (so header + marquee pin
   together). The header keeps its own look only — no independent sticky. */
.fpm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px clamp(16px, 4vw, 56px);
  background: rgba(250, 243, 236, 0.88);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(127, 21, 31, 0.1);
}
.fpm-header__logo {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.fpm-header__logo .fp-logo-img {
  height: 54px;
  width: auto;
  display: block;
}
.fpm-header__logo .fp-logo-text {
  font-family: var(--fpm-display);
  font-size: 24px;
  letter-spacing: 0.04em;
}
.fpm-header__nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.4vw, 24px);
}
.fpm-header__phone {
  font-family: var(--fpm-head);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--fpm-brand);
  font-size: clamp(15px, 2.4vw, 18px);
  white-space: nowrap;
}
.fpm-header__cta {
  padding: 12px 26px;
  font-size: clamp(13px, 2vw, 15px);
}
.fpm-header__cart {
  position: relative;
  background: none;
  border: 1.5px solid rgba(127, 21, 31, 0.25);
  border-radius: 999px;
  width: 44px;
  height: 44px;
  font-size: 18px;
  cursor: pointer;
  color: var(--fpm-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s;
}
.fpm-header__cart:hover {
  border-color: var(--fpm-brand);
  background: rgba(127, 21, 31, 0.05);
}
.fpm-header__cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--fpm-brand);
  color: #fff;
  font-family: var(--fpm-head);
  font-weight: 600;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Brand section nav (Головна · Меню · CMS · Доставка · Контакти) ---- */
.fpm-header__sections {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.fpm-header__sections-rail {
  display: flex;
  align-items: center;
  gap: clamp(2px, 1vw, 10px);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.fpm-header__sections-rail::-webkit-scrollbar {
  display: none;
}
.fpm-navlink {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  background: none;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--fpm-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(13px, 1.6vw, 15px);
  color: var(--fpm-muted);
  transition: color 0.2s, background 0.2s;
}
.fpm-navlink:hover {
  color: var(--fpm-brand);
}
.fpm-navlink.is-active {
  color: var(--fpm-brand);
  background: rgba(127, 21, 31, 0.08);
}

/* On a phone the section nav drops to its own full-width row UNDER the logo +
   actions and scrolls horizontally (chips), so even many CMS pages stay
   reachable without a burger; touch targets keep ≥44px height. */
@media (max-width: 760px) {
  .fpm-header {
    padding: 12px clamp(12px, 4vw, 20px);
    row-gap: 8px;
  }
  .fpm-header__sections {
    order: 3;
    flex: 1 0 100%;
    justify-content: flex-start;
    margin: 0 -4px;
    padding: 2px 4px;
    border-top: 1px solid rgba(127, 21, 31, 0.08);
  }
  .fpm-header__sections-rail {
    width: 100%;
    gap: 4px;
  }
  .fpm-navlink {
    padding: 8px 14px;
    letter-spacing: 0.03em;
  }
  /* Header is taller (two rows, sticky) → let the chip rail scroll away rather
     than fight the header for the same top edge. Override BOTH the base and the
     `--sticky-top`-scoped rule (the scoped selector has higher specificity, so
     it must be matched here to win on mobile — festa_nav stays intact). */
  .fpm-chips,
  .fpm-root--sticky-top .fpm-chips {
    position: static;
    top: auto;
  }
}

/* ====================================================================== */
/* HERO                                                                   */
/* ====================================================================== */
.fpm-hero {
  background: var(--fpm-cream);
  padding: clamp(40px, 7vw, 96px) clamp(16px, 4vw, 56px) clamp(48px, 8vw, 104px);
}
.fpm-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
.fpm-hero__copy {
  flex: 1 1 440px;
  min-width: 0;
}
.fpm-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--fpm-head);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: clamp(11px, 1.6vw, 14px);
  color: var(--fpm-brand);
  font-weight: 600;
  margin-bottom: clamp(24px, 4vw, 38px);
}
.fpm-hero__eyebrow-rule {
  width: 30px;
  height: 1px;
  background: var(--fpm-brand);
}
.fpm-hero__title {
  font-family: var(--fpm-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.01em;
  margin: 0;
  font-size: clamp(48px, 11vw, 142px);
  color: var(--fpm-brand);
}
.fpm-hero__title-stroke {
  -webkit-text-stroke: clamp(1.5px, 0.5vw, 4px) var(--fpm-brand);
  color: transparent;
}
.fpm-hero__sub {
  max-width: 480px;
  margin: clamp(26px, 4vw, 40px) 0 0;
  font-size: clamp(16px, 2.2vw, 21px);
  line-height: 1.6;
  color: #4a3739;
}
.fpm-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(30px, 5vw, 46px);
}
.fpm-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(30px, 6vw, 68px);
  margin-top: clamp(44px, 7vw, 76px);
}
.fpm-stat__num {
  font-family: var(--fpm-display);
  color: var(--fpm-brand);
  font-size: clamp(30px, 6vw, 52px);
  line-height: 1;
}
.fpm-stat__suffix {
  font-size: 0.5em;
}
.fpm-stat__label {
  font-family: var(--fpm-head);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 13px;
  color: var(--fpm-muted-3);
  margin-top: 10px;
}

/* Hero framed photo */
.fpm-hero__photo-wrap {
  position: relative;
  flex: 1 1 360px;
  display: flex;
  justify-content: center;
  min-width: 0;
}
.fpm-hero__photo-wrap > .fpm-hero__photo {
  animation: fpm-float 7s ease-in-out infinite;
}
.fpm-hero__photo {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(127, 21, 31, 0.18);
  background: linear-gradient(135deg, #f1e3d6, #e6d2c4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fpm-hero__photo-frame {
  position: absolute;
  inset: clamp(-22px, -2vw, -14px);
  border: 1.5px solid rgba(127, 21, 31, 0.25);
  border-radius: 34px;
  max-width: 524px;
  margin: 0 auto;
  pointer-events: none;
  z-index: 1;
}
.fpm-hero__photo-label {
  font-family: var(--fpm-head);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 13px;
  color: rgba(127, 21, 31, 0.45);
}
.fpm-hero__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Video-hero: an <iframe> (YouTube) or <video> (direct/file) fills the same 4/5
 * framed slot as the photo, cover-cropped. It is a silent looping BACKDROP, so
 * pointer-events are off (no controls, no click-through) — it reads as a moving
 * photo. The frame (.fpm-hero__photo) is aspect-ratio 4/5 + overflow:hidden. */
.fpm-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover; /* works for a real <video> element */
  pointer-events: none;
}
/* A YouTube <iframe> ignores object-fit — its player letterboxes the 16:9 video
 * inside whatever box we give it, leaving bars in the 4/5 slot. So instead size
 * the iframe itself to a 16:9 box that COVERS the 4/5 frame (height = frame,
 * width = height·16/9 = 222.22% of a 4/5 frame), centre it, and let the frame's
 * overflow:hidden crop the overflowing sides → the video fills the slot. */
iframe.fpm-hero__media {
  inset: auto;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 222.222%;
  transform: translate(-50%, -50%);
  object-fit: fill;
}
@keyframes fpm-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

/* ====================================================================== */
/* THIN MARQUEE                                                            */
/* ====================================================================== */
.fpm-marquee {
  background: var(--fpm-brand);
  color: #fff;
  overflow: hidden;
  padding: 13px 0;
}
.fpm-marquee__track {
  display: flex;
  width: max-content;
  /* Duration is owner-overridable (E3): the inline `--marquee-dur` wins when the
   * owner changed marquee_speed_s; otherwise the native 34s applies. */
  animation: fpm-marquee var(--marquee-dur, 34s) linear infinite;
}
.fpm-marquee__chunk {
  font-family: var(--fpm-head);
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(13px, 1.8vw, 16px);
  letter-spacing: 0.24em;
  white-space: nowrap;
  padding-right: 0;
}
.fpm-marquee__sep {
  opacity: 0.7;
}
@keyframes fpm-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ====================================================================== */
/* PROMOS (placeholders)                                                  */
/* ====================================================================== */
.fpm-promos {
  background: #fff;
}
.fpm-section__head--center {
  text-align: center;
  max-width: 680px;
  margin: 0 auto clamp(40px, 6vw, 64px);
}
.fpm-section__lead {
  margin: 18px auto 0;
  max-width: 480px;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.6;
  color: var(--fpm-muted-2);
}
.fpm-promos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: clamp(18px, 2.5vw, 28px);
  gap: clamp(18px, 2.5vw, 28px);
}
.fpm-promo {
  border: 1px solid rgba(127, 21, 31, 0.12);
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.25s, box-shadow 0.25s;
}
.fpm-promo:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(127, 21, 31, 0.14);
}
.fpm-promo__media {
  position: relative;
  height: 210px;
  background: linear-gradient(135deg, #f1e3d6, #e6d2c4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fpm-promo__media-label {
  font-family: var(--fpm-head);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  color: rgba(127, 21, 31, 0.4);
}
.fpm-promo__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fpm-promo__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--fpm-display);
  background: var(--fpm-brand);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  padding: 8px 13px;
  border-radius: 12px;
}
.fpm-promo__chip {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--fpm-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.92);
  color: var(--fpm-brand);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
}
.fpm-promo__body {
  padding: 22px 24px 26px;
}
.fpm-promo__title {
  font-family: var(--fpm-head);
  font-weight: 600;
  font-size: 20px;
  color: var(--fpm-ink);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 6px;
}
.fpm-promo__desc {
  margin: 0 0 18px;
  color: var(--fpm-muted-2);
  font-size: 15px;
  line-height: 1.5;
}
/* Premium nuance: card CTA = text with a bottom border (NOT a filled button). */
.fpm-promo__cta {
  display: inline-block;
  font-family: var(--fpm-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fpm-brand);
  font-size: 14px;
  border: none;
  background: none;
  border-bottom: 2px solid var(--fpm-brand);
  padding: 0 0 3px;
  cursor: pointer;
}
.fpm-promo__cta:hover {
  color: var(--fpm-brand-dark);
  border-color: var(--fpm-brand-dark);
}

/* ====================================================================== */
/* STEPS                                                                  */
/* ====================================================================== */
.fpm-steps {
  background: var(--fpm-cream);
}
.fpm-steps__title {
  margin: 0 0 clamp(36px, 5vw, 56px);
}
.fpm-steps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: clamp(24px, 3vw, 40px);
  gap: clamp(24px, 3vw, 40px);
}
.fpm-step__num {
  font-family: var(--fpm-display);
  color: var(--fpm-brand);
  font-size: clamp(44px, 8vw, 72px);
  line-height: 1;
}
.fpm-step__rule {
  width: 40px;
  height: 2px;
  background: rgba(127, 21, 31, 0.3);
  margin: 14px 0 16px;
}
.fpm-step__title {
  font-family: var(--fpm-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 20px;
  margin: 0 0 8px;
  color: var(--fpm-ink);
}
.fpm-step__desc {
  margin: 0;
  color: var(--fpm-muted);
  font-size: 15px;
  line-height: 1.55;
}

/* ====================================================================== */
/* DELIVERY                                                               */
/* ====================================================================== */
.fpm-delivery {
  background: var(--fpm-brand);
  color: #fff;
}
.fpm-delivery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: clamp(32px, 5vw, 72px);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.fpm-delivery__lead {
  margin: 0 0 30px;
  font-size: clamp(16px, 2.2vw, 19px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  max-width: 440px;
}
.fpm-delivery__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
}
.fpm-fact {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px;
  padding: 26px;
}
.fpm-fact__num {
  font-family: var(--fpm-display);
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1;
}
.fpm-fact__suffix {
  font-size: 0.45em;
}
.fpm-fact__label {
  font-family: var(--fpm-head);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 10px;
}

/* ====================================================================== */
/* REVIEWS                                                                */
/* ====================================================================== */
.fpm-reviews {
  background: var(--fpm-cream);
}
.fpm-reviews__title {
  margin: 0;
}
.fpm-reviews__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: clamp(18px, 2.5vw, 28px);
  gap: clamp(18px, 2.5vw, 28px);
}
.fpm-review {
  background: #fff;
  border: 1px solid rgba(127, 21, 31, 0.1);
  border-radius: 24px;
  padding: 32px;
  margin: 0;
}
.fpm-review__stars {
  color: var(--fpm-brand);
  font-size: 18px;
  letter-spacing: 3px;
  margin-bottom: 16px;
}
.fpm-review__quote {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.6;
  color: #3a2a2c;
}
.fpm-review__name {
  font-family: var(--fpm-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fpm-ink);
}

/* ====================================================================== */
/* APP CTA                                                                */
/* ====================================================================== */
.fpm-appcta {
  background: var(--fpm-ink);
  color: #fff;
  text-align: center;
}
.fpm-appcta__inner {
  max-width: 760px;
  margin: 0 auto;
}
.fpm-appcta .fpm-h1 {
  color: #fff;
}
.fpm-appcta__sub {
  margin: clamp(22px, 3vw, 30px) auto 0;
  max-width: 520px;
  font-size: clamp(16px, 2.4vw, 20px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}
.fpm-appcta__host {
  color: #fff;
  font-weight: 600;
}
.fpm-appcta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: clamp(30px, 5vw, 42px);
}
.fpm-appcta .fpm-btn--primary:hover {
  background: var(--fpm-brand-bright);
}

/* ====================================================================== */
/* FOOTER                                                                 */
/* ====================================================================== */
.fpm-footer {
  background: var(--fpm-footer);
  color: #fff;
  padding: clamp(48px, 7vw, 80px) clamp(16px, 4vw, 56px) clamp(28px, 4vw, 40px);
}
.fpm-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: clamp(28px, 4vw, 48px);
  gap: clamp(28px, 4vw, 48px);
}
.fpm-footer__mark .fp-logo-img {
  width: 130px;
  height: auto;
  display: block;
  margin-bottom: 18px;
}
.fpm-footer__mark .fp-logo-text {
  font-family: var(--fpm-display);
  font-size: 22px;
  color: #fff;
  margin-bottom: 18px;
  display: inline-block;
}
.fpm-footer__slogan {
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  line-height: 1.6;
  max-width: 240px;
}
.fpm-footer__col-title {
  font-family: var(--fpm-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 16px;
}
.fpm-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fpm-footer__list li {
  margin-bottom: 10px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
}
.fpm-footer__list a,
.fpm-footer__link-btn {
  color: #fff;
  font-size: 15px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.fpm-footer__link-btn:hover,
.fpm-footer__list a:hover {
  text-decoration: underline;
}
.fpm-footer__muted {
  color: rgba(255, 255, 255, 0.65) !important;
  line-height: 1.7;
}
.fpm-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.fpm-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  transition:
    background 0.18s ease,
    transform 0.18s ease;
}
.fpm-footer__social-link:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}
.fpm-footer__bottom {
  max-width: 1160px;
  margin: clamp(36px, 5vw, 56px) auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}

/* ====================================================================== */
/* CONTENT PAGES (Доставка / Контакти / CMS) — brand-framed                */
/* ====================================================================== */
/* Wrap the SHARED .info-page / .cms-content markup in the cream brand frame
   and retint its headings to maroon premium typography (no logic duplicated). */
.fpm-content {
  background: var(--fpm-cream);
  min-height: 60vh;
  padding: clamp(32px, 6vw, 72px) clamp(16px, 4vw, 56px) clamp(48px, 8vw, 96px);
}
.fpm-content__inner {
  max-width: 920px;
}
.fpm-content .info-page-title {
  font-family: var(--fpm-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
  font-size: clamp(30px, 6vw, 56px);
  color: var(--fpm-ink);
  margin: 0 0 clamp(20px, 3vw, 32px);
}
.fpm-content .info-block-title {
  font-family: var(--fpm-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(16px, 2.4vw, 20px);
  color: var(--fpm-brand);
  margin: 0 0 14px;
}
.fpm-content .info-block {
  margin-bottom: clamp(28px, 4vw, 44px);
}
.fpm-content .zones-table,
.fpm-content .hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.fpm-content .zones-table th,
.fpm-content .zones-table td,
.fpm-content .hours-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(127, 21, 31, 0.12);
}
.fpm-content .zones-table th {
  font-family: var(--fpm-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
  color: var(--fpm-muted);
}
.fpm-content .hours-table tr.today td {
  color: var(--fpm-brand);
  font-weight: 600;
}
.fpm-content .payment-list,
.fpm-content .info-block ul {
  margin: 0;
  padding-left: 1.2em;
  line-height: 1.9;
}
.fpm-content .contact-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  margin: 0 0 12px;
}
.fpm-content .link {
  color: var(--fpm-brand);
  text-decoration: underline;
}
.fpm-content .muted {
  color: var(--fpm-muted-2);
}
.fpm-content .muted.small {
  font-size: 13px;
}
.fpm-content .info-status.open {
  color: #1f7a3d;
  font-weight: 600;
}
.fpm-content .info-status.closed {
  color: var(--fpm-brand);
  font-weight: 600;
}
.fpm-content .cms-content {
  font-size: 16px;
  line-height: 1.7;
  color: var(--fpm-ink);
}
.fpm-content .cms-content h2,
.fpm-content .cms-content h3 {
  font-family: var(--fpm-head);
  color: var(--fpm-brand);
  margin: 1.6em 0 0.6em;
}
.fpm-content .cms-content a {
  color: var(--fpm-brand);
  text-decoration: underline;
}
.fpm-content .load-state {
  color: var(--fpm-muted-2);
  padding: 32px 0;
}

/* ====================================================================== */
/* SHOP (catalog wrapper) — the «Меню» section                            */
/* ====================================================================== */
.fpm-shop {
  background: var(--fpm-cream);
  scroll-margin-top: 72px;
}
/* Catalog as a standalone section (header sticky above it) — keep a touch of
   breathing room at the top instead of the old hero. */
.fpm-shop--page {
  min-height: 60vh;
  padding-top: 8px;
}

/* ---- Category chip rail (below the brand header on «Меню») ----
   The rail pins UNDER the sticky topbar only when the owner toggle is ON
   (`.fpm-root--sticky-top`). On «Меню» the topbar is the header alone (no
   top-marquee there), so the offset is the header height (~86px). z-index 30
   keeps it below the topbar (60) and above the catalog. */
.fpm-chips {
  z-index: 30;
  background: rgba(250, 243, 236, 0.92);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(127, 21, 31, 0.1);
  padding: 12px clamp(16px, 4vw, 56px);
}
.fpm-root--sticky-top .fpm-chips {
  position: -webkit-sticky;
  position: sticky;
  top: 86px;
}
.fpm-chips__inner {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.fpm-chips__rail {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.fpm-chips__tools {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.fpm-search {
  width: clamp(120px, 16vw, 230px);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(127, 21, 31, 0.22);
  background: #fff;
  color: #2b1416;
  font-size: 13px;
  outline: none;
}
.fpm-search:focus { border-color: var(--fpm-brand); }
.fpm-sort { display: inline-flex; align-items: center; gap: 6px; }
.fpm-sort__lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--fpm-brand);
  white-space: nowrap;
}
.fpm-sort__select {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1.5px solid rgba(127, 21, 31, 0.22);
  background: #fff;
  color: var(--fpm-brand);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
}
.fpm-sort__select:focus { border-color: var(--fpm-brand); }
@media (max-width: 680px) {
  .fpm-chips__inner { flex-wrap: wrap; }
  .fpm-chips__tools { order: 1; width: 100%; }
  .fpm-chips__rail { order: 2; flex-basis: 100%; }
  .fpm-search { flex: 1 1 auto; width: auto; }
  .fpm-sort__lbl { display: none; }
}
.fpm-chips__rail::-webkit-scrollbar {
  display: none;
}
.fpm-chip-nav {
  flex: 0 0 auto;
  font-family: var(--fpm-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(127, 21, 31, 0.22);
  background: transparent;
  color: var(--fpm-brand);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.fpm-chip-nav:hover {
  border-color: var(--fpm-brand);
}
.fpm-chip-nav.is-active {
  background: var(--fpm-brand);
  color: #fff;
  border-color: var(--fpm-brand);
}

/* ---- Catalog ---- */
.fpm-catalog {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 48px) clamp(16px, 4vw, 56px) clamp(60px, 9vw, 96px);
}
.fpm-cat-section {
  scroll-margin-top: 88px;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.fpm-cat-section__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(127, 21, 31, 0.12);
}
.fpm-cat-section__title {
  font-family: var(--fpm-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
  font-size: clamp(26px, 4.5vw, 44px);
  color: var(--fpm-ink);
  margin: 0;
}
.fpm-cat-section__window {
  font-family: var(--fpm-head);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  font-weight: 600;
  color: var(--fpm-brand);
  background: rgba(127, 21, 31, 0.08);
  padding: 5px 12px;
  border-radius: 999px;
}
.fpm-cat-section__window.is-closed {
  color: var(--fpm-muted);
  background: rgba(110, 92, 94, 0.12);
}
.fpm-cat-section__desc {
  margin: 12px 0 0;
  color: var(--fpm-muted-2);
  font-size: 15px;
  line-height: 1.55;
}
.fpm-empty {
  text-align: center;
  color: var(--fpm-muted);
  padding: 48px 0;
  font-size: 16px;
}

/* ---- Grid ---- */
.fpm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-gap: clamp(16px, 2vw, 24px);
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(18px, 2.5vw, 26px);
}
@media (min-width: 760px) {
  .fpm-grid.fpm-grid--cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .fpm-grid.fpm-grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .fpm-grid.fpm-grid--cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---- Product card ---- */
.fpm-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(127, 21, 31, 0.1);
  border-radius: 24px;
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
}
.fpm-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(127, 21, 31, 0.14);
}
.fpm-card__media {
  position: relative;
  height: 200px;
  background: linear-gradient(135deg, #f1e3d6, #e6d2c4);
  cursor: pointer;
  overflow: hidden;
}
.fpm-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s;
}
.fpm-card:hover .fpm-card__img {
  transform: scale(1.04);
}
.fpm-card.is-unavailable .fpm-card__media {
  filter: grayscale(0.5);
  opacity: 0.7;
}
.fpm-card__ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  opacity: 0.5;
}
.fpm-card__discount {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--fpm-display);
  background: var(--fpm-brand);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  padding: 7px 11px;
  border-radius: 10px;
}
.fpm-card__hot {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 20px;
}
.fpm-card__discount + .fpm-card__hot {
  left: auto;
  right: 56px;
}
.fpm-card__tag {
  position: absolute;
  bottom: 14px;
  left: 14px;
  font-family: var(--fpm-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.92);
  color: var(--fpm-brand);
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
}
.fpm-card__fav {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--fpm-brand);
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fpm-card__fav.is-active {
  background: var(--fpm-brand);
  color: #fff;
}
.fpm-card__body {
  padding: 16px 18px 8px;
  flex: 1 1;
}
.fpm-card__name {
  font-family: var(--fpm-head);
  font-weight: 600;
  font-size: 17px;
  color: var(--fpm-ink);
  margin: 0 0 6px;
  line-height: 1.25;
}
.fpm-card__desc {
  margin: 0;
  color: var(--fpm-muted-2);
  font-size: 14px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fpm-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.fpm-chip {
  font-size: 12px;
  color: var(--fpm-muted);
  background: rgba(127, 21, 31, 0.06);
  padding: 4px 9px;
  border-radius: 999px;
}
.fpm-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px 18px;
}
.fpm-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.fpm-price__now {
  font-family: var(--fpm-head);
  font-weight: 700;
  font-size: 19px;
  color: var(--fpm-ink);
}
.fpm-price__old {
  font-size: 14px;
  color: var(--fpm-muted-3);
  text-decoration: line-through;
}
.fpm-add {
  font-family: var(--fpm-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 13px;
  background: var(--fpm-brand);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.fpm-add:hover {
  background: var(--fpm-brand-dark);
  transform: translateY(-1px);
}
.fpm-add:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.fpm-card__unavail {
  font-family: var(--fpm-head);
  font-size: 12px;
  color: var(--fpm-muted);
}
/* Card geometry overrides (card-config) */
.fpm-card--ratio-square .fpm-card__media {
  height: auto;
  aspect-ratio: 1 / 1;
}
.fpm-card--ratio-landscape .fpm-card__media {
  height: auto;
  aspect-ratio: 4 / 3;
}
.fpm-card--ratio-wide .fpm-card__media {
  height: auto;
  aspect-ratio: 16 / 9;
}
.fpm-card--photo-s .fpm-card__media {
  max-height: 170px;
}
.fpm-card--photo-m .fpm-card__media {
  max-height: 240px;
}
.fpm-card--photo-l .fpm-card__media {
  max-height: 320px;
}
.fpm-card--no-photo .fpm-card__media {
  display: none;
}
.fpm-card--btn-round .fpm-add {
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
}
.fpm-card--btn-text .fpm-add {
  background: none;
  color: var(--fpm-brand);
  border-bottom: 2px solid var(--fpm-brand);
  border-radius: 0;
  padding: 2px 0;
}

/* ---- Stepper (shared by card + cart + detail) ---- */
.fpm-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(127, 21, 31, 0.07);
  border-radius: 999px;
  padding: 3px;
}
.fpm-step-btn {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: none;
  background: var(--fpm-brand);
  color: #fff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fpm-step-btn:hover {
  background: var(--fpm-brand-dark);
}
.fpm-step-val {
  min-width: 22px;
  text-align: center;
  font-family: var(--fpm-head);
  font-weight: 600;
  font-size: 15px;
  color: var(--fpm-ink);
}

/* ====================================================================== */
/* CART (FAB / bar / drawer)                                              */
/* ====================================================================== */
.fpm-cart-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--fpm-brand);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 14px 22px;
  font-family: var(--fpm-head);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 14px 36px rgba(127, 21, 31, 0.32);
}
.fpm-cart-fab:hover {
  background: var(--fpm-brand-dark);
}
.fpm-cart-fab__sum {
  font-weight: 700;
}
@media (max-width: 760px) {
  .fpm-cart-fab {
    display: none;
  }
}
.fpm-cart-bar {
  display: none;
}
@media (max-width: 760px) {
  .fpm-cart-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--fpm-brand);
    color: #fff;
    padding: 12px 16px;
    box-shadow: 0 -8px 24px rgba(127, 21, 31, 0.2);
  }
  .fpm-cart-bar__info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }
  .fpm-cart-bar__count {
    font-size: 12px;
    opacity: 0.85;
  }
  .fpm-cart-bar__sum {
    font-family: var(--fpm-head);
    font-weight: 700;
    font-size: 17px;
  }
  .fpm-cart-bar__btn {
    background: #fff;
    color: var(--fpm-brand);
    border: none;
    border-radius: 999px;
    padding: 11px 24px;
    font-family: var(--fpm-head);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    cursor: pointer;
  }
}
.fpm-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(27, 17, 19, 0.5);
  z-index: 70;
}
.fpm-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100%);
  z-index: 80;
  background: var(--fpm-cream);
  display: flex;
  flex-direction: column;
  box-shadow: -16px 0 48px rgba(27, 17, 19, 0.22);
}
.fpm-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(127, 21, 31, 0.12);
}
.fpm-drawer__head h2 {
  font-family: var(--fpm-display);
  text-transform: uppercase;
  font-size: 28px;
  margin: 0;
  color: var(--fpm-brand);
}
.fpm-drawer__close {
  background: none;
  border: none;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  color: var(--fpm-ink);
}
.fpm-drawer__body {
  flex: 1 1;
  overflow-y: auto;
  padding: 16px 22px;
}
.fpm-cart-empty {
  color: var(--fpm-muted);
  text-align: center;
  padding: 40px 0;
}
.fpm-cart-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(127, 21, 31, 0.1);
}
.fpm-cart-line__main {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fpm-cart-line__name {
  font-family: var(--fpm-head);
  font-weight: 600;
  font-size: 15px;
  color: var(--fpm-ink);
}
.fpm-cart-line__mods {
  font-size: 13px;
  color: var(--fpm-muted);
}
.fpm-cart-line__unit {
  font-size: 12px;
  color: var(--fpm-muted-3);
}
.fpm-cart-line__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.fpm-cart-line__total {
  font-family: var(--fpm-head);
  font-weight: 700;
  font-size: 15px;
  color: var(--fpm-ink);
}
.fpm-cart-line__rm {
  background: none;
  border: none;
  color: var(--fpm-muted-3);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.fpm-drawer__foot {
  padding: 16px 22px 22px;
  border-top: 1px solid rgba(127, 21, 31, 0.12);
  background: #fff;
}
.fpm-cart-total {
  display: flex;
  justify-content: space-between;
  font-family: var(--fpm-head);
  font-size: 16px;
  margin-bottom: 14px;
}
.fpm-checkout {
  width: 100%;
  background: var(--fpm-brand);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 16px;
  font-family: var(--fpm-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 16px;
  cursor: pointer;
  margin-top: 12px;
}
.fpm-checkout:hover {
  background: var(--fpm-brand-dark);
}
.fpm-checkout:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ====================================================================== */
/* PRODUCT DETAIL (shared ProductDetailLayout, fpm skin)                  */
/* ====================================================================== */
.fpm-detail-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(27, 17, 19, 0.55);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.fpm-detail {
  position: relative;
  background: var(--fpm-cream);
  border-radius: 28px;
  width: min(960px, 100%);
  max-height: 92vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  overflow: hidden;
}
.fpm-detail__handle {
  display: none;
}
.fpm-detail__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--fpm-ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.fpm-detail__hero {
  grid-row: 1 / span 2;
  position: relative;
}
.fpm-detail__media {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  background: linear-gradient(135deg, #f1e3d6, #e6d2c4);
}
.fpm-detail__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fpm-detail__ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  opacity: 0.5;
}
.fpm-detail__scrim {
  display: none;
}
.fpm-detail__flags {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  gap: 8px;
}
.fpm-detail__flag {
  font-family: var(--fpm-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--fpm-brand);
  color: #fff;
}
.fpm-detail__flag.is-new {
  background: var(--fpm-ink);
}
.fpm-detail__flag.is-hot {
  background: var(--fpm-brand-bright);
}
.fpm-detail__fav {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--fpm-brand);
  font-size: 20px;
  cursor: pointer;
}
.fpm-detail__fav.is-active {
  background: var(--fpm-brand);
  color: #fff;
}
.fpm-detail__body {
  grid-column: 2;
  grid-row: 1;
  overflow-y: auto;
  padding: 28px 28px 8px;
}
.fpm-detail__title {
  font-family: var(--fpm-display);
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(26px, 4vw, 40px);
  color: var(--fpm-ink);
  margin: 0 0 12px;
}
.fpm-detail__desc {
  margin: 0 0 18px;
  color: var(--fpm-muted-2);
  font-size: 15px;
  line-height: 1.55;
}
.fpm-detail__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.fpm-fact {
  display: inline-flex;
  flex-direction: column;
  background: rgba(127, 21, 31, 0.06);
  border-radius: 14px;
  padding: 8px 12px;
  border: none;
}
.fpm-fact--icon {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--fpm-muted);
}
.fpm-fact__k {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fpm-muted-3);
}
.fpm-fact__v {
  font-family: var(--fpm-head);
  font-weight: 600;
  font-size: 14px;
  color: var(--fpm-ink);
}
.fpm-modset {
  margin-bottom: 20px;
}
.fpm-modset__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.fpm-modset__name {
  font-family: var(--fpm-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 14px;
  color: var(--fpm-ink);
}
.fpm-modset__rule {
  font-size: 12px;
  color: var(--fpm-muted-3);
}
.fpm-modset__rule.is-req {
  color: var(--fpm-brand);
  font-weight: 600;
}
.fpm-modset__rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
.fpm-modtile {
  flex: 0 0 auto;
  width: 104px;
  background: #fff;
  border: 1.5px solid rgba(127, 21, 31, 0.12);
  border-radius: 16px;
  padding: 8px;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.fpm-modtile.is-checked {
  border-color: var(--fpm-brand);
  box-shadow: 0 0 0 1px var(--fpm-brand) inset;
}
.fpm-modtile.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
}
.fpm-modtile__media {
  position: relative;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, #f1e3d6, #e6d2c4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fpm-modtile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fpm-modtile__ph {
  font-family: var(--fpm-display);
  font-size: 22px;
  color: var(--fpm-brand);
  opacity: 0.6;
}
.fpm-modtile__check {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--fpm-brand);
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fpm-modtile__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--fpm-ink);
  line-height: 1.2;
}
.fpm-modtile__meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.fpm-modtile__w {
  font-size: 11px;
  color: var(--fpm-muted-3);
}
.fpm-modtile__price {
  font-size: 12px;
  font-weight: 600;
  color: var(--fpm-brand);
}
.fpm-detail__foot {
  grid-column: 2;
  grid-row: 2;
  padding: 16px 28px 22px;
  border-top: 1px solid rgba(127, 21, 31, 0.12);
  background: #fff;
}
.fpm-detail__priceblock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.fpm-detail__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.fpm-detail__price-now {
  font-family: var(--fpm-head);
  font-weight: 700;
  font-size: 24px;
  color: var(--fpm-ink);
}
.fpm-detail__price-old {
  font-size: 16px;
  color: var(--fpm-muted-3);
  text-decoration: line-through;
}
.fpm-detail__sumrow {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--fpm-muted);
  margin-bottom: 10px;
}
.fpm-detail__cta {
  width: 100%;
  background: var(--fpm-brand);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 16px;
  font-family: var(--fpm-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 16px;
  cursor: pointer;
}
.fpm-detail__cta:hover {
  background: var(--fpm-brand-dark);
}
.fpm-detail__cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- Detail mobile: bottom sheet ---- */
@media (max-width: 760px) {
  .fpm-detail-backdrop {
    align-items: flex-end;
    padding: 0;
  }
  .fpm-detail {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    width: 100%;
    max-height: 94vh;
    border-radius: 24px 24px 0 0;
  }
  .fpm-detail__handle {
    display: block;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: rgba(127, 21, 31, 0.25);
    z-index: 6;
  }
  .fpm-detail__hero {
    grid-row: 1;
  }
  .fpm-detail__media {
    min-height: 220px;
    height: 220px;
  }
  .fpm-detail__body {
    grid-column: 1;
    grid-row: 2;
  }
  .fpm-detail__foot {
    grid-column: 1;
    grid-row: 3;
  }
}

/* ====================================================================== */
/* Reduced motion                                                         */
/* ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  .fpm-root *,
  .fpm-root *::before,
  .fpm-root *::after {
    animation: none !important;
    transition: none !important;
  }
  .fpm-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/templates/festa-shell/festa-shell.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/
/* Festa nav-shell brand themes (E5a / Q1).
 *
 * The shared shell renders the `fpm-` namespaced header / Меню catalog / footer /
 * cart. `festa_premium` uses NO brand class → the cream `--fpm-*` defaults on
 * `.fpm-root` stand unchanged (byte-for-byte baseline — the «не поламати»
 * invariant). The brand classes below re-point those tokens AND retint the few
 * surfaces whose colours are hardcoded in the base CSS (header/chips cream rgba,
 * the white product card, the cream catalog/drawer/detail backgrounds), so a skin
 * gets a full look swap with ZERO DOM duplication.
 *
 * Only the SHARED shell surfaces are themed here — the «Головна» landing carries
 * its own CSS namespace (`fp-` for motion) and is untouched by these rules. */

/* ====================================================================== */
/* «Рух» (motion) — DARK theme over the shared shell                       */
/* ====================================================================== */
.fpm-root.fpm-brand-motion {
  /* Brand accent stays the warm maroon-bright «Рух» red; surfaces go dark. */
  --fpm-brand: #d4283a;
  --fpm-brand-dark: #b21d2d;
  --fpm-brand-bright: #ff3b4e;
  --fpm-cream: #14110f; /* base page surface (was light cream) */
  --fpm-white: #1d1916; /* card/sheet surface (was #fff) */
  --fpm-ink: #f4ece6; /* primary text (was near-black) */
  --fpm-footer: #0d0b0a; /* footer (already dark; deepen it) */
  --fpm-muted: #9a8c86;
  --fpm-muted-2: #b3a79f;
  --fpm-muted-3: #8a7c74;

  background: var(--fpm-cream);
}

/* ---- Header / chip rail: opaque dark glass instead of the cream rgba ---- */
.fpm-brand-motion .fpm-header {
  background: rgba(20, 17, 15, 0.9);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.fpm-brand-motion .fpm-header__phone {
  color: var(--fpm-ink);
}
.fpm-brand-motion .fpm-navlink {
  color: var(--fpm-muted-2);
}
.fpm-brand-motion .fpm-navlink:hover,
.fpm-brand-motion .fpm-navlink.is-active {
  color: var(--fpm-brand-bright);
}
.fpm-brand-motion .fpm-navlink.is-active {
  background: rgba(212, 40, 58, 0.16);
}
/* The header logo is a maroon stamp; on dark, swap to the white wordmark tone. */
.fpm-brand-motion .fpm-header__logo .fp-logo-text {
  color: var(--fpm-ink) !important;
}

.fpm-brand-motion .fpm-chips {
  background: rgba(20, 17, 15, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.fpm-brand-motion .fpm-chip-nav {
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--fpm-ink);
  background: transparent;
}
.fpm-brand-motion .fpm-chip-nav:hover {
  border-color: var(--fpm-brand-bright);
}
.fpm-brand-motion .fpm-chip-nav.is-active {
  background: var(--fpm-brand);
  border-color: var(--fpm-brand);
  color: #fff;
}

/* ---- Catalog surfaces (base CSS hardcodes cream / #fff / maroon hairlines) ---- */
.fpm-brand-motion .fpm-shop,
.fpm-brand-motion .fpm-content {
  background: var(--fpm-cream);
}
.fpm-brand-motion .fpm-cat-section__head {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.fpm-brand-motion .fpm-card {
  background: var(--fpm-white);
  border-color: rgba(255, 255, 255, 0.08);
}
.fpm-brand-motion .fpm-card:hover {
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.5);
}
.fpm-brand-motion .fpm-card__media {
  background: linear-gradient(135deg, #2a2420, #201b18);
}
.fpm-brand-motion .fpm-card__tag,
.fpm-brand-motion .fpm-card__fav {
  background: rgba(20, 17, 15, 0.86);
}
.fpm-brand-motion .fpm-cat-section__window {
  background: rgba(212, 40, 58, 0.16);
}
.fpm-brand-motion .fpm-chip {
  background: rgba(255, 255, 255, 0.08);
  color: var(--fpm-muted-2);
}
.fpm-brand-motion .fpm-stepper {
  background: rgba(255, 255, 255, 0.08);
}

/* ---- Cart drawer / detail modal (cream backgrounds → dark) ---- */
.fpm-brand-motion .fpm-drawer,
.fpm-brand-motion .fpm-detail {
  background: var(--fpm-cream);
}

/* ---- Content pages: the borrowed `.info-page` / `.cms-content` markup ---- */
.fpm-brand-motion .fpm-content .zones-table th {
  background: rgba(212, 40, 58, 0.14);
}
.fpm-brand-motion .fpm-content .zones-table th,
.fpm-brand-motion .fpm-content .zones-table td,
.fpm-brand-motion .fpm-content .hours-table td {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Footer is dark already (`--fpm-footer`); the token override deepens it and the
   white-on-dark footer text keeps working unchanged. */

/* ====================================================================== */
/* «Вулиця» (street) — INTERIM light tint over the cream base              */
/* ====================================================================== */
/* No dedicated Street visual yet (decision #5: nav-frame first, polish later).
   We keep the cream base but nudge the brand accent to a streetier orange so the
   skin reads distinct from premium while it shares the premium landing. A full
   Street palette/typography is a follow-up pass. */
.fpm-root.fpm-brand-street {
  --fpm-brand: #c2410c;
  --fpm-brand-dark: #9a330a;
  --fpm-brand-bright: #ea580c;
  --fpm-footer: #2a1206;
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/templates/festa-premium/FestaPremium.tsx","import":"Anton","arguments":[{"weight":"400","subsets":["latin"],"display":"swap","variable":"--fpm-font-display"}],"variableName":"anton"} ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* vietnamese */
@font-face {
  font-family: '__Anton_ec6dc7';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/6ced06489fd81a3f-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Anton_ec6dc7';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/aa5f74293546f6d0-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Anton_ec6dc7';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/62c97acc3aa63787-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: '__Anton_Fallback_ec6dc7';src: local("Arial");ascent-override: 129.70%;descent-override: 36.29%;line-gap-override: 0.00%;size-adjust: 90.69%
}.__className_ec6dc7 {font-family: '__Anton_ec6dc7', '__Anton_Fallback_ec6dc7';font-weight: 400;font-style: normal
}.__variable_ec6dc7 {--fpm-font-display: '__Anton_ec6dc7', '__Anton_Fallback_ec6dc7'
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/templates/festa-premium/FestaPremium.tsx","import":"Oswald","arguments":[{"weight":["400","500","600","700"],"subsets":["latin","latin-ext","cyrillic"],"display":"swap","variable":"--fpm-font-head"}],"variableName":"oswald"} ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/b3097673cd409a21-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/2409d02eaee47cb9-s.p.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/b72a6a678d511e3a-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/a33a3f3323a75998-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/bd9b9909c3a641ff-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/b3097673cd409a21-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/2409d02eaee47cb9-s.p.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/b72a6a678d511e3a-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/a33a3f3323a75998-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/bd9b9909c3a641ff-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/b3097673cd409a21-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/2409d02eaee47cb9-s.p.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/b72a6a678d511e3a-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/a33a3f3323a75998-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/bd9b9909c3a641ff-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/b3097673cd409a21-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/2409d02eaee47cb9-s.p.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/b72a6a678d511e3a-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/a33a3f3323a75998-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/bd9b9909c3a641ff-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: '__Oswald_Fallback_ff7915';src: local("Arial");ascent-override: 146.51%;descent-override: 35.49%;line-gap-override: 0.00%;size-adjust: 81.43%
}.__className_ff7915 {font-family: '__Oswald_ff7915', '__Oswald_Fallback_ff7915';font-style: normal
}.__variable_ff7915 {--fpm-font-head: '__Oswald_ff7915', '__Oswald_Fallback_ff7915'
}

/*!********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/components/landing/landing.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************/
/* Festa marketing landing — "Рух" (Motion) style. Self-contained brand CSS
 * space, ported VERBATIM from the designer prototype (ruh.dc.html). The inline
 * CSS in that file is the spec; values here mirror it exactly (colours, clamps,
 * radii, shadows, animations). Every selector is `fp-` namespaced and tokens
 * live on `.fp-root` (the landing wrapper), NOT global :root, so the landing
 * never leaks into / is leaked into by the storefront theme. */

.fp-root {
  /* ---- Brand tokens (Рух palette) ---- */
  --fp-maroon: #7f151f; /* --brand */
  --fp-maroon-bright: #d4283a; /* --brand-bright: hover, ✦ stars, glow */
  --fp-maroon-dark: #420b10; /* --footer */
  --fp-ink: #1b1113; /* --ink: marquee/CTA bg */
  --fp-cream: #faf3ec; /* --cream: light sections */
  --fp-white: #ffffff;

  /* Display stack === prototype, but Cyrillic-aware. Anton is LATIN-ONLY, so a
   * latin wordmark ("FESTA PIZZA") takes Anton while Cyrillic display copy
   * falls to Oswald 700 (condensed/heavy) instead of system Arial. */
  --fp-display: var(--fp-font-display, "Anton"), var(--fp-font-head, "Oswald"),
    sans-serif;
  --fp-head: var(--fp-font-head, "Oswald"), sans-serif;
  --fp-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fp-shadow: 0 8px 24px rgba(27, 17, 19, 0.06);
  --fp-shadow-hover: 0 18px 40px rgba(127, 21, 31, 0.16);

  font-family: var(--fp-body);
  color: var(--fp-ink);
  background: var(--fp-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.fp-root *,
.fp-root *::before,
.fp-root *::after {
  box-sizing: border-box;
}

.fp-root a {
  color: inherit;
  text-decoration: none;
}

/* Section inner container (prototype: max-width 1120–1200 + auto margins). */
.fp-container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}
.fp-promos .fp-container {
  max-width: 1200px;
}

/* Vertical section padding (prototype clamp(56px,9vw,~108–112px)). */
.fp-section {
  padding: clamp(56px, 9vw, 112px) clamp(16px, 4vw, 48px);
}

/* ---- Scroll progress bar (fixed, top; width set by JS) ---- */
.fp-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--fp-maroon), var(--fp-maroon-bright));
  z-index: 120;
}

/* ---- Scroll reveal (JS adds .is-in) ---- */
.fp-reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.fp-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ---- Display / heading helpers ---- */
.fp-h1 {
  font-family: var(--fp-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.01em;
  margin: 0;
  font-size: clamp(38px, 9vw, 96px);
}
.fp-h2 {
  font-family: var(--fp-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin: 0;
  font-size: clamp(34px, 7vw, 72px);
}

.fp-eyebrow {
  display: block;
  font-family: var(--fp-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: clamp(11px, 2vw, 14px);
  color: var(--fp-maroon);
}

/* ---- Buttons / pills (prototype: Oswald 600 uppercase, radius 999px) ---- */
.fp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  font-family: var(--fp-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(14px, 2.2vw, 17px);
  line-height: 1;
  padding: 17px 34px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease,
    border-color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.fp-btn--primary {
  background: var(--fp-maroon);
  color: var(--fp-white);
}
.fp-btn--primary:hover {
  background: var(--fp-maroon-bright);
}
.fp-btn--white {
  background: var(--fp-white);
  color: var(--fp-maroon);
}
.fp-btn--white:hover {
  transform: translateY(-3px);
}
.fp-btn--outline-white {
  background: transparent;
  color: var(--fp-white);
  border-color: rgba(255, 255, 255, 0.55);
  padding: 15px 32px;
}
.fp-btn--outline-white:hover {
  background: var(--fp-white);
  color: var(--fp-maroon);
  border-color: var(--fp-white);
}

/* ---- Logo: real PNG stamp + text fallback ---- */
.fp-logo {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.fp-logo-img {
  display: block;
  height: 100%;
  width: auto;
}
.fp-logo-text {
  font-family: var(--fp-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.85;
  white-space: nowrap;
}

/* ========================================================================= */
/* 1. Header (sticky)                                                         */
/* ========================================================================= */
.fp-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 13px clamp(16px, 4vw, 48px);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(127, 21, 31, 0.12);
}
.fp-header__logo {
  display: inline-flex;
  height: 56px;
  color: var(--fp-maroon);
}
.fp-header__logo .fp-logo {
  height: 56px;
}
.fp-header__logo .fp-logo-text {
  font-size: 34px;
}
.fp-header__nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.4vw, 22px);
}
.fp-header__phone {
  font-family: var(--fp-head);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fp-maroon);
  font-size: clamp(15px, 2.4vw, 18px);
  white-space: nowrap;
}
.fp-header__cta {
  padding: 12px 24px;
  font-size: clamp(13px, 2vw, 15px);
}

/* ========================================================================= */
/* 2. Marquee                                                                */
/* ========================================================================= */
.fp-marquee {
  background: var(--fp-ink);
  color: var(--fp-white);
  overflow: hidden;
  padding: 15px 0;
}
.fp-marquee__track {
  display: flex;
  width: max-content;
  /* Duration is owner-overridable (E3): the inline `--marquee-dur` wins when the
   * owner changed marquee_speed_s; otherwise the native 28s applies. */
  animation: fp-marquee var(--marquee-dur, 28s) linear infinite;
}
.fp-marquee__chunk {
  font-family: var(--fp-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(18px, 3vw, 30px);
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.fp-marquee__star {
  color: var(--fp-maroon-bright);
}

/* ========================================================================= */
/* 3. Hero (motion)                                                          */
/* ========================================================================= */
.fp-hero {
  position: relative;
  background: var(--fp-maroon);
  color: var(--fp-white);
  overflow: hidden;
  padding: clamp(44px, 8vw, 96px) clamp(16px, 4vw, 48px) clamp(48px, 8vw, 90px);
}
.fp-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
}
/* Ghost watermark: real white logo, slow spin, opacity .1, off top-right. */
.fp-hero__ghost {
  position: absolute;
  right: -90px;
  top: -70px;
  z-index: 1;
  width: clamp(280px, 42vw, 520px);
  opacity: 0.1;
  pointer-events: none;
  height: auto;
}
.fp-hero__ghost .fp-logo-img {
  width: 100%;
  height: auto;
  animation: fp-spin 44s linear infinite;
}
.fp-hero__ghost .fp-logo-text {
  font-size: clamp(180px, 42vw, 520px);
  color: var(--fp-white);
  animation: fp-spin 44s linear infinite;
}
/* Pulsing radial glow, bottom-left. */
.fp-hero__glow {
  position: absolute;
  left: -60px;
  bottom: -80px;
  z-index: 0;
  width: clamp(220px, 30vw, 360px);
  height: clamp(220px, 30vw, 360px);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(212, 40, 58, 0.5),
    transparent 68%
  );
  filter: blur(20px);
  animation: fp-glow 6s ease-in-out infinite;
  pointer-events: none;
}
.fp-hero__eyebrow {
  font-family: var(--fp-head);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: clamp(11px, 2vw, 14px);
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
  margin-bottom: clamp(20px, 4vw, 34px);
}
.fp-hero__lead-line {
  font-family: var(--fp-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.01em;
  font-size: clamp(34px, 8vw, 84px);
  color: var(--fp-white);
}
/* --- Rotor: single-line window over a stepped column of category words --- */
.fp-rotor {
  font-family: var(--fp-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(56px, 15vw, 156px);
  line-height: 1;
  height: 1em;
  overflow: hidden;
  margin-top: 4px;
}
.fp-rotor__col {
  animation: fp-rotor 12s infinite;
}
.fp-rotor__word {
  display: block;
  height: 1em;
  -webkit-text-stroke: clamp(1.5px, 0.5vw, 4px) var(--fp-white);
  color: transparent;
}
.fp-hero__sub {
  max-width: 560px;
  margin: clamp(24px, 4vw, 38px) 0 0;
  font-size: clamp(16px, 2.4vw, 21px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}
.fp-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(28px, 5vw, 42px);
}
.fp-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 6vw, 64px);
  margin-top: clamp(40px, 7vw, 68px);
}
.fp-stat__num {
  font-family: var(--fp-display);
  font-weight: 400;
  font-size: clamp(30px, 6vw, 50px);
  line-height: 1;
}
.fp-stat__suffix {
  font-size: 0.5em;
}
.fp-stat__label {
  font-family: var(--fp-head);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 8px;
}

/* ========================================================================= */
/* 4. Promos (5 cards — one per category)                                    */
/* ========================================================================= */
.fp-promos {
  background: var(--fp-white);
}
.fp-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: clamp(24px, 4vw, 40px);
}
.fp-section__head .fp-eyebrow {
  margin-bottom: 14px;
}
.fp-section__head .fp-h2 {
  color: var(--fp-ink);
}
.fp-section__link {
  font-family: var(--fp-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fp-maroon);
  font-size: clamp(14px, 2vw, 16px);
  border-bottom: 2px solid var(--fp-maroon);
  padding-bottom: 4px;
  white-space: nowrap;
}
/* Button variant (FestaShell «Усі акції →» switches the section instead of a
   `/order` link) — reset native button chrome to the link's appearance. */
.fp-section__link--btn {
  background: none;
  border: none;
  border-bottom: 2px solid var(--fp-maroon);
  cursor: pointer;
  line-height: inherit;
}
.fp-promos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: clamp(18px, 2.5vw, 28px);
  gap: clamp(18px, 2.5vw, 28px);
}
/* WHITE card, thin maroon border, soft shadow, hover lift. */
.fp-promo {
  border: 1px solid rgba(127, 21, 31, 0.12);
  border-radius: 22px;
  overflow: hidden;
  background: var(--fp-white);
  box-shadow: var(--fp-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fp-promo:hover {
  transform: translateY(-6px);
  box-shadow: var(--fp-shadow-hover);
}
/* Light photo slot ("Фото акції"); a real photo covers it when present. */
.fp-promo__media {
  position: relative;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
.fp-promo__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fp-promo__media-label {
  font: 13px/1.3 system-ui, -apple-system, sans-serif;
  color: rgba(0, 0, 0, 0.5);
  text-align: center;
  padding-inline: 12px;
}
/* Discount badge: Anton maroon block, top-left. */
.fp-promo__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-family: var(--fp-display);
  font-weight: 400;
  background: var(--fp-maroon);
  color: var(--fp-white);
  font-size: 22px;
  line-height: 1;
  padding: 8px 12px;
  border-radius: 12px;
}
/* Category chip: Oswald pill, top-right. */
.fp-promo__chip {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  font-family: var(--fp-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.92);
  color: var(--fp-maroon);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
}
.fp-promo__body {
  padding: 20px 22px 24px;
}
.fp-promo__title {
  font-family: var(--fp-head);
  font-weight: 700;
  font-size: 20px;
  color: var(--fp-ink);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 6px;
}
.fp-promo__desc {
  margin: 0 0 18px;
  color: #7a6a6c;
  font-size: 15px;
  line-height: 1.45;
}
/* "Замовити": full-width, cream bg, hover -> maroon/white. */
.fp-promo__cta {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--fp-cream);
  color: var(--fp-maroon);
  padding: 12px;
  border-radius: 12px;
  font-size: 14px;
}
.fp-promo__cta:hover {
  background: var(--fp-maroon);
  color: var(--fp-white);
}

/* ========================================================================= */
/* 5. Steps (how to order)                                                   */
/* ========================================================================= */
.fp-steps {
  background: var(--fp-cream);
}
.fp-steps__title {
  color: var(--fp-ink);
  margin-top: 14px;
  margin-bottom: clamp(32px, 5vw, 52px);
}
.fp-steps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: clamp(20px, 3vw, 32px);
  gap: clamp(20px, 3vw, 32px);
}
.fp-step__num {
  font-family: var(--fp-display);
  font-weight: 400;
  color: var(--fp-maroon);
  font-size: clamp(44px, 8vw, 72px);
  line-height: 1;
  opacity: 0.9;
}
.fp-step__title {
  font-family: var(--fp-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 20px;
  margin: 14px 0 8px;
  color: var(--fp-ink);
}
.fp-step__desc {
  margin: 0;
  color: #6e5c5e;
  font-size: 15px;
  line-height: 1.5;
}

/* ========================================================================= */
/* 6. Delivery                                                               */
/* ========================================================================= */
.fp-delivery {
  background: var(--fp-maroon);
  color: var(--fp-white);
}
.fp-delivery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: clamp(32px, 5vw, 64px);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.fp-delivery__copy .fp-eyebrow {
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 14px;
}
.fp-delivery__copy .fp-h2 {
  color: var(--fp-white);
  margin-bottom: 18px;
}
.fp-delivery__lead {
  margin: 0 0 28px;
  font-size: clamp(16px, 2.2vw, 19px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  max-width: 440px;
}
.fp-delivery__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 14px;
  gap: 14px;
}
.fp-fact {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  padding: 24px;
}
.fp-fact__num {
  font-family: var(--fp-display);
  font-weight: 400;
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1;
}
.fp-fact__suffix {
  font-size: 0.45em;
}
.fp-fact__label {
  font-family: var(--fp-head);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 8px;
}

/* ========================================================================= */
/* 7. Reviews                                                                */
/* ========================================================================= */
.fp-reviews {
  background: var(--fp-white);
}
.fp-reviews__title {
  color: var(--fp-ink);
  margin-top: 14px;
  margin-bottom: clamp(32px, 5vw, 52px);
}
.fp-reviews__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: clamp(18px, 2.5vw, 28px);
  gap: clamp(18px, 2.5vw, 28px);
}
.fp-review {
  background: var(--fp-cream);
  border-radius: 22px;
  padding: 30px;
}
.fp-review__stars {
  color: var(--fp-maroon);
  font-size: 18px;
  letter-spacing: 3px;
  margin-bottom: 14px;
}
.fp-review__quote {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.55;
  color: #3a2a2c;
}
.fp-review__name {
  font-family: var(--fp-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fp-ink);
}

/* ========================================================================= */
/* 8. App CTA                                                                */
/* ========================================================================= */
.fp-appcta {
  background: var(--fp-ink);
  color: var(--fp-white);
  text-align: center;
  background-image: radial-gradient(
    circle at 50% 120%,
    rgba(127, 21, 31, 0.6),
    transparent 55%
  );
  padding: clamp(60px, 10vw, 120px) clamp(16px, 4vw, 48px);
}
.fp-appcta__inner {
  max-width: 760px;
  margin: 0 auto;
}
.fp-appcta .fp-h1 {
  color: var(--fp-white);
}
.fp-appcta__sub {
  margin: clamp(20px, 3vw, 28px) auto 0;
  max-width: 520px;
  font-size: clamp(16px, 2.4vw, 20px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}
.fp-appcta__host {
  color: var(--fp-white);
  font-weight: 600;
}
.fp-appcta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: clamp(28px, 5vw, 40px);
}

/* ========================================================================= */
/* 9. Footer                                                                 */
/* ========================================================================= */
.fp-footer {
  background: var(--fp-maroon-dark);
  color: var(--fp-white);
  padding: clamp(48px, 7vw, 80px) clamp(16px, 4vw, 48px) clamp(28px, 4vw, 40px);
}
.fp-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: clamp(28px, 4vw, 48px);
  gap: clamp(28px, 4vw, 48px);
}
.fp-footer__brand-mark {
  width: 130px;
  height: auto;
  display: block;
  margin-bottom: 18px;
}
.fp-footer__brand-mark .fp-logo-img {
  width: 130px;
  height: auto;
}
.fp-footer__brand-mark .fp-logo-text {
  font-size: 30px;
  color: var(--fp-white);
}
.fp-footer__slogan {
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  line-height: 1.6;
  max-width: 240px;
}
.fp-footer__col-title {
  font-family: var(--fp-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 16px;
}
.fp-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fp-footer__list li {
  margin-bottom: 10px;
}
.fp-footer__list li:last-child {
  margin-bottom: 0;
}
.fp-footer__list a {
  color: var(--fp-white);
  font-size: 16px;
}
.fp-footer__list a:hover {
  color: rgba(255, 255, 255, 0.85);
}
.fp-footer__muted {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  line-height: 1.7;
}
.fp-footer__bottom {
  max-width: 1120px;
  margin: clamp(36px, 5vw, 56px) auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}

/* ========================================================================= */
/* Keyframes (ported from prototype)                                         */
/* ========================================================================= */
@keyframes fp-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes fp-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes fp-glow {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.9;
  }
}
/* Stepped category rotor: 6 cells (5 categories + dup first), each height:1em;
   pause on each, then slide. */
@keyframes fp-rotor {
  0%,
  13% {
    transform: translateY(0);
  }
  16.6%,
  29.6% {
    transform: translateY(-16.667%);
  }
  33.3%,
  46.3% {
    transform: translateY(-33.333%);
  }
  50%,
  63% {
    transform: translateY(-50%);
  }
  66.6%,
  79.6% {
    transform: translateY(-66.667%);
  }
  83.3%,
  99% {
    transform: translateY(-83.333%);
  }
  100% {
    transform: translateY(-83.333%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fp-root *,
  .fp-marquee__track,
  .fp-rotor__col,
  .fp-hero__ghost .fp-logo-img,
  .fp-hero__glow {
    animation: none !important;
    transition: none !important;
  }
  /* Without the rotor running, pin it to the first category so the hero still
     reads correctly. */
  .fp-rotor__col {
    transform: none !important;
  }
  /* Reveals must not stay hidden if motion is reduced. */
  .fp-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/components/landing/FpMotionLanding.tsx","import":"Anton","arguments":[{"weight":"400","subsets":["latin"],"display":"swap","variable":"--fp-font-display"}],"variableName":"anton"} ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* vietnamese */
@font-face {
  font-family: '__Anton_ec6dc7';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/6ced06489fd81a3f-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Anton_ec6dc7';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/aa5f74293546f6d0-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Anton_ec6dc7';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/62c97acc3aa63787-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: '__Anton_Fallback_ec6dc7';src: local("Arial");ascent-override: 129.70%;descent-override: 36.29%;line-gap-override: 0.00%;size-adjust: 90.69%
}.__className_ec6dc7 {font-family: '__Anton_ec6dc7', '__Anton_Fallback_ec6dc7';font-weight: 400;font-style: normal
}.__variable_ec6dc7 {--fp-font-display: '__Anton_ec6dc7', '__Anton_Fallback_ec6dc7'
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/components/landing/FpMotionLanding.tsx","import":"Oswald","arguments":[{"weight":["400","500","600","700"],"subsets":["latin","latin-ext","cyrillic"],"display":"swap","variable":"--fp-font-head"}],"variableName":"oswald"} ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/b3097673cd409a21-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/2409d02eaee47cb9-s.p.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/b72a6a678d511e3a-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/a33a3f3323a75998-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/bd9b9909c3a641ff-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/b3097673cd409a21-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/2409d02eaee47cb9-s.p.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/b72a6a678d511e3a-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/a33a3f3323a75998-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/bd9b9909c3a641ff-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/b3097673cd409a21-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/2409d02eaee47cb9-s.p.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/b72a6a678d511e3a-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/a33a3f3323a75998-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/bd9b9909c3a641ff-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/b3097673cd409a21-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/2409d02eaee47cb9-s.p.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/b72a6a678d511e3a-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/a33a3f3323a75998-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/bd9b9909c3a641ff-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: '__Oswald_Fallback_ff7915';src: local("Arial");ascent-override: 146.51%;descent-override: 35.49%;line-gap-override: 0.00%;size-adjust: 81.43%
}.__className_ff7915 {font-family: '__Oswald_ff7915', '__Oswald_Fallback_ff7915';font-style: normal
}.__variable_ff7915 {--fp-font-head: '__Oswald_ff7915', '__Oswald_Fallback_ff7915'
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/templates/festa-shell/FestaMotion.tsx","import":"Anton","arguments":[{"weight":"400","subsets":["latin"],"display":"swap","variable":"--fpm-font-display"}],"variableName":"anton"} ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* vietnamese */
@font-face {
  font-family: '__Anton_ec6dc7';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/6ced06489fd81a3f-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Anton_ec6dc7';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/aa5f74293546f6d0-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Anton_ec6dc7';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/62c97acc3aa63787-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: '__Anton_Fallback_ec6dc7';src: local("Arial");ascent-override: 129.70%;descent-override: 36.29%;line-gap-override: 0.00%;size-adjust: 90.69%
}.__className_ec6dc7 {font-family: '__Anton_ec6dc7', '__Anton_Fallback_ec6dc7';font-weight: 400;font-style: normal
}.__variable_ec6dc7 {--fpm-font-display: '__Anton_ec6dc7', '__Anton_Fallback_ec6dc7'
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/templates/festa-shell/FestaMotion.tsx","import":"Oswald","arguments":[{"weight":["400","500","600","700"],"subsets":["latin","latin-ext","cyrillic"],"display":"swap","variable":"--fpm-font-head"}],"variableName":"oswald"} ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/b3097673cd409a21-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/2409d02eaee47cb9-s.p.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/b72a6a678d511e3a-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/a33a3f3323a75998-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/bd9b9909c3a641ff-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/b3097673cd409a21-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/2409d02eaee47cb9-s.p.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/b72a6a678d511e3a-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/a33a3f3323a75998-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/bd9b9909c3a641ff-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/b3097673cd409a21-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/2409d02eaee47cb9-s.p.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/b72a6a678d511e3a-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/a33a3f3323a75998-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/bd9b9909c3a641ff-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/b3097673cd409a21-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/2409d02eaee47cb9-s.p.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/b72a6a678d511e3a-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/a33a3f3323a75998-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/bd9b9909c3a641ff-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: '__Oswald_Fallback_ff7915';src: local("Arial");ascent-override: 146.51%;descent-override: 35.49%;line-gap-override: 0.00%;size-adjust: 81.43%
}.__className_ff7915 {font-family: '__Oswald_ff7915', '__Oswald_Fallback_ff7915';font-style: normal
}.__variable_ff7915 {--fpm-font-head: '__Oswald_ff7915', '__Oswald_Fallback_ff7915'
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/templates/festa-shell/FestaStreet.tsx","import":"Anton","arguments":[{"weight":"400","subsets":["latin"],"display":"swap","variable":"--fpm-font-display"}],"variableName":"anton"} ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* vietnamese */
@font-face {
  font-family: '__Anton_ec6dc7';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/6ced06489fd81a3f-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Anton_ec6dc7';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/aa5f74293546f6d0-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Anton_ec6dc7';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/62c97acc3aa63787-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: '__Anton_Fallback_ec6dc7';src: local("Arial");ascent-override: 129.70%;descent-override: 36.29%;line-gap-override: 0.00%;size-adjust: 90.69%
}.__className_ec6dc7 {font-family: '__Anton_ec6dc7', '__Anton_Fallback_ec6dc7';font-weight: 400;font-style: normal
}.__variable_ec6dc7 {--fpm-font-display: '__Anton_ec6dc7', '__Anton_Fallback_ec6dc7'
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/templates/festa-shell/FestaStreet.tsx","import":"Oswald","arguments":[{"weight":["400","500","600","700"],"subsets":["latin","latin-ext","cyrillic"],"display":"swap","variable":"--fpm-font-head"}],"variableName":"oswald"} ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/b3097673cd409a21-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/2409d02eaee47cb9-s.p.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/b72a6a678d511e3a-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/a33a3f3323a75998-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/bd9b9909c3a641ff-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/b3097673cd409a21-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/2409d02eaee47cb9-s.p.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/b72a6a678d511e3a-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/a33a3f3323a75998-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/bd9b9909c3a641ff-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/b3097673cd409a21-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/2409d02eaee47cb9-s.p.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/b72a6a678d511e3a-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/a33a3f3323a75998-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/bd9b9909c3a641ff-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/b3097673cd409a21-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/2409d02eaee47cb9-s.p.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/b72a6a678d511e3a-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/a33a3f3323a75998-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Oswald_ff7915';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/bd9b9909c3a641ff-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: '__Oswald_Fallback_ff7915';src: local("Arial");ascent-override: 146.51%;descent-override: 35.49%;line-gap-override: 0.00%;size-adjust: 81.43%
}.__className_ff7915 {font-family: '__Oswald_ff7915', '__Oswald_Fallback_ff7915';font-style: normal
}.__variable_ff7915 {--fpm-font-head: '__Oswald_ff7915', '__Oswald_Fallback_ff7915'
}