/* ───────────── powerpullup.pro — дизайн 2.0: компоненти (Figma «PowerPullUp 2.0») ─────────────
   Loaded after components.css/shop.css. Tokens live in styles.css. Breakpoints:
   desktop ≥1025 · tablet 761–1024 · phone ≤760. */

/* ── shared section scaffolding ───────────────────────────────────────── */
.sec{ padding-block: var(--sec-pad); }
.sec-gray{ background: var(--surface-2); }
.sec.is-dark{ background: var(--dark); }
.sec-h{ max-width: 760px; margin-bottom: var(--head-gap); }
.sec-h .lead{ margin: 12px 0 0; }
.sec-more{ display:flex; justify-content:center; margin-top: 40px; }
.kicker::before{ display:none; }
.is-dark .kicker{ color: var(--accent); }
.kicker-plain{ display:block; }
.lead{ margin: 0; }

/* image frames + placeholders (mockup photos to be supplied) */
.frame{ position:relative; overflow:hidden; border-radius: 24px; background: #E4E4E0; }
.frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.frame-dark{ background: var(--dark-card); border:1px solid var(--line-dark); }
.frame-label{ position:absolute; left:16px; bottom:14px; right:16px; font-size:13px; line-height:18px; font-weight:500; color: var(--ink-faint); }

/* horizontal scroll track (reasons, reviews, blog) */
.track{ display:grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--grid-gap)) / 3);
  gap: var(--grid-gap); overflow-x:auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
.track > *{ scroll-snap-align: start; }

/* ── header ───────────────────────────────────────────────────────────── */
.topbar{ background: var(--dark-card); color: var(--on-dark-muted); font-size:13px; line-height:18px; font-weight:500; }
.topbar-in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: 8px 24px; height:auto; padding-block:10px; }
.top-usp{ display:inline-flex; align-items:center; gap:8px; opacity:1; }
.top-usp svg{ color: var(--accent); flex:none; }

.header{ position: sticky; top:0; z-index: 80; background: var(--dark); border-bottom: 1px solid var(--line-dark);
  backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; }
.header.scrolled{ border-color: var(--line-dark); box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.hdr{ display:flex; align-items:center; justify-content:space-between; gap: 16px 32px; padding-block: 18px; }
.hdr-l{ display:flex; align-items:center; gap: 16px 36px; min-width:0; }
.hdr-r{ display:flex; align-items:center; gap: 12px; }
.brand{ display:flex; flex-direction:column; gap:2px; flex:none; }
.brand-mark{ font-family: var(--font-display); font-weight:700; font-size:24px; line-height:28px; letter-spacing:-.02em; color: var(--accent); white-space:nowrap; }
.brand-mark small{ font-size:13px; color:#0078FF; }
.brand-logo{ display:block; height:28px; width:auto; align-self:flex-start; }
.brand-tag{ font-size:11px; line-height:14px; font-weight:600; color: var(--on-dark); }
.hdr-cat{ padding: 0 20px; }
.hdr-nav{ display:flex; flex-wrap:wrap; gap: 8px 28px; }
.hdr-nav a{ color: var(--on-dark); font-weight:600; font-size:15px; line-height:20px; white-space:nowrap; }
.hdr-nav a:hover{ color: var(--accent); }
.hdr-phone{ display:flex; align-items:center; gap:12px; margin-right:8px; color: var(--on-dark); }
.hdr-ic-round{ width:40px; height:40px; border-radius:999px; background: var(--dark-card); display:grid; place-items:center; flex:none; }
.hdr-phone-txt{ display:flex; flex-direction:column; }
.hdr-phone-txt b{ font-weight:600; font-size:16px; line-height:22px; white-space:nowrap; }
.hdr-phone-txt i{ font-style:normal; color: var(--on-dark-muted); font-size:13px; line-height:18px; font-weight:500; white-space:nowrap; }
.hdr-ic{ position:relative; width:44px; height:44px; border-radius:999px; border:1px solid var(--line-dark); background:transparent;
  color: var(--on-dark); display:grid; place-items:center; padding:0; flex:none; transition: border-color .2s; }
.hdr-ic:hover{ border-color: var(--on-dark-muted); }
.cart-badge{ position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 5px; border-radius:999px;
  background: var(--accent); color: var(--accent-ink); font: 700 12px/20px var(--font-body); text-align:center; border:none; }
.hdr-burger{ display:none; width:44px; height:44px; border-radius:999px; border:none; background: var(--accent); color: var(--accent-ink); place-items:center; padding:0; }
.header .lang-desk, .header .lang-desk *{ color: var(--on-dark); border-color: var(--line-dark); }

.mobile-menu{ --bg: var(--dark); --surface: var(--dark-card); --surface-2: var(--dark-card); --ink: var(--on-dark);
  --ink-soft: var(--on-dark-muted); --ink-faint: var(--on-dark-muted); --line: var(--line-dark); --line-2:#3D3E3E;
  background: var(--dark); color: var(--on-dark); }
.mobile-menu-head{ height:auto; padding-block:12px; border-bottom:1px solid var(--line-dark);
  /* .wrap's auto side margins made the head shrink to its content inside the flex drawer
     (logo and close button squeezed together in the middle) — span the full drawer width. */
  width:100%; max-width:none; margin:0; gap:16px; }
.mobile-nav a{ font-family: var(--font-display); font-weight:700; font-size:20px; line-height:28px; border-bottom:1px solid var(--line-dark); color: var(--on-dark); }
.mobile-nav a svg{ color: var(--accent); }
.mobile-menu-hours{ text-align:center; font-size:13px; color: var(--on-dark-muted); }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero2{ --hw: min(52vw, 760px); position:relative; overflow:hidden; padding: 96px 0 40px; background: linear-gradient(90deg, #121212 0%, #161616 45%, #2a2b2b 100%); }
/* Photo: the bar sits ~64px below the hero top (bar is at 56.5% of the image width from
   its top edge), the athlete fills the right half down to the stats bar (Figma). */
.hero2-bg{ position:absolute; width: var(--hw); height:auto; top: calc(64px - var(--hw) * 0.565);
  right: max(0px, calc((100% - 1200px) / 2 - 83px));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 90%, transparent 100%);
  pointer-events:none; }
.hero2::after{ content:""; position:absolute; inset:auto 0 0 0; height:150px; background: linear-gradient(to top, #121212 0, #121212 72px, rgba(18,18,18,0) 100%); pointer-events:none; }
.hero2-in{ position:relative; z-index:1; display:flex; flex-direction:column; gap: 76px; }
.hero2-copy{ display:flex; flex-direction:column; align-items:flex-start; gap: 20px; max-width: 680px; }
.hero2-media{ display:none; }
.pill-badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; border:1px solid var(--line-dark);
  background: rgba(30,31,31,.6); font-size:13px; line-height:18px; font-weight:500; color: var(--on-dark); }
.pill-badge svg{ color: var(--accent); }
.hero2-h{ color: var(--on-dark); }
.hero2-h .hl{ color: var(--accent); display:block; }
.hero2 .lead{ color: var(--on-dark-muted); max-width: 30em; }
.hero2-actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top:8px; }
.hero2 .btn-ghost{ color: var(--on-dark); border-color: var(--on-dark); }
.hero2 .btn-ghost:hover{ background: rgba(255,255,255,.08); }
.rating-line{ display:inline-flex; align-items:center; gap:10px; font-size:13px; line-height:18px; font-weight:600; color: var(--on-dark); }
.stars5{ display:inline-flex; gap:2px; color: var(--accent); }
.hero2-stats{ display:grid; grid-template-columns: repeat(4, 1fr); margin:0; padding: 28px 0; background: rgba(26,27,27,.86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border:1px solid var(--line-dark); border-radius: 24px; }
.hero2-stats > div{ padding: 0 36px; border-left:1px solid var(--line-dark); }
.hero2-stats > div:first-child{ border-left:0; }
.hero2-stats dt{ font-family: var(--font-display); font-weight:700; font-size:36px; line-height:44px; letter-spacing:-.01em; color: var(--on-dark); }
.hero2-stats dd{ margin:4px 0 0; font-size:15px; line-height:22px; color: var(--on-dark-muted); }

/* ── categories ───────────────────────────────────────────────────────── */
.sec-h-row{ max-width:none; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.sec-h-btn{ flex:none; }
.cat2-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
.cat2{ position:relative; display:flex; align-items:flex-end; aspect-ratio: 282 / 360; background: var(--dark); color: var(--on-dark);
  border-radius: 20px; overflow:hidden; transition: transform .2s, box-shadow .2s; }
.cat2:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cat2 > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .4s; }
.cat2:hover > img{ transform: scale(1.03); }
.cat2::after{ content:""; position:absolute; inset:45% 0 0; background: linear-gradient(to top, rgba(18,18,18,.92), rgba(18,18,18,0)); }
.cat2-foot{ position:relative; z-index:1; width:100%; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding: 20px; }
.cat2-name{ font-weight:600; font-size:20px; line-height:26px; }
.cat2-go{ width:40px; height:40px; border-radius:999px; background: var(--accent); color: var(--accent-ink); display:grid; place-items:center; flex:none; }

/* ── filter chips ─────────────────────────────────────────────────────── */
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 32px; }
.filter{ min-height:40px; height:auto; padding:0 16px; border-radius:999px; border:1px solid var(--line); background: var(--surface);
  color: var(--ink); font: 600 14px/20px var(--font-body); white-space:nowrap; }
.filter:hover{ border-color: var(--ink); color: var(--ink); }
.filter.active{ background: var(--ink); border-color: var(--ink); color: #fff; }

/* ── product card (shared: home, catalog, category) ───────────────────── */
.prod-grid{ gap: var(--grid-gap); }
.prod-grid-4{ grid-template-columns: repeat(4, 1fr); }
.prod-grid-3{ grid-template-columns: repeat(3, 1fr); }
.prod{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden;
  display:flex; flex-direction:column; transition: box-shadow .2s, border-color .2s, transform .2s; }
.prod:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.prod-media{ position:relative; display:block; aspect-ratio: 1 / 1; background: var(--surface-2); }
.prod-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.prod-badge{ position:absolute; top:12px; left:12px; padding:4px 10px; border-radius:999px; background: var(--dark); color: var(--accent);
  font: 700 12px/16px var(--font-body); letter-spacing:0; text-transform:none; }
.prod-badge.is-sale{ background: var(--accent); color: var(--accent-ink); }
.prod-oos{ position:absolute; top:12px; right:auto; left:12px; bottom:auto; width:auto; height:auto; z-index:1; padding:4px 10px; border-radius:999px; background:#fff; border:1px solid var(--line);
  font: 600 12px/16px var(--font-body); color: var(--ink-soft); }
.prod-body{ display:flex; flex-direction:column; gap:10px; padding:20px; flex:1; }
.prod-name{ margin:0; font-family: var(--font-body); font-weight:600; font-size:16px; line-height:24px; letter-spacing:0; }
.prod-name a{ color: var(--ink); }
.prod-name a:hover{ color: var(--ink-soft); }
.prod-rate{ display:inline-flex; align-items:center; gap:6px; font-size:13px; line-height:18px; font-weight:600; color: var(--ink-soft); }
.prod-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:4px; }
.prod-price{ display:flex; flex-direction:column; }
.prod-old{ font-size:13px; line-height:18px; color: var(--ink-faint); }
.prod-now{ font-family: var(--font-display); font-weight:700; font-size:22px; line-height:28px; letter-spacing:-.01em; white-space:nowrap; }
.prod-badge + .prod-oos{ top:44px; }
.prod-buy{ padding: 0 16px; }
.prod-buy:disabled{ opacity:.45; cursor:not-allowed; }

/* ── consult ──────────────────────────────────────────────────────────── */
.consult{ display:grid; grid-template-columns: 1fr 1.1fr; background: var(--surface-2); border-radius: 28px; overflow:hidden; }
.consult-photo{ border-radius:0; min-height: 380px; }
.consult-photo img{ object-position: right center; }
.consult-body{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding: 48px; }
.consult-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
.consult-hours{ display:inline-flex; align-items:center; gap:8px; font-size:13px; line-height:18px; color: var(--ink-soft); }

/* ── about (dark) + why ───────────────────────────────────────────────── */
.about2{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items:center; }
.about2-copy{ display:flex; flex-direction:column; gap:16px; }
.about2-lead{ margin:0; font-size:18px; line-height:28px; font-weight:500; color: var(--on-dark); }
.about2-p{ margin:0; color: var(--on-dark-muted); }
.about2-photo{ aspect-ratio: 4 / 3; }
.about2-why{ margin: 64px 0 24px; font-family: var(--font-body); font-weight:600; font-size:20px; line-height:28px; color: var(--on-dark); }
.why-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.why{ display:flex; flex-direction:column; gap:8px; padding:24px; background: var(--dark-card); border:1px solid var(--line-dark); border-radius:20px; }
.why-ic{ width:44px; height:44px; border-radius:12px; background: var(--accent); color: var(--accent-ink); display:grid; place-items:center; margin-bottom:8px; }
.why b{ font-size:16px; line-height:22px; color: var(--on-dark); }
.why span:last-child{ font-size:14px; line-height:20px; color: var(--on-dark-muted); }

/* ── 12 reasons ───────────────────────────────────────────────────────── */
.reason{ background: var(--surface); border:1px solid var(--line); border-radius:20px; overflow:hidden; display:flex; flex-direction:column; }
.reason-photo{ border-radius:0; aspect-ratio: 16 / 10; }
.reason-body{ padding:20px; }
.reason-body .kicker{ font-size:12px; }
.reason h3{ margin:8px 0; font-family: var(--font-body); font-weight:700; font-size:20px; line-height:28px; }
.reason p{ margin:0; font-size:15px; line-height:22px; color: var(--ink-soft); }

/* ── reviews ──────────────────────────────────────────────────────────── */
.rev2{ display:grid; grid-template-columns: 300px 1fr; gap: var(--grid-gap); align-items:stretch; }
.rev2-score{ display:flex; flex-direction:column; gap:10px; padding:28px; border-radius:24px; background: var(--dark); }
.rev2-num{ display:flex; align-items:baseline; gap:8px; margin-top:6px; }
.rev2-num b{ font-family: var(--font-display); font-weight:700; font-size:64px; line-height:68px; color: var(--on-dark); }
.rev2-num i{ font-style:normal; font-size:16px; color: var(--on-dark-muted); }
.rev2-basis{ font-size:14px; line-height:20px; color: var(--on-dark-muted); }
.rev2-ok{ display:inline-flex; align-items:center; gap:8px; margin-top:auto; font-weight:600; font-size:14px; color: var(--on-dark); }
.rev2-ok svg{ color: var(--accent); }
.rev2 .rev-grid{ grid-template-columns:none; gap: var(--grid-gap); grid-auto-columns: calc((100% - 2 * var(--grid-gap)) / 3); }
.rev2 .rev{ margin:0; padding:24px; background: var(--surface); border:1px solid var(--line); border-radius:20px; display:flex; flex-direction:column; }
.rev2 .rev-quote{ display:none; }
.rev2 .stars{ gap:2px; margin:0; }
.rev2 .rev-text{ margin:12px 0 20px; font-size:16px; line-height:24px; }
.rev2 .rev-by{ margin-top:auto; }
.rev2 .rev-ava{ width:40px; height:40px; background: var(--surface-2); color: var(--ink); font: 600 16px/1 var(--font-body); }
.rev2 .rev-ava, .pd2-rev .rev-ava{ flex:none; overflow:hidden; padding:0; }
.rev2 .rev-ava img{ width:100%; height:100%; object-fit:cover; border-radius:999px; display:block; }
.rev2 .rev-by b{ font-size:15px; font-weight:600; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq2{ display:grid; grid-template-columns: 1fr 1.6fr; gap: 48px; align-items:start; }
.faq2-aside{ display:flex; flex-direction:column; align-items:flex-start; gap:20px; position:sticky; top:110px; }
.faq2 .faq-list{ display:flex; flex-direction:column; gap:10px; }
.faq2 .faq-item{ background: var(--surface); border:0; border-radius:14px; transition: box-shadow .2s; }
.faq2 .faq-item.open{ box-shadow: inset 0 0 0 1.5px var(--ink); }
.faq2 .faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; background:none; border:0;
  text-align:left; color: var(--ink); font: 600 16px/24px var(--font-body); }
.faq2 .faq-ic{ width:32px; height:32px; border-radius:999px; background: var(--surface-2); color: var(--ink); display:grid; place-items:center; flex:none; transform:none; }
.faq2 .faq-item.open .faq-ic{ background: var(--accent); transform:none; }
.faq2 .ic-minus, .faq2 .faq-item.open .ic-plus{ display:none; }
.faq2 .faq-item.open .ic-minus{ display:block; }
.faq2 .faq-a{ display:grid; grid-template-rows: 0fr; max-height:none; transition: grid-template-rows .25s ease; }
.faq2 .faq-a > p{ overflow:hidden; margin:0; padding:0 64px 0 20px; color: var(--ink-soft); font-size:15px; line-height:22px; }
.faq2 .faq-item.open .faq-a{ grid-template-rows: 1fr; }
.faq2 .faq-item.open .faq-a > p{ padding-bottom:18px; }

/* ── blog ─────────────────────────────────────────────────────────────── */
.post{ display:flex; flex-direction:column; gap:12px; }
.post-photo{ display:block; aspect-ratio: 16 / 10; border-radius:20px; }
.post h3{ margin:4px 0 0; font-family: var(--font-body); font-weight:700; font-size:18px; line-height:26px; }
.post p{ margin:0; font-size:15px; line-height:22px; color: var(--ink-soft); }
.post-more{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:15px; }

/* ── contacts ─────────────────────────────────────────────────────────── */
.contacts2{ display:grid; grid-template-columns: 1fr 1fr; gap:48px; align-items:start; }
.contact-list{ list-style:none; margin:32px 0 0; padding:0; display:flex; flex-direction:column; gap:20px; }
.contact-list li{ display:flex; align-items:center; gap:16px; }
.contact-ic{ width:48px; height:48px; border-radius:999px; background: var(--surface); border:1px solid var(--line); display:grid; place-items:center; flex:none; }
.contact-list i{ display:block; font-style:normal; font-size:13px; line-height:18px; color: var(--ink-faint); }
.contact-list b, .contact-list a{ font-weight:600; font-size:16px; line-height:24px; color: var(--ink); }
.contact-social{ display:flex; gap:12px; margin-top:28px; }
.contact-social .btn{ background: var(--surface); }
.contact-map{ aspect-ratio: 4 / 3; }
.contact-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ── SEO block ────────────────────────────────────────────────────────── */
.seo2{ max-width: 880px; }
.seo2-text p{ margin:16px 0 0; font-size:16px; line-height:26px; color: var(--ink-soft); }
.seo2-toggle{ display:none; margin:12px 0 0; padding:0; background:none; border:0; font: 600 15px/20px var(--font-body); color: var(--ink); text-decoration: underline; }
.seo2 .kicker{ margin-top:32px; }
.query-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.query-chips a{ padding:8px 14px; border-radius:999px; border:1px solid var(--line); background: var(--surface); font-size:14px; line-height:20px; font-weight:500; }
.query-chips a:hover{ border-color: var(--ink); }

/* ── footer ───────────────────────────────────────────────────────────── */
.footer{ background: var(--dark); color: var(--on-dark); padding: 72px 0 40px; border:0; margin:0; }
.ftr{ display:flex; flex-direction:column; gap:48px; }
.ftr-top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:48px; }
.ftr-brand{ display:flex; flex-direction:column; gap:20px; max-width:360px; }
.ftr-brand p{ margin:0; color: var(--on-dark-muted); }
.ftr-contacts{ display:flex; flex-direction:column; gap:4px; }
.ftr-contacts a{ color: var(--on-dark-muted); }
.ftr-contacts .ftr-phone{ font-weight:700; font-size:18px; line-height:26px; color: var(--on-dark); }
.ftr-col summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:default;
  font-size:13px; line-height:16px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color: var(--accent); }
.ftr-col summary::-webkit-details-marker{ display:none; }
.ftr-col summary svg{ display:none; transition: transform .2s; }
.ftr-col nav{ display:flex; flex-direction:column; gap:14px; margin-top:14px; }
.ftr-col nav a{ color: var(--on-dark); }
.ftr-col nav a:hover{ color: var(--accent); }
.ftr-app{ width:320px; max-width:100%; display:flex; flex-direction:column; gap:14px; padding:28px; border-radius:20px; background: var(--dark-card); border:1px solid var(--line-dark); }
.ftr-app > b{ font-size:18px; line-height:26px; }
.ftr-app p{ margin:0; color: var(--on-dark-muted); }
.store-badges{ display:flex; flex-wrap:wrap; gap:10px; }
.store-badge{ align-self:flex-start; display:flex; align-items:center; gap:10px; padding:10px 18px; border-radius:12px; background:#fff; color: var(--dark); }
.store-badge span{ display:flex; flex-direction:column; }
.store-badge i{ font-style:normal; font-size:12px; line-height:16px; font-weight:500; color:#6F6F6F; }
.store-badge b{ font-size:16px; line-height:20px; }
.ftr-bot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding-top:32px; border-top:1px solid var(--line-dark); }
.ftr-bot p{ margin:0; max-width:680px; font-size:13px; line-height:18px; color: var(--on-dark-muted); }
.ftr-bot p a{ text-decoration: underline; }
.ftr-social{ display:flex; gap:10px; }
.ftr-social a{ width:44px; height:44px; border-radius:999px; border:1px solid var(--line-dark); display:grid; place-items:center; }

/* ── "ask an expert" dialog ───────────────────────────────────────────── */
.lead-dlg{ border:0; border-radius:24px; padding:32px; width: calc(100% - 32px); max-width:440px; box-shadow: var(--shadow-lg); color: var(--ink); }
.lead-dlg::backdrop{ background: rgba(18,18,18,.6); }
.lead-dlg-x{ position:absolute; top:16px; right:16px; width:44px; height:44px; border-radius:999px; border:1px solid var(--line); background:#fff; display:grid; place-items:center; padding:0; }
.lead-dlg form{ display:flex; flex-direction:column; gap:14px; }
.lead-dlg h3{ margin:0 48px 0 0; font-size:22px; line-height:28px; }
.lead-dlg-text{ margin:0; font-size:15px; line-height:22px; color: var(--ink-soft); }
.lead-dlg .field{ display:block; }
.lead-dlg .field span{ display:block; margin-bottom:6px; font-size:13px; line-height:18px; font-weight:600; }
.lead-dlg .field input{ width:100%; height:48px; padding:0 14px; border-radius:12px; border:1px solid var(--line-2); font: 400 16px var(--font-body); color: var(--ink); background:#fff; }
.lead-dlg .field input:focus{ outline:2px solid var(--ink); outline-offset:0; border-color: var(--ink); }
.lead-dlg .field input.err{ border-color:#D92D20; }
.lead-dlg .field em{ display:block; margin-top:4px; font-style:normal; font-size:13px; color:#D92D20; }
.lead-dlg-fine{ margin:0; font-size:12px; line-height:16px; color: var(--ink-faint); }
.lead-dlg-done{ text-align:center; padding:12px 0; }
.lead-dlg-ic{ width:64px; height:64px; margin:0 auto 16px; border-radius:999px; background: var(--accent); display:grid; place-items:center; }
.lead-dlg-done h3{ margin:0 0 8px; }
.lead-dlg-done p{ margin:0; color: var(--ink-soft); }

/* ── tablet ───────────────────────────────────────────────────────────── */
@media (max-width: 1180px){
  .hdr-phone-txt{ display:none; }
  .hdr-phone{ margin-right:0; }
  .hdr-ic-round{ width:44px; height:44px; }
}
@media (max-width: 1024px){
  .topbar{ display:none; }
  .hdr{ padding-block:12px; }
  .hdr-cat, .hdr-nav, .header .lang-desk{ display:none; }
  .hdr-burger{ display:grid; }
  .brand-mark{ font-size:20px; line-height:24px; }
  .brand-logo{ height:22px; }
  .prod-grid-4{ grid-template-columns: repeat(3, 1fr); }
  .why-grid{ grid-template-columns: repeat(2, 1fr); }
  .hero2{ padding: 40px 0; background: var(--dark); }
  .hero2-bg, .hero2::after{ display:none; }
  .hero2-in{ gap:32px; }
  .hero2-media{ display:block; }
  /* framed crop: from the bar to the chest (Figma mobile) */
  .hero2-media .frame{ position:relative; overflow:hidden; aspect-ratio: 889 / 683; border-radius:20px; }
  .hero2-media .frame img{ position:absolute; inset:auto; width:119.5%; max-width:none; height:auto; left:-6.6%; top:-72.3%; object-fit:fill; }
  .hero2-stats{ grid-template-columns: repeat(2, 1fr); padding:0; overflow:hidden; background: var(--dark-card); }
  .hero2-stats > div{ padding:20px; }
  .hero2-stats > div:nth-child(3){ border-left:0; }
  .hero2-stats > div:nth-child(n+3){ border-top:1px solid var(--line-dark); }
  .cat2-grid{ grid-template-columns: repeat(2, 1fr); }
  .consult, .about2, .contacts2, .faq2{ grid-template-columns: 1fr; }
  .faq2-aside{ position:static; }
  .rev2{ grid-template-columns: 1fr; }
  .track, .rev2 .rev-grid{ grid-auto-columns: calc((100% - var(--grid-gap)) / 2); }
}
/* ── phone (mockup 390) ───────────────────────────────────────────────── */
@media (max-width: 760px){
  .hero2{ padding-top:28px; }
  /* phone order: badge → H1 → lead → photo → buttons → rating → stats */
  .hero2-in{ gap:16px; }
  .hero2-copy{ display:contents; }
  .hero2-copy .pill-badge{ order:1; align-self:flex-start; }
  .hero2-h{ order:2; }
  .hero2 .lead{ order:3; margin:0; }
  .hero2-media{ order:4; margin-top:8px; }
  .hero2-actions{ order:5; margin-top:8px; gap:12px; }
  .rating-line{ order:6; margin-top:8px; }
  .hero2-stats{ order:7; margin-top:16px; }
  .sec-h-btn{ display:none; }
  .hero2 .btn-ghost{ border-color:#3D3E3E; }
  .hero2-actions{ width:100%; flex-direction:column; }
  .hero2-actions .btn{ width:100%; }
  .hero2-stats{ grid-template-columns: repeat(2, 1fr); }
  .hero2-stats > div{ padding:16px; border-left:0; }
  .hero2-stats > div:nth-child(even){ border-left:1px solid var(--line-dark); }
  .hero2-stats > div:nth-child(n+3){ border-top:1px solid var(--line-dark); }
  .hero2-stats dt{ font-size:24px; line-height:32px; }
  .hero2-stats dd{ font-size:13px; line-height:18px; }

  /* edge-to-edge horizontal rails */
  .cat2-grid, .track, .chips-scroll{ margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut); }
  .cat2-grid{ display:grid; grid-auto-flow:column; grid-template-columns:none; grid-auto-columns: 200px; overflow-x:auto; scroll-snap-type:x mandatory; }
  .cat2-grid > *{ scroll-snap-align:start; }
  .cat2{ aspect-ratio: 200 / 260; }
  .cat2-foot{ padding:16px; }
  .cat2-name{ font-size:16px; line-height:20px; }
  .cat2-go{ width:36px; height:36px; }
  .chips-scroll{ flex-wrap:nowrap; overflow-x:auto; margin-bottom:20px; }
  .cat2-grid, .track, .chips-scroll{ scrollbar-width:none; }
  .cat2-grid::-webkit-scrollbar, .track::-webkit-scrollbar, .chips-scroll::-webkit-scrollbar{ display:none; }
  .track{ grid-auto-columns: 280px; }
  .rev2 .rev-grid{ grid-auto-columns: 280px; }

  .prod-grid, .prod-grid-4, .prod-grid-3{ grid-template-columns: repeat(2, 1fr); }
  .prod-body{ padding:12px; gap:8px; }
  .prod-name{ font-size:14px; line-height:20px; }
  .prod-now{ font-size:16px; line-height:22px; }
  .prod-buy{ width:44px; height:44px; padding:0; border-radius:999px; }
  .prod-buy span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .prod-badge{ top:8px; left:8px; font-size:11px; padding:3px 8px; }
  .prod-oos{ top:8px; left:8px; font-size:11px; padding:3px 8px; }
  .prod-badge + .prod-oos{ top:36px; }
  .sec-more .btn{ width:100%; }

  .consult-photo{ min-height:220px; }
  .consult-body{ padding:20px; }
  .consult-actions{ width:100%; flex-direction:column; }
  .consult-actions .btn{ width:100%; }
  .about2{ gap:24px; }
  .about2-lead{ font-size:16px; line-height:24px; }
  .about2-why{ margin:40px 0 16px; font-size:18px; }
  .why-grid{ gap:12px; }
  .why{ padding:16px; }
  .why b{ font-size:15px; line-height:20px; }
  .why span:last-child{ font-size:13px; line-height:18px; }
  .rev2-num b{ font-size:48px; line-height:52px; }
  .faq2{ gap:24px; }
  .faq2 .faq-q{ padding:14px 16px; font-size:15px; line-height:20px; }
  .faq2 .faq-a > p{ padding:0 16px; }
  .faq2{ display:flex; flex-direction:column; }
  .faq2-aside{ display:contents; }
  .faq2-aside .lead{ display:none; }
  .faq2-aside .btn{ order:3; width:100%; }
  .faq2 .faq-list{ order:2; }
  .contact-map{ aspect-ratio: 1 / 1; }
  .seo2-text:not(.open) p:not(:first-child){ display:none; }
  .seo2-toggle{ display:inline-block; }

  .footer{ padding:48px 0 32px; }
  .ftr{ gap:32px; }
  .ftr-top{ flex-direction:column; gap:0; }
  .ftr-brand{ margin-bottom:24px; }
  .ftr-col{ border-bottom:1px solid var(--line-dark); }
  .ftr-col summary{ padding:16px 0; cursor:pointer; }
  .ftr-col summary svg{ display:block; }
  .ftr-col[open] summary svg{ transform: rotate(180deg); }
  .ftr-col nav{ margin:0 0 16px; }
  .ftr-app{ width:100%; margin-top:24px; }
  .lead-dlg{ padding:24px; }
}

/* ═════════════ catalog / category listing (Figma «Каталог») ═════════════ */
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 24px; padding:0; font-size:13px; line-height:18px; font-weight:500; color: var(--ink-faint); }
.crumbs a{ color: var(--ink-faint); }
.crumbs a:hover{ color: var(--ink); }
.crumbs [aria-current]{ color: var(--ink); font-weight:600; }
.crumb-sep{ font-style:normal; color: var(--ink-faint); }

.shop-head{ background: var(--surface-2); padding: 32px 0 40px; }
.shop-h1{ font-size:48px; line-height:56px; letter-spacing:-.02em; }
.shop-lead{ max-width: 720px; margin: 12px 0 16px; }
.rating-pill{ display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border-radius:999px; background: var(--surface); border:1px solid var(--line);
  font-size:13px; line-height:18px; font-weight:600; }
.type-tiles{ display:flex; flex-wrap:wrap; gap:16px; margin-top:32px; padding:2px; }
.type-tiles::-webkit-scrollbar{ display:none; }
.type-tile{ flex: 1 1 200px; min-width: 0; display:flex; align-items:center; gap:12px; padding:12px 16px 12px 12px; min-height:72px;
  background: var(--surface); border:1px solid var(--line); border-radius:16px; font-weight:600; font-size:15px; line-height:20px; color: var(--ink); transition: border-color .2s; }
.type-tile:hover{ border-color: var(--ink-faint); }
.type-tile.active{ box-shadow: inset 0 0 0 2px var(--ink); border-color: var(--ink); }
.type-ic{ position:relative; width:48px; height:48px; flex:none; border-radius:10px; background: var(--surface-2); display:grid; place-items:center; overflow:hidden; }
.type-ic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.shop-body{ padding: 40px 0 var(--sec-pad); }
.shop2{ display:grid; grid-template-columns: 280px 1fr; gap:32px; align-items:start; }
.shop-side{ display:flex; flex-direction:column; gap:16px; }
.fbox{ background: var(--surface); border:1px solid var(--line); border-radius:20px; padding:24px; }
.fbox-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:20px; }
.fbox-head b{ display:inline-flex; align-items:center; gap:10px; font-size:18px; line-height:24px; font-weight:700; }
.fbox-reset{ background:none; border:0; padding:0; font: 600 14px/20px var(--font-body); color: var(--ink); text-decoration: underline; }
.fbox-x{ display:none; color: var(--ink); border-color: var(--line); }
.fgroup{ padding:20px 0; border-top:1px solid var(--line); }
.fgroup h4{ margin:0 0 14px; font: 800 12px/16px var(--font-body); letter-spacing:.08em; text-transform:uppercase; color: var(--ink-faint); }
.fcheck{ display:flex; align-items:center; gap:10px; padding:6px 0; font-size:15px; line-height:22px; cursor:pointer; }
.fcheck input{ width:20px; height:20px; margin:0; accent-color: var(--ink); flex:none; }
.fchips{ display:flex; flex-wrap:wrap; gap:8px; }
.fchip{ min-height:36px; padding:0 14px; border-radius:999px; border:1px solid var(--line); background: var(--surface); font: 600 14px/20px var(--font-body); color: var(--ink); }
.fchip[aria-pressed="true"]{ background: var(--ink); border-color: var(--ink); color:#fff; }
.fprice{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.fprice span{ display:block; margin-bottom:6px; font-size:12px; line-height:16px; color: var(--ink-faint); }
.fprice input{ width:100%; height:44px; padding:0 12px; border-radius:12px; border:1px solid var(--line-2); font: 600 16px var(--font-body); color: var(--ink); background:#fff; }
.frange{ position:relative; height:24px; margin-top:16px; }
.frange::before, .frange::after{ content:""; position:absolute; top:50%; height:4px; margin-top:-2px; border-radius:2px; }
.frange::before{ left:0; right:0; background: var(--line); }
.frange::after{ left: var(--a); right: calc(100% - var(--b)); background: var(--ink); }
.frange input{ position:absolute; inset:0; width:100%; margin:0; background:transparent; pointer-events:none; -webkit-appearance:none; appearance:none; z-index:1; }
.frange input::-webkit-slider-thumb{ -webkit-appearance:none; pointer-events:auto; width:22px; height:22px; border-radius:999px; background: var(--accent); border:2px solid var(--ink); cursor:pointer; }
.frange input::-moz-range-thumb{ pointer-events:auto; width:18px; height:18px; border-radius:999px; background: var(--accent); border:2px solid var(--ink); cursor:pointer; }
.frange input::-webkit-slider-runnable-track{ background:transparent; }
#filters-apply{ margin-top:4px; }
.help-card{ display:flex; flex-direction:column; gap:14px; padding:24px; border-radius:20px; }
.help-card .kicker{ font-size:12px; }
.help-card p{ margin:0; font-size:15px; line-height:22px; color: var(--on-dark); }
.help-card .btn{ white-space:normal; text-align:left; height:auto; min-height:44px; padding:8px 16px; }
.help-hours{ font-size:12px; line-height:16px; color: var(--on-dark-muted); }

.shop-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 16px; margin-bottom:16px; }
.filters-toggle{ display:none; }
.ftoggle-n{ min-width:20px; height:20px; padding:0 6px; border-radius:999px; background: var(--accent); color: var(--accent-ink); font: 700 12px/20px var(--font-body); }
.shop-count{ font-size:15px; line-height:22px; color: var(--ink-soft); }
.shop-count b{ color: var(--ink); }
.shop-sort{ display:flex; align-items:center; gap:10px; }
.shop-sort span{ font-size:14px; color: var(--ink-soft); }
.shop-sort select{ height:44px; padding:0 14px; border-radius:999px; border:1px solid var(--line); background:#fff; font: 600 15px var(--font-body); color: var(--ink); }
.active-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.active-chips:empty{ display:none; }
.achip{ display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:0 12px; border-radius:999px; border:0; background: var(--surface-2); font: 600 14px/20px var(--font-body); color: var(--ink); }
.achip span{ font-size:16px; line-height:1; }
.shop-grid2{ grid-template-columns: repeat(3, 1fr); }
.load-more2{ display:flex; justify-content:center; margin-top:32px; }
/* Catalog pages: switch off the browser's scroll anchoring — after "Показать ещё" it scrolled
   the page down past the newly shown cards, so they ended up above the screen. */
html:has(#shop-grid){ overflow-anchor:none; }
.shop-empty{ padding:32px; border-radius:20px; background: var(--surface-2); text-align:center; }
.shop-empty h3{ margin:0 0 8px; font-size:22px; line-height:28px; }

.about-cols{ display:grid; grid-template-columns: repeat(3, 1fr); gap:40px; }
.about-cols h3{ font-size:20px; line-height:28px; }
.about-cols p{ margin:12px 0 0; font-size:15px; line-height:24px; color: var(--ink-soft); }
.why-h{ margin:56px 0 20px; font-family: var(--font-body); font-weight:600; font-size:20px; line-height:28px; }
.why-light .why{ background: var(--surface); border:1px solid var(--line); }
.why-light .why b{ color: var(--ink); }
.why-light .why span:last-child{ color: var(--ink-soft); }
.shop-about > .wrap > .kicker{ display:block; margin-top:40px; }
.faq-on-white .faq-item{ background: var(--surface-2); }

@media (max-width: 1024px){
  .shop2{ display:flex; flex-direction:column; gap:0; }
  .shop-side{ display:contents; }
  .shop-main{ order:2; width:100%; }
  .help-card{ order:3; margin-top:32px; }
  .fbox{ position:fixed; z-index:95; top:0; bottom:0; left:0; width:min(380px, 92vw); border-radius:0 20px 20px 0; overflow-y:auto;
    transform: translateX(-102%); transition: transform .3s ease; }
  .fbox.open{ transform:none; }
  .fbox-x{ display:grid; }
  .filters-toggle{ display:inline-flex; }
  .shop-bar{ display:grid; grid-template-columns: auto 1fr; }
  .shop-sort{ justify-content:flex-end; }
  .shop-sort span{ display:none; }
  .shop-count{ grid-column: 1 / -1; order:3; }
  .about-cols{ grid-template-columns: 1fr; gap:24px; }
}
@media (max-width: 760px){
  .shop-head{ padding: 20px 0 24px; }
  .shop-h1{ font-size:28px; line-height:34px; }
  .rating-pill{ display:none; }
  .type-tiles{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:8px; margin: 20px calc(-1 * var(--gut)) 0; padding: 2px var(--gut); }
  .type-tiles::-webkit-scrollbar{ display:none; }
  .type-tile{ flex:none; min-width:0; min-height:40px; padding:0 16px; border-radius:999px; font-size:14px; white-space:nowrap; }
  .type-tile.active{ background: var(--ink); color:#fff; }
  .type-ic{ display:none; }
  .shop-body{ padding-top:20px; }
  .shop-grid2{ grid-template-columns: repeat(2, 1fr); }
  .load-more2 .btn{ width:100%; }
  .about-cols:not(.open){ display:none; }
  .about-more{ display:inline-block; }
  .why-h{ margin:32px 0 16px; font-size:18px; }
}

/* ═════════════ product page (Figma «Товар») ═════════════ */
.pd2{ padding: 24px 0 64px; }
.pd2-top{ display:grid; grid-template-columns: 1.08fr 1fr; gap:40px; align-items:start; }
.pd2-gallery{ display:flex; flex-direction:column; gap:12px; position:sticky; top:110px; }
.pd2-main{ position:relative; aspect-ratio: 1 / 1; border-radius:24px; background: var(--surface-2); overflow:hidden; }
.pd2-main img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pd2-main .prod-badge{ top:16px; left:16px; }
.pd2-count{ position:absolute; right:16px; bottom:16px; padding:4px 10px; border-radius:999px; background:#fff; font-size:12px; line-height:16px; font-weight:600; color: var(--ink-soft); }
.pd2-nav{ position:absolute; top:50%; margin-top:-22px; width:44px; height:44px; border-radius:999px; border:1px solid var(--line); background:#fff; color: var(--ink);
  display:grid; place-items:center; padding:0; opacity:0; transition: opacity .2s; }
.pd2-main:hover .pd2-nav{ opacity:1; }
.pd2-prev{ left:16px; } .pd2-prev svg{ transform: rotate(180deg); }
.pd2-next{ right:16px; }
.pd2-thumbs{ --tg:12px; --tw: calc((100% - 4 * var(--tg)) / 5); display:flex; gap: var(--tg); }
/* All photos in one row: 5 tiles visible (4 + video), the rest scroll sideways. */
.pd2-thumb-strip{ flex:1 1 auto; min-width:0; display:flex; gap: var(--tg); overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; -ms-overflow-style:none; position:relative; }
.pd2-thumb-strip::-webkit-scrollbar{ display:none; }
.pd2-thumb-strip .pd-thumb{ flex: 0 0 calc((100% - 4 * var(--tg)) / 5); scroll-snap-align:start; }
.pd2-thumbs.has-video .pd2-thumb-strip .pd-thumb{ flex-basis: calc((100% - 3 * var(--tg)) / 4); }
.pd2-thumbs .pd2-thumb-video{ flex: 0 0 var(--tw); }
.pd-thumb{ position:relative; aspect-ratio:1 / 1; padding:0; border-radius:16px; border:2px solid transparent; background: var(--surface-2); overflow:hidden; cursor:pointer; }
.pd-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pd-thumb.active{ border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--ink); }
.pd2-thumb-video{ aspect-ratio:1 / 1; border-radius:16px; background: var(--dark); color: var(--accent); display:grid; place-items:center; }

.pd2-info{ display:flex; flex-direction:column; gap:16px; }
.pd2-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; line-height:18px; color: var(--ink-faint); }
.pd2-rate{ display:inline-flex; align-items:center; gap:4px; font-weight:700; color: var(--ink); }
.pd2-rate svg{ color: var(--accent); }
.pd2-meta a{ color: var(--ink); font-weight:600; text-decoration: underline; }
.pd2-h1{ font-size:36px; line-height:44px; letter-spacing:-.02em; }
.pd2-lead{ font-size:18px; line-height:28px; }
.pd2-facts{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.pd2-facts li{ display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; background: var(--surface-2); font-size:14px; line-height:20px; font-weight:600; }
.pd2-var span{ display:block; margin-bottom:8px; font-size:14px; font-weight:600; }
.pd2-var select{ width:100%; height:48px; padding:0 14px; border-radius:12px; border:1px solid var(--line-2); background:#fff; font: 500 15px var(--font-body); color: var(--ink); }
.pd2-price{ display:flex; align-items:baseline; gap:12px; padding-top:20px; border-top:1px solid var(--line); }
#pd-price-now{ font-family: var(--font-display); font-weight:700; font-size:40px; line-height:48px; letter-spacing:-.02em; }
.pd2-price s{ font-size:16px; color: var(--ink-faint); }
.pd2-oos{ margin:0; color:#D92D20; font-weight:600; font-size:14px; }
.pd2-buy{ display:flex; gap:12px; }
.qty2{ display:flex; align-items:center; gap:4px; height:52px; padding:4px; border:1px solid var(--line); border-radius:999px; }
.qty2 button{ width:40px; height:40px; border-radius:999px; border:0; background: var(--surface-2); color: var(--ink); display:grid; place-items:center; padding:0; }
.qty2 input{ width:44px; border:0; background:transparent; text-align:center; font: 600 16px var(--font-body); color: var(--ink); -moz-appearance:textfield; }
.qty2 input::-webkit-outer-spin-button, .qty2 input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.pd2-add{ flex:1; min-width:0; }
/* Narrow phones: "Добавить в корзину" is longer than the Ukrainian label — tighten the row so it
   never pushes the page sideways (and let it wrap to two lines on the narrowest screens). */
@media (max-width: 420px){
  .pd2-buy{ gap:8px; }
  .pd2-buy .qty2 button{ width:36px; height:36px; }
  .pd2-buy .qty2 input{ width:34px; }
  .pd2-add{ padding:0 14px; gap:8px; white-space:normal; line-height:18px; text-align:center; }
}
.pd2-ask{ align-self:flex-start; display:inline-flex; align-items:center; gap:8px; padding:0; background:none; border:0; font: 600 15px/20px var(--font-body); color: var(--ink); text-decoration: underline; }
.pd2-perks{ list-style:none; margin:8px 0 0; padding:4px 20px; border-radius:20px; background: var(--surface-2); }
.pd2-perks li{ display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); }
.pd2-perks li:last-child{ border-bottom:0; }
.pd2-perk-ic{ width:36px; height:36px; border-radius:999px; background:#fff; display:grid; place-items:center; flex:none; }
.pd2-perks b{ display:block; font-size:15px; line-height:20px; }
.pd2-perks i{ font-style:normal; font-size:13px; line-height:18px; color: var(--ink-soft); }

.pd2-tabs{ position:sticky; top:81px; z-index:70; background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.pd2-tabs .wrap{ display:flex; gap:32px; overflow-x:auto; scrollbar-width:none; }
.pd2-tabs .wrap::-webkit-scrollbar{ display:none; }
.pd2-tabs a{ display:inline-flex; align-items:center; gap:8px; padding:18px 0; white-space:nowrap; font-weight:600; font-size:15px; color: var(--ink-soft); border-bottom:2px solid transparent; }
.pd2-tabs a:hover{ color: var(--ink); border-color: var(--ink); }
.pd2-tab-n{ padding:2px 8px; border-radius:999px; background: var(--surface-2); font-size:12px; font-weight:700; color: var(--ink); }
#pd-desc, #pd-video, #pd-spec, #pd-rev{ scroll-margin-top: 150px; }

.pd2-prose{ max-width: 880px; color: var(--ink-soft); font-size:16px; line-height:26px; }
.pd2-prose h1, .pd2-prose h2, .pd2-prose h3, .pd2-prose h4{ text-transform:none; }
.pd2-prose h1, .pd2-prose h2{ font-family: var(--font-display); font-weight:800; font-size:36px; line-height:44px; letter-spacing:-.015em; color: var(--ink); margin:0 0 20px; }
.pd2-prose h3, .pd2-prose h4{ font-family: var(--font-display); font-weight:800; font-size:22px; line-height:30px; color: var(--ink); margin:40px 0 16px; }
.pd2-prose p{ margin:0 0 16px; }
.pd2-prose strong, .pd2-prose b{ color: var(--ink); }
.pd2-prose ul{ list-style:none; margin:0 0 20px; padding:0; }
.pd2-prose ul li{ position:relative; padding-left:40px; margin:14px 0; }
.pd2-prose ul li::before{ content:""; position:absolute; left:0; top:-1px; width:28px; height:28px; border-radius:999px;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 16px no-repeat; }
.pd2-prose img{ max-width:100%; height:auto; border-radius:20px; }
.pd2-prose a{ color: var(--ink); text-decoration: underline; }
.pd2-prose table{ width:100%; border-collapse:collapse; margin:0 0 20px; }
.pd2-prose td, .pd2-prose th{ padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; }

.pd2-video h2{ color: var(--on-dark); margin:8px 0 32px; }
.pd2-video .rvb-grid{ display:grid; grid-template-columns: 1.6fr 1fr; gap:24px; }
.pd2-video .rvb-solo{ grid-template-columns: 1fr; }
.pd2-video .rvb-video-stage{ position:relative; aspect-ratio:16 / 9; border-radius:24px; overflow:hidden; background: var(--dark-card); }
.pd2-video .rvb-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.85; }
.pd2-video .rvb-video-stage iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.pd2-video .rvb-play{ position:absolute; left:50%; top:50%; width:80px; height:80px; margin:-40px 0 0 -40px; border-radius:999px; border:0; background: var(--accent); color: var(--accent-ink); display:grid; place-items:center; padding:0 0 0 4px; cursor:pointer; }
.pd2-video .rvb-video{ order:1; }
.pd2-video .rvb-ar-h{ text-transform:none; font-size:22px; line-height:28px; color: var(--on-dark); }
.pd2-video .rvb-ar{ order:2;  background: var(--dark-card); border:1px solid var(--line-dark); border-radius:24px; padding:24px; display:flex; flex-direction:column; gap:12px; color: var(--on-dark); }

.pd2-spec-grid{ display:grid; grid-template-columns: 1.4fr 1fr; gap:48px; align-items:start; }
.pd2-dl{ margin:32px 0 0; }
.pd2-dl > div{ display:grid; grid-template-columns: 1fr 1.2fr; gap:24px; padding:16px 0; border-bottom:1px solid var(--line); }
.pd2-dl dt{ font-size:15px; line-height:22px; color: var(--ink-faint); }
.pd2-dl dd{ margin:0; font-size:15px; line-height:22px; font-weight:600; }
.pd2-fit{ padding:28px; border-radius:24px; background: var(--surface-2); }
.pd2-fit h3{ font-family: var(--font-body); font-weight:700; font-size:20px; line-height:28px; }
.pd2-fit ul{ list-style:none; margin:16px 0 0; padding:0; }
.pd2-fit li{ display:flex; gap:10px; margin:10px 0; font-size:15px; line-height:22px; color: var(--ink-soft); }
.pd2-fit li svg{ flex:none; color: var(--ink); margin-top:2px; }
.pd2-fit-photo{ aspect-ratio: 16 / 10; margin-top:16px; border-radius:16px; }

.pd2-rev-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:32px; }
.pd2-rev-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.pd2-rev-grid .rev2-score .stars5{ margin-top:4px; }
.pd2-rev .rev{ margin:0; padding:24px; background:#fff; border:1px solid var(--line); border-radius:20px; display:flex; flex-direction:column; }
.pd2-rev .rev.rev-hidden{ display:none; }
.pd2-rev .stars{ color: var(--accent); display:inline-flex; gap:2px; }
.pd2-rev .rev-text{ margin:12px 0 16px; font-size:15px; line-height:22px; color: var(--ink); }
.pd2-rev .rev-text p{ margin:0; }
.pd2-rev .rev-by{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.pd2-rev .rev-ava{ width:40px; height:40px; border-radius:999px; background: var(--surface-2); color: var(--ink); display:grid; place-items:center; font: 600 16px/1 var(--font-body); flex:none; }
.pd2-rev .rev-by b{ display:block; font-size:15px; font-weight:600; }
.pd2-rev .rev-by i{ font-style:normal; font-size:13px; color: var(--ink-faint); }

.cta-yellow{ display:flex; align-items:center; justify-content:space-between; gap:32px; padding:48px; border-radius:28px; background: var(--accent); color: var(--accent-ink); }
.cta-yellow h2{ margin:0 0 12px; font-size:32px; line-height:40px; color: var(--accent-ink); }
.cta-yellow p{ margin:0; max-width:640px; font-size:16px; line-height:24px; color: rgba(18,18,18,.8); }
.cta-yellow .btn{ flex:none; }
.pd2-cta-sec{ padding-bottom:0; }
.pd2-rel-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:32px; }
.pd2-rel-head .lead{ margin-top:8px; }
.pd2-similar-k{ display:block; margin-top:40px; }
.pd2-sticky{ display:none; }

@media (max-width: 1024px){
  .pd2-top, .pd2-spec-grid{ grid-template-columns: 1fr; }
  .pd2-gallery{ position:static; }
  .pd2-tabs{ top:69px; }
  .pd2-video .rvb-grid{ grid-template-columns: 1fr; }
  .pd2-rev-grid{ grid-template-columns: 1fr 1fr; }
  .cta-yellow{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 760px){
  .pd2{ padding:16px 0 40px; }
  .pd2-top{ gap:24px; }
  .pd2-main{ border-radius:20px; }
  .pd2-nav{ opacity:1; width:36px; height:36px; margin-top:-18px; }
  .pd2-thumbs{ --tg:8px; }
  .pd-thumb, .pd2-thumb-video{ border-radius:12px; }
  .pd2-h1{ font-size:24px; line-height:30px; }
  .pd2-lead{ font-size:15px; line-height:23px; }
  .pd2-facts li{ font-size:13px; padding:8px 10px; }
  #pd-price-now{ font-size:32px; line-height:40px; }
  .pd2-tabs .wrap{ gap:24px; }
  .pd2-prose h1, .pd2-prose h2{ font-size:24px; line-height:30px; }
  .pd2-prose h3, .pd2-prose h4{ font-size:18px; line-height:24px; margin-top:28px; }
  .pd2-rev-head, .pd2-rel-head{ flex-direction:column; align-items:flex-start; }
  .pd2-rev-grid{ grid-template-columns: 1fr; gap:12px; }
  .pd2-dl > div{ grid-template-columns: 1fr; gap:2px; padding:12px 0; }
  .cta-yellow{ padding:24px; border-radius:24px; }
  .cta-yellow h2{ font-size:22px; line-height:28px; }
  .cta-yellow .btn{ width:100%; }
  .pd2-sticky{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:85; align-items:center; justify-content:space-between; gap:12px;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--line); box-shadow: 0 -6px 20px rgba(18,18,18,.08);
    transform: translateY(110%); transition: transform .25s ease; }
  .pd2-sticky.show{ transform:none; }
  .pd2-sticky b{ font-family: var(--font-display); font-weight:700; font-size:20px; white-space:nowrap; }
  .pd2-sticky .btn{ flex:1; height:48px; }
}

/* ── Blog (WordPress posts rendered at original URLs) ───────────────────────── */
.blog-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--grid-gap); }
.blog-grid .post-photo{ overflow:hidden; background: var(--surface-2); }
.blog-grid .post-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.post-h{ margin:4px 0 0; font-family: var(--font-body); font-weight:700; font-size:18px; line-height:26px; text-transform:none; letter-spacing:0; }
.post-h a, .post h3 a{ color: var(--ink); text-decoration:none; }
.post-h a:hover, .post h3 a:hover{ text-decoration:underline; }
@media (max-width: 960px){ .blog-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .blog-grid{ grid-template-columns: 1fr; } }
.post-page .page-head .section-h{ text-transform:none; font-size: clamp(28px, 4vw, 44px); line-height:1.2; }
.post-meta{ margin:0; color: var(--ink-soft); font-size:14px; }
.post-hero{ width:100%; height:auto; aspect-ratio: 1200 / 630; object-fit:cover; border-radius: var(--radius); margin: 0 0 32px; background: var(--surface-2); }
.post-body h2{ text-transform:none; font-weight:800; letter-spacing:0; line-height:1.3; }
.post-body h3{ color: var(--ink); font-family: var(--font-body); font-weight:800; font-size:19px; line-height:1.35; margin: 26px 0 10px; }
.post-body img{ max-width:100%; height:auto; border-radius:14px; }
.post-body figure{ margin: 24px 0; }
.post-body figcaption{ font-size:14px; color: var(--ink-soft); margin-top:8px; }
.post-body table{ width:100%; border-collapse:collapse; margin: 0 0 20px; font-size:15px; display:block; overflow-x:auto; }
.post-body th, .post-body td{ border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top; }
.post-body th{ background: var(--surface-2); color: var(--ink); }
.post-body blockquote{ margin: 20px 0; padding: 14px 20px; border-left: 4px solid var(--accent); background: var(--surface-2); border-radius: 0 14px 14px 0; }
.post-body iframe{ max-width:100%; border-radius:14px; }
.post-body .wp-block-embed__wrapper iframe, .post-body iframe[src*="youtube"]{ width:100%; aspect-ratio:16/9; height:auto; }
.post-cta{ margin-top: 48px; padding: 32px; border-radius: var(--radius); background: var(--dark); color:#fff; }
.post-cta h2{ margin:0 0 10px; color:#fff; font-size: clamp(22px,3vw,30px); line-height:1.25; text-transform:none; }
.post-cta p{ margin:0 0 20px; color:#C9C9C4; }
.post-cta-btns{ display:flex; flex-wrap:wrap; gap:12px; }
.post-cta .btn-ghost{ color:#fff; border-color:#3A3B3B; }
.post-cta .btn-dark{ background:#2A2B2B; color:#fff; }
@media (max-width: 640px){ .post-cta{ padding: 24px 20px; } .post-cta-btns .btn{ width:100%; justify-content:center; } }

/* ── 404 ─────────────────────────────────────────────────────────────────────── */
.nf{ text-align:center; padding-block: 120px; }
.nf-code{ font-family: var(--font-display); font-weight:700; font-size: clamp(72px, 14vw, 160px); line-height:1; color: var(--ink); }
.nf .lead{ margin: 16px auto 28px; max-width: 46ch; }
.nf-btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Yoast FAQ block inside articles (rendered as cards) */
.post-body .schema-faq{ display:flex; flex-direction:column; gap:12px; margin: 8px 0 24px; }
.post-body .schema-faq-section{ padding: 18px 20px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.post-body .schema-faq-question{ display:block; color: var(--ink); font-weight:800; font-size:17px; line-height:1.4; margin-bottom:6px; }
.post-body .schema-faq-answer{ margin:0; }

/* Long SEO text blocks (old-site texts) — collapsed to the first blocks on every screen */
.seotext{ max-width: 880px; }
.seotext-body > *{ margin:12px 0 0; }
.seotext-body h3{ margin-top:24px; font-family: var(--font-body); font-weight:800; font-size:18px; line-height:26px; color: var(--ink); text-transform:none; letter-spacing:0; }
.seotext-body p, .seotext-body li{ font-size:16px; line-height:26px; color: var(--ink-soft); }
.seotext-body ul, .seotext-body ol{ padding-left:22px; }
.seotext-body li + li{ margin-top:6px; }
.seotext-body a{ color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.seotext-body strong{ color: var(--ink); }
.seotext-body:not(.open)[data-visible="2"] > :nth-child(n+3),
.seotext-body:not(.open)[data-visible="3"] > :nth-child(n+4){ display:none; }
.seotext-toggle{ display:inline-block; margin:14px 0 0; padding:0; background:none; border:0; font: 600 15px/20px var(--font-body); color: var(--ink); text-decoration: underline; cursor:pointer; }

/* ── Review photos + review form ─────────────────────────────────────────── */
.rev-media{ display:flex; flex-wrap:wrap; gap:8px; margin:-4px 0 16px; }
.rev-ph{ width:72px; height:72px; border-radius:12px; overflow:hidden; background: var(--surface-2); display:grid; place-items:center; border:1px solid var(--line); }
.rev-ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.rev-ph.is-video{ background: var(--dark); color: var(--accent); }
.rev-ph:hover{ border-color: var(--ink); }
.rev-lightbox{ border:0; padding:0; background:transparent; max-width: min(92vw, 900px); max-height: 92vh; overflow:visible; }
.rev-lightbox::backdrop{ background: rgba(18,18,18,.85); }
.rev-lightbox img{ display:block; max-width: min(92vw, 900px); max-height: 88vh; width:auto; height:auto; border-radius:16px; }
.rev-lightbox .lead-dlg-x{ top:-56px; right:0; }
.rev-dlg{ max-width:520px; max-height: calc(100dvh - 32px); overflow-y:auto; }
.rev-dlg textarea{ width:100%; min-height:110px; padding:12px 14px; border-radius:12px; border:1px solid var(--line-2); font: 400 16px/24px var(--font-body); color: var(--ink); resize: vertical; }
.rev-dlg textarea:focus{ outline:2px solid var(--ink); border-color: var(--ink); }
.rev-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.rev-stars-in{ border:0; padding:0; margin:0; }
.rev-stars-in legend{ font-size:13px; line-height:18px; font-weight:600; margin-bottom:6px; padding:0; }
.rev-stars-row{ display:inline-flex; flex-direction:row-reverse; gap:4px; }
.rev-stars-row input{ position:absolute; opacity:0; width:1px; height:1px; }
.rev-stars-row label{ color: var(--line-2); cursor:pointer; line-height:0; }
.rev-stars-row label:hover, .rev-stars-row label:hover ~ label,
.rev-stars-row input:checked ~ label{ color: var(--accent); }
.rev-stars-row input:focus-visible + label{ outline:2px solid var(--ink); border-radius:6px; }
.rev-photos-hint{ margin:0 0 8px; font-size:13px; line-height:18px; color: var(--ink-soft); }
.rev-photos-prev{ display:flex; flex-wrap:wrap; gap:8px; }
.rev-photos-prev:not(:empty){ margin-bottom:10px; }
.rev-photo-chip{ position:relative; width:64px; height:64px; border-radius:10px; overflow:hidden; background: var(--surface-2); }
.rev-photo-chip img{ width:100%; height:100%; object-fit:cover; }
.rev-photo-chip button{ position:absolute; top:2px; right:2px; width:22px; height:22px; border-radius:999px; border:0; background: rgba(18,18,18,.75); color:#fff; font-size:15px; line-height:22px; padding:0; cursor:pointer; }
.rev-photos-btn{ align-self:flex-start; gap:6px; cursor:pointer; }
.rev-consent{ display:flex; gap:8px; align-items:flex-start; font-size:13px; line-height:18px; color: var(--ink-soft); }
.rev-consent input{ margin-top:2px; }
.rev-consent a{ color: var(--ink); text-decoration: underline; }
.rev-done-warn{ margin-top:12px !important; font-size:14px; color: var(--ink-soft); }
/* review photo carousel */
.rev-lightbox{ width: 100vw; height: 100dvh; max-width:none; max-height:none; margin:0; display:none; }
.rev-lightbox[open]{ display:grid; place-items:center; }
.rev-lb-stage{ margin:0; display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; height:100%; justify-content:center; padding: 64px 72px 24px; box-sizing:border-box; }
.rev-lightbox img{ max-width: min(100%, 900px); max-height: calc(100dvh - 140px); border-radius:16px; object-fit:contain; }
.rev-lb-stage figcaption{ display:flex; gap:12px; color:#fff; font-size:14px; line-height:20px; }
.rev-lb-count{ opacity:.7; }
.rev-lightbox .lead-dlg-x{ position:fixed; top:16px; right:16px; }
.rev-lb-nav{ position:fixed; top:50%; margin-top:-24px; width:48px; height:48px; border-radius:999px; border:0; background:#fff; color: var(--ink); display:grid; place-items:center; padding:0; cursor:pointer; box-shadow: var(--shadow-md); }
.rev-lb-prev{ left:16px; } .rev-lb-prev svg{ transform: rotate(180deg); }
.rev-lb-next{ right:16px; }
.rev-lightbox.single .rev-lb-nav{ display:none; }
@media (max-width: 640px){
  .rev-lb-stage{ padding: 64px 12px 16px; }
  .rev-lb-nav{ top:auto; bottom:20px; margin-top:0; width:44px; height:44px; }
  .rev-lb-prev{ left: calc(50% - 56px); } .rev-lb-next{ right: calc(50% - 56px); }
  .rev-lightbox img{ max-height: calc(100dvh - 170px); }
}
.pdp-rev .rev-text:empty{ display:none; }

/* blog section chips */
.blog-cats{ display:flex; flex-wrap:wrap; gap:8px; margin: 0 0 32px; }
.blog-cat{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:999px; border:1px solid var(--line); background:#fff; color: var(--ink); font-weight:600; font-size:14px; text-decoration:none; }
.blog-cat span{ color: var(--ink-soft); font-weight:500; }
.blog-cat:hover{ border-color: var(--ink); }
.blog-cat.active{ background: var(--dark); border-color: var(--dark); color:#fff; }
.blog-cat.active span{ color:#C9C9C4; }
a.post-cat{ text-decoration:none; color: var(--accent-fg); }
@media (max-width: 640px){ .blog-cats{ flex-wrap:nowrap; overflow-x:auto; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scrollbar-width:none; } .blog-cat{ flex:none; } }

/* product gallery: horizontal scroll-snap track — native, smooth finger swipe on phones */
.pd2-track{ position:absolute; inset:0; display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  overscroll-behavior-x: contain; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.pd2-track::-webkit-scrollbar{ display:none; }
.pd2-main .pd2-track img.pd2-slide{ position:static; inset:auto; flex:0 0 100%; width:100%; height:100%; object-fit:cover;
  scroll-snap-align:center; scroll-snap-stop:always; user-select:none; -webkit-user-drag:none; }

/* product card: spec chip top-left (grips / max load); sale + "on order" move to the top-right */
.prod-spec{ position:absolute; top:12px; left:12px; z-index:1; padding:3px 8px; border-radius:6px; background: var(--dark);
  color:#fff; font-size:11px; line-height:14px; font-weight:800; letter-spacing:.01em; white-space:nowrap; pointer-events:none; }
.prod-media .prod-badge, .prod-media .prod-oos{ left:auto; right:12px; }
@media (max-width: 760px){
  .prod-spec{ top:8px; left:8px; font-size:10px; line-height:13px; padding:2px 7px; border-radius:5px; }
  .prod-media .prod-badge, .prod-media .prod-oos{ left:auto; right:8px; }
}

/* home reviews: more cards in the track + arrows, long texts clamped with "read more" */
.rev2-list{ min-width:0; display:flex; flex-direction:column; gap:14px; }
.rev2-nav{ display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.rev2-pos{ margin-right:auto; font-size:14px; color: var(--ink-faint); }
.rev2-btn{ width:44px; height:44px; border-radius:999px; border:1px solid var(--line); background: var(--surface); color: var(--ink);
  display:grid; place-items:center; cursor:pointer; transition: background .15s, opacity .15s; }
.rev2-btn:hover{ background: var(--surface-2); }
.rev2-btn:disabled{ opacity:.35; cursor:default; }
#rev-prev svg{ transform: rotate(180deg); }
.rev2 .rev-text{ display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; }
.rev2 .rev-text.is-open{ display:block; -webkit-line-clamp:unset; overflow:visible; }
.rev2 .rev-more{ align-self:flex-start; margin:-12px 0 16px; padding:0; border:0; background:none; font:inherit; font-size:14px;
  font-weight:600; color: var(--ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
@media (max-width: 760px){ .rev2-btn{ width:40px; height:40px; } }

/* category tiles: the 3-in-1 tile is square (its photo is square), the row keeps one height */
@media (min-width: 1025px){
  .cat2-grid{ grid-template-columns: var(--cat2-cols, repeat(4, 1fr)); }
  .cat2.cat2-wide{ aspect-ratio: 1 / 1; }
}
@media (max-width: 760px){
  .cat2-grid{ grid-auto-columns: auto; }
  .cat2{ width: 200px; }
  .cat2.cat2-wide{ width: 260px; aspect-ratio: 1 / 1; }
}

/* product description: WordPress galleries at reading size + embedded video */
.pd2-prose .gallery{ display:flex; flex-wrap:wrap; gap:16px; margin:24px 0; }
.pd2-prose .gallery-item{ flex:1 1 240px; max-width:560px; margin:0; }
.pd2-prose .gallery-item-wrapper, .pd2-prose .gallery-icon, .pd2-prose .gallery-item dt{ margin:0; padding:0; }
.pd2-prose .gallery-item a{ display:block; }
.pd2-prose .gallery-item img{ display:block; width:100%; height:auto; border-radius:20px; background: var(--surface-2); }
.pd2-prose .gallery br{ display:none; }
.pd2-prose .gallery-caption{ margin-top:8px; font-size:14px; color: var(--ink-faint); }
.pd2-prose p > img:only-child{ display:block; width:100%; max-width:640px; height:auto; }
.pd2-embed{ position:relative; aspect-ratio:16 / 9; margin:20px 0 28px; border-radius:20px; overflow:hidden; background:#000; }
.pd2-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.pd2-embed.is-vertical{ aspect-ratio: 9 / 16; max-width: 360px; }
.rev2-all{ display:inline-flex; align-items:center; gap:6px; margin-top:4px; font-size:14px; font-weight:700; color: var(--accent); }
.rev2-all:hover{ text-decoration:underline; }
.contact-social .btn{ display:inline-flex; align-items:center; gap:8px; }

/* ── Mobile scroll hints (ScrollHints.astro) ─────────────────────────── */
.sh-wrap{ position:relative; }
.sh-btn{ display:none; }
@media (max-width: 760px){
  .sh-btn{ position:absolute; z-index:5; display:flex; align-items:center; justify-content:center; padding:0; border:0; cursor:pointer;
    opacity:0; pointer-events:none; transition: opacity .2s ease; color: var(--ink, #121212); -webkit-tap-highlight-color: transparent; }
  .sh-wrap.can-prev .sh-prev, .sh-wrap.can-next .sh-next{ opacity:1; pointer-events:auto; }
  /* card strips: round white button, a little inside the screen edge */
  .sh-cards .sh-btn{ top: var(--sh-top, 50%); width:40px; height:40px; margin-top:-20px; border-radius:50%; background:#fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.04); }
  .sh-cards .sh-next{ right: calc(8px - var(--gut)); }
  .sh-cards .sh-prev{ left: calc(8px - var(--gut)); }
  .sh-cards .sh-btn:active{ transform: scale(.94); }
  /* chips & tabs: edge fade + small arrow */
  .sh-chips .sh-btn{ top:0; bottom:0; width:56px; background:none; }
  .sh-chips .sh-btn svg{ width:18px; height:18px; position:relative; z-index:1; }
  .sh-chips .sh-next{ right: calc(-1 * var(--gut)); justify-content:flex-end; padding-right:10px;
    background: linear-gradient(to right, transparent, var(--sh-bg, #fff) 60%); }
  .sh-chips .sh-prev{ left: calc(-1 * var(--gut)); justify-content:flex-start; padding-left:10px;
    background: linear-gradient(to left, transparent, var(--sh-bg, #fff) 60%); }
  .pd2-tabs .sh-chips .sh-next{ right:0; }
  .pd2-tabs .sh-chips .sh-prev{ left:0; }
}
.contact-social{ flex-wrap:wrap; }
.contact-social .btn-dark{ background: var(--dark); color:#fff; }

/* Long unbreakable runs (model codes glued with  , long URLs in reviews/posts) must wrap
   instead of pushing the page sideways on phones. */
body{ overflow-wrap: break-word; }

/* Second photo on hover (ProductCard.astro) — computers with a mouse only. */
.prod-media .prod-img2{ opacity:0; transition: opacity .35s ease; pointer-events:none; }
@media (hover: hover) and (pointer: fine){
  .prod:hover .prod-media.has-img2 .prod-img2{ opacity:1; }
}
@media (prefers-reduced-motion: reduce){ .prod-media .prod-img2{ transition:none; } }

/* App block in the mobile menu (Header.astro) */
.mobile-menu{ overflow-y:auto; }
.mm-app{ padding: 20px var(--gut) 24px; display:flex; flex-direction:column; gap:10px; }
/* App block sits right under the menu items; the free space goes below it, so it never
   crowds the language switch / phone buttons at the bottom. */
.mobile-menu .mobile-nav{ flex:none; }
.mobile-menu .mobile-menu-foot{ margin-top:auto; }
.mobile-menu .mobile-nav a{ padding-block:13px; }
.mobile-menu .mobile-menu-foot{ padding-top:12px; }
.mm-app > b{ font-size:14px; line-height:20px; color: var(--on-dark); }
.mm-app .store-badges{ flex-wrap:nowrap; gap:8px; }
.mm-app .store-badge{ flex:1 1 0; min-width:0; justify-content:center; padding:8px 10px; gap:8px; }
.mm-app .store-badge i{ font-size:11px; line-height:14px; }
.mm-app .store-badge b{ font-size:15px; line-height:18px; white-space:nowrap; }

/* Horizontal strips scroll only sideways — no vertical wobble from card transforms. */
.cat2-grid, .track, .rev-grid, .chips-scroll, .type-tiles, .blog-cats, .pd2-tabs .wrap{ overflow-y:hidden; }
/* Lift-on-hover only where there is a real mouse; on touch screens :hover "sticks" after a tap
   and the card jumped up while swiping. */
@media (hover: none){
  .cat2:hover, .prod:hover, .cat-card:hover, .store-btn:hover{ transform:none; }
  .cat2:hover > img{ transform:none; }
}

/* Gallery arrows: see-through, so they don't hide the product (owner's request). */
.pd2-nav{ background: rgba(255,255,255,.55); border-color: transparent; color: rgba(18,18,18,.8); transition: opacity .2s, background .2s; }
.pd2-nav:hover{ background:#fff; color: var(--ink); }
@media (max-width: 760px){
  .pd2-nav{ width:34px; height:34px; margin-top:-17px; background: rgba(255,255,255,.35); color: rgba(18,18,18,.65); }
  .pd2-nav:active{ background: rgba(255,255,255,.8); }
  .pd2-prev{ left:8px; } .pd2-next{ right:8px; }
  .pd2-count{ background: rgba(255,255,255,.7); }
}