/* =========================================================
   BOLDREX — Obsidian Luxe (Premium Dark, no solid white bg)
   Palette: Obsidian #0B0D12 / Carbon #0E1117 / Accent Red
   ========================================================= */
:root{
  --bg:#0B0D12;
  --bg-2:#0E1117;
  --panel:rgba(255,255,255,.06);
  --panel-2:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.14);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.64);
  --accent:#FF2D3D;
  --accent-2:#FF5A6B;
  --accent-3:#C10F27;
  --glow:0 20px 60px rgba(255,45,61,.18), 0 6px 18px rgba(255,45,61,.18);
  --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1400px 600px at 20% -10%, #111522, transparent 60%),
    radial-gradient(1200px 520px at 120% 0%, rgba(255,45,61,.06), transparent 60%),
    radial-gradient(1000px 480px at -10% 100%, #0A0C12, transparent 50%),
    linear-gradient(180deg, #0B0D12, #0D1117 60%, #0A0C12);
  font: 400 16px/1.7 "PT Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
img{max-width:100%;display:block}
a{color:#fff;text-decoration:none}
a:hover{color:var(--accent)}

.container{width:min(1200px,92vw);margin-inline:auto}
.section{padding:84px 0}
.grid{display:grid;gap:28px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){ .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .grid-3,.grid-4{grid-template-columns:1fr} }

/* ---------------- Header: glass bar with inner stroke ---------------- */
.header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(13,16,23,.65), rgba(13,16,23,.35));
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border-bottom:1px solid var(--line);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.06);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.02em}
.brand img{height:28px;filter:drop-shadow(0 0 10px rgba(255,255,255,.06))}
.nav{display:flex;align-items:center;gap:20px}
.nav a{position:relative;color:var(--muted);font-weight:700}
.nav a:hover,.nav a.active{color:#fff}
.nav a.active::after,.nav a:hover::after{
  content:"";position:absolute;left:0;right:0;bottom:-10px;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  border-radius:2px; box-shadow:var(--glow);
}
.header-cta{
  display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;
  color:#06070A;background:linear-gradient(180deg,#FF4454,#E3122D);border:1px solid #FF3149;
  font-weight:900;letter-spacing:.02em; box-shadow:var(--glow);
}
.header-cta:hover{filter:saturate(115%)}

/* ---------------- Hero: mesh gradient + luxe serif title ---------------- */
.hero{
  position:relative;border-bottom:1px solid var(--line);
  background:
    radial-gradient(800px 400px at 0% 0%, rgba(255,45,61,.12), transparent 60%),
    radial-gradient(1000px 500px at 120% 20%, rgba(255,255,255,.06), transparent 60%);
}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;padding:42px 0}
@media (max-width:980px){ .hero .wrap{grid-template-columns:1fr} }
.kicker{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font:800 12px/1 "PT Sans";text-transform:uppercase;letter-spacing:.22em}
.kicker::before{content:"";width:26px;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:2px}
h1{font: 700 58px/1.05 "PT Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; letter-spacing:-.5px; margin:14px 0 10px; color:#F4F6FA}
.lead{color:var(--muted);max-width:64ch}
.hero-visual{
  border:1px solid var(--line);border-radius:18px;padding:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 20px 60px rgba(0,0,0,.35);
  display:grid;place-items:center;min-height:280px;position:relative;overflow:hidden;
}
.hero-visual::after{
  content:""; position:absolute; inset:12px; border-radius:14px;
  background:radial-gradient(400px 180px at 80% 20%, rgba(255,45,61,.22), transparent 60%),
             radial-gradient(500px 240px at 10% 90%, rgba(255,255,255,.08), transparent 60%);
  pointer-events:none;filter: blur(2px);
}

/* ---------------- Buttons ---------------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 18px;border-radius:14px;font-weight:900}
.btn.primary{
  background:linear-gradient(180deg,var(--accent),var(--accent-2)); color:#06070A;
  border:1px solid #FF3149; box-shadow:var(--glow);
}
.btn.primary:hover{filter:saturate(115%)}
.btn.ghost{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  color:#E6E8EF; border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.btn.ghost:hover{border-color:#FF5A6B; color:#fff}

/* ---------------- Cards: glass panels with gradient strokes ---------------- */
.card{
  position:relative; padding:24px; border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid transparent;
  background-clip:padding-box, border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 30px 80px rgba(0,0,0,.35);
}
.card::before{
  content:""; position:absolute; inset:0; border-radius:18px; padding:1px;
  background:linear-gradient(145deg, rgba(255,255,255,.28), rgba(255,255,255,.06) 40%, rgba(255,45,61,.35) 120%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none;
}
.card h3{font: 700 22px/1.2 "PT Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#F4F6FA}
.card .price{color:#fff;font-weight:900}
.card .actions{display:flex;gap:12px;margin-top:12px}

/* ---------------- Feature tiles ---------------- */
.features .feature{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid var(--line); border-radius:16px; padding:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 16px 40px rgba(0,0,0,.35);
}
.feature-icon{
  width:52px;height:52px;display:grid;place-items:center;border-radius:12px;
  background:linear-gradient(180deg, #141925, #0E121B); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  border:1px solid var(--line)
}

/* ---------------- Product thumbs ---------------- */
.product .thumb{
  height:170px;border-radius:14px;border:1px solid var(--line);
  background:
    radial-gradient(300px 120px at 80% 10%, rgba(255,45,61,.18), transparent 60%),
    radial-gradient(260px 120px at 10% 90%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, #0F131B, #0B0E15);
  display:grid;place-items:center;color:var(--muted)
}

/* ---------------- Tables & Forms ---------------- */
.table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.02)}
.table th,.table td{padding:14px;border-top:1px solid var(--line);text-align:left;color:#E6E8EF}
.table th{background:rgba(255,255,255,.04);color:#fff}
.input, textarea{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:#E6E8EF;outline:none
}
.input:focus, textarea:focus{border-color:#FF5A6B; box-shadow:0 0 0 4px rgba(255,45,61,.18)}

/* ---------------- Page head & footer ---------------- */
.page-head{padding:40px 0 14px;border-bottom:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0))}
.page-head h2{font: 700 40px/1.1 "PT Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#F4F6FA}
.footer{
  margin-top:20px;
  border-top:1px solid var(--line);
  background:
    radial-gradient(800px 300px at 100% -10%, rgba(255,45,61,.10), transparent 60%),
    linear-gradient(180deg, #0A0C12, #0B0D12);
  color:#BFC6D4;
}
.footer a{color:#E6E8EF} .footer a:hover{color:#fff}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}
@media (max-width:980px){ .footer .cols{grid-template-columns:1fr 1fr} }

/* ---------------- Utilities ---------------- */
.hr{height:1px;background:var(--line);margin:40px 0}
.center{text-align:center}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){ .form-row{grid-template-columns:1fr} }
.logo-inline{height:.9em;vertical-align:-.12em}


/* =========================================================
   HYBRID: Selective white sections on dark theme
   .section--paper : light band with dark text
   Works without changing global dark background
   ========================================================= */
:root{
  --paper:#ffffff;
  --ink:#0B0D12;
  --ink-2:#141821;
  --line-ink:#e6e8ef;
}

/* Light band */
.section--paper{
  background:
    radial-gradient(900px 380px at 110% -10%, rgba(255,45,61,.06), transparent 60%),
    linear-gradient(180deg, #ffffff, #fafafa);
  color: var(--ink);
  border-top: 1px solid rgba(0,0,0,.08);
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.04) inset;
}
.section--paper .kicker{ color: var(--ink-2) }
.section--paper h1,.section--paper h2,.section--paper h3{ color:#0b0d12 }
.section--paper a{ color:#0b0d12 }
.section--paper a:hover{ color:#D11F3E }

/* Cards invert to light inside paper sections */
.section--paper .card{
  background: linear-gradient(180deg, #fff, #fafafa);
  border: 1px solid #e6e8ef;
  color:#0b0d12;
  box-shadow: 0 8px 24px rgba(16,24,40,.08);
}
.section--paper .card::before{
  background: linear-gradient(145deg, rgba(0,0,0,.06), rgba(0,0,0,.02) 40%, rgba(255,45,61,.25) 120%);
}
.section--paper .card h3{ color:#0b0d12 }
.section--paper .card .price{ color:#0b0d12 }
.section--paper .btn.primary{
  background:#0b0d12; color:#fff; border:1px solid #0b0d12; box-shadow:none;
}
.section--paper .btn.primary:hover{ background:#000 }
.section--paper .btn.ghost{
  background:#fff; color:#0b0d12; border:1px solid #0b0d12; box-shadow:none;
}
.section--paper .btn.ghost:hover{ border-color:#D11F3E; color:#D11F3E }

/* Features invert */
.section--paper .feature{
  background:#fff; border:1px solid #e6e8ef; box-shadow: 0 10px 24px rgba(16,24,40,.06);
}
.section--paper .feature-icon{
  background:#0b0d12; color:#fff; border: none; box-shadow:none;
}

/* Forms & tables invert */
.section--paper .table{
  background:#fff; border:1px solid #e6e8ef;
}
.section--paper .table th{ background:#f6f7fb; color:#0b0d12 }
.section--paper .table th,.section--paper .table td{ color:#111827; border-top:1px solid #e9ecf3 }
.section--paper .input, .section--paper textarea{
  background:#fff; color:#0b0d12; border:1px solid #dfe3ec;
}
.section--paper .input:focus, .section--paper textarea:focus{
  border-color:#D11F3E; box-shadow: 0 0 0 4px rgba(209,31,62,.16);
}

/* Product thumbs on paper: brighter */
.section--paper .product .thumb{
  background: linear-gradient(180deg, #fff, #f7f8fb);
  border: 1px solid #e6e8ef; color:#6b7280;
}


/* ================= Animations & Microinteractions ================= */
:root{
  --t-fast:.18s;
  --t-base:.36s;
  --t-slow:.9s;
  --e: cubic-bezier(.2,.8,.2,1);
}

@keyframes floatUp{ from{ transform: translateY(14px); opacity:0 } to{ transform:none; opacity:1 } }
@keyframes meshShift{
  0%{ background-position: 0% 0%, 100% 20% }
  50%{ background-position: 10% 5%, 90% 25% }
  100%{ background-position: 0% 0%, 100% 20% }
}
@keyframes shine { from{ background-position: -200% 0 } to{ background-position: 200% 0 } }

/* Hero subtle motion */
.hero{ will-change: background-position; animation: meshShift 18s var(--e) infinite alternate }
.hero h1, .hero .lead, .hero .kicker, .hero .btn{ animation: floatUp var(--t-slow) var(--e) both }
.hero .lead{ animation-delay:.06s } .hero .btn{ animation-delay:.12s }

/* Buttons */
.btn{ transition: transform var(--t-fast) var(--e), filter var(--t-fast) var(--e), box-shadow var(--t-base) var(--e) }
.btn:active{ transform: translateY(1px) scale(.98) }
.btn.primary{ transform: translateZ(0) }
.btn.primary:hover{ box-shadow: 0 12px 30px rgba(255,45,61,.28), 0 4px 12px rgba(255,45,61,.18) }

/* Cards */
.card{ transition: transform var(--t-base) var(--e), box-shadow var(--t-base) var(--e) }
.card:hover{ transform: translateY(-4px) }
.product .thumb{ transition: filter var(--t-base) var(--e), transform var(--t-base) var(--e) }
.product:hover .thumb{ filter: saturate(120%); transform: translateY(-2px) }

/* Reveal on scroll */
.reveal{ opacity:.001; transform: translateY(16px); transition: opacity var(--t-base) var(--e), transform var(--t-base) var(--e) }
.revealed{ opacity:1 !important; transform:none !important }

/* Sticky header hide/show on scroll */
.header{ transition: transform var(--t-base) var(--e) }
.header.header--hidden{ transform: translateY(-100%) }

/* Progress bar */
.progress{ position:fixed; inset:0 0 auto 0; height:2px; z-index:60;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent)); width:0;
  background-size: 200% 100%; animation: shine 2.2s linear infinite; }

/* Badge */
.badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border:1px solid var(--line); color:#fff; font-weight:700; font-size:12px; letter-spacing:.02em;
}

/* Breadcrumbs */
.breadcrumbs{ color:var(--muted); font-size:14px }
.breadcrumbs a{ color:inherit }
.breadcrumbs a:hover{ color:#fff }

/* Cookie banner */
.cookie{
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index:70;
  padding:16px; border-radius:14px; border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  box-shadow: 0 14px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.cookie .btn{ padding:10px 14px }

/* Accessibility: focus */
a:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accent-2); outline-offset:2px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important }
}

/* --- Who CTA special button --- */
.btn.btn-hero.who-cta{
  position:relative;
  font-weight:700;
  letter-spacing:.2px;
  padding:14px 20px;
  border-radius:999px;
  background: linear-gradient(90deg, #ff9d3f, #ff4d4d 60%, #ff9d3f);
  background-size: 200% 100%;
  color:#fff;
  box-shadow: 0 8px 24px rgba(255,77,77,.35);
  transition: transform .2s ease, box-shadow .2s ease, background-position .6s ease;
}
.btn.btn-hero.who-cta:hover{
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 12px 32px rgba(255,77,77,.45);
  background-position: 100% 0;
}
.btn.btn-hero.who-cta::after{
  content:"→";
  margin-left:10px;
  opacity:.9;
}
/* pulse ring */
.btn.btn-hero.who-cta[data-hero="pulse"]::before{
  content:"";
  position:absolute; inset:-8px;
  border-radius:999px;
  border:2px solid rgba(255,77,77,.35);
  animation: whoPulse 2s ease-out infinite;
}
@keyframes whoPulse{
  0%{ transform: scale(.9); opacity:.8}
  60%{ transform: scale(1.2); opacity:.2}
  100%{ transform: scale(1.3); opacity:0}
}


/* ===== BOLDREX Product Card — scoped patch (safe) ===== */
.product-actions .store-links--fit{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}

/* Ссылка = ровно по границам SVG (без «плитки») */
.product-actions .btn--market{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
  display:inline-flex; align-items:center; justify-content:center;
  line-height:0;
  width:auto; height:auto;
}

/* SVG задаёт размер кнопки; ширина тянется по viewBox */
.product-actions .btn--market .market-icon{
  display:block;
  height:clamp(44px, 7.2vw, 64px);
  width:auto;
  object-fit:contain; object-position:center;
  will-change:transform;
  animation: brxIconBreath 5.2s ease-in-out infinite; /* мягкая idle-анимация */
}

/* Лёгкий отклик */
.product-actions .btn--market:hover .market-icon{ transform:scale(1.05) }
.product-actions .btn--market:focus-visible{
  outline:2px solid var(--accent, #FF2D3D); outline-offset:4px; border-radius:8px;
}

/* Разведение фаз, чтобы иконки не «дышали» вместе */
.product-actions .store-links--fit a:nth-child(1) .market-icon{ animation-delay:.4s }
.product-actions .store-links--fit a:nth-child(2) .market-icon{ animation-delay:1.1s }

@keyframes brxIconBreath{
  0%,100%{ transform: scale(1) }
  50%{ transform: scale(1.04) }
}

/* Главный CTA: деликатное «дыхание» + редкий блик */
.product-actions .brx-cta{
  position:relative; overflow:hidden;
  will-change: transform, box-shadow;
  animation: brxCtaBreath 3.6s ease-in-out infinite;
}
@keyframes brxCtaBreath{
  0%,100%{ transform:translateY(0); box-shadow:0 10px 26px rgba(0,0,0,.12) }
  50%{ transform:translateY(-1px); box-shadow:0 14px 32px rgba(0,0,0,.16) }
}
.product-actions .brx-cta::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.22) 20%, transparent 40%);
  transform: translateX(-130%);
  animation: brxCtaSheen 7s linear infinite;
}
@keyframes brxCtaSheen{
  0%{ transform: translateX(-130%) }
  12%{ transform: translateX(140%) }  /* проезд блика */
  100%{ transform: translateX(140%) } /* пауза */
}

/* Уважаем системную настройку уменьшения анимаций */
@media (prefers-reduced-motion: reduce){
  .product-actions .market-icon,
  .product-actions .brx-cta,
  .product-actions .brx-cta::after{
    animation:none !important; transform:none !important;
  }
}

/* ===== Product card: улучшенный CTA + выделение "в розницу" ===== */

/* Столбик внутри карточки товара */
.product-actions{ display:grid !important; gap:12px }

/* Главный CTA — не «тяжёлый» прямоугольник, а аккуратная пилюля в цвет бренда */
.section--paper .product-actions .brx-cta{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#fff; border:1px solid #ff314955;
  border-radius:14px; padding:16px 22px; font-size:16px; font-weight:700;
  box-shadow: 0 12px 30px rgba(255,45,61,.22);
}
.section--paper .product-actions .brx-cta:hover{ filter:saturate(110%) }

/* Ряд "Купить в розницу" */
.product-actions .retail-row{
  display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap;
}
.product-actions .retail-chip{
  padding:6px 10px; border-radius:999px;
  background:#fff; border:1px solid var(--line-ink);
  color:#0b0d12; font-weight:700; font-size:12px; letter-spacing:.02em;
  box-shadow: 0 6px 16px rgba(16,24,40,.06);
}

/* Кнопки-иконки магазинов — максимально крупно, без «плиток» и отступов */
.product-actions .btn--market{
  background:transparent !important; border:none !important; box-shadow:none !important;
  padding:0 !important; border-radius:0 !important;
  line-height:0; display:inline-flex; align-items:center; justify-content:center;
  transition: transform .16s ease, filter .16s ease;
}
.product-actions .btn--market .market-icon{
  display:block; width:auto; height:clamp(60px, 9vw, 76px); /* ↑ крупнее, адаптивно */
  object-fit:contain; object-position:center;
  filter: drop-shadow(0 6px 12px rgba(16,24,40,.12));
}
.product-actions .btn--market:hover{ transform:translateY(-1px) }
.product-actions .btn--market:hover .market-icon{
  filter: drop-shadow(0 10px 20px rgba(16,24,40,.18));
}

/* Если у SVG большие внутренние поля — масштаб всё равно по viewBox.
   Лучший эффект будет, если в самих Ozon.svg/WB.svg viewBox обрезан по логотипу. */

/* Доступность: меньше движения — меньше анимаций */
@media (prefers-reduced-motion: reduce){
  .product-actions .btn--market, .product-actions .brx-cta{ transition:none !important }
}

/* === Normalize marketplace icon sizes (Ozon vs WB) === */
/* Базово даём масштаб через переменную --icon-scale,
   чтобы на hover он сохранялся и просто умножался. */
.product-actions .btn--market .market-icon{
  transform: scale(var(--icon-scale, 1));
  transition: transform .16s ease;
}

/* Лёгкий отклик на hover, учитывающий базовый масштаб */
.product-actions .btn--market:hover .market-icon{
  transform: scale(calc(var(--icon-scale, 1) * 1.05));
}

/* У Ozon.svg обычно больше «воздуха» внутри viewBox — слегка увеличим */
.product-actions .btn--market .market-icon.icon--ozon{
  --icon-scale: 1.12; /* при необходимости можно подправить 1.10–1.15 */
}
/* === CTA инверсия: по умолчанию чёрная, при hover — красная === */
.section--paper .product-actions .brx-cta{
  background:#0b0d12;              /* чёрная в покое */
  color:#fff;
  border:1px solid #0b0d12;
  border-radius:14px;
  padding:16px 22px;
  font-size:16px; font-weight:700;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  transition:
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .16s ease,
    filter .16s ease;
}

.section--paper .product-actions .brx-cta:hover{
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); /* красная при hover */
  border-color:#ff314955;
  box-shadow: 0 12px 30px rgba(255,45,61,.22);
  filter:saturate(110%);
}

.section--paper .product-actions .brx-cta:active{
  transform: translateY(1px) scale(.99);
}

/* Фокус для доступности */
.section--paper .product-actions .brx-cta:focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:3px;
}

/* ===== Product Gallery (scoped) ===== */
.product-gallery{ display:grid; gap:12px }
.product-gallery .pg-viewport{
  position:relative; overflow:hidden; border-radius:14px;
  border:1px solid var(--line-ink); background:#fff;
  height:clamp(280px, 36vw, 460px);
  box-shadow:0 8px 22px rgba(16,24,40,.06);
}
.product-gallery .pg-track{
  display:flex; height:100%;
  transition: transform .6s cubic-bezier(.22,.8,.22,1);
  will-change: transform;
}
.product-gallery .pg-slide{ min-width:100%; height:100%; position:relative; overflow:hidden }
.product-gallery .pg-slide img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.02);
  transition: transform .8s cubic-bezier(.22,.8,.22,1);
}
.product-gallery .pg-slide.is-active img{ transform:scale(1) } /* лёгкий «кен-бернс» */

.product-gallery .pg-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:999px;
  background:rgba(0,0,0,.55); color:#fff; border:1px solid rgba(255,255,255,.4);
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
  transition:background .2s ease, transform .16s ease;
}
.product-gallery .pg-prev{ left:10px } .product-gallery .pg-next{ right:10px }
.product-gallery .pg-nav:hover{ background:rgba(0,0,0,.7); transform:translateY(-50%) scale(1.04) }

.product-gallery .pg-progress{
  position:absolute; left:12px; right:12px; bottom:12px; height:4px;
  background:#ECEFF4; border-radius:999px; overflow:hidden;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.04);
}
.product-gallery .pg-progress > span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .4s ease;
}

.product-gallery .pg-thumbs{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
}
.product-gallery .pg-thumb{
  padding:0; border:1px solid var(--line-ink); border-radius:12px; overflow:hidden;
  height:72px; background:#fff; cursor:pointer;
  transition:transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.product-gallery .pg-thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.product-gallery .pg-thumb:hover{ transform:translateY(-1px) }
.product-gallery .pg-thumb.is-active{
  border-color:var(--accent);
  box-shadow:0 10px 24px rgba(255,45,61,.16);
  transform:translateY(-2px);
}

@media (max-width:640px){
  .product-gallery .pg-viewport{ height:clamp(220px, 52vw, 360px) }
  .product-gallery .pg-thumb{ height:62px }
}

/* уважение prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .product-gallery .pg-track,
  .product-gallery .pg-slide img{ transition:none !important }
}
/* Product Gallery: авто-сетка превью */
.product-gallery .pg-thumbs{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(68px, 1fr)); /* было фикс 4 — теперь авто */
  gap:10px;
}
.product-gallery .pg-thumb{
  padding:0; border:1px solid var(--line-ink); border-radius:12px; overflow:hidden;
  height:72px; background:#fff; cursor:pointer;
  transition:transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.product-gallery .pg-thumb img{ width:100%; height:100%; object-fit:cover; display:block }
/* Product gallery: ниже кадр + изображение целиком */
.product-gallery .pg-viewport{ height:clamp(230px, 30vw, 420px) }
.product-gallery .pg-slide img{ object-fit:contain; background:#fff }

/* Аккуратная заглушка при ошибке/пусто */
.product-gallery .pg-empty{
  position:absolute; inset:0; display:grid; place-items:center;
  color:#6b7280; font-weight:700; background:#fff;
}

/* Скрывать стрелки/полоску когда 0–1 фото */
.product-gallery.pg--empty .pg-nav,
.product-gallery.pg--empty .pg-progress,
.product-gallery.pg--single .pg-nav,
.product-gallery.pg--single .pg-progress{ display:none }
/* === Gallery fixes: height, contain, nice empty state === */
.product-gallery{ display:grid; gap:12px }
.product-gallery .pg-viewport{
  position:relative; overflow:hidden; border-radius:14px;
  border:1px solid var(--line-ink); background:#fff;
  height:clamp(240px, 32vw, 420px);
  box-shadow:0 8px 22px rgba(16,24,40,.06);
}
.product-gallery .pg-track{ display:flex; height:100%; transition: transform .6s cubic-bezier(.22,.8,.22,1) }
.product-gallery .pg-slide{ min-width:100%; height:100%; position:relative; overflow:hidden }
.product-gallery .pg-slide img{ width:100%; height:100%; object-fit:contain; background:#fff }

.product-gallery .pg-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:999px;
  background:rgba(0,0,0,.55); color:#fff; border:1px solid rgba(255,255,255,.4);
  display:grid; place-items:center; cursor:pointer; box-shadow:0 10px 22px rgba(0,0,0,.18);
}
.product-gallery .pg-prev{ left:10px } .product-gallery .pg-next{ right:10px }

.product-gallery .pg-progress{ position:absolute; left:12px; right:12px; bottom:12px; height:4px; background:#ECEFF4; border-radius:999px; overflow:hidden }
.product-gallery .pg-progress>span{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .4s ease }

.product-gallery .pg-thumbs{ display:grid; grid-template-columns:repeat(auto-fit, minmax(68px,1fr)); gap:10px }
.product-gallery .pg-thumb{ padding:0; border:1px solid var(--line-ink); border-radius:12px; overflow:hidden; height:70px; background:#fff; cursor:pointer }
.product-gallery .pg-thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.product-gallery .pg-thumb.is-active{ border-color:var(--accent); box-shadow:0 10px 24px rgba(255,45,61,.16) }

/* Пустая/ошибочная галерея — аккуратная заглушка прямо в рамке */
.product-gallery .pg-empty{
  position:absolute; inset:0; display:grid; place-items:center;
  color:#6b7280; font-weight:700; background:#fff;
}
.product-gallery.pg--empty .pg-nav,
.product-gallery.pg--empty .pg-progress,
.product-gallery.pg--single .pg-nav,
.product-gallery.pg--single .pg-progress{ display:none }
/* ===== SKU (фасовка) ===== */
.sku{ margin:8px 0 2px; display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.sku-label{ font-weight:700; color:#0b0d12 }
.sku-options{ display:flex; gap:8px; flex-wrap:wrap }
.sku-options input{ position:absolute; opacity:0; pointer-events:none }
.sku-options label{
  display:inline-flex; align-items:center; padding:8px 12px;
  border:1px solid var(--line-ink); border-radius:999px; cursor:pointer;
  background:#fff; font-weight:700; user-select:none;
  box-shadow:0 6px 14px rgba(16,24,40,.06);
  transition: transform .16s ease, border-color .16s ease, color .16s ease, box-shadow .2s ease;
}
.sku-options label:hover{ transform:translateY(-1px) }
.sku-options input:checked + label{
  border-color:#D11F3E; color:#D11F3E; box-shadow:0 10px 22px rgba(209,31,62,.16);
}

/* подпись под ценой */
.price small{ display:block; color:#6b7280; font-weight:700; font-size:13px }
/* ===== Packs (нетабличные карточки фасовок) ===== */
.packs{ display:grid; gap:10px; margin:8px 0 2px }
.packs-caption{ font-weight:700; color:#0b0d12 }
.pack-grid{ display:grid; gap:10px; grid-template-columns:repeat(3,minmax(0,1fr)) }
@media (max-width:900px){ .pack-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ .pack-grid{ grid-template-columns:1fr } }

.pack-card{
  position:relative; display:grid; gap:8px; padding:12px;
  border:1px solid var(--line-ink); border-radius:14px; background:#fff;
  box-shadow:0 6px 16px rgba(16,24,40,.06);
  transition:transform .16s ease, box-shadow .2s ease, border-color .2s ease;
  cursor:pointer; user-select:none;
}
.pack-card:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(16,24,40,.10) }
.pack-card input{ position:absolute; inset:0; opacity:0; pointer-events:none }

.pack-top{ display:flex; align-items:center; gap:8px; justify-content:space-between; min-height:24px }
.pack-label{ font-weight:800; }
.badges{ display:flex; gap:6px; align-items:center; flex-wrap:wrap }
.badge-chip{
  display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px;
  font-size:12px; font-weight:800; border:1px solid #e6e8ef; color:#0b0d12; background:#fff;
}
.badge-best{ border-color:#ffccd3; color:#D11F3E; background:#ffeef1 }
.badge-save{ border-color:#d5f1d6; color:#0e8f4d; background:#edfbee }

.pack-prices{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap }
.price-unit{ font-weight:900; }
.price-kg{ color:#6b7280; font-weight:700; font-size:13px }

.pack-card.is-selected{
  border-color:#D11F3E; box-shadow:0 12px 26px rgba(209,31,62,.16);
}
.pack-card.is-selected .price-unit{ color:#D11F3E }

/* маленькая точка-радио для доступности */
.pack-radio{
  width:14px; height:14px; border-radius:999px; border:2px solid #cbd5e1; background:#fff;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.pack-card.is-selected .pack-radio{ border-color:#D11F3E; background:#D11F3E; box-shadow:0 0 0 4px rgba(209,31,62,.15) }
/* ===== Packs (нетабличные карточки фасовок) ===== */
.packs{ display:grid; gap:10px; margin:8px 0 2px }
.packs-caption{ font-weight:700; color:#0b0d12 }
.pack-grid{ display:grid; gap:10px; grid-template-columns:repeat(3,minmax(0,1fr)) }
@media (max-width:900px){ .pack-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ .pack-grid{ grid-template-columns:1fr } }

.pack-card{
  position:relative; display:grid; gap:8px; padding:12px;
  border:1px solid var(--line-ink); border-radius:14px; background:#fff;
  box-shadow:0 6px 16px rgba(16,24,40,.06);
  transition:transform .16s ease, box-shadow .2s ease, border-color .2s ease;
  cursor:pointer; user-select:none;
}
.pack-card:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(16,24,40,.10) }
.pack-card input{ position:absolute; inset:0; opacity:0; pointer-events:none }

.pack-top{ display:flex; align-items:center; gap:8px; justify-content:space-between; min-height:24px }
.pack-label{ font-weight:800; }
.badges{ display:flex; gap:6px; align-items:center; flex-wrap:wrap }
.badge-chip{
  display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px;
  font-size:12px; font-weight:800; border:1px solid #e6e8ef; color:#0b0d12; background:#fff;
}
.badge-best{ border-color:#ffccd3; color:#D11F3E; background:#ffeef1 }
.badge-save{ border-color:#d5f1d6; color:#0e8f4d; background:#edfbee }

.pack-prices{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap }
.price-unit{ font-weight:900; }
.price-kg{ color:#6b7280; font-weight:700; font-size:13px }

.pack-card.is-selected{
  border-color:#D11F3E; box-shadow:0 12px 26px rgba(209,31,62,.16);
}
.pack-card.is-selected .price-unit{ color:#D11F3E }

/* маленькая точка-радио для доступности */
.pack-radio{
  width:14px; height:14px; border-radius:999px; border:2px solid #cbd5e1; background:#fff;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.pack-card.is-selected .pack-radio{ border-color:#D11F3E; background:#D11F3E; box-shadow:0 0 0 4px rgba(209,31,62,.15) }
/* ===== Packs: wide row for big/tonnage pack ===== */
.pack-card--full{
  grid-column: 1 / -1;                  /* на всю строку */
  display: grid;
  grid-template-columns: auto 1fr auto; /* слева название, справа цены */
  align-items: center;
  gap: 14px;
}

.pack-card--full .pack-top{ order: 1; }
.pack-card--full .pack-prices{ order: 2; text-align: right; }
@media (max-width: 520px){
  .pack-card--full{ grid-template-columns: 1fr; }
  .pack-card--full .pack-prices{ text-align: left; }
}

/* компактные бейджи, без переносов */
.badge-chip{ white-space: nowrap; }
.pack-card--full .badge-chip{ padding: 3px 8px; font-size: 11px; }

.pack-card--full .price-unit{ font-size: 20px; }
.pack-card--full .price-kg{ font-size: 12px; color:#6b7280; }

/* === Две колонки-стека: никаких пустых мест === */
/* ===== Кирпичная сетка: правая колонка закрывает пустоту ===== */
/* Двухколоночная сетка: справа единый сайдбар на 2 ряда */
.media-two{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(320px,420px);
  grid-template-areas:
    "gallery sidebar"
    "video   sidebar";
  gap:18px;
  align-items:start;
}

.area-gallery{ grid-area: gallery; }
.area-video  { grid-area: video; }
/* Липкий правый столбец в верхнем блоке товара */
.area-sidebar{
  position: sticky;
  top: 14px;          /* отступ от шапки */
  align-self: start;  /* чтобы не тянуться по высоте */
}
@media (max-width:980px){
  .area-sidebar{ position: static } /* на телефоне обычный поток */
}


.product-video .video-embed{ position:relative; aspect-ratio:16/9; }
.product-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.product-actions{ display:grid; gap:12px; }
.product-brief p:last-child{ margin-bottom:0; }

@media (max-width:980px){
  .media-two{
    grid-template-columns:1fr;
    grid-template-areas:
      "gallery"
      "video"
      "sidebar";
  }
}
/* ====== Компактное превью видео ====== */
.product-video.is-compact { padding: 0; overflow: hidden; }
.video-thumb{
  position: relative; display:block; width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden;
  isolation:isolate; background:#111;
}
.video-thumb img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.02) brightness(0.98); transform:scale(1.02); transition:transform .5s ease, filter .5s ease; }
.video-thumb::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.0) 40%, rgba(0,0,0,.25) 100%);
  opacity:.6; transition:opacity .35s ease;
}
.video-thumb .hint{
  position:absolute; left:16px; bottom:14px; padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.9); color:#111; font-size:12px; letter-spacing:.2px;
  transform:translateY(2px); opacity:.9; transition:transform .25s ease, opacity .25s ease;
}
.video-thumb .play{
  position:absolute; inset:0; margin:auto; width:74px; height:74px; border-radius:50%;
  background:rgba(255,255,255,.92); display:grid; place-items:center; box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.video-thumb .play::before{
  content:""; width:0; height:0; border-left:18px solid #111; border-top:11px solid transparent; border-bottom:11px solid transparent; margin-left:4px;
}
.video-thumb .play::after{
  content:""; position:absolute; inset:-6px; border-radius:inherit; border:2px solid rgba(255,255,255,.7);
  animation:videoPulse 1.6s ease-out infinite;
}
@keyframes videoPulse{
  0%{ transform:scale(1); opacity:.9 }
  80%{ transform:scale(1.25); opacity:0 }
  100%{ transform:scale(1.25); opacity:0 }
}
.video-thumb:hover img{ transform:scale(1.05); filter:saturate(1.1) }
.video-thumb:hover::after{ opacity:.75 }
.video-thumb:hover .hint{ transform:translateY(0); opacity:1 }

/* ====== Модальное окно видео ====== */
.videomodal{ position:fixed; inset:0; z-index:999; display:grid; place-items:center;
  opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s;
}
.videomodal.is-open{ opacity:1; visibility:visible; }
.videomodal .vm-backdrop{
  position:absolute; inset:0; background:rgba(8,10,15,.6); backdrop-filter: blur(8px);
  animation:fadeIn .28s ease both;
}
.videomodal .vm-box{
  position:relative; width:min(1080px, 92vw);
  border-radius:18px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.35);
  transform:translateY(10px) scale(.98); opacity:0; background:#000;
  animation:zoomIn .28s ease forwards .05s;
}
.videomodal .vm-aspect{ position:relative; aspect-ratio:16/9; }
.videomodal iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.vm-close{
  position:absolute; right:10px; top:10px; width:36px; height:36px;
  border-radius:10px; background:rgba(255,255,255,.9); color:#111; font-weight:700;
  display:grid; place-items:center; border:none; cursor:pointer;
  transition:transform .15s ease, background .2s ease; z-index:2;
}
.vm-close:hover{ transform:scale(1.06); background:#fff; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes zoomIn{ from{opacity:0; transform:translateY(12px) scale(.965)} to{opacity:1; transform:translateY(0) scale(1)} }

/* ====== Микро-анимации фасовок/цены ====== */
.pack-grid{ --shadow: 0 10px 24px rgba(29,33,45,.08); }
.pack-grid .pack, .pack-grid [role="radio"]{
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, outline-color .18s ease;
}
.pack-grid .pack.is-active, .pack-grid [aria-checked="true"]{
  transform:translateY(-2px); box-shadow:var(--shadow);
  animation:packPop .22s ease both;
}
.pack-grid .pack:active{ transform:translateY(0) scale(.98) }
@keyframes packPop{ 0%{transform:translateY(0) scale(1)} 60%{transform:translateY(-3px) scale(1.02)} 100%{transform:translateY(-2px) scale(1)} }

/* Цена: лёгкий тик + flip веса */
.price-main span.tick{ animation:priceTick .35s ease; display:inline-block }
@keyframes priceTick{ 0%{transform:translateY(0)} 45%{transform:translateY(-6%) scale(1.03)} 100%{transform:translateY(0) scale(1)} }
#priceWeight.flip-out{ animation:flipOut .18s ease both }
#priceWeight.flip-in{ animation:flipIn .24s ease both }
@keyframes flipOut{ from{transform:rotateX(0); opacity:1} to{transform:rotateX(90deg); opacity:0} }
@keyframes flipIn{ from{transform:rotateX(-90deg); opacity:0} to{transform:rotateX(0); opacity:1} }

/* Кнопки — общий hover */
.btn, .btn--market{ transition: transform .18s ease, box-shadow .18s ease, background-color .2s ease; }
.btn:hover{ transform: translateY(-1px) }
/* ===== Product page: compact layout (без дыр) ===== */
#details .section--paper{ padding:48px 0 30px; }
#details .media-two{ gap:12px; }
#details .card{ padding:18px; }
#details .product-brief p{ margin-bottom:0; }
#details .pack-grid{ gap:8px; }


/* ===== Product: компоновка как на макете ===== */
#details .section--paper{ padding:34px 0 28px }
.media-two{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(380px,520px);
  grid-template-areas:
    "gallery sidebar"
    "thumbs  sidebar";  /* миниатюры + видео идут строкой под большим кадром */
  gap:16px;
  align-items:start;
}
.area-gallery{ grid-area: gallery }
.area-video{ display:none }      /* отдельной карточки видео больше не нужно */
.area-sidebar{ grid-area: sidebar; display:grid; gap:14px }

/* Заголовок товара прямо в карточке «Коротко» */
.product-brief .product-title{
  margin:0 0 8px;
  font:800 26px/1.25 "PT Sans", system-ui;
}

/* Галерея: делаем ряд превью под большим кадром */
.product-gallery .pg-viewport{ height:clamp(300px, 38vw, 520px) }
/* узел-строка под большим кадром */
.area-thumbs{ grid-area: thumbs }

/* сами миниатюры */
.area-thumbs .pg-thumbs{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:0;
}

@media (max-width:980px){
  .media-two{
    grid-template-columns:1fr;
    grid-template-areas:
      "gallery"
      "thumbs"
      "sidebar";
  }
  .product-gallery .pg-thumbs{ grid-template-columns:repeat(4,1fr) }
}

/* Плитка-миниатюра под стиль макета */
.pg-thumb{
  height:112px; border-radius:14px; border:1px solid var(--line-ink); background:#0E1117;
  overflow:hidden; padding:0; display:block; position:relative;
}
.pg-thumb img{ width:100%; height:100%; object-fit:cover; display:block }

.pg-thumb--video .v-play{
  width:52px; height:52px; border-radius:50%; background:#fff; display:grid; place-items:center;
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}
.pg-thumb--video .v-play::before{
  content:""; border-left:14px solid #111; border-top:9px solid transparent; border-bottom:9px solid transparent; margin-left:3px;
}
.pg-thumb--video .v-label{
  position:absolute; left:12px; bottom:10px; font-weight:700; font-size:12px;
  padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.9); color:#111;
}

/* Кнопка «Загрузите фото» при пустой галерее — аккуратная */
.product-gallery .pg-upload{
  grid-column: 1 / -1;
  justify-self:end;
  padding:10px 14px; border-radius:12px; border:1px solid var(--line-ink); background:#fff; color:#0b0d12;
  font-weight:700;
}
/* === Product: компоновка как на макете (миниатюры ПОД большим кадром) === */
.media-two{
  grid-template-areas:
    "gallery sidebar"
    "thumbs  sidebar";
  gap:16px;
}
.area-thumbs .pg-thumbs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}

/* Плитка «Видео» среди миниатюр */
.pg-thumb--video{ position:relative; display:grid; place-items:center; }
.pg-thumb--video .v-play{
  width:52px; height:52px; border-radius:50%; background:#fff; display:grid; place-items:center;
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}
.pg-thumb--video .v-play::before{
  content:""; border-left:14px solid #111; border-top:9px solid transparent; border-bottom:9px solid transparent; margin-left:3px;
}
.pg-thumb--video .v-label{
  position:absolute; left:12px; bottom:10px; font-weight:700; font-size:12px;
  padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.9); color:#111;
}

/* === Цена — сделать больше === */
#productCard .price{ display:grid; gap:4px; }
#productCard .price-main{
  font-weight:900;
  font-size:clamp(32px, 4.4vw, 46px); /* ↑ увеличено */
  line-height:1.05;
  letter-spacing:.01em;
}
#productCard .price small{ font-size:13px; }

/* Макет как на дизайне: превью под большим кадром */
.media-two{
  grid-template-areas:
    "gallery sidebar"
    "thumbs  sidebar";
  gap:16px;
}
.area-thumbs .pg-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px }

/* Крупная цена */
#productCard .price .price-main{
  font-weight:900;
  font-size:clamp(32px, 4.4vw, 46px);
  line-height:1.05;
  letter-spacing:.01em;
}


/* === Product gallery (balanced viewport + bigger thumbs) === */
.product-gallery{
  --pg-ratio: 16/12;                 /* стабильное соотношение окна */
  --pg-pad: clamp(12px, 1.6vw, 24px); /* внутренние поля вокруг фото */
}

.product-gallery .pg-viewport{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  background:#fff;
  aspect-ratio: var(--pg-ratio);     /* фиксируем высоту без max-height */
}

.product-gallery .pg-track{
  display:flex;
  height:100%;
  transition: transform .55s cubic-bezier(.22,1,.36,1);
}

.product-gallery .pg-slide{
  min-width:100%;
  height:100%;
  display:grid;
  place-items:center;
  padding:var(--pg-pad);             /* одинаковые отступы со всех сторон */
}

.product-gallery .pg-slide img{
  width:100%;
  height:100%;
  object-fit:contain;                /* целиком влезает, без обрезки */
  object-position:center;            /* строго по центру */
  transform:none;                    /* убираем «кривящий» zoom */
  transition: filter .4s ease;
}

.product-gallery .pg-slide.is-active img{ transform:none; }

.pg-thumbs{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:14px;
}

.pg-thumb{
  width:92px;                        /* БЫЛО ~68px */
  height:92px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  display:grid;
  place-items:center;
  overflow:hidden;
  opacity:.85;
  transition:opacity .2s, transform .2s, box-shadow .2s;
}

.pg-thumb img{ width:100%; height:100%; object-fit:cover; }

.pg-thumb.is-active{
  opacity:1;
  transform:translateY(-3px);
  box-shadow:0 10px 22px rgba(16,24,40,.14);
}

.pg-thumb--video{ font-weight:600; }

.pg-progress{ height:5px; margin-top:10px; } /* потолще линия прогресса */
.pg-progress>span{ transition: width .55s cubic-bezier(.22,1,.36,1); }

/* Адаптив: чуть уменьшаем плашки на узких экранах */
@media (max-width:1180px){ .pg-thumb{ width:80px; height:80px; } }
@media (max-width:780px){
  .product-gallery{ --pg-ratio:16/13; }
  .pg-thumb{ width:68px; height:68px; }
}
@media (max-width:520px){ .pg-thumb{ width:56px; height:56px; } }


/* === Product gallery — FINISH: fit, center, align ===================== */
.product-gallery{
  --pg-ratio: 4/3;                      /* базовый кадр (горизонтальный) */
  --pg-pad: clamp(12px, 1.6vw, 24px);   /* одинаковые поля вокруг фото   */
}

/* высота по соотношению сторон, но меняем классами при портретных кадрах */
.product-gallery .pg-viewport{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  aspect-ratio: var(--pg-ratio);
  border: 1px solid var(--line-ink);
  box-shadow: 0 8px 22px rgba(16,24,40,.06);
}

.product-gallery.is-portrait .pg-viewport{ aspect-ratio: 3 / 4; } /* узкая тара */
.product-gallery.is-square   .pg-viewport{ aspect-ratio: 1 / 1; } /* квадрат    */

.product-gallery .pg-track{
  display: flex;
  height: 100%;
  transition: transform .55s cubic-bezier(.22,1,.36,1);
}

.product-gallery .pg-slide{
  min-width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: var(--pg-pad);
}

.product-gallery .pg-slide img{
  width: 100%; height: 100%;
  object-fit: contain;                 /* ВСЕГДА целиком в кадре */
  object-position: center;
  background: #fff;
  transform: none !important;          /* убираем зум/кен-бернс */
}

/* стрелки и прогресс остаются как были */

/* --- Миниатюры: ровная сетка, без кропа, побольше --- */
.pg-thumbs{
  display:flex; flex-wrap:wrap; gap:14px; margin-top:14px;
}
.pg-thumb{
  width: 96px; height: 96px;
  border-radius: 14px; overflow: hidden; padding: 0;
  background: #fff; border: 1px solid var(--line-ink);
  display: grid; place-items: center; opacity: .9;
  transition: opacity .2s, transform .2s, box-shadow .2s;
}
.pg-thumb img{
  width:100%; height:100%; object-fit: contain; object-position: center;
  display:block; background:#fff;
}
.pg-thumb.is-active{
  opacity: 1;
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(16,24,40,.14);
}

/* адаптив: чтобы не «съедались» плашки */
@media (max-width:1180px){ .pg-thumb{ width:84px; height:84px } }
@media (max-width:780px){  .pg-thumb{ width:68px; height:68px } }
@media (max-width:520px){  .pg-thumb{ width:56px; height:56px } }


/* ==== Download (PDF) button tweaks ==== */
.btn.btn-download{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:800;
}
.btn.btn-download svg{ opacity:.9 }

/* ==== Floating CTA (always visible) ==== */
.float-cta{
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  bottom: 16px;
  z-index: 60;
  padding: 14px 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #fff;
  border: 1px solid #ff314955;
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow: 0 12px 30px rgba(255,45,61,.22);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.float-cta.is-visible{
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
@media (min-width: 981px){
  .float-cta{ bottom: 20px }
}

/* ==== Scroll-hint (прокрутить ниже) ==== */
.scroll-hint{
  margin-top: 10px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 999px;
  background: #fff; color:#0b0d12; border:1px solid var(--line-ink);
  font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 16px rgba(16,24,40,.06);
  animation: hintPulse 2.4s ease-in-out infinite;
}
.scroll-hint svg{ display:block }
@keyframes hintPulse{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(2px) }
}

/* ==== CTA passive breath (main & floating) ==== */
@keyframes ctaBreath {
  0%,100%{
    transform: translateZ(0) scale(1);
    box-shadow: 0 10px 26px rgba(255,45,61,.18), 0 0 0 0 rgba(255,45,61,0);
  }
  50%{
    transform: translateZ(0) scale(1.015);
    box-shadow: 0 14px 34px rgba(255,45,61,.28), 0 0 0 6px rgba(255,45,61,.10);
  }
}
/* Кнопка в карточке */
.brx-cta{
  animation: ctaBreath 3.4s ease-in-out infinite;
  will-change: transform, box-shadow;
}
/* Плавающая кнопка */
.float-cta{
  animation: ctaBreath 3.4s ease-in-out infinite;
  will-change: transform, box-shadow;
}
.brx-cta:hover, .float-cta:hover{
  transform: translateY(-1px) scale(1.02);
}
@media (prefers-reduced-motion: reduce){
  .brx-cta, .float-cta{ animation:none !important }
}

/* ==== Scroll-hint: заметнее и в правом нижнем углу ==== */
/* Переопределяем ранее добавленные стили */
.scroll-hint{
  position: fixed;                   /* фиксируем */
  right: 18px;                       /* правый нижний угол */
  bottom: 20px;
  z-index: 61;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff;
  color:#0b0d12;
  border:1px solid var(--line-ink);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(16,24,40,.10);
}

/* Пульсирующее «свечение»-кольцо вокруг кнопки */
.scroll-hint::before{
  content:"";
  position:absolute; inset:-4px;
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(255,45,61,.18);
  pointer-events:none;
  animation: hintRing 2.2s ease-out infinite;
}
@keyframes hintRing{
  0%   { box-shadow: 0 0 0 0   rgba(255,45,61,.18); }
  100% { box-shadow: 0 0 0 16px rgba(255,45,61,0);  }
}

/* Лёгкий bounce у стрелки */
.scroll-hint svg{
  display:block;
  animation: arrowBounce 1.4s ease-in-out infinite;
}
@keyframes arrowBounce{
  0%,100%{ transform: translateY(0) }
  50%    { transform: translateY(3px) }
}

/* Чтобы на очень узких экранах не «столкнуться» с плавающей CTA по центру */
@media (max-width: 480px){
  .scroll-hint{ bottom: 82px; right: 12px; }  /* поднимаем чуть выше */
}
/* Чуть смещаем якорь секции описания, чтобы при скролле ничего не перекрывалось */
#details{ scroll-margin-top: clamp(60px, 8vh, 120px); }
/* ===== Mobile adaptation for product page ===== */

/* 0) Плавная прокрутка для якорей (кнопка "Прокрутить ниже") */
html{ scroll-behavior: smooth; }

/* 1) Сетка карточки: на мобильных одна колонка */
@media (max-width: 980px){
  .media-two{ display:grid; grid-template-columns: 1fr; gap: 18px; }
  .area-sidebar{ position: static !important; top:auto !important; }
}

/* 2) Галерея: адаптивная высота, контент вписывается */
.pg-viewport{
  aspect-ratio: 1 / 1;
  min-height: clamp(260px, 52vh, 520px);
}
@media (max-width: 720px){
  .pg-viewport{ min-height: clamp(220px, 46vh, 420px); }
}
.pg-slide img, .pg-slide video, .pg-slide iframe{
  width: 100%; height: 100%; object-fit: contain; border-radius: 12px;
}

/* 3) Миниатюры: горизонтальная лента со снапом */
.pg-thumbs{
  display:flex; gap:10px; margin-top:10px; overflow-x:auto; padding-bottom:6px;
  -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory;
}
.pg-thumbs figure{ flex:0 0 96px; scroll-snap-align:center; }

/* 4) Блок действий: кнопки на всю ширину, маркетплейсы — в строку */
@media (max-width: 720px){
  .product-actions .btn, .product-actions .back{
    width:100%; justify-content:center;
  }
  .retail-row{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  }
  .btn--market{ padding:10px 12px; }
  .market-icon{ width:72px; height:auto; }
}

/* 5) Типографика и отступы секций */
@media (max-width: 720px){
  h1, .page-head h1, .page-head h2{ font-size: clamp(24px, 6vw, 32px); line-height: 1.1; }
  .lead{ font-size: clamp(14px, 3.8vw, 16px); }
  .section{ padding: 18px 0; }
}

/* 6) Таблицы характеристик: горизонтальный скролл вместо переполнения */
@media (max-width: 980px){
  .table{ display:block; overflow-x:auto; white-space:nowrap; }
  .table th, .table td{ min-width: 140px; }
}

/* 7) Боковые поля контейнера на очень узких экранах */
@media (max-width: 480px){
  .container{ padding-left: 14px; padding-right: 14px; }
}

/* 8) Плавающий CTA и "Прокрутить ниже": не мешают друг другу и учёт safe-area */
@media (max-width: 480px){
  .float-cta{
    left: 50%; transform: translateX(-50%);
    width: auto; max-width: 92vw; text-align:center;
    padding: 12px 16px; font-size: 14px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  }
  .scroll-hint{
    bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); /* выше плавающей CTA */
    right: 12px; padding: 10px 12px;
  }
}

/* 9) Чтобы якорь #details не прятался под шапкой на мобильных */
#details{ scroll-margin-top: clamp(64px, 12vh, 110px); }

/* ===== BOLDREX Product: Responsive Overhaul (desktop + mobile) ===== */
:root{
  --bp-xl:1280px; --bp-lg:1060px; --bp-md:820px; --bp-sm:560px;
}

/* 0) Плавная прокрутка для якорей и адекватные переносы */
html{ scroll-behavior:smooth; }
.container{ width:min(1280px, 92vw); } /* чуть шире на стационаре */
@media (min-width: var(--bp-xl)){
  .product-gallery .pg-viewport{ height:clamp(460px, 34vw, 580px); }
}
a, .muted{ word-break:break-word }

/* 1) Шапка и навигация: не ломаемся на узких */
@media (max-width: 880px){
  .header-inner{ gap:12px }
  .nav{ overflow-x:auto; gap:16px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .nav::-webkit-scrollbar{ display:none }
  .header-cta{ white-space:nowrap; padding:10px 12px; }
}
.breadcrumbs{
  overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch;
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 18px, #000 calc(100% - 18px), rgba(0,0,0,0) 100%);
}

/* 2) Двухколоночная сетка карточки */
.media-two{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
  grid-template-areas:
    "gallery sidebar"
    "video   sidebar";
  gap: 20px; align-items:start;
}
.area-gallery{ grid-area: gallery }
.area-video{ grid-area: video }
.area-sidebar{ grid-area: sidebar; position:sticky; top:92px; align-self:start }
@media (min-width: 1480px){
  .media-two{ grid-template-columns: minmax(0,1fr) minmax(380px, 480px); gap:24px; }
}
@media (max-width: 980px){
  .media-two{
    grid-template-columns:1fr;
    grid-template-areas: "gallery" "video" "sidebar";
    gap:16px;
  }
  .area-sidebar{ position:static; top:auto }
}

/* 3) Галерея: без обрезания на мобилке, аккурат на десктопе */
.product-gallery{ display:grid; gap:12px }
.product-gallery .pg-viewport{
  position:relative; overflow:hidden; border-radius:14px;
  border:1px solid var(--line-ink); background:#fff;
  height: clamp(320px, 36vw, 480px);
  box-shadow:0 8px 22px rgba(16,24,40,.06);
}
.product-gallery .pg-slide{ min-width:100%; height:100% }
.product-gallery .pg-slide img{ width:100%; height:100%; object-fit:cover; }
@media (max-width: 980px){
  .product-gallery .pg-viewport{ height: clamp(240px, 48vh, 420px); }
  .product-gallery .pg-slide img{ object-fit:contain; } /* больше не режем фото */
}
/* Миниатюры — лента на телефоне, сетка на десктопе */
.product-gallery .pg-thumbs{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(70px, 1fr)); gap:10px;
}
@media (max-width: 720px){
  .product-gallery .pg-thumbs{ display:flex; overflow-x:auto; gap:10px; padding-bottom:6px; -webkit-overflow-scrolling:touch; }
  .product-gallery .pg-thumbs figure, .product-gallery .pg-thumb{ flex:0 0 96px; height:72px; }
}

/* 4) Блок действий/кнопки/маркетплейсы */
.product-actions{ display:grid; gap:12px }
.product-actions .btn, .product-actions .back{ min-height:44px }
@media (max-width: 720px){
  .product-actions .btn, .product-actions .back{ width:100%; justify-content:center }
  .retail-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
  .btn--market{ padding:10px 12px }
  .market-icon{ width:72px; height:auto }
}
/* Пассивная анимация CTA — мягче и без «дрыга» */
.product-actions .brx-cta,
.float-cta{
  position:relative; overflow:hidden; will-change:transform, box-shadow;
  animation: brxCtaBreath 3.6s ease-in-out infinite;
}
@keyframes brxCtaBreath{
  0%,100%{ transform:translateY(0); box-shadow:0 10px 26px rgba(0,0,0,.12) }
  50%{ transform:translateY(-1px); box-shadow:0 14px 32px rgba(0,0,0,.16) }
}

/* 5) Плавающий CTA и «Прокрутить ниже» — не конфликтуют */
.float-cta{
  position: fixed;
  left: 50%; bottom: 16px; transform: translateX(-50%) translateY(0);
  z-index:60; padding:14px 22px; border-radius:999px; color:#fff;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  border:1px solid #ff314955; font-weight:900; letter-spacing:.02em;
  box-shadow:0 12px 30px rgba(255,45,61,.22);
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
}
.float-cta.is-visible{ opacity:1; pointer-events:auto }
.scroll-hint{
  position: fixed; right: 18px; bottom: 18px; z-index:61;
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:999px; background:#fff; color:#0b0d12;
  border:1px solid var(--line-ink); font-weight:800; cursor:pointer;
  box-shadow: 0 8px 20px rgba(16,24,40,.10);
}
.scroll-hint::before{
  content:""; position:absolute; inset:-4px; border-radius:999px;
  box-shadow:0 0 0 0 rgba(255,45,61,.18); pointer-events:none;
  animation: hintRing 2.2s ease-out infinite;
}
@keyframes hintRing{
  0%{   box-shadow:0 0 0 0   rgba(255,45,61,.18) }
  100%{ box-shadow:0 0 0 16px rgba(255,45,61,0) }
}
.scroll-hint svg{ animation: arrowBounce 1.4s ease-in-out infinite }
@keyframes arrowBounce{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(3px)} }
@media (max-width: 520px){
  .float-cta{ max-width:92vw; text-align:center; padding:12px 16px; font-size:14px;
    bottom: calc(env(safe-area-inset-bottom,0px) + 16px); }
  .scroll-hint{ right:12px; bottom: calc(env(safe-area-inset-bottom,0px) + 84px); }
}

/* 6) Текстовые блоки/типографика — гибкие размеры */
.page-head h1, h1{ font-size: clamp(26px, 3.6vw, 38px); line-height:1.1 }
.lead{ font-size: clamp(15px, 2.1vw, 18px) }
.section{ padding: clamp(20px, 6vw, 84px) 0 }

/* 7) Таблицы характеристик — горизонтальный скролл + не ломаем ряд */
.table{ display: table; width:100%; border-collapse:collapse }
.table th, .table td{ padding:10px 12px; border-bottom:1px solid #e9eef5; white-space:nowrap }
@media (max-width: 980px){
  .table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch }
  .table table{ width:auto }
}

/* 8) Модальные видео и медиа */
.product-video{ position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line-ink); background:#fff }
.product-video .thumb{ aspect-ratio:16/9; width:100%; object-fit:cover }
@media (max-width: 980px){
  .product-video .thumb{ aspect-ratio:auto; height: clamp(200px, 44vh, 360px); object-fit:cover }
}

/* 9) Якорь описания не заезжает под шапку */
#details{ scroll-margin-top: clamp(64px, 12vh, 110px) }

/* ======= GLOBAL MOBILE PATCH (site-wide) ======= */
:root{
  --bp-lg: 980px;
  --bp-sm: 640px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Контейнеры, секции, заголовки — адаптивные размеры */
.container{ width:min(1200px, 92vw) } /* дублируем, чтобы базово было одинаково */
.section{ padding: clamp(26px, 6vw, 84px) 0 }
h1{ font-size:clamp(28px,7.2vw,40px); line-height:1.15; letter-spacing:.01em }
h2{ font-size:clamp(22px,5.8vw,32px); line-height:1.15 }
h3{ font-size:clamp(18px,4.4vw,22px); line-height:1.2 }

/* Хлебные крошки — скроллятся в одну строку */
.breadcrumbs{ overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch }

/* ---------- ШАПКА / НАВИГАЦИЯ ---------- */
@media (max-width: 1100px){
  .header-inner{ gap:8px; flex-wrap:wrap; padding:12px 0 }
  .brand img{ height:26px }
  .nav{
    order:3; width:100%;
    display:flex; gap:16px; align-items:center;
    overflow-x:auto; padding-bottom:2px; scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .nav::-webkit-scrollbar{ display:none }
  .nav a{ flex:0 0 auto; padding:8px 0 }
  .nav a.active::after, .nav a:hover::after{ bottom:-6px } /* линия ближе на мобилке */
  .header-cta{ order:2; padding:10px 12px; white-space:nowrap }
}

/* ---------- СЕТКИ (карточки новостей/товаров/футер) ---------- */
/* Базовые сетки уже есть, усиливаем поведение на узких экранах */
@media (max-width: 980px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr) !important } }
@media (max-width: 720px){ .grid-3,.grid-4{ grid-template-columns:1fr !important } }

/* Футер — всегда аккуратно складывается в 2/1 колонки */
.footer .cols{ display:grid; gap:28px; grid-template-columns:repeat(4,minmax(0,1fr)) }
@media (max-width: 980px){ .footer .cols{ grid-template-columns:repeat(2,1fr) } }
@media (max-width: 640px){ .footer .cols{ grid-template-columns:1fr } }

/* Карточки — мягкие радиусы и плотные отступы на мобилке */
@media (max-width: 640px){
  .card{ border-radius:14px; padding:clamp(14px, 4vw, 18px) }
}

/* ---------- СТРАНИЦЫ КАТАЛОГА/КАТЕГОРИЙ ---------- */
/* Высота превью в карточках товара — ниже на мобиле */
.product .thumb{ height: clamp(200px, 44vw, 260px) }

/* На странице кейса есть 2-колоночная сетка inline-стилем — принудительно складываем */
@media (max-width: 860px){
  .grid[style*="grid-template-columns:1.2fr 1fr"],
  .grid[style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
}

/* ---------- ГАЛЕРЕИ/СЛАЙДЫ ---------- */
/* Продуктовая галерея уже адаптируется — чуть ниже высота на очень узких */
@media (max-width: 640px){
  .product-gallery .pg-viewport{ height: clamp(200px, 52vw, 340px) }
}
/* Слайды "Кто мы?"— подстраиваем безопасную зону снизу */
@media (max-width: 640px){
  .deck-stage{ padding-bottom: max(12px, var(--safe-bottom)) }
}

/* ---------- ФОРМЫ, ТАБЛИЦЫ, КУКИ ---------- */
input, select, textarea{ width:100% }
.form-row{ display:grid; gap:12px; grid-template-columns:1fr 1fr }
@media (max-width: 720px){ .form-row{ grid-template-columns:1fr } }

.cookie{
  left: max(12px, 4vw); right: max(12px, 4vw);
  bottom: max(12px, calc(4vw + var(--safe-bottom)));
}

/* ---------- МЕЛОЧИ УДОБСТВА ---------- */
/* Крупнее клики по ссылкам: */
a, .btn{ min-height:40px; display:inline-flex; align-items:center }
/* Чуть больше «воздуха» в .page-head на телефонах: */
@media (max-width: 640px){ .page-head{ padding:26px 0 12px } }

/* ---------- СТРАХОВКА ДЛЯ СИЛЬНО УЗКИХ ЭКРАНОВ ---------- */
@media (max-width: 380px){
  .header-cta{ padding:8px 10px; font-size:14px }
  .brand img{ height:24px }
}

/* ===== PRODUCT FIX PACK v2 — стабильная адаптация ===== */
:root{ --header-h: 66px; }
@media (min-width:981px){ :root{ --header-h: 74px; } }

/* Якорь описания всегда виден (из-за липкой шапки/хедера) */
#details{ scroll-margin-top: calc(var(--header-h) + 16px); }

/* ---------- Сетка верхнего блока товара ---------- */
.section--paper .media-two{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(340px, 430px);
  grid-template-areas:
    "gallery sidebar"
    "video   sidebar";
  gap: 20px;
  align-items:start;
}
.area-gallery{ grid-area: gallery }
.area-video  { grid-area: video }
.area-sidebar{
  grid-area: sidebar;
  position: sticky;
  top: calc(var(--header-h) + 12px);
  align-self:start;
}
@media (min-width:1480px){
  .section--paper .media-two{ grid-template-columns: minmax(0,1fr) minmax(380px, 480px); gap:24px; }
}
@media (max-width:980px){
  .section--paper .media-two{
    grid-template-columns:1fr;
    grid-template-areas: "gallery" "video" "sidebar";
    gap:16px;
  }
  .area-sidebar{ position:static; top:auto }
}

/* ---------- Галерея: аккуратно на десктопе, без обрезания на мобиле ---------- */
.section--paper .product-gallery{ display:grid; gap:12px }
.section--paper .product-gallery .pg-viewport{
  position:relative; overflow:hidden; border-radius:14px;
  border:1px solid var(--line-ink); background:#fff;
  height: clamp(300px, 34vw, 520px);
  box-shadow: 0 8px 22px rgba(16,24,40,.06);
}
.section--paper .product-gallery .pg-slide{ height:100% }
.section--paper .product-gallery .pg-slide img{
  width:100%; height:100%; object-fit: cover;
}
@media (max-width:980px){
  .section--paper .product-gallery .pg-viewport{ height: clamp(240px, 48vh, 420px); }
  .section--paper .product-gallery .pg-slide img{ object-fit: contain; background:#fff; }
}
/* Миниатюры — лента со снапом на телефоне, равномерная сетка на ширине */
.section--paper .product-gallery .pg-thumbs{
  display:flex; gap:10px; margin-top:10px; overflow-x:auto; padding-bottom:6px;
  -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory;
}
.section--paper .product-gallery .pg-thumb{
  flex:0 0 96px; height:72px;
  padding:0; border:1px solid var(--line-ink); border-radius:12px; overflow:hidden; background:#fff;
  scroll-snap-align:center;
  transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.section--paper .product-gallery .pg-thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.section--paper .product-gallery .pg-nav{ z-index:2 }

/* ---------- Блок действий/кнопки ---------- */
.product-actions{ display:grid; gap:12px }
@media (max-width:720px){
  .product-actions .btn, .product-actions .back{ width:100%; justify-content:center }
}
.retail-row{ display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap }
.product-actions .btn--market{
  background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; border-radius:0 !important;
  line-height:0; display:inline-flex; align-items:center; justify-content:center;
}
.product-actions .market-icon{ height:clamp(44px, 7.2vw, 64px); width:auto; object-fit:contain; }

/* ---------- Пассивная анимация CTA (мягкая) ---------- */
@keyframes brxCtaBreath{
  0%,100%{ transform:translateY(0); box-shadow:0 10px 26px rgba(0,0,0,.12) }
  50%    { transform:translateY(-1px); box-shadow:0 14px 32px rgba(0,0,0,.16) }
}
.brx-cta, .float-cta{
  animation: brxCtaBreath 3.6s ease-in-out infinite;
  will-change: transform, box-shadow;
}
@media (prefers-reduced-motion: reduce){
  .brx-cta, .float-cta, .scroll-hint{ animation:none !important }
}

/* ---------- Плавающий CTA + «Прокрутить ниже» (не конфликтуют) ---------- */
.float-cta{
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 60;
  padding: 14px 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#fff; border:1px solid #ff314955;
  font-weight: 900; letter-spacing: .02em;
  box-shadow: 0 12px 30px rgba(255,45,61,.22);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.float-cta.is-visible{ opacity:1; pointer-events:auto }

.scroll-hint{
  position: fixed; right: 18px; bottom: 18px; z-index: 61;
  display: inline-flex; align-items:center; gap: 10px;
  padding: 10px 14px; border-radius: 999px;
  background:#fff; color:#0b0d12; border:1px solid var(--line-ink);
  font-weight: 800; cursor:pointer;
  box-shadow: 0 8px 20px rgba(16,24,40,.10);
}
/* Пульс-кольцо и лёгкий bounce у стрелки */
.scroll-hint::before{
  content:""; position:absolute; inset:-4px; border-radius:999px;
  box-shadow: 0 0 0 0 rgba(255,45,61,.18); pointer-events:none;
  animation: hintRing 2.2s ease-out infinite;
}
@keyframes hintRing{
  0%{   box-shadow:0 0 0 0   rgba(255,45,61,.18) }
  100%{ box-shadow:0 0 0 16px rgba(255,45,61,0) }
}
.scroll-hint svg{ animation: arrowBounce 1.4s ease-in-out infinite }
@keyframes arrowBounce{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(3px)} }

/* Safe-area и разлёт на очень узких */
@media (max-width:520px){
  .float-cta{
    max-width:92vw; text-align:center; padding:12px 16px; font-size:14px;
    bottom: calc(env(safe-area-inset-bottom,0px) + 16px);
  }
  .scroll-hint{
    right:12px; bottom: calc(env(safe-area-inset-bottom,0px) + 84px);
  }
}

/* ---------- Таблицы/контент внизу карточки ---------- */
.table{ display: table; width:100%; border-collapse:collapse }
.table th, .table td{ padding:10px 12px; border-bottom:1px solid #e9eef5; white-space:nowrap }
@media (max-width:980px){
  .table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch }
}
/* ===== FIX: desktop-mode on phones (force mobile layout on touch) ===== */
@media (hover: none) and (pointer: coarse){
  /* 0) Базовое: не даём странице «уменьшаться» */
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 16px; }               /* читаемый минимум */
  .container { width: min(96vw, 1200px); }/* чуть шире контейнер на телефонах с "полной версией" */

  /* 1) Карточка товара — всегда одна колонка */
  .section--paper .media-two{
    display:grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "gallery" "video" "sidebar" !important;
    gap: 16px !important;
  }
  .area-sidebar{ position: static !important; top:auto !important; }

  /* 2) Галерея: без обрезания и с нормальной высотой */
  .section--paper .product-gallery .pg-viewport{
    height: clamp(240px, 48vh, 420px) !important;
  }
  .section--paper .product-gallery .pg-slide img{
    object-fit: contain !important;
    background:#fff;
  }

  /* 3) Кнопки в карточке — во всю ширину */
  .product-actions .btn,
  .product-actions .back { width:100%; justify-content:center; }

  /* 4) Подсказки/CTA — не конфликтуют внизу */
  .float-cta{
    max-width:92vw; text-align:center; padding:12px 16px; font-size:14px;
    left:50%; transform:translateX(-50%); bottom: calc(env(safe-area-inset-bottom,0px) + 16px);
  }
  .scroll-hint{
    right:12px; bottom: calc(env(safe-area-inset-bottom,0px) + 84px);
  }
}

/* ===== Safety: ничего не «выпирает» из сетки ===== */
.section--paper .media-two > *{ min-width:0; }               /* запрещаем растягивать колонки */
.area-video, .area-gallery, .area-sidebar{ min-width:0; }    /* страховка для грид-детей */
.section--paper .product-video{ width:100%; max-width:100%; overflow:hidden; }
.section--paper .product-video iframe,
.section--paper .product-video video{
  width:100%; height:auto; display:block; aspect-ratio:16/9;
}
@supports not (aspect-ratio: 16/9){
  .section--paper .product-video iframe,
  .section--paper .product-video video{ height: calc(100vw * 9 / 16); }
}

/* ===== Убираем горизонтальный скролл/вылеты контента ===== */
.section--paper, .page, body { overflow-x: clip; } /* clip вместо hidden, чтобы не ломать position:sticky */

/* ==== WIDE DESKTOP FIX (fullscreen) ==== */
@media (min-width: 1280px){
  .container{ width: min(1360px, 92vw); } /* было 1200px */
}
@media (min-width: 1480px){
  .container{ width: min(1440px, 92vw); } /* ещё чуть шире на 2K */
}

/* === FIX: выравнивание карточки товара (09.10) ================== */
/* Левая колонка: большой кадр → миниатюры; справа — липкий сайдбар */
.media-two{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,480px) !important;
  grid-template-areas:
    "gallery sidebar"
    "thumbs  sidebar"
    "video   sidebar" !important;
  gap:16px !important;
  align-items:start;
}

/* Правая колонка не «уезжает» под шапку */
.area-sidebar{
  position:sticky;
  top:76px !important;      /* под высоту хедера */
  align-self:start;
}

/* Миниатюры не режутся и одной высоты */
.product-gallery .pg-thumb{ height:96px !important; }
.product-gallery .pg-thumb img{
  width:100%; height:100%;
  object-fit:contain !important;   /* было cover → резало края */
  background:#fff;
}

/* Большой кадр всегда вписан, без прыжков по высоте */
.product-gallery .pg-viewport{
  height:clamp(320px, 38vw, 520px) !important;
}

/* === PRODUCT: фасовки — ровные карточки ========================= */

/* Сетка фасовок заполняется по высоте строки */
.pack-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  align-items:stretch;
}
@media (max-width:900px){ .pack-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ .pack-grid{ grid-template-columns:1fr } }

/* Базовая карточка фасовки */
.pack-card{
  display:grid;
  grid-template-rows: auto auto 1fr auto; /* заголовок, мета, свободное, цены */
  gap:8px;
  padding:14px;
  height:100%;
  border:1px solid var(--line-ink);
  border-radius:14px;
  background:#fff;
  box-shadow:0 6px 16px rgba(16,24,40,.06);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pack-card:hover,
.pack-card:focus-within{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(16,24,40,.12);
}

/* Активная карточка (выбранный вариант) */
.pack-card.is-active{
  border-color:#ef4444;                 /* красная рамка как на макете */
  box-shadow:0 12px 28px rgba(239,68,68,.15);
}

/* Верхняя строка: заголовок слева, бейдж справа (рост/скидка) */
.pack-top{
  display:flex;
  align-items:center;
  gap:8px;
}
.pack-title{
  font-weight:800;
  font-size:14px;
  line-height:1.2;
  min-height:2.4em;                      /* 2 строки → одинаковая высота */
  display:flex;
  align-items:center;
}
.pack-badge{                              /* +9% / −26% */
  margin-left:auto;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  background:#e8f5e9;
  color:#0a7a41;
}
.pack-badge.--neg{ background:#fdecec; color:#c1272d }  /* для минусовых */

/* Мета-строка под заголовком (например «+ кисточка», «за 0,5 кг») */
.pack-meta{
  color:#6b7280;
  font-size:12px;
  font-weight:700;
}

/* Блок цен всегда у нижнего края и выровнен по базовой линии */
.pack-prices{
  margin-top:auto;
  display:flex;
  align-items:flex-end;                  /* базовая линия */
  gap:12px;
  flex-wrap:wrap;
}
.pack-price-main{
  font-weight:900;
  font-size:18px;
  line-height:1;
}
.pack-price-kg{
  font-size:12px;
  color:#6b7280;
  margin-bottom:2px;                     /* чтобы «/ кг» шёл на одной линии */
}

/* Широкая карточка (Бочка 1 т и т.п.) — аккуратно по центру */
.pack-card--full{
  grid-column:1 / -1;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
}
.pack-card--full .pack-prices{ margin-top:0 }

/* Страховка от «пляски» внутри: */
.pack-grid > *{ min-width:0 }
.pack-card *{ min-height:0 }             /* чтобы длинные слова не ломали высоту */

/* Если изображения/иконки внутри карточек — не даём им тянуть высоту */
.pack-card img{ max-height:36px; object-fit:contain }
/* === FIX: выравнивание карточки товара ===================== */
.media-two{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,480px);
  grid-template-areas:
    "gallery sidebar"
    "thumbs  sidebar";
  gap:16px;
  align-items:start;
}
@media (max-width:980px){
  .media-two{
    grid-template-columns:1fr;
    grid-template-areas:"gallery" "thumbs" "sidebar";
  }
}
.area-sidebar{ position:sticky; top:76px; align-self:start }
@media (max-width:980px){ .area-sidebar{ position:static; top:auto } }

/* Галерея: стабильная высота, картинка целиком, центр */
.product-gallery{ --pg-pad: clamp(12px, 1.6vw, 24px); }
.product-gallery .pg-viewport{
  aspect-ratio: 4 / 3;
  border:1px solid var(--line-ink);
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 22px rgba(16,24,40,.06);
}
.product-gallery.is-portrait .pg-viewport{ aspect-ratio:3/4 }
.product-gallery.is-square   .pg-viewport{ aspect-ratio:1/1 }

.product-gallery .pg-slide{ display:grid; place-items:center; padding:var(--pg-pad) }
.product-gallery .pg-slide img{
  width:100%; height:100%;
  object-fit:contain; object-position:center;
  background:#fff; transform:none !important;
}

/* Миниатюры: одинаковая высота, без кропа, ровная сетка/лента */
.pg-thumbs{ display:flex; flex-wrap:wrap; gap:14px; margin-top:14px }
.pg-thumb{
  width:96px; height:96px; border-radius:14px;
  border:1px solid var(--line-ink);
  background:#fff; display:grid; place-items:center; overflow:hidden;
  opacity:.9; transition:opacity .2s, transform .2s, box-shadow .2s;
}
.pg-thumb img{ width:100%; height:100%; object-fit:contain; object-position:center; background:#fff }
.pg-thumb.is-active{ opacity:1; transform:translateY(-3px); box-shadow:0 10px 22px rgba(16,24,40,.14) }
@media (max-width:1180px){ .pg-thumb{ width:84px; height:84px } }
@media (max-width:780px){  .pg-thumb{ width:68px; height:68px } }
@media (max-width:520px){  .pg-thumb{ width:56px; height:56px } }

/* Действия: маркетплейсы крупно и без «плиток» */
.product-actions{ display:grid; gap:12px }
.product-actions .retail-row{ display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap }
.product-actions .btn--market{ background:transparent !important; border:none !important; padding:0 !important; line-height:0 }
.product-actions .btn--market .market-icon{
  display:block; height:clamp(60px, 9vw, 76px); width:auto;
  object-fit:contain; object-position:center;
  transform: scale(var(--icon-scale,1)); transition: transform .16s ease;
}
.product-actions .btn--market:hover .market-icon{ transform:scale(calc(var(--icon-scale,1)*1.05)) }
.product-actions .btn--market .market-icon.icon--ozon{ --icon-scale:1.12; } /* выровнять OZON против WB */

/* Фасовки: карточки одинаковой высоты, аккуратные бейджи */
.packs{ display:grid; gap:10px; margin:8px 0 2px }
.pack-grid{ display:grid; gap:10px; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch }
@media (max-width:900px){ .pack-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ .pack-grid{ grid-template-columns:1fr } }

.pack-card{
  position:relative; display:grid; gap:8px; padding:14px; height:100%;
  border:1px solid var(--line-ink); border-radius:14px; background:#fff;
  box-shadow:0 6px 16px rgba(16,24,40,.06);
  transition:transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.pack-card:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(16,24,40,.12) }
.pack-card.is-selected{ border-color:#D11F3E; box-shadow:0 12px 26px rgba(209,31,62,.16) }
.pack-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:24px }
.pack-prices{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap }
.pack-card--full{ grid-column:1/-1; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px }
@media (max-width:520px){ .pack-card--full{ grid-template-columns:1fr } .pack-card--full .pack-prices{ text-align:left } }

/* Цена сверху — крупнее и без дрыга */
#productCard .price{ display:grid; gap:4px }
#productCard .price .price-main{ font-weight:900; font-size:clamp(32px,4.4vw,46px); line-height:1.05; letter-spacing:.01em }

/* ==== BOLDREX Product — финальная выравнивающая правка ==== */
#details .section--paper{ padding:34px 0 28px }
.media-two{ gap:16px }

/* Галерея: строго по рамке, без «обрезаний» и белых пустот справа */
.product-gallery{ --pg-ratio: 4/3; --pg-pad: clamp(12px, 1.6vw, 24px) }
.product-gallery .pg-viewport{ aspect-ratio: var(--pg-ratio); border:1px solid var(--line-ink); background:#fff; border-radius:16px; overflow:hidden }
.product-gallery .pg-track{ display:flex; height:100%; transition: transform .55s cubic-bezier(.22,1,.36,1) }
.product-gallery .pg-slide{ min-width:100%; height:100%; display:grid; place-items:center; padding:var(--pg-pad) }
.product-gallery .pg-slide img{ width:100%; height:100%; object-fit:contain; object-position:center; background:#fff; transform:none !important }
.pg-thumbs{ display:flex; flex-wrap:wrap; gap:14px; margin-top:14px }
.pg-thumb{ width:96px; height:96px; border:1px solid var(--line-ink); background:#fff; border-radius:14px; overflow:hidden }
.pg-thumb img{ width:100%; height:100%; object-fit:contain }

/* Стрелки и прогресс всегда внутри рамки */
.product-gallery .pg-nav{ top:50%; transform:translateY(-50%) }
.product-gallery.pg--empty .pg-nav,
.product-gallery.pg--single .pg-nav,
.product-gallery.pg--empty .pg-progress,
.product-gallery.pg--single .pg-progress{ display:none }

/* Правый столбец липкий и не «растягивает» высоту */
.area-sidebar{ position:sticky; top:14px; align-self:start }
@media (max-width:980px){ .area-sidebar{ position:static } }

/* Кнопки маркетплейсов — только логотип, никаких «плиток» */
.product-actions .btn--market{ background:transparent !important; border:none !important; padding:0 !important; box-shadow:none !important; line-height:0 }
.product-actions .btn--market .market-icon{ height:clamp(60px,9vw,76px); width:auto; display:block }

/* Цена крупнее, подпись плотнее, без лишних отступов */
#productCard .price{ display:grid; gap:4px; margin-bottom:6px }
#productCard .price .price-main{ font-weight:900; font-size:clamp(32px,4.4vw,46px); line-height:1.05 }
#productCard .price small{ color:#6b7280; font-weight:700; font-size:13px }

/* Фасовки: без разъезда, «бочка» — на всю строку */
.pack-grid{ gap:10px; grid-template-columns:repeat(3,minmax(0,1fr)) }
@media (max-width:900px){ .pack-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ .pack-grid{ grid-template-columns:1fr } }
.pack-card--full{ grid-column:1/-1; grid-template-columns:auto 1fr auto }
@media (max-width:520px){ .pack-card--full{ grid-template-columns:1fr } }


/* ====================== FIX: product sidebar layout ====================== */
/* 1) В узком правом столбце всегда одна колонка фасовок */
.area-sidebar .pack-grid{
  grid-template-columns: 1fr !important;
}

/* 2) Заголовок + бейджи: не распираем контейнеры, даём переносы */
.area-sidebar .pack-top{ min-width:0 }
.area-sidebar .pack-top > *{ min-width:0 }              /* чтобы flex-дети могли сжиматься */
.area-sidebar .pack-label{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.area-sidebar .badges{
  max-width:100%; flex-wrap:wrap; gap:6px;
}
.area-sidebar .badge-chip{
  /* В сайдбаре разрешаем перенос строк у длинных подписей */
  white-space:normal; overflow-wrap:anywhere;           /* «Лучшая цена/кг» не вылезет */
  font-size:11px; padding:3px 7px; line-height:1.2;
}

/* 3) Широкая карточка фасовки (тонна) — в сайдбаре растягиваем на одну колонку */
.area-sidebar .pack-card--full{
  grid-template-columns: 1fr !important;
}

/* 4) Ценовой блок: не даём ему разъезжаться и вылезать */
#productCard .price{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}
#productCard .price .price-main{ line-height:1 }

/* 5) Слегка ужимаем цену/кг в сайдбаре для гармонии */
.area-sidebar .price-kg{ font-size:12px }