/* ---------- Шапка ---------- */
/* Прозрачная шапка: под ней мягкий градиент, и контент растворяется, а не обрезается полосой с линией (приём Fora) */
.site-header{position:fixed;inset:0 0 auto;z-index:50;height:var(--header-h)}
.site-header::before{content:"";position:absolute;inset:0 0 -56px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(7,6,13,.98) 0,rgba(7,6,13,.94) 46%,rgba(7,6,13,.55) 72%,rgba(7,6,13,0) 100%)}
.site-header__row{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font:600 clamp(1.125rem,.9rem + 1vw,1.3125rem)/1 var(--font-display);white-space:nowrap}
.brand svg{flex:none;width:28px;height:28px;color:var(--gold-400)}
.nav{display:flex;gap:28px;font-size:.9375rem;color:var(--fog-300)}
.nav a:hover{color:var(--text)}
.site-header__actions{display:flex;align-items:center;gap:10px}
/* Текущая страница подсвечивается золотом (aria-current ставит js/chrome.js): взгляд сразу находит, где он. */
.nav a[aria-current="page"],.brand[aria-current="page"]{color:var(--gold-200)}
.site-header__actions [aria-current="page"]{border-color:var(--gold-400)}
/* Кошелёк появляется только у вошедшего. В узкой шапке места нет, поэтому на телефоне он уходит в меню. */
.wallet{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.04);font-size:.875rem;color:var(--gold-200);white-space:nowrap}
.wallet:hover{border-color:var(--gold-400)}
.wallet__coin{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--gold-200),var(--gold-400) 60%,#8a6a2f);color:#1a1407;font:700 .6875rem/1 var(--font-display)}
/* Кошелёк в меню телефона набран заголовочным шрифтом вместе со ссылками — цифры возвращаем обычные */
.nav__wallet{color:var(--gold-200);font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
@media(min-width:761px){.nav__wallet{display:none}}
@media(max-width:760px){.wallet{display:none}}
.icon-btn{position:relative;display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.1);border-radius:50%;background:rgba(255,255,255,.03);cursor:pointer}
.icon-btn svg{width:18px;height:18px}
.badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--gold-400);color:#1a1407;font:700 .6875rem/18px var(--font-text);text-align:center}
.burger{display:none;position:relative;width:40px;height:40px;border:0;background:none;cursor:pointer}
.burger span{position:absolute;left:10px;right:10px;height:2px;background:var(--text);transition:transform .25s,top .25s}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:23px}
.burger[aria-expanded="true"] span:nth-child(1){top:19px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){top:19px;transform:rotate(-45deg)}
/* Телефоны уже 375 px (320-360 встречаются до сих пор): шапка переставала помещаться, и кнопку меню
   срезало краем окна. Ужимаем зазоры и название, а не прячем кнопки: «Войти» и корзина нужны везде. */
@media(max-width:379px){
  .site-header__row{gap:6px}
  .brand{gap:6px;font-size:.9375rem}
  .brand svg{width:22px;height:22px}
  .site-header__actions{gap:4px}
  .site-header__actions .btn--sm{padding:0 10px}
}
/* 320 px всё ещё встречается. С кнопками по 44 px (палец, ТЗ п. 7) ряд шапки в эту ширину
   помещается только так: название и подпись кнопки входа на ступень мельче. */
@media(max-width:339px){
  .brand{gap:5px;font-size:.875rem}
  .brand svg{width:20px;height:20px}
  .site-header__actions .btn--sm{padding:0 8px;font-size:.8125rem}
}
@media(max-width:760px){
  .burger{display:block}
  /* absolute, а не fixed: backdrop-filter шапки делает её контейнером для fixed-потомков */
  /* Лист по содержимому, а не во весь экран: три ссылки и 370 px пустоты под ними читались как
     незагруженная страница. Прокрутка появляется, только если пунктов станет больше, чем помещается. */
  .nav{position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - var(--header-h));max-height:calc(100svh - var(--header-h));overflow:auto;flex-direction:column;gap:0;padding:18px var(--gutter) 22px;border-bottom:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius);background:rgba(7,6,13,.98);font:600 2rem/1 var(--font-display);color:var(--text);opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .25s,transform .25s}
  .nav a{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav.is-open{opacity:1;transform:none;pointer-events:auto}
}

/* ---------- Карточка товара и макеты из артов ---------- */
/* Строки: макет — текст с ценой (растягивается) — кнопка «В корзину». Без этого в ряду с названиями
   разной длины кнопки вставали на разной высоте. Правило общее: одинаково на главной, в каталоге и в «похожих». */
.pcard{position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:14px;padding:12px 12px 18px}
.pcard__body{display:grid;gap:6px;padding-inline:6px}
.pcard__name{font:600 1.375rem/1.15 var(--font-display)}
.pcard__wish{position:absolute;top:22px;right:22px;z-index:2;color:var(--fog-300);font-size:1.0625rem}
.pcard__wish[aria-pressed="true"]{color:var(--gold-400);border-color:var(--gold-400)}
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
/* Cormorant по умолчанию набирает цифры старого стиля, и «10 фунтов 16 соли» читается как «ıо ... ı6».
   Везде, где цена набрана заголовочным шрифтом (итог корзины, квитанция, кошелёк), включаем обычные цифры. */
.price__lotm{color:var(--gold-200);font-weight:600;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
/* Подсказка в рублях всегда набрана текстовым шрифтом, даже внутри заголовочных блоков вроде итога
   корзины: цифры Cormorant — старого стиля, и «3 650» в них читается хуже, чем сама цена в фунтах. */
.price__rub{font-family:var(--font-text);font-size:.8125rem;color:var(--fog-600)}

.mock{position:relative;display:grid;place-items:center;aspect-ratio:4/5;overflow:hidden;border-radius:12px;background:radial-gradient(80% 60% at 50% 30%,#1d1936,var(--ink-900))}
.mock__item{overflow:hidden}
.mock__item img{width:100%;height:100%;object-fit:cover}
/* Доли подобраны так, чтобы плоский товар занимал плитку примерно как колода и гравюра: на прежних
   56 % постер выглядел маленькой картинкой в пустой тёмной карточке — «арт не загрузился», а не товар. */
.mock-poster .mock__item{width:72%;aspect-ratio:3/4;padding:4.5%;background:#f3efe6;border:6px solid #15121f;box-shadow:0 24px 40px -12px rgba(0,0,0,.7)}
/* Наклон 26°, а не 38°: при большем угле коврик сплющивался в тёмную полоску и арт на нём переставал читаться */
.mock-pad .mock__item{width:88%;aspect-ratio:9/4;border-radius:10px;outline:1px dashed rgba(255,255,255,.28);outline-offset:-5px;box-shadow:0 30px 30px -14px rgba(0,0,0,.75);transform:perspective(700px) rotateX(26deg) rotateZ(-8deg)}
.mock-deck .mock__item{position:absolute;width:36%;aspect-ratio:1/2;border:1px solid var(--gold-400);border-radius:8px;box-shadow:0 18px 30px -10px rgba(0,0,0,.7)}
.mock-deck .mock__item:nth-child(1){transform:rotate(-12deg) translateX(-46%)}
.mock-deck .mock__item:nth-child(2){z-index:2;transform:translateY(-4%)}
.mock-deck .mock__item:nth-child(3){transform:rotate(12deg) translateX(46%)}

/* Остальные ракурсы «съёмки»: тот же арт, другая подача. Настоящих фотографий у проекта нет,
   поэтому галерея товара — это четыре честно собранных макета, а не четыре одинаковых картинки. */
.mock-angle .mock__item{width:66%;aspect-ratio:3/4;padding:4.5%;background:#f3efe6;border:6px solid #15121f;box-shadow:-28px 30px 46px -16px rgba(0,0,0,.8);transform:perspective(900px) rotateY(-26deg) rotate(-2deg)}
.mock-mat .mock__item{width:88%;aspect-ratio:9/4;border-radius:8px;outline:1px dashed rgba(255,255,255,.26);outline-offset:-5px;box-shadow:0 26px 32px -16px rgba(0,0,0,.8)}
.mock-marks .mock__item{position:absolute;width:15%;aspect-ratio:5/18;border:1px solid var(--gold-400);border-radius:4px;box-shadow:0 18px 26px -12px rgba(0,0,0,.75)}
.mock-marks .mock__item:nth-child(1){transform:rotate(-16deg) translateX(-230%)}
.mock-marks .mock__item:nth-child(2){transform:rotate(-8deg) translateX(-114%)}
.mock-marks .mock__item:nth-child(3){z-index:2}
.mock-marks .mock__item:nth-child(4){transform:rotate(8deg) translateX(114%)}
.mock-marks .mock__item:nth-child(5){transform:rotate(16deg) translateX(230%)}
/* Деталь = лупа: арт увеличен, а всё вне круга притушено большой тенью-ореолом */
.mock-detail .mock__item{width:100%;height:100%}
.mock-detail .mock__item img{transform:scale(1.9)}
.mock-detail::after{content:"";position:absolute;width:64%;aspect-ratio:1;border:1px solid var(--line);border-radius:50%;box-shadow:0 0 0 100vmax rgba(7,6,13,.55),inset 0 0 40px rgba(7,6,13,.5);pointer-events:none}
/* Интерьер: стена, пол и тёплый свет лампы сверху справа */
.mock-scene{background:linear-gradient(180deg,#221d33 0,#191528 64%,#100e1c 64%,#0a0812 100%)}
.mock-scene::before{content:"";position:absolute;top:-14%;right:-14%;width:64%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(224,138,44,.2),transparent 70%)}
.mock-scene .mock__item{width:58%;aspect-ratio:3/4;margin-bottom:16%;padding:4%;background:#f3efe6;border:5px solid #15121f;box-shadow:0 30px 40px -14px rgba(0,0,0,.85)}

/* ---------- Гравюры товаров 7-10 ----------
   Фотографий этих предметов нет: их рисует js/data/engravings.js как таблицу викторианского каталога.
   Толщина линий задаётся здесь, поэтому в разметке гравюр остаются только координаты. */
.mock-engraving{background:radial-gradient(72% 60% at 50% 38%,#171331,var(--ink-950))}
.mock-engraving svg{width:88%;height:88%;color:var(--gold-400)}
.eng-l,.eng-t,.eng-h{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.eng-l{stroke-width:1.8}
.eng-t{stroke-width:1.05;opacity:.72}
.eng-h{stroke-width:.8;opacity:.42}
.eng-g{fill:currentColor;stroke:none;opacity:.09}
.eng-d{fill:currentColor;stroke:none}

/* ---------- Формы ---------- */
.field{display:grid;gap:8px}
.field label,.field .label{font-size:.8125rem;color:var(--fog-300)}
.input{width:100%;min-height:48px;padding:12px 14px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.03)}
.input:focus{outline:none;border-color:var(--gold-400)}
textarea.input{min-height:120px;resize:vertical}
select.input option{background:var(--ink-900)}
.rating{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:6px}
.rating input{position:absolute;opacity:0}
.rating label{font-size:1.75rem;line-height:1;color:var(--fog-600);cursor:pointer}
.rating input:checked~label,.rating label:hover,.rating label:hover~label{color:var(--gold-400)}
.rating input:focus-visible+label{outline:2px solid var(--gold-400);outline-offset:3px;border-radius:6px}
.hp{position:absolute;left:-9999px}
.form-status{min-height:1.4em;font-size:.875rem;color:var(--gold-200)}

/* ---------- Cookie ---------- */
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;display:flex;align-items:center;gap:14px;max-width:400px;padding:18px;font-size:.875rem;color:var(--fog-300);background:rgba(14,12,26,.95)}
.cookie a{color:var(--gold-200);text-decoration:underline}

/* ---------- Подвал ---------- */
.site-footer{padding-block:56px 40px;border-top:1px solid rgba(255,255,255,.07);font-size:.875rem;color:var(--fog-300)}
.site-footer__grid{display:grid;gap:36px}
.site-footer h3{margin-bottom:12px;font:600 1.375rem/1.1 var(--font-display);color:var(--text)}
.site-footer ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.site-footer a:hover{color:var(--text)}
.subscribe{display:flex;gap:8px;margin-top:12px}
.subscribe .input{min-height:44px}
.legal{display:grid;gap:6px;margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.06);font-size:.75rem;color:var(--fog-600)}
@media(min-width:860px){.site-footer__grid{grid-template-columns:1.3fr 1fr 1fr}}

/* ---------- Уведомления ---------- */
/* Живая область стоит в углу и пустая, пока нечего сказать; сообщения складываются стопкой снизу вверх. */
/* z-index выше слоёв (90): уведомление появляется и поверх диалога, и поверх шторки корзины.
   На 80 оно оказывалось ПОД подложкой открытой шторки, и кнопка «Вернуть» — та, ради которой
   уведомление и показывают после удаления строки, — просто не нажималась: клик забирала подложка. */
.toasts{position:fixed;left:16px;right:16px;bottom:16px;z-index:100;display:grid;justify-items:center;gap:8px;pointer-events:none}
.toast{display:flex;align-items:center;justify-content:center;gap:12px;max-width:min(420px,100%);padding:12px 18px;border:1px solid var(--line);border-radius:999px;background:rgba(14,12,26,.97);box-shadow:0 20px 40px -18px rgba(0,0,0,.9);font-size:.875rem;text-align:center;cursor:pointer;pointer-events:auto;opacity:0;translate:0 12px;transition:opacity .3s var(--spring),translate .3s var(--spring)}
/* Кнопка в уведомлении («Вернуть», «Открыть корзину»): цель нажатия остаётся крупной, текст не переносится */
.toast__action{flex:none;min-height:32px;padding:0 14px;border:1px solid var(--gold-400);border-radius:999px;background:none;color:var(--gold-200);font-size:.8125rem;font-weight:600;white-space:nowrap;cursor:pointer}
.toast__action:hover{background:rgba(212,175,106,.14)}
.toast.is-in{opacity:1;translate:0 0}
.toast--ok{border-color:var(--gold-400);color:var(--gold-200)}
.toast--err{border-color:rgba(142,31,43,.8);color:#f3c4ca}
/* Пока висит cookie-уведомление, уведомления поднимаются над ним: на телефоне они занимают один и тот же угол */
@media(max-width:719px){.has-cookie .toasts{bottom:140px}}
@media(min-width:720px){.toasts{left:auto;right:24px;bottom:24px;justify-items:end}.toast{text-align:left}}

/* ---------- Слои поверх страницы: диалог, шторка, просмотр галереи ---------- */
/* Одна машинка на три вида (js/components.js): различаются только тем, откуда выезжает панель. */
html.is-locked,html.is-locked body{overflow:hidden}
.overlay{position:fixed;inset:0;z-index:90;display:grid}
.overlay__veil{position:absolute;inset:0;background:rgba(4,3,9,.72);opacity:0;transition:opacity .26s var(--spring)}
.overlay.is-open .overlay__veil{opacity:1}
.overlay__panel{position:relative;z-index:1;overflow:auto;overscroll-behavior:contain;background:var(--ink-900);border:1px solid var(--line);opacity:0;transition:opacity .26s var(--spring),translate .26s var(--spring),scale .26s var(--spring)}
.overlay__panel::after{content:"";position:absolute;inset:6px;border:1px solid rgba(212,175,106,.13);border-radius:calc(var(--radius) - 6px);pointer-events:none}
.overlay.is-open .overlay__panel{opacity:1;translate:0 0;scale:1}
.overlay__close{position:absolute;top:14px;right:14px;z-index:2;width:44px;height:44px;font-size:1.0625rem;color:var(--fog-300)}
.overlay__title{margin-right:52px;font-size:var(--fs-h3)}
.overlay__body{display:grid;gap:16px;margin-top:16px}
.overlay__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.overlay__actions .btn{flex:1 1 auto}
.overlay__empty{color:var(--fog-300)}
/* Диалог: снизу на телефоне (ближе к большому пальцу), по центру на широком экране */
.overlay--modal{align-items:end;justify-items:stretch}
.overlay--modal .overlay__panel{max-height:92svh;padding:24px 20px 28px;border-radius:var(--radius) var(--radius) 0 0;translate:0 24px;scale:1}
@media(min-width:720px){
  .overlay--modal{align-items:center;justify-items:center;padding:24px}
  .overlay--modal .overlay__panel{width:min(520px,100%);max-height:88svh;padding:28px;border-radius:var(--radius);translate:0 16px;scale:.98}
}
/* Шторка: правая полоса во всю высоту.
   Панель — колонка: прокручивается только список, а итог и кнопки стоят у нижнего края.
   Раньше прокручивалась панель целиком, содержимое кончалось на середине, и под кнопками
   оставалась треть чёрного экрана — ящик читался как оборванная страница. */
.overlay--drawer{justify-items:end}
.overlay--drawer .overlay__panel{display:flex;flex-direction:column;width:min(420px,100%);height:100svh;padding:24px 20px 28px;border-radius:0;translate:100% 0;overflow:hidden}
.overlay--drawer .overlay__panel::after{inset:6px 6px 6px 0;border-radius:0}
.overlay--drawer .overlay__body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
.overlay--cart .overlay__body>*{display:flex;flex-direction:column;gap:16px;min-height:100%}
/* Прокручивается сам список, а не ящик целиком: до «Перейти в корзину» не надо докручивать семь строк */
.overlay--cart .mini-cart{flex:0 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
.overlay--cart .mini-cart__total{margin-top:auto}
/* Просмотр галереи: панель без рамки, вся работа у содержимого */
.overlay--lightbox{align-items:center;justify-items:center;padding:16px}
.overlay--lightbox .overlay__veil{background:rgba(4,3,9,.94)} /* при просмотре товара страница за спиной не должна читаться */
.overlay--lightbox .overlay__panel{width:min(640px,100%);padding:56px 12px 20px;border:0;border-radius:var(--radius);background:none;translate:0 12px}
.overlay--lightbox .overlay__panel::after{display:none}
.overlay--lightbox .overlay__body{margin:0}

.lb{display:grid;justify-items:center;gap:14px}
.lb__stage .mock{width:min(86vw,520px,calc(58svh*.8));aspect-ratio:4/5}
.lb__stage.is-slide{animation:lbslide .34s var(--spring) both}
@keyframes lbslide{from{opacity:.4;translate:0 8px}to{opacity:1;translate:0 0}}
.lb__caption{font-size:.875rem;color:var(--fog-300);text-align:center}
.lb__nav{display:flex;align-items:center;gap:16px}
.lb__nav .icon-btn{width:44px;height:44px;font-size:1.5rem;line-height:1}
.lb__count{min-width:60px;font-size:.8125rem;color:var(--fog-300);text-align:center}

/* ---------- Мини-корзина в шторке ---------- */
.mini-cart{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.mini-cart__row{display:grid;grid-template-columns:64px 1fr 40px;align-items:center;gap:12px}
.mini-cart__mock .mock{border-radius:10px}
.mini-cart__text{display:grid;gap:2px;min-width:0}
.mini-cart__name{font:600 1rem/1.25 var(--font-display)}
.mini-cart__meta{font-size:.75rem;color:var(--fog-300)}
.mini-cart__del{width:40px;height:40px;color:var(--fog-300)}
.mini-cart__total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--line);font:600 1.125rem/1.2 var(--font-display)}
.mini-cart__total .price{justify-content:flex-end}

/* ---------- Вкладки, согласие, мелкий шрифт ---------- */
.tabs{display:flex;gap:6px;padding:4px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03)}
.tabs__btn{flex:1;min-height:44px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--fog-300);font-size:.9375rem;cursor:pointer;transition:background .2s,color .2s}
.tabs__btn.is-on{background:linear-gradient(180deg,var(--gold-200),var(--gold-400));color:#1a1407;font-weight:600}
.auth{display:grid;gap:16px}
.check{display:grid;grid-template-columns:22px 1fr;align-items:start;gap:10px;font-size:.8125rem;color:var(--fog-300);cursor:pointer}
.check input{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0;border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.04);cursor:pointer}
.check input:checked{border-color:var(--gold-400);background:var(--gold-400) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%231a1407' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat}
.check a{color:var(--gold-200);text-decoration:underline}
.note{font-size:.75rem;line-height:1.5;color:var(--fog-600)}

/* ---------- Дополнения карточки товара (js/components.js) ---------- */
.pcard__badge{position:absolute;top:22px;left:22px;z-index:2;padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(14,12,26,.9);font-size:.6875rem;letter-spacing:.04em;color:var(--gold-200)}
.pcard__short{font-size:.875rem;color:var(--fog-300)}
.pcard__rating{display:flex;align-items:center;gap:6px;font-size:.8125rem;color:var(--fog-600)}
.stars{color:var(--gold-400);letter-spacing:.08em}
.pcard__add{width:100%;margin-top:2px}

/* ---------- Палец вместо мыши ----------
   Компактные кнопки и круглые иконки нарисованы под 40 px: с мышью это плотно и точно, пальцем — промах
   (а приходят в лавку в основном с телефона, по ссылке из мессенджера). На сенсорном экране те же элементы
   дорастают до обязательных 44 px, раскладка для мыши при этом не меняется. ТЗ, п. 7. */
@media(pointer:coarse){
  .btn--sm{min-height:44px}
  .icon-btn,.burger{width:44px;height:44px}
  .mini-cart__row{grid-template-columns:64px 1fr 44px}
  .mini-cart__del{width:44px;height:44px}
  /* Звёзды оценки кликабельны только подписью (сам кружок радио спрятан): растим её отступами, а не кеглем */
  .rating{gap:2px}
  .rating label{padding:8px 3px}
}