/* ============================================================
   Baron-Sigaron — демо-прототип
   Светлая кремовая база + тёмные фирменные зоны (шапка, баннер,
   итог корзины, подвал, «Заявка отправлена»)
   ============================================================ */

:root {
  /* палитра */
  --cream:        #F5F1E8;
  --cream-soft:   #FAF7F0;
  --white:        #FFFFFF;
  --ink:          #172318;
  --ink-2:        #1D2B1E;
  --ink-deep:     #0D150D;
  --muted:        #6B7263;
  --gold:         #9B875B;
  --gold-bright:  #C9B37E;
  --amber:        #A66F2A;
  --cream-text:   #E6EAE4;
  --cream-dim:    #B9C0B4;

  --line:        rgba(23, 35, 24, .10);
  --line-soft:   rgba(23, 35, 24, .07);
  --gold-line:   rgba(201, 179, 126, .38);
  --gold-line-d: rgba(155, 135, 91, .30);

  --err: #B4552D;
  --ok:  #4C7D57;

  /* радиусы */
  --r-card: 20px;
  --r-block: 26px;
  --r-btn: 14px;

  /* тени */
  --sh-card: 0 1px 2px rgba(23,35,24,.05), 0 10px 28px -12px rgba(23,35,24,.18);
  --sh-card-hover: 0 2px 4px rgba(23,35,24,.06), 0 18px 40px -14px rgba(23,35,24,.28);
  --sh-pop: 0 12px 40px -8px rgba(13,21,13,.5);
  --glow-gold: 0 0 34px rgba(201,179,126,.16);

  --hdr-h: 74px;
  --font: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ---------- база ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(1200px 500px at 85% -80px, rgba(201,179,126,.14), transparent 60%),
    linear-gradient(180deg, #F7F3EA 0%, var(--cream) 34%, #F1ECDF 100%);
  min-height: 100vh;
  font-size: 15.5px;
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
[v-cloak] { display: none; }
h1, h2, h3, h4, h5, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button { font-family: inherit; }
::selection { background: rgba(201,179,126,.45); }

.container { max-width: 1280px; margin-inline: auto; padding-inline: clamp(14px, 3vw, 28px); }

.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic--gold { color: var(--gold); }
.ic--lg { width: 23px; height: 23px; }
.ic--ink { color: var(--ink); }

/* заголовки секций с золотой подложкой */
.h-line {
  font-size: clamp(21px, 2.6vw, 27px);
  font-weight: 800;
  letter-spacing: -.02em;
  position: relative;
  padding-bottom: 10px;
}
.h-line::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 54px; height: 3.5px; border-radius: 4px;
  background: linear-gradient(90deg, var(--gold-bright), rgba(155,135,91,0));
}

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

/* ============================================================
   ТЁМНАЯ ШАПКА
   ============================================================ */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background:
    radial-gradient(520px 220px at 82% -60px, rgba(201,179,126,.15), transparent 70%),
    url('../img/dark-texture.svg') center 45% / 1500px auto no-repeat,
    linear-gradient(180deg, #233324 0%, var(--ink) 60%, #131D13 100%);
  color: var(--cream-text);
}
.hdr::before { /* лёгкая виньетка снизу для мягкого стыка */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10,16,10,.35) 100%);
  pointer-events: none;
}
.hdr__in { position: relative; display: flex; align-items: center; gap: 16px; min-height: var(--hdr-h); padding-block: 10px; }
.hdr__hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent 4%, var(--gold-line-d) 30%, var(--gold-line) 50%, var(--gold-line-d) 70%, transparent 96%);
}

.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand__logo { width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--gold-line), var(--glow-gold); }
.brand__text { display: flex; flex-direction: column; line-height: 1.18; }
.brand__name { font-weight: 800; font-size: 17.5px; letter-spacing: .045em; color: var(--white); text-transform: uppercase; }
.brand__tag { font-size: 9.5px; font-weight: 700; letter-spacing: .34em; text-transform: uppercase; color: var(--gold-bright); }

.hdr__search { flex: 1 1 auto; max-width: 460px; margin-left: auto; }

.cart-btn {
  position: relative; flex: none;
  background: rgba(230,234,228,.07) !important;
  border: 1px solid var(--gold-line-d);
  color: var(--cream-text) !important;
  border-radius: 999px !important;
  padding: 9px 16px !important;
  gap: 8px;
  transition: border-color .2s, background-color .2s;
}
.cart-btn:hover { border-color: var(--gold-line); background: rgba(230,234,228,.11) !important; }
.cart-btn__label { font-weight: 700; font-size: 13.5px; letter-spacing: .02em; }
.cart-btn__badge {
  position: absolute; top: -5px; right: -3px;
  min-width: 20px; height: 20px; padding-inline: 5px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: var(--ink);
  font-size: 11.5px; font-weight: 800; line-height: 20px;
  text-align: center;
  display: block;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  animation: pop .25s ease;
}
@keyframes pop { 50% { transform: scale(1.25); } }

/* поле поиска (Quasar QInput, тёмное) */
.search-field { width: 100%; }
.search-field .q-field__control { border-radius: 999px !important; height: 44px; background: rgba(230,234,228,.06); }
.search-field .q-field__control:after { display: none; }
.search-field .q-field__control:before { border: 1px solid rgba(230,234,228,.16) !important; transition: border-color .2s, box-shadow .2s; }
.search-field .q-field__control:hover:before { border-color: rgba(201,179,126,.4) !important; }
.search-field.q-field--focused .q-field__control:before {
  border-color: var(--gold-bright) !important;
  box-shadow: 0 0 0 3px rgba(201, 179, 126, .14);
}
.search-field .q-field__label { color: var(--cream-dim) !important; font-weight: 500; }
.search-field.q-field--floating .q-field__label { color: var(--gold-bright) !important; }
.search-field .q-field__native { color: var(--cream-text); font-weight: 600; font-size: 14.5px; padding-left: 2px; }
.search-field .q-field__prepend { color: var(--gold-bright); padding-left: 12px; }
.search-field .q-field__append { padding-right: 8px; }
.search-field .q-field__marginal { color: var(--gold); }

.icon-btn {
  width: 30px; height: 30px; border-radius: 9px;
  border: 0; background: transparent; color: var(--muted);
  display: grid; place-items: center; cursor: pointer;
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: rgba(23,35,24,.07); color: var(--ink); }
.icon-btn--dark { color: var(--cream-dim); }
.icon-btn--dark:hover { background: rgba(230,234,228,.12); color: var(--white); }
.icon-btn .ic { width: 17px; height: 17px; stroke-width: 2; }

/* ============================================================
   ИМИДЖЕВЫЙ БАННЕР (тёмный, компактный)
   ============================================================ */
.hero {
  position: relative;
  margin-top: clamp(14px, 2vw, 20px);
  border-radius: var(--r-block);
  overflow: hidden;
  color: var(--cream-text);
  background:
    url('../img/dark-texture.svg') center / cover no-repeat,
    linear-gradient(120deg, #202F20 0%, var(--ink) 45%, #0F180F 100%);
  box-shadow: var(--sh-pop);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(18px, 2.6vw, 30px) clamp(18px, 3vw, 36px);
}
.hero::after { /* мягкое золотое свечение к логотипу */
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(460px 300px at 86% 45%, rgba(201,179,126,.16), transparent 70%);
  pointer-events: none;
}
.hero__body { position: relative; z-index: 1; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--gold-bright);
  border: 1px solid var(--gold-line-d);
  background: rgba(201,179,126,.08);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 13px;
}
.hero__badge .ic { width: 14px; height: 14px; }
.hero__title {
  font-size: clamp(20px, 2.6vw, 31px);
  font-weight: 800; line-height: 1.15; letter-spacing: -.02em;
  color: var(--white);
  margin-bottom: 11px;
}
.hero__sub { max-width: 76ch; color: var(--cream-dim); font-size: clamp(13px, 1.15vw, 14.5px); line-height: 1.5; margin-bottom: 16px; }
.hero__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero__actions .btn-gold.q-btn { padding: 9px 18px !important; font-size: 13.5px; }
.hero__stats { color: var(--cream-dim); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.hero__art {
  position: relative; z-index: 1;
  border-radius: 50%;
  padding: 8px;
  background: rgba(230,234,228,.05);
  border: 1px solid var(--gold-line);
  box-shadow: var(--glow-gold), 0 18px 44px -18px rgba(0,0,0,.6);
}
.hero__art img { display: block; width: clamp(118px, 14vw, 188px); aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; }

/* ============================================================
   КНОПКИ (Quasar QBtn + кастомные классы)
   ============================================================ */
.q-btn { font-family: var(--font); }
.btn-gold .q-btn__content, .btn-dark .q-btn__content, .btn-buy .q-btn__content,
.cart-btn .q-btn__content, .link-back .q-btn__content, .filters__reset .q-btn__content {
  display: flex; align-items: center; gap: 8px;
}
.btn-gold.q-btn {
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%) !important;
  color: var(--ink) !important;
  border-radius: var(--r-btn) !important;
  font-weight: 800; font-size: 14.5px; letter-spacing: .015em;
  padding: 12px 22px !important;
  gap: 9px;
  box-shadow: 0 10px 24px -10px rgba(155,135,91,.65);
  transition: filter .18s, box-shadow .18s, transform .18s;
}
.btn-gold.q-btn:hover { filter: brightness(1.05); box-shadow: 0 14px 30px -10px rgba(155,135,91,.75); }
.btn-gold.q-btn:active { transform: translateY(1px); }
.btn-gold--xl.q-btn { width: 100%; padding: 15px 22px !important; font-size: 15.5px; border-radius: 16px !important; }
.btn-gold.q-btn.disabled { opacity: .45; filter: saturate(.4); box-shadow: none; }

.btn-dark.q-btn {
  background: linear-gradient(180deg, var(--ink-2), var(--ink)) !important;
  color: var(--cream-text) !important;
  border-radius: var(--r-btn) !important;
  font-weight: 700; font-size: 14.5px;
  padding: 12px 22px !important;
  box-shadow: 0 10px 22px -10px rgba(23,35,24,.55);
  transition: filter .18s;
}
.btn-dark.q-btn:hover { filter: brightness(1.22); }

.btn-ghost.q-btn {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--line);
  border-radius: var(--r-btn) !important;
  font-weight: 700; font-size: 14.5px;
  padding: 11px 22px !important;
}
.btn-ghost.q-btn:hover { border-color: var(--gold-line-d); background: rgba(155,135,91,.06) !important; }

.link-back.q-btn {
  color: var(--gold) !important; font-weight: 700; font-size: 14px;
  padding: 6px 10px 6px 4px !important; border-radius: 10px !important;
  align-self: flex-start;
}
.link-back.q-btn:hover { background: rgba(155,135,91,.1) !important; }

/* карточная связка «количество + Купить» */
.card__buy { display: flex; align-items: stretch; gap: 7px; }
.qty-mini {
  flex: none;
  display: inline-flex; align-items: center;
  background: #EDF0E8;
  border: 1px solid rgba(23, 35, 24, .13);
  border-radius: 999px;
  padding: 3px;
}
.qty-mini__btn {
  width: 27px; height: 27px;
  border-radius: 50%; border: 0;
  background: transparent; color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  transition: background .15s, color .15s, opacity .15s;
  -webkit-tap-highlight-color: transparent;
}
.qty-mini__btn:hover:not(:disabled) { background: rgba(23,35,24,.09); }
.qty-mini__btn:disabled { opacity: .28; cursor: default; }
.qty-mini__btn .ic { width: 13px; height: 13px; stroke-width: 2.3; }
.qty-mini__n { min-width: 22px; text-align: center; font-weight: 800; font-size: 13.5px; font-variant-numeric: tabular-nums; }

.btn-buy.q-btn {
  flex: 1; min-width: 0; min-height: 37px;
  background: linear-gradient(180deg, var(--ink-2), var(--ink)) !important;
  color: var(--cream-text) !important;
  border-radius: 999px !important;
  font-weight: 700; font-size: 13px;
  padding: 6px 12px !important;
  transition: filter .16s;
}
.btn-buy.q-btn .ic { width: 15px; height: 15px; color: var(--gold-bright); }
.btn-buy.q-btn:hover { filter: brightness(1.25); }
.btn-buy.q-btn:active { filter: brightness(.92); }

/* ============================================================
   КАТЕГОРИИ — липкая полоса, одна строка + «Другие»
   ============================================================ */
.cats-wrap {
  position: sticky;
  top: var(--hdr-h); /* прилипает сразу под шапкой */
  z-index: 40;
  margin-top: clamp(14px, 2.2vw, 22px);
  background: rgba(245, 241, 232, .78);          /* полупрозрачный крем */
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);    /* сквозь неё видны силуэты контента */
  border-block: 1px solid rgba(23, 35, 24, .08);
}
.cats-bar { position: relative; }
.cats {
  display: flex;
  flex-wrap: wrap;      /* в свёрнутом виде первая строка обрезается max-height */
  align-items: center;
  gap: 8px;
  padding-block: 10px 12px;
}
.cats-wrap:not(.cats-wrap--open) .cats {
  max-height: 50px;     /* видим только первую строку (pad-top 10 + чип ~40) */
  overflow: hidden;
  padding-bottom: 0;
}
/* затухание чипов под ссылкой «Другие» */
.cats-wrap:not(.cats-wrap--open) .cats-bar::after {
  content: '';
  position: absolute; right: 0; top: 0; bottom: 0; width: 170px;
  background: linear-gradient(90deg, rgba(245,241,232,0), rgba(245,241,232,.9) 60%);
  pointer-events: none;
}
.cats-bar .cats { min-height: 39px; } /* строка не схлопывается при отсутствии чипов */
.cat-chip {
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 13.5px; font-weight: 700;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
  -webkit-tap-highlight-color: transparent;
}
.cat-chip__n { font-size: 11px; font-weight: 700; color: var(--muted); background: rgba(23,35,24,.06); border-radius: 999px; padding: 1px 7px; }
.cat-chip:hover { border-color: var(--gold-line-d); box-shadow: 0 6px 16px -8px rgba(23,35,24,.25); }
.cat-chip--on {
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  border-color: var(--ink);
  color: var(--gold-bright);
  box-shadow: 0 10px 22px -10px rgba(23,35,24,.55);
}
.cat-chip--on .cat-chip__n { color: var(--gold-bright); background: rgba(201,179,126,.16); }

.cats__more {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: none; cursor: pointer;
  font-family: var(--font);
  font-size: 13px; font-weight: 700; color: var(--gold);
  padding: 8px 2px;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s;
}
.cats__more:hover { color: var(--ink); }
.cats__more .ic { width: 15px; height: 15px; }
.cats__more--flip { transform: rotate(180deg); }
/* в свёрнутом виде ссылка прижата к правому краю строки */
.cats-wrap:not(.cats-wrap--open) .cats__more {
  position: absolute;
  right: clamp(14px, 3vw, 28px);
  top: 50%; transform: translateY(-50%);
  z-index: 1;
  padding: 8px 4px 8px 40px;
  background: linear-gradient(90deg, rgba(245,241,232,0), var(--cream) 42%);
}

/* ============================================================
   ФИЛЬТРЫ КАТАЛОГА
   ============================================================ */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  box-shadow: var(--sh-card);
  padding: 12px 14px;
  margin-top: clamp(12px, 1.8vw, 18px);
}
.filters__price { display: flex; gap: 8px; }
.filters .filters__price .f-field { width: 132px; }
.filters .filters__sort { width: 224px; }
.filters .filters__pp { width: 160px; }
.filters .filters__q { width: 300px; }
.filters .filters__q .q-field__append { display: flex; } /* свой слот: крестик очистки */
.filters__q-clear { width: 24px; height: 24px; }
.filters__q-clear .ic { width: 14px; height: 14px; }
.filters__reset.q-btn { margin-left: auto; padding: 9px 16px !important; font-size: 13px; }
.filters .q-field__control { border-radius: 12px; }

/* нативный селект в стиле полей Quasar */
.f-sel {
  position: relative;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cream-soft);
  transition: border-color .18s, box-shadow .18s;
}
.f-sel:hover { border-color: var(--gold-line-d); }
.f-sel:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(155, 135, 91, .14); }
.f-sel__cap {
  position: absolute; top: 5px; left: 12px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
  color: #7d8375; pointer-events: none;
}
.f-sel select {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 100%;
  border: 0; outline: none; background: transparent;
  padding: 14px 30px 0 11px;
  font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--ink);
  cursor: pointer;
}
.f-sel__chev {
  position: absolute; right: 10px; top: 50%;
  width: 15px; height: 15px;
  transform: translateY(-50%);
  color: var(--gold);
  pointer-events: none;
}
.filters .q-menu { border-radius: 14px; }

/* ============================================================
   СЕТКА ТОВАРОВ (светлая зона)
   ============================================================ */
#catalog { scroll-margin-top: calc(var(--hdr-h) + 132px); padding-bottom: 10px; }
.grid-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 10px; margin-bottom: 18px; }
.grid-head__n { color: var(--muted); font-size: 13.5px; font-weight: 600; }

.grid {
  display: grid;
  gap: clamp(12px, 1.6vw, 18px);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px)  { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1240px) { .grid { grid-template-columns: repeat(5, 1fr); } }

.card {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  padding: 10px 12px 12px;
  display: flex; flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
@media (hover: hover) {
  .card:hover { transform: translateY(-3px); box-shadow: var(--sh-card-hover); border-color: var(--gold-line-d); }
}
.card__media {
  position: relative;
  border-radius: 14px;
  background: radial-gradient(120% 100% at 50% 0%, #FBF8F1 0%, #F3EEE2 100%);
  display: grid; place-items: center;
  padding: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
.card__media img {
  width: 100%; max-width: 132px;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  mix-blend-mode: multiply; /* белый фон фото растворяется в кремовой подложке */
  transition: transform .25s ease;
}
@media (hover: hover) { .card:hover .card__media img { transform: scale(1.045); } }
.card__low-badge {
  position: absolute; top: 8px; left: 8px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 9px;
  color: var(--ok); border: 1px solid rgba(76,125,87,.35); background: rgba(255,252,246,.92);
}

.card__name {
  font-size: 14.5px; font-weight: 700; line-height: 1.28;
  letter-spacing: -.005em;
  min-height: 2.56em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 10px;
}

.card__foot { margin-top: auto; display: flex; flex-direction: column; gap: 9px; }
.price { display: flex; align-items: baseline; font-variant-numeric: tabular-nums; }
.price b { font-size: 19.5px; font-weight: 800; letter-spacing: -.02em; }
.price span { font-size: 12.5px; font-weight: 700; color: var(--gold); white-space: pre; }

/* ============================================================
   ПАГИНАЦИЯ
   ============================================================ */
.pager {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  padding: clamp(22px, 3vw, 32px) 0 10px;
}
.pager__page {
  min-width: 40px; height: 40px; padding-inline: 6px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 700; font-size: 14px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color .16s, box-shadow .16s, background .16s, color .16s;
  -webkit-tap-highlight-color: transparent;
}
.pager__page:hover { border-color: var(--gold-line-d); box-shadow: 0 6px 16px -8px rgba(23,35,24,.25); }
.pager__page--on {
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  border-color: var(--ink);
  color: var(--gold-bright);
  box-shadow: 0 10px 22px -10px rgba(23,35,24,.55);
}
.pager__nav {
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--gold);
  display: grid; place-items: center;
  cursor: pointer;
  transition: border-color .16s, color .16s, opacity .16s;
}
.pager__nav .ic { width: 17px; height: 17px; }
.pager__nav:hover:not(:disabled) { border-color: var(--gold-line-d); color: var(--ink); }
.pager__nav:disabled { opacity: .32; cursor: default; }

/* ============================================================
   ТРИ ШАГА ДО ЗАКАЗА
   ============================================================ */
.steps {
  padding-block: clamp(36px, 5.5vw, 64px) clamp(8px, 1.5vw, 16px);
  scroll-margin-top: calc(var(--hdr-h) + 140px);
}
.steps__overline {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
}
.steps__overline::before { content: ''; width: 34px; height: 1.5px; background: var(--gold); opacity: .7; }
.steps h2 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: clamp(28px, 3.8vw, 46px);
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 10px 0 clamp(20px, 3vw, 30px);
}
.steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.8vw, 22px);
}
.step-card {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(23,35,24,.04), 0 14px 30px -20px rgba(23,35,24,.2);
  padding: clamp(20px, 2.6vw, 30px);
}
.step-card__n {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: clamp(38px, 4.2vw, 54px);
  line-height: 1;
  background: linear-gradient(130deg, #D6C294, var(--gold) 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.step-card h3 { font-size: 16.5px; font-weight: 800; margin: 16px 0 8px; letter-spacing: -.01em; }
.step-card p { color: var(--muted); font-size: 14px; line-height: 1.55; }

/* пустой поиск / пустая корзина */
.empty {
  text-align: center;
  padding: clamp(36px, 7vw, 64px) 18px;
  max-width: 520px;
  margin-inline: auto;
}
.empty--card {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-block);
  box-shadow: var(--sh-card);
  margin-block: 22px 40px;
}
.empty__ring {
  display: grid; place-items: center;
  width: 74px; height: 74px;
  margin-inline: auto; margin-bottom: 18px;
  border-radius: 50%;
  border: 1.5px dashed var(--gold-line);
  background: rgba(201,179,126,.07);
  box-shadow: var(--glow-gold);
}
.empty h3 { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.empty p { color: var(--muted); font-size: 14.5px; margin-bottom: 20px; overflow-wrap: anywhere; }
.empty__btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   КОРЗИНА
   ============================================================ */
.cart-page { padding-block: 8px 40px; }
.page-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.cart-grid { display: grid; grid-template-columns: 1.6fr .9fr; gap: clamp(16px, 2.4vw, 26px); align-items: start; }
@media (max-width: 900px) { .cart-grid { grid-template-columns: 1fr; } }

.cart-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.cart-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 13px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  box-shadow: var(--sh-card);
  padding: 11px 13px;
}
.cart-row__media {
  width: 64px; height: 78px;
  border-radius: 12px;
  background: radial-gradient(120% 100% at 50% 0%, #FBF8F1, #F3EEE2);
  display: grid; place-items: center; padding: 5px;
}
.cart-row__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cart-row__info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cart-row__name { font-size: 14.5px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cart-row__unit { font-size: 12.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.cart-row__side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.cart-row__sum { font-size: 15.5px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

.stepper {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--gold-line-d);
  border-radius: 999px;
  padding: 3px;
  margin-top: 7px;
  width: max-content;
  background: var(--cream-soft);
}
.step-btn {
  width: 30px; height: 30px;
  border-radius: 50%; border: 0;
  background: var(--white);
  color: var(--gold);
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(23,35,24,.14);
  transition: color .15s, box-shadow .15s, opacity .15s;
  -webkit-tap-highlight-color: transparent;
}
.step-btn:hover:not(:disabled) { color: var(--ink); box-shadow: 0 2px 6px rgba(23,35,24,.2); }
.step-btn:disabled { opacity: .32; cursor: default; }
.step-btn .ic { width: 15px; height: 15px; stroke-width: 2.1; }
.stepper__n { min-width: 30px; text-align: center; font-weight: 800; font-size: 14.5px; font-variant-numeric: tabular-nums; }

/* форма */
.form-card {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  padding: clamp(16px, 2.4vw, 24px);
}
.form-card__title { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.form-card__sub { color: var(--muted); font-size: 13.5px; margin-bottom: 14px; }
.ship-note {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(120deg, rgba(201,179,126,.16), rgba(201,179,126,.05));
  border: 1px solid var(--gold-line-d);
  border-radius: 12px;
  padding: 11px 14px;
  margin-bottom: 14px;
  font-size: 13.5px; font-weight: 800; color: var(--ink);
}
.ship-note .ic { width: 19px; height: 19px; color: var(--gold); }
/* переключатель способа доставки */
.ship-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.ship-opt {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--gold-line-d);
  border-radius: 12px;
  background: var(--cream-soft);
  padding: 11px 13px;
  font-family: var(--font);
  font-size: 13px; font-weight: 700; color: var(--ink);
  cursor: pointer;
  transition: border-color .18s, background .18s, box-shadow .18s;
  -webkit-tap-highlight-color: transparent;
}
.ship-opt .ic { width: 17px; height: 17px; color: var(--gold); flex: none; }
.ship-opt:hover { border-color: var(--gold); }
.ship-opt--on {
  border-color: var(--gold);
  background: linear-gradient(120deg, rgba(201,179,126,.18), rgba(201,179,126,.07));
  box-shadow: 0 0 0 3px rgba(155,135,91,.12);
}
.form-card__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
@media (max-width: 640px) { .form-card__grid { grid-template-columns: 1fr; gap: 4px; } }

/* поля Quasar на светлом */
.f-field { width: 100%; }
.f-field--wide { grid-column: 1 / -1; }
.f-field .q-field__control { border-radius: 14px; background: var(--cream-soft); }
.f-field .q-field__control:after { display: none; } /* двойная рамка Quasar не нужна */
.f-field .q-field__control:before { border-color: var(--line) !important; transition: border-color .18s, box-shadow .18s; }
.f-field .q-field__control:hover:before { border-color: var(--gold-line-d) !important; }
.f-field.q-field--focused .q-field__control:before {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(155, 135, 91, .14);
}
.f-field .q-field__label { font-weight: 600; color: #7d8375; }
.f-field .q-field__native { font-weight: 600; }
.f-field.q-field--error .q-field__control:before { border-color: var(--err) !important; }
.f-field .q-field__messages { color: var(--err); font-weight: 600; }
.f-field .q-field__hint { color: var(--muted); }
.f-field .q-field__append { display: none; } /* иконка ошибки Quasar требует icon-font — не используем */

/* ТЁМНЫЙ ИТОГОВЫЙ БЛОК */
.summary {
  position: sticky; top: calc(var(--hdr-h) + 14px);
  border-radius: var(--r-block);
  padding: clamp(20px, 2.6vw, 28px);
  color: var(--cream-text);
  background:
    url('../img/dark-texture.svg') center / cover no-repeat,
    linear-gradient(150deg, #22311F 0%, var(--ink) 50%, #0E160E 100%);
  box-shadow: var(--sh-pop);
  border: 1px solid rgba(201,179,126,.22);
}
.summary::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(420px 220px at 85% -10%, rgba(201,179,126,.16), transparent 70%);
  pointer-events: none;
}
.summary > * { position: relative; }
.summary__rows { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
.summary__row { display: flex; justify-content: space-between; align-items: baseline; font-size: 15.5px; }
.summary__row span { color: var(--cream-dim); font-weight: 600; }
.summary__row b { font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; color: var(--white); }
.summary__divider { height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line), transparent); margin-block: 4px 14px; }
.summary__total-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.summary__label { font-size: 16px; font-weight: 700; letter-spacing: .04em; color: var(--cream-dim); }
.summary__total {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, #E4D3A4, var(--gold-bright) 55%, #A98F58);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 12px rgba(201,179,126,.25));
  white-space: nowrap;
}
.summary__note { font-size: 12.5px; color: var(--cream-dim); margin-block: 10px 18px; }
.summary__safe { display: flex; align-items: center; gap: 7px; justify-content: center; font-size: 12px; color: var(--cream-dim); margin-top: 12px; }
.summary__safe .ic { width: 14px; height: 14px; color: var(--gold); }
.summary .btn-gold--xl { box-shadow: 0 14px 34px -12px rgba(201,179,126,.55), var(--glow-gold); }

/* ============================================================
   ЗАЯВКА ОТПРАВЛЕНА (целиком тёмная)
   ============================================================ */
.success {
  min-height: calc(100vh - var(--hdr-h));
  display: grid;
  color: var(--cream-text);
  background:
    url('../img/dark-texture.svg') center / cover no-repeat,
    radial-gradient(900px 500px at 50% -10%, #24361F 0%, transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-deep) 100%);
}
.success__in {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-block: clamp(44px, 8vh, 90px) clamp(40px, 7vh, 80px);
  max-width: 560px;
}
.success__emblem { width: clamp(108px, 16vw, 132px); margin-bottom: 26px; filter: drop-shadow(0 0 26px rgba(201,179,126,.35)); }
.em-ring { fill: none; stroke: var(--gold-line); stroke-width: 1.6; }
.em-ring--dash { stroke: var(--gold-line-d); stroke-dasharray: 3 7; stroke-linecap: round; }
.em-check { fill: none; stroke: var(--gold-bright); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.success__title { font-size: clamp(28px, 5vw, 40px); font-weight: 800; letter-spacing: -.02em; color: var(--white); margin-bottom: 10px; }
.success__num { font-size: 15px; color: var(--cream-dim); margin-bottom: 14px; }
.success__num b { color: var(--gold-bright); font-weight: 800; letter-spacing: .04em; }
.success__text { color: var(--cream-dim); max-width: 40ch; margin-bottom: 26px; }
.success__card {
  width: 100%;
  border: 1px solid rgba(201,179,126,.25);
  border-radius: 20px;
  background: rgba(230,234,228,.045);
  padding: 18px 20px;
  margin-bottom: 26px;
  text-align: left;
}

/* ============================================================
   ПОДВАЛ (тёмный, v2)
   ============================================================ */
.ftr {
  margin-top: clamp(26px, 4vw, 46px);
  border-radius: 30px 30px 0 0;
  color: var(--cream-text);
  background:
    url('../img/dark-texture.svg') center 30% / 1600px auto no-repeat,
    linear-gradient(180deg, #22321F 0%, var(--ink-deep) 100%);
  border-top: 1px solid var(--gold-line-d);
  box-shadow: 0 -20px 50px -30px rgba(23,35,24,.4);
}
.ftr__in {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1.25fr;
  gap: clamp(20px, 3vw, 44px);
  padding-block: clamp(30px, 4.2vw, 50px) 26px;
}
.ftr__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 300px; }
.ftr__brand img { width: 98px; height: 98px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--gold-line-d), var(--glow-gold); }
.ftr__brand b { font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--white); }
.ftr__brand p { font-size: 13px; line-height: 1.55; color: var(--cream-dim); }
.ftr__col { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.ftr__col h5 { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-bright); margin-bottom: 4px; }
.ftr__col a, .ftr__col .ftr__lnk {
  border: 0; background: none; padding: 0; margin: 0;
  font-family: var(--font);
  font-size: 13.5px; font-weight: 600; color: var(--cream-dim);
  cursor: pointer; text-align: left;
  transition: color .15s;
}
.ftr__col a:hover, .ftr__col .ftr__lnk:hover { color: var(--gold-bright); }
.ftr__link { display: inline-flex; align-items: center; gap: 8px; }
.ftr__link .ic { width: 15px; height: 15px; color: var(--gold); }
.ftr__contacts .ftr__phone { font-size: 18px; font-weight: 800; color: var(--white); letter-spacing: .01em; }
.ftr__contacts .ftr__phone:hover { color: var(--gold-bright); }
.ftr__hours { font-size: 12.5px; color: rgba(185,192,180,.75); }
.ftr__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-block: 18px 24px;
  border-top: 1px solid rgba(230,234,228,.08);
  font-size: 12px; color: rgba(185,192,180,.75);
}
.ftr__age {
  display: inline-flex; align-items: center; gap: 12px;
  max-width: 520px; line-height: 1.45; text-align: left;
}
.ftr__age b {
  flex: none;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 1.5px solid var(--gold-line); border-radius: 50%;
  color: var(--gold-bright); font-weight: 800; font-size: 12.5px;
}

/* ============================================================
   МОБИЛЬНАЯ ПЛАШКА КОРЗИНЫ
   ============================================================ */
.thumbbar {
  position: fixed; z-index: 60;
  left: 14px; right: 14px;
  bottom: calc(12px + env(safe-area-inset-bottom));
}
.thumbbar__btn {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  border: 1px solid rgba(201,179,126,.3);
  border-radius: 18px;
  padding: 11px 12px 11px 16px;
  color: var(--cream-text);
  background:
    linear-gradient(150deg, rgba(30,44,31,.97), rgba(13,21,13,.97));
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 44px -12px rgba(13,21,13,.65), var(--glow-gold);
  cursor: pointer;
  text-align: left;
}
.thumbbar__info { display: flex; flex-direction: column; line-height: 1.2; flex: 1; }
.thumbbar__info b { font-size: 16.5px; font-weight: 800; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.thumbbar__info small { font-size: 11.5px; color: var(--cream-dim); font-weight: 600; }
.thumbbar__cta {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: var(--ink);
  font-size: 13.5px; font-weight: 800;
  border-radius: 12px;
  padding: 11px 18px;
  box-shadow: 0 8px 20px -8px rgba(201,179,126,.7);
}
.rise-enter-active, .rise-leave-active { transition: transform .3s ease, opacity .3s ease; }
.rise-enter-from, .rise-leave-to { transform: translateY(20px); opacity: 0; }

/* тост */
.toast {
  position: fixed; z-index: 90;
  top: calc(var(--hdr-h) + 12px);
  left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  background: rgba(23,35,24,.96);
  color: var(--cream-text);
  border: 1px solid var(--gold-line-d);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 13.5px; font-weight: 700;
  box-shadow: 0 14px 34px -10px rgba(13,21,13,.6);
}
.toast .ic { width: 16px; height: 16px; color: var(--gold-bright); }
.toast-enter-active, .toast-leave-active { transition: transform .25s ease, opacity .25s ease; }
.toast-enter-from, .toast-leave-to { transform: translate(-50%, -8px); opacity: 0; }

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 900px) {
  .summary { position: static; }
  .steps__grid { grid-template-columns: 1fr; }
  .step-card { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: baseline; }
  .step-card__n { grid-row: 1 / 3; }
  .step-card h3 { grid-column: 2; margin-top: 0; }
  .step-card p { grid-column: 2; }
}
@media (max-width: 640px) {
  /* на мобильных — только левая колонка на всю ширину, без логотипа */
  .hero { grid-template-columns: 1fr; }
  .hero__art { display: none; }
}
@media (max-width: 819px) {
  :root { --hdr-h: 118px; }
  .hdr__in { flex-wrap: wrap; row-gap: 4px; padding-block: 10px 12px; }
  .brand { margin-right: auto; }
  .hdr__search { order: 3; flex-basis: 100%; max-width: none; }
  .cart-btn__label { display: none; }
  .cart-btn { padding: 10px 13px !important; }
  .brand__name { font-size: 16px; }
  /* компактные чипы, чтобы липкая полоса не съедала экран */
  .cats { gap: 6px; padding-block: 8px 10px; }
  .cat-chip { padding: 7px 12px; font-size: 12.5px; }
  .cat-chip__n { font-size: 10px; padding: 1px 6px; }
  /* на мобильных все категории видны сразу — без «Другие» */
  .cats-wrap:not(.cats-wrap--open) .cats { max-height: none; }
  .cats-wrap:not(.cats-wrap--open) .cats-bar::after { display: none; }
  /* и лента не прилипает к верхнему краю — она просто скроллится со страницей */
  .cats-wrap { position: static; }
  #catalog, .steps { scroll-margin-top: calc(var(--hdr-h) + 12px); }
  /* переключатель доставки — в одну колонку */
  .ship-toggle { grid-template-columns: 1fr; }
  /* фильтры в две колонки */
  .filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .filters__q { grid-column: 1 / -1; }
  .filters__price { grid-column: 1 / -1; }
  .filters .filters__price .f-field { flex: 1; width: auto; }
  .filters .filters__sort, .filters .filters__pp { width: auto; }
  .filters__reset.q-btn { grid-column: 1 / -1; margin-left: 0; justify-content: center; }
  .ftr__in { grid-template-columns: 1fr 1fr; }
  .ftr__brand { grid-column: 1 / -1; }
}
@media (max-width: 479px) {
  body { font-size: 15px; }
  .grid { gap: 10px; }
  .card { padding: 8px 9px 10px; border-radius: 17px; }
  .card__media { border-radius: 12px; }
  .card__name { font-size: 13.5px; }
  .price b { font-size: 17.5px; }
  .hero { border-radius: 22px; }
  .hero__sub { margin-bottom: 11px; }
  .qty-mini__btn { width: 24px; height: 24px; }
  .qty-mini__n { min-width: 18px; font-size: 12.5px; }
  .btn-buy.q-btn { font-size: 12px; padding: 6px 8px !important; }
  .btn-buy__txt { display: none; } /* на мобильных в кнопке только иконка */
  .btn-buy .q-btn__content { justify-content: center; }
  .ship-note { font-size: 12.5px; }
  .cart-row { grid-template-columns: auto 1fr; }
  .cart-row__side { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
  .ftr__in { grid-template-columns: 1fr; }
  .ftr__bottom { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 820px) {
  .thumbbar { display: none; }
}

/* широкие экраны — дышим */
@media (min-width: 1500px) {
  .container { max-width: 1340px; }
}

/* уважение к reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* === Интеграция с Laravel: экран загрузки, плашка недоступных позиций === */
.boot {
  min-height: 72vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 24px; text-align: center;
  background: linear-gradient(160deg, #172318 0%, #0D150D 100%);
  color: var(--cream-text);
}
.boot img { width: 76px; height: 76px; opacity: .92; animation: boot-pulse 1.4s ease-in-out infinite; }
.boot p { color: #A9B2A5; font-size: 14.5px; }
@keyframes boot-pulse { 50% { opacity: .4; } }
.success__unavail {
  width: 100%; max-width: 560px; margin: 4px auto 0;
  display: flex; gap: 10px; align-items: flex-start;
  background: rgba(166, 111, 42, .08);
  border: 1px solid rgba(166, 111, 42, .35);
  border-radius: 14px; padding: 12px 16px;
  color: #7A5420; font-size: 14px; line-height: 1.5; text-align: left;
}
.success__unavail .ic { flex: 0 0 auto; margin-top: 2px; }

/* Компактная листалка: разделители скрытых страниц */
.pager__dots {
  min-width: 18px; text-align: center;
  color: var(--muted); font-weight: 700; letter-spacing: 2px;
  user-select: none; pointer-events: none;
}
@media (max-width: 700px) { .pager__dots { min-width: 12px; } }

/* Пейджер на мобильных: окно ±1 страница, крупные кнопки под палец;
   на очень узких экранах ряд аккуратно скроллится */
@media (max-width: 700px) {
  .pager { gap: 3px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .pager::-webkit-scrollbar { display: none; }
  .pager__page, .pager__nav {
    min-width: 40px; width: 40px; height: 40px;
    padding-inline: 0; border-radius: 11px; font-size: 14px; flex: 0 0 auto;
  }
  .pager__nav .ic { width: 16px; height: 16px; }
  .pager__dots { min-width: 10px; font-size: 11px; letter-spacing: 1px; }
}

/* === Окно просмотра товара === */
@keyframes pmodal-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pmodal-card-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

.pmodal { animation: pmodal-in .18s ease;
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(13, 21, 13, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.pmodal__card {
  position: relative;
  width: min(880px, 100%);
  max-height: min(660px, 92vh);
  display: grid; grid-template-columns: 1.02fr 1fr;
  background: var(--cream);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(13, 21, 13, .6);
  animation: pmodal-card-in .2s ease;
}
.pmodal__close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: transparent; color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
}
.pmodal__close:hover { background: rgba(23, 35, 24, .07); }
.pmodal__close .ic { width: 19px; height: 19px; }

.pmodal__media {
  background: linear-gradient(180deg, #FFFFFF, #F7F3EA);
  display: grid; place-items: center;
  padding: 34px; min-height: 320px;
}
.pmodal__media img {
  width: 100%; height: 100%; max-height: 520px;
  object-fit: contain;
}

.pmodal__info {
  padding: 40px 42px 34px;
  display: flex; flex-direction: column; align-items: flex-start;
  overflow-y: auto;
}
.pmodal__brand {
  font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-d, var(--gold));
}
.pmodal__name { margin: 10px 0 0; font-size: 27px; line-height: 1.15; font-weight: 800; color: var(--ink); }
.pmodal__cat {
  margin-top: 10px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.pmodal__price { display: flex; align-items: baseline; margin-top: 16px; color: var(--ink); }
.pmodal__price b { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 46px; line-height: 1; }
.pmodal__price span { font-size: 15px; font-weight: 600; color: var(--muted); }
.pmodal__price i { font-style: normal; }

.pmodal__buy { display: flex; align-items: stretch; gap: 12px; width: 100%; margin-top: 26px; }
.qty-modal {
  display: flex; align-items: center;
  border: 1px solid var(--line); border-radius: 14px; background: var(--white);
  overflow: hidden; flex: 0 0 auto;
}
.qty-modal .qty-mini__btn {
  width: 46px; height: 56px; border-radius: 0;
  display: grid; place-items: center;
  border: 0; background: transparent; color: var(--ink); cursor: pointer;
}
.qty-modal .qty-mini__btn:disabled { opacity: .32; cursor: default; }
.qty-modal .qty-mini__n { min-width: 34px; text-align: center; font-weight: 800; font-size: 16px; }
.qty-modal .ic { width: 17px; height: 17px; }

.pmodal__add {
  flex: 1 1 auto; min-height: 56px; border-radius: 14px;
  background: linear-gradient(180deg, var(--ink-2, #1E2B1E), var(--ink));
  color: #fff; font-weight: 700; font-size: 15.5px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 14px 26px -14px rgba(23, 35, 24, .55);
  transition: transform .15s ease, box-shadow .15s ease;
}
.pmodal__add:hover { transform: translateY(-1px); box-shadow: 0 18px 30px -14px rgba(23, 35, 24, .6); }
.pmodal__stock { margin: 16px 0 0; color: var(--muted); font-size: 14px; }

@media (max-width: 760px) {
  .pmodal { padding: 12px; align-items: flex-end; }
  .pmodal__card {
    grid-template-columns: 1fr;
    max-height: 92vh; overflow-y: auto;
    border-radius: 20px;
  }
  .pmodal__media { min-height: 0; padding: 18px; }
  .pmodal__media img { max-height: 44vh; }
  .pmodal__info { padding: 20px 20px 24px; }
  .pmodal__name { font-size: 21px; }
  .pmodal__price b { font-size: 34px; }
  .pmodal__buy { flex-wrap: wrap; }
  .pmodal__add { flex: 1 1 100%; }
}

/* Иконка и текст в кнопке окна товара — как в остальных кнопках прототипа */
.pmodal__add .q-btn__content { display: flex; align-items: center; gap: 9px; }

/* === Экран проверки возраста (18+) === */
.agegate {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(201, 179, 126, .07) 0%, rgba(201, 179, 126, 0) 55%),
    linear-gradient(165deg, #1B3024 0%, #122019 55%, #0D150D 100%);
}
.agegate__card {
  width: min(460px, 100%);
  background: var(--cream);
  border-radius: 28px;
  padding: 44px 46px 40px;
  text-align: center;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .55);
  animation: agegate-in .25s ease;
}
@keyframes agegate-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.agegate__logo { width: 104px; height: 104px; mix-blend-mode: multiply; border-radius: 22px; }
.agegate__title {
  margin: 22px 0 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600; font-size: 38px; line-height: 1.1;
  color: var(--ink);
}
.agegate__text {
  margin: 14px auto 0; max-width: 320px;
  color: var(--muted); font-size: 15px; line-height: 1.55;
}
.agegate__btn {
  display: block; width: 100%; min-height: 54px;
  margin-top: 12px;
  border-radius: 12px;
  font: inherit; font-weight: 700; font-size: 15.5px;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.agegate__btn:first-of-type { margin-top: 26px; }
.agegate__btn--yes {
  border: 0; color: #fff;
  background: linear-gradient(180deg, #1E3A2B, #163023);
  box-shadow: 0 14px 26px -14px rgba(23, 35, 24, .55);
}
.agegate__btn--yes:hover { filter: brightness(1.08); }
.agegate__btn--no {
  border: 1px solid #D8D2C0; color: var(--ink);
  background: #fff;
}
.agegate__btn--no:hover { border-color: var(--gold); }
.agegate__btn:active { transform: translateY(1px); }

@media (max-width: 560px) {
  .agegate__card { padding: 34px 24px 30px; border-radius: 22px; }
  .agegate__logo { width: 88px; height: 88px; }
  .agegate__title { font-size: 31px; }
}