/* ============================================================
   1UZ - «Базовый» product detail page (extends styles.css)
   ============================================================ */

/* hero */
.bp-hero{ position:relative; overflow:hidden; padding-top:calc(var(--nav-h) + 60px); padding-bottom:70px; }
.bp-hero .wrap{ position:relative; z-index:2; }
.bp-grid{ display:grid; grid-template-columns:1.02fr 1.15fr; gap:56px; align-items:center; }
.bp-crumbs{ display:flex; gap:8px; align-items:center; font-size:14px; color:var(--muted); font-weight:600; margin-bottom:14px; }
.bp-crumbs a:hover{ color:var(--c-blue); }
.bp-pill{ display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-sm); border-radius:var(--r-pill); padding:7px 15px 7px 8px; font-size:13.5px; font-weight:600; color:var(--ink-soft); margin-bottom:20px; }
.bp-pill b{ background:var(--c-magenta); color:#fff; font-family:var(--font-display); font-size:12px; padding:4px 10px; border-radius:var(--r-pill); letter-spacing:.04em; }
.bp-hero h1{ font-size:clamp(40px,5.4vw,68px); letter-spacing:-.03em; }
.bp-hero h1 .gradient-text{ display:inline; }
.bp-lead{ font-size:clamp(17px,1.6vw,20px); color:var(--ink-soft); max-width:520px; margin-top:22px; }
.bp-cta{ display:flex; flex-wrap:wrap; gap:13px; margin-top:32px; }
.bp-meta{ display:flex; gap:26px; margin-top:34px; flex-wrap:wrap; }
.bp-meta .m b{ font-family:var(--font-display); font-size:24px; font-weight:800; display:block; line-height:1; }
.bp-meta .m span{ font-size:13px; color:var(--muted); margin-top:5px; display:block; }
.bp-meta .divider{ width:1px; align-self:stretch; background:var(--line-2); }

/* hero screenshot, floating */
.bp-shot{ position:relative; }
.bp-shot .frame{ border-radius:var(--r-lg); overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:var(--sh-lg); transform:perspective(1600px) rotateY(-7deg) rotateX(2deg); transition:transform .5s ease; }
.bp-shot .frame:hover{ transform:perspective(1600px) rotateY(0) rotateX(0); }
.bp-shot .bar{ height:38px; background:#f4f6fb; display:flex; align-items:center; gap:6px; padding-inline:14px; border-bottom:1px solid var(--line); }
.bp-shot .bar i{ width:11px; height:11px; border-radius:50%; }
.bp-shot .bar i:nth-child(1){ background:#ff5f57; } .bp-shot .bar i:nth-child(2){ background:#febc2e; } .bp-shot .bar i:nth-child(3){ background:#28c840; }
.bp-shot img{ width:100%; display:block; }
.bp-shot .tagchip{ position:absolute; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh); padding:12px 15px; display:flex; align-items:center; gap:11px; z-index:3; }
.bp-shot .tagchip .ic{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:#fff; flex:none; }
.bp-shot .tagchip b{ font-family:var(--font-display); font-size:14px; display:block; line-height:1.1; }
.bp-shot .tagchip span{ font-size:12px; color:var(--muted); }
.bp-shot .tc-1{ left:-26px; bottom:42px; animation:float 5.5s ease-in-out infinite; }
.bp-shot .tc-2{ right:-22px; top:60px; animation:float 6s ease-in-out infinite .8s; }

/* logos / trust strip */
.bp-strip{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); }
.bp-strip .wrap{ display:flex; align-items:center; gap:34px; flex-wrap:wrap; padding-block:24px; }
.bp-strip .lbl{ font-size:13.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.bp-strip .items{ display:flex; gap:30px; flex-wrap:wrap; flex:1; }
.bp-strip .it{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--ink-soft); }
.bp-strip .it svg{ color:var(--c-blue); flex:none; }

/* capability grid */
.cap-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.cap{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; transition:transform .25s, box-shadow .25s, border-color .25s; }
.cap:hover{ transform:translateY(-5px); box-shadow:var(--sh); border-color:transparent; }
.cap .ic{ width:54px; height:54px; border-radius:15px; display:grid; place-items:center; color:#fff; margin-bottom:20px; }
.cap h3{ font-size:20px; }
.cap p{ color:var(--muted); font-size:15px; margin-top:9px; line-height:1.5; }

/* deep feature rows */
.bp-frow{ display:grid; grid-template-columns:1fr 1.08fr; gap:56px; align-items:center; }
.bp-frow + .bp-frow{ margin-top:clamp(52px,7vw,96px); }
.bp-frow.flip .bp-frow-media{ order:-1; }
.bp-frow h3{ font-size:clamp(25px,2.8vw,34px); margin-top:14px; }
.bp-frow .flist{ margin-top:24px; display:grid; gap:13px; }
.bp-frow .flist li{ display:flex; gap:13px; font-size:16px; color:var(--ink-soft); align-items:flex-start; }
.bp-frow .flist .tick{ width:24px; height:24px; border-radius:8px; background:var(--grad-brand); color:#fff; flex:none; display:grid; place-items:center; margin-top:1px; }
.bp-frow-media .frame{ border-radius:var(--r-lg); overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:var(--sh); }
.bp-frow-media .bar{ height:34px; background:#f4f6fb; display:flex; align-items:center; gap:6px; padding-inline:13px; border-bottom:1px solid var(--line); }
.bp-frow-media .bar i{ width:10px; height:10px; border-radius:50%; background:var(--line-2); }
.bp-frow-media img{ width:100%; display:block; }
.bp-frow-media .zoom{ aspect-ratio:1397/894; overflow:hidden; }
.bp-frow-media .zoom img{ width:auto; height:100%; }
.bp-frow-media.crop-right .zoom img{ object-position:right top; width:100%; height:auto; transform:scale(1.5); transform-origin:right top; }
.bp-frow-media.crop-left .zoom img{ width:100%; height:auto; transform:scale(1.5); transform-origin:left top; }

/* modules */
.addon-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.addon{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:34px; display:flex; gap:22px; transition:transform .25s, box-shadow .25s; overflow:hidden; }
.addon:hover{ transform:translateY(-5px); box-shadow:var(--sh); }
.addon .ic{ width:60px; height:60px; border-radius:17px; display:grid; place-items:center; color:#fff; flex:none; }
.addon h3{ font-size:22px; }
.addon p{ color:var(--muted); font-size:15px; margin-top:8px; line-height:1.5; }
.addon .badge{ position:absolute; top:22px; right:24px; font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.05em; text-transform:uppercase; padding:5px 11px; border-radius:var(--r-pill); background:rgba(124,77,255,.12); color:var(--c-violet); }

/* pricing reuse from styles.css .price-* - already global */

/* sticky CTA bar (desktop) */
.bp-sticky{ position:fixed; left:0; right:0; bottom:0; z-index:80; transform:translateY(120%); transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.bp-sticky.show{ transform:none; }
.bp-sticky .inner{ max-width:var(--maxw); margin-inline:auto; margin-bottom:18px; background:var(--c-navy); color:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-lg); padding:16px 16px 16px 26px; display:flex; align-items:center; gap:20px; }
.bp-sticky .si{ display:flex; align-items:center; gap:14px; }
.bp-sticky .si img{ width:38px; height:38px; }
.bp-sticky .si b{ font-family:var(--font-display); font-size:17px; display:block; }
.bp-sticky .si span{ font-size:13px; color:rgba(255,255,255,.6); }
.bp-sticky .price{ margin-left:auto; font-family:var(--font-display); font-weight:800; font-size:20px; }
.bp-sticky .price small{ font-size:13px; font-weight:600; color:rgba(255,255,255,.6); }
.bp-sticky .btn{ flex:none; }

@media (max-width:1080px){
  .bp-grid{ grid-template-columns:1fr; gap:44px; }
  .bp-shot{ max-width:560px; }
  .bp-shot .frame{ transform:none; }
  .cap-grid{ grid-template-columns:repeat(2,1fr); }
  .bp-frow{ grid-template-columns:1fr; gap:30px; }
  .bp-frow.flip .bp-frow-media{ order:0; }
  .addon-grid{ grid-template-columns:1fr; }
  .bp-sticky{ display:none; }
}
@media (max-width:680px){
  .cap-grid{ grid-template-columns:1fr; }
  .bp-strip .wrap{ gap:18px; }
  .bp-strip .items{ gap:18px; }
  .bp-shot .tc-1{ left:-10px; } .bp-shot .tc-2{ right:-10px; }
  .bp-meta{ gap:16px; }
  .bp-meta .divider{ display:none; }
}
.bp-grid>*{min-width:0}.bp-hero h1{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}