/* ==========================================================================
   LAMPUS-SHOP — styles.css (optimized)
   Part 1/3
   Принципы:
   - убраны повторы и конфликтующие версии правил
   - оставлено финальное поведение (по каскаду из твоего файла)
   - сведены к одной “каноничной” версии: buttons, header, catalog cards, checkout
   ========================================================================== */

/* ===== Tokens ===== */
:root{
  --bg: #0b0f12;
  --bg-2: #0f1418;

  --card: rgba(255,255,255,.06);
  --card-2: rgba(255,255,255,.085);
  --stroke: rgba(255,255,255,.10);

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);

  --gold: #cbb184;
  --gold-2: #e1d0a6;

  --shadow: 0 14px 45px rgba(0,0,0,.55);

  --radius: 18px;
  --container: 1200px; /* итог из твоих правок */
  --header-h: 72px;

  /* reveal tokens (итоговая “стабильная” версия) */
  --reveal-ease: cubic-bezier(.16, 1, .3, 1);
  --reveal-dur: 720ms;
  --reveal-y: 12px;

  /* accents */
  --accent-orange: #d97a1a;
}

/* ===== Base ===== */
*{ box-sizing: border-box; }
html,body{ height: 100%; }
body{
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(1400px 800px at 18% 10%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(900px 600px at 70% 0%, rgba(203,177,132,.07), transparent 60%),
    radial-gradient(900px 700px at 80% 90%, rgba(255,255,255,.05), transparent 55%),
    linear-gradient(180deg, var(--bg), #07090b 70%);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  letter-spacing: .2px;

  /* итоговая правка: шапка фиксированная => отступ */
  padding-top: var(--header-h, 84px);
}

@media (max-width: 520px){
  body{ padding-top: var(--header-h-m, 76px); }
}

a{ color: inherit; text-decoration: none; }
img, video{ display:block; max-width: 100%; }

/* ===== Utilities ===== */
.container{
  width: min(var(--container), calc(100% - 40px));
  margin: 0 auto;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor: pointer;
  user-select: none;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}
.btn:active{ transform: translateY(0); }

.btn--primary{
  border-color: rgba(203,177,132,.35);
  background: linear-gradient(180deg, rgba(203,177,132,.22), rgba(203,177,132,.10));
}
.btn--primary:hover{
  border-color: rgba(203,177,132,.55);
  background: linear-gradient(180deg, rgba(203,177,132,.28), rgba(203,177,132,.12));
}

.h2{
  margin: 0 0 10px;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.04;
  letter-spacing: -0.5px;
}
.p{
  margin: 0;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.65;
}

/* ==========================================================================
   Header (итог: fixed, как в твоём финальном блоке)
   ========================================================================== */
.header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  height: var(--header-h);
  backdrop-filter: blur(10px);
  background: rgba(6,8,10,.58);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.header__inner{
  height: var(--header-h);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 18px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
}
.brand--img{ padding: 0; }
.brand__logo{
  height: 34px;
  width: auto;
  display: block;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.55));
}
.brand__mark{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  color: #0b0f12;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  font-weight: 800;
}
.brand__name{
  font-weight: 650;
  letter-spacing: .6px;
}

.nav{
  display:flex;
  gap: 18px;
  align-items:center;
}
.nav__link{
  color: rgba(255,255,255,.78);
  font-size: 14px;
  padding: 10px 10px;
  border-radius: 999px;
  transition: background .18s ease, color .18s ease;
}
.nav__link:hover{
  color: rgba(255,255,255,.95);
  background: rgba(255,255,255,.05);
}

.header__actions{
  position: relative;
  display:flex;
  align-items:center;
  gap: 10px;
}

/* Cart button */
.cart-btn{
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.9);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.cart-btn:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
}
.cart-btn__icon svg{ width: 20px; height: 20px; }
.cart-btn__badge{
  position:absolute;
  right: -4px;
  top: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ff3b30;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  display:grid;
  place-items:center;
  border: 2px solid rgba(6,8,10,.9);
}

/* Cart hint */
.cart-hint{
  position:absolute;
  right: 54px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}
.cart-hint.is-visible{ opacity: 1; }
.cart-hint__box{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
}
.cart-hint__label{ color: rgba(255,255,255,.7); }
.cart-hint__sum{ font-weight: 700; letter-spacing: .3px; }
.cart-hint__arrow{
  position:absolute;
  right: -6px;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%) rotate(45deg);
  background: rgba(255,255,255,.08);
  border-right: 1px solid rgba(255,255,255,.10);
  border-top: 1px solid rgba(255,255,255,.10);
}
#cartHintSum{ white-space: nowrap; }

/* ==========================================================================
   Drawer (cart)
   ========================================================================== */
.drawer-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  z-index: 80;
}
.drawer{
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(420px, calc(100% - 44px));
  background: rgba(10,13,16,.92);
  border-left: 1px solid rgba(255,255,255,.08);
  z-index: 90;
  transform: translateX(102%);
  transition: transform .28s ease;
  box-shadow: -18px 0 60px rgba(0,0,0,.45);
  display:flex;
  flex-direction: column;
}
.drawer.is-open{ transform: translateX(0); }

.drawer__header{
  height: 66px;
  padding: 0 16px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.drawer__title{ font-weight: 700; letter-spacing: .4px; }
.drawer__close{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.9);
  cursor: pointer;
}

.drawer__body{
  padding: 14px 16px;
  overflow:auto;
  flex: 1;
}
.drawer__empty{
  margin-top: 12px;
  color: rgba(255,255,255,.65);
  font-size: 14px;
  line-height: 1.55;
  padding: 14px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
}

/* Drawer footer */
.drawer__footer{
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(255,255,255,.07);
  display:grid;
  gap: 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.22));
}
.drawer__total{
  display:flex;
  justify-content: space-between;
  align-items:center;
  color: rgba(255,255,255,.75);
  padding-top: 4px;
  font-size: 14px;
}
.drawer__total strong{
  color: rgba(255,255,255,.95);
  font-size: 18px;
  letter-spacing: .2px;
}
.drawer__checkoutBtn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  text-align: center;
  text-decoration: none;
  line-height: 1;
  margin-top: 10px;
}

/* Drawer items */
.ditem{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  padding: 12px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
  margin-bottom: 10px;
}
.ditem__img{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.ditem__img img{ width: 100%; height: 100%; object-fit: cover; }

.ditem__main{
  min-width: 0;
  display: grid;
  gap: 8px;
}
.ditem__top{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 10px;
}
.ditem__title{
  font-weight: 820;
  letter-spacing: -.2px;
  font-size: 16px;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ditem__remove{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.75);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.ditem__remove:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
  transform: translateY(-1px);
}
.ditem__remove:active{ transform: translateY(0); }

.ditem__meta{
  color: rgba(255,255,255,.60);
  font-size: 13px;
  line-height: 1.35;
}
.ditem__bottom{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}
.ditem__qty{ background: rgba(0,0,0,.14); }
.ditem__sum{
  font-weight: 820;
  letter-spacing: .2px;
  white-space: nowrap;
  color: rgba(255,255,255,.92);
}

/* ==========================================================================
   Qty / Select / Add-to-cart (каноничная версия без конфликтов)
   ========================================================================== */
.select{
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.9);
  outline: none;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.select:focus{
  border-color: rgba(203,177,132,.40);
  box-shadow: 0 0 0 4px rgba(203,177,132,.12);
  background: rgba(0,0,0,.22);
}

.qty{
  display:flex;
  align-items:center;
  gap: 8px;
}
.qty__btn{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.9);
  cursor: pointer;
}
.qty__val{
  min-width: 26px;
  text-align:center;
  font-weight: 700;
  color: rgba(255,255,255,.9);
}

/* compact — используется в карточках и в drawer */
.qty--compact{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  gap: 10px;
  height: 44px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
}
.qty--compact .qty__btn{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.9);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.qty--compact .qty__btn:hover{
  border-color: rgba(203,177,132,.28);
  background: rgba(0,0,0,.28);
  transform: translateY(-1px);
}
.qty--compact .qty__btn:active{ transform: translateY(0); }
.qty--compact .qty__val{
  min-width: 16px;
  text-align:center;
  font-weight: 850;
  color: rgba(255,255,255,.9);
}

/* Add to cart */
.btn-addcart{
  flex: 1 1 auto;
  height: 44px;
  width: 100%;
  min-width: 0;
  padding: 0 20px;
  border-radius: 999px;

  background: linear-gradient(180deg, rgba(197,90,18,.95), rgba(166,70,14,.95));
  border: 1px solid transparent; /* важно: без “дёрганья” на hover */
  color: rgba(255,255,255,.95);
  font-weight: 850;
  letter-spacing: .12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn-addcart:hover{
  background-color: #07090c;
  border-color: #D97706;
  color: #D97706;
  transform: translateY(-1px);
}
.btn-addcart:hover *{ color: #D97706; }
.btn-addcart:active{ transform: translateY(0); }
.btn-addcart:focus-visible{
  outline: 3px solid rgba(217, 119, 6, .35);
  outline-offset: 3px;
}

/* Nav responsive */
@media (max-width: 860px){
  .nav{ display:none; }
}

/* ==========================================================================
   Part 2/3 — Hero / Pages / Catalog / Product page / Reveal / PT
   ========================================================================== */

/* ==========================================================================
   Hero / Story / Contacts / Footer
   ========================================================================== */
.hero{
  position: relative;
  min-height: calc(100dvh - var(--header-h));
  display: grid;
  align-items: end;
  padding: 64px 0;
  overflow: hidden;
  isolation: isolate; /* новый stacking context */
}

/* media behind & no pointer events */
.hero__media{
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero__video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.95) contrast(1.05);
}
.hero__veil{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 600px at 18% 40%, rgba(0,0,0,.08), rgba(0,0,0,.55) 60%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.70));
}

.hero__content{
  position: relative;
  z-index: 1;
  padding-bottom: 10px;
  max-width: 760px;
}
.hero__title{
  margin: 0 0 12px;
  font-size: clamp(44px, 6vw, 70px);
  line-height: .95;
  letter-spacing: -1.2px;
}
.hero__subtitle{
  margin: 0 0 20px;
  color: rgba(255,255,255,.78);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 56ch;
}

/* Hero green pill (итоговая версия из твоих последних правил: яркий зелёный) */
.btn.btn-pill-green{
  height: 56px;
  padding: 0 36px;

  background-color: #22C55E;
  border: 1px solid transparent;
  color: #0B1A12;

  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn.btn-pill-green:hover{
  background-color: transparent;
  border-color: #22C55E;
  color: #22C55E;
}
.btn.btn-pill-green:hover *{ color: #22C55E; }
.btn.btn-pill-green:focus-visible{
  outline: 3px solid rgba(34, 197, 94, .30);
  outline-offset: 3px;
}

/* story blocks */
.story{ padding: 64px 0; }
.split{
  display:grid;
  grid-template-columns: 1fr 1.12fr;
  gap: 28px;
  align-items: center;
  padding: 30px 0;
  border-top: 1px solid rgba(255,255,255,.07);
}
.split:first-child{ border-top: 0; padding-top: 0; }
.split--reverse .split__text{ order: 2; }
.split--reverse .split__media{ order: 1; }

.media-card{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  position: relative;
}
.media-card video,
.media-card img{
  width: 100%;
  height: 360px;
  object-fit: cover;
}
.media-card--image img{ filter: saturate(.98) contrast(1.02); }

.contacts{
  padding: 64px 0 74px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.contacts__list{
  margin-top: 16px;
  display:grid;
  gap: 12px;
}
.contacts__item{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.contacts__label{ color: rgba(255,255,255,.62); font-size: 12.5px; }
.contacts__value{ display:inline-block; margin-top: 6px; font-weight: 650; }

.footer{
  padding: 18px 0 28px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.footer__inner{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 14px;
}
.footer__muted{ color: rgba(255,255,255,.55); font-size: 13px; }

@media (max-width: 860px){
  .split{ grid-template-columns: 1fr; }
  .split--reverse .split__text,
  .split--reverse .split__media{ order: initial; }
  .media-card video,
  .media-card img{ height: 260px; }
}

/* ==========================================================================
   Pages / Catalog / Product cards
   ========================================================================== */
.page{ padding: 26px 0 70px; }

/* page head (сведено к “премиум” версии без конфликтов) */
.page__head{
  padding: 26px 0 22px;
  position: relative;
}
.page__head::after{
  content:"";
  display:block;
  height: 1px;
  margin-top: 18px;
  background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.03), rgba(255,255,255,0));
}

.page__title{
  margin: 0 0 10px;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1;
  letter-spacing: -1px;
}
.page__subtitle{
  margin: 0;
  color: rgba(255,255,255,.68);
  max-width: 62ch;
  line-height: 1.6;
  font-size: 15.5px;
}

/* base grid */
.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding-top: 22px;
}

/* product card (премиум-версия из твоих последних правок, без дублей) */
.product-card{
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  box-shadow:
    0 28px 90px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  min-width: 0; /* анти-overflow */
}
.product-card:hover{
  transform: translateY(-4px);
  border-color: rgba(203,177,132,.18);
  box-shadow:
    0 38px 120px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.07);
}

.product-card__media{
  position: relative;
  aspect-ratio: 1 / 1;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(900px 520px at 30% 20%, rgba(203,177,132,.10), transparent 55%),
    radial-gradient(800px 520px at 70% 10%, rgba(255,255,255,.06), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.product-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: saturate(.98) contrast(1.06);
  transition: opacity .22s ease, transform .22s ease;
}
.product-card:hover .product-card__media img{ transform: scale(1.035); }

.product-card__img--on{ position:absolute; inset: 0; opacity: 0; }
.product-card__media:hover .product-card__img--on{ opacity: 1; }

.product-card__body{
  padding: 16px 16px 18px;
  display:grid;
  gap: 12px;
  min-width: 0;
}

.product-card__title{ /* совместимость со старой разметкой */
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

/* если в HTML есть product-card__head — поддерживаем */
.product-card__head{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: baseline;
}

.product-card__name{
  font-weight: 820;
  letter-spacing: .15px;
  font-size: 18px;
  line-height: 1.25;

  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-card__price{
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(255,255,255,.94);
  white-space: nowrap;
  font-size: 18px;
}

.product-card__row{
  display:flex;
  gap: 10px;
  align-items:center;
}
.product-card__actions{
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr); /* финальная “узкая qty + широкая кнопка” */
  gap: 12px;
  align-items: center;
  min-width: 0;
}
.product-card__actions > *{ min-width: 0; }

.product-card__link{ display:block; color: inherit; }

/* anti layout shift helpers (если используются обёртки) */
.product-card__image,
.product-card .image,
.product-card .thumb{
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}
.product-card__image{ aspect-ratio: 1 / 1; }
.product-card__image img,
.product-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Catalog hero + layout */
.catalog-hero{
  position: relative;
  padding: 34px 0 18px;
  overflow: hidden;
  padding-left: clamp(16px, 3vw, 36px);
  padding-right: clamp(16px, 3vw, 36px);
}
.catalog-hero::before{
  content:"";
  position:absolute;
  inset: -2px;
  background:
    radial-gradient(1100px 520px at 18% 20%, rgba(255,255,255,.07), transparent 55%),
    radial-gradient(900px 520px at 70% 0%, rgba(203,177,132,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  pointer-events:none;
}
.catalog-hero__inner{
  position: relative;
  z-index: 1;
  max-width: 920px;
}
.catalog-hero__eyebrow{
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.catalog-hero__lead{
  margin: 10px 0 14px;
  color: rgba(255,255,255,.72);
  font-size: 15.5px;
  line-height: 1.65;
  max-width: 70ch;
}
.catalog-hero__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 0 6px;
}
.chip{
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.78);
  font-size: 13px;
  letter-spacing: .1px;
}

/* catalog layout with aside */
.catalog-layout{
  display: grid;
  grid-template-columns: 260px 1fr; /* итоговая “узкая aside + шире карточки” */
  gap: 18px;
  align-items: start;
  padding-top: 18px;
}
.catalog-aside{
  position: sticky;
  top: calc(var(--header-h) + 18px);
  display: grid;
  gap: 12px;
  margin-left: -14px; /* итоговая умеренная версия */
}
.aside-card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  box-shadow: 0 26px 80px rgba(0,0,0,.32);
  padding: 12px;
}
.aside-title{
  font-weight: 800;
  letter-spacing: .2px;
  margin-bottom: 8px;
}
.aside-text,
.aside-note{
  margin: 0;
  color: rgba(255,255,255,.68);
  font-size: 13.5px;
  line-height: 1.6;
}
.aside-links{
  display: grid;
  gap: 8px;
  margin: 10px 0 10px;
}
.aside-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
  color: rgba(255,255,255,.82);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .15s ease, box-shadow .15s ease;
}
.aside-link:hover{
  transform: translateY(-1px);
  border-color: rgba(203,177,132,.22);
  background: rgba(0,0,0,.18);
  color: var(--accent-orange);
  box-shadow: 0 0 0 1px rgba(217, 122, 26, 0.55);
}
.aside-list{
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,.68);
  font-size: 13.5px;
  line-height: 1.7;
}

/* if you have .catalog-main wrapper: ensure consistent grid */
.catalog-main .grid{
  padding-top: 0;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
}

/* ==========================================================================
   Product page / Gallery / Recommendations
   ========================================================================== */
.backlink{
  display:inline-flex;
  margin: 18px 0 16px;
  color: rgba(255,255,255,.75);
}
.backlink:hover{ color: rgba(255,255,255,.92); }

.product{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  align-items:start;
  padding-bottom: 34px;
}

.pgal{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.pgal__main{
  position: relative;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(700px 400px at 30% 20%, rgba(203,177,132,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.pgal__main img{ width: 100%; height: 100%; object-fit: cover; }

.pgal__thumbs{
  display:flex;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  overflow:auto;
}
.thumb{
  width: 74px;
  height: 74px;
  flex: 0 0 auto;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  opacity: .85;
  transition: opacity .15s ease, border-color .15s ease;
}
.thumb img{ width:100%; height:100%; object-fit: cover; }
.thumb.is-active{ opacity: 1; border-color: rgba(203,177,132,.55); }

/* gallery arrows */
.pgal__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.92);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, opacity .18s ease;
  opacity: .92;
}
.pgal__nav span{
  font-size: 26px;
  line-height: 1;
  transform: translateY(-1px);
}
.pgal__nav--prev{ left: 14px; }
.pgal__nav--next{ right: 14px; }
.pgal__nav:hover{
  background: rgba(0,0,0,.72);
  border-color: rgba(203,177,132,.35);
  opacity: 1;
}
.pgal__nav:active{ transform: translateY(-50%) scale(.98); }

.pinfo{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  box-shadow: 0 18px 60px rgba(0,0,0,.30);
  padding: 16px;

  position: relative;  /* якорь для pinfoClose */
  overflow: visible;
}
.pinfo__head{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
}
.pinfo__title{
  margin: 0;
  font-size: clamp(26px, 3.2vw, 40px);
  letter-spacing: -.6px;
}
.pinfo__sku{
  margin-top: 6px;
  color: rgba(255,255,255,.60);
  font-size: 13px;
}
.pinfo__price{
  font-weight: 800;
  font-size: 18px;
  white-space: nowrap;
}
.pinfo__block{ margin-top: 14px; display:grid; gap: 10px; }

.label{
  color: rgba(255,255,255,.65);
  font-size: 12.5px;
  margin-bottom: 6px;
}
.select--full{ width: 100%; }

.pbuy{ display:flex; gap: 12px; align-items:center; }
.pbuy .qty--compact{ background: rgba(0,0,0,.12); }

.desc{
  margin-top: 16px;
  color: rgba(255,255,255,.72);
  line-height: 1.75;
  font-size: 15px;
}
.specs{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.75);
}
.specs ul{ margin: 0; padding-left: 18px; }
.specs li{ margin: 8px 0; }

/* product close buttons */
.pclose{
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 9999;

  width: 46px;
  height: 46px;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(12,14,16,.55);
  backdrop-filter: blur(10px);

  color: rgba(255,255,255,.92);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;

  box-shadow: 0 18px 44px rgba(0,0,0,.45);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.pclose:hover{
  transform: translateY(-1px);
  background: rgba(12,14,16,.68);
  border-color: rgba(203,177,132,.32);
}
.pclose:active{ transform: translateY(0); }

.pinfoClose{
  position: absolute;
  top: -28px;
  right: -28px;
  z-index: 20;

  width: 52px;
  height: 52px;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(12,14,16,.55);
  backdrop-filter: blur(10px);

  color: rgba(255,255,255,.92);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;

  box-shadow: 0 18px 44px rgba(0,0,0,.45);
  text-decoration: none;

  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.pinfoClose:hover{
  transform: translateY(-1px);
  background: rgba(12,14,16,.70);
  border-color: rgba(203,177,132,.32);
}
.pinfoClose:active{ transform: translateY(0); }

/* recommendations */
.reco{
  padding: 18px 0 70px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.reco__title{
  margin: 0 0 14px;
  font-size: 22px;
  letter-spacing: -.2px;
}
.reco__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.reco-card{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  overflow:hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
}
.reco-card__media{ display:block; position: relative; }
.reco-card__img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: opacity .22s ease;
}
.reco-card__img--on{ position:absolute; inset: 0; opacity: 0; }
.reco-card__media:hover .reco-card__img--on{ opacity: 1; }

.reco-card__body{
  padding: 12px 12px 14px;
  display:grid;
  gap: 12px;
  background: rgba(0,0,0,.12);
  border-top: 1px solid rgba(255,255,255,.06);
}
.reco-card__title{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.reco-card__name{
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  font-weight: 760;
  font-size: 20px;
  letter-spacing: .2px;
}
.reco-card__price{
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
  font-weight: 760;
  color: rgba(255,255,255,.90);
  font-size: 20px;
}
.reco-card__more{
  height: 48px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ==========================================================================
   Reveal (no-flicker, bottom-up)
   ========================================================================== */
html.reveal-ready .product-card{
  opacity: 0;
  transform: translate3d(0, var(--reveal-y), 0);
  will-change: opacity, transform;
  backface-visibility: hidden;
  transition-property: opacity, transform;
  animation: none;
}
html.reveal-ready .product-card.is-visible{
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity var(--reveal-dur) var(--reveal-ease),
    transform var(--reveal-dur) var(--reveal-ease);
  transition-delay: var(--reveal-delay, 0ms);
}
@media (prefers-reduced-motion: reduce){
  html.reveal-ready .product-card,
  html.reveal-ready .product-card.is-visible{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Page transition (используй либо .page-transition, либо .pt — оба оставлены)
   ========================================================================== */
.page-transition{
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  background: #0a0f14;
  opacity: 0;
  visibility: hidden;
}
.page-transition.is-on{ opacity: 1; visibility: visible; }
.page-transition__blob{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140vmax;
  height: 140vmax;
  border-radius: 9999px;
  transform: translate(-50%, -50%) scale(0);
  will-change: transform;
  background:
    radial-gradient(closest-side,
      rgba(224,138,58,.22) 0%,
      rgba(179,90,22,.38) 28%,
      rgba(15,24,32,1) 62%,
      rgba(10,15,20,1) 100%
    );
}
.page-transition.is-expand .page-transition__blob{
  transition: transform 820ms cubic-bezier(.16, 1, .3, 1);
  transform: translate(-50%, -50%) scale(1);
}
.page-transition.is-shrink .page-transition__blob{
  transition: transform 720ms cubic-bezier(.2, .9, .2, 1);
  transform: translate(-50%, -50%) scale(0);
}
@media (prefers-reduced-motion: reduce){
  .page-transition{ display:none !important; }
}
html.pt-lock body{ visibility: hidden; }

/* Alt PT (.pt) */
.pt{
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  background: #0a0f14;
  opacity: 0;
  visibility: hidden;
}
.pt.is-on{ opacity: 1; visibility: visible; }
.pt__circle{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160vmax;
  height: 160vmax;
  border-radius: 9999px;
  transform: translate(-50%, -50%) scale(0);
  will-change: transform;
  background: radial-gradient(closest-side,
    rgba(224,138,58,.22) 0%,
    rgba(179,90,22,.42) 30%,
    rgba(15,24,32,1) 64%,
    rgba(10,15,20,1) 100%
  );
}
.pt.is-expand .pt__circle{
  transition: transform 820ms cubic-bezier(.16, 1, .3, 1);
  transform: translate(-50%, -50%) scale(1);
}
.pt.is-shrink .pt__circle{
  transition: transform 720ms cubic-bezier(.2, .9, .2, 1);
  transform: translate(-50%, -50%) scale(0);
}
@media (prefers-reduced-motion: reduce){
  .pt{ display:none !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px){
  .catalog-layout{ grid-template-columns: 240px 1fr; }
  .catalog-aside{ margin-left: 0; }
  .catalog-main .grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px){
  .catalog-aside{ margin-left: 0; }
  .catalog-layout{ grid-template-columns: 240px 1fr; }
}

@media (max-width: 980px){
  .grid{ grid-template-columns: repeat(2, 1fr); }
  .product{ grid-template-columns: 1fr; }
  .reco__grid{ grid-template-columns: repeat(2, 1fr); }

  .catalog-layout{ grid-template-columns: 1fr; }
  .catalog-aside{
    position: static;
    grid-template-columns: repeat(2, 1fr);
  }
  .catalog-main .grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px){
  .grid{ grid-template-columns: 1fr; }
  .catalog-aside{ grid-template-columns: 1fr; }
  .catalog-main .grid{ grid-template-columns: 1fr; }
}

/* very small cards: stack actions */
@media (max-width: 520px){
  .product-card__actions{
    grid-template-columns: 1fr;
  }
  .qty--compact{
    width: 100%;
    justify-content: center;
  }
  .btn-addcart{ height: 46px; }
}


/* ==========================================================================
   Part 3/3 — Checkout (co*), autocomplete, summary controls, misc
   ========================================================================== */

/* ==========================================================================
   Checkout — FINAL (one consistent version)
   - общий скролл справа
   - крестик в правом верхнем углу
   - правая колонка sticky (на десктопе)
   ========================================================================== */
.co{
  min-height: 100vh;
  background:
    radial-gradient(1000px 500px at 20% -10%, rgba(255,255,255,.07), rgba(0,0,0,0)),
    radial-gradient(900px 500px at 80% 0%, rgba(203,177,132,.10), rgba(0,0,0,0)),
    #0b0c0f;
  color: #fff;
  overflow: visible;
}

/* hide any old text brand leftovers on checkout */
.co .co__brand,
.co .co__brandText{ display: none; }

.co__top{
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 24px 10px;
  position: relative;
}

/* optional centered logo (if used) */
.co__topCenter{
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.co__topLogo{
  height: 54px;
  width: auto;
  display: block;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.45));
}

/* close button base */
.co__close{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.9);
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.co__close:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
}

/* cross fixed top-right */
.co__close--fixed{
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 9999;
}

/* layout */
.co__grid{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 60px;
  display: grid;
  grid-template-columns: minmax(440px, 1fr) 520px;
  gap: 28px;
  align-items: start;
}

.co__left{ padding-top: 6px; }

.co__h1{
  margin: 8px 0 4px;
  font-size: 34px;
  letter-spacing: -.6px;
  text-align: center; /* было в твоих последних версиях */
}
.co__sub{
  margin: 0 0 16px;
  color: rgba(255,255,255,.65);
  max-width: 54ch;
  line-height: 1.45;
  text-align: left;
}

/* cards */
.co__card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  box-shadow: 0 22px 70px rgba(0,0,0,.30);
  padding: 14px;
  margin-bottom: 12px;
}
.co__h2{
  margin: 0 0 12px;
  font-size: 16px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
}

/* fields */
.co__field{ margin-bottom: 12px; position: relative; }
.co__label{
  display:block;
  font-size: 13px;
  color: rgba(255,255,255,.70);
  margin: 0 0 6px;
}
.co__input{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.92);
  padding: 14px 14px;
  outline: none;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.co__input:focus{
  border-color: rgba(203,177,132,.55);
  box-shadow: 0 0 0 4px rgba(203,177,132,.14);
  background: rgba(0,0,0,.26);
}
.co__textarea{ min-height: 92px; resize: vertical; }

.co__input.is-error{
  border-color: rgba(255,90,90,.75);
  box-shadow: 0 0 0 4px rgba(255,90,90,.12);
}
.co__err{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,120,120,.92);
  letter-spacing: .01em;
  min-height: 14px;
}

.co__cityWrap{ position: relative; }
.co__input--icon{ padding-right: 44px; }
.co__icon{
  position:absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .55;
  pointer-events:none;
}
.co__hint{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

/* radios */
.co__radios{ display:grid; gap: 10px; }
.co-radio{
  display:grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items:start;
  cursor: pointer;
  user-select:none;
}
.co-radio__inp{ position:absolute; opacity:0; pointer-events:none; }
.co-radio__dot{
  width: 18px; height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.26);
  margin-top: 2px;
  box-shadow: inset 0 0 0 4px rgba(0,0,0,.22);
}
.co-radio__inp:checked + .co-radio__dot{
  border-color: rgba(203,177,132,.7);
  box-shadow: inset 0 0 0 5px rgba(0,0,0,.22), inset 0 0 0 9px rgba(203,177,132,.95);
}
.co-radio__t{ display:block; color: rgba(255,255,255,.90); }
.co-radio__h{ display:block; font-size: 12px; color: rgba(255,255,255,.55); margin-top: 3px; }

/* right sticky */
.co__right{
  position: sticky;
  top: 24px;
  align-self: start;
}

/* optional right logo image */
.co__rightLogo{
  display: flex;
  justify-content: center;
  margin: 0 0 12px;
}
.co__rightLogo img{
  width: 160px;
  max-width: 70%;
  height: auto;
  display: block;
  opacity: .95;
}

.co__summary{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  box-shadow: 0 28px 90px rgba(0,0,0,.38);
  padding: 14px;
}
.co__srTitle{
  margin: 6px 0 12px;
  font-size: 16px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
}

.co__items{ display:grid; gap: 10px; margin-bottom: 12px; }
.co-item{
  display:grid;
  grid-template-columns: 62px 1fr auto;
  gap: 12px;
  align-items: start;
}
.co-item__img{
  width: 62px;
  height: 62px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  position: relative;
  overflow: visible;
}
.co-item__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}
.co-item__qty{
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #0b0c0f;
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.co-item__mid{ min-width: 0; }
.co-item__name{
  font-weight: 760;
  line-height: 1.2;
  color: rgba(255,255,255,.92);
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.co-item__meta{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.56);
}
.co-item__sum{
  white-space: nowrap;
  font-weight: 800;
  color: rgba(255,255,255,.88);
}

/* controls in summary */
.co-item__controls{
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.co-qty{ background: rgba(0,0,0,.14); }

.co-remove{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.80);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.co-remove:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
  transform: translateY(-1px);
}
.co-remove:active{ transform: translateY(0); }

.co__lines{
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 12px;
}
.co__line{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}
.co__lineL{ color: rgba(255,255,255,.78); }
.co__lineR{ color: rgba(255,255,255,.90); white-space: nowrap; }
.co__muted{ color: rgba(255,255,255,.55); }

.co__total{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.co__totalL{ font-size: 18px; font-weight: 820; }
.co__totalR{ font-size: 22px; font-weight: 900; letter-spacing: .2px; }

/* pay section */
.co__pay{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.co__payTitle{
  margin: 0 0 8px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: rgba(255,255,255,.86);
}
.co__payText{
  margin: 0 0 10px;
  color: rgba(255,255,255,.66);
  line-height: 1.5;
}
.co__payBox{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(0,0,0,.18);
  padding: 12px;
  margin-bottom: 12px;
}
.co__payRow{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
}
.co__payK{ color: rgba(255,255,255,.58); }
.co__payV{ color: rgba(255,255,255,.92); font-weight: 760; }
.co__payNote{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.62);
  line-height: 1.45;
}

/* buttons (2D look + premium hover from твоего финала) */
.co__btns{ display:grid; gap: 10px; }
.co__btn{
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.92);
  font-weight: 820;
  letter-spacing: .2px;
  cursor:pointer;

  box-shadow: none;
  background-image: none;
  text-shadow: none;

  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.co__btn:hover{
  transform: translateY(-1px);
  background-color: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
}
.co__btn:active{
  transform: translateY(0);
  background-color: #050609;
}

.co__btn--tg{
  background-color: #0B3A5A;
  border: 1px solid rgba(120, 190, 255, .22);
  color: #ffffff;
}
.co__btn--wa{
  background-color: #0D3B2A;
  border: 1px solid rgba(120, 255, 200, .18);
  color: #ffffff;
}
.co__btn--tg:hover{
  background-color: #07090c;
  border-color: #2B8CFF;
  color: #2B8CFF;
}
.co__btn--wa:hover{
  background-color: #07090c;
  border-color: #2BE38A;
  color: #2BE38A;
}
.co__btn--tg:focus-visible{
  outline: 3px solid rgba(43, 140, 255, .35);
  outline-offset: 3px;
}
.co__btn--wa:focus-visible{
  outline: 3px solid rgba(43, 227, 138, .30);
  outline-offset: 3px;
}

.co__small{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
  line-height: 1.45;
}
.co-empty{
  color: rgba(255,255,255,.60);
  padding: 12px 0;
}

/* Optional image logo helper (if used somewhere) */
.co__brandImg{
  height: 30px;
  width: auto;
  display:block;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.35));
}

/* ==========================================================================
   Checkout: city autocomplete
   ========================================================================== */
.co-ac{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,11,14,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 26px 80px rgba(0,0,0,.45);
  overflow: hidden;
  z-index: 20;
}
.co-ac__item{
  padding: 12px 12px;
  cursor: pointer;
  border-top: 1px solid rgba(255,255,255,.06);
}
.co-ac__item:first-child{ border-top: none; }
.co-ac__item:hover{ background: rgba(255,255,255,.05); }
.co-ac__title{
  color: rgba(255,255,255,.92);
  font-weight: 760;
  line-height: 1.2;
}
.co-ac__sub{
  margin-top: 3px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

/* ==========================================================================
   Catalog sidebar hover helpers (из твоего финала)
   ========================================================================== */
.catalog .filters button:hover,
.catalog .filters a:hover,
.catalog .filters .pill:hover,
.catalog .filters .filter-btn:hover,
.catalog .sidebar button:hover,
.catalog .sidebar a:hover,
.catalog .sidebar .pill:hover,
.catalog .sidebar .filter-btn:hover{
  color: var(--accent-orange);
  border-color: var(--accent-orange);
  box-shadow: 0 0 0 1px rgba(217, 122, 26, 0.55);
}
.catalog .filters button:hover *,
.catalog .filters a:hover *,
.catalog .sidebar button:hover *,
.catalog .sidebar a:hover *{
  color: var(--accent-orange);
}
.catalog .filters button,
.catalog .filters a,
.catalog .filters .pill,
.catalog .filters .filter-btn,
.catalog .sidebar button,
.catalog .sidebar a,
.catalog .sidebar .pill,
.catalog .sidebar .filter-btn{
  transition: color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* ==========================================================================
   Checkout responsive
   ========================================================================== */
@media (max-width: 980px){
  .co__grid{
    grid-template-columns: 1fr;
    padding: 0 16px 40px;
    gap: 16px;
  }
  .co__right{ position: static; }
  .co__top{ padding: 14px 16px 8px; }
  .co__close--fixed{ top: 12px; right: 12px; }
}

/* ======================================================================
   FIX: Hover for "В корзину" + "Оформить заказ"
   Требование: черный фон, оранжевая обводка, оранжевый текст
   ====================================================================== */

/* shared hover tokens */
:root{
  --hover-black: #07090c;
  --hover-orange: #D97706;
}

/* "В корзину" */
.btn-addcart{
  border: 1px solid transparent; /* чтобы не дергался размер */
}
.btn-addcart:hover{
  background: var(--hover-black) !important;
  border-color: var(--hover-orange) !important;
  color: var(--hover-orange) !important;
}
.btn-addcart:hover *{ color: var(--hover-orange) !important; }

/* "Оформить заказ" в drawer */
.drawer__checkoutBtn{
  border: 1px solid transparent; /* стабилизация */
}
.drawer__checkoutBtn:hover{
  background: var(--hover-black) !important;
  border-color: var(--hover-orange) !important;
  color: var(--hover-orange) !important;
}
.drawer__checkoutBtn:hover *{ color: var(--hover-orange) !important; }


/* ===== Checkout hero block: centered title + text, narrower card, moved up ===== */

/* поднять левую колонку выше */
.co__left{
  padding-top: 0 !important;
}

/* если используешь верхнюю шапку без логотипа */
.co__top--noLogo{
  margin: 0 0 6px !important;
  padding: 0 !important;
}

/* сам верхний (hero) блок: сделать уже и по центру */
.co__card--hero{
  max-width: 860px;               /* подгони: 760–920 */
  margin: 0 auto 12px !important; /* центрируем карточку */
  padding-top: 10px !important;   /* текст ближе к верху */
  padding-bottom: 14px !important;
}

/* заголовок и текст ВНУТРИ hero — по центру */
.co__h1--hero,
.co__sub--hero{
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}

/* отступы внутри hero */
.co__h1--hero{
  margin: 0 0 8px 0 !important;
}
.co__sub--hero{
  margin: 0 !important;
  line-height: 1.45;
  max-width: 62ch; /* чтобы строки были красивой длины */
}

/* Фоллбэк: если в HTML нет классов --hero,
   применим к первому .co__card на странице */
.co__card:first-of-type{
  max-width: 860px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 10px !important;
  padding-bottom: 14px !important;
}
.co__card:first-of-type .co__h1,
.co__card:first-of-type .co__sub{
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}
.co__card:first-of-type .co__h1{
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}
.co__card:first-of-type .co__sub{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  max-width: 62ch;
  line-height: 1.45;
}


/* ===== Header nav: вправо + premium стиль, не перекрывая корзину ===== */

.header__inner{
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Корзина всегда справа */
.header__actions{
  margin-left: auto;
  position: relative;
  z-index: 3;
}

/* Меню ставим перед корзиной и отодвигаем от неё */
.nav{
  margin-left: auto;     /* сдвиг меню вправо */
  margin-right: 22px;    /* чтобы не налезало на корзину/подсказку */
  display: flex;
  align-items: center;
  gap: 26px;
  z-index: 2;
}

/* Ссылки: премиально */
.nav__link{
  position: relative;
  padding: 10px 2px;
  font-weight: 700;        /* жирнее */
  font-size: 13px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
}

/* тонкое “дорогое” подчёркивание */
.nav__link::after{
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 6px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.95), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
  opacity: .95;
}

.nav__link:hover{
  color: rgba(255,255,255,.95);
  transform: translateY(-1px);
}

.nav__link:hover::after{
  transform: scaleX(1);
}

/* Если вдруг подсказка корзины “заходит” на меню — уменьши отступ */
@media (max-width: 700px){
  .nav{
    margin-right: 12px;
    gap: 16px;
  }
  .nav__link{
    font-size: 12px;
    letter-spacing: .08em;
  }
}


/* === Сдвиг меню вправо (к корзине), корзина остаётся крайней справа === */
.header__inner{
  display: flex;
  align-items: center;
}

/* Навигация растягивается и прижимается вправо */
.nav{
  flex: 1;                 /* занимает всё пространство между лого и корзиной */
  display: flex;
  justify-content: flex-end; /* прижать ссылки вправо */
  align-items: center;
  gap: 26px;
  padding-right: 80px;     /* зазор, чтобы не налезать на корзину/подсказку */
}

/* Корзина справа */
.header__actions{
  flex: 0 0 auto;
  position: relative;
  z-index: 3;
}



/* ===== Brand logo: periodic playful wiggle + single bubble hover ===== */

.header .brand--img{
  display: inline-flex;
  align-items: center;
}

.header .brand--img .brand__logo{
  display: block;
  height: 34px;
  width: auto;

  transform-origin: 50% 50%;
  will-change: transform;
  transform: translateX(0) rotate(0deg) scale(1);

  /* редкое подрагивание: анимация с длинной паузой */
  animation: brand-wiggle-rare 6.5s ease-in-out infinite;

  /* hover делает pop через keyframes */
  transition: filter .2s ease;
}

/* Виггл только в начале, потом пауза */
@keyframes brand-wiggle-rare{
  0%   { transform: translateX(0) rotate(0deg) scale(1); }
  2%   { transform: translateX(-1.6px) rotate(-0.7deg) scale(1); }
  4%   { transform: translateX(1.8px) rotate(0.8deg) scale(1); }
  6%   { transform: translateX(-1.2px) rotate(-0.5deg) scale(1); }
  8%   { transform: translateX(1.0px) rotate(0.4deg) scale(1); }
  10%  { transform: translateX(0) rotate(0deg) scale(1); }
  100% { transform: translateX(0) rotate(0deg) scale(1); }
}

/* Hover: одиночный “bubble” (один раз увеличился и мягко вернулся) */
.header .brand--img:hover .brand__logo{
  animation: brand-bubble-once .22s ease-out both;
  filter: saturate(1.05) contrast(1.05);
}

/* Один pop без “двойного” эффекта */
@keyframes brand-bubble-once{
  from { transform: translateX(0) rotate(0deg) scale(1); }
  to   { transform: translateX(0) rotate(0deg) scale(1.06); }
}

/* Чтобы hover не спорил с периодическим wiggle */
.header .brand--img:hover .brand__logo{
  animation-play-state: running; /* это keyframes hover, он короткий */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .header .brand--img .brand__logo{ animation: none; }
}


/* ===== Catalog reveal (slower + smoother) ===== */

.product-card{
  opacity: 1;
  transform: none;
}

/* Плавнее: меньше сдвиг + мягкий blur */
.reveal-ready .product-card{
  opacity: 0;
  transform: translateX(-10px);
  filter: blur(3px);
  /* transition:
    opacity 1.15s cubic-bezier(.16, 1, .3, 1),
    transform 1.15s cubic-bezier(.16, 1, .3, 1),
    filter 1.15s cubic-bezier(.16, 1, .3, 1); */
  transition:
    opacity 1.6s cubic-bezier(.16, 1, .3, 1),
    transform 1.6s cubic-bezier(.16, 1, .3, 1),
    filter 1.6s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}

.reveal-ready .product-card.is-visible{
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce){
  .reveal-ready .product-card{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}