@import url('/page-width.css?v=1');
:root {
  --bg: #F1F3F1;
  --surface: #FFFFFF;
  --ink: #171D1A;
  --ink-muted: #5B6863;
  --accent: #0E6B5C;
  --accent-dark: #0A4F45;
  --accent-ink: #FFFFFF;
  --ozon: #005BFF;
  --warn: #B8791F;
  --warn-bg: #FBF1E1;
  --danger: #B23B3B;
  --berry: #B0475A;
  --border: #DDE3E0;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(23, 29, 26, 0.06), 0 4px 16px rgba(23, 29, 26, 0.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--bg);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--ink);
  font-family: 'PT Sans', sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3, .brand {
  font-family: 'Golos Text', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mono { font-family: 'JetBrains Mono', monospace; }

/* header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand { font-size: 20px; color: var(--ink); text-decoration: none; }
.brand small { display: block; font-family: 'PT Sans', sans-serif; font-weight: 400; font-size: 12px; color: var(--ink-muted); }

.cart-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-family: 'PT Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.cart-btn:hover { background: var(--accent-dark); }
.cart-btn:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
.cart-count {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  min-width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.city-btn {
  display: flex; align-items: center; gap: 4px;
  background: none; border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 14px; font-family: 'PT Sans', sans-serif; font-size: 13px; font-weight: 700;
  color: var(--ink); cursor: pointer; max-width: 220px;
}
.city-btn:hover { border-color: var(--accent); }
.city-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.city-pin-icon {
  display: block;
  width: 13px;
  height: 17px;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: center;
}
.city-pin-icon-cart { width: 13px; height: 17px; margin-right: 6px; }

.cart-city-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px;
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 8px 14px !important;
  border-radius: var(--radius) !important;
  line-height: 1.2;
  font-family: 'PT Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700;
  text-align: left;
}
.cart-city-btn .city-pin-icon-cart {
  width: 13px;
  height: 17px;
  flex: 0 0 13px;
  display: block;
  margin: 0;
  object-fit: contain;
  object-position: center;
}
.location-pin-icon {
  width: 13px;
  height: 17px;
  object-fit: contain;
  flex: 0 0 auto;
  display: block;
}
#openAddressMapBtn, #mapLocateBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.hint { color: var(--ink-muted); font-size: 13px; }
.city-search-row { display:flex; gap:8px; align-items:stretch; }
.city-search-row input {
  flex:1; min-width:0;
  background: rgba(255,255,255,.94);
  color: #2a2730;
  border: 1px solid rgba(214,42,115,.24);
  border-radius: 10px;
  padding: 11px 14px;
  font: inherit;
  font-size: 14px;
}
.city-search-row input::placeholder { color: #8b8590; }
.city-locate-btn { white-space:nowrap; width:auto; flex:0 0 auto; }

/* Список городов — плавающая карточка над полем поиска, тем же приёмом,
   что и .addr-suggest-list для адреса (см. ниже в файле), а не блок в
   обычном потоке внутри .drawer-body. Раньше он лежал в потоке со своим
   max-height+overflow-y:auto, а сам .drawer при этом уже скроллится целиком
   (см. комментарий у .drawer-body/.drawer-footer) — вложенный скролл внутри
   уже скроллящегося контейнера на тач-устройствах и «съедал» прокрутку, и
   обрезал список без возможности долистать. Плюс сама .city-suggest следом
   ставила overflow:hidden ПОСЛЕ overflow-y:auto — это шорткод, он сбрасывал
   overflow-y обратно в hidden, то есть скролла не было в принципе.
   .city-search-anchor — это position:relative-контейнер вокруг строки
   поиска (см. index.html), от которого позиционируется сам список. */
.city-search-anchor { position: relative; }
.city-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: min(56vh, 420px);
  overflow-y: auto;
  border: 1px solid rgba(214,42,115,.30);
  border-radius: 12px;
  background: #17151a;
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
}
.city-suggest-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: transparent;
  color: var(--silver-0);
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
}
.city-suggest-item:last-child { border-bottom: 0; }
.city-suggest-item:hover { background: rgba(255,255,255,.06); }
.city-suggest-item.active { background: rgba(214,42,115,.14); color: var(--gold); font-weight: 700; }
.city-suggest-item small { color: rgba(255,255,255,.5); font-size: 12px; }


main { max-width: 1680px; margin: 0 auto; padding: 24px; }

.toolbar { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.search-input {
  flex: 1;
  min-width: 200px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: 'PT Sans', sans-serif;
  font-size: 14px;
  background: var(--surface);
}
.search-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.category-select {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: 'PT Sans', sans-serif;
  font-size: 14px;
}

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

/* Плавное «построение» витрины при смене категории/подкатегории/поиска —
   см. renderGrid() в app.js, который проставляет animation-delay по индексу. */
#grid .card {
  animation: cardFadeIn .32s cubic-bezier(.22,.8,.28,1) both;
}
/* Полное отключение именно стартовой анимации карточек при возврате
   со статических информационных страниц.
   Hover на карточках и анимация фильтрации после этого остаются штатными. */
#grid.skip-card-intro .card {
  animation: none !important;
  animation-delay: 0s !important;
}
@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #grid .card { animation: none; }
}

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

/* сигнатурный элемент: ярлык-«наклейка» источника наличия в углу карточки,
   как маркировка на складской коробке */
.stock-tag {
  position: absolute;
  top: 12px;
  left: -1px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px 3px 12px;
  border-radius: 0 4px 4px 0;
  color: #fff;
}
.stock-tag.in-stock { background: var(--accent); }
.stock-tag.out-stock { background: var(--ink-muted); }

.card-category { font-size: 12px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 8px; }
.card-name { font-size: 15px; font-weight: 700; font-family: 'PT Sans', sans-serif; margin: 0; }
.card-price { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 500; margin-top: auto; }

.add-btn {
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 10px;
  font-family: 'PT Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.add-btn:hover { background: var(--accent-dark); }
.add-btn:disabled { background: var(--border); color: var(--ink-muted); cursor: not-allowed; }
.add-btn:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }

/* cart drawer */
.overlay {
  position: fixed; inset: 0; background: rgba(23, 29, 26, 0.35);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
  z-index: 20;
}
.overlay.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
  background: var(--surface); box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
  transform: translateX(100%); transition: transform 0.25s ease;
  z-index: 21; display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }

.drawer-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--border); }
.drawer-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--ink-muted); line-height: 1; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.drawer-footer { padding: 20px; border-top: 1px solid var(--border); }

.cart-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.cart-item-name { font-weight: 700; font-size: 14px; }
.qty-controls { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.qty-btn { width: 24px; height: 24px; border: 1px solid var(--border); background: #fff; border-radius: 6px; cursor: pointer; font-family: 'JetBrains Mono', monospace; }
.remove-link { background: none; border: none; color: var(--danger); font-size: 12px; cursor: pointer; text-decoration: underline; margin-left: 12px; }

.total-row { display: flex; justify-content: space-between; font-weight: 700; font-size: 18px; margin-bottom: 16px; font-family: 'JetBrains Mono', monospace; }

.primary-btn {
  width: 100%; background: var(--accent); color: #fff; border: none; border-radius: var(--radius);
  padding: 14px; font-family: 'PT Sans', sans-serif; font-weight: 700; font-size: 15px; cursor: pointer;
}
.primary-btn:hover { background: var(--accent-dark); }
.primary-btn:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
.primary-btn:disabled { background: var(--border); color: var(--ink-muted); cursor: not-allowed; }

.field { margin-bottom: 12px; }
.field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  font-family: 'PT Sans', sans-serif; font-size: 14px;
  background: var(--surface);
}
.field textarea { resize: vertical; min-height: 60px; }

.empty-state { text-align: center; padding: 40px 20px; color: var(--ink-muted); }

.confirm { text-align: center; padding: 20px; }
.confirm .order-number { font-family: 'JetBrains Mono', monospace; font-size: 28px; font-weight: 700; color: var(--accent); margin: 12px 0; }

.payment-note { background: var(--warn-bg); color: var(--warn); border-radius: var(--radius); padding: 12px 14px; font-size: 13px; margin-top: 14px; }
.tier-note { background: var(--bg); border: 1px solid var(--border); color: var(--ink-muted); border-radius: var(--radius); padding: 10px 14px; font-size: 13px; margin: 12px 0; }
.tier-note-manual { background: var(--warn-bg); color: var(--warn); border-color: transparent; font-weight: 700; }
.carrier-options { display: flex; flex-direction: column; gap: 6px; }
.carrier-option { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; cursor: pointer; }
.carrier-option input { width: auto; }




@media (max-width: 1200px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}







/* Большой фирменный логотип в шапке */
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand-logo { display: block; width: min(400px, 42vw); height: auto; max-height: 110px; object-fit: contain; }
.footer-logo { display: block; height: 42px; width: auto; margin-bottom: 4px; }



/* info strip — trust badges, classic RU shop convention */
.info-strip {
  display: flex;
  gap: 10px 28px;
  flex-wrap: wrap;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

/* category tiles — visual category shortcuts */
.category-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 14px;
  margin-bottom: 32px;
  padding: 4px 0;
}
.category-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.category-tile:hover { transform: translateY(-2px); border-color: var(--accent); }
.category-tile.active { border-color: var(--accent); background: rgba(14, 107, 92, 0.06); }
.category-tile-icon {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Golos Text', sans-serif; font-weight: 700; font-size: 16px; color: #fff;
}

/* product image / placeholder (тот же угловой ярлык-наклейка ложится поверх) */
.card-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Golos Text', sans-serif;
  font-weight: 700;
  font-size: 32px;
  color: #fff;
}
.card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* новинки — горизонтальная прокрутка */
.scroll-row-wrap { margin-bottom: 28px; }
.section-title { font-size: 16px; margin: 0 0 12px; }
.scroll-row { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.scroll-row .card { min-width: 250px; max-width: 250px; scroll-snap-align: start; flex-shrink: 0; }

/* подвал */
.site-footer {
  margin-top: 40px;
  border-top: 1px solid var(--border);
  padding: 28px 24px;
  background: var(--surface);
}
.footer-inner {
  max-width: 1680px; margin: 0 auto;
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start;
}
.footer-phone {
  display: block; margin-top: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 700;
  color: var(--ink); text-decoration: none;
}
.footer-social { display: flex; gap: 10px; margin-top: 12px; }
.footer-social a {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-muted); text-decoration: none; font-size: 12px; font-weight: 700;
}
.footer-copy { color: var(--ink-muted); font-size: 12px; max-width: 320px; }


/* product links / product page */
.product-card-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  flex: 1;
}
.product-card-link:hover .card-name { color: var(--accent); }

.back-link {
  display: inline-block;
  color: var(--ink-muted);
  text-decoration: none;
  font-weight: 700;
  margin-bottom: 8px;
}
.back-link:hover { color: var(--accent); }

.product-image-placeholder {
  font: 700 72px 'Golos Text', sans-serif;
  color: #fff;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent);
}
.muted, .product-loading { color: var(--ink-muted); }
.product-loading, .product-not-found { padding: 60px 0; text-align: center; }
.product-not-found h1 { margin-bottom: 8px; }



/* === Crystal luxury skin === */
:root {
  --crystal-ink: #17202b;
  --crystal-muted: #66717d;
  --crystal-line: rgba(255,255,255,.72);
  --crystal-glass: rgba(255,255,255,.82);
  --crystal-glass-strong: rgba(255,255,255,.92);
  --crystal-shadow: 0 10px 30px rgba(30,42,55,.12), 0 2px 8px rgba(30,42,55,.08);
}

body {
  background-color: #dfe4ea;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--crystal-ink);
}

.site-header {
  background: rgba(255,255,255,.78);
  border-bottom: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 4px 20px rgba(28,39,51,.08);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
}

.cart-btn {
  background: linear-gradient(135deg, #172534, #2d4154);
  box-shadow: 0 5px 16px rgba(25,38,51,.18);
}
.cart-btn:hover { background: linear-gradient(135deg, #0e1c2a, #24394d); }

.info-strip {
  background: rgba(22,34,47,.86);
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 5px 18px rgba(20,30,40,.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

main {
  max-width: 1680px;
  padding-top: 28px;
  padding-bottom: 36px;
}

.category-tiles { gap: 12px; }
.category-tile {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: 0 5px 18px rgba(31,43,56,.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.category-tile:hover {
  border-color: rgba(255,255,255,1);
  box-shadow: 0 8px 22px rgba(31,43,56,.12);
}
.category-tile.active {
  background: rgba(255,255,255,.9);
  border-color: rgba(20,42,62,.28);
}

.section-title {
  color: #182431;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}

.toolbar {
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.54);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 6px 20px rgba(31,43,56,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.search-input, .category-select {
  background: rgba(255,255,255,.88);
  border-color: rgba(115,130,145,.22);
  box-shadow: inset 0 1px 2px rgba(20,30,40,.03);
}

.grid { gap: 18px; }

.card {
  background: var(--crystal-glass);
  border: 1px solid var(--crystal-line);
  border-radius: 16px;
  padding: 12px;
  gap: 7px;
  box-shadow: var(--crystal-shadow);
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  overflow: hidden;
}
.card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.91);
  border-color: rgba(255,255,255,.96);
  box-shadow: 0 16px 36px rgba(30,42,55,.16), 0 3px 10px rgba(30,42,55,.08);
}

.card-image {
  border-radius: 12px;
  background: rgba(245,247,249,.96);
  box-shadow: inset 0 0 0 1px rgba(30,42,55,.05);
}
.card-image img { object-fit: contain; mix-blend-mode: multiply; }

.stock-tag {
  top: 18px;
  left: 12px;
  z-index: 2;
  border-radius: 999px;
  padding: 5px 10px;
  font-family: 'PT Sans', sans-serif;
  font-size: 11px;
  box-shadow: 0 3px 10px rgba(20,30,40,.13);
}
.stock-tag.in-stock { background: rgba(18,90,78,.94); }
.stock-tag.out-stock { background: rgba(83,94,104,.9); }

.card-category { color: #75808b; margin-top: 5px; }
.card-name { color: #182431; line-height: 1.3; }
.card-price { color: #172534; font-size: 19px; }

.add-btn {
  border-radius: 11px;
  background: linear-gradient(135deg, #1b2a39, #33495d);
  box-shadow: 0 5px 14px rgba(25,38,51,.13);
}
.add-btn:hover { background: linear-gradient(135deg, #111f2d, #293f54); }
.add-btn:disabled { box-shadow: none; }

.scroll-row-wrap { margin-bottom: 30px; }
.scroll-row .card { min-width: 250px; max-width: 250px; }

.site-footer {
  background: rgba(255,255,255,.74);
  border-top: 1px solid rgba(255,255,255,.82);
  box-shadow: 0 -5px 20px rgba(28,39,51,.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.drawer {
  background: rgba(250,252,253,.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.drawer-header, .drawer-footer { border-color: rgba(115,130,145,.18); }




/* =========================================================
   STRAZBERRY — CRYSTAL / CHAMPAGNE LUXURY ART DIRECTION
   ========================================================= */
:root {
  --bg: #0b1220;
  --surface: rgba(248, 250, 253, .88);
  --ink: #111a29;
  --ink-muted: #687487;
  --accent: #c9a85d;
  --accent-dark: #a9873e;
  --accent-ink: #111827;
  --border: rgba(255,255,255,.55);
  --radius: 16px;
  --shadow: 0 18px 50px rgba(0,0,0,.18), 0 4px 14px rgba(0,0,0,.10);
  --night: #0b1220;
  --night-2: #172338;
  --champagne: #d9b76c;
  --champagne-light: #f2d99d;
  --ice: #eef3f8;
}

body {
  background-color: var(--night);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #f4f7fb;
  font-family: 'Manrope', 'PT Sans', sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

h1, h2, h3, .section-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  letter-spacing: .01em;
}

.mono, .card-price, .product-price, .total-row {
  font-family: 'DM Mono', 'JetBrains Mono', monospace;
}

/* Header: logo is the visual hero, centered and framed by the dark crystal field. */
.site-header {
  min-height: 104px;
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 30px;
  background: linear-gradient(180deg, rgba(8,15,27,.94), rgba(13,23,39,.82));
  border-bottom: 1px solid rgba(218,187,113,.28);
  box-shadow: 0 12px 34px rgba(0,0,0,.24);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}
.site-header::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  width: min(560px, 70vw);
  height: 86px;
  background: radial-gradient(ellipse, rgba(218,183,108,.13), transparent 68%);
  pointer-events: none;
}
.brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(520px, 58vw);
  text-decoration: none;
}
.brand-logo {
  display: block;
  width: 100%;
  max-width: 520px;
  max-height: 86px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.34));
}

.cart-btn {
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, #e0c17c, #b9944d);
  color: #101827;
  border: 1px solid rgba(255,238,191,.65);
  border-radius: 999px;
  padding: 11px 17px 11px 19px;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 7px 20px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.45);
}
.cart-btn:hover { background: linear-gradient(135deg, #efd18d, #c5a45d); }
.cart-count { background: rgba(17,25,39,.25); color: #fff; }

.info-strip {
  background: linear-gradient(90deg, rgba(15,25,41,.92), rgba(31,43,62,.86), rgba(15,25,41,.92));
  color: #e9edf4;
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(217,183,108,.24);
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  box-shadow: 0 7px 20px rgba(0,0,0,.18);
}
.info-strip span::before { content: '✦'; color: var(--champagne); margin-right: 8px; }

main { max-width: 1680px; padding-top: 34px; padding-bottom: 50px; }

.category-tiles { gap: 13px; }
.category-tile {
  background: rgba(245,248,252,.82);
  border: 1px solid rgba(255,255,255,.78);
  color: #152033;
  box-shadow: 0 12px 30px rgba(0,0,0,.13);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}
.category-tile:hover {
  background: rgba(255,255,255,.94);
  border-color: rgba(230,203,143,.8);
  transform: translateY(-2px);
  box-shadow: 0 17px 34px rgba(0,0,0,.17);
}
.category-tile.active {
  background: linear-gradient(135deg, rgba(245,232,197,.96), rgba(255,255,255,.94));
  border-color: rgba(194,157,82,.65);
  box-shadow: 0 10px 28px rgba(0,0,0,.15), inset 0 0 0 1px rgba(255,255,255,.5);
}

.section-title {
  color: #fff;
  font-size: clamp(30px, 3vw, 42px);
  text-shadow: 0 3px 18px rgba(0,0,0,.55);
  margin-bottom: 16px;
}

.toolbar {
  padding: 12px;
  border-radius: 18px;
  background: rgba(10,18,31,.62);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 15px 35px rgba(0,0,0,.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.search-input, .category-select {
  background: rgba(255,255,255,.95);
  color: #111a29;
  border-color: rgba(255,255,255,.9);
  border-radius: 12px;
  font-family: 'Manrope', sans-serif;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
}
.search-input::placeholder { color: #8b95a4; }
.search-input:focus-visible { outline: 2px solid var(--champagne); }

.card {
  background: rgba(248,250,253,.91);
  color: #121b2a;
  border: 1px solid rgba(255,255,255,.84);
  border-radius: 18px;
  padding: 12px;
  gap: 7px;
  box-shadow: 0 15px 38px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08);
  backdrop-filter: blur(16px) saturate(115%);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
}
.card:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,.98);
  border-color: rgba(235,210,157,.82);
  box-shadow: 0 24px 50px rgba(0,0,0,.22), 0 0 0 1px rgba(217,183,108,.16);
}
.card-image {
  border-radius: 13px;
  background: linear-gradient(145deg, #f9fafc, #e9eef4);
  box-shadow: inset 0 0 0 1px rgba(18,27,42,.05);
}
.card-image img { object-fit: contain; mix-blend-mode: multiply; }
.stock-tag {
  background: linear-gradient(135deg, var(--berry-light), var(--berry-dark)) !important;
  color: #fff;
  border: 1px solid rgba(255,238,191,.55);
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 5px 15px rgba(0,0,0,.18);
}
.stock-tag.out-stock { background: rgba(83,94,104,.9) !important; }
.card-category { color: #7a8594; font-family: 'Manrope', sans-serif; font-size: 10px; letter-spacing: .1em; }
.card-name { color: #121b2a; font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 700; line-height: 1.38; }
.card-price { color: #121b2a; font-size: 18px; font-weight: 500; }
.add-btn, .primary-btn {
  background: linear-gradient(135deg, #172338, #2a3c56);
  color: #fff;
  border: 1px solid rgba(217,183,108,.3);
  border-radius: 12px;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(8,15,27,.2), inset 0 1px 0 rgba(255,255,255,.08);
}
.add-btn:hover, .primary-btn:hover { background: linear-gradient(135deg, #243650, #3b5270); }
.primary-btn:focus-visible, .add-btn:focus-visible { outline: 2px solid var(--champagne-light); }

.back-link { color: #e9edf4; text-shadow: 0 2px 8px rgba(0,0,0,.45); }
.back-link:hover { color: var(--champagne-light); }
.site-footer {
  background: linear-gradient(180deg, rgba(9,16,28,.91), rgba(7,13,23,.96));
  color: #e8edf5;
  border-top: 1px solid rgba(217,183,108,.25);
  box-shadow: 0 -15px 35px rgba(0,0,0,.2);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.footer-logo { height: 50px; width: auto; filter: drop-shadow(0 3px 10px rgba(0,0,0,.35)); }
.footer-copy { color: #9ba7b7; }
.footer-phone { color: #e8edf5; }
.footer-social a { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #e7c77e; }

.drawer {
  background: rgba(9,16,28,.97);
  color: #f4f7fb;
  border-left: 1px solid rgba(217,183,108,.22);
  box-shadow: -18px 0 50px rgba(0,0,0,.35);
}
.drawer-header, .drawer-footer { border-color: rgba(255,255,255,.1); }
.drawer-close { color: #dce3ed; }
.cart-item { border-bottom-color: rgba(255,255,255,.1); }
.cart-item-name { color: #fff; }
.qty-btn { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.16); }
.field label { color: #e6ebf2; }
.field input, .field select, .field textarea { background: rgba(255,255,255,.96); color: #121b2a; border-color: rgba(255,255,255,.72); }
.total-row { color: #fff; }
.payment-note { background: rgba(201,168,93,.14); color: #e6c97f; border: 1px solid rgba(201,168,93,.2); }
.tier-note { background: rgba(255,255,255,.06); color: #cdd5e0; border: 1px solid rgba(255,255,255,.14); }
.tier-note-manual { background: rgba(201,168,93,.16); color: #f0d8a0; border-color: rgba(201,168,93,.32); }
.empty-state, .muted, .product-loading { color: #9ba7b7; }
.confirm .order-number { color: var(--champagne-light); }




/* === StrazBerry light crystal theme === */
:root {
  --bg: #faf8f5;
  --surface: rgba(255, 255, 255, 0.88);
  --ink: #2a2928;
  --ink-muted: #817b75;
  --accent: #9a7b62;
  --accent-dark: #765a45;
  --border: rgba(170, 151, 132, 0.20);
}

body {
  background-color: #faf8f5;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #2a2928;
}

.site-header {
  background: rgba(255,255,255,.84);
  border-bottom: 1px solid rgba(180,160,140,.18);
  box-shadow: 0 4px 20px rgba(120,100,80,.07);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
}

.cart-btn {
  background: linear-gradient(135deg, #9b8068, #b59a82);
  box-shadow: 0 5px 16px rgba(120,95,70,.16);
}
.cart-btn:hover { background: linear-gradient(135deg, #876b54, #a68a70); }

.info-strip {
  background: rgba(255,255,255,.72);
  color: #5f554d;
  border-top: 1px solid rgba(255,255,255,.9);
  border-bottom: 1px solid rgba(180,160,140,.16);
  box-shadow: 0 5px 18px rgba(120,100,80,.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.category-tile,
.card,
.toolbar {
  background: rgba(255,255,255,.78);
  border-color: rgba(180,160,140,.20);
  box-shadow: 0 8px 26px rgba(110,90,70,.08);
  backdrop-filter: blur(12px) saturate(110%);
  -webkit-backdrop-filter: blur(12px) saturate(110%);
}

.category-tile:hover,
.card:hover {
  background: rgba(255,255,255,.90);
  border-color: rgba(170,145,120,.30);
  box-shadow: 0 14px 32px rgba(110,90,70,.13);
}

.category-tile.active {
  background: rgba(255,255,255,.92);
  border-color: rgba(154,123,98,.42);
}

.toolbar {
  background: rgba(255,255,255,.62);
}

.search-input, .category-select,
.field input, .field select, .field textarea {
  background: rgba(255,255,255,.92);
  border-color: rgba(160,140,120,.20);
}

.section-title,
.card-name { color: #302c29; }
.card-category,
.footer-copy { color: #81776e; }
.card-price { color: #594a3e; }

.add-btn,
.primary-btn {
  background: linear-gradient(135deg, #9b8068, #b59a82);
  box-shadow: 0 5px 14px rgba(120,95,70,.12);
}
.add-btn:hover,
.primary-btn:hover { background: linear-gradient(135deg, #876b54, #a68a70); }

.stock-tag.in-stock { background: rgba(154,123,98,.94); }

.site-footer {
  background: rgba(255,255,255,.78);
  border-top: 1px solid rgba(180,160,140,.18);
  box-shadow: 0 -5px 20px rgba(120,100,80,.06);
}

.card-image {
  background: rgba(250,248,245,.94);
  box-shadow: inset 0 0 0 1px rgba(120,100,80,.05);
}

/* Slightly darker header and auto-hide on scroll */
.site-header {
  position: sticky;
  background: #E8E2DA;
  transition: transform .28s ease, box-shadow .28s ease;
  box-shadow: 0 1px 8px rgba(80,60,40,.08);
}
.site-header.header-hidden { transform: translateY(-100%); }



/* Noticeable but subtle product hover */
.card {
  position: relative;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card::after {
  content:"";
  position:absolute;
  top:-25%;
  left:-75%;
  width:34%;
  height:150%;
  pointer-events:none;
  transform:skewX(-20deg);
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0) 25%,
    rgba(255,255,255,.65) 50%,
    rgba(255,255,255,0) 75%,
    transparent 100%
  );
  transition:left .75s ease;
}
.card:hover {
  transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(110,90,70,.16), 0 0 0 1px rgba(255,255,255,.55) inset;
}
.card:hover::after { left:145%; }

/* Buttons get the same luxury light sweep */
.add-btn, .primary-btn, .cart-btn {
  position:relative;
  overflow:hidden;
}
.add-btn::after, .primary-btn::after, .cart-btn::after {
  content:"";
  position:absolute;
  top:-60%;
  left:-80%;
  width:38%;
  height:220%;
  transform:skewX(-20deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transition:left .7s ease;
  pointer-events:none;
}
.add-btn:hover::after, .primary-btn:hover::after, .cart-btn:hover::after {
  left:145%;
}

/* Keep content above the ambient layer */
.site-header, main, .site-footer { position:relative; z-index:2; }
.site-header { position:sticky; }
/* Overlay + drawer must sit above the sticky header (z-index:100) — otherwise
   the header renders on top of an open cart/city drawer instead of behind it. */
.overlay { position:fixed; z-index:200; }
.drawer { position:fixed; z-index:201; top:0; right:0; bottom:0; }


/* Ссылка "Все товары" на карточке — унаследовала светлый цвет от
   неактивной тёмной темы выше по каскаду и терялась на светлом фоне.
   Возвращаем читаемый цвет под текущую (светлую) тему. */
.back-link { color: var(--accent-dark); text-shadow: none; }
.back-link:hover { color: var(--ink); }


/* === StrazBerry product gallery / crystal background update === */
body {
  background-color: #050505;
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Keep the decorative background visible around the catalog. */
main {
  background: transparent;
}



/* Full-screen centered image viewer. */
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(5px);
}
.image-lightbox.open { display: flex; }
.image-lightbox-stage {
  position: relative;
  width: min(92vw, 1180px);
  height: min(90vh, 900px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-lightbox-image {
  max-width: 88%;
  max-height: 88%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 70px rgba(0,0,0,.45);
  user-select: none;
}
.image-lightbox-close,
.image-lightbox-nav {
  position: absolute;
  border: 0;
  cursor: pointer;
  color: #fff;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(5px);
}
.image-lightbox-close {
  top: 0;
  right: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 30px;
  line-height: 1;
}
.image-lightbox-close:hover,
.image-lightbox-nav:hover { background: rgba(255,255,255,.24); }
.image-lightbox-nav {
  top: 0;
  width: 70px;
  height: 100%;
  border-radius: 10px;
  font-size: 48px;
  opacity: .9;
}
.image-lightbox-prev { left: 0; }
.image-lightbox-next { right: 0; }
.image-lightbox-counter {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  background: rgba(0,0,0,.45);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  pointer-events: none;
}


body.lightbox-open { overflow: hidden; }

/* === Final light-beige background + smaller product image === */
body {
  background-color: #e3d6cd;
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #2a2522;
}

/* Fullscreen viewer: navigation strips are attached to the very screen edges. */
.image-lightbox {
  padding: 0;
}

.image-lightbox-stage {
  position: static;
  width: 100vw;
  height: 100vh;
}

.image-lightbox-image {
  max-width: 82vw;
  max-height: 86vh;
}

.image-lightbox-nav {
  position: fixed;
  top: 0;
  width: 92px;
  height: 100vh;
  border-radius: 0;
  z-index: 1002;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.08);
  font-size: 58px;
}

.image-lightbox-prev {
  left: 0;
  right: auto;
  background: linear-gradient(90deg, rgba(0,0,0,.32), rgba(0,0,0,.04));
}

.image-lightbox-next {
  right: 0;
  left: auto;
  background: linear-gradient(270deg, rgba(0,0,0,.32), rgba(0,0,0,.04));
}

.image-lightbox-close {
  position: fixed;
  top: 18px;
  right: 24px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  z-index: 1003;
  font-size: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}



/* =========================================================
   STRAZBERRY — SILVER / GOLD FINAL HEADER & COLOR SYSTEM
   ========================================================= */
:root {
  --silver-0: #FBF6EE;
  --silver-1: #F7F0E5;
  --silver-2: #E7D9C4;
  --silver-3: #C9A15A;
  --silver-ink: #343238;
  --silver-muted: #83798A;
  --card-bg: #FFFDF9;
  --berry: #D62A73;
  --berry-light: #D77AA2;
  --berry-dark: #981C50;
  --berry-soft: rgba(214,42,115,.14);
  --berry-line: rgba(214,42,115,.38);
  --gold: #C9A15A;
  --dusty-pink: #DDA8BB;
  --pastel-blue: #AFC9DD;
  --mint: #A9CDBD;
  --shadow-soft: rgba(67,54,40,.10);
  /* Фон страницы: взят как есть из модуля подарков (gift-module/public/gift.css,
     класс .ambient-glow) — те же 2 цветовых пятна поверх той же кремовой базы. */
  --bg-glow-berry: rgba(214, 42, 115, 0.08);
  --bg-glow-gold: rgba(212, 175, 55, 0.1);
  /* A handful of elements still reference these older token names from
     earlier theme passes (--ink, --accent, --border...). Rather than hunt
     down every usage, alias them to the current warm palette so
     everything pulls from one consistent set of colors instead of two. */
  --ink: var(--silver-ink);
  --ink-muted: var(--silver-muted);
  --accent: var(--berry);
  --accent-dark: var(--berry-dark);
  --border: var(--silver-2);
}

html { scroll-behavior: smooth; }
/* Фон страницы — полностью взят с публичной страницы модуля подарков
   (gift-module/public/gift.css: html,body + .ambient-glow), без админки
   этого модуля. Кремовая база + два мягких цветных пятна (малиновое
   и золотое), закреплены относительно экрана (fixed). Никаких
   фоновых изображений — только цвет и градиенты. */
html {
  background-color: #EAEAEC !important;
  min-height: 100%;
}

body {
  color: var(--silver-ink);
  position: relative;
  background: transparent !important;
  min-height: 100vh;
}

/* Точный фон публичной страницы подарка: та же кремовая база и те же
   два мягких свечения. Никаких фоновых изображений. Ракета из gift.js
   здесь намеренно не используется. */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  background:
    radial-gradient(circle at 15% 20%, rgba(214, 42, 115, 0.06), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(212, 175, 55, 0.08), transparent 45%),
    #EAEAEC;
  z-index: 0;
  pointer-events: none;
}

/* ===== Фон: камни =====
   Контурные огранённые камни (бриллианты, рубины), плывущие вверх. Разметку
   собирает /bg-gems.js один раз; двигает их только CSS — анимируются
   исключительно translate / rotate / transform / opacity, то есть на видеокарте,
   без участия главного потока. Слой лежит под контентом (z-index 1 < 2). */
#site-gems {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
  animation: gems-in 2s ease-out;
}
#site-gems .gem-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* lane — подъём (x задан инлайном в vw); sway — качание; svg — наклон + прозрачность.
   По одной transform-анимации на элемент: так все они идут на видеокарте. */
#site-gems .gem-lane {
  --ease: cubic-bezier(.37, 0, .63, 1);               /* easeInOutSine — плавное качание */
  --d:    calc(var(--dur) * var(--f) * -1);            /* фаза подъёма */
  --sdel: calc(var(--sd) * 2 * var(--sf) * -1);        /* фаза качания */
  --tdel: calc(var(--td) * 2 * var(--tf) * -1);        /* фаза наклона */
  --k: 1;                                              /* масштаб на узких экранах */
  --pad: calc(var(--w) * var(--k) * .52 + var(--sx) + 6px); /* радиус камня (любой поворот) + качание + запас */
  position: absolute;
  top: 0;
  left: clamp(var(--pad), var(--x), calc(100% - var(--pad)));  /* камень целиком в экране */
  width: 0;
  height: 0;
  animation: gem-rise var(--dur) linear var(--d) infinite both;
}
@media (max-width: 1500px) { #site-gems .gem-lane { --k: .86; } }
@media (max-width: 1100px) { #site-gems .gem-lane { --k: .76; } }
#site-gems .gem-sway {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  animation: gem-sway var(--sd) var(--ease) var(--sdel) infinite alternate both;
}
#site-gems .gem {
  position: absolute;
  top: 0;
  left: calc(var(--w) * var(--k) / -2);                /* x — центр камня */
  width: calc(var(--w) * var(--k));
  height: calc(var(--h) * var(--k));
  opacity: 0;
  overflow: visible;
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
  will-change: transform, opacity;
  animation:
    gem-tilt var(--td) var(--ease) var(--tdel) infinite alternate both,
    gem-fade var(--dur) linear var(--d) infinite both;
}
#site-gems .gem path { vector-effect: non-scaling-stroke; }
#site-gems .gem-outline { stroke-width: 1.5px; }
#site-gems .gem-facets  { stroke-width: 1px;   opacity: .72; }
#site-gems .gem--far  .gem-outline { stroke-width: 1.2px; }
#site-gems .gem--far  .gem-facets  { stroke-width: .9px; }
#site-gems .gem--near .gem-outline { stroke-width: 1.8px; }
#site-gems .gem--near .gem-facets  { stroke-width: 1.2px; }

#site-gems .gem--diamond  path { stroke: url(#sg-diamond); }
#site-gems .gem--ruby     path { stroke: url(#sg-ruby); }
#site-gems .gem--sapphire path { stroke: url(#sg-sapphire); }
#site-gems .gem--emerald  path { stroke: url(#sg-emerald); }

/* подъём снизу вверх за пределы экрана (на краях камень невидим — петля бесшовная) */
@keyframes gem-rise {
  from { transform: translateY(100vh); }
  to   { transform: translateY(calc(var(--h) * var(--k) * -1)); }
}
/* плавное появление/исчезновение у краёв — синхронно с подъёмом */
@keyframes gem-fade {
  0%   { opacity: 0; }
  9%   { opacity: var(--a); }
  91%  { opacity: var(--a); }
  100% { opacity: 0; }
}
/* горизонтальное покачивание */
@keyframes gem-sway {
  from { transform: translateX(calc(var(--sx) * -1)); }
  to   { transform: translateX(var(--sx)); }
}
/* лёгкий наклон */
@keyframes gem-tilt {
  from { transform: rotate(calc(var(--a0) - var(--r))); }
  to   { transform: rotate(calc(var(--a0) + var(--r))); }
}
@keyframes gems-in { from { opacity: 0; } to { opacity: 1; } }

/* «Уменьшить движение»: камни стоят на месте, без анимации */
@media (prefers-reduced-motion: reduce) {
  #site-gems { animation: none; }
  #site-gems .gem-lane {
    animation: none;
    transform: translateY(calc(100vh - (100vh + var(--h) * var(--k)) * var(--f)));
  }
  #site-gems .gem-sway { animation: none; }
  #site-gems .gem { animation: none; opacity: var(--a); transform: rotate(var(--a0)); }
}
@media print { #site-gems { display: none; } }

/* Расставляем приоритеты слоев */
.site-header-wrap, .site-header, .info-strip {
  position: relative;
  z-index: 100;
}
main {
  position: relative;
  z-index: 10; /* Контент всегда выше узоров */
}
.site-footer {
  position: relative;
  z-index: 5; /* Футер ниже контента, чтобы его узор спрятался за карточками */
}

/* Header + info-strip now hide/show together as one sticky unit — see
   .site-header-wrap below — so the dark strip no longer gets left behind
   and there's no gap flashing the page background under a half-hidden bar. */
.site-header-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: transform .22s ease, opacity .22s ease, box-shadow .22s ease;
}
.site-header-wrap.header-hidden { transform: translateY(-105%); opacity: .98; }
.site-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(300px, 560px) minmax(220px, 1fr);
  align-items: center;
  gap: 24px;
  min-height: 92px;
  padding: 10px 28px;
  background: rgba(251,246,238,.94);
  border-bottom: 1px solid rgba(214,42,115,.30);
  box-shadow: 0 6px 24px rgba(50,55,60,.10);
  backdrop-filter: blur(16px) saturate(110%);
  -webkit-backdrop-filter: blur(16px) saturate(110%);
}
/* Logo: reset every legacy property (position/left/top/transform/z-index/
   justify-content/width) left over from an old centered-logo layout — that
   leftover position:absolute was what made the logo float over the search
   bar. It's now a normal grid item, pinned to the start of column 1. */
.brand {
  position: static;
  left: auto;
  top: auto;
  transform: none;
  z-index: auto;
  justify-self: start;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  min-width: 0;
}
.header-right {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}
.brand-logo {
  display: block;
  width: min(330px, 28vw);
  max-width: 330px;
  height: auto;
  max-height: 78px;
  object-fit: contain;
}
.header-search {
  width: 100%;
  justify-self: center;
  min-width: 0;
}
.header-search-input {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(180,160,130,.38);
  border-radius: 13px;
  background: rgba(255,255,255,.92);
  color: var(--silver-ink);
  font: 500 14px 'Manrope', sans-serif;
  box-shadow: inset 0 1px 2px rgba(40,45,50,.04), 0 4px 14px rgba(50,55,60,.06);
}
.header-search-input::placeholder { color: #899097; }
.header-search-input:focus-visible {
  outline: 2px solid var(--berry);
  outline-offset: 2px;
  border-color: var(--berry);
}

.city-btn {
  flex: 0 1 190px;
  min-width: 0;
  color: var(--silver-ink);
  border-color: rgba(180,160,130,.34);
  background: rgba(255,255,255,.58);
}
.city-btn:hover { border-color: var(--berry); }


/* Личный кабинет в основной витрине — отдельный переход для клиента. */
.account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 132px;
  height: 46px;
  padding: 0 13px;
  border: 1px solid rgba(152,28,80,.22);
  border-radius: 13px;
  background: rgba(255,255,255,.72);
  color: var(--silver-ink);
  text-decoration: none;
  font: 800 12px/1 'Manrope', sans-serif;
  box-shadow: 0 4px 12px rgba(70,55,45,.07);
  white-space: nowrap;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.account-btn.account-authenticated { border-color: rgba(214,42,115,.32); background: rgba(255,255,255,.95); }
.account-btn.account-authenticated .account-label { color: var(--berry-dark); }
.account-btn:hover {
  border-color: var(--berry);
  background: rgba(255,255,255,.96);
  color: var(--berry-dark);
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(120,70,80,.10);
}
.account-icon {
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(214,42,115,.10);
  color: var(--berry);
  line-height: 1;
}
.account-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cart-btn {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 142px;
  height: 46px;
  padding: 0 15px;
  border: 1px solid rgba(152,28,80,.35);
  border-radius: 13px;
  background: linear-gradient(135deg, var(--berry-light), var(--berry));
  color: #fff;
  box-shadow: 0 6px 16px rgba(152,28,80,.20), inset 0 1px 0 rgba(255,255,255,.35);
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  cursor: pointer;
}
.cart-btn:hover { background: linear-gradient(135deg, var(--berry-light), var(--berry-dark)); }
.cart-count {
  flex: 0 0 auto;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff;
  color: var(--berry-dark);
  border: 1px solid rgba(255,255,255,.8);
  font: 800 12px/1 'Manrope', sans-serif;
  box-shadow: 0 2px 7px rgba(75,55,20,.14);
}
.cart-count.is-empty { opacity: .95; }

.info-strip {
  position: relative;
  z-index: 5;
  background: rgba(100,106,112,.88);
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(214,42,115,.32);
  box-shadow: 0 4px 16px rgba(50,55,60,.12);
}

main { position: relative; z-index: 1; }

/* === Верхняя полоса-навигация: Магазин / О нас / Доставка ===
   Раньше здесь была серая полоса с текстом — по ощущению как техническая
   плашка, а не часть оформления. Здесь — финальный вид, перекрывает все
   более ранние .info-strip выше по файлу (тёмный графитово-сливовый фон в
   тон палитре бренда вместо нейтрального серого, активный пункт подчёркнут
   акцентом). */
.info-strip {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  background: #2B2730;
  border-top: none;
  border-bottom: 1px solid rgba(214,42,115,.35);
  box-shadow: 0 4px 16px rgba(20,16,22,.16);
  padding: 0;
}
.info-strip-item {
  display: inline-flex;
  align-items: center;
  padding: 10px 24px;
  color: rgba(255,253,249,.78);
  font-family: 'Manrope', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.info-strip-item + .info-strip-item {
  border-left: 1px solid rgba(255,255,255,.14);
}
.info-strip-item:hover {
  color: #fff;
  background: rgba(255,255,255,.06);
}
.info-strip-item.active {
  color: #fff;
  border-bottom-color: var(--berry);
}


/* === Общая шапка для лёгких страниц "О нас" / "Доставка" (без поиска и
   корзины — это content-страницы, а не витрина) === */
.simple-page-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 40px;
  background: rgba(255,253,249,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--silver-2);
}
.simple-page-header .brand-logo { height: 38px; display: block; }
.simple-header-back {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--silver-ink);
  text-decoration: none;
  padding: 9px 20px;
  border: 1px solid var(--silver-2);
  border-radius: 999px;
  white-space: nowrap;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.simple-header-back:hover { border-color: var(--berry); color: var(--berry); background: var(--berry-soft); }


/* === Страницы "О нас" и "Доставка" === */
.content-page { max-width: 860px; margin: 0 auto; padding: 56px 24px 80px; position: relative; z-index: 1; }
.content-hero { text-align: center; margin-bottom: 46px; }
.content-hero .eyebrow { font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--berry); margin-bottom: 12px; }
.content-hero h1 { font-family: 'Cormorant Garamond', serif; font-size: 42px; font-weight: 700; margin: 0 0 16px; color: var(--silver-ink); }
.content-hero > p { font-family: 'PT Sans', sans-serif; font-size: 16px; line-height: 1.65; color: var(--silver-ink); opacity: .82; max-width: 620px; margin: 0 auto; }

.value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; margin: 40px 0; }
.value-card { background: var(--card-bg); border: 1px solid var(--silver-2); border-radius: 18px; padding: 26px 18px; text-align: center; box-shadow: 0 2px 8px var(--shadow-soft); }
.value-card .value-icon { font-size: 30px; margin-bottom: 12px; display: block; line-height: 1; }
.value-card h3 { font-family: 'Manrope', sans-serif; font-size: 14.5px; margin: 0 0 8px; color: var(--silver-ink); }
.value-card p { font-family: 'PT Sans', sans-serif; font-size: 13px; line-height: 1.55; color: var(--silver-ink); opacity: .75; margin: 0; }

.policy-section { margin: 22px 0; padding: 28px 32px; background: var(--card-bg); border: 1px solid var(--silver-2); border-radius: 20px; box-shadow: 0 2px 8px var(--shadow-soft); }
.policy-section h2 { font-family: 'Cormorant Garamond', serif; font-size: 23px; font-weight: 700; margin: 0 0 14px; color: var(--silver-ink); display: flex; align-items: center; gap: 10px; }
.policy-section p { font-family: 'PT Sans', sans-serif; font-size: 14.5px; line-height: 1.7; color: var(--silver-ink); opacity: .86; margin: 0 0 12px; }
.policy-section p:last-child { margin-bottom: 0; }


.content-cta { text-align: center; margin-top: 46px; }
.content-cta .primary-btn { display: inline-block; width: auto; padding: 14px 38px; }
.category-tile {
  color: var(--silver-ink);
  background: rgba(255,253,249,.82);
  border-color: rgba(255,255,255,.86);
  box-shadow: 0 6px 20px rgba(80,66,50,.09);
}
.category-tile:hover { border-color: var(--berry); }
.category-tile.active {
  border-color: var(--berry);
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(214,42,115,.16));
  box-shadow: 0 6px 20px rgba(152,28,80,.10);
}
.category-tile-icon { background: linear-gradient(135deg, var(--berry-light), var(--berry-dark)); }

.section-title { color: var(--silver-ink); }
.search-input { display: none !important; }
.card {
  background: rgba(255,253,249,.88);
  border-color: rgba(255,255,255,.86);
  box-shadow: 0 10px 28px rgba(80,66,50,.11);
}
.card:hover { background: rgba(255,255,255,.96); border-color: rgba(214,42,115,.40); }
.card-category { color: var(--silver-muted); }
.card-name { color: var(--silver-ink); }
.card-price { color: var(--berry-dark); }
.stock-tag.in-stock { background: linear-gradient(135deg, var(--berry-light), var(--berry-dark)); }
.stock-tag.out-stock { background: #737a81; }
.add-btn,
.primary-btn {
  background: linear-gradient(135deg, var(--berry-light), var(--berry));
  color: #fff;
  border: 1px solid rgba(152,28,80,.28);
  box-shadow: 0 5px 14px rgba(152,28,80,.16);
}
.add-btn:hover,
.primary-btn:hover { background: linear-gradient(135deg, var(--berry-light), var(--berry-dark)); }
.add-btn:focus-visible,
.primary-btn:focus-visible { outline-color: var(--berry-dark); }

.product-image-placeholder { background: linear-gradient(135deg, var(--gold), var(--berry-dark)); }
.product-card-link:hover .card-name,
.back-link:hover { color: var(--berry-dark); }

.site-footer {
  background: var(--silver-0);
  border-top-color: rgba(214,42,115,.28);
  color: var(--silver-ink);
}
.footer-phone { color: var(--silver-ink); }
.footer-social a { background: rgba(255,255,255,.65); border-color: rgba(180,160,130,.24); color: var(--berry-dark); }

.drawer { background: rgba(252,248,240,.97); color: var(--silver-ink); }
.drawer-header, .drawer-footer { border-color: rgba(214,42,115,.22); }
/* The drawer used to give #drawerBody its own flex:1 + overflow-y:auto —
   with a tall checkout form in #drawerFooter (which has no size limit),
   the body got squeezed into a tiny sliver with its own cramped scrollbar
   while the form just overflowed below it. Now the whole drawer scrolls as
   one unit and only the header stays pinned, so items list into a normal
   flow and the checkout form is always reachable by the same scroll. */
/* Админка переиспользует класс .drawer для своей (совсем другой) панели
   редактирования товара: там нет длинной формы чекаута, перетекающей в
   футер, так что единый скролл всей панели не нужен — а прилипающий
   заголовок (.drawer-header{position:sticky}) внутри .drawer, у которого
   ЕЩЁ И transform при открытии, визуально "уезжает" и накладывается на
   контент при скролле. Поэтому весь этот блок — только для витрины. */
.drawer:not(.product-drawer) {
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer:not(.product-drawer) .drawer-header {
  position: sticky;
  top: 0;
  z-index: 1;
  flex: none;
  background: rgba(252,248,240,.97);
}
.drawer:not(.product-drawer) .drawer-body { flex: none; overflow-y: visible; }
.drawer:not(.product-drawer) .drawer-footer { flex: none; }
.drawer-close { color: var(--silver-muted); }
.cart-item-name { color: var(--silver-ink); }
.field label { color: var(--silver-muted); }
.qty-btn { background: #fff; border-color: rgba(180,160,130,.32); color: var(--silver-ink); }
.total-row { color: var(--silver-ink); }
.payment-note { background: var(--berry-soft); color: var(--berry-dark); }
.tier-note {
  background: rgba(67,54,40,.05);
  border-color: rgba(67,54,40,.12);
  color: var(--silver-muted);
}
.tier-note-manual { background: var(--berry-soft); color: var(--berry-dark); }
.footer-copy { color: var(--silver-muted); }
.empty-state, .muted, .product-loading { color: var(--silver-muted); }
.confirm .order-number { color: var(--berry-dark); }

@media (max-width: 1050px) {
  .site-header {
    grid-template-columns: minmax(220px, 1fr) minmax(240px, 1fr) auto;
    gap: 12px;
    padding-left: 18px;
    padding-right: 18px;
  }
  .city-btn { display: none; }
  .brand-logo { width: min(300px, 34vw); }
  .account-btn { min-width: 48px; width: 48px; padding: 0; }
  .account-label { display: none; }
}


.secondary-btn { width:100%; background:var(--surface); color:var(--ink); border:1px solid var(--border); border-radius:var(--radius); padding:11px 14px; font-family:'PT Sans',sans-serif; font-weight:700; cursor:pointer; }
.secondary-btn:hover { border-color:var(--accent); }
.delivery-options-wrap { display:flex; flex-direction:column; gap:8px; margin:10px 0; }
.delivery-quote-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-muted);
  font-size: 14px;
  font-weight: 500;
}
.delivery-quote-spinner {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2.5px solid rgba(214,42,115,.18);
  border-top-color: var(--berry, var(--accent));
  animation: delivery-quote-spin .7s linear infinite;
}
@keyframes delivery-quote-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .delivery-quote-spinner { animation-duration: 1.6s; }
}
.delivery-option-card { display:flex; align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.delivery-option-card.selected { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.delivery-option-main { display:flex; flex-direction:column; gap:2px; flex:1; }
.delivery-option-main small { color:var(--ink-muted); font-size:12px; }
.delivery-option-price { white-space:nowrap; }
.delivery-provider-status { display:flex; justify-content:space-between; gap:10px; padding:8px 10px; background:var(--bg); border-radius:var(--radius); color:var(--ink-muted); font-size:12px; }
.delivery-provider-status span { text-align:right; }


/* Компактный выбор службы: одна строка на оператора, тариф «от» из API. */
.delivery-provider-summary {
  display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:66px;
  padding:11px 13px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--ink);
  text-align:left; cursor:pointer; transition:border-color .16s ease, background .16s ease, transform .16s ease;
}
.delivery-provider-summary:hover:not(:disabled) { border-color:var(--berry, var(--accent)); background:color-mix(in srgb, var(--surface) 92%, var(--berry, var(--accent))); transform:translateY(-1px); }
.delivery-provider-summary.selected { border-color:var(--berry, var(--accent)); box-shadow:0 0 0 1px var(--berry, var(--accent)) inset; }
.delivery-provider-summary:disabled { cursor:not-allowed; opacity:.62; }
.delivery-provider-summary-brand { display:flex; align-items:center; gap:10px; min-width:0; }
.delivery-provider-summary-brand img { width:34px; height:34px; flex:0 0 34px; object-fit:contain; padding:3px; border-radius:9px; background:#fff; }
.delivery-provider-summary-brand span { display:flex; flex-direction:column; gap:3px; min-width:0; }
.delivery-provider-summary-brand b { font-size:13px; }
.delivery-provider-summary-brand small { color:var(--ink-muted); font-size:11.5px; overflow-wrap:anywhere; }
.delivery-provider-summary > strong { white-space:nowrap; font-size:14px; }
.map-hint.is-loading { display:flex; align-items:center; gap:9px; }
.map-hint.is-loading .delivery-quote-spinner { display:inline-block; width:17px; height:17px; border-width:2px; }
.delivery-map.is-loading::after { content:""; position:absolute; z-index:5; inset:0; pointer-events:none; background:rgba(20,17,23,.10); animation:map-loading-fade .4s ease both; }
#deliveryMap { position:relative; }

/* Плавающий glass-dock масштаба. Важно: контрол — сосед #deliveryMap внутри
   .map-stage, а не потомок DOM карты. Так он не попадает во внутренний слой Yandex. */
.map-stage { position:relative; isolation:isolate; }
.map-stage > .map-zoom-controls {
  position:absolute !important;
  z-index:20 !important;
  top:auto !important;
  left:auto !important;
  right:16px !important;
  bottom:88px !important;
  display:flex !important;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  width:54px;
  padding:4px;
  box-sizing:border-box;
  border:1px solid rgba(247,240,229,.22);
  border-radius:16px;
  background:linear-gradient(150deg, rgba(48,45,52,.91), rgba(31,29,35,.84));
  box-shadow:0 12px 30px -7px rgba(0,0,0,.48),0 3px 9px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(18px) saturate(175%);
  backdrop-filter:blur(18px) saturate(175%);
  overflow:hidden;
  isolation:isolate;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
  pointer-events:auto;
}
.map-stage > .map-zoom-controls .map-zoom-btn {
  appearance:none;
  -webkit-appearance:none;
  position:relative;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  flex:0 0 44px;
  margin:0;
  padding:0;
  border:0;
  border-radius:11px;
  outline:none;
  color:#F7F0E5;
  background:transparent;
  font:500 20px/1 'Manrope',sans-serif;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:background-color .2s ease,color .2s ease,transform .14s cubic-bezier(.34,1.56,.64,1),opacity .2s ease;
}
.map-stage > .map-zoom-controls .map-zoom-btn svg {
  display:block;
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.15;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}
@media (hover:hover) and (pointer:fine) {
  .map-stage > .map-zoom-controls .map-zoom-btn:hover:not(:disabled) {
    color:#fff;
    background:rgba(214,42,115,.28);
  }
  .map-stage > .map-zoom-controls .map-zoom-btn:hover:not(:disabled) svg { transform:scale(1.13); }
}
.map-stage > .map-zoom-controls .map-zoom-btn:active:not(:disabled) {
  color:#fff;
  background:rgba(214,42,115,.42);
  transform:scale(.91);
}
.map-stage > .map-zoom-controls .map-zoom-btn:focus-visible {
  outline:2px solid #F7F0E5;
  outline-offset:-3px;
  background:rgba(214,42,115,.22);
}
.map-stage > .map-zoom-controls .map-zoom-btn:disabled {
  opacity:.28;
  color:#F7F0E5;
  cursor:not-allowed;
  transform:none;
  background:transparent;
}
.map-stage > .map-zoom-controls .map-zoom-btn:disabled svg { transform:none; }
.map-stage > .map-zoom-controls .map-zoom-divider {
  display:block;
  height:1px;
  flex:0 0 1px;
  margin:2px 7px;
  background:linear-gradient(90deg,transparent,rgba(247,240,229,.24) 20%,rgba(247,240,229,.24) 80%,transparent);
}

@media (prefers-reduced-motion:reduce) {
  .map-stage > .map-zoom-controls .map-zoom-btn,
  .map-stage > .map-zoom-controls .map-zoom-btn svg { transition:none; }
}
@keyframes map-loading-fade { from { opacity:0; } to { opacity:1; } }


/* Однократная анимация логотипа в шапке — плавное появление + один
   проход мягкого блика по камням. Играет один раз при загрузке
   страницы (animation-iteration-count не задан = 1 по умолчанию),
   дальше логотип остаётся в обычном виде. */
.brand-logo-wrap {
  display: inline-block;
}

/* Кнопка "назад" на странице товара — компактная круглая кнопка со
   стрелкой, в цветах кнопки корзины, вместо мелкого текста-ссылки. */
.back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  padding: 0;
  border: 1px solid rgba(152,28,80,.35);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--berry-light), var(--berry));
  color: #fff;
  box-shadow: 0 6px 16px rgba(152,28,80,.20), inset 0 1px 0 rgba(255,255,255,.35);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.back-btn:hover { background: linear-gradient(135deg, var(--berry-light), var(--berry-dark)); transform: translateX(-2px); }
.back-btn:focus-visible { outline: 2px solid var(--berry-dark); outline-offset: 2px; }


/* === Гарантируем, что контент поверх узоров === */
main, .grid, .category-tiles, .toolbar, .card, .product-page {
  position: relative !important;
  z-index: 50 !important;
}

/* === ФИКС "ПРЫГАЮЩИХ" КАРТОЧЕК === */

/* 1. Жестко включаем правую полосу прокрутки */
html {
  overflow-y: scroll !important; 
}

/* 2. Унифицируем высоту названий товаров (обрезаем до 2 строк) */
.card-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 42px !important; /* Примерная высота двух строк, чтобы даже короткие названия занимали одинаковое место */
}
/* === АНИМАЦИЯ ФИЛЬТРАЦИИ КАРТОЧЕК === */
/* Настройка плавного полета и исчезновения */
::view-transition-group(*) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* === ПЛАВНЫЕ ПЕРЕХОДЫ МЕЖДУ СТРАНИЦАМИ === */
#shopView, #productView {
  opacity: 1;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

#shopView.fade-out, #productView.fade-out {
  opacity: 0;
  transform: translateY(12px);
}

#shopView.fade-in, #productView.fade-in {
  animation: fadeInUp 0.4s ease forwards;
}

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

/* Плавное появление корзины с подтверждением заказа */
.drawer-body, .drawer-footer {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.drawer-body.content-transition, .drawer-footer.content-transition {
  animation: contentFadeIn 0.18s ease-out forwards;
}

@keyframes contentFadeIn {
  from {
    opacity: 0.98;
  }
  to {
    opacity: 1;
  }
}

/* === ЭФФЕКТ ПРИ НАВЕДЕНИИ МЫШИ НА КАРТОЧКУ (HOVER) === */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.card:hover {
  transform: translateY(-6px) scale(1.02) !important; /* Приподнимаем и чуть увеличиваем */
  box-shadow: 0 20px 40px rgba(110, 90, 70, 0.18), 0 0 0 1px rgba(214, 42, 115, 0.4) inset !important; /* Добавляем глубокую тень и легкую границу */
}

.address-actions { display:flex; justify-content:center; gap:8px; margin: 2px 0 4px; }
.map-modal { position:fixed; inset:0; z-index:1200; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(28,18,24,.46); backdrop-filter:blur(6px); }
.map-modal.open { display:flex; }
.map-modal-card { width:min(920px, 100%); max-height:min(92vh, 860px); display:flex; flex-direction:column; gap:12px; background:var(--surface); border:1px solid var(--border); border-radius:24px; box-shadow:0 24px 80px rgba(42,25,34,.28); padding:20px; }
.map-modal-header { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
.map-modal-header h2 { margin:3px 0 4px; font-size:26px; }
.map-modal-header p { margin:0; color:var(--ink-muted); }
.map-modal-kicker { font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.map-search-row {
  position:relative;
  z-index:30;
  display:flex; flex-wrap:wrap; gap:10px; align-items:end;
}
.map-address-field { flex: 1 1 220px; min-width:0; }
.map-address-field > label {
  display:block;
  margin:0 0 6px;
  font-size:14px;
  font-weight:600;
  color:var(--ink);
}
.map-address-input-wrap { position:relative; z-index:60; min-width:0; }
.map-search-row .search-input {
  display:block !important;
  width:100%;
  min-width:0;
  min-height:44px;
  padding:10px 14px;
}
.map-address-input-wrap .addr-suggest-list {
  left:0;
  right:0;
  width:auto !important;
  min-width:100%;
  z-index:1400;
}
.map-address-input-wrap .addr-suggest-wrap { width:100%; }
.map-city-btn {
  display:flex; align-items:center; gap:7px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:8px 14px; font-family:'PT Sans', sans-serif; font-size:13px; font-weight:700;
  color:var(--ink); cursor:pointer; max-width:220px; min-height:44px;
}
.map-city-btn:hover { border-color:var(--accent); }
.map-city-btn span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:140px; }
.map-city-btn .map-city-chevron { max-width:none; overflow:visible; font-size:12px; color:var(--ink-muted); }
.city-pin-icon-map { width:13px; height:17px; }
.map-city-btn, .map-location-btn { width:auto; min-width:150px; white-space:nowrap; }
.map-location-btn { min-height:44px; }
.map-hint { position:relative; z-index:5; font-size:13px; color:var(--ink-muted); }
.delivery-map { position:relative; z-index:1; height:min(52vh, 520px); min-height:320px; overflow:hidden; border-radius:18px; border:1px solid var(--border); }

/* Единый список адресных подсказок для корзины и карты. */
.addr-suggest-wrap {
  position:relative;
  width:100%;
  min-width:0;
}
.addr-suggest-list {
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  width:100%;
  max-height:320px;
  overflow:auto;
  display:none;
  margin:0;
  padding:6px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 18px 44px rgba(23,29,26,.18);
  z-index:5000;
}
.addr-suggest-list.open { display:block; }
.addr-suggest-item {
  width:100%;
  display:block;
  padding:11px 12px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-size:14px;
  line-height:1.35;
  text-align:left;
  cursor:pointer;
}
.addr-suggest-item:hover, .addr-suggest-item.active { background:var(--bg); }
.addr-suggest-list.in-map {
  max-width:none;
}
.map-selected-card { background:var(--bg); border:1px solid var(--border); border-radius:14px; padding:12px 14px; }
.map-selected-card div { margin-top:4px; font-weight:700; }
.map-selected-card small { display:block; margin-top:4px; color:var(--ink-muted); font-family:'DM Mono',monospace; }
.address-map-pickup-status { display:flex; align-items:center; gap:8px; margin-top:9px; color:var(--ink-muted); font-size:12px; line-height:1.45; font-weight:500; }
.address-map-pickup-status.is-loading .delivery-quote-spinner { display:inline-block; width:14px; height:14px; flex:0 0 14px; border-width:2px; }
.address-map-pvz-marker { cursor:default; }
.map-modal-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.map-modal-actions .primary-btn, .map-modal-actions .secondary-btn {
  width:auto;
  flex:0 1 auto;
  min-width:170px;
  border-radius:999px;
  padding:13px 22px;
  font-size:14.5px;
}


.selected-city-line { margin-bottom:8px; color:rgba(255,255,255,.55); font-size:13px; }
.selected-city-line strong { color:var(--silver-0); }

.yandex-delivery-marker {
  width: 31px; height: 47px; transform: translate(-50%, -100%); cursor: grab;
  position: relative; filter: drop-shadow(0 3px 6px rgba(0,0,0,.2));
}
.yandex-delivery-marker img {
  display:block; width:100%; height:100%; object-fit:contain;
  pointer-events:none; user-select:none;
}
.yandex-delivery-marker:active { cursor:grabbing; }

.pvz-summary-card { font-family: inherit; color: inherit; text-align: left; width: 100%; }

.delivery-provider-logo { display: inline-block; flex: 0 0 25px; width: 25px; height: 25px; object-fit: contain; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.delivery-option-brandline { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 4px; }
.delivery-option-brandline b { min-width: 0; }
.delivery-option-card { position: relative; cursor: pointer; }
/* Радио остаётся доступным для клавиатуры, но не рисует лишний системный кружок в строке Почты. */
.delivery-option-card input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.delivery-option-card:focus-within { outline: 2px solid var(--delivery-accent, var(--berry)); outline-offset: 2px; }
.checkout-map-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.checkout-map-actions .secondary-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.checkout-pvz-map-btn { border-color: rgba(214,42,115,.38) !important; background: linear-gradient(135deg, rgba(214,42,115,.12), rgba(201,161,90,.08)) !important; }
.checkout-pvz-map-btn > span { font-size: 20px; line-height: 1; }

.pvz-map-modal-card { width: min(100%, 980px); }
.pvz-map-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.pvz-map-filter { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: 700 12px 'Manrope', sans-serif; cursor: pointer; transition: border-color .15s, background .15s; }
.pvz-map-filter img { display: block; width: 22px; height: 22px; object-fit: contain; border-radius: 50%; background: #fff; }
.pvz-map-filter.active { border-color: var(--berry); background: rgba(214,42,115,.12); box-shadow: 0 0 0 1px rgba(214,42,115,.12) inset; }
.pvz-map-status { margin: 0 0 10px; color: var(--ink-muted); font-size: 12px; line-height: 1.5; }
.pvz-map-status.is-warning { color: #b86b28; }
.pvz-selected-card { margin-top: 12px; }
.pvz-selected-head { display: flex; align-items: center; gap: 10px; }
.pvz-selected-head img { display: block; width: 34px; height: 34px; flex: 0 0 34px; object-fit: contain; border-radius: 50%; background: #fff; }
.pvz-selected-head div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pvz-selected-head small { color: var(--ink-muted); font-size: 11px; }
.pvz-selected-address { margin-top: 8px; line-height: 1.4; }
.pvz-selected-meta { margin-top: 6px; color: var(--ink-muted); font-size: 12px; }
.pvz-selected-meta strong { color: var(--ink); font-size: 17px; font-variant-numeric: tabular-nums; }
.pvz-price-loading { display: inline-flex; align-items: center; gap: 7px; }
.pvz-price-error { color: #b86b28; }




/* Единый размер фирменной геометки и элементов управления в корзине.
   Маркер внутри карты (.yandex-delivery-marker) намеренно не затрагивается. */
.address-actions .secondary-btn,
.map-city-btn,
.map-location-btn {
  min-height: 44px;
  box-sizing: border-box;
  font-family: 'PT Sans', sans-serif;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
}
.address-actions .secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 1 auto;
  width: auto;
  min-width: min(220px, 100%);
  padding: 8px 14px;
}
.map-location-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
}

/* Статус наличия не должен лежать поверх изображения товара. */
.card .product-card-link .stock-tag {
  position: static;
  align-self: flex-start;
  order: -1;
  margin: 0 0 2px;
  z-index: auto;
}

/* =========================================================================
   КАТЕГОРИИ — современная сетка с цветными круглыми иконками (v2)
   Правило расположено в конце файла, поэтому переопределяет все более
   ранние варианты .category-tile из предыдущих визуальных версий сайта.
   ========================================================================= */
.category-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 14px;
  margin: 4px 0 30px;
  padding: 0;
}

.category-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 14px 6px 12px;
  background: var(--card-bg);
  border: 1px solid var(--silver-2);
  border-radius: 18px;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 2px 8px var(--shadow-soft);
  transition: transform .18s cubic-bezier(.22,.8,.28,1), box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.category-tile:hover {
  transform: translateY(-2px);
  border-color: var(--berry-line);
  box-shadow: 0 6px 16px var(--shadow-soft);
}

.category-tile.active {
  border-color: var(--berry);
  background: var(--berry-soft);
  box-shadow: 0 2px 8px var(--shadow-soft);
}

.category-tile.active .category-tile-icon {
  outline: 2px solid var(--berry);
  outline-offset: 2px;
}

.category-tile-icon {
  position: relative;
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: outline-color .18s ease;
  overflow: hidden;
}

.category-tile-emoji {
  position: relative;
  z-index: 1;
  line-height: 1;
}

.category-tile-label {
  font-family: 'Manrope', 'PT Serif', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--silver-ink);
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}



/* Подкатегории — вторичная строка фильтров-«пилюль», появляется только
   у категорий, где реально есть деление (стёкла холодной/горячей фиксации). */
.subcategory-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -18px 0 26px;
}
.subcategory-pill {
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--silver-2);
  background: var(--card-bg);
  color: var(--silver-ink);
  font-family: 'Manrope', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.subcategory-pill:hover { border-color: var(--berry-line); }
.subcategory-pill.active { background: var(--berry); border-color: var(--berry); color: #fff; }


/* Сертификаты и промокоды в корзине */
.discount-box {
  margin: 18px 0 10px;
  padding: 14px;
  border: 1px solid rgba(205, 113, 150, .22);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,248,251,.94));
}
.discount-box-title {
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 9px;
  color: var(--silver-ink);
}
.discount-box-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}
.discount-box-row input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  height: 44px;
  padding: 0 13px;
  border: 1px solid rgba(164, 143, 137, .35);
  border-radius: 11px;
  background: #fff;
  color: var(--silver-ink);
  font: 600 14px/1 'Manrope', sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.discount-box-row input:focus {
  outline: none;
  border-color: rgba(214, 43, 113, .55);
  box-shadow: 0 0 0 3px rgba(214, 43, 113, .10);
}
.discount-apply-btn {
  width: auto;
  min-width: 118px;
  height: 44px;
  padding: 0 18px;
  white-space: nowrap;
}
.discount-clear-btn {
  height: 44px;
  min-width: 92px;
  padding: 0 16px;
  white-space: nowrap;
}
.discount-success {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border-radius: 10px;
  background: rgba(229, 246, 238, .9);
  color: #21734f;
  font-size: 13px;
}
.discount-success b { white-space: nowrap; }
.discount-total-row span:last-child { color: #bd2767; font-weight: 800; }

.discount-benefit-select {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  border: 1px solid rgba(164, 143, 137, .35);
  border-radius: 11px;
  background: #fff;
  color: var(--silver-ink);
  font: 600 14px/1 'Manrope', sans-serif;
}
.discount-benefit-select:focus {
  outline: none;
  border-color: rgba(214, 43, 113, .55);
  box-shadow: 0 0 0 3px rgba(214, 43, 113, .10);
}
.discount-login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: 10px;
  text-decoration: none;
}
.discount-box-applied { padding-bottom: 10px; }
.discount-applied-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 11px;
  border-radius: 11px;
  background: rgba(229,246,238,.9);
  color: #21734f;
}
.discount-applied-row > div { min-width: 0; display:flex; flex-direction:column; gap:3px; }
.discount-applied-row small { color: #53846c; }






/* === Финальная полировка витрины v4 === */
:root {
  --content-max: 1480px;
}

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  font-size: 16px;
  overflow-x: hidden;
}

.site-header-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.site-header {
  min-height: 88px;
  height: 88px;
  padding: 10px clamp(18px, 2.5vw, 34px);
  gap: clamp(16px, 2vw, 28px);
}

.brand {
  height: 68px;
  min-width: 0;
}

.brand-logo,
.simple-page-header .brand-logo {
  display: block;
  width: 238px;
  height: 52px;
  max-width: none;
  max-height: none;
  object-fit: contain;
  transform: none !important;
}

.info-strip {
  min-height: 46px;
  height: 46px;
  padding: 0 24px;
  gap: 0;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
}

.info-strip-item {
  min-width: 120px;
  height: 46px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .01em;
}

.simple-page-header {
  min-height: 88px;
  height: 88px;
  padding: 10px clamp(18px, 2.5vw, 34px);
  gap: 20px;
  align-items: center;
}

.simple-header-back {
  font-size: 14px;
  padding: 10px 18px;
}

main {
  max-width: var(--content-max);
  padding: 32px clamp(18px, 2.5vw, 34px);
}

/* Четыре крупные карточки на широком экране: тексту хватает ширины. */
.grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

.card {
  min-width: 0;
  padding: 18px;
  gap: 10px;
  border-radius: 16px;
  background: rgba(255,253,249,.97);
  border-color: rgba(190,176,160,.42);
}

.card:hover {
  background: rgba(255,253,249,1);
}

.card-image {
  aspect-ratio: 1 / 0.92;
  min-height: 210px;
  border-radius: 12px;
}

.card-name {
  font-size: 17px !important;
  line-height: 1.35 !important;
  min-height: 46px !important;
  margin: 4px 0 2px !important;
  overflow-wrap: anywhere !important;
  hyphens: auto;
}

.card-category {
  font-size: 12.5px;
  line-height: 1.35;
}

.card-price {
  font-size: 20px !important;
  margin-top: auto !important;
  margin-bottom: 4px !important;
}

.add-btn {
  min-height: 46px;
  padding: 11px 14px;
  font-size: 15px;
}

.scroll-row .card {
  min-width: 310px;
  max-width: 310px;
}

.category-tiles {
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.category-tile {
  min-height: 132px;
  padding: 15px 9px 13px;
  border-radius: 18px;
  background: #fffdf9;
}

.category-tile.active {
  /* Полностью непрозрачный фон: движущиеся искры не просвечивают. */
  background: #fff0f6 !important;
  box-shadow: 0 5px 16px rgba(152,28,80,.10);
}

.category-tile-label {
  font-size: 13px;
  line-height: 1.3;
  min-height: 34px;
  overflow-wrap: anywhere;
}

.subcategory-pill {
  font-size: 13.5px;
  padding: 8px 17px;
}

.footer-copy {
  font-size: 14px;
  max-width: 460px;
  line-height: 1.5;
}

/* Контентные страницы: увеличиваем основной текст для комфортного чтения. */
.content-page {
  max-width: 920px;
  padding: 64px 24px 88px;
}

.content-hero .eyebrow {
  font-size: 13px;
}

.content-hero h1 {
  font-size: 48px;
  line-height: 1.08;
}

.content-hero > p,
.policy-section p,
.value-card p {
  font-size: 18px;
  line-height: 1.72;
}

.policy-section h2,
.value-card h3 {
  font-size: 23px;
  line-height: 1.25;
}

.value-card {
  padding: 28px 22px;
}

/* Плавные переходы внутри одной страницы без прыжка scroll/артефактов. */
#shopView,
#productView {
  opacity: 1;
  transform: none;
  transition: opacity .28s ease;
  will-change: opacity;
}

/* Пока API заполняет категории и карточки, витрина не рисуется. Это не маскировка
   артефакта: браузер получает первый видимый кадр уже с окончательной геометрией. */
#shopView.shop-preloading {
  visibility: hidden !important;
}

#shopView.view-leaving,
#productView.view-leaving {
  opacity: 0;
}

#shopView.view-entering,
#productView.view-entering {
  animation: cleanViewEnter .34s cubic-bezier(.22,.8,.28,1) both;
}

@keyframes cleanViewEnter {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Фоновый canvas не скрываем при входе в магазин: артефакт возникал из-за
   промежуточной компоновки пустой витрины, а не из-за самого canvas. */

/* Товарная страница получает собственный непрерывный фон, без просвечивания canvas. */
.product-page-active {
  background: #EAEAEC;
}

.product-page-active::before {
  background: #EAEAEC;
}

@media (max-width: 1180px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}





/* === UX pass 5: stable shared header, compact categories, 5-up catalog === */
.site-header-wrap {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}
.site-header-wrap.header-hidden { transform: none !important; opacity: 1 !important; }

/* Одинаковый масштаб логотипа на витрине и информационных страницах. */
.brand-logo,
.simple-page-header .brand-logo {
  width: 260px !important;
  height: 58px !important;
  max-width: 260px !important;
  max-height: 58px !important;
  object-fit: contain !important;
}
.site-header,
.simple-page-header {
  min-height: 78px !important;
  height: 78px !important;
  box-sizing: border-box;
}
.simple-page-header {
  padding: 10px 28px !important;
}

/* Полоса навигации всегда находится сразу под шапкой и никогда не уезжает
   отдельно от неё. */
.info-strip {
  position: relative !important;
  height: 44px !important;
  min-height: 44px !important;
}
.info-strip-item {
  height: 44px !important;
  min-height: 44px !important;
  box-sizing: border-box;
  padding: 0 24px !important;
  align-items: center !important;
  font-size: 13px !important;
}

/* Возвращаем привычные 5 карточек на широком экране. */
.grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 18px !important;
}
@media (max-width: 1180px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}



/* Категории не занимают полэкрана: каждая кнопка получает ровно столько
   места, сколько нужно её содержимому, а длинные подписи переносятся. */
.category-tiles {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 10px !important;
  margin-bottom: 24px !important;
}
.category-tile {
  flex: 0 1 auto !important;
  width: max-content !important;
  min-width: 88px !important;
  max-width: 180px !important;
  min-height: 104px !important;
  height: auto !important;
  padding: 11px 13px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  background: #fffdf9 !important;
}
.category-tile-label {
  display: block !important;
  width: auto !important;
  max-width: 150px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  text-align: center !important;
  line-height: 1.25 !important;
  font-size: 12.5px !important;
}
.category-tile.active {
  background: #fff0f6 !important;
}




/* =========================================================================
   UX PASS 6 — premium single-line category rail + stable shared chrome
   ========================================================================= */
.category-tiles {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 2px 0 26px !important;
  /* 4px верхнего внутреннего пространства оставляют место для
     штатного translateY(-2px): движение сохраняется, а рамка не режется
     верхней границей горизонтального scroll-контейнера. */
  padding: 4px 2px 10px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.category-tiles::-webkit-scrollbar { display: none; }
.category-tiles::after { content: ''; flex: 0 0 2px; }

.category-tile {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 118px !important;
  width: 118px !important;
  min-width: 118px !important;
  max-width: 118px !important;
  height: 108px !important;
  min-height: 108px !important;
  padding: 10px 8px 11px !important;
  margin: 0 !important;
  border-radius: 17px !important;
  border: 1px solid rgba(190,176,160,.42) !important;
  background: #fffdf9 !important;
  box-shadow: 0 3px 12px rgba(95,70,52,.07) !important;
  color: inherit;
  font: inherit;
  scroll-snap-align: start;
  cursor: pointer;
}
.category-tile:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(214,42,115,.45) !important;
  box-shadow: 0 7px 18px rgba(95,70,52,.11) !important;
}
.category-tile:focus-visible {
  outline: 2px solid var(--berry) !important;
  outline-offset: 2px;
}
.category-tile.active {
  background: #fff0f6 !important;
  border-color: var(--berry) !important;
  box-shadow: 0 6px 18px rgba(152,28,80,.11) !important;
}
.category-tile-icon {
  width: 48px !important;
  height: 48px !important;
  font-size: 21px !important;
  flex: 0 0 48px !important;
}
.category-tile-label {
  width: 100% !important;
  max-width: 104px !important;
  min-height: 31px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  color: var(--silver-ink) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.22 !important;
  text-align: center !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal !important;
}
.category-tile:first-child .category-tile-label { font-size: 12.5px !important; }

/* Shared top chrome: same logo geometry and the navigation strip stays
   attached to it on every page. */
.site-header-wrap {
  position: sticky !important;
  top: 0 !important;
  transform: none !important;
  opacity: 1 !important;
}
.site-header,
.simple-page-header {
  height: 78px !important;
  min-height: 78px !important;
}
.brand-logo,
.simple-page-header .brand-logo {
  width: 260px !important;
  max-width: 260px !important;
  height: 58px !important;
  max-height: 58px !important;
  object-fit: contain !important;
  transform: none !important;
}
.info-strip {
  height: 44px !important;
  min-height: 44px !important;
  position: relative !important;
  transform: none !important;
}
.info-strip-item {
  height: 44px !important;
  min-height: 44px !important;
}





/* =========================================================================
   UX PASS 7 — абсолютно единый верхний chrome на всех публичных страницах
   ========================================================================= */
:root {
  --shared-header-bg: #0e0d10;
  --shared-strip-bg: #0e0d10;
  --shared-header-height: 82px;
  --shared-strip-height: 44px;
  --shared-logo-width: 260px;
  --shared-logo-height: 58px;
}

/* Одинаковый фон верхней части: он больше не просвечивает фон страницы
   и поэтому не меняется визуально между «Магазин», «О нас» и «Доставка». */
.site-header,
.simple-page-header {
  height: var(--shared-header-height) !important;
  min-height: var(--shared-header-height) !important;
  padding: 10px 28px !important;
  background: var(--shared-header-bg) !important;
  border-bottom: 1px solid rgba(214,42,115,.22) !important;
  box-shadow: 0 5px 20px rgba(50,42,38,.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Одинаковая геометрия самого логотипа и его места в шапке. */
.brand,
.simple-page-header > a:first-child {
  width: var(--shared-logo-width) !important;
  height: var(--shared-logo-height) !important;
  min-width: var(--shared-logo-width) !important;
  max-width: var(--shared-logo-width) !important;
  flex: 0 0 var(--shared-logo-width) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 !important;
}

.brand-logo,
.brand-logo-wrap,
.simple-page-header .brand-logo {
  width: var(--shared-logo-width) !important;
  height: var(--shared-logo-height) !important;
  min-width: var(--shared-logo-width) !important;
  max-width: var(--shared-logo-width) !important;
  max-height: var(--shared-logo-height) !important;
  display: block !important;
  object-fit: contain !important;
  object-position: left center !important;
  margin: 0 !important;
  transform: none !important;
}

.brand-logo-wrap {
  flex: 0 0 var(--shared-logo-width) !important;
}

/* Один и тот же фон/размер полосы на всех страницах. */
.info-strip {
  height: var(--shared-strip-height) !important;
  min-height: var(--shared-strip-height) !important;
  background: var(--shared-strip-bg) !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(214,42,115,.35) !important;
  box-shadow: 0 4px 16px rgba(20,16,22,.16) !important;
  transform: none !important;
}

.info-strip-item {
  height: var(--shared-strip-height) !important;
  min-height: var(--shared-strip-height) !important;
  padding: 0 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* На простых страницах не оставляем дополнительного вертикального смещения. */
.simple-page-header .simple-header-back {
  margin: 0 !important;
}



/* ===== Избранное (сердечко) ===== */
.card-image { position: relative; }
.fav-heart {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.92);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,.14);
  color: #b7b0b8;
  transition: transform .15s ease, color .15s ease, background .15s ease;
}
.fav-heart svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.fav-heart:hover { transform: scale(1.1); color: var(--berry); }
.fav-heart.is-fav { color: var(--berry); }
.fav-heart.is-fav svg { fill: var(--berry); stroke: var(--berry); }
.fav-heart.pulsing { animation: favPulse .35s ease; }
@keyframes favPulse { 0%{transform:scale(1)} 40%{transform:scale(1.28)} 100%{transform:scale(1)} }

.fav-heart-lg { width: 46px; height: 46px; top: 14px; right: 14px; }
.fav-heart-lg svg { width: 24px; height: 24px; }

/* ===== Выпадающее меню личного кабинета (по наведению) ===== */
.account-nav { position: relative; }
.account-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  min-width: 252px; background: #FFFDF9; border: 1px solid rgba(152,28,80,.16);
  border-radius: 16px; box-shadow: 0 18px 40px rgba(70,45,40,.16);
  padding: 8px; opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.account-dropdown::before {
  content: ''; position: absolute; top: -6px; right: 22px; width: 12px; height: 12px;
  background: #FFFDF9; border-left: 1px solid rgba(152,28,80,.16); border-top: 1px solid rgba(152,28,80,.16);
  transform: rotate(45deg); border-radius: 2px 0 0 0;
}
.account-nav:hover .account-dropdown,
.account-nav:focus-within .account-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.account-dropdown a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  color: var(--ink); text-decoration: none;
  font: 700 13px/1.25 'Manrope', sans-serif;
  transition: background .12s ease, color .12s ease;
}
.account-dropdown a:hover { background: rgba(214,42,115,.08); color: var(--berry-dark); }
.account-dropdown-icon {
  width: 26px; height: 26px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(214,42,115,.10); color: var(--berry); font-size: 13px; line-height: 1;
}


/* ===== Компактный выбор сертификата/промокода в корзине ===== */
.benefit-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0;
  max-height: 340px;
  overflow-y: auto;
  padding: 2px;
}
.benefit-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 40px 12px 14px;
  border-radius: 14px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.benefit-card:hover { transform: translateY(-1px); }
.benefit-card input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.benefit-card-icon {
  flex: 0 0 38px;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 17px;
}
.benefit-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.benefit-card-title { font-weight: 800; font-size: 13.5px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.benefit-card-meta-row { display: flex; align-items: center; gap: 8px; font-size: 11px; overflow: hidden; }
.benefit-card-code { font-family: 'JetBrains Mono', 'DM Mono', monospace; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.benefit-card-expiry { flex: 0 0 auto; white-space: nowrap; opacity: .8; }
.benefit-card-value { flex: 0 0 auto; font-weight: 900; font-size: 15px; font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
.benefit-card-check {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%) scale(.5);
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 900;
  background: var(--berry); color: #fff;
  opacity: 0; transition: opacity .18s ease, transform .18s cubic-bezier(0.34,1.56,0.64,1);
}
.benefit-card.selected .benefit-card-check { opacity: 1; transform: translateY(-50%) scale(1); }
.benefit-card-remove {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%; border: none; cursor: pointer;
  display: grid; place-items: center; font-size: 12px;
}
.benefit-card-applied { padding-right: 42px; }

/* Тип «Подарочный сертификат» — тёмная премиальная карточка с золотом. */
.benefit-card-vip {
  background: linear-gradient(135deg, #201d24, #171519);
  border: 1px solid rgba(212,175,55,.4);
  box-shadow: 0 6px 16px rgba(0,0,0,.28);
}
.benefit-card-vip .benefit-card-icon { background: rgba(212,175,55,.16); color: #D4AF37; }
.benefit-card-vip .benefit-card-title { color: #F7E5A9; }
.benefit-card-vip .benefit-card-code, .benefit-card-vip .benefit-card-expiry { color: rgba(247,229,169,.6); }
.benefit-card-vip .benefit-card-value { color: #D4AF37; }
.benefit-card-vip.selected, .benefit-card-vip.benefit-card-applied { border-color: #D4AF37; box-shadow: 0 6px 18px rgba(212,175,55,.22); }
.benefit-card-vip .benefit-card-remove { background: rgba(212,175,55,.16); color: #D4AF37; }

/* Тип «Золотой сертификат» — светлая золотая карточка. */
.benefit-card-gold {
  background: linear-gradient(135deg, #F9E7B9, #DFBD74);
  border: 1px solid #C49F4B;
  box-shadow: 0 6px 16px rgba(150,110,20,.16);
}
.benefit-card-gold .benefit-card-icon { background: rgba(32,30,36,.12); color: #4a3c1a; }
.benefit-card-gold .benefit-card-title, .benefit-card-gold .benefit-card-value { color: #201E24; }
.benefit-card-gold .benefit-card-code, .benefit-card-gold .benefit-card-expiry { color: rgba(32,30,36,.62); }
.benefit-card-gold.selected, .benefit-card-gold.benefit-card-applied { border-color: #8a6d1f; box-shadow: 0 6px 18px rgba(150,110,20,.3); }
.benefit-card-gold .benefit-card-remove { background: rgba(32,30,36,.12); color: #201E24; }

/* Тип «Промокод» — светлый «билет» с розовым пунктиром. */
.benefit-card-promocode {
  background: #fffdfc;
  border: 1.5px dashed var(--berry);
  box-shadow: 0 4px 12px rgba(0,0,0,.10);
}
.benefit-card-promocode .benefit-card-icon { background: var(--berry-soft); }
.benefit-card-promocode .benefit-card-title { color: var(--silver-ink); }
.benefit-card-promocode .benefit-card-code, .benefit-card-promocode .benefit-card-expiry { color: var(--ink-muted); }
.benefit-card-promocode .benefit-card-value { color: var(--berry); }
.benefit-card-promocode.selected, .benefit-card-promocode.benefit-card-applied { border-style: solid; box-shadow: 0 6px 16px rgba(214,42,115,.22); }
.benefit-card-promocode .benefit-card-remove { background: var(--berry-soft); color: var(--berry-dark); }

.discount-manual-entry { margin-top: 10px; }
.discount-manual-entry summary {
  cursor: pointer; font-size: 12.5px; font-weight: 700;
  color: rgba(255,255,255,.5); list-style: none; user-select: none;
}
.checkout-summary-card .discount-manual-entry summary { color: rgba(255,255,255,.5); }
.discount-box:not(.discount-box-applied) .discount-manual-entry summary:hover { color: var(--berry-light); }
.discount-manual-entry summary::-webkit-details-marker { display: none; }
.discount-manual-entry summary::before { content: '+ '; }
.discount-manual-entry[open] summary::before { content: '− '; }
.discount-manual-entry .discount-box-row { margin-top: 10px; }


/* =========================================================================
   «СПАСИБО ЗА ЗАКАЗ» — отдельная полноэкранная страница вместо узкой
   шторки. Окно с анимацией посылки нарочно оставлено светлым — как
   освещённая витрина на тёмной странице, а не переверстано в тёмный тон
   (сама анимация настроена под светлый задник).
   ========================================================================= */
.confirm-page { max-width: 640px; }
.confirm-page-inner { text-align: center; }
.confirm-page .lunar-canvas-wrap { margin-left: auto; margin-right: auto; }
.confirm-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--berry-light);
  margin: 18px 0 6px;
}
.confirm-subtitle { color: rgba(255,255,255,.6); font-size: 14.5px; margin: 0 0 22px; }
.confirm-details-card { text-align: center; }
.confirm-detail-label { font-size: 12px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .08em; }
.confirm-details-card .order-number { font-family: 'JetBrains Mono', monospace; font-size: 26px; font-weight: 700; color: var(--gold); margin: 6px 0 14px; }
.confirm-phone-note { font-size: 14px; color: rgba(255,255,255,.75); }
.confirm-phone-note strong { color: var(--silver-0); }
.confirm-note { margin-top: 10px; font-size: 12.5px; color: rgba(255,255,255,.6); }
.confirm-note-ok { color: #a8e0be; }
.confirm-note-bad { color: #e2969c; }
.confirm-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }

/* ===== Подтверждение оплаты перед созданием заказа ===== */
.pay-confirm { padding: 6px 2px 2px; }
.pay-confirm-title { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 700; color: var(--berry); text-align: center; }
.pay-confirm-sub { color: var(--ink-muted); font-size: 13px; text-align: center; margin: 4px 0 2px; line-height: 1.45; }
.pay-confirm-details { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.pay-confirm-details > div { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.pay-confirm-details span { color: var(--ink-muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.pay-confirm-details b { color: var(--ink); font-weight: 700; }

/* =========================================================================
   CATEGORY SHOWCASE — крупные квадратные плитки, 3 колонки (3×3 на 9
   категориях). Сами изображения — готовый брендированный дизайн (фон,
   рамка, подпись уже "внутри" картинки), поэтому карточка — просто
   квадратная рамка-кнопка, без отдельной иконки/подписи поверх.
   ========================================================================= */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(var(--cat-columns, 3), minmax(0, 1fr));
  gap: 22px;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto 28px;
  padding: 3px 2px 8px;
  box-sizing: border-box;
  align-items: stretch;
}

.cat-card {
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1 / 1;
  padding: 0;
  box-sizing: border-box;
  display: block;
  border-radius: 22px;
  border: none;
  background: #0b0b0d;
  box-shadow: 0 6px 18px rgba(30, 20, 15, .12);
  overflow: hidden;
  cursor: pointer;
  transform: translate3d(0,0,0);
  transition: transform .28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .28s ease;
}

.cat-icon-wrap {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
}

.cat-icon-wrap::before { content: none; }

.cat-icon {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.cat-card:hover {
  transform: translate3d(0,-4px,0);
  box-shadow: 0 14px 30px rgba(30,20,15,.20);
}

.cat-card:hover .cat-icon { transform: scale(1.045); }

.cat-card:active { transform: translate3d(0,-1px,0) scale(.98); }

.cat-card:focus-visible { outline: 2px solid var(--berry); outline-offset: 3px; }

.cat-card.active {
  box-shadow: 0 0 0 3px var(--berry), 0 14px 30px rgba(152,28,80,.22);
}

.cat-check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--berry);
  opacity: 0;
  transform: scale(.6);
  z-index: 2;
  transition: opacity .18s ease, transform .28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cat-check::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 6px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  border-radius: 0 0 1px 0;
}

.cat-card.active .cat-check { opacity: 1; transform: scale(1); }



@media (prefers-reduced-motion: reduce) {
  .cat-card, .cat-icon, .cat-check { transition: none !important; }
}

/* =========================================================================
   МАРКЕТИНГОВЫЕ СЛАЙДЫ — готовые брендированные баннеры (главная «О нас»
   и шапка страницы «Магазин»). Каждый — цельная картинка на всю ширину
   контента, без наложенного текста поверх.
   ========================================================================= */
.marketing-slide {
  display: block;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto 22px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(30, 20, 15, .12);
}
.marketing-slide img {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== Верхний баннер «О нас»: статичная картинка плавно проявляется НАД видео =====
   Изображение остаётся в обычном потоке и задаёт высоту блока. Видео находится
   под ним; JS анимирует opacity картинки в последние 2,4 секунды ролика. */
.hero-video {
  position: relative;
  isolation: isolate;
  transform: translateZ(0);
}
.hero-video .hero-still {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  will-change: opacity;
}
.hero-video .hero-player {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}
.hero-video.is-done .hero-player,
.hero-video.is-static .hero-player { display: none; }
.hero-video.is-static .hero-still { opacity: 1 !important; }

/* ===== Кнопка «Смотреть каталог» (страница «О нас») — шампань-золото =====
   В тон золотым заголовкам на баннерах. Фон — тот же champagne-градиент,
   текст — тёмно-коричневый (контраст ≥ 6.5:1), иконка-бриллиант и стрелка. */
.about-catalog-cta {
  display: flex;
  justify-content: center;
  margin: 0 auto 34px;
}
.about-cta-btn {
  --cta-bg: linear-gradient(135deg, #f8e8b8 0%, #e4c379 36%, #c9a05a 64%, #efd594 100%);
  --cta-shadow: 0 14px 28px rgba(150,110,40,.36), 0 2px 0 rgba(120,84,30,.45),
                inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 6px rgba(120,84,30,.25);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: auto;
  padding: 19px 40px;
  border: 1px solid rgba(124,88,30,.50);
  border-radius: 999px;
  background: var(--cta-bg);
  color: #2b1a10;
  font: 800 13.5px/1 'Manrope', sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--cta-shadow);
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.about-cta-btn .cta-ic { width: 19px; height: 19px; flex: none; }
.about-cta-btn .cta-ar { width: 16px; height: 16px; flex: none; transition: transform .25s ease; }
/* letter-spacing добавляет пустое место после последней буквы — убираем, чтобы текст был по центру */
.about-cta-btn .cta-label { margin-right: -.18em; }

/* блик: только transform — анимируется на видеокарте */
.about-cta-btn::after {
  top: -30%;
  left: 0;
  width: 42%;
  height: 160%;
  transform: translateX(-140%) skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  transition: transform .8s ease;
}

@media (hover: hover) {
  .about-cta-btn:hover {
    background: var(--cta-bg);                 /* перебиваем общий .primary-btn:hover */
    transform: translateY(-2px);
    filter: brightness(1.05) saturate(1.06);
    box-shadow: 0 18px 34px rgba(150,110,40,.42), 0 2px 0 rgba(120,84,30,.45),
                inset 0 1px 0 rgba(255,255,255,.75), inset 0 -2px 6px rgba(120,84,30,.22);
  }
  .about-cta-btn:hover::after { left: 0; transform: translateX(340%) skewX(-20deg); }
  .about-cta-btn:hover .cta-ar { transform: translateX(4px); }
}
.about-cta-btn:active {
  transform: translateY(0) scale(.985);
  filter: brightness(.98);
  box-shadow: 0 8px 18px rgba(150,110,40,.34), 0 1px 0 rgba(120,84,30,.45),
              inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 6px rgba(120,84,30,.28);
}
.about-cta-btn:focus-visible { outline: 2px solid #B02A63; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .about-cta-btn,
  .about-cta-btn::after,
  .about-cta-btn .cta-ar { transition: none; }
  .about-cta-btn:hover { transform: none; }
  .about-cta-btn:hover::after { transform: translateX(-140%) skewX(-20deg); }
  .about-cta-btn:hover .cta-ar { transform: none; }
}





/* =========================================================================
   КАРТОЧКИ ТОВАРОВ — тёмная «ювелирная» поверхность в тон новым плиткам
   категорий (те же чёрный фон и берри/золотая подсветка, что и в
   .cat-card), вместо прежних светлых карточек — чтобы сочетались между
   собой. Палитра — те же переменные --berry/--gold, что уже используются
   по всему сайту, просто на тёмной подложке.
   ========================================================================= */
.card {
  background: #0e0d10;
  border: 1px solid rgba(214,42,115,.30);
  border-radius: 20px;
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
}

.card:hover {
  background: #131116 !important;
  border-color: rgba(214,42,115,.55) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.36), 0 0 0 1px rgba(201,161,90,.35) !important;
}

/* Товарное фото почти всегда на белой подложке — даём ему свою светлую
   «рамку»-подложку вместо прежней (там был mix-blend-mode:multiply,
   который на тёмном фоне убил бы фото в черноту). */
.card-image {
  background: var(--card-bg);
  box-shadow: none;
}
.card-image img {
  object-fit: contain;
  mix-blend-mode: normal;
}

.card-category { color: var(--dusty-pink); }
.card-name { color: var(--silver-0); }
.card-price { color: var(--gold); }

/* Единая анимация для плиток категорий и карточек товаров — одинаковый
   подъём, длительность и «пружинка», чтобы hover ощущался одинаково
   везде на сайте. (!important — перебивает старое правило transform на
   .card:hover, которое было прописано так же жёстко раньше.) */
.cat-card,
.card {
  transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow .3s ease,
              border-color .3s ease,
              background .3s ease !important;
}
.cat-card:hover,
.card:hover {
  transform: translateY(-6px) scale(1.015) !important;
}

.empty-state, .muted, .product-loading { color: rgba(255,255,255,.55); }
.back-btn { color: var(--silver-ink); }

/* =========================================================================
   КОРЗИНА И ВЫЕЗЖАЮЩИЕ ПАНЕЛИ (.drawer — корзина и выбор города) — та же
   тёмная поверхность вместо прежней светлой кремовой.
   ========================================================================= */
.drawer, .drawer-header, .drawer-footer {
  background: #0e0d10;
  color: var(--silver-0);
}
.drawer-header, .drawer-footer { border-color: rgba(214,42,115,.22); }
.drawer-close { color: rgba(255,255,255,.6); }
.cart-item-name, .total-row { color: var(--silver-0); }
.qty-btn {
  background: rgba(255,255,255,.06);
  border-color: rgba(214,42,115,.30);
  color: var(--silver-0);
}
.drawer:not(.product-drawer) .field label { color: rgba(255,255,255,.55); }
/* Админка использует тот же класс .drawer (тёмная панель корзины/города),
   но сама панель редактирования карточки — светлая: сбрасываем унаследованный
   светлый цвет текста обратно на обычный тёмный внутри её тела. */
.product-drawer .drawer-body { color: var(--ink); }
.tier-note {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.6);
}
.confirm .order-number { color: var(--gold); }

/* =========================================================================
   ПОДВАЛ САЙТА — та же тёмная поверхность на всех страницах.
   ========================================================================= */
.site-footer {
  background: #0e0d10;
  border-top-color: rgba(214,42,115,.28);
  color: var(--silver-0);
}
.footer-phone { color: var(--silver-0); }
.footer-copy { color: rgba(255,255,255,.55); }

/* =========================================================================
   ШАПКА — кнопки «Город» / «Личный кабинет» и выпадающее меню кабинета
   были рассчитаны на светлую шапку; подгоняем под новый тёмный фон
   (--shared-header-bg), чтобы не осталось светлых «островков».
   ========================================================================= */
.city-btn {
  color: var(--silver-0);
  border-color: rgba(214,42,115,.30);
  background: rgba(255,255,255,.06);
}
.city-btn:hover { background: rgba(255,255,255,.12); }

.account-btn {
  background: rgba(255,255,255,.06);
  color: var(--silver-0);
  border-color: rgba(214,42,115,.30);
}
.account-btn.account-authenticated { background: rgba(214,42,115,.16); border-color: rgba(214,42,115,.5); }
.account-btn.account-authenticated .account-label { color: var(--gold); }
.account-btn:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}
.account-icon { background: rgba(214,42,115,.22); color: var(--berry-light); }

.account-dropdown, .account-dropdown::before {
  background: #17151a;
  border-color: rgba(214,42,115,.30);
}
.account-dropdown a { color: var(--silver-0); }
.account-dropdown a:hover { background: rgba(255,255,255,.08); color: #fff; }
.account-dropdown-icon { background: rgba(214,42,115,.20); color: var(--berry-light); }

/* =========================================================================
   СТРАНИЦА «ДОСТАВКА» — информационные блоки (.policy-section) в той же
   тёмной подаче, что и остальные карточки на сайте.
   ========================================================================= */
.policy-section {
  background: #0e0d10;
  border-color: rgba(214,42,115,.30);
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
}
.policy-section h2 { color: var(--silver-0); }
.policy-section p { color: rgba(255,255,255,.75); }

/* ===== Исправление наведения на выпадающее меню аккаунта ===== */
.account-nav::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
  z-index: 59;
}
.account-dropdown {
  top: calc(100% + 8px);
}
@media (hover: hover) and (pointer: fine) {
  .account-nav:hover .account-dropdown,
  .account-nav:focus-within .account-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}

/* === Sticky footer: при пустом каталоге/коротком контенте футер всегда у нижнего края === */
html, body {
  min-height: 100%;
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.site-header-wrap {
  flex: 0 0 auto;
}
main {
  flex: 1 0 auto;
  width: 100%;
}
.site-footer {
  flex: 0 0 auto;
  margin-top: auto;
}

/* Подсказка остаётся видимой и после выбора сертификата/промокода */
.benefit-choice-hint { margin-top: 8px; }

/* =========================================================================
   УПРОЩЁННАЯ КОРЗИНА (шторка) — миниатюра товара, компактные действия,
   промокод простым полем, липкая кнопка «К оформлению» с ценой.
   ========================================================================= */
.cart-item-image {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--card-bg);
}
.cart-item-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 20px;
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.08);
}
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}
.cart-item-actions { display: flex; align-items: center; gap: 6px; }
.cart-item-remove {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(214,42,115,.22);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.55);
  cursor: pointer;
  padding: 6px;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.cart-item-remove svg { width: 100%; height: 100%; }
.cart-item-remove:hover { color: var(--berry-light); border-color: rgba(214,42,115,.4); background: rgba(214,42,115,.08); }
.cart-item .fav-heart { width: 30px; height: 30px; }
/* .fav-heart обычно лежит поверх фото товара (position:absolute), а тут —
   в обычном ряду действий рядом с корзиной/удалением, поэтому переводим
   его в нормальный поток и подгоняем под тёмную карточку. */
.cart-item-actions .fav-heart {
  position: static;
  box-shadow: none;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(214,42,115,.22);
  color: rgba(255,255,255,.55);
}
.cart-item-actions .fav-heart:hover { background: rgba(214,42,115,.08); border-color: rgba(214,42,115,.4); color: var(--berry-light); }
.cart-item-actions .fav-heart.is-fav { color: var(--berry-light); border-color: rgba(214,42,115,.45); }
.cart-delivery-note {
  margin: 4px 0 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.6);
  font-size: 12.5px;
  line-height: 1.4;
  text-align: center;
}

.promo-box { margin-bottom: 4px; }
.promo-box-input-row { display: flex; gap: 8px; }
.promo-box-input-row input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 13px;
  border-radius: 10px;
  border: 1px solid rgba(214,42,115,.24);
  background: rgba(255,255,255,.06);
  color: var(--silver-0);
  font: 500 13.5px 'Manrope', sans-serif;
}
.promo-box-input-row input::placeholder { color: rgba(255,255,255,.4); }
.promo-apply-btn {
  flex: 0 0 auto;
  height: 42px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid rgba(214,42,115,.35);
  background: rgba(214,42,115,.14);
  color: var(--berry-light);
  font: 700 13px 'Manrope', sans-serif;
  cursor: pointer;
}
.promo-apply-btn:hover { background: rgba(214,42,115,.22); }
.promo-box-applied {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(214,42,115,.14);
  border: 1px solid rgba(214,42,115,.32);
}
.promo-applied-code { flex: 1; min-width: 0; font-weight: 700; font-size: 13px; color: var(--gold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.promo-applied-amount { font-weight: 800; font-size: 13px; color: var(--berry-light); white-space: nowrap; }
.promo-remove-btn {
  width: 22px; height: 22px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.12); color: rgba(255,255,255,.7);
  cursor: pointer; font-size: 12px; line-height: 1; flex: 0 0 22px;
}

.total-row-final { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.14); font-size: 15px; }

.cart-checkout-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: 12px;
  padding: 15px 20px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--berry), var(--berry-dark));
  color: #fff;
  font: 700 14.5px 'Manrope', sans-serif;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(152,28,80,.28);
}
.cart-checkout-cta:hover { filter: brightness(1.05); }
.cart-checkout-cta span:first-child { opacity: .85; font-weight: 600; font-size: 13px; }
.cart-checkout-cta span:last-child { font-family: 'JetBrains Mono', monospace; }

/* =========================================================================
   СТРАНИЦА ОФОРМЛЕНИЯ ЗАКАЗА — полноэкранная, два столбца: слева получатель
   /доставка/товары, справа закреплённая сводка с оплатой. Карточки —
   та же тёмная поверхность, что и везде на сайте.
   ========================================================================= */
.checkout-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 24px 60px;
}
.checkout-back-btn {
  background: none;
  border: none;
  color: var(--silver-ink);
  font: 600 13.5px 'Manrope', sans-serif;
  cursor: pointer;
  padding: 6px 0;
  margin-bottom: 6px;
}
.checkout-back-btn:hover { color: var(--berry); }
.checkout-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--silver-ink);
  margin: 0 0 20px;
}
.checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 24px;
  align-items: start;
}
.checkout-section {
  background: #0e0d10;
  border: 1px solid rgba(214,42,115,.30);
  border-radius: 20px;
  box-shadow: 0 8px 22px rgba(0,0,0,.24);
  padding: 22px 24px;
  margin-bottom: 20px;
  color: rgba(255,255,255,.85);
}
.checkout-section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--silver-0);
  margin: 0 0 14px;
}
.checkout-section-header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.checkout-section-header-row .checkout-section-title { margin-bottom: 0; }
.checkout-items { display: flex; flex-direction: column; }
.checkout-items .cart-item:last-child { border-bottom: none; }
.checkout-dev-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255,255,255,.14);
}
.checkout-dev-tools .secondary-btn {
  width: auto;
  font-size: 11.5px;
  padding: 7px 12px;
  border-style: dashed;
}

.checkout-col-right { position: sticky; top: 104px; }
.checkout-summary-card {
  background: #0e0d10;
  border: 1px solid rgba(214,42,115,.30);
  border-radius: 20px;
  box-shadow: 0 8px 22px rgba(0,0,0,.24);
  padding: 22px 24px;
}
.checkout-summary-card .total-row { color: var(--silver-0); }
.checkout-summary-card .primary-btn { margin-top: 6px; }

.delivery-section-title {
  margin: 15px 0 6px;
  font-weight: 700;
  font-size: 13.5px;
  color: rgba(255,255,255,.7);
}
.delivery-section-title:first-child { margin-top: 4px; }
/* .delivery-option-card остаётся светлой «плашкой» — фиксируем тёмный
   текст явно, иначе он наследует светлый цвет тёмной карточки-обёртки. */
.checkout-section .delivery-option-card,
.checkout-section .delivery-option-card b,
.checkout-section .delivery-option-card small { color: var(--silver-ink); }
.checkout-section .delivery-provider-status { color: var(--ink-muted); }
.checkout-section .delivery-provider-status b { color: var(--silver-ink); }

/* .discount-box был рассчитан на светлую подложку (полупрозрачный
   бело-розовый градиент) — на тёмной карточке оформления он выглядел
   мутно-серым пятном. Убираем собственный фон, оставляя только светлое
   поле ввода и текст в тон карточке. */
.checkout-summary-card .discount-box { background: transparent; border-color: rgba(214,42,115,.24); }
.checkout-summary-card .discount-box-title { color: var(--silver-0); }
.checkout-summary-card .hint { color: rgba(255,255,255,.55); }
.checkout-summary-card .discount-box-applied { background: rgba(214,42,115,.12); border-radius: 14px; padding: 12px; }


/* Поля получателя в оформлении заказа: профильные данные открываются для
   изменения только после нажатия на карандаш. Email всегда доступен только для чтения. */
.recipient-field .recipient-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.recipient-field .recipient-input-row input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.recipient-field .recipient-profile-input.is-readonly {
  background: rgba(255,255,255,.78);
  color: #38343a;
  cursor: default;
}
.recipient-field .recipient-profile-input::placeholder {
  color: #777078;
  opacity: 1;
}
.recipient-edit-btn {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(214,42,115,.38);
  border-radius: 10px;
  background: rgba(214,42,115,.10);
  color: var(--silver-0);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.recipient-edit-btn:hover {
  background: rgba(214,42,115,.22);
  border-color: rgba(214,42,115,.72);
}
.recipient-edit-btn:active { transform: scale(.96); }
.recipient-edit-btn:focus-visible { outline: 2px solid var(--berry); outline-offset: 2px; }
.recipient-edit-btn svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.recipient-email-input { opacity: .9; }

/* =========================================================================
   МОДАЛКИ КАРТЫ (адрес / ПВЗ) — были ещё светлыми, приводим в тон.
   ========================================================================= */
.map-modal-card { background: #0e0d10; border-color: rgba(214,42,115,.30); }
.map-modal-header h2 { color: var(--silver-0); }
.map-modal-header p, .map-hint { color: rgba(255,255,255,.55); }
.map-selected-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: var(--silver-0); }
.map-selected-card small { color: rgba(255,255,255,.5); }
.map-address-field > label { color: var(--silver-0); }

/* Страница «О нас» показывает крупные фото-баннеры (не текстовые абзацы),
   поэтому ей нужна та же ширина, что и у баннера/плиток на странице
   «Магазин» (1180px), а не узкие 920px, рассчитанные на читаемый текст
   (у «Доставки» текста много, ей узкая колонка по-прежнему нужна). */
.content-page-wide { max-width: 1180px; }

/* .secondary-btn задаёт width:100% и определён ниже по каскаду, поэтому
   более ранняя попытка сузить кнопку геолокации не срабатывала — фиксируем
   более точным селектором в конце файла. */
.city-search-row { flex-direction: column; }
.city-search-row .city-locate-btn,
.city-search-row input { width: 100%; }

/* =========================================================================
   ПОЛУЧАТЕЛЬ — активное предложение войти/зарегистрироваться.
   ========================================================================= */
.recipient-login-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(214,42,115,.14);
  border: 1px solid rgba(214,42,115,.4);
}
.recipient-login-cta-text {
  flex: 1 1 220px;
  color: var(--silver-0);
  font-size: 13.5px;
  line-height: 1.45;
}
.recipient-login-cta-text b { color: var(--gold); }
.recipient-login-cta-btn {
  flex: 0 0 auto;
  width: auto;
  background: linear-gradient(135deg, var(--berry), var(--berry-dark));
  color: #fff;
  border: none;
  padding: 11px 18px;
  white-space: nowrap;
}
.recipient-login-cta-btn:hover { filter: brightness(1.08); }





/* =========================================================
   UX REDESIGN — catalog/category/product/confirmation
   ========================================================= */
:root { --site-gray: #EAEAEC; --site-gray-deep: #CBCDD1; }

/* Out-of-stock controls use the same neutral gray as the site background,
   not the warm beige token inherited from the older theme. */
.add-btn:disabled,
.primary-btn:disabled,
.product-stock.unavailable,
.stock-tag.out-stock {
  background: var(--site-gray) !important;
  color: #6B6E74 !important;
  border-color: #D3D5D9 !important;
  box-shadow: none !important;
}

/* Category is a real page: the landing category grid disappears and the
   selected category gets a compact, centered heading above its products. */
.category-page-head {
  width: min(1180px, 100%);
  margin: 8px auto 20px;
  padding: 4px 0 4px;
}
.category-page-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(52,50,56,.62);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
  transition: color .18s ease, transform .18s ease;
}
.category-page-back:hover { color: var(--berry); transform: translateX(-2px); }
.category-page-kicker {
  color: var(--berry);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.category-page-head h1 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.02;
  color: var(--silver-ink);
}
.category-page-head p {
  margin: 8px 0 0;
  color: #777A80;
  font-size: 14px;
}


/* ЮKassa return: success screen is shown only after the server verifies a paid status. */
.payment-return-page { min-height: 55vh; display: grid; place-items: center; }
.payment-return-card { width: min(560px, 100%); margin: 32px auto; padding: clamp(24px, 5vw, 44px); text-align: center; border: 1px solid rgba(166, 123, 91, .22); border-radius: 24px; background: rgba(255, 253, 249, .96); box-shadow: 0 18px 50px rgba(67, 40, 37, .08); }
.payment-return-title { margin: 12px 0 8px; color: var(--berry-dark) !important; font-family: 'Cormorant Garamond', serif; font-size: clamp(30px, 4vw, 42px); line-height: 1.05; }
.payment-return-text { max-width: 440px; margin: 0 auto; color: #686B72; line-height: 1.55; }
.payment-return-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.payment-return-spinner { width: 34px; height: 34px; margin: 0 auto; border: 3px solid rgba(133, 79, 99, .18); border-top-color: var(--berry); border-radius: 50%; animation: paymentReturnSpin .8s linear infinite; }
@keyframes paymentReturnSpin { to { transform: rotate(360deg); } }

/* Confirmation page: title first, then a balanced 4:3 animation on the left
   and the order details/actions on the right. */
.confirm-page {
  width: min(1080px, 100%);
  max-width: 1080px;
  margin: 0 auto;
}
.confirm-page-inner { text-align: left; }
.confirm-title {
  margin: 0 0 4px;
  text-align: center;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.02;
  color: var(--berry-dark) !important;
}
.confirm-subtitle {
  margin: 0 auto 22px;
  max-width: 680px;
  text-align: center;
  color: #686B72 !important;
}
.confirm-main-row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(320px, 2.7fr);
  gap: 14px;
  align-items: stretch;
}
.confirm-page .lunar-canvas-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
}
.confirm-page .lunar-canvas { display: block; width: 100%; height: 100%; }
.confirm-side { display: flex; flex-direction: column; min-width: 0; }
.confirm-details-card { margin: 0; flex: 1 1 auto; text-align: left; }
.confirm-actions { margin-top: 14px; }





/* ==========================================================================
   PRODUCT PAGE — single authoritative stylesheet for the product window:
   gallery (main photo + right-hand thumbnail column), info panel and the
   description block below. This replaces every earlier, partial version
   of these rules that used to be scattered through this file.
   ========================================================================== */

.product-page {
  display: grid;
  width: min(1180px, calc(100% - 32px));
  max-width: 1180px;
  margin: 18px auto 0;
  grid-template-columns: minmax(0, 1.5fr) minmax(360px, .95fr);
  gap: 30px;
  align-items: stretch;
}

#productView > .back-btn {
  margin-left: max(0px, calc((100% - 1180px) / 2));
}

/* ---- Gallery: main photo, thumbnail column on the right ----
   The thumbnail column is absolutely positioned inside .product-gallery
   (top:0/bottom:0) instead of being a stretched grid track: that way its
   height always comes from the photo (the only element in normal flow),
   never the other way round. Sizing the column via a percentage of an
   auto-height grid row is what produced the collapsed/oversized column
   seen before — this removes that circular dependency entirely. */

.product-gallery-panel { min-width: 0; display: flex; align-items: flex-start; }

.product-gallery {
  position: relative;
  width: 100%;
  min-width: 0;
}

.product-main-image {
  position: relative;
  width: calc(100% - 104px);
  aspect-ratio: 1 / 1;
  min-height: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.05), transparent 42%),
    #0e0d10;
  border: 1px solid rgba(214,42,115,.30);
  box-shadow: 0 18px 42px rgba(0,0,0,.16);
  isolation: isolate;
  outline: none;
}
.product-main-image:focus-visible {
  outline: 2px solid var(--berry-light);
  outline-offset: 3px;
}
.product-main-image::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.02), transparent 28%, transparent 72%, rgba(0,0,0,.10));
  z-index: 1;
}

.product-main-photo {
  position: absolute;
  inset: 18px;
  width: calc(100% - 36px);
  height: calc(100% - 36px);
  object-fit: contain;
  display: block;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 1;
  transition: opacity .12s ease;
  z-index: 2;
}
.product-main-image.is-changing .product-main-photo { opacity: .7; }

/* Big, unambiguous circular arrows — always on top of the photo. */
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8,7,9,.55);
  color: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.28);
  opacity: .92;
  cursor: pointer;
  transition: opacity .16s ease, transform .16s ease, background .16s ease;
}
.gallery-arrow-prev { left: 14px; }
.gallery-arrow-next { right: 14px; }
.gallery-arrow:hover {
  opacity: 1;
  background: var(--berry);
  transform: translateY(-50%) scale(1.07);
}
.gallery-arrow:focus-visible {
  opacity: 1;
  outline: 2px solid var(--berry-light);
  outline-offset: 2px;
}

/* Thumbnail column: absolutely positioned against .product-gallery so its
   height always matches the photo. Exactly 4 thumbnails are visible at once
   (each sized to 1/4 of the column height, minus the 3 gaps between them);
   the rest scroll into view on a slim native scrollbar — no custom buttons
   to overlap a thumbnail or go stale. */
.product-thumbs-column {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 92px;
  min-width: 92px;
}

.product-thumbs {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 0 2px 0 0;
  overscroll-behavior: contain;
}

.product-thumb {
  position: relative;
  width: calc(100% - 8px);
  flex: 0 0 calc((100% - 32px) / 5);
  padding: 0;
  box-sizing: border-box;
  border: 2px solid rgba(255,255,255,.11);
  border-radius: 12px;
  background: #0e0d10;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 13px rgba(0,0,0,.12);
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.product-thumb:hover { transform: translateY(-1px); border-color: rgba(214,42,115,.56); }
.product-thumb.active {
  border-color: var(--berry);
  box-shadow: 0 0 0 3px rgba(214,42,115,.55), 0 8px 18px rgba(0,0,0,.24);
}
.product-thumb-frame {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  box-sizing: border-box;
}
.product-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  background: #0e0d10;
}
.product-thumb-number { display: none; }

/* ---- Info panel ----
   Equal height with the gallery is handled in app.js
   (syncProductPanelHeights): it measures this panel's natural height and
   applies that as the height of both this panel and the photo. */

.product-info {
  position: sticky;
  top: 94px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 30px 30px 26px;
  border-radius: 22px;
  background: #0e0d10;
  border: 1px solid rgba(214,42,115,.30);
  box-shadow: 0 18px 42px rgba(0,0,0,.16);
}
.product-info-head h1 {
  margin: 0;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--silver-0);
}
.product-category {
  margin-bottom: 9px;
  color: var(--dusty-pink);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.product-sku {
  margin: 13px 0 0;
  color: rgba(255,255,255,.48);
}
.product-purchase {
  margin-top: 25px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.product-price {
  margin-bottom: 13px;
  color: var(--gold);
  font: 700 30px 'JetBrains Mono', monospace;
  line-height: 1;
}
.product-stock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 16px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}
.product-stock.available {
  background: rgba(90, 210, 140, .15);
  color: #7FE0A2;
}
.product-stock-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}
.product-stock.unavailable .product-stock-dot { background: #8d9196; }
.product-add-btn {
  width: 100%;
  min-height: 52px;
  margin: 0;
  font-size: 14px;
  border-radius: 14px;
}
.product-add-btn:disabled {
  background: #eaeaec !important;
  color: #6b6e74 !important;
  border-color: #d3d5d9 !important;
}

.product-specs {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.product-specs h3 { margin: 0 0 10px; color: rgba(255,255,255,.9); font-size: 14px; }
.product-specs-table { width: 100%; border-collapse: collapse; }
.product-specs-table th,
.product-specs-table td { padding: 10px 0; font-size: 13px; text-align: left; vertical-align: top; font-weight: 400; }
.product-specs-table th { color: rgba(255,255,255,.47); width: 44%; padding-right: 12px; font-weight: 500; }
.product-specs-table td { color: rgba(255,255,255,.9); font-weight: 600; }
.product-specs-table tr:not(:last-child) th,
.product-specs-table tr:not(:last-child) td { border-bottom: 1px solid rgba(255,255,255,.09); }

/* ---- Description, full width below both columns ---- */

.product-description-section {
  width: min(1180px, calc(100% - 32px));
  max-width: 1180px;
  margin: 30px auto 0;
  padding: 28px 30px 32px;
  box-sizing: border-box;
  border: 1px solid rgba(214,42,115,.24);
  border-radius: 22px;
  background: #0e0d10;
  box-shadow: 0 14px 32px rgba(0,0,0,.10);
  color: rgba(255,255,255,.84);
}
.product-description-kicker {
  margin-bottom: 6px;
  color: var(--dusty-pink);
  line-height: 1;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.product-description-section h2 { margin: 0 0 15px; color: #fff; font-size: 24px; }
.product-description-section > div { color: rgba(255,255,255,.77); line-height: 1.72; }
.product-description-section .muted { color: rgba(255,255,255,.5); }

/* ---- Responsive ---- */





@media (prefers-reduced-motion: reduce) {
  .product-main-photo, .product-thumb, .gallery-arrow { transition: none !important; }
  .product-main-image.is-changing .product-main-photo { opacity: 1; }
}

/* Закрытая панель (корзина, выбор города) стоит вплотную к правому краю экрана,
   и её тень -18px 0 50px просачивалась на страницу тёмной полосой. Тень — только у открытой. */
.drawer:not(.product-drawer):not(.open) { box-shadow: none !important; }

/* ===== Производительность: размытие подложки там, где его не видно =====
   У этих блоков непрозрачный фон (rgb(14,13,16)), он целиком закрывает то, что
   размывает backdrop-filter, — картинка не меняется. Но браузеру приходится на каждом
   кадре прокрутки копировать и размывать область под КАЖДОЙ карточкой (на витрине их 80).
   Размытие оставлено только там, где фон полупрозрачный: окна, лайтбокс, карта. */
.site-header,
.simple-page-header,
.info-strip,
.category-tile,
.toolbar,
.card,
.site-footer,
.drawer {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}


/* =========================================================================
   UX PASS 8 — Визуальная полировка цен, карточек и категорий
   ========================================================================= */

/* 1. Выразительная подача цены БЕЗ изменения её фирменного цвета var(--gold) */
.card-price {
  color: var(--gold) !important;
  font-family: 'DM Mono', 'JetBrains Mono', monospace !important;
  font-variant-numeric: tabular-nums;
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 4px 11px;
  margin-top: auto !important;
  margin-bottom: 6px !important;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(201, 161, 90, 0.10));
  border: 1px solid rgba(201, 161, 90, 0.28);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-shadow: 0 1px 10px rgba(201, 161, 90, 0.28);
}

.product-price {
  color: var(--gold) !important;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 14px rgba(201, 161, 90, 0.32);
}

/* 2. Строгое выравнивание высоты названий в сетке (2 строки) */
.grid .card-name,
.scroll-row .card-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-height: 41px !important;
  max-height: 41px !important;
  line-height: 1.35 !important;
  font-size: 15px !important;
}

/* 3. Гранёный кант и кристальный блик на плитках категорий (.cat-card) */
.cat-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 10px 26px rgba(20, 14, 18, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.cat-card::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -85%;
  width: 40%;
  height: 160%;
  pointer-events: none;
  transform: skewX(-22deg);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.38) 50%,
    transparent 100%
  );
  transition: left 0.75s cubic-bezier(0.22, 0.8, 0.28, 1);
  z-index: 1;
}

.cat-card:hover {
  border-color: rgba(201, 161, 90, 0.55);
  box-shadow:
    0 18px 36px rgba(20, 14, 18, 0.32),
    0 0 20px rgba(var(--glow, 201, 161, 90), 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.cat-card:hover::after {
  left: 145%;
}

/* 4. Тёмная тема для выпадающих подсказок адреса */
.addr-suggest-list {
  background: #17151a !important;
  border: 1px solid rgba(214, 42, 115, 0.32) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45) !important;
}
.addr-suggest-item {
  color: var(--silver-0) !important;
}
.addr-suggest-item + .addr-suggest-item {
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}
.addr-suggest-item:hover,
.addr-suggest-item.active {
  background: rgba(214, 42, 115, 0.16) !important;
  color: var(--gold) !important;
}

/* =========================================================================
   Подпись разработчика — в самом низу подвала, мелко и приглушённо
   ========================================================================= */
.footer-credit {
  max-width: 1680px; margin: 22px auto 0; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.07);
  text-align: center; font-size: 11px; line-height: 1.4; letter-spacing: .02em;
  color: rgba(255,255,255,.38);
}
.footer-credit a {
  color: rgba(255,255,255,.55); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.18);
  transition: color .2s ease, border-color .2s ease;
}
.footer-credit a:hover, .footer-credit a:focus-visible {
  color: #e7c77e; border-color: rgba(231,199,126,.6);
}


/* =========================================================================
   Подпись разработчика: кнопка вместо ссылки + выбор мессенджера (только иконки)
   ========================================================================= */
.footer-credit { position: relative; }
.footer-credit .credit-link {
  background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.18);
  padding: 0; margin: 0; font: inherit; letter-spacing: inherit; cursor: pointer;
  color: rgba(255,255,255,.55);
  transition: color .2s ease, border-color .2s ease;
}
.footer-credit .credit-link:hover,
.footer-credit .credit-link:focus-visible,
.footer-credit .credit-link[aria-expanded="true"] { color: #e7c77e; border-color: rgba(231,199,126,.6); outline: none; }
.credit-pop {
  position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%);
  display: flex; gap: 12px; padding: 10px 12px;
  background: #17151a; border: 1px solid rgba(214,42,115,.30); border-radius: 18px;
  box-shadow: 0 14px 34px rgba(0,0,0,.55); z-index: 30;
}
.credit-pop[hidden] { display: none; }
.credit-pop::after {
  content: ''; position: absolute; left: 50%; top: 100%; width: 10px; height: 10px;
  background: #17151a; border-right: 1px solid rgba(214,42,115,.30); border-bottom: 1px solid rgba(214,42,115,.30);
  transform: translate(-50%, -5px) rotate(45deg);
}
.credit-app {
  width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: none;
  cursor: pointer; transition: transform .15s ease, filter .15s ease;
}
.credit-app svg, .credit-app img { display: block; width: 100%; height: 100%; object-fit: contain; }
.credit-pop { gap: 10px; padding: 8px 10px; }
.credit-app:hover { transform: translateY(-2px) scale(1.07); filter: brightness(1.08); }
.credit-app:focus-visible { outline: 2px solid #e7c77e; outline-offset: 3px; }

/* =========================================================================
   Шапка витрины: поиск строго по центру, город не схлопывается
   Левая и правая колонки одинаковой ширины (не меньше содержимого правой),
   поэтому поиск всегда по центру, а на узких экранах сжимается сам поиск —
   он не сдвигается и не давит на город.
   ========================================================================= */
@media (min-width: 1051px) {
  .site-header {
    --side: 364px; /* ширина правой части: город + значок кабинета + корзина */
    grid-template-columns: minmax(var(--side), 1fr) minmax(220px, 560px) minmax(var(--side), 1fr);
  }
  .brand, .brand-logo-wrap { display: block; min-width: 0; max-width: 100%; }
  .header-right { flex-shrink: 0; gap: 12px; }
  .city-btn { flex: 0 0 auto; min-width: 0; max-width: 170px; }
  .city-btn span { max-width: 110px; }
  .account-btn { min-width: 48px; width: 48px; padding: 0; }
  .account-label { display: none; }
}
/* Самая узкая зона: правая часть компактнее, чтобы поиск остался по центру */
@media (min-width: 1051px) and (max-width: 1130px) {
  .site-header { --side: 320px; }
  .city-btn { max-width: 130px; }
  .city-btn span { max-width: 70px; }
}
@media (min-width: 1366px) {
  .site-header { --side: 460px; }
  .account-btn { min-width: 132px; width: auto; padding: 0 13px; }
  .account-label { display: inline; }
}

/* =========================================================================
   Шапка выезжающих окон (город, корзина): светлый фон «кремовой» темы
   перебивал тёмный, а текст белый — заголовок «Ваш город» был не виден
   ========================================================================= */
.drawer:not(.product-drawer) .drawer-header {
  background: #0e0d10;
  color: var(--silver-0, #f4f1ec);
}
.drawer:not(.product-drawer) .drawer-header h2,
.drawer:not(.product-drawer) .drawer-header h3 { color: var(--silver-0, #f4f1ec); }


/* =========================================================================
   «О нас» и «Доставка»: та же шапка, что в магазине, но без поиска и корзины
   ========================================================================= */
.site-header.no-search { display: flex; align-items: center; justify-content: space-between; }
.site-header.no-search .header-right { margin-left: auto; }


/* =========================================================================
   Меню кабинета в шапке: единый набор значков одного размера
   ========================================================================= */
.account-dropdown-icon { width: 30px; height: 30px; border-radius: 10px; font-size: 0; }
.account-dropdown-icon svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }


/* =========================================================================
   Юридические страницы (согласие на обработку персональных данных)
   ========================================================================= */
.legal-page { max-width: 860px; margin: 0 auto; padding: 36px 20px 80px; }
.legal-card { background: rgba(255,253,249,.96); border: 1px solid var(--silver-2); border-radius: 22px; padding: 38px 42px; box-shadow: 0 18px 50px rgba(20,16,24,.08); }
.legal-card h1 { font-family: 'Manrope', sans-serif; font-size: 22px; line-height: 1.3; letter-spacing: .01em; margin: 0 0 10px; color: #17151a; }
.legal-card h2 { font-family: 'Manrope', sans-serif; font-size: 16px; font-weight: 600; color: #6b6670; margin: 0 0 26px; }
.legal-card p { font-family: 'Manrope', sans-serif; font-size: 15px; line-height: 1.7; color: #2c2830; margin: 0 0 16px; }
.legal-card a { color: #c2185b; text-decoration: underline; text-underline-offset: 2px; }
.legal-card .legal-meta { margin: 26px 0 0; font-size: 13px; color: #8a8590; }


/* Кнопка «В магазин» в тёмной шапке простых страниц */
.simple-page-header .simple-header-back { color: #f4f1ec; border-color: rgba(255,255,255,.38); }
.simple-page-header .simple-header-back:hover { color: #fff; border-color: #e7c77e; }


/* =========================================================================
   Выбор способа оплаты на шаге подтверждения заказа
   ========================================================================= */
.pay-methods { margin-top: 14px; display: grid; gap: 8px; }
.pay-methods-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a8590; }
.pay-method { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1.5px solid #E8DFD0; border-radius: 14px; background: #FFFDF9; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.pay-method:hover { border-color: #d6a9be; }
.pay-method.is-selected { border-color: #d62a73; box-shadow: 0 0 0 3px rgba(214,42,115,.12); }
.pay-method input[type=radio] { width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 18px; accent-color: #d62a73; }
.pay-method-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pay-method-body b { font-size: 14px; color: #2c2830; }
.pay-method-body small { font-size: 12px; color: #7a7580; line-height: 1.35; }

/* Выбор способа оплаты внутри сводки оформления */
.checkout-summary-card .pay-methods { margin: 14px 0 12px; }

/* =========================================================================
   Оформление заказа: адрес доставки — заметный обязательный шаг в стиле
   StrazBerry. Подсветка становится спокойнее после расчёта тарифов.
   ========================================================================= */
.checkout-address-panel {
  margin: 14px 0 18px;
  padding: 15px;
  border: 1px solid rgba(214,42,115,.34);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(214,42,115,.055), rgba(255,255,255,.018));
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.checkout-address-panel.is-required {
  border-color: rgba(239,75,143,.86);
  background: linear-gradient(135deg, rgba(214,42,115,.17), rgba(214,42,115,.055) 65%, rgba(255,255,255,.02));
  box-shadow: 0 0 0 3px rgba(214,42,115,.09), 0 12px 28px rgba(0,0,0,.18);
}
.checkout-address-panel.is-pending { border-color: rgba(214,42,115,.56); }
.checkout-address-panel.is-loading { border-color: rgba(214,42,115,.72); }
.checkout-address-panel.is-ready {
  border-color: rgba(105,171,139,.48);
  background: linear-gradient(135deg, rgba(105,171,139,.07), rgba(255,255,255,.018));
}
.checkout-address-panel.is-unavailable {
  border-color: rgba(239,75,143,.72);
  background: linear-gradient(135deg, rgba(214,42,115,.12), rgba(255,255,255,.018));
}
.checkout-address-status {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  margin-bottom: 15px;
}
.checkout-address-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  color: #fff;
  background: #d62a73;
  box-shadow: 0 4px 12px rgba(214,42,115,.22);
  font: 800 19px/1 'Manrope', sans-serif;
}
.checkout-address-panel.is-ready .checkout-address-status-icon {
  background: #477e64;
  box-shadow: 0 4px 12px rgba(71,126,100,.2);
}
.checkout-address-panel.is-loading .checkout-address-status-icon { animation: checkout-address-pulse 1.2s ease-in-out infinite; }
@keyframes checkout-address-pulse { 50% { opacity: .55; transform: scale(.96); } }
.checkout-address-status-copy { min-width: 0; }
.checkout-address-status-copy strong {
  display: block;
  margin: 0 0 3px;
  color: #fff4f8;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}
.checkout-address-status-copy p {
  margin: 0;
  color: rgba(255,255,255,.69);
  font-size: 12.5px;
  line-height: 1.45;
}
.checkout-address-status-badge {
  justify-self: end;
  padding: 5px 8px;
  border: 1px solid rgba(239,75,143,.45);
  border-radius: 7px;
  color: #ffc0d8;
  background: rgba(214,42,115,.12);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .065em;
  white-space: nowrap;
}
.checkout-address-panel.is-ready .checkout-address-status-badge {
  border-color: rgba(105,171,139,.38);
  color: #b5e0c7;
  background: rgba(105,171,139,.09);
}
.checkout-address-field { margin-bottom: 9px; }
.checkout-address-field > label {
  display: block;
  margin-bottom: 7px;
  color: #fff4f8;
  font-size: 13px;
  font-weight: 800;
}
.checkout-address-required-mark { color: #ff6ca9; font-size: 18px; vertical-align: -1px; }
.checkout-address-field input {
  min-height: 48px;
  border: 1px solid rgba(214,42,115,.45);
  border-radius: 12px;
  background: rgba(255,255,255,.97);
  color: #242027;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.checkout-address-panel.is-required .checkout-address-field input {
  border-color: #e45491;
  box-shadow: 0 0 0 3px rgba(214,42,115,.13), 0 2px 8px rgba(0,0,0,.12);
}
.checkout-address-field input:focus {
  outline: none;
  border-color: #f06aa5;
  box-shadow: 0 0 0 4px rgba(214,42,115,.17);
}
.checkout-address-field .hint { color: rgba(255,255,255,.58); font-size: 11.5px; }
.checkout-address-panel .address-actions { margin: 8px 0 0; }
.checkout-address-panel .address-actions .secondary-btn {
  min-height: 40px;
  border-color: rgba(214,42,115,.42);
  background: rgba(214,42,115,.09);
  color: #f8eaf0;
}
.checkout-address-panel .address-actions .secondary-btn:hover {
  border-color: rgba(214,42,115,.78);
  background: rgba(214,42,115,.17);
}
.delivery-address-gate {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 15px;
  border: 1px dashed rgba(214,42,115,.36);
  border-radius: 14px;
  background: rgba(214,42,115,.055);
  color: #f7edf1;
}
.delivery-address-gate.is-required { border-color: rgba(214,42,115,.48); background: rgba(214,42,115,.075); }
.delivery-address-gate.is-unavailable { border-style: solid; border-color: rgba(239,75,143,.48); }
.delivery-address-gate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 9px;
  background: rgba(214,42,115,.18);
  color: #ff9fc5;
  font-weight: 900;
}
.delivery-address-gate b { display: block; margin: 1px 0 3px; color: #fff2f7; font-size: 13px; }
.delivery-address-gate p { margin: 0; color: rgba(255,255,255,.63); font-size: 12px; line-height: 1.5; }



/* =========================================================================
   STRAZBERRY HEADER TYPE SYSTEM
   Единая типографика для города, имени клиента и корзины. Кнопки остаются
   разными по акценту, но используют общий шрифт, ритм, высоту и радиус.
   Размер слегка растёт на широких экранах; длинные подписи аккуратно
   сокращаются, не выталкивая поиск и соседние элементы.
   ========================================================================= */
:root {
  --header-ui-label-size: clamp(12.2px, calc(10px + 0.18vw), 13.5px);
}

.site-header .header-right {
  gap: clamp(8px, 0.58vw, 11px);
}

.site-header .city-btn,
.site-header .account-btn,
.site-header .cart-btn {
  box-sizing: border-box;
  font-family: 'Manrope', sans-serif;
  line-height: 1.2;
  letter-spacing: -0.012em;
  border-radius: 13px;
}

.site-header .city-btn {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 160px;
  min-height: 46px;
  height: 46px;
  padding: 0 12px;
  gap: 8px;
  font-size: var(--header-ui-label-size);
  font-weight: 700;
}
.site-header .city-btn span {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 118px;
  font: inherit;
  line-height: inherit;
}
.site-header .city-pin-icon {
  width: 14px;
  height: 17px;
  flex: 0 0 14px;
}

.site-header .account-btn {
  min-width: 0;
  font-size: calc(var(--header-ui-label-size) - 0.2px);
  font-weight: 700;
  letter-spacing: -0.015em;
  gap: 8px;
}
.site-header .account-label {
  min-width: 0;
  max-width: 112px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: inherit;
  line-height: inherit;
}

.site-header .cart-btn {
  min-width: 140px;
  font-size: calc(var(--header-ui-label-size) + 0.35px);
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 1.2;
  gap: 8px;
  padding-left: 12px;
  padding-right: 12px;
}
.site-header .cart-btn > span:first-child {
  font: inherit;
  line-height: inherit;
  white-space: nowrap;
}
.site-header .cart-count {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(11.5px, calc(10.5px + 0.08vw), 12.5px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

@media (min-width: 1051px) and (max-width: 1130px) {
  .site-header { --side: 320px; }
  .site-header .header-right { gap: 8px; }
  .site-header .city-btn { max-width: 124px; padding-left: 9px; padding-right: 9px; gap: 6px; }
  .site-header .city-btn span { max-width: 82px; }
  .site-header .cart-btn { min-width: 128px; padding-left: 9px; padding-right: 9px; gap: 7px; }
}

@media (min-width: 1131px) and (max-width: 1365px) {
  .site-header { --side: 376px; }
  .site-header .city-btn { max-width: 158px; }
  .site-header .city-btn span { max-width: 108px; }
  .site-header .cart-btn { min-width: 140px; }
}

@media (min-width: 1366px) {
  .site-header { --side: 492px; }
  .site-header .city-btn { max-width: 164px; }
  .site-header .city-btn span { max-width: 112px; }
  .site-header .account-btn {
    min-width: 132px;
    width: auto;
    max-width: 164px;
    padding-left: 11px;
    padding-right: 11px;
  }
  .site-header .account-label { max-width: 108px; }
  .site-header .cart-btn { min-width: 140px; }
}



/* ===== Страница «Реквизиты» =====
   Тёмная карточка в стиле блоков страницы «Доставка» (.policy-section). */
.requisites-card { max-width: 760px; margin: 0 auto; padding: 8px 34px; background: #0e0d10; border: 1px solid rgba(214,42,115,.30); border-radius: 20px; box-shadow: 0 8px 22px rgba(0,0,0,.22); color: var(--silver-0, #FBF6EE); box-sizing: border-box; }
.requisites-card .requisites-list { margin: 0; padding: 0; display: block; }
.requisites-card .requisites-list > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 18px; align-items: baseline; padding: 17px 0; border-top: 1px solid rgba(255,255,255,.09); }
.requisites-card .requisites-list > div:first-child { border-top: 0; }
.requisites-card .requisites-list dt { margin: 0; font: 700 12px 'Manrope', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.52); }
.requisites-card .requisites-list dd { margin: 0; font: 400 17px/1.5 'PT Sans', sans-serif; color: #fff; overflow-wrap: anywhere; }
.requisites-card .requisites-num { font-variant-numeric: tabular-nums; letter-spacing: .05em; }
.requisites-card .requisites-list a { color: #f3c6d9; text-decoration: none; border-bottom: 1px solid rgba(243,198,217,.35); transition: color .2s, border-color .2s; }
.requisites-card .requisites-list a:hover { color: #fff; border-bottom-color: #fff; }
.requisites-card .requisites-list a:focus-visible { outline: 2px solid #D62A73; outline-offset: 3px; border-radius: 3px; }


/* ===== Страница «О нас»: кнопки документов «треугольником» =====
   Те же золотые кнопки, что и «Смотреть каталог»: каждая лежит в обёртке .about-catalog-cta,
   поэтому внешний вид, блик, наведение и фокус наследуются без копирования правил.
   Сверху «Реквизиты», под ней в ряд «Оферта» и «Политика конфиденциальности». */
.about-docs-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 460px)); justify-content: center; gap: 16px 18px; max-width: 1180px; margin: 10px auto 0; }
.about-docs-cta .about-catalog-cta { margin: 0; }
.about-docs-cta .about-cta-btn { width: 100%; }
.about-docs-cta .about-doc-top { grid-column: 1 / -1; justify-self: center; width: min(100%, 460px); }
.about-docs-cta .cta-label { white-space: normal; text-align: center; line-height: 1.2; }


/* ===== Подвал: телефон и почта (на всех страницах с нижней панелью) ===== */
.footer-contacts { max-width: 1680px; margin: 22px auto 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.07); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 30px; font: 600 13.5px/1.3 'Manrope', sans-serif; letter-spacing: .02em; }
.footer-contact { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.82); text-decoration: none; transition: color .2s ease; }
.footer-contact svg { width: 15px; height: 15px; flex: none; fill: none; stroke: #c9a15a; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.footer-contact:hover, .footer-contact:focus-visible { color: #e7c77e; outline: none; }
.footer-contact:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
/* одна разделительная линия: над контактами, подпись разработчика сразу под ними */
.footer-contacts + .footer-credit { margin-top: 12px; padding-top: 0; border-top: 0; }


/* Длинные юридические документы: одна спокойная поверхность и чёткая иерархия. */
.legal-document { max-width: 100%; }
.legal-document h1 { font-family: 'Manrope', sans-serif; font-size: 28px; line-height: 1.35; margin: 0 0 8px; color: #242027; }
.legal-document .legal-meta { margin: 0 0 28px; padding-bottom: 18px; border-bottom: 1px solid rgba(80,70,80,.13); }
.legal-document h2 { font-family: 'Manrope', sans-serif; font-size: 19px; line-height: 1.45; font-weight: 800; color: #322b35; margin: 32px 0 13px; padding-top: 4px; }
.legal-document h2:first-of-type { margin-top: 0; }
.legal-document h3 { font-family: 'Manrope', sans-serif; font-size: 15px; line-height: 1.5; font-weight: 800; color: #4b3f4a; margin: 21px 0 8px; }
.legal-document p { font-family: 'Manrope', sans-serif; font-size: 14px; line-height: 1.8; color: #3b3540; margin: 0 0 12px; overflow-wrap: anywhere; }
.legal-document p.legal-list-item { padding-left: 18px; position: relative; }
.legal-document p.legal-list-item::before { content: '•'; position: absolute; left: 4px; color: #c2185b; }
.legal-document .legal-back-link { margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(80,70,80,.13); }
.legal-document .legal-back-link a { display: inline-block; font: 700 13px/1.4 'Manrope', sans-serif; color: #9d174d; text-decoration: none; }
.legal-document .legal-back-link a:hover { text-decoration: underline; text-underline-offset: 3px; }



/* Документы под реквизитами: компактные ссылки в общей визуальной системе StrazBerry. */
.requisites-documents {
  max-width: 760px;
  margin: 22px auto 0;
  color: var(--silver-0, #FBF6EE);
}
.requisites-documents h2 {
  margin: 0 0 10px 2px;
  color: rgba(255,255,255,.62);
  font: 700 11px/1.4 'Manrope', sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.requisites-documents-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.requisites-document-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  box-sizing: border-box;
  padding: 16px 17px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(14,13,16,.72);
  color: #fff;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.requisites-document-link:hover {
  border-color: rgba(214,42,115,.48);
  background: rgba(22,17,22,.96);
  transform: translateY(-1px);
}
.requisites-document-link:focus-visible {
  outline: 2px solid #D62A73;
  outline-offset: 3px;
}
.requisites-document-icon {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(214,42,115,.25);
  border-radius: 11px;
  background: rgba(214,42,115,.09);
  color: #f3c6d9;
}
.requisites-document-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.requisites-document-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.requisites-document-copy strong {
  font: 700 13px/1.35 'Manrope', sans-serif;
  overflow-wrap: anywhere;
}
.requisites-document-copy small {
  color: rgba(255,255,255,.52);
  font: 400 11px/1.45 'Manrope', sans-serif;
}
.requisites-document-arrow {
  flex: 0 0 auto;
  align-self: flex-start;
  color: rgba(243,198,217,.75);
  font: 500 16px/1 'Manrope', sans-serif;
  transition: color .2s ease, transform .2s ease;
}
.requisites-document-link:hover .requisites-document-arrow {
  color: #f3c6d9;
  transform: translate(2px, -2px);
}


/* Страница «Реквизиты»: визуальный отступ между документами и кнопкой магазина. */
.requisites-shop-cta { margin-top: 36px; }


/* Страница «Доставка»: такой же отступ до золотой кнопки, как на «Реквизитах». */
.delivery-shop-cta { margin-top: 36px; }



/* =========================================================================
   НОВИНКИ — витрина-«шкатулка» на странице магазина
   Тёмный бордово-чёрный бархат + шампань-золото (как у кнопки «Смотреть
   каталог») + берри-свечение. Раскладка зависит от количества новинок
   (атрибут data-mode ставит renderNewArrivals() в app.js):
     solo — 1 товар: одна крупная горизонтальная карточка по центру
     duo  — 2 товара: две горизонтальные карточки в ряд
     row  — 3–4 товара: обычные карточки на всю ширину, без прокрутки
     rail — 5+ товаров: лента с прокруткой, стрелками и полоской прогресса
   Все цвета — из существующих токенов сайта (--berry, золото #C9A15A).
   ========================================================================= */
.new-showcase {
  --ns-gold: linear-gradient(135deg, #f8e8b8 0%, #e4c379 36%, #c9a05a 64%, #efd594 100%);
  --ns-gold-line: rgba(201, 161, 90, .42);
  --ns-gap: 20px;
  --ns-pad: clamp(18px, 2.2vw, 30px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 6px 0 46px;
  padding: var(--ns-pad) var(--ns-pad) calc(var(--ns-pad) - 4px);
  border: 1px solid var(--ns-gold-line);
  border-radius: 26px;
  background:
    radial-gradient(780px 380px at 3% -10%, rgba(214, 42, 115, .38), transparent 62%),
    radial-gradient(640px 340px at 100% 112%, rgba(201, 161, 90, .18), transparent 64%),
    linear-gradient(165deg, #1e1019 0%, #130b12 52%, #0b0a0d 100%);
  box-shadow:
    0 26px 54px rgba(24, 8, 16, .30),
    inset 0 1px 0 rgba(248, 232, 184, .30),
    inset 0 0 0 1px rgba(255, 255, 255, .03);
}
.new-showcase[hidden] { display: none !important; }

/* статичный розовый камень слева-внизу (огранка — та же, что у фоновых камней сайта) */
.new-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -0.85 2 1.83' fill='none' stroke='%23f08ab4' stroke-opacity='.2' stroke-linejoin='round'%3E%3Cpath stroke-width='.009' d='M-0.52 -0.85L0.52 -0.85L1 -0.3L0 0.98L-1 -0.3Z'/%3E%3Cpath stroke-width='.006' d='M-1 -0.3L1 -0.3M-0.52 -0.85L-0.33 -0.3M0 -0.85L-0.33 -0.3M0 -0.85L0.33 -0.3M0.52 -0.85L0.33 -0.3M-0.33 -0.3L0 0.98M0.33 -0.3L0 0.98'/%3E%3C/svg%3E") no-repeat left -70px bottom -120px / 330px auto;
}

/* =========================================================================
   Живой алмаз в шапке. Огранка — точная копия «бриллианта» из bg-gems.js,
   линии по тем же правилам, что у фоновых камней (контур 1.5px, грани 1px,
   vector-effect: non-scaling-stroke).
   Блеск — это свет ВНУТРИ камня, а не значок поверх него: по очереди
   вспыхивают отдельные грани (каждая — своя полигональная заливка по
   форме грани), и на вершине вспыхнувшей грани на миг загорается точка
   света. Значит, блеск физически не может оказаться вне камня.
   Стоимость: 11 элементов, анимируется только opacity (+ transform у точек) —
   это работа видеокарты, главный поток и перерисовка не участвуют.
   Пока витрина не на экране (см. IntersectionObserver в app.js) —
   анимация стоит на паузе и не тратит вообще ничего.
   ========================================================================= */
.ns-diamond {
  --dia-w: 300px;
  position: absolute;
  z-index: 0;
  top: 12px;
  right: clamp(150px, 22%, 330px);
  width: var(--dia-w);
  aspect-ratio: 2 / 1.83;
  pointer-events: none;
  /* Показана корона и пояс, павильон растворяется ещё в шапке — блеск не
     доходит до карточек и не просвечивает в щелях между ними. Нижняя часть
     обрезана совсем (clip-path), чтобы не держать в памяти невидимое. */
  clip-path: inset(0 0 48% 0);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 30%, transparent 50%);
  mask-image: linear-gradient(180deg, #000 0, #000 30%, transparent 50%);
}
.ns-d-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.ns-d-lines path { vector-effect: non-scaling-stroke; }
.ns-d-outline { stroke: rgba(228, 195, 121, .46); stroke-width: 1.5px; }
.ns-d-facets  { stroke: rgba(228, 195, 121, .34); stroke-width: 1px; }

.ns-f {
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--w);
  height: var(--h);
  clip-path: var(--clip);
  background: linear-gradient(var(--ang), var(--c1) 0%, var(--c2) 58%, transparent 100%);
  opacity: .001;
  animation: nsFacet var(--dur) ease-in-out calc(var(--del) * -1) infinite;   /* отрицательная задержка = сдвиг фазы без «ожидания старта» */
  animation-play-state: paused;
}
/* «игра света»: золото и жемчуг — основной блеск, ягодный — редкие цветные вспышки (огонь камня) */
.ns-f--gold  { --c1: rgba(255, 238, 190, .62); --c2: rgba(228, 195, 121, .16); }
.ns-f--pearl { --c1: rgba(255, 255, 255, .55); --c2: rgba(214, 228, 255, .14); }
.ns-f--berry { --c1: rgba(255, 150, 196, .55); --c2: rgba(214, 42, 115, .16); }
/* До ровного 0 не доходим (.001 ≈ невидимо): при opacity:0 Chrome выкидывает слой
   из отрисовки, и на каждом пересечении нуля просыпается главный поток. */
@keyframes nsFacet {
  0%, 100% { opacity: .001; }
  6% { opacity: var(--p); }
  22% { opacity: .001; }
}

.ns-g {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffaf0 0 9%, rgba(255, 236, 180, .86) 16%, rgba(228, 195, 121, .28) 40%, transparent 68%);
  opacity: .001;
  transform: scale(.4);
  animation: nsBead var(--dur) ease-out calc(var(--del) * -1) infinite;
  animation-play-state: paused;
}
@keyframes nsBead {
  0%, 100% { opacity: .001; transform: scale(.4); }
  5% { opacity: 1; transform: scale(1); }
  16% { opacity: .001; transform: scale(.7); }
}

/* анимации идут только пока витрина видна на экране (класс ставит app.js) */
.new-showcase.ns-live .ns-f,
.new-showcase.ns-live .ns-g { animation-play-state: running; }

/* ---------- шапка ---------- */
.ns-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.ns-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 800 11.5px/1 'Manrope', sans-serif;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #eaa9c5;
}
.ns-eyebrow svg { width: 16px; height: 16px; flex: none; }
.ns-eyebrow::after {
  content: "";
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, rgba(234, 169, 197, .75), transparent);
}
#newArrivalsSection .ns-title {
  margin: 8px 0 0;
  font: 700 clamp(42px, 4.4vw, 60px)/1 'Cormorant Garamond', Georgia, serif;
  letter-spacing: .01em;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: var(--ns-gold);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 2px 16px rgba(201, 161, 90, .30));
}
.ns-tools { display: flex; align-items: center; gap: 14px; }
.ns-count {
  font: 800 12px/1 'Manrope', sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #f2d99d;
  padding: 10px 15px;
  border: 1px solid rgba(201, 161, 90, .38);
  border-radius: 999px;
  background: rgba(201, 161, 90, .08);
}
.ns-count:empty { display: none; }
.ns-nav { display: none; gap: 10px; }
.new-showcase.is-scrollable .ns-nav { display: flex; }
.ns-arrow {
  width: 46px;
  height: 46px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(201, 161, 90, .55);
  border-radius: 50%;
  background: rgba(255, 255, 255, .04);
  color: #f2d99d;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.ns-arrow svg { width: 20px; height: 20px; }
@media (hover: hover) {
  .ns-arrow:hover:not(:disabled) {
    background: var(--ns-gold);
    color: #2b1a10;
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(150, 110, 40, .38);
  }
}
.ns-arrow:active:not(:disabled) { transform: scale(.95); }
.ns-arrow:disabled { opacity: .32; cursor: default; }
.ns-arrow:focus-visible { outline: 2px solid #f2d99d; outline-offset: 3px; }

/* ---------- лента ---------- */
.ns-stage {
  --ns-fade-l: 0px;
  --ns-fade-r: 0px;
  position: relative;
  z-index: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.45) calc(var(--ns-fade-l) * .5), #000 var(--ns-fade-l), #000 calc(100% - var(--ns-fade-r)), rgba(0,0,0,.45) calc(100% - var(--ns-fade-r) * .5), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.45) calc(var(--ns-fade-l) * .5), #000 var(--ns-fade-l), #000 calc(100% - var(--ns-fade-r)), rgba(0,0,0,.45) calc(100% - var(--ns-fade-r) * .5), transparent 100%);
}
.new-showcase.is-scrollable:not(.at-start) .ns-stage { --ns-fade-l: 56px; }
.new-showcase.is-scrollable:not(.at-end) .ns-stage { --ns-fade-r: 84px; }

.ns-track {
  --ns-cols: 4;
  display: flex;
  gap: var(--ns-gap);
  /* поля вокруг: чтобы подъём/свечение карточки при наведении не обрезались */
  margin: -16px -4px -22px;
  padding: 16px 4px 22px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 4px;
  scroll-behavior: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.ns-track::-webkit-scrollbar { display: none; }
.new-showcase.is-scrollable .ns-track { cursor: grab; }
.ns-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; -webkit-user-select: none; }
.ns-track.is-dragging .card { pointer-events: none; }
.ns-track img { -webkit-user-drag: none; user-select: none; }

.new-showcase[data-mode="row"][data-count="3"] .ns-track { --ns-cols: 3; }
.new-showcase[data-mode="row"][data-count="4"] .ns-track { --ns-cols: 4; }
.new-showcase[data-mode="rail"] .ns-track { --ns-cols: 3.7; }

#newArrivalsSection .ns-tile {
  flex: 0 0 calc((100% - (var(--ns-cols) - 1) * var(--ns-gap)) / var(--ns-cols));
  min-width: 0;
  max-width: none;
  scroll-snap-align: start;
}

/* полоска прогресса */
.ns-progress {
  display: none;
  position: relative;
  z-index: 1;
  height: 3px;
  margin-top: 18px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.new-showcase.is-scrollable .ns-progress { display: block; }
.ns-progress-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 30%;
  border-radius: 3px;
  background: var(--ns-gold);
  transition: left .12s linear;
}

/* ---------- карточки внутри витрины ---------- */
#newArrivalsSection .card {
  background: linear-gradient(180deg, #151118 0%, #0e0d10 100%);
  border: 1px solid rgba(201, 161, 90, .30);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .40), inset 0 1px 0 rgba(255, 255, 255, .05);
  animation: nsRise .55s cubic-bezier(.22, .8, .28, 1) backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
#newArrivalsSection .card:hover {
  background: linear-gradient(180deg, #19141c 0%, #110f13 100%) !important;
  border-color: rgba(228, 195, 121, .72) !important;
  box-shadow:
    0 24px 42px rgba(0, 0, 0, .52),
    0 0 0 1px rgba(228, 195, 121, .30),
    0 0 36px rgba(214, 42, 115, .24) !important;
}
@keyframes nsRise {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
}

#newArrivalsSection .ns-tile .card-name {
  font-size: 16px !important;
  line-height: 1.35 !important;
  min-height: 44px !important;
  max-height: 44px !important;
  margin: 4px 0 2px !important;
}

/* золотой бейдж «Новинка» в левом нижнем углу фото */
.ns-badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  padding: 7px 12px 7px 9px;
  border: 1px solid rgba(124, 88, 30, .50);
  border-radius: 999px;
  background: var(--ns-gold);
  box-shadow: 0 6px 14px rgba(120, 84, 30, .38), inset 0 1px 0 rgba(255, 255, 255, .62);
  color: #2b1a10;
  font: 800 10.5px/1 'Manrope', sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  pointer-events: none;
}
.ns-badge svg { width: 13px; height: 13px; flex: none; }
.ns-badge span { margin-right: -.14em; }
.ns-badge::after {
  content: "";
  position: absolute;
  top: -30%;
  left: 0;
  width: 42%;
  height: 160%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
  transform: translateX(-160%) skewX(-20deg);
  animation: nsGlint 6.5s ease-in-out infinite;
}
.new-showcase:not(.ns-live) .ns-badge::after { animation-play-state: paused; }
@keyframes nsGlint {
  0%, 68% { transform: translateX(-160%) skewX(-20deg); }
  100% { transform: translateX(360%) skewX(-20deg); }
}

/* ---------- solo / duo: горизонтальная «витринная» карточка ---------- */
.new-showcase[data-mode="solo"] .ns-track,
.new-showcase[data-mode="duo"] .ns-track { overflow: visible; }
.new-showcase[data-mode="solo"] .ns-track { justify-content: center; }

#newArrivalsSection .ns-feature {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1fr);
  grid-template-rows: 1fr repeat(5, auto) 1fr;
  column-gap: clamp(18px, 2.4vw, 34px);
  row-gap: 0;
  padding: clamp(16px, 1.8vw, 24px);
  align-items: stretch;
  border-radius: 22px;
}
#newArrivalsSection[data-mode="solo"] .ns-feature { max-width: 1040px; }
#newArrivalsSection .ns-feature .product-card-link { display: contents; }
#newArrivalsSection .ns-feature .card-image {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
  width: 100%;
  min-height: 0;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
}
#newArrivalsSection .ns-feature .stock-tag { grid-column: 2; grid-row: 2; justify-self: start; align-self: start; margin: 0 0 14px; }
#newArrivalsSection .ns-feature .card-category { grid-column: 2; grid-row: 3; margin: 0 0 8px; font-size: 12px; letter-spacing: .12em; }
#newArrivalsSection .ns-feature .card-name {
  grid-column: 2;
  grid-row: 4;
  margin: 0 0 18px !important;
  min-height: 0 !important;
  max-height: none !important;
  -webkit-line-clamp: 4 !important;
  font: 800 clamp(19px, 1.8vw, 26px)/1.22 'Manrope', sans-serif !important;
  letter-spacing: -.01em;
}
#newArrivalsSection .ns-feature .card-price {
  grid-column: 2;
  grid-row: 5;
  justify-self: start;
  margin: 0 0 22px !important;
  padding: 7px 18px;
  font-size: clamp(22px, 2vw, 30px) !important;
  border-radius: 14px;
}
#newArrivalsSection .ns-feature .add-btn {
  grid-column: 2;
  grid-row: 6;
  width: 100%;
  max-width: 300px;
  min-height: 52px;
  font-size: 16px;
}
#newArrivalsSection[data-mode="solo"] .ns-feature { column-gap: clamp(24px, 4vw, 56px); }
#newArrivalsSection[data-mode="solo"] .ns-feature .card-name { font-size: clamp(22px, 2.3vw, 32px) !important; }

/* ---------- адаптивность ---------- */
@media (max-width: 1200px) {
  .new-showcase[data-mode="row"][data-count="4"] .ns-track,
  .new-showcase[data-mode="rail"] .ns-track { --ns-cols: 3.2; }
}



@media (prefers-reduced-motion: reduce) {
  #newArrivalsSection .card,
  .ns-f,
  .ns-g,
  .ns-badge::after { animation: none; }
  .ns-progress-bar { transition: none; }
}


/* ── Пункты выдачи на картах: карточка пункта, кластеры, статусы ─────────────
   Тот же тёплый ivory/gold, что и на витрине. Малиновый — только у действий
   (кнопка «Выбрать этот пункт», ссылки «Повторить»), остальное нейтральное. */
.map-stage { position: relative; }
.pvz-sheet[hidden] { display: none; }
.pvz-sheet {
  position: absolute; z-index: 6; left: 12px; bottom: 34px;
  width: min(370px, calc(100% - 24px)); max-height: calc(100% - 52px); overflow-y: auto;
  box-sizing: border-box; display: flex; flex-direction: column; gap: 10px;
  padding: 16px 16px 14px;
  background: var(--card-bg, #FFFDF9); color: var(--ink);
  border: 1px solid var(--silver-2, #E7D9C4); border-radius: 20px;
  box-shadow: 0 18px 44px rgba(67,54,40,.24), inset 0 0 0 1px rgba(201,161,90,.20);
  animation: pvz-sheet-in .22s ease-out both;
  overscroll-behavior: contain;
}
@keyframes pvz-sheet-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pvz-sheet-close {
  position: absolute; top: 9px; right: 9px; width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border); background: #fff; color: var(--ink-muted); font-size: 19px; line-height: 1;
}
.pvz-sheet-close:hover { color: var(--ink); border-color: var(--gold); }
.pvz-sheet-head { display: flex; align-items: center; gap: 12px; padding-right: 30px; }
.pvz-sheet-logo { flex: 0 0 46px; width: 46px; height: 46px; object-fit: contain; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgba(67,54,40,.18); }
.pvz-sheet-headtext { min-width: 0; }
.pvz-sheet-service { font: 600 12px 'Manrope', sans-serif; color: var(--ink-muted); }
.pvz-sheet-title { margin: 1px 0 0; font: 800 17px/1.25 'Manrope', sans-serif; color: var(--ink); overflow-wrap: anywhere; }
.pvz-sheet-address { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.pvz-sheet-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.pvz-sheet-facts > div { padding: 6px 11px; border-radius: 12px; background: var(--silver-1, #F7F0E5); border: 1px solid var(--border); }
.pvz-sheet-facts dt { font-size: 11px; color: var(--ink-muted); }
.pvz-sheet-facts dd { margin: 1px 0 0; font: 800 13.5px 'Manrope', sans-serif; color: var(--ink); }
.pvz-sheet-hours { font-size: 13px; }
.pvz-sheet-hours-label { display: block; margin-bottom: 3px; font-size: 11px; color: var(--ink-muted); }
.pvz-sheet-hours ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.pvz-sheet-hours li { color: var(--ink-muted); }
.pvz-sheet-hours li.today { color: var(--ink); font-weight: 800; }
.pvz-sheet-hours li.today::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 7px 1px 0; border-radius: 50%; background: var(--gold); }
.pvz-sheet-phoneline { font-size: 12.5px; color: var(--ink-muted); }
.pvz-sheet-foot { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; padding-top: 12px; border-top: 1px dashed var(--border); }
.pvz-sheet-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.pvz-sheet-price strong { font: 800 24px/1 'Manrope', sans-serif; color: var(--ink); }
.pvz-sheet-price span { font-size: 12.5px; color: var(--ink-muted); }
.pvz-sheet-price.is-loading { align-items: center; gap: 9px; }
.pvz-sheet-price.is-loading .delivery-quote-spinner { display: inline-block; width: 16px; height: 16px; flex: 0 0 16px; border-width: 2px; }
.pvz-sheet-error { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; color: #9a4a1c; }
.pvz-sheet-phone label { display: block; margin-bottom: 6px; font-size: 12.5px; color: var(--ink-muted); }
.pvz-sheet-phone > div { display: flex; gap: 8px; }
.pvz-sheet-phone input { flex: 1 1 auto; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: #fff; font: inherit; color: var(--ink); }
.pvz-sheet-phone input:focus-visible { outline: 2px solid var(--berry); outline-offset: 1px; }
.pvz-sheet-phone .secondary-btn { flex: 0 0 auto; width: auto; padding: 10px 14px; border-radius: 12px; }
.pvz-sheet-pick { width: 100%; border-radius: 999px; padding: 13px 20px; font-size: 14.5px; }
.pvz-sheet-pick:disabled { opacity: .45; cursor: not-allowed; filter: saturate(.6); }
.pvz-sheet button:focus-visible, .pvz-status-chips + .pvz-link-btn:focus-visible, .pvz-link-btn:focus-visible { outline: 2px solid var(--berry); outline-offset: 2px; }
.pvz-link-btn { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 700; color: var(--berry-dark); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* Метки пунктов на карте адреса теперь кликабельны. */
.address-map-pvz-marker { cursor: pointer; }
.pvz-cluster {
  appearance: none; margin: 0; padding: 0; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; transform: translate(-50%, -50%);
  background: var(--card-bg, #FFFDF9); border: 2px solid #fff; color: var(--ink);
  box-shadow: 0 0 0 2px var(--gold), 0 5px 14px rgba(67,54,40,.32);
  font: 800 14px 'Manrope', sans-serif; transition: transform .15s ease;
}
.pvz-cluster:hover { transform: translate(-50%, -50%) scale(1.08); }

/* Строка состояния: кто загрузился, кто нет — без вечного «Загружаем остальные службы…» */
.address-map-pickup-status { flex-wrap: wrap; align-items: flex-start; }
.pvz-status-body { min-width: 0; flex: 1 1 200px; }
.pvz-status-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.pvz-status-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 3px; border-radius: 999px; background: #fff; border: 1px solid var(--border); font: 700 11.5px 'Manrope', sans-serif; color: var(--ink); }
.pvz-status-chip img { width: 17px; height: 17px; object-fit: contain; border-radius: 50%; }
.pvz-status-chip.is-error { color: #9a4a1c; border-color: rgba(154,74,28,.35); }
.pvz-map-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pvz-map-status.is-loading .delivery-quote-spinner { display: inline-block; width: 14px; height: 14px; flex: 0 0 14px; border-width: 2px; }
.pvz-status-fail { color: #9a4a1c; }
.pvz-map-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; }
.pvz-map-toolbar .pvz-map-filters { margin: 0; }
.pvz-filter-count { margin-left: 2px; font: 700 11px 'DM Mono', monospace; color: var(--ink-muted); }
.pvz-filter-count.is-error { color: #9a4a1c; }
.pvz-filter-count:empty { display: none; }


@media (prefers-reduced-motion: reduce) {
  .pvz-sheet { animation: none; }
  .pvz-cluster { transition: none; }
}

/* Активный фильтр: светлая «таблетка» с малиновым кольцом — читается и на тёмной модалке. */
.pvz-map-filter.active { background: #fff; color: var(--ink); border-color: var(--berry); box-shadow: 0 0 0 2px rgba(214,42,115,.55); }


/* =========================================================================
   КАРТА АДРЕСА И «ВСЕ ПУНКТЫ ВЫДАЧИ» — v6
   Метка-алмаз, панель «курьер + пункты рядом», выбор города внутри окна,
   кнопки служб в стиле сайта (тёмная модалка, малиновый акцент, золотой кант).
   ========================================================================= */

/* Метка адреса: фирменная геометка с красным алмазом, остриё — ровно в точке адреса. */
.yandex-delivery-marker--address {
  position: relative; width: 40px; height: 62px; transform: translate(-50%, -100%);
  cursor: grab; filter: none; animation: address-pin-drop .32s cubic-bezier(.2,.9,.3,1.2) both;
}
.yandex-delivery-marker--address img {
  position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain;
  pointer-events: none; user-select: none; filter: drop-shadow(0 4px 5px rgba(0,0,0,.38));
  transform-origin: 50% 100%; transition: transform .15s ease;
}
.yandex-delivery-marker--address:hover img { transform: scale(1.07); }
.yandex-delivery-marker--address:active { cursor: grabbing; }
.yandex-delivery-marker--address .address-pin-shadow {
  position: absolute; left: 50%; bottom: -3px; width: 22px; height: 8px; margin-left: -11px;
  border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0,0,0,.45), rgba(0,0,0,0) 70%);
}
@keyframes address-pin-drop { from { opacity: 0; margin-top: -26px; } to { opacity: 1; margin-top: 0; } }

/* Окно карты адреса: карта слева, панель справа (на телефоне — под картой). */
.address-map-card { width: min(1120px, 100%); overflow-y: auto; overscroll-behavior: contain; }
.address-map-body { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 14px; min-height: 0; }
.address-map-body .delivery-map { height: min(54vh, 500px); min-height: 360px; }
.address-map-side { position: relative; min-width: 0; height: min(54vh, 500px); min-height: 360px; }
.address-map-panel {
  height: 100%; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px;
  padding-right: 4px;
}
.address-map-side .pvz-sheet {
  position: absolute; inset: 0; z-index: 4; width: auto; max-height: none; left: 0; bottom: 0; border-radius: 18px;
}

.amp-empty { margin: auto 0; padding: 22px 18px; text-align: center; color: rgba(255,255,255,.58); border: 1px dashed rgba(255,255,255,.16); border-radius: 18px; }
.amp-empty img { display: block; width: 36px; height: auto; margin: 0 auto 10px; opacity: .92; }
.amp-empty b { display: block; margin-bottom: 6px; color: var(--silver-0); font: 800 15px 'Manrope', sans-serif; }
.amp-empty p { margin: 0; font-size: 13px; line-height: 1.5; }

.amp-address {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(214,42,115,.16), rgba(201,161,90,.08)); border: 1px solid rgba(214,42,115,.34);
}
.amp-address-pin { flex: 0 0 auto; width: 24px; height: auto; }
.amp-address-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.amp-address-text small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.amp-address-text b { color: var(--silver-0); font: 700 14px/1.35 'Manrope', sans-serif; overflow-wrap: anywhere; }
.amp-address-text .mono { font-size: 11px; color: rgba(255,255,255,.45); }

.amp-section { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.amp-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.amp-section-head h3 { margin: 0; color: var(--silver-0); font: 800 14.5px 'Manrope', sans-serif; letter-spacing: 0; }
.amp-tag { padding: 3px 9px; border-radius: 999px; font: 700 10.5px 'Manrope', sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(201,161,90,.4); }
.amp-link { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: 700 12.5px 'Manrope', sans-serif; color: #f07bad; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.amp-link:hover { color: #ff9cc5; }
.amp-all-link { align-self: flex-start; }
.amp-retry { display: flex; flex-wrap: wrap; gap: 10px; }

.amp-loading { display: flex; align-items: center; gap: 10px; padding: 6px 2px; font-size: 13px; color: rgba(255,255,255,.62); }
.amp-loading .delivery-quote-spinner { display: inline-block; width: 16px; height: 16px; flex: 0 0 16px; border-width: 2px; }
.amp-note { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.58); }
.amp-note.is-warn { padding: 10px 12px; border-radius: 12px; background: rgba(201,161,90,.1); border: 1px solid rgba(201,161,90,.3); color: #e7cf9c; }
.amp-note.is-warn b { color: #f4e2b8; }

.amp-option { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); transition: border-color .15s, background .15s; }
.amp-option.is-selected { border-color: var(--berry); background: rgba(214,42,115,.12); box-shadow: 0 0 0 1px rgba(214,42,115,.5) inset; }
.amp-option-logo { width: 40px; height: 40px; object-fit: contain; padding: 4px; border-radius: 12px; background: #fff; }
.amp-option-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.amp-option-main b { color: var(--silver-0); font: 800 13.5px/1.25 'Manrope', sans-serif; }
.amp-option-main small { font-size: 12px; line-height: 1.4; color: rgba(255,255,255,.58); }
.amp-option-side { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.amp-option-side strong { color: var(--silver-0); font-size: 17px; white-space: nowrap; }
.amp-pick {
  appearance: none; cursor: pointer; padding: 7px 14px; border-radius: 999px; white-space: nowrap;
  font: 800 12px 'Manrope', sans-serif; color: #fff; border: 1px solid rgba(255,255,255,.25);
  background: linear-gradient(135deg, #E0508F, #C41F66); box-shadow: 0 4px 12px rgba(214,42,115,.3);
}
.amp-pick:hover { filter: brightness(1.08); }
.amp-option.is-selected .amp-pick { background: rgba(255,255,255,.1); box-shadow: none; border-color: rgba(255,255,255,.3); }

.amp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.amp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; font: 700 11.5px 'Manrope', sans-serif; color: rgba(255,255,255,.78); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.amp-chip img { width: 18px; height: 18px; object-fit: contain; border-radius: 50%; background: #fff; }
.amp-chip b { color: var(--silver-0); font-family: 'DM Mono', monospace; font-weight: 700; }
.amp-chip.is-error { color: #f0b48a; border-color: rgba(240,180,138,.4); }
.amp-chip.is-error b { color: #f0b48a; font-family: 'Manrope', sans-serif; }
.amp-chip-spin, .pvz-filter-count.is-loading::after {
  content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); border-top-color: var(--berry);
  animation: amp-spin .8s linear infinite; vertical-align: -1px;
}
@keyframes amp-spin { to { transform: rotate(360deg); } }

.amp-pvz-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.amp-pvz { width: 100%; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; text-align: left; cursor: pointer; font: inherit; color: var(--silver-0); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); transition: border-color .15s, background .15s; }
.amp-pvz:hover { border-color: rgba(214,42,115,.55); background: rgba(214,42,115,.08); }
.amp-pvz.is-selected { border-color: var(--berry); background: rgba(214,42,115,.16); }
.amp-pvz-logo { width: 32px; height: 32px; object-fit: contain; border-radius: 50%; background: #fff; padding: 2px; }
.amp-pvz-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.amp-pvz-text b { font: 800 12.5px/1.3 'Manrope', sans-serif; color: var(--silver-0); }
.amp-pvz-text small { font-size: 11.5px; line-height: 1.35; color: rgba(255,255,255,.52); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amp-pvz-dist { font-size: 11.5px; color: var(--gold); white-space: nowrap; }
.amp-skeleton-list { display: flex; flex-direction: column; gap: 6px; }
.amp-skeleton-list i { display: block; height: 48px; border-radius: 12px; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.1), rgba(255,255,255,.04)); background-size: 200% 100%; animation: amp-shimmer 1.3s linear infinite; }
@keyframes amp-shimmer { to { background-position: -200% 0; } }

/* Выбор города: выпадающий список под кнопкой (на телефоне — нижняя шторка).
   Список вынесен в <body> и позиционируется по кнопке, поэтому окно карты его не обрезает. */
.city-pop-anchor { position: relative; flex: 0 0 auto; }
.city-pop-backdrop { position: fixed; inset: 0; z-index: 9994; background: rgba(8,6,10,.62); backdrop-filter: blur(2px); }
.city-pop-backdrop[hidden] { display: none; }
.city-pop {
  position: fixed; z-index: 9995; top: 0; left: 0; width: 360px;
  display: flex; flex-direction: column; overflow: hidden; border-radius: 18px;
  background: linear-gradient(180deg, #1c1920, #131116); border: 1px solid rgba(214,42,115,.38);
  box-shadow: 0 24px 60px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.05);
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right;
  transition: opacity .14s ease, transform .14s ease;
}
.city-pop.is-up { transform: translateY(6px) scale(.98); transform-origin: bottom right; }
.city-pop.is-in { opacity: 1; transform: none; }
.city-pop[hidden] { display: none; }

.city-pop-head { display: none; align-items: center; justify-content: space-between; padding: 16px 16px 4px 20px; }
.city-pop-title { font: 800 17px 'Manrope', sans-serif; color: var(--silver-0); }
.city-pop-close, .city-pop-clear {
  display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer;
  border-radius: 50%; background: rgba(255,255,255,.08); color: rgba(255,255,255,.75); font: 400 20px/1 'Manrope', sans-serif;
  transition: background .15s, color .15s;
}
.city-pop-close { width: 36px; height: 36px; }
.city-pop-clear { position: absolute; right: 8px; top: 50%; width: 26px; height: 26px; margin-top: -13px; font-size: 17px; }
.city-pop-clear[hidden] { display: none; }
.city-pop-close:hover, .city-pop-clear:hover { background: rgba(214,42,115,.35); color: #fff; }

.city-pop-search { position: relative; margin: 12px 12px 6px; }
.city-pop-search-ico { position: absolute; left: 13px; top: 50%; margin-top: -9px; color: rgba(255,255,255,.45); pointer-events: none; }
.city-pop-input {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 40px 10px 40px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: var(--silver-0);
  font: 600 15px 'Manrope', sans-serif; transition: border-color .15s, box-shadow .15s, background .15s;
}
.city-pop-input::placeholder { color: rgba(255,255,255,.4); font-weight: 500; }
.city-pop-input:focus { outline: none; border-color: var(--berry); background: rgba(255,255,255,.08); box-shadow: 0 0 0 3px rgba(214,42,115,.22); }

.city-pop-list {
  flex: 1 1 auto; min-height: 0; max-height: 300px; overflow-y: auto; overscroll-behavior: contain;
  padding: 2px 8px 8px; display: flex; flex-direction: column; gap: 2px;
}
.city-pop-group { padding: 10px 10px 4px; font: 800 11px 'Manrope', sans-serif; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.38); }
.city-pop-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 12px;
  background: transparent; color: var(--silver-0); font: 600 14.5px 'Manrope', sans-serif; text-align: left; cursor: pointer;
  transition: background .12s;
}
.city-pop-item-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.city-pop-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.city-pop-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.46); }
.city-pop-item mark { background: none; color: #f07bad; font-weight: 800; }
.city-pop-item:hover, .city-pop-item.is-active { background: rgba(214,42,115,.17); }
.city-pop-item:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.city-pop-item.is-current { color: var(--gold); background: rgba(201,161,90,.11); }
.city-pop-item.is-current small { color: rgba(201,161,90,.65); }
.city-pop-check { flex: 0 0 auto; margin-left: auto; color: var(--gold); }
.city-pop-hint { padding: 2px 18px 14px; font-size: 12.5px; color: rgba(255,255,255,.52); }
.city-pop-hint:empty { display: none; }
.city-pop-hint.is-loading::before {
  content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -2px;
  border: 2px solid rgba(255,255,255,.25); border-top-color: var(--berry); border-radius: 50%; animation: city-pop-spin .7s linear infinite;
}
@keyframes city-pop-spin { to { transform: rotate(360deg); } }
.city-pop-anchor.is-open .map-city-chevron { transform: rotate(180deg); }
.map-city-chevron { display: inline-block; transition: transform .15s; }

@media (prefers-reduced-motion: reduce) {
  .city-pop { transition: none; }
  .city-pop-hint.is-loading::before { animation: none; }
}

/* Кнопки города и геолокации в окнах карты — в тон тёмной модалке. */
.map-modal .map-city-btn, .map-modal .map-location-btn {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.2); color: var(--silver-0); border-radius: 14px; font-family: 'Manrope', sans-serif;
}
.map-modal .map-city-btn:hover, .map-modal .map-location-btn:hover { border-color: var(--berry); background: rgba(214,42,115,.12); }
.map-modal .map-city-btn .map-city-chevron { color: rgba(255,255,255,.6); }

/* Кнопки служб в окне «Все пункты выдачи»: сегментированный переключатель в стиле сайта. */
.pvz-map-modal-card .pvz-map-filters {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 0; border-radius: 16px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
}
.pvz-map-modal-card .pvz-map-filter {
  position: relative; min-height: 40px; padding: 6px 14px 6px 8px; gap: 8px; border-radius: 12px; border: 1px solid transparent;
  background: transparent; color: rgba(255,255,255,.72); font: 700 13px 'Manrope', sans-serif; box-shadow: none; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.pvz-map-modal-card .pvz-map-filter[data-pvz-filter="all"] { padding-left: 14px; }
.pvz-map-modal-card .pvz-map-filter img { width: 24px; height: 24px; padding: 2px; border-radius: 50%; background: #fff; }
.pvz-map-modal-card .pvz-map-filter:hover { color: #fff; background: rgba(255,255,255,.08); }
.pvz-map-modal-card .pvz-map-filter.active {
  color: #fff; border-color: rgba(255,255,255,.25);
  background: linear-gradient(135deg, #E0508F, #B81D5F); box-shadow: 0 6px 16px rgba(214,42,115,.38), inset 0 1px 0 rgba(255,255,255,.22);
}
.pvz-map-modal-card .pvz-map-filter:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pvz-map-modal-card .pvz-filter-count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.12); color: rgba(255,255,255,.85); font: 700 11px 'DM Mono', monospace; text-align: center; }
.pvz-map-modal-card .pvz-map-filter.active .pvz-filter-count { background: rgba(255,255,255,.24); color: #fff; }
.pvz-map-modal-card .pvz-filter-count:empty:not(.is-loading) { display: none; }
.pvz-map-modal-card .pvz-filter-count.is-loading { display: inline-block; min-width: 24px; height: 18px; line-height: 14px; }
.pvz-map-modal-card .pvz-filter-count.is-error { background: rgba(240,180,138,.2); color: #f0b48a; }
.pvz-map-modal-card .pvz-map-status { color: rgba(255,255,255,.6); font-size: 12.5px; }
.pvz-map-modal-card .pvz-map-status.is-warning { color: #e7cf9c; }
.pvz-map-modal-card .pvz-status-fail { color: #f0b48a; }
.pvz-map-modal-card .pvz-link-btn { color: #f07bad; }



@media (prefers-reduced-motion: reduce) {
  .yandex-delivery-marker--address { animation: none; }
  .amp-skeleton-list i, .amp-chip-spin { animation: none; }
}

/* =========================================================================
   v6.1 — одна широкая кнопка «Адрес на карте», крупные пункты в списке
   ========================================================================= */
.checkout-address-panel .address-actions { display: block; margin: 12px 0 0; }
.checkout-address-panel .address-actions .secondary-btn.checkout-address-map-btn,
.address-actions .secondary-btn.checkout-address-map-btn {
  display: flex; width: 100%; min-width: 0; min-height: 58px; padding: 14px 22px; gap: 12px;
  align-items: center; justify-content: center; border-radius: 16px;
  font: 800 16px 'Manrope', sans-serif; letter-spacing: .01em; color: #fff;
  background: linear-gradient(135deg, #E0508F, #B81D5F); border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 10px 26px rgba(214,42,115,.34), inset 0 1px 0 rgba(255,255,255,.22);
}
.checkout-address-panel .address-actions .secondary-btn.checkout-address-map-btn:hover { filter: brightness(1.08); background: linear-gradient(135deg, #E0508F, #B81D5F); }
.checkout-address-map-btn .location-pin-icon { width: 20px; height: auto; }

.amp-pvz { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; padding: 12px 14px; border-radius: 14px; }
.amp-pvz-logo { width: 44px; height: 44px; padding: 3px; }
.amp-pvz-text { gap: 3px; }
.amp-pvz-text b { font-size: 14.5px; }
.amp-pvz-text small {
  font-size: 13px; line-height: 1.35; color: rgba(255,255,255,.7);
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.amp-pvz-dist { font-size: 13px; font-weight: 700; }
.amp-pvz-list { gap: 8px; }

/* =========================================================================
   v6.2 — логотипы служб без белых рамок, метки-пины, кнопка «Адрес на карте»,
   предупреждение о телефоне, список пунктов всего города
   ========================================================================= */

/* 1. Логотипы: готовые прозрачные круги одного диаметра — без белых плашек и внутренних отступов. */
.amp-pvz .amp-pvz-logo,
.amp-option .amp-option-logo,
.amp-chip img,
.pvz-sheet-logo,
.delivery-provider-logo,
.delivery-provider-summary-brand img,
.pvz-map-filter img,
.pvz-selected-head img {
  display: block; box-sizing: border-box; padding: 0; border: 0; border-radius: 50%;
  background: transparent; object-fit: cover; aspect-ratio: 1 / 1;
}
.amp-pvz { grid-template-columns: 40px minmax(0, 1fr) auto; }
.amp-pvz .amp-pvz-logo { width: 40px; height: 40px; box-shadow: 0 2px 8px rgba(0,0,0,.45); }
.amp-option .amp-option-logo { width: 40px; height: 40px; box-shadow: 0 2px 8px rgba(0,0,0,.45); }
.amp-chip { padding: 3px 11px 3px 3px; gap: 7px; }
.amp-chip img { width: 20px; height: 20px; flex: 0 0 20px; }
.pvz-sheet-logo { flex: 0 0 48px; width: 48px; height: 48px; box-shadow: 0 3px 10px rgba(67,54,40,.28); }
.delivery-provider-logo { flex: 0 0 26px; width: 26px; height: 26px; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.delivery-provider-summary-brand img { width: 36px; height: 36px; flex: 0 0 36px; box-shadow: 0 2px 8px rgba(0,0,0,.4); }


/* 3. Кнопка «Адрес на карте»: тот же розовый стиль, но размер и форма — как у поля адреса над ней. */
.checkout-address-panel .address-actions { display: block; margin: 10px 0 0; }
.checkout-address-panel .address-actions .secondary-btn.checkout-address-map-btn,
.address-actions .secondary-btn.checkout-address-map-btn {
  position: relative; display: flex; width: 100%; min-width: 0; min-height: 48px; height: 48px;
  padding: 0 18px; gap: 9px; align-items: center; justify-content: center;
  border-radius: 12px; font: 800 14px/1 'Manrope', sans-serif; letter-spacing: .02em; color: #fff;
  background: linear-gradient(135deg, #E0508F 0%, #C41F66 100%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 18px rgba(214,42,115,.28), inset 0 1px 0 rgba(255,255,255,.2);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease, border-color .16s ease;
}
.checkout-address-panel .address-actions .secondary-btn.checkout-address-map-btn:hover {
  transform: translateY(-1px); filter: brightness(1.06);
  background: linear-gradient(135deg, #E0508F 0%, #C41F66 100%);
  box-shadow: 0 9px 22px rgba(214,42,115,.38), inset 0 1px 0 rgba(255,255,255,.24);
}
.checkout-address-panel .address-actions .secondary-btn.checkout-address-map-btn:active { transform: translateY(0) scale(.995); filter: none; }
.checkout-address-panel .address-actions .secondary-btn.checkout-address-map-btn:focus-visible { outline: 2px solid #ffc0d8; outline-offset: 2px; }
.checkout-address-map-btn .location-pin-icon { width: 18px; height: 18px; flex: 0 0 18px; object-fit: contain; }
.checkout-address-map-btn .map-btn-note { display: none; }
/* Без телефона кнопка «заперта»: спокойный контур и бейдж в стиле предупреждения об адресе. */
.checkout-address-panel .address-actions .secondary-btn.checkout-address-map-btn.is-locked {
  background: rgba(255,255,255,.04); color: rgba(255,255,255,.78);
  border: 1px dashed rgba(239,75,143,.55); box-shadow: none; filter: none; transform: none;
}
.checkout-address-panel .address-actions .secondary-btn.checkout-address-map-btn.is-locked:hover {
  background: rgba(214,42,115,.1); border-color: rgba(239,75,143,.85); box-shadow: none; filter: none; transform: none;
}
.checkout-address-map-btn.is-locked .location-pin-icon { opacity: .5; filter: grayscale(.6); }
.checkout-address-map-btn.is-locked .map-btn-note {
  display: inline-block; padding: 4px 8px; border: 1px solid rgba(239,75,143,.45); border-radius: 7px;
  color: #ffc0d8; background: rgba(214,42,115,.12);
  font: 800 9.5px/1 'Manrope', sans-serif; letter-spacing: .065em; text-transform: uppercase; white-space: nowrap;
}


/* 4. Предупреждение под телефоном — та же карточка, что и «Укажите адрес доставки». */
.checkout-phone-gate { margin: 10px 0 0; padding: 13px 14px; }
.checkout-phone-gate .checkout-address-status { margin-bottom: 0; }
.checkout-phone-gate[hidden] { display: none !important; }
.checkout-phone-gate.is-nudge { animation: checkout-gate-nudge .55s ease; }
@keyframes checkout-gate-nudge {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}
.recipient-field .recipient-input-row input.is-required-field {
  border-color: #e45491; box-shadow: 0 0 0 3px rgba(214,42,115,.13);
}
@media (prefers-reduced-motion: reduce) { .checkout-phone-gate.is-nudge { animation: none; } }

/* 5. Список пунктов всего города: счётчик, пустое состояние с пунктами ниже, быстрая прокрутка длинного списка. */
.amp-count {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; vertical-align: 1px;
  font: 700 11px 'DM Mono', monospace; color: var(--gold); border: 1px solid rgba(201,161,90,.4);
}
.amp-empty.has-list { margin: 0; padding: 14px 16px; }
.amp-empty.has-list img { width: 28px; margin-bottom: 6px; }
.amp-pvz-list > li { content-visibility: auto; contain-intrinsic-size: auto 72px; }

.amp-more {
  appearance: none; width: 100%; min-height: 44px; margin-top: 2px; padding: 10px 14px; cursor: pointer;
  border-radius: 12px; border: 1px dashed rgba(239,75,143,.5); background: rgba(214,42,115,.08);
  color: #ffd3e4; font: 800 13px 'Manrope', sans-serif; transition: background .15s, border-color .15s;
}
.amp-more span { font-weight: 600; color: rgba(255,255,255,.6); }
.amp-more:hover { background: rgba(214,42,115,.16); border-color: rgba(239,75,143,.85); }
.amp-more:focus-visible { outline: 2px solid #ffc0d8; outline-offset: 2px; }

/* =========================================================================
   v6.3 — фильтр служб и «Моё местоположение» поверх карты
   ========================================================================= */

/* Верхняя полоса над картой: слева фильтр по службам, справа «Моё местоположение». */
.map-overlay-top {
  position: absolute; top: 12px; left: 12px; right: 12px; z-index: 5;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; pointer-events: none;
}
.map-overlay-top > * { pointer-events: auto; }
.map-provider-filter { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.map-provider-filter[hidden] { display: none; }

/* Чип службы — переключатель: включён = подсвечен, выключен = приглушён, метки и строки списка скрыты. */
.mf-chip {
  appearance: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px 0 6px; cursor: pointer;
  border-radius: 999px; border: 1px solid rgba(239,75,143,.6);
  background: rgba(14,13,16,.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; font: 800 12.5px/1 'Manrope', sans-serif; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,.42);
  transition: transform .16s ease, background .16s ease, border-color .16s ease, opacity .16s ease;
}
.mf-chip:hover { transform: translateY(-1px); background: rgba(214,42,115,.5); border-color: #ffb3d2; }
.mf-chip:active { transform: translateY(0) scale(.98); }
.mf-chip:focus-visible { outline: 2px solid #ffc0d8; outline-offset: 2px; }
.mf-logo { display: block; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 1px 5px rgba(0,0,0,.5); transition: filter .16s ease, opacity .16s ease; }
.mf-count { font: 700 12px 'DM Mono', monospace; color: #ffc0d8; }
.mf-chip.is-off { border-color: rgba(255,255,255,.2); background: rgba(14,13,16,.78); color: rgba(255,255,255,.55); box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.mf-chip.is-off .mf-logo { filter: grayscale(1); opacity: .45; }
.mf-chip.is-off .mf-count { color: rgba(255,255,255,.45); }
.mf-chip.is-solo { background: rgba(214,42,115,.55); border-color: #ffb3d2; box-shadow: 0 0 0 3px rgba(214,42,115,.28), 0 6px 18px rgba(0,0,0,.42); }
.mf-chip.is-solo .mf-count { color: #fff; }
.mf-chip.is-error { border-color: rgba(240,180,138,.7); }
.mf-chip.is-error .mf-count { color: #f0b48a; font-family: 'Manrope', sans-serif; }

/* «Моё местоположение»: розовый кружок с белым прицелом — чёткая иконка на любом экране. */
.map-modal .map-stage .map-location-btn {
  position: static; flex: 0 0 auto; width: auto; max-width: none; min-width: 0; min-height: 40px; margin: 0;
  display: inline-flex; align-items: center; gap: 8px; padding: 0 16px 0 6px; cursor: pointer;
  border-radius: 999px; border: 1px solid rgba(239,75,143,.6);
  background: rgba(14,13,16,.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; font: 800 13px/1 'Manrope', sans-serif; letter-spacing: .01em; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,.42);
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.map-modal .map-stage .map-location-btn:hover { background: rgba(214,42,115,.5); border-color: #ffb3d2; transform: translateY(-1px); }
.map-modal .map-stage .map-location-btn:active { transform: translateY(0) scale(.98); }
.map-modal .map-stage .map-location-btn:focus-visible { outline: 2px solid #ffc0d8; outline-offset: 2px; }
.map-modal .map-stage .map-location-btn:disabled { cursor: progress; opacity: .85; }
.map-locate-badge {
  display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, #E0508F 0%, #C41F66 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
.map-locate-badge svg { display: block; width: 18px; height: 18px; }
.map-location-btn.is-busy .map-locate-badge svg { animation: map-locate-pulse 1s ease-in-out infinite; }
@keyframes map-locate-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.78); opacity: .65; } }

/* Город в шапке карты мигает, когда «Моё местоположение» его сменило. */
.map-city-btn.is-flash { animation: map-city-flash 1.3s ease; }
@keyframes map-city-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(214,42,115,0); } 25% { box-shadow: 0 0 0 5px rgba(214,42,115,.45); border-color: #ff7fb1; } }


@media (prefers-reduced-motion: reduce) {
  .map-location-btn.is-busy .map-locate-badge svg, .map-city-btn.is-flash { animation: none; }
}

/* =========================================================================
   v6.6 — окно карты: шире (как страница магазина), крупнее шрифты, без обрезанных слов
   ========================================================================= */
.map-modal { padding: clamp(10px, 1.6vw, 24px); }
.map-modal .address-map-card { width: min(1280px, 100%); max-height: calc(100vh - 2 * clamp(10px, 1.6vw, 24px)); }
@supports (height: 100dvh) {
  .map-modal .address-map-card { max-height: calc(100dvh - 2 * clamp(10px, 1.6vw, 24px)); }
}
/* Если окно по высоте не помещается — прокручивается карточка, а блоки не наезжают друг на друга. */
.map-modal .address-map-card > * { flex-shrink: 0; }
  .map-modal .address-map-card { padding: 22px 30px 24px; gap: 14px; border-radius: 28px; }

  .map-modal .address-map-body { grid-template-columns: minmax(0, 1fr) clamp(350px, 28vw, 400px); gap: 16px; }
  .map-modal .address-map-body .delivery-map,
  .map-modal .address-map-side { height: clamp(380px, calc(100vh - 376px), 780px); min-height: 380px; }


/* Шапка и поиск */
.map-modal .map-modal-kicker { font-size: 13px; }
.map-modal .map-modal-header h2 { font-size: 30px; }
.map-modal .map-modal-header p { font-size: 16px; line-height: 1.45; }
.map-modal .map-address-field > label { font-size: 15px; }
.map-modal .map-search-row .search-input { font-size: 16px; min-height: 48px; }
.map-modal .map-hint { font-size: 14.5px; line-height: 1.45; }
.map-modal .map-city-btn { min-height: 48px; max-width: 320px; padding: 8px 18px; font-size: 15.5px; }
.map-modal .map-city-btn span { max-width: 260px; }
.map-modal .map-city-btn .map-city-chevron { font-size: 14px; }
.map-modal .map-modal-actions .primary-btn,
.map-modal .map-modal-actions .secondary-btn { font-size: 16px; }
.map-modal .map-locate-text { font-size: 14.5px; }
.map-modal .mf-name { font-size: 14px; }

/* Правая панель */
.map-modal .amp-address-text small { font-size: 12.5px; }
.map-modal .amp-address-text b { font-size: 16px; line-height: 1.4; }
.map-modal .amp-address-text .mono { font-size: 13px; }
.map-modal .amp-section-head h3 { font-size: 16.5px; line-height: 1.3; }
.map-modal .amp-tag { font-size: 12px; padding: 4px 10px; }
.map-modal .amp-link { font-size: 14px; }
.map-modal .amp-count { font-size: 12.5px; }
.map-modal .amp-loading { font-size: 14.5px; }
.map-modal .amp-note { font-size: 14px; }
.map-modal .amp-empty b { font-size: 17px; }
.map-modal .amp-empty p { font-size: 14.5px; }
.map-modal .amp-option-main b { font-size: 15.5px; line-height: 1.3; }
.map-modal .amp-option-main small { font-size: 14px; }
.map-modal .amp-option-side strong { font-size: 19px; }
.map-modal .amp-pick { font-size: 13.5px; padding: 9px 16px; }
.map-modal .amp-chip { font-size: 13px; }
.map-modal .amp-pvz-text b { font-size: 15.5px; line-height: 1.3; overflow-wrap: anywhere; }
.map-modal .amp-pvz-text small {
  display: block; -webkit-line-clamp: unset; -webkit-box-orient: initial; overflow: visible;
  font-size: 14px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere;
}
.map-modal .amp-pvz-dist { font-size: 14px; }
.map-modal .amp-more { font-size: 14.5px; }
.map-modal .amp-option-main b, .map-modal .amp-option-main small, .map-modal .amp-address-text b { overflow-wrap: anywhere; }

/* Карточка пункта выдачи */
.map-modal .pvz-sheet-service { font-size: 14px; }
.map-modal .pvz-sheet-title { font-size: 19px; }
.map-modal .pvz-sheet-address { font-size: 15.5px; }
.map-modal .pvz-sheet-facts dt { font-size: 12.5px; }
.map-modal .pvz-sheet-facts dd { font-size: 15px; }
.map-modal .pvz-sheet-hours { font-size: 14.5px; }
.map-modal .pvz-sheet-hours-label { font-size: 12.5px; }
.map-modal .pvz-sheet-phoneline { font-size: 14px; }
.map-modal .pvz-sheet-price strong { font-size: 26px; }
.map-modal .pvz-sheet-price span { font-size: 14px; }
.map-modal .pvz-sheet-error { font-size: 14.5px; }
.map-modal .pvz-sheet-phone label { font-size: 14px; }
.map-modal .pvz-sheet-phone input { font-size: 16px; }
.map-modal .pvz-sheet-pick { font-size: 16px; padding: 14px 20px; }



/* Оформление заказа: строки служб доставки («Почта России — Выбрать пункт на карте») были мелкими. */
.checkout-section .delivery-section-title { font-size: 15px; margin: 18px 0 8px; }
.checkout-section .delivery-provider-summary { min-height: 78px; padding: 13px 16px; gap: 14px; }
.checkout-section .delivery-provider-summary-brand { gap: 14px; }
.checkout-section .delivery-provider-summary-brand img { width: 44px; height: 44px; flex: 0 0 44px; }
.checkout-section .delivery-provider-summary-brand span { gap: 4px; }
.checkout-section .delivery-provider-summary-brand b { font-size: 17px; line-height: 1.25; }
.checkout-section .delivery-provider-summary-brand small { font-size: 14.5px; line-height: 1.35; }
.checkout-section .delivery-provider-summary > strong { font-size: 16.5px; }
.checkout-section .delivery-option-card { padding: 13px 16px; gap: 12px; }
.checkout-section .delivery-option-card b { font-size: 16.5px; }
.checkout-section .delivery-option-main small { font-size: 14.5px; line-height: 1.35; }
.checkout-section .delivery-option-price { font-size: 16.5px; }
.checkout-section .delivery-provider-status { font-size: 14px; }


/* =========================================================================
   v6.7 — единый крестик «Закрыть» по всему сайту
   Корзина, выбор города, окно карты, просмотр фото, карточка пункта, список городов.
   Крест рисуется линиями, поэтому не зависит от шрифта и везде одинаково ровный.
   ========================================================================= */
.drawer-close,
.image-lightbox-close,
.city-pop-close,
.pvz-sheet-close {
  flex: 0 0 auto; display: inline-grid; place-items: center; box-sizing: border-box;
  width: 40px; height: 40px; padding: 0; margin: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: rgba(255,255,255,.8);
  font-size: 0; line-height: 0; -webkit-tap-highlight-color: transparent;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.drawer-close::before, .drawer-close::after,
.image-lightbox-close::before, .image-lightbox-close::after,
.city-pop-close::before, .city-pop-close::after,
.pvz-sheet-close::before, .pvz-sheet-close::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; border-radius: 2px; background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg); transition: transform .18s ease;
}
.drawer-close::after, .image-lightbox-close::after, .city-pop-close::after, .pvz-sheet-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.drawer-close:hover, .image-lightbox-close:hover, .city-pop-close:hover, .pvz-sheet-close:hover {
  color: #fff; border-color: rgba(255,255,255,.3); background: linear-gradient(135deg, #E0508F, #B81D5F);
  box-shadow: 0 6px 16px rgba(214,42,115,.38);
}
.drawer-close:hover::before, .image-lightbox-close:hover::before, .city-pop-close:hover::before, .pvz-sheet-close:hover::before { transform: translate(-50%, -50%) rotate(135deg); }
.drawer-close:hover::after, .image-lightbox-close:hover::after, .city-pop-close:hover::after, .pvz-sheet-close:hover::after { transform: translate(-50%, -50%) rotate(45deg); }
.drawer-close:active, .image-lightbox-close:active, .city-pop-close:active, .pvz-sheet-close:active { filter: brightness(.95); }
.drawer-close:focus-visible, .image-lightbox-close:focus-visible, .city-pop-close:focus-visible, .pvz-sheet-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Положение: у корзины/города/списка — обычное, у карточки пункта — absolute, у просмотра фото — fixed (задано выше). */
.drawer-close, .city-pop-close { position: relative; }

/* Просмотр фото: размер и положение остаются прежними, крест чуть крупнее. */
.image-lightbox-close { display: grid; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); color: #fff; }
.image-lightbox-close::before, .image-lightbox-close::after { width: 22px; }
/* Карточка пункта — светлая, поэтому крест тёмный; по наведению тот же малиновый. */
.pvz-sheet-close { width: 34px; height: 34px; top: 10px; right: 10px; border-color: var(--border); background: rgba(67,54,40,.06); color: var(--ink-muted); }
.pvz-sheet-close:hover { border-color: rgba(255,255,255,.3); }
.pvz-sheet-close::before, .pvz-sheet-close::after { width: 14px; }

@media (prefers-reduced-motion: reduce) {
  .drawer-close, .image-lightbox-close, .city-pop-close, .pvz-sheet-close,
  .drawer-close::before, .drawer-close::after, .image-lightbox-close::before, .image-lightbox-close::after,
  .city-pop-close::before, .city-pop-close::after, .pvz-sheet-close::before, .pvz-sheet-close::after { transition: none; }
}

/* =========================================================================
   v6.8 — единые полосы прокрутки: тёмная дорожка, малиновый бегунок и стрелки по краям.
   Действует на всех страницах и во всех прокручиваемых блоках (список городов,
   панель пунктов, миниатюры товара, корзина, окна). Ползунки-карусели со скрытой
   полосой (плитки категорий и т.п.) остаются скрытыми намеренно.
   Стрелок у Firefox не бывает (так устроен браузер) — там тонкая полоса тех же цветов.
   ========================================================================= */
@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar { width: 14px; height: 14px; background: #141116; }
  ::-webkit-scrollbar-track { background: #141116; box-shadow: inset 1px 0 0 rgba(255,255,255,.05); }
  ::-webkit-scrollbar-track:horizontal { box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
  ::-webkit-scrollbar-thumb {
    min-height: 36px; min-width: 36px; border: 3px solid #141116; border-radius: 999px; background-clip: padding-box;
    background-color: #C41F66; background-image: linear-gradient(90deg, #E0508F, #B81D5F);
  }
  ::-webkit-scrollbar-thumb:horizontal { background-image: linear-gradient(180deg, #E0508F, #B81D5F); }
  ::-webkit-scrollbar-thumb:hover { background-color: #E0508F; background-image: linear-gradient(90deg, #ef6aa3, #d62a73); }
  ::-webkit-scrollbar-thumb:horizontal:hover { background-image: linear-gradient(180deg, #ef6aa3, #d62a73); }
  ::-webkit-scrollbar-thumb:active { background-image: linear-gradient(90deg, #C41F66, #9d1650); }
  ::-webkit-scrollbar-corner { background: #141116; }
  ::-webkit-scrollbar-button:single-button {
    display: block; width: 14px; height: 14px; background-color: #141116; background-repeat: no-repeat;
    background-position: center; background-size: 14px 14px;
  }
  ::-webkit-scrollbar-button:single-button:hover { background-color: rgba(214,42,115,.22); }
  ::-webkit-scrollbar-button:single-button:active { background-color: rgba(214,42,115,.42); }
  ::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 8.8 7 5.2l3.5 3.6' fill='none' stroke='%23f07bad' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  ::-webkit-scrollbar-button:single-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 5.2 7 8.8l3.5-3.6' fill='none' stroke='%23f07bad' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  ::-webkit-scrollbar-button:single-button:horizontal:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M8.8 3.5 5.2 7l3.6 3.5' fill='none' stroke='%23f07bad' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  ::-webkit-scrollbar-button:single-button:horizontal:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M5.2 3.5 8.8 7l-3.6 3.5' fill='none' stroke='%23f07bad' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  ::-webkit-scrollbar-button:single-button:vertical:decrement:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 8.8 7 5.2l3.5 3.6' fill='none' stroke='%23ffd3e4' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  ::-webkit-scrollbar-button:single-button:vertical:increment:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 5.2 7 8.8l3.5-3.6' fill='none' stroke='%23ffd3e4' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  ::-webkit-scrollbar-button:single-button:horizontal:decrement:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M8.8 3.5 5.2 7l3.6 3.5' fill='none' stroke='%23ffd3e4' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  ::-webkit-scrollbar-button:single-button:horizontal:increment:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M5.2 3.5 8.8 7l-3.6 3.5' fill='none' stroke='%23ffd3e4' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  /* Двойные кнопки не нужны: стрелка ровно одна на каждом конце. */
  ::-webkit-scrollbar-button:start:increment, ::-webkit-scrollbar-button:end:decrement { display: none; }
}
@supports (-moz-appearance: none) {
  * { scrollbar-width: thin; scrollbar-color: #C41F66 #141116; }
}


/* Почта России: форма получателя в фирменной тёплой палитре StrazBerry. */
.russian-post-recipient-overlay {
  position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center;
  padding: 18px; background: rgba(20, 13, 20, .72);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
}
.russian-post-recipient-dialog {
  position: relative; box-sizing: border-box; width: min(100%, 610px); max-height: min(92dvh, 850px);
  overflow: auto; overscroll-behavior: contain; padding: clamp(22px, 3.2vw, 32px);
  border: 1px solid rgba(201,161,90,.6); border-radius: 26px;
  background: linear-gradient(145deg, var(--card-bg, #FFFDF9), #fff 74%);
  color: var(--ink, #29232a);
  box-shadow: 0 28px 90px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.9);
  animation: russian-post-dialog-in .2s ease-out both;
}
@keyframes russian-post-dialog-in { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
.russian-post-recipient-close {
  position: absolute; top: 16px; right: 16px; display: grid; place-items: center;
  width: 38px; height: 38px; padding: 0; border: 1px solid var(--border, #e3d9cc); border-radius: 50%;
  background: rgba(255,255,255,.88); color: var(--ink-muted, #6d6269); font: 400 24px/1 sans-serif; cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.russian-post-recipient-close:hover { color: #fff; border-color: transparent; background: linear-gradient(135deg, #E0508F, #B81D5F); box-shadow: 0 5px 15px rgba(214,42,115,.25); }
.russian-post-recipient-brand { display: flex; align-items: center; gap: 12px; margin: 0 52px 20px 0; }
.russian-post-recipient-brand > img { display: block; flex: 0 0 48px; width: 48px; height: 48px; object-fit: cover; border: 1px solid rgba(0,85,166,.15); border-radius: 12px; box-shadow: 0 4px 12px rgba(0,85,166,.12); }
.russian-post-recipient-brand-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.russian-post-recipient-brand-copy small { color: #ad8747; font: 800 10px/1.2 'Manrope', sans-serif; letter-spacing: .12em; }
.russian-post-recipient-brand-copy b { color: var(--ink, #29232a); font: 800 15px/1.2 'Manrope', sans-serif; }
.russian-post-recipient-dialog h2 { margin: 0 0 8px; font: 800 clamp(23px, 3vw, 28px)/1.15 'Manrope', sans-serif; letter-spacing: -.025em; }
.russian-post-recipient-description { max-width: 490px; margin: 0 0 22px; color: var(--ink-muted, #776c73); font: 500 13.5px/1.6 'Manrope', sans-serif; }
.russian-post-recipient-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 13px 14px; }
.russian-post-recipient-form-heading { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; padding-bottom: 1px; }
.russian-post-recipient-form-heading strong { color: var(--ink, #29232a); font: 800 13px 'Manrope', sans-serif; }
.russian-post-recipient-form-heading span { color: var(--ink-muted, #8a7c82); font: 500 11px 'Manrope', sans-serif; }
.russian-post-recipient-form-heading i { color: #d62a73; font-style: normal; font-weight: 800; }
.russian-post-recipient-form > label { display: flex; flex-direction: column; gap: 7px; min-width: 0; color: var(--ink, #29232a); font: 800 12px/1.35 'Manrope', sans-serif; }
.russian-post-recipient-form > label:nth-of-type(3) { grid-column: 1 / -1; }
.russian-post-recipient-form > label:nth-of-type(4) { grid-column: 1 / 2; }
.russian-post-recipient-form > label:nth-of-type(5) { grid-column: 2 / 3; }
.russian-post-recipient-form .russian-post-recipient-label-title { display: inline-flex; align-items: baseline; align-self: flex-start; gap: 4px; width: fit-content; min-width: 0; color: var(--ink, #29232a); white-space: nowrap; }
.russian-post-recipient-form .russian-post-recipient-required-mark { color: #d62a73; font-weight: 900; line-height: 1; }
.russian-post-recipient-form .russian-post-recipient-label-title small { color: var(--ink-muted, #8a7c82); font-size: 11px; font-weight: 600; }
.russian-post-recipient-form input {
  box-sizing: border-box; display: block; width: 100%; min-width: 0; min-height: 49px; padding: 12px 14px;
  border: 1px solid #e4dbd0; border-radius: 13px; background: rgba(255,255,255,.9); color: var(--ink, #29232a);
  font: 600 14px/1.35 'Manrope', sans-serif; box-shadow: inset 0 1px 2px rgba(67,54,40,.025);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.russian-post-recipient-form input::placeholder { color: #b1a7aa; font-weight: 500; }
.russian-post-recipient-form input:focus { outline: none; border-color: var(--gold, #C9A15A); background: #fff; box-shadow: 0 0 0 3px rgba(201,161,90,.17); }
.russian-post-recipient-form input[readonly] { border-style: dashed; border-color: #d9c69e; background: #fbf5e9; color: #65573e; cursor: default; }
.russian-post-recipient-form input[aria-invalid="true"] { border-color: #c53e58; box-shadow: 0 0 0 3px rgba(197,62,88,.1); }
.russian-post-recipient-point { grid-column: 1 / -1; display: grid; gap: 8px; margin-top: 2px; padding: 15px 16px; border: 1px solid rgba(201,161,90,.45); border-radius: 16px; background: linear-gradient(135deg, #fffaf0, #f8f0e2); font: 500 12.5px/1.5 'Manrope', sans-serif; }
.russian-post-recipient-point-heading { display: flex; align-items: center; gap: 10px; }
.russian-post-recipient-point-icon { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 11px; background: rgba(201,161,90,.16); color: #9b7737; font: 700 22px/1 sans-serif; }
.russian-post-recipient-point-heading > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.russian-post-recipient-point-heading small { color: #ad8747; font: 800 9px/1.3 'Manrope', sans-serif; letter-spacing: .1em; }
.russian-post-recipient-point-heading b { color: var(--ink, #29232a); font: 800 12.5px/1.3 'Manrope', sans-serif; }
.russian-post-recipient-point p { margin: 0; color: var(--ink, #29232a); font: 700 13px/1.5 'Manrope', sans-serif; overflow-wrap: anywhere; }
.russian-post-recipient-index-ok, .russian-post-recipient-index-help { display: block; font: 600 11.5px/1.45 'Manrope', sans-serif; }
.russian-post-recipient-index-ok { color: #557b47; }
.russian-post-recipient-index-help { color: #8d7044; }
.russian-post-recipient-error { grid-column: 1 / -1; margin: 0; padding: 10px 12px; border: 1px solid rgba(197,62,88,.22); border-radius: 11px; background: #fff4f5; color: #ad2744; font: 700 12px/1.45 'Manrope', sans-serif; }
.russian-post-recipient-error[hidden] { display: none; }
.russian-post-recipient-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 2px; padding-top: 16px; border-top: 1px solid rgba(201,161,90,.24); }
.russian-post-recipient-actions button { appearance: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 46px; border-radius: 999px; padding: 12px 18px; font: 800 12.5px/1.2 'Manrope', sans-serif; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; }
.russian-post-recipient-actions .secondary-btn { border: 1px solid #e4dbd0; background: #fff; color: var(--ink, #29232a); }
.russian-post-recipient-actions .primary-btn { border: 1px solid transparent; background: linear-gradient(135deg, #E0508F, #B81D5F); color: #fff; box-shadow: 0 7px 18px rgba(196,31,102,.23); }
.russian-post-recipient-actions button:hover { transform: translateY(-1px); }
.russian-post-recipient-actions .primary-btn:hover { filter: brightness(1.04); box-shadow: 0 9px 22px rgba(196,31,102,.29); }
.russian-post-recipient-footnote { grid-column: 1 / -1; justify-self: stretch; box-sizing: border-box; width: 100%; margin: 0; padding: 8px 0 0; color: var(--ink-muted, #8a7c82); font: 500 10.5px/1.5 'Manrope', sans-serif; text-align: left; text-indent: 0; }
.russian-post-recipient-dialog button:focus-visible { outline: 2px solid var(--gold, #C9A15A); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .russian-post-recipient-dialog, .russian-post-recipient-close, .russian-post-recipient-form input, .russian-post-recipient-actions button { animation: none; transition: none; }
}

/* =========================================================================
   v7 · ПВЗ-метки на карте: цельная капля цвета службы, логотип-«монетка»,
   заметное выбранное состояние. Область нажатия шире рисунка; рисунок
   масштабируется от острия, поэтому координата не «уезжает».
   ========================================================================= */
.address-map-pvz-marker { cursor: pointer; }
.pvz-marker {
  --pin-c: #666; --pin-s: 1.08;
  appearance: none; -webkit-appearance: none;
  position: relative; display: block; box-sizing: border-box;
  width: 64px; height: 70px; min-width: 0; min-height: 0; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none;
  color: inherit; font: inherit; line-height: 0; text-align: center;
  transform: translate(-50%, -100%); transform-origin: 50% 100%;
  cursor: pointer; pointer-events: auto; touch-action: manipulation;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.pvz-marker::before, .pvz-marker::after { content: none !important; display: none !important; }
.pvz-marker--ozon { --pin-c: #0a5cff; }
.pvz-marker--yandex { --pin-c: #ffc800; }
.pvz-marker--russian_post { --pin-c: #0b63b8; }

.sb-pin-wrapper {
  position: absolute; left: 50%; bottom: 0; display: block; width: 44px; height: 56px;
  transform: translateX(-50%) scale(var(--pin-s)); transform-origin: 50% 100%;
  transition: transform .2s cubic-bezier(.2,.8,.2,1); pointer-events: none; isolation: isolate;
}
.sb-pin-shape {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 3px 4px rgba(24,14,24,.34)); transition: filter .2s ease;
}
.sb-pin-edge { fill: #fff; stroke: #fff; stroke-width: 3; stroke-linejoin: round; transition: fill .2s ease, stroke .2s ease; }
.sb-pin-fill { fill: var(--pin-c); }
/* Логотип — круглая «монетка» в головке капли: белое кольцо, остальное — цвет службы. */
.sb-pin-logo {
  position: absolute; z-index: 2; left: 7px; top: 6px; box-sizing: border-box; width: 30px; height: 30px;
  overflow: hidden; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #fff;
}
.sb-pin-logo img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 50%; object-fit: cover; pointer-events: none; user-select: none; }
/* Мягкая тень-«якорь» под остриём: метка стоит на карте, а не висит. */
.sb-pin-ground {
  position: absolute; z-index: 0; left: 50%; bottom: -2px; width: 18px; height: 6px; margin-left: -9px;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(24,14,24,.38), rgba(24,14,24,0));
}

.pvz-marker:hover .sb-pin-wrapper, .pvz-marker.is-hovered .sb-pin-wrapper, .pvz-marker:focus-visible .sb-pin-wrapper {
  transform: translateX(-50%) scale(calc(var(--pin-s) * 1.12));
}
.pvz-marker:hover .sb-pin-shape, .pvz-marker.is-hovered .sb-pin-shape, .pvz-marker:focus-visible .sb-pin-shape {
  filter: drop-shadow(0 6px 7px rgba(24,14,24,.36));
}
.pvz-marker:focus { outline: none; }
.pvz-marker:focus-visible .sb-pin-logo { box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px #d62a73; }

/* Выбранный пункт: крупнее, фирменно-розовая обводка и «пульс» от острия. */
.pvz-marker.selected .sb-pin-wrapper { transform: translateX(-50%) scale(calc(var(--pin-s) * 1.22)); }
.pvz-marker.selected .sb-pin-edge { fill: #e0508f; stroke: #e0508f; stroke-width: 4.5; }
.pvz-marker.selected .sb-pin-shape { filter: drop-shadow(0 7px 8px rgba(196,31,102,.42)); }
.pvz-marker.selected .sb-pin-ground { width: 30px; height: 10px; margin-left: -15px; bottom: -4px; background: radial-gradient(closest-side, rgba(214,42,115,.5), rgba(214,42,115,0)); }
.pvz-marker.selected .sb-pin-ground::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(214,42,115,.75);
  animation: sb-pin-pulse 1.7s ease-out infinite;
}
@keyframes sb-pin-pulse { 0% { transform: scale(.45); opacity: .95; } 100% { transform: scale(1.9); opacity: 0; } }
@media (min-width: 1700px) { .pvz-marker { --pin-s: 1.2; } }
@media (min-width: 2300px) { .pvz-marker { --pin-s: 1.4; } }
@media (prefers-reduced-motion: reduce) {
  .sb-pin-wrapper, .sb-pin-shape, .sb-pin-edge { transition: none !important; }
  .pvz-marker.selected .sb-pin-ground::after { animation: none; }
}

/* =========================================================================
   v7 · ОФОРМЛЕНИЕ ЗАКАЗА — единая типографика и масштаб (только ПК, ≥1025px).
   Всё измеряется в em от --co-fs, который плавно растёт с шириной экрана:
   1280px → 15px, 1440px → ≈16px, 1920px → ≈18px, 2560px → 21px.
   Шрифты: Manrope — интерфейс, Cormorant Garamond — заголовки, DM Mono — только суммы.
   Мобильные правила (max-width) не затрагиваются.
   ========================================================================= */
  :root { --co-fs: clamp(15px, calc(8.6px + 0.5vw), 21px); }

  .checkout-page { box-sizing: border-box; max-width: 80em; margin: 0 auto; padding: 2em 1.6em 4.5em; font-size: var(--co-fs); line-height: 1.5; }
  .checkout-page, .checkout-page button, .checkout-page input, .checkout-page textarea, .checkout-page summary { font-family: 'Manrope', system-ui, sans-serif; }

  /* Шапка страницы */
  .checkout-page .checkout-back-btn { padding: .5em .1em; font: 700 .92em/1.2 'Manrope', sans-serif; color: #5b5561; background: none; border: 0; cursor: pointer; transition: color .15s; }
  .checkout-page .checkout-back-btn:hover { color: #d62a73; }
  .checkout-page .checkout-title { margin: .15em 0 .6em; font: 600 2.7em/1.1 'Cormorant Garamond', serif; letter-spacing: .005em; }

  /* Сетка и карточки */
  .checkout-page .checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 26em; gap: 1.7em; align-items: start; }
  .checkout-page .checkout-col { min-width: 0; }
  .checkout-page .checkout-col-left { display: flex; flex-direction: column; gap: 1.5em; }
  .checkout-page .checkout-section { margin: 0; padding: 1.7em 1.8em; border-radius: 1.3em; }
  .checkout-page .checkout-section-title { margin: 0 0 .75em; font: 700 1.8em/1.15 'Cormorant Garamond', serif; letter-spacing: .005em; }
  .checkout-page .checkout-section-header-row { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin: 0 0 .9em; }
  .checkout-page .checkout-section-header-row .checkout-section-title { margin: 0; }
  .checkout-page .checkout-summary-card { position: sticky; top: 9em; margin: 0; padding: 1.6em 1.7em; border-radius: 1.3em; }

  /* Город — компактная кнопка справа от заголовка, в стиле шапки сайта */
  .checkout-page .cart-city-btn {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-height: 2.7em !important;
    padding: .5em 1.05em !important; gap: .5em; border-radius: .85em !important; font: 800 .95em/1.2 'Manrope', sans-serif !important;
    color: #fbf6ee !important; background: rgba(255,255,255,.07) !important; border: 1px solid rgba(214,42,115,.45) !important; box-shadow: none;
  }
  .checkout-page .cart-city-btn:hover { background: rgba(214,42,115,.2) !important; border-color: #ff7fb1 !important; }
  .checkout-page .cart-city-btn::after { content: '▾'; font-size: .8em; opacity: .7; }
  .checkout-page .city-pin-icon-cart { width: 1.25em; height: 1.25em; object-fit: contain; }

  /* Поля ввода */
  .checkout-page .field { margin: 0 0 1.1em; }
  .checkout-page .field:last-child { margin-bottom: 0; }
  .checkout-page .field > label, .checkout-page .recipient-field > label { display: block; margin: 0 0 .5em; font: 700 .9em/1.3 'Manrope', sans-serif; letter-spacing: .01em; color: rgba(251,246,238,.76); }
  .checkout-page .checkout-address-field > label { color: #fff4f8; font-weight: 800; }
  .checkout-page .field input:not([type="radio"]):not([type="checkbox"]),
  .checkout-page .discount-box-row input {
    box-sizing: border-box; width: 100%; height: 3.1em; padding: 0 1em; font: 500 1em/1.3 'Manrope', sans-serif;
    color: #26212a; background: rgba(255,255,255,.95); border: 1px solid rgba(160,140,120,.3); border-radius: .8em;
    transition: border-color .15s, box-shadow .15s;
  }
  .checkout-page .field textarea { box-sizing: border-box; width: 100%; min-height: 6.2em; padding: .85em 1em; font: 500 1em/1.45 'Manrope', sans-serif; color: #26212a; background: rgba(255,255,255,.95); border: 1px solid rgba(160,140,120,.3); border-radius: .8em; resize: vertical; transition: border-color .15s, box-shadow .15s; }
  .checkout-page .field input:focus, .checkout-page .field textarea:focus, .checkout-page .discount-box-row input:focus { outline: 0; border-color: #e45491; box-shadow: 0 0 0 .22em rgba(214,42,115,.2); }
  .checkout-page .field input::placeholder, .checkout-page .field textarea::placeholder { color: #8f8894; opacity: 1; }
  /* Данные из профиля: спокойное «закрытое» поле в тёмной теме вместо серого блока */
  .checkout-page .field input.is-readonly, .checkout-page .field input[readonly] { color: rgba(251,246,238,.94); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); cursor: default; }
  .checkout-page .field input.is-readonly:focus, .checkout-page .field input[readonly]:focus { box-shadow: none; border-color: rgba(255,255,255,.26); }
  .checkout-page .field input.is-readonly::placeholder { color: rgba(251,246,238,.45); }
  .checkout-page .recipient-field input.is-required-field { border-color: #e45491; box-shadow: 0 0 0 .2em rgba(214,42,115,.16); }
  .checkout-page .recipient-input-row { display: flex; align-items: center; gap: .6em; }
  .checkout-page .recipient-input-row input { flex: 1 1 auto; min-width: 0; }
  .checkout-page .recipient-edit-btn { flex: 0 0 auto; display: grid; place-items: center; width: 3.1em; height: 3.1em; padding: 0; border-radius: .8em; color: #fbf6ee; }
  .checkout-page .recipient-edit-btn svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .checkout-page .hint { margin-top: .5em; font: 500 .85em/1.45 'Manrope', sans-serif; color: rgba(251,246,238,.6); }

  /* Приглашение войти */
  .checkout-page .recipient-login-cta { display: flex; align-items: center; gap: 1.3em; margin: 0 0 1.3em; padding: 1.05em 1.25em; border-radius: 1em; }
  .checkout-page .recipient-login-cta-text { flex: 1 1 auto; min-width: 0; font: 500 .95em/1.55 'Manrope', sans-serif; color: rgba(251,246,238,.84); }
  .checkout-page .recipient-login-cta-text b { color: #e0b872; font-weight: 800; }
  .checkout-page .recipient-login-cta-btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 3em; padding: 0 1.4em;
    font: 800 .95em/1.2 'Manrope', sans-serif; text-decoration: none; white-space: nowrap; color: #fff; border-radius: .8em;
    background: linear-gradient(135deg, #E0508F 0%, #C41F66 100%); border: 1px solid rgba(255,255,255,.2);
    box-shadow: 0 .4em 1.1em rgba(214,42,115,.3);
  }
  .checkout-page .recipient-login-cta-btn:hover { filter: brightness(1.07); }

  /* Статусные карточки (адрес, телефон) */
  .checkout-page .checkout-address-panel { margin: 0 0 1.2em; padding: 1.15em 1.25em; border-radius: 1.1em; }
  .checkout-page .checkout-phone-gate { margin: .9em 0 0; padding: .85em 1.05em; }
  .checkout-page .checkout-address-status { display: flex; align-items: center; gap: .95em; margin-bottom: 1.1em; }
  .checkout-page .checkout-phone-gate .checkout-address-status { margin-bottom: 0; }
  .checkout-page .checkout-address-status-icon { flex: 0 0 2.4em; display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: .7em; font: 800 1.15em/1 'Manrope', sans-serif; }
  .checkout-page .checkout-address-status-copy { flex: 1 1 auto; min-width: 0; }
  .checkout-page .checkout-address-status strong { display: block; font: 800 1em/1.35 'Manrope', sans-serif; }
  .checkout-page .checkout-address-status p { margin: .25em 0 0; font: 500 .88em/1.5 'Manrope', sans-serif; color: rgba(255,255,255,.74); }
  .checkout-page .checkout-address-status-badge { flex: 0 0 auto; padding: .55em .8em; border-radius: .6em; font: 800 .68em/1 'Manrope', sans-serif; letter-spacing: .09em; white-space: nowrap; }

  /* Кнопка «Адрес на карте» */
  .checkout-page .address-actions { margin: 1em 0 0; }
  .checkout-page .address-actions .secondary-btn.checkout-address-map-btn { height: 3.2em; min-height: 3.2em; padding: 0 1.3em; gap: .6em; border-radius: .85em; font: 800 1.02em/1 'Manrope', sans-serif; }
  .checkout-page .checkout-address-map-btn .location-pin-icon { width: 1.35em; height: 1.35em; flex: 0 0 1.35em; }
  .checkout-page .checkout-address-map-btn.is-locked .map-btn-note { padding: .5em .8em; font-size: .66em; border-radius: .6em; }

  /* Заметка и варианты доставки */
  .checkout-page .tier-note { margin: 0 0 1.2em; padding: .8em 1.05em; border-radius: .85em; font: 500 .9em/1.5 'Manrope', sans-serif; }
  .checkout-page .delivery-section-title { margin: 1.5em 0 .7em; font: 800 1em/1.3 'Manrope', sans-serif; letter-spacing: .01em; color: rgba(251,246,238,.88); }
  .checkout-page .delivery-option-card { padding: 1em 1.2em 1em 1.1em; border-radius: 1em; gap: 1em; font-size: 1em; }
  .checkout-page .delivery-option-brandline { display: flex; align-items: center; gap: .6em; }
  .checkout-page .delivery-option-brandline b { font: 800 1.08em/1.3 'Manrope', sans-serif; }
  .checkout-page .delivery-option-card small { display: block; margin-top: .25em; font: 500 .9em/1.4 'Manrope', sans-serif; }
  .checkout-page .delivery-provider-logo { width: 1.9em; height: 1.9em; flex: 0 0 1.9em; }
  .checkout-page .delivery-option-price, .checkout-page .mono { font-family: 'DM Mono', 'Manrope', monospace; }
  .checkout-page .delivery-option-price { font-size: 1.2em; font-weight: 500; white-space: nowrap; }
  .checkout-page .delivery-provider-summary { min-height: 4.6em; margin-bottom: .7em; padding: .85em 1.1em; border-radius: 1em; gap: 1em; font-family: 'Manrope', sans-serif; }
  .checkout-page .delivery-provider-summary-brand { gap: .9em; }
  .checkout-page .delivery-provider-summary-brand img { width: 2.8em; height: 2.8em; flex: 0 0 2.8em; }
  .checkout-page .delivery-provider-summary b { font: 800 1.08em/1.3 'Manrope', sans-serif; }
  .checkout-page .delivery-provider-summary small { display: block; margin-top: .2em; font: 500 .9em/1.4 'Manrope', sans-serif; }
  .checkout-page .delivery-provider-summary > strong { font: 600 1.15em/1.2 'DM Mono', 'Manrope', monospace; white-space: nowrap; }
  .checkout-page .delivery-address-gate { gap: .95em; padding: 1em 1.15em; border-radius: 1em; }
  .checkout-page .delivery-address-gate-icon { flex: 0 0 2.2em; width: 2.2em; height: 2.2em; border-radius: .65em; font-size: 1.05em; }
  .checkout-page .delivery-address-gate b { font: 800 1em/1.35 'Manrope', sans-serif; }
  .checkout-page .delivery-address-gate p { margin: .25em 0 0; font: 500 .9em/1.5 'Manrope', sans-serif; }
  .checkout-page .delivery-quote-loading { font: 600 .95em/1.4 'Manrope', sans-serif; }

  /* Товары в заказе */
  .checkout-page .checkout-item { gap: 1.1em; padding: 1em 0; }
  .checkout-page .checkout-item .cart-item-image { flex: 0 0 5.4em; width: 5.4em; height: 5.4em; border-radius: .85em; object-fit: cover; }
  .checkout-page .cart-item-name { font: 700 1.02em/1.4 'Manrope', sans-serif; }
  .checkout-page .cart-item-price { margin-top: .2em; font: 600 1.1em/1.3 'DM Mono', 'Manrope', monospace; }
  .checkout-page .cart-item-remove { width: 2.5em; height: 2.5em; border-radius: .7em; }
  .checkout-page .cart-item-remove svg { width: 1.15em; height: 1.15em; }
  .checkout-page .qty-controls { gap: .5em; align-items: center; }
  .checkout-page .qty-btn { display: grid; place-items: center; width: 2.4em; height: 2.4em; padding: 0; border-radius: .7em; font: 700 1.15em/1 'Manrope', sans-serif; }
  .checkout-page .qty-controls .mono { min-width: 1.8em; text-align: center; font: 600 1.1em/1 'DM Mono', 'Manrope', monospace; }

  /* Сертификаты и промокод */
  .checkout-page .discount-box { margin: 0 0 1.4em; padding: 1.1em 1.2em; border-radius: 1em; }
  .checkout-page .discount-box-title { margin: 0 0 .6em; font: 800 1.05em/1.3 'Manrope', sans-serif; }
  .checkout-page .discount-manual-entry summary { padding: .3em 0; font: 700 .92em/1.4 'Manrope', sans-serif; cursor: pointer; }
  .checkout-page .discount-box-row { display: flex; gap: .6em; margin-top: .6em; }
  .checkout-page .discount-box-row input { flex: 1 1 auto; min-width: 0; }
  .checkout-page .discount-apply-btn { flex: 0 0 auto; width: auto; height: 3.1em; padding: 0 1.2em; font: 800 .95em/1 'Manrope', sans-serif; border-radius: .8em; }
  .checkout-page .discount-login-btn { display: flex; align-items: center; justify-content: center; height: 3em; margin-top: .8em; text-decoration: none; font: 800 .95em/1 'Manrope', sans-serif; border-radius: .85em; color: #fbf6ee; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); }
  .checkout-page .discount-login-btn:hover, .checkout-page .discount-apply-btn:hover { border-color: #ff7fb1; background: rgba(214,42,115,.18); }
  .checkout-page .benefit-card-title { font: 800 .98em/1.3 'Manrope', sans-serif; }
  .checkout-page .benefit-card-code { font: 500 .85em/1.3 'DM Mono', monospace; }
  .checkout-page .benefit-card-expiry { font: 500 .82em/1.3 'Manrope', sans-serif; }
  .checkout-page .benefit-card-value { font: 700 1.05em/1.2 'DM Mono', 'Manrope', monospace; }

  /* Итоги и оплата */
  .checkout-page .total-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; padding: .45em 0; font: 600 1em/1.4 'Manrope', sans-serif; color: rgba(251,246,238,.8); }
  .checkout-page .total-row > span:last-child { font: 600 1.12em/1.3 'DM Mono', 'Manrope', monospace; color: #fbf6ee; white-space: nowrap; }
  .checkout-page .total-row b { font: inherit; }
  .checkout-page .total-row-final { margin-top: .55em; padding-top: 1em; border-top: 1px solid rgba(255,255,255,.14); color: #fff; }
  .checkout-page .total-row-final > span:first-child { font: 800 1.2em/1.3 'Manrope', sans-serif; }
  .checkout-page .total-row-final > span:last-child { font: 700 1.65em/1.2 'DM Mono', 'Manrope', monospace; }
  .checkout-page .primary-btn { box-sizing: border-box; height: 3.4em; margin-top: 1.2em; padding: 0 1.2em; font: 800 1.08em/1 'Manrope', sans-serif; letter-spacing: .01em; border-radius: .9em; transition: filter .15s, transform .15s, box-shadow .15s; }
  .checkout-page .primary-btn:not(:disabled) { color: #fff; background: linear-gradient(135deg, #E0508F 0%, #C41F66 100%); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 .5em 1.3em rgba(214,42,115,.34); }
  .checkout-page .primary-btn:not(:disabled):hover { filter: brightness(1.07); transform: translateY(-1px); }
  .checkout-page .primary-btn:disabled { color: rgba(255,255,255,.5); background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); box-shadow: none; cursor: not-allowed; }
  .checkout-page .payment-note { margin-top: 1em; padding: .85em 1.05em; border-radius: .85em; font: 500 .88em/1.5 'Manrope', sans-serif; color: #ffb9d4; }
  .checkout-page .pay-methods-title { font: 800 1em/1.3 'Manrope', sans-serif; }
  .checkout-page .pay-method-body b { font: 800 1em/1.3 'Manrope', sans-serif; }
  .checkout-page .pay-method-body small { font: 500 .85em/1.4 'Manrope', sans-serif; }


  /* Поля из профиля — «закрытые» (специфичность выше общего правила для полей) */
  .checkout-page .field input.is-readonly:not([type="radio"]):not([type="checkbox"]),
  .checkout-page .field input[readonly]:not([type="radio"]):not([type="checkbox"]) {
    color: rgba(251,246,238,.94); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); cursor: default; opacity: 1;
  }
  .checkout-page .field input.is-readonly:not([type="radio"]):not([type="checkbox"]):focus { box-shadow: none; border-color: rgba(255,255,255,.28); }
  /* Приглашение войти — текст слева, кнопка справа в одну строку */
  .checkout-page .recipient-login-cta { flex-wrap: nowrap; justify-content: space-between; }
  .checkout-page .recipient-login-cta-text { flex: 1 1 0; }
  .checkout-page .recipient-login-cta-btn { width: auto; }
  /* Неактивная «Оплатить» — приглушённая тёмная, а не светло-серая (старое правило с !important) */
  .checkout-page .primary-btn:disabled {
    color: rgba(255,255,255,.5) !important; background: rgba(255,255,255,.09) !important; border-color: rgba(255,255,255,.16) !important;
    box-shadow: none !important; cursor: not-allowed;
  }
  /* «Не выбрана» — текст, а не сумма: Manrope, без моноширинных пробелов */
  .checkout-page .total-row > span.total-row-placeholder { font: 600 1em/1.4 'Manrope', sans-serif; color: rgba(251,246,238,.6); }
  /* Подписи на светлых карточках доставки читаются лучше */
  .checkout-page .delivery-provider-summary small, .checkout-page .delivery-option-card small { color: #6a6370; }


  /* Суммы в DM Mono: у моноширинного шрифта слишком широкий пробел перед «₽» — сжимаем */
  .checkout-page .total-row > span:last-child, .checkout-page .delivery-option-price, .checkout-page .cart-item-price,
  .checkout-page .delivery-provider-summary > strong, .checkout-page .benefit-card-value { word-spacing: -.32em; }
  /* Текстовые «цены» («Цена на карте», «Считаем…») — Manrope: в DM Mono нет кириллицы */
  .checkout-page .delivery-provider-summary > strong.is-text { font: 700 .92em/1.2 'Manrope', sans-serif; word-spacing: normal; color: #6a6370; }
  /* Подпись под названием службы (старое правило давало 12px) */
  .checkout-page .delivery-provider-summary .delivery-provider-summary-brand small { font: 500 .88em/1.4 'Manrope', sans-serif; }
  .checkout-page .checkout-address-status-badge { font-size: .72em; }


  /* Пока открыто оформление заказа, контентная колонка растёт вместе с масштабом шрифта
     (общий main ограничен 1480px — на больших мониторах страница оставалась узкой). */
  main:has(> #checkoutView[style*="display: block"]) { max-width: calc(var(--co-fs) * 80 + 68px); }


  /* Кнопка службы наследовала 13px из старого правила — вложенные em «схлопывались» в 12px */
  .checkout-page .delivery-provider-summary { font-size: 1em; }


/* =========================================================================
   v7 · Окно выбора адреса на карте (часть оформления) — шрифты и масштаб на ПК
   ========================================================================= */
.map-modal, .map-modal button, .map-modal input, .map-modal textarea { font-family: 'Manrope', system-ui, sans-serif; }
  /* Фильтр служб и «Моё местоположение» над картой — в em, растут вместе с экраном */
  .map-overlay-top { font-size: var(--co-fs); top: .7em; left: .7em; right: .7em; gap: .6em; }
  .mf-chip { min-height: 2.6em; padding: 0 .95em 0 .4em; gap: .5em; font: 800 .82em/1 'Manrope', sans-serif; }
  .mf-logo { width: 2.1em; height: 2.1em; flex: 0 0 2.1em; }
  .mf-count { font-size: .95em; }
  .map-modal .map-stage .map-location-btn { min-height: 2.9em; padding: 0 1.2em 0 .4em; gap: .6em; font: 800 .85em/1 'Manrope', sans-serif; }
  .map-locate-badge { width: 2.2em; height: 2.2em; flex: 0 0 2.2em; }
  .map-locate-badge svg { width: 1.2em; height: 1.2em; }

@media (min-width: 1700px) {
  /* Большой монитор: окно и карта шире, правая панель просторнее */
  .map-modal .address-map-card { width: min(calc(var(--co-fs) * 88), 96vw); }
  .map-modal .address-map-body { grid-template-columns: minmax(0, 1fr) clamp(400px, 24vw, 520px); gap: 18px; }
}

/* =========================================================================
   v7 · Окно «Почта России: данные получателя» — тёмная карточка сайта, крупные поля.
   ========================================================================= */
.russian-post-recipient-overlay, .russian-post-recipient-overlay button, .russian-post-recipient-overlay input { font-family: 'Manrope', system-ui, sans-serif; }
  .russian-post-recipient-overlay { font-size: var(--co-fs); padding: 1.2em; background: rgba(8,6,10,.78); }
  .russian-post-recipient-overlay .russian-post-recipient-dialog {
    width: min(100%, 44em); max-height: min(94dvh, 58em); padding: 2.2em 2.4em 2em; border-radius: 1.5em;
    color: #fbf6ee; background: linear-gradient(160deg, #19131b 0%, #0e0d10 62%);
    border: 1px solid rgba(214,42,115,.42); box-shadow: 0 2em 6em rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06);
  }
  .russian-post-recipient-overlay .russian-post-recipient-close {
    top: 1.1em; right: 1.1em; width: 2.6em; height: 2.6em; display: grid; place-items: center; padding: 0; font: 400 1.5em/1 'Manrope', sans-serif;
    color: #fbf6ee; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 50%;
  }
  .russian-post-recipient-overlay .russian-post-recipient-close:hover { background: rgba(214,42,115,.28); border-color: #ff7fb1; }
  .russian-post-recipient-overlay .russian-post-recipient-brand { gap: .9em; margin: 0 0 1.1em; }
  .russian-post-recipient-overlay .russian-post-recipient-brand > img { width: 3.2em; height: 3.2em; flex: 0 0 3.2em; border-radius: 50%; box-shadow: 0 .2em .7em rgba(0,0,0,.5); }
  .russian-post-recipient-overlay .russian-post-recipient-brand-copy small { display: block; font: 800 .72em/1.2 'Manrope', sans-serif; letter-spacing: .12em; color: #e0b872; }
  .russian-post-recipient-overlay .russian-post-recipient-brand-copy b { display: block; margin-top: .15em; font: 800 1.15em/1.2 'Manrope', sans-serif; color: #fbf6ee; }
  .russian-post-recipient-overlay .russian-post-recipient-dialog h2 { margin: 0 0 .35em; font: 700 2.1em/1.15 'Cormorant Garamond', serif; letter-spacing: .005em; color: #fbf6ee; }
  .russian-post-recipient-overlay .russian-post-recipient-description { margin: 0 0 1.4em; max-width: 36em; font: 500 .98em/1.6 'Manrope', sans-serif; color: rgba(251,246,238,.72); }
  .russian-post-recipient-overlay .russian-post-recipient-form { gap: 1.1em 1.1em; }
  .russian-post-recipient-overlay .russian-post-recipient-form-heading { padding-top: 1.1em; border-top: 1px solid rgba(255,255,255,.12); }
  .russian-post-recipient-overlay .russian-post-recipient-form-heading strong { font: 800 1.05em/1.3 'Manrope', sans-serif; color: #fbf6ee; }
  .russian-post-recipient-overlay .russian-post-recipient-form-heading span { font: 500 .85em/1.3 'Manrope', sans-serif; color: rgba(251,246,238,.6); }
  .russian-post-recipient-overlay .russian-post-recipient-form-heading i { color: #ff7fb1; font-style: normal; }
  .russian-post-recipient-overlay .russian-post-recipient-form .russian-post-recipient-label-title { display: block; margin: 0 0 .5em; font: 700 .9em/1.3 'Manrope', sans-serif; color: rgba(251,246,238,.8); }
  .russian-post-recipient-overlay .russian-post-recipient-form .russian-post-recipient-label-title small { font: 500 .9em/1 'Manrope', sans-serif; color: rgba(251,246,238,.5); }
  .russian-post-recipient-overlay .russian-post-recipient-form .russian-post-recipient-required-mark { color: #ff7fb1; }
  .russian-post-recipient-overlay .russian-post-recipient-form input {
    box-sizing: border-box; width: 100%; height: 3.2em; padding: 0 1.05em; font: 500 1.02em/1.3 'Manrope', sans-serif;
    color: #26212a; background: rgba(255,255,255,.95); border: 1px solid rgba(160,140,120,.3); border-radius: .8em;
  }
  .russian-post-recipient-overlay .russian-post-recipient-form input::placeholder { color: #8f8894; opacity: 1; }
  .russian-post-recipient-overlay .russian-post-recipient-form input:focus { outline: 0; border-color: #e45491; box-shadow: 0 0 0 .22em rgba(214,42,115,.22); }
  .russian-post-recipient-overlay .russian-post-recipient-form input[readonly] { color: rgba(251,246,238,.94); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); }
  .russian-post-recipient-overlay .russian-post-recipient-form input[aria-invalid="true"] { border-color: #ff5c8d; box-shadow: 0 0 0 .22em rgba(255,92,141,.22); }
  .russian-post-recipient-overlay .russian-post-recipient-point { padding: 1.1em 1.2em; border-radius: 1em; color: #fbf6ee; background: rgba(255,255,255,.05); border: 1px solid rgba(214,42,115,.32); }
  .russian-post-recipient-overlay .russian-post-recipient-point-icon { width: 2.3em; height: 2.3em; display: grid; place-items: center; border-radius: .65em; font-size: 1.05em; color: #fff; background: rgba(214,42,115,.35); }
  .russian-post-recipient-overlay .russian-post-recipient-point-heading small { font: 800 .7em/1.2 'Manrope', sans-serif; letter-spacing: .1em; color: #e0b872; }
  .russian-post-recipient-overlay .russian-post-recipient-point-heading b { font: 800 1.02em/1.3 'Manrope', sans-serif; color: #fbf6ee; }
  .russian-post-recipient-overlay .russian-post-recipient-point p { margin: .7em 0 .3em; font: 600 .98em/1.5 'Manrope', sans-serif; color: rgba(251,246,238,.92); }
  .russian-post-recipient-overlay .russian-post-recipient-index-ok, .russian-post-recipient-overlay .russian-post-recipient-index-help { display: block; font: 600 .88em/1.45 'Manrope', sans-serif; }
  .russian-post-recipient-overlay .russian-post-recipient-index-ok { color: #7fd6a0; }
  .russian-post-recipient-overlay .russian-post-recipient-index-help { color: #f0b48a; }
  .russian-post-recipient-overlay .russian-post-recipient-error { padding: .8em 1em; border-radius: .8em; font: 600 .92em/1.45 'Manrope', sans-serif; color: #ffb9d4; background: rgba(255,92,141,.12); border: 1px solid rgba(255,92,141,.4); }
  .russian-post-recipient-overlay .russian-post-recipient-actions { display: flex; gap: .8em; margin-top: .4em; }
  .russian-post-recipient-overlay .russian-post-recipient-actions button { height: 3.3em; margin: 0; padding: 0 1.4em; border-radius: .85em; font: 800 1em/1 'Manrope', sans-serif; cursor: pointer; }
  .russian-post-recipient-overlay .russian-post-recipient-actions .secondary-btn { flex: 0 0 auto; width: auto; color: #fbf6ee; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); }
  .russian-post-recipient-overlay .russian-post-recipient-actions .secondary-btn:hover { border-color: #ff7fb1; background: rgba(214,42,115,.18); }
  .russian-post-recipient-overlay .russian-post-recipient-actions .primary-btn { flex: 1 1 auto; width: auto; color: #fff; background: linear-gradient(135deg, #E0508F 0%, #C41F66 100%); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 .5em 1.3em rgba(214,42,115,.34); }
  .russian-post-recipient-overlay .russian-post-recipient-actions .primary-btn:hover { filter: brightness(1.07); }
  .russian-post-recipient-overlay .russian-post-recipient-footnote { margin: 1em 0 0; font: 500 .82em/1.5 'Manrope', sans-serif; color: rgba(251,246,238,.5); }


  /* Подписи полей наследовали 12px от <label> — вложенные em давали ~11px */
  .russian-post-recipient-overlay .russian-post-recipient-form > label { font-size: 1em; }


  .russian-post-recipient-overlay .russian-post-recipient-point { font-size: 1em; }
  .russian-post-recipient-overlay .russian-post-recipient-footnote { font-size: .86em; }


  .checkout-page .field input:not([type="radio"]):not([type="checkbox"]), .checkout-page .field textarea { transition: border-color .15s, box-shadow .15s; }



/* Checkout scale v2: уменьшаем весь блок оформления на 20% на любом экране.
   Viewport страницы магазина задан как device-width, поэтому media queries
   сначала выбирают правильную раскладку для телефона/планшета/ПК. */
.checkout-page {
  zoom: 0.8;
}

/* =========================================================================
   v6.7 — единый glassmorphism для фильтров служб и геолокации на карте
   Логотипы служб остаются фирменными; стеклянным становится общий корпус.
   ========================================================================= */
.map-modal .map-overlay-top .mf-chip,
.map-modal .map-overlay-top .map-location-btn {
  color: #F7F0E5;
  border: 1px solid rgba(247,240,229,.22);
  background: linear-gradient(145deg, rgba(48,45,53,.80) 0%, rgba(27,25,31,.70) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(175%);
  backdrop-filter: blur(16px) saturate(175%);
  box-shadow:
    0 10px 26px rgba(0,0,0,.34),
    0 2px 7px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.12);
}
.map-modal .map-overlay-top .mf-chip {
  transition: transform .18s ease, background .2s ease, border-color .2s ease,
    box-shadow .2s ease, color .2s ease;
}
.map-modal .map-overlay-top .mf-chip:hover:not(.is-off) {
  color: #fff;
  border-color: rgba(255,179,210,.72);
  background: linear-gradient(145deg, rgba(214,42,115,.40), rgba(47,40,50,.80));
  box-shadow:
    0 12px 28px rgba(0,0,0,.36),
    0 0 0 1px rgba(214,42,115,.12),
    inset 0 1px 0 rgba(255,255,255,.2);
}
.map-modal .map-overlay-top .mf-chip:active:not(.is-off) {
  transform: scale(.97);
  background: linear-gradient(145deg, rgba(214,42,115,.52), rgba(47,40,50,.84));
}
.map-modal .map-overlay-top .mf-chip.is-off {
  color: rgba(247,240,229,.62);
  border-color: rgba(247,240,229,.12);
  background: linear-gradient(145deg, rgba(45,42,49,.58), rgba(25,23,29,.54));
  box-shadow: 0 6px 16px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.09);
}
.map-modal .map-overlay-top .mf-chip.is-off .mf-count {
  color: rgba(247,240,229,.48);
}
.map-modal .map-overlay-top .mf-chip.is-solo {
  color: #fff;
  border-color: rgba(255,179,210,.78);
  background: linear-gradient(145deg, rgba(214,42,115,.48), rgba(48,40,51,.84));
  box-shadow:
    0 10px 26px rgba(0,0,0,.34),
    0 0 0 2px rgba(214,42,115,.22),
    inset 0 1px 0 rgba(255,255,255,.2);
}
.map-modal .map-overlay-top .mf-chip.is-solo .mf-count { color: #fff; }
.map-modal .map-overlay-top .mf-chip.is-error { border-color: rgba(240,180,138,.7); }
.map-modal .map-overlay-top .mf-chip:focus-visible,
.map-modal .map-overlay-top .map-location-btn:focus-visible {
  outline: 2px solid #F7F0E5;
  outline-offset: 3px;
}
.map-modal .map-overlay-top .map-location-btn:hover {
  background: linear-gradient(145deg, rgba(214,42,115,.40), rgba(47,40,50,.80));
  border-color: rgba(255,179,210,.72);
  box-shadow: 0 12px 28px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.2);
}
@media (prefers-reduced-motion: reduce) {
  .map-modal .map-overlay-top .mf-chip { transition: none; }
}



/* =========================================================================
   v6.8 — единый прозрачный glass для фильтров + центрирование группы служб
   ========================================================================= */
.map-modal .map-overlay-top {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: block;
  z-index: 8;
  pointer-events: none;
}
.map-modal .map-overlay-top > * { pointer-events: auto; }

/* Три службы находятся ровно по центру верхней кромки карты.
   Геолокация остаётся самостоятельной кнопкой справа. */
.map-modal .map-overlay-top .map-provider-filter {
  position: absolute;
  top: 0;
  left: 50%;
  right: auto;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: max-content;
  max-width: calc(100% - 300px);
  min-width: 0;
  transform: translateX(-50%);
  z-index: 2;
}
.map-modal .map-overlay-top .map-provider-filter[hidden] { display: none !important; }
.map-modal .map-overlay-top .map-location-btn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
}

/* Один и тот же материал для Ozon / Яндекса / Почты и геолокации.
   Достаточно прозрачный, чтобы карта действительно просвечивала сквозь стекло. */
.map-modal .map-overlay-top .mf-chip,
.map-modal .map-overlay-top .map-location-btn {
  box-sizing: border-box;
  color: #F7F0E5 !important;
  border: 1px solid rgba(247,240,229,.34) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.035) 46%, rgba(255,255,255,0) 100%),
    linear-gradient(145deg, rgba(55,51,60,.54) 0%, rgba(29,27,34,.43) 100%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(185%);
  backdrop-filter: blur(20px) saturate(185%);
  box-shadow:
    0 11px 28px rgba(0,0,0,.30),
    0 2px 7px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.12) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.26);
}
.map-modal .map-overlay-top .mf-chip {
  min-height: 44px;
  padding: 0 14px 0 7px;
  gap: 8px;
  border-radius: 999px;
  font: 800 13px/1 'Manrope', sans-serif;
  white-space: nowrap;
  transition: transform .18s ease, border-color .2s ease, background .2s ease,
    box-shadow .2s ease, opacity .2s ease;
}
.map-modal .map-overlay-top .mf-chip .mf-logo {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  filter: none;
  opacity: 1;
  box-shadow: 0 2px 7px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.16);
}
.map-modal .map-overlay-top .mf-chip .mf-count {
  color: #ffd7e7 !important;
  font-weight: 800;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.map-modal .map-overlay-top .mf-chip:hover:not(.is-off) {
  color: #fff !important;
  border-color: rgba(255,190,216,.78) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.19), rgba(255,255,255,0) 65%),
    linear-gradient(145deg, rgba(214,42,115,.36), rgba(46,39,50,.48)) !important;
  box-shadow:
    0 13px 30px rgba(0,0,0,.32),
    0 0 0 1px rgba(214,42,115,.12),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
  transform: translateY(-1px);
}
.map-modal .map-overlay-top .mf-chip:active:not(.is-off) {
  transform: scale(.97);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 65%),
    linear-gradient(145deg, rgba(214,42,115,.46), rgba(46,39,50,.52)) !important;
}
/* Выключенная служба остаётся стеклянной, а не превращается в глухую чёрную плашку. */
.map-modal .map-overlay-top .mf-chip.is-off {
  color: rgba(247,240,229,.70) !important;
  border-color: rgba(247,240,229,.22) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,0) 62%),
    linear-gradient(145deg, rgba(48,45,52,.40), rgba(27,25,31,.32)) !important;
  box-shadow:
    0 8px 20px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
  opacity: .82;
}
.map-modal .map-overlay-top .mf-chip.is-off .mf-logo {
  filter: saturate(.72);
  opacity: .78;
}
.map-modal .map-overlay-top .mf-chip.is-off .mf-count {
  color: rgba(247,240,229,.66) !important;
}
.map-modal .map-overlay-top .mf-chip.is-solo {
  color: #fff !important;
  border-color: rgba(255,183,211,.82) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 60%),
    linear-gradient(145deg, rgba(214,42,115,.48), rgba(53,39,52,.49)) !important;
  box-shadow:
    0 11px 28px rgba(0,0,0,.30),
    0 0 0 2px rgba(214,42,115,.18),
    inset 0 1px 0 rgba(255,255,255,.26) !important;
}
.map-modal .map-overlay-top .mf-chip.is-solo .mf-count { color: #fff !important; }
.map-modal .map-overlay-top .mf-chip.is-error { border-color: rgba(240,180,138,.78) !important; }
.map-modal .map-overlay-top .mf-chip:focus-visible,
.map-modal .map-overlay-top .map-location-btn:focus-visible {
  outline: 2px solid #F7F0E5;
  outline-offset: 3px;
}
.map-modal .map-overlay-top .map-location-btn {
  min-height: 44px;
  border-radius: 999px;
}
.map-modal .map-overlay-top .map-location-btn:hover {
  border-color: rgba(255,190,216,.78) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.19), rgba(255,255,255,0) 65%),
    linear-gradient(145deg, rgba(214,42,115,.36), rgba(46,39,50,.48)) !important;
}

/* Сам зум тоже использует тот же просвечивающий материал, но остаётся в
   нижнем правом углу — как отдельный навигационный контрол карты. */
.map-stage > .map-zoom-controls {
  background:
    linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.025) 48%, rgba(255,255,255,0) 100%),
    linear-gradient(145deg, rgba(55,51,60,.56), rgba(29,27,34,.44)) !important;
  border-color: rgba(247,240,229,.32) !important;
  -webkit-backdrop-filter: blur(20px) saturate(185%) !important;
  backdrop-filter: blur(20px) saturate(185%) !important;
  box-shadow:
    0 11px 28px rgba(0,0,0,.30),
    0 2px 7px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(0,0,0,.12) !important;
}




@media (prefers-reduced-motion: reduce) {
  .map-modal .map-overlay-top .mf-chip { transition: none; }
}

/* =========================================================================
   v6.9 — компоновка контролов карты по референсу + отчётливый hover
   Фильтры слева сверху, геолокация справа сверху, масштаб по центру справа.
   ========================================================================= */
.map-modal .map-overlay-top {
  top: 15px !important;
  left: 28px !important;
  right: 16px !important;
  height: 54px;
}
.map-modal .map-overlay-top .map-provider-filter {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 9px !important;
  width: max-content !important;
  max-width: calc(100% - 310px) !important;
  transform: none !important;
  z-index: 2;
}
.map-modal .map-overlay-top .map-location-btn {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  min-height: 54px !important;
  z-index: 3;
}
.map-modal .map-overlay-top .mf-chip {
  min-height: 54px !important;
  padding: 0 16px 0 8px !important;
  gap: 9px !important;
  border-radius: 999px !important;
}
.map-modal .map-overlay-top .mf-chip .mf-logo {
  width: 36px !important;
  height: 36px !important;
  flex-basis: 36px !important;
}
.map-modal .map-overlay-top .map-locate-badge {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
}
.map-modal .map-overlay-top .map-locate-badge svg {
  width: 20px;
  height: 20px;
}

/* Зум расположен на середине правой стороны карты, не у нижней кромки. */
.map-stage > .map-zoom-controls {
  top: 50% !important;
  right: 24px !important;
  bottom: auto !important;
  width: 68px !important;
  padding: 5px !important;
  border-radius: 21px !important;
  transform: translateY(-50%) !important;
}
.map-stage > .map-zoom-controls .map-zoom-btn {
  width: 56px !important;
  height: 56px !important;
  flex-basis: 56px !important;
  border-radius: 15px !important;
  font-size: 23px !important;
}
.map-stage > .map-zoom-controls .map-zoom-btn svg {
  width: 21px;
  height: 21px;
}

/* Hover должен быть виден на любом фильтре — включённом и выключенном. */
@media (hover: hover) and (pointer: fine) {
  .map-modal .map-overlay-top .mf-chip:hover,
  .map-modal .map-overlay-top .mf-chip.is-off:hover,
  .map-modal .map-overlay-top .mf-chip.is-solo:hover {
    color: #fff !important;
    opacity: 1 !important;
    border-color: rgba(255,205,226,.98) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.055) 48%, rgba(255,255,255,0) 100%),
      linear-gradient(145deg, rgba(229,48,126,.66) 0%, rgba(105,35,75,.70) 100%) !important;
    box-shadow:
      0 14px 32px rgba(0,0,0,.38),
      0 0 0 2px rgba(255,190,216,.28),
      0 0 26px rgba(214,42,115,.48),
      inset 0 1px 0 rgba(255,255,255,.38),
      inset 0 -1px 0 rgba(0,0,0,.10) !important;
    transform: translateY(-2px) scale(1.025) !important;
    filter: saturate(1.12);
  }
  .map-modal .map-overlay-top .mf-chip:hover .mf-logo,
  .map-modal .map-overlay-top .mf-chip.is-off:hover .mf-logo {
    opacity: 1 !important;
    filter: saturate(1.08) !important;
    transform: scale(1.07);
  }
  .map-modal .map-overlay-top .mf-chip:hover .mf-count,
  .map-modal .map-overlay-top .mf-chip.is-off:hover .mf-count {
    color: #fff !important;
  }
  .map-modal .map-overlay-top .map-location-btn:hover {
    color: #fff !important;
    border-color: rgba(255,205,226,.98) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 68%),
      linear-gradient(145deg, rgba(229,48,126,.66), rgba(105,35,75,.70)) !important;
    box-shadow:
      0 14px 32px rgba(0,0,0,.38),
      0 0 0 2px rgba(255,190,216,.28),
      0 0 26px rgba(214,42,115,.48),
      inset 0 1px 0 rgba(255,255,255,.38) !important;
    transform: translateY(-2px) scale(1.015) !important;
  }
  .map-stage > .map-zoom-controls .map-zoom-btn:hover:not(:disabled) {
    color: #fff !important;
    background: linear-gradient(145deg, rgba(229,48,126,.72), rgba(105,35,75,.74)) !important;
    box-shadow: 0 0 0 1px rgba(255,205,226,.38), 0 0 20px rgba(214,42,115,.52), inset 0 1px 0 rgba(255,255,255,.24);
  }
  .map-stage > .map-zoom-controls .map-zoom-btn:hover:not(:disabled) svg {
    transform: scale(1.18);
  }
}
.map-modal .map-overlay-top .mf-chip:active,
.map-modal .map-overlay-top .map-location-btn:active {
  transform: scale(.975) !important;
}



@media (prefers-reduced-motion: reduce) {
  .map-modal .map-overlay-top .mf-chip,
  .map-modal .map-overlay-top .map-location-btn,
  .map-stage > .map-zoom-controls .map-zoom-btn,
  .map-stage > .map-zoom-controls .map-zoom-btn svg { transition: none !important; }
}

/* =========================================================================
   v96 — окно выбора адреса: подпись «Адрес доставки» и полосы прокрутки
   • Подпись стала плашкой-бейджем: крупнее (14px), с ромбиком-«стразом», ниже от верхнего края.
   • Полосы прокрутки внутри окна карты — тонкие, «плавающие»: прозрачная дорожка, малиновый
     бегунок-капсула, без квадратных кнопок-стрелок. Бегунок окна не заходит в скруглённые углы.
   • Высота карты чуть уменьшена, чтобы окно на обычных мониторах помещалось целиком
     и своя полоса прокрутки у окна вообще не появлялась.
   ========================================================================= */
.map-modal .map-modal-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 14px; padding: 8px 18px 8px 14px;
  font: 800 14px/1 'Manrope', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: #ff8fbb;
  border: 1px solid rgba(214,42,115,.42); border-radius: 999px;
  background: linear-gradient(135deg, rgba(214,42,115,.20), rgba(201,161,90,.07));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 4px 16px rgba(214,42,115,.12);
}
.map-modal .map-modal-kicker::before {
  content: ''; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg);
  background: linear-gradient(135deg, #ffd3e4, #E0508F 55%, #B81D5F);
  box-shadow: 0 0 8px rgba(240,123,173,.75);
}
.map-modal .map-modal-header h2 { margin-top: 0; }
  .map-modal .address-map-card { padding-top: 32px; }

  .map-modal .address-map-body .delivery-map,
  .map-modal .address-map-side { height: clamp(380px, calc(100vh - 436px), 780px); }



@media (hover: hover) and (pointer: fine) {
  .map-modal ::-webkit-scrollbar { width: 12px; height: 12px; background: transparent; }
  .map-modal ::-webkit-scrollbar-track { margin: 6px 0; background: transparent; box-shadow: none; }
  .map-modal ::-webkit-scrollbar-track:horizontal { margin: 0 6px; box-shadow: none; }
  .map-modal ::-webkit-scrollbar-corner { background: transparent; }
  .map-modal ::-webkit-scrollbar-thumb {
    min-height: 48px; min-width: 48px; border: 4px solid transparent; border-radius: 999px; background-clip: padding-box;
    background-color: rgba(224,80,143,.5); background-image: none;
  }
  .map-modal ::-webkit-scrollbar-thumb:horizontal { background-image: none; }
  .map-modal ::-webkit-scrollbar-thumb:hover { background-color: rgba(240,123,173,.92); background-image: none; }
  .map-modal ::-webkit-scrollbar-thumb:active { background-color: #E0508F; background-image: none; }
  /* Стрелки-кнопки убираем: колесо, перетаскивание бегунка и клавиши работают как раньше. */
  .map-modal ::-webkit-scrollbar-button,
  .map-modal ::-webkit-scrollbar-button:single-button { display: none; width: 0; height: 0; background: none; }
  /* Бегунок окна обходит скруглённые углы карточки (радиус 28px). */
  .map-modal .address-map-card::-webkit-scrollbar-track { margin: 30px 0; }
  .map-modal .address-map-card::-webkit-scrollbar { width: 14px; }
  .map-modal .address-map-card::-webkit-scrollbar-thumb { border-width: 5px; }
}
@supports (-moz-appearance: none) {
  .map-modal, .map-modal * { scrollbar-width: thin; scrollbar-color: rgba(224,80,143,.55) transparent; }
}

/* =========================================================================
   v8 · Оформление: поля получателя, карандаш/галочка, выбранная служба доставки
   ========================================================================= */

/* Поля имени и телефона — не на всю ширину секции, а по длине содержимого. */


/* Карандаш — заметная ягодная кнопка сайта; «Готово» — светлая кнопка с ягодной галочкой. */
.recipient-field .recipient-edit-btn,
.checkout-page .recipient-edit-btn {
  color: #fff;
  background: linear-gradient(135deg, #E0508F 0%, #C41F66 100%);
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 .35em 1em rgba(214,42,115,.4);
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.recipient-field .recipient-edit-btn:hover,
.checkout-page .recipient-edit-btn:hover {
  background: linear-gradient(135deg, #E0508F 0%, #C41F66 100%);
  border-color: rgba(255,255,255,.55);
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.recipient-field .recipient-edit-btn:active,
.checkout-page .recipient-edit-btn:active { transform: scale(.95); }
.recipient-field .recipient-edit-btn svg,
.checkout-page .recipient-edit-btn svg { stroke-width: 2.2; }
.recipient-field .recipient-edit-btn.is-done,
.checkout-page .recipient-edit-btn.is-done {
  color: #C41F66;
  background: #FFFDF9;
  border-color: #FFFDF9;
  box-shadow: 0 0 0 .2em rgba(214,42,115,.35), 0 .35em 1em rgba(0,0,0,.35);
}
.recipient-field .recipient-edit-btn.is-done:hover,
.checkout-page .recipient-edit-btn.is-done:hover { background: #fff; filter: none; }
.recipient-field .recipient-edit-btn.is-done svg,
.checkout-page .recipient-edit-btn.is-done svg { stroke-width: 2.8; }

/* Выбранная служба доставки: сплошной фон без просвета, ягодная рамка и значок-галочка. */
.delivery-provider-summary { position: relative; }
.delivery-provider-summary:hover:not(:disabled):not(.selected) { background: #FFF9FC; }
.delivery-provider-summary.selected,
.delivery-provider-summary.selected:hover:not(:disabled),
.delivery-option-card.selected {
  background: linear-gradient(135deg, #FFF8FB 0%, #FFE7F1 100%);
  border-color: #D62A73;
  box-shadow: 0 0 0 2px #D62A73, 0 .55em 1.5em rgba(214,42,115,.3);
  color: #2b2430;
  transform: none;
}
.delivery-provider-summary.selected b,
.delivery-provider-summary.selected > strong,
.delivery-option-card.selected b,
.delivery-option-card.selected .delivery-option-price { color: #2b2430; }
.delivery-provider-summary.selected::after,
.delivery-option-card.selected::after {
  content: "";
  position: absolute;
  top: -.6em; right: -.5em;
  width: 1.6em; height: 1.6em;
  border-radius: 50%;
  border: 2px solid #FFFDF9;
  background: #D62A73 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center / 62% no-repeat;
  box-shadow: 0 .2em .6em rgba(196,31,102,.45);
  pointer-events: none;
}


/* v8.1 · Принятое поле (имя/телефон): приглушённое «закрытое» поле с галочкой — менять только через карандаш. */
.checkout-page .recipient-field input.recipient-profile-input.is-readonly:not([type="radio"]):not([type="checkbox"]):not(.recipient-email-input) {
  color: rgba(251,246,238,.82);
  background-color: rgba(255,255,255,.06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbf6ee' stroke-opacity='.6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
  background-size: 1.1em;
  border-color: rgba(255,255,255,.14);
  padding-right: 2.9em;
  cursor: not-allowed;
  box-shadow: none;
}

/* v8.1 · Фильтр служб на карте: выбранная служба — сплошная ягодная кнопка, остальные — глухие тёмные. */
.map-modal .map-overlay-top .map-provider-filter .mf-chip.is-solo,
.map-modal .map-overlay-top .map-provider-filter .mf-chip.is-solo:hover:not(.is-off) {
  position: relative;
  color: #fff !important;
  border: 1px solid #fff !important;
  background: linear-gradient(135deg, #E0508F 0%, #C41F66 100%) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 0 0 1px #fff, 0 0 0 4px rgba(214,42,115,.45), 0 12px 28px rgba(0,0,0,.45) !important;
  text-shadow: none;
  opacity: 1;
  transform: none;
}
.map-modal .map-overlay-top .map-provider-filter .mf-chip.is-solo .mf-logo {
  box-shadow: 0 0 0 2px #fff, 0 2px 7px rgba(0,0,0,.35);
}
.map-modal .map-overlay-top .map-provider-filter .mf-chip .mf-count {
  padding: .25em .55em;
  border-radius: 999px;
  background: transparent;
}
.map-modal .map-overlay-top .map-provider-filter .mf-chip.is-solo .mf-count {
  color: #fff !important;
  background: rgba(255,255,255,.24);
  text-shadow: none;
}
.map-modal .map-overlay-top .map-provider-filter .mf-chip.is-solo::after {
  content: "";
  position: absolute;
  top: -8px; right: -4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #1c1820 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center / 62% no-repeat;
  pointer-events: none;
}
.map-modal .map-overlay-top .map-provider-filter .mf-chip.is-off,
.map-modal .map-overlay-top .map-provider-filter .mf-chip.is-off:hover {
  color: rgba(247,240,229,.6) !important;
  border: 1px solid rgba(247,240,229,.16) !important;
  background: #25212a !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none !important;
  text-shadow: none;
  opacity: 1;
}
.map-modal .map-overlay-top .map-provider-filter .mf-chip.is-off .mf-logo { filter: grayscale(1); opacity: .5; }
.map-modal .map-overlay-top .map-provider-filter .mf-chip.is-off .mf-count { color: rgba(247,240,229,.5) !important; }


/* v8.2 · Получатель: сетка «Имя | Телефон», иконки в полях, карандаш внутри поля. */
.checkout-page .recipient-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); gap: 1.15em 1.2em; align-items: start; }
.checkout-page .recipient-grid > .field { margin: 0; }
.checkout-page .recipient-grid > .checkout-phone-gate { grid-column: 1 / -1; margin: 0; }
.checkout-page .recipient-grid > .recipient-field-email { grid-column: 1 / -1; }
.checkout-page .recipient-grid .recipient-input-row { position: relative; display: block; max-width: none; }
.checkout-page .recipient-grid .recipient-input-row input:is(#checkoutName, #checkoutPhone, #checkoutEmail) {
  height: 3.4em; padding: 0 1em 0 3.1em; border-radius: 1em; font-weight: 600; letter-spacing: .01em;
  background-repeat: no-repeat; background-position: 1.05em center; background-size: 1.2em;
}
.checkout-page .recipient-grid .recipient-input-row:has(.recipient-edit-btn) input:is(#checkoutName, #checkoutPhone, #checkoutEmail) { padding-right: 3.8em; }
.checkout-page .recipient-grid input#checkoutName { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f8894' stroke-opacity='1' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E"); }
.checkout-page .recipient-grid input#checkoutPhone { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f8894' stroke-opacity='1' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E"); }
.checkout-page .recipient-grid input#checkoutEmail { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f8894' stroke-opacity='1' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 7 8.5 6 8.5-6'/%3E%3C/svg%3E"); }
.checkout-page .recipient-grid input#checkoutName.is-readonly { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbf6ee' stroke-opacity='.6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E"); }
.checkout-page .recipient-grid input#checkoutPhone.is-readonly { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbf6ee' stroke-opacity='.6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E"); }
.checkout-page .recipient-grid input#checkoutEmail.is-readonly { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbf6ee' stroke-opacity='.6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 7 8.5 6 8.5-6'/%3E%3C/svg%3E"); }
.checkout-page .recipient-grid input.is-readonly:not(.recipient-email-input) { color: rgba(251,246,238,.9); background-color: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); cursor: default; }
.checkout-page .recipient-grid .recipient-edit-btn { position: absolute; top: .6em; right: .6em; width: 2.2em; height: 2.2em; flex: none; border-radius: 50%; }
.checkout-page .recipient-grid .recipient-edit-btn svg { width: 1.05em; height: 1.05em; }
.checkout-page .recipient-grid .recipient-edit-btn.is-done {
  color: #fff; background: linear-gradient(135deg, #E0508F 0%, #C41F66 100%); border-color: rgba(255,255,255,.4);
  box-shadow: 0 0 0 .22em rgba(214,42,115,.28), 0 .3em .9em rgba(214,42,115,.4);
}
.checkout-page .recipient-grid .recipient-edit-btn.is-done:hover { background: linear-gradient(135deg, #E0508F 0%, #C41F66 100%); filter: brightness(1.08); }


/* v8.3 · Вес товаров в сводке заказа: тихая строка под «Товары» */
.total-row.total-row-weight {
  margin-top: -.55em;
  font-size: .8em;
  font-weight: 500;
  letter-spacing: .01em;
  opacity: .62;
}

/* =========================================================================
   v11 · ЕДИНАЯ ШИРИНА СТРАНИЦ: магазин, главная («О нас»), доставка, оформление заказа
   и личный кабинет — одна колонка ширины баннера магазина.
   1180px на мониторах до ≈2050px по ширине, дальше колонка плавно растёт (57.7vw) до 1800px,
   поэтому на больших экранах всё масштабируется пропорционально. Одна переменная на все страницы.
   ========================================================================= */

/* Магазин, карточка товара и оформление заказа делят общий <main>.
   Сетка товаров, «Новинки» и всё прочее в магазине остаются широкими, как раньше (≈1.2 × ширины баннера),
   а баннер, плитки категорий, заголовок категории, карточка товара и оформление заказа — в единой колонке. */
main:has(> #shopView) { max-width: calc(var(--shop-wide-w) + 68px); }
main:has(> #checkoutView[style*="display: block"]) { max-width: calc(var(--shop-wide-w) + 68px); }
#shopView .marketing-slide, #shopView .cat-grid, #shopView .category-page-head { box-sizing: border-box; width: var(--page-w); max-width: 100%; margin-left: auto; margin-right: auto; }
#productView, #checkoutView { box-sizing: border-box; width: var(--page-w); max-width: 100%; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }
#productView .product-page, #productView .product-description-section { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
#productView > .back-btn { margin-left: 0; }
.checkout-page { max-width: none; padding-left: 0; padding-right: 0; }

/* «О нас» и «Доставка» */
.content-page-wide { width: var(--page-w); max-width: none; padding-left: 0; padding-right: 0; box-sizing: border-box; }
.about-docs-cta { max-width: var(--page-w); }
.content-page-wide .marketing-slide, .content-page-wide .hero-video { width: 100%; max-width: none; margin-left: 0; margin-right: 0; box-sizing: border-box; }

/* «О нас»: тот же отступ от шапки до первого баннера, что и на /shop (32px) */
.content-page.about-page { padding-top: 32px; }

/* === Плитка категории StrazBerry (редактор карточек в админке) ===
   Сама плитка (рамка, логотип, заголовок, фото) рисуется компонентом category-tile.js и оформляется
   в category-tile.css — тот же компонент показывается в админке. Здесь — только то, что относится
   к карточке-кнопке на витрине. Прежние категории (готовые баннеры) этого блока не касаются. */
.cat-card--tile {
  background: #000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .48), 0 0 14px rgba(255, 25, 150, .1);
}
.cat-card--tile:hover {
  box-shadow: 0 16px 34px rgba(0, 0, 0, .55), 0 0 26px rgba(255, 25, 150, .3);
}
/* Подъём плитки — только сдвиг, без масштабирования: общее правило .cat-card:hover увеличивает карточку
   на 1,5 %, из-за чего буквы заголовка каждый кадр перерисовывались и «дрожали». Тот же сдвиг вверх
   на 6 px, та же пружинка — выглядит так же, но текст остаётся резким. */
.cat-card--tile:hover,
.cat-card--tile:focus-visible {
  transform: translate3d(0, -6px, 0) !important;
}
.cat-card--tile:active {
  transform: translate3d(0, -2px, 0) !important;
}
/* Общий блик по всей карточке — тот же, что на баннерах (.cat-card::after выше): полоса пробегает слева
   направо по всей плитке. Здесь он выполнен через transform (то же движение, те же 0,75 с и тот же вид),
   чтобы шёл на видеокарте и ровно. 575 % собственной ширины полосы = путь «left: -85 % → 145 %». */
.cat-card--tile::after {
  left: -85%;
  transform: translate3d(0, 0, 0) skewX(-22deg);
  transition: transform 0.75s cubic-bezier(0.22, 0.8, 0.28, 1);
}
.cat-card--tile:hover::after {
  left: -85%;
  transform: translate3d(575%, 0, 0) skewX(-22deg);
}
.cat-card--tile.active {
  box-shadow: 0 0 0 3px var(--berry), 0 14px 30px rgba(152, 28, 80, .3);
}
@media (prefers-reduced-motion: reduce) {
  .cat-card--tile, .cat-card--tile::after { transition: none; }
}