/* ПинLab — надстройка над Bootstrap 5.3 */
:root{
  --ink:#171233; --ink-2:#57506E; --mute:#8B85A0;
  --violet:#6C4BF4; --violet-dark:#5433D6; --lime:#B9F227; --lime-dark:#9BD10E;
  --bg:#FFFFFF; --soft:#F4F3FB; --line:#E7E4F2;
  --r:18px;
}
body{
  font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-weight:800; letter-spacing:-.03em}
h1{font-size:clamp(30px,4.4vw,54px); line-height:1.06}
h2{font-size:clamp(24px,2.9vw,38px); line-height:1.12}
h3{font-size:17px; letter-spacing:-.01em}
a{text-decoration:none}
.hl{color:var(--violet); position:relative; white-space:nowrap}
.hl::after{
  content:""; position:absolute; left:-2px; right:-2px; bottom:.06em; height:.34em;
  background:var(--lime); z-index:-1; border-radius:3px; transform:rotate(-.6deg);
}
.kicker{display:block; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--violet); font-weight:800; margin-bottom:10px}
.text-muted-2{color:var(--ink-2)}
.price{font-weight:900; font-size:19px; letter-spacing:-.02em}
.price-lg{font-weight:900; font-size:24px; letter-spacing:-.03em; color:var(--violet)}

/* кнопки */
.btn{border-radius:12px; font-weight:700; font-size:14.5px; padding:10px 18px; transition:transform .15s, background .2s, color .2s, border-color .2s}
.btn:active{transform:scale(.98)}
.btn-lg{padding:13px 24px; font-size:15.5px; border-radius:14px}
.btn-brand{background:var(--violet); border:1.5px solid var(--violet); color:#fff}
.btn-brand:hover{background:var(--violet-dark); border-color:var(--violet-dark); color:#fff}
.btn-outline-brand{border:1.5px solid #D9D3EE; color:var(--ink); background:#fff}
.btn-outline-brand:hover{border-color:var(--violet); color:var(--violet); background:#FBFAFF}
.btn-outline-light-brand{border:1.5px solid rgba(255,255,255,.55); color:#fff}
.btn-outline-light-brand:hover{background:#fff; color:var(--ink)}
.btn-add{
  background:var(--lime); border:1.5px solid var(--lime); color:#20240A; font-size:13px; padding:8px 14px; border-radius:11px;
}
.btn-add:hover{background:var(--lime-dark); border-color:var(--lime-dark); color:#20240A}

/* навbar */
.nav-main{background:rgba(255,255,255,.94); backdrop-filter:saturate(160%) blur(6px); border-bottom:1px solid var(--line)}
.nav-main .navbar-brand{padding:0}
.brand-txt{font-weight:900; font-size:20px; letter-spacing:-.03em}
.brand-txt b{color:var(--violet)}
.nav-main .nav-link{font-size:14.5px; color:var(--ink-2); font-weight:600; padding:8px 10px; border-radius:9px}
.nav-main .nav-link:hover{color:var(--ink); background:var(--soft)}
.search-form .form-control{
  width:220px; border-radius:11px; border:1.5px solid var(--line); background:var(--soft);
  font-size:13.5px; padding:8px 12px;
}
.search-form .form-control:focus{box-shadow:none; border-color:var(--violet); background:#fff}
.btn-cart{
  display:inline-flex; align-items:center; gap:7px; border:1.5px solid var(--line); background:#fff;
  padding:8px 12px; border-radius:11px; font-weight:700; font-size:13.5px; color:var(--ink);
}
.btn-cart:hover{border-color:var(--violet); color:var(--violet)}
.cart-count{background:var(--violet); color:#fff; border-radius:999px; font-size:11.5px; padding:1px 7px; min-width:20px}

/* hero */
.hero{position:relative; padding:clamp(28px,4.5vw,58px) 0 clamp(24px,3vw,42px); overflow:hidden}
.hero-bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(760px 420px at 82% 12%, rgba(108,75,244,.14), transparent 70%),
    radial-gradient(520px 340px at 12% 88%, rgba(185,242,39,.22), transparent 70%),
    linear-gradient(180deg,#FBFAFF, #fff 72%);
}
.badge-soft{
  display:inline-block; background:#EFEBFF; color:var(--violet-dark); font-weight:700;
  font-size:12.5px; padding:6px 12px; border-radius:999px;
}
.lead-text{font-size:clamp(15px,1.25vw,17.5px); color:var(--ink-2); max-width:52ch}
.hero-facts{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; padding-top:18px; border-top:1px solid var(--line)}
.hero-facts b{display:block; font-size:20px; letter-spacing:-.03em}
.hero-facts span{font-size:12px; color:var(--mute)}
.hero-card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:26px; padding:14px;
  box-shadow:0 30px 60px -34px rgba(23,18,51,.5);
}
.hero-img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:18px; background:var(--soft)}
.hero-price{
  position:absolute; right:22px; bottom:22px; background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:12px 16px; box-shadow:0 16px 30px -18px rgba(23,18,51,.45);
}
.tag-mini{
  display:inline-block; background:#20240A; color:var(--lime); font-size:10.5px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; border-radius:6px; margin-bottom:6px;
}

/* секции */
.section{padding:clamp(44px,5.2vw,78px) 0}
.section-soft{background:var(--soft); border-block:1px solid var(--line)}

/* табы */
.pills-brand .nav-link{
  border-radius:999px; font-size:13.5px; font-weight:700; color:var(--ink-2);
  padding:8px 16px; background:#fff; border:1.5px solid var(--line); margin-left:6px;
}
.pills-brand .nav-link.active{background:var(--ink); border-color:var(--ink); color:#fff}

/* карточка товара */
.product{
  background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s, border-color .2s;
}
.product:hover{transform:translateY(-4px); box-shadow:0 24px 44px -28px rgba(23,18,51,.45); border-color:#D8D2EC}
.product-media{position:relative; background:var(--soft); padding:10px}
.product-media img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px; mix-blend-mode:multiply}
.badge-hit,.badge-new{
  position:absolute; top:16px; left:16px; z-index:2; font-size:10.5px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:7px;
}
.badge-hit{background:var(--lime); color:#20240A}
.badge-new{background:var(--violet); color:#fff}
.product-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:4px; flex:1}
.product-cat{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); font-weight:700; margin:0}
.product-title{margin:0; font-size:15.5px}
.product-meta{margin:0; font-size:12.5px; color:var(--ink-2); min-height:2.6em}
.product-foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:10px}

/* таблица сравнения */
.compare-wrap{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#fff}
.compare-table{font-size:14px; margin:0}
.compare-table thead th{
  background:#FBFAFF; border-bottom:1px solid var(--line); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mute); font-weight:800; padding:14px 18px;
}
.compare-table tbody td{padding:14px 18px; color:var(--ink-2); border-color:#F0EDF8}
.compare-table tbody td:first-child{color:var(--ink); white-space:nowrap}
.compare-table tbody tr:hover td{background:#FCFBFF}

/* наборы */
.kit{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.kit img{width:100%; aspect-ratio:16/10; object-fit:cover}
.kit-body{padding:18px; display:flex; flex-direction:column; gap:8px}
.kit-body h3{margin:0}
.kit-body p{color:var(--ink-2); font-size:14px; margin:0 0 6px}

/* гайды */
.guide{background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:transform .2s, box-shadow .2s}
.guide:hover{transform:translateY(-3px); box-shadow:0 22px 40px -30px rgba(23,18,51,.4)}
.guide img{width:100%; aspect-ratio:3/2; object-fit:cover}
.guide-body{padding:16px 18px 20px}
.guide-time{font-size:11.5px; color:var(--violet); font-weight:800; letter-spacing:.08em; text-transform:uppercase}
.guide h3{margin:6px 0 6px; font-size:16px}
.guide p{color:var(--ink-2); font-size:13.5px; margin:0}
.link-more{font-weight:700; color:var(--violet); font-size:14px}
.link-more:hover{color:var(--violet-dark)}

/* чек-лист */
.check-list{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px}
.check-list li{position:relative; padding-left:28px; font-size:14.5px; color:var(--ink-2)}
.check-list li::before{
  content:""; position:absolute; left:0; top:2px; width:18px; height:18px; border-radius:50%; background:#E9FAC1;
}
.check-list li::after{
  content:""; position:absolute; left:5px; top:7px; width:7px; height:4px;
  border-left:2px solid #6D8B00; border-bottom:2px solid #6D8B00; transform:rotate(-45deg);
}

/* аккордеон */
.accordion-brand .accordion-item{border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:10px; background:#fff}
.accordion-brand .accordion-button{font-weight:700; font-size:15px; color:var(--ink); background:#fff; padding:16px 20px}
.accordion-brand .accordion-button:not(.collapsed){color:var(--violet); background:#FBFAFF; box-shadow:none}
.accordion-brand .accordion-button:focus{box-shadow:none; border-color:var(--line)}
.accordion-brand .accordion-body{color:var(--ink-2); font-size:14.5px; padding:0 20px 18px}

/* полоса CTA */
.cta-band{background:linear-gradient(120deg,#231A4F,#3A2A8C 55%,#5433D6); color:#fff; padding:clamp(30px,4vw,52px) 0}
.cta-band h2{color:#fff; font-size:clamp(22px,2.6vw,32px)}
.cta-band p{color:#CFC7F5}

/* подвал */
.foot{background:#151030; color:#B2AACD; padding:44px 0 34px; font-size:13.5px}
.foot-brand{font-weight:900; font-size:18px; color:#fff; margin-bottom:8px}
.foot-brand b{color:var(--lime)}
.foot-title{font-weight:800; color:#fff; font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:10px}
.foot a{display:block; color:#B2AACD; margin-bottom:6px}
.foot a:hover{color:#fff}
.foot-note{color:#7F77A3; font-size:12px; margin-top:10px}

/* корзина */
.cart-panel{width:min(380px,92vw)}
.cart-panel .offcanvas-header{border-bottom:1px solid var(--line)}
.cart-list{list-style:none; margin:0 0 18px; padding:0; display:grid; gap:10px}
.cart-list li{display:flex; justify-content:space-between; gap:12px; font-size:14px; padding:10px 12px; background:var(--soft); border-radius:11px}
.cart-empty{color:var(--mute); font-size:13.5px}
.cart-total{display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-top:1px solid var(--line); margin-bottom:14px}
.cart-total b{font-size:20px; letter-spacing:-.02em}
.cart-note{margin-top:12px; font-size:12px; color:var(--mute)}

@media (max-width:991px){
  .search-form .form-control{width:100%}
  .nav-main .navbar-collapse{padding-top:10px}
  .hero-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .btn-cart{width:100%; justify-content:center; margin-top:8px}
}
@media (max-width:575px){
  .hero-price{right:14px; bottom:14px; padding:9px 12px}
  .price-lg{font-size:20px}
  .product-meta{min-height:0}
  .product-foot{flex-direction:column; align-items:flex-start; gap:8px}
  .btn-add{width:100%}
}