/* =========================================================
Cleaned CSS (no duplicates; latest rules win)
Notes:
1) To enable full-bleed hero, add class `is-fullbleed` to `.app`.
2) To hide the color picker in HERO, add class `hide-color-chooser` to `.app`.
========================================================= */
:root{
--bg:#eef1f7;
--surface:#ffffff;
--border:#e1e4eb;
--text:#12141a;
--muted:#6b6f7a;
--primary:#2563eb;
--accent:#ef4444;
--ok:#22c55e;
--shadow-lg:0 18px 45px rgba(30,41,59,.18);
--shadow:0 10px 24px rgba(30,41,59,.12);
--shadow-sm:0 6px 14px rgba(30,41,59,.10);
}
*{box-sizing:border-box}
html,body{
margin:0; padding:0; background:var(--bg); color:var(--text);
font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
/* ===== Layout: stage & container (480px) ===== */
.stage{min-height:100dvh; display:flex; justify-content:center}
.app{
max-width:480px; width:100%;
background:linear-gradient(180deg,#fff,#fbfcff);
border:1px solid var(--border); border-radius:0;
box-shadow:var(--shadow-lg); overflow:hidden;
}
/* ===== Topbar ===== */
.topbar{
display:flex; justify-content:space-between; align-items:center;
padding:16px 18px; background:#fff; border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:10px}
.logo-mark{
width:28px; height:28px; border-radius:8px;
background: url('../img/logo-head.png') center/28px 28px no-repeat;
}
.logo-text{font-weight:900; font-size:18px}
.logo-text span{color:var(--accent)}
.online{
display:flex; align-items:center; gap:8px; font-size:12px; color:#2b2f39; background:#fff;
border:1px solid var(--border); border-radius:999px; padding:6px 10px; box-shadow:0 3px 10px rgba(0,0,0,.05);
}
.online .dot{width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px rgba(34,197,94,.6)}
/* ===== HERO ===== */
.hero{padding:0}
.hero-card{
--pad:20px;
position:relative; background:#fff; border:none;
border-radius:0; padding:0; box-shadow:none;
}
/* Image placeholder */
.ph{
position:relative; height:585px;
background:url(../img/logo.jpg) no-repeat center/cover;
border:none; border-radius:14px; overflow:hidden;
}
.hero-card > .ph:first-child{
margin:calc(var(--pad) * -1) calc(var(--pad) * -1) 16px;
border-radius:18px 18px 0 0; position:relative; overflow:hidden;
}
/* Discount ribbon (hidden by default) */
.hero-card > .ph:first-child::before{
display:none; content:"Знижка 40%";
position:absolute; top:120px; left:-70px; transform-origin:left top; transform:rotate(-33deg);
padding:8px 96px; background:linear-gradient(90deg,#ef4444,#dc2626); color:#fff;
font-weight:900; font-size:14px; letter-spacing:.06em; text-transform:uppercase;
border-radius:6px; box-shadow:0 6px 14px rgba(0,0,0,.25); white-space:nowrap; pointer-events:none; z-index:2;
}
/* Timer (уменьшенный) */
.timer.ua{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px; /* было 14px */
margin:8px 0 14px; /* было 12px 0 20px */
width:100%;
}
.timer.ua .sep{display:none}
.timer.ua .cell{
position:relative;
height:64px; /* было 88px */
border-radius:12px; /* было 16px */
background:linear-gradient(180deg,#fde047,#ffd226);
display:flex; flex-direction:column; align-items:center; justify-content:center;
box-shadow:0 6px 14px rgba(253,224,71,.30), inset 0 -2px 0 rgba(0,0,0,.06); /* чуть легче */
}
.timer.ua .cell b{
font-size:clamp(18px,5vw,24px); /* было clamp(20px,6vw,30px) */
line-height:1;
font-weight:900;
color:#111827;
}
.timer.ua .cell span{
font-size:10px; /* было 11px */
text-transform:uppercase;
letter-spacing:.04em;
color:#374151;
}
/* Price */
.price-ua{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; margin:12px 0 16px; padding:10px 30px; border-radius:14px}
.price-ua .label{font-size:12px; color:#6b7280; text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px}
.price-ua .old{font-size:28px; font-weight:900; color:#9ca3af; text-decoration:line-through}
.price-ua .old .cur{font-size:12px; margin-left:6px}
.price-ua .now{font-size:32px; font-weight:900; color:var(--accent); text-shadow:0 1px 0 #fff}
.price-ua .now .cur{font-size:12px; margin-left:6px; color:var(--accent)}
.price-ua .arrow svg{width:110px; height:auto}
/* ===== Sections & cards ===== */
.section{padding:20px}
.h2{font-size:18px; font-weight:900; margin:0 0 14px}
.card{background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:0 8px 20px rgba(0,0,0,.05); padding:16px}
/* ===== Benefits (base) ===== */
.benefits-grid{display:grid; gap:18px}
.benefit.card{display:flex; flex-direction:column; gap:12px; padding:16px}
.b-img{width:100%; height:160px; border-radius:12px; overflow:hidden; background:#f3f4f7}
.b-img img{width:100%; height:100%; object-fit:cover}
.b-text h3{margin:0 0 6px; font-size:16px; font-weight:800}
.b-text p{margin:0; color:#2b2f39; font-size:14px; line-height:1.5}
/* ===== Form ===== */
.form-box{
margin-top:10px; border-radius:18px;
background:linear-gradient(#fff,#fff) padding-box,
linear-gradient(135deg,#e5e7eb,#f59e0b33,#ef444455,#60a5fa33) border-box;
border:1px solid transparent; box-shadow:0 18px 36px rgba(17,24,39,.10);
}
.form-box__inner{border-radius:16px; padding:16px; background:radial-gradient(120% 140% at 0% 0%, #ffffff 0%, #fbfcff 100%)}
.form-title{margin:6px 0 6px; text-align:center; font-size:22px; font-weight:900; color:#111827}
.form-subtitle{margin:0 0 12px; text-align:center; font-size:13px; color:#6b7280}
.form{display:grid; gap:12px; margin:0}
.input-wrap{position:relative}
.ico-badge{
position:absolute; left:10px; top:50%; transform:translateY(-50%);
width:34px; height:34px; border-radius:999px; display:flex; align-items:center; justify-content:center;
background:linear-gradient(180deg,#f3f4f6,#e5e7eb); border:1px solid #e5e7eb; color:#6b7280;
box-shadow:inset 0 1px 0 #fff, 0 2px 6px rgba(0,0,0,.05);
}
.input{
width:100%; height:56px; padding:12px 14px 12px 56px;
border:1px solid var(--border); border-radius:14px; background:#fff; color:var(--text); font-size:15.5px;
transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
box-shadow:inset 0 1px 0 #fff, 0 1px 0 rgba(255,255,255,.6);
}
.input::placeholder{color:#9aa3b2}
.input:hover{border-color:#d7dbe5}
.input:focus{outline:0; border-color:#60a5fa; box-shadow:0 0 0 3px rgba(96,165,250,.25); background:#fcfdff}
.btn{font-size:18px; letter-spacing:.03em; height:58px; border-radius:100px; font-weight:900; border:1px solid transparent; cursor:pointer}
.btn-block{width:100%}
.btn.primary{
background:linear-gradient(180deg,#ef4444,#dd3333); color:#fff; border-color:#ef4444;
box-shadow:0 14px 24px rgba(221,51,51,.25), inset 0 -2px 0 rgba(255,255,255,.12);
transition:transform .08s ease, box-shadow .2s ease;
}
.btn.primary:hover{transform:translateY(-1px)}
.btn.primary:active{transform:translateY(0); box-shadow:0 10px 18px rgba(221,51,51,.25), inset 0 -1px 0 rgba(255,255,255,.12)}
.stock-note{margin:8px 0 0; text-align:center; color:#6b7280; font-size:13px}
.stock-pill{background:#fde68a; color:#111827; border:1px solid #fcd34d; padding:3px 8px; border-radius:8px; font-weight:800}
/* ===== Benefits PRO (always vertical) ===== */
.benefits-grid--pro{display:grid; grid-template-columns:1fr; gap:20px}
.benefit--pro{
position:relative; padding:16px; border-radius:18px;
background:linear-gradient(#fff,#fff) padding-box,
linear-gradient(135deg,#e5e7eb,#60a5fa33,#f59e0b33,#ef444455) border-box;
border:1px solid transparent; box-shadow:0 10px 24px rgba(0,0,0,.06);
}
.b-media{position:relative}
.b-media .b-img{height:540px; border-radius:6px; overflow:hidden; background:#f3f4f7}
.b-media .b-img img{width:100%; height:100%; object-fit:cover}
.b-ico{
position:absolute; right:12px; top:12px; width:40px; height:40px; border-radius:999px; display:flex; align-items:center; justify-content:center;
background:radial-gradient(120% 120% at 20% 10%, #ffffff 0%, #f3f4f6 60%, #e5e7eb 100%);
border:1px solid #e5e7eb; box-shadow:inset 0 1px 0 #fff, 0 6px 16px rgba(0,0,0,.08); color:#111827;
}
.b-head{margin-top:12px; display:flex; flex-direction:column; gap:8px}
.b-title{margin:0; font-size:16px; font-weight:900}
.b-badges{display:flex; gap:6px; flex-wrap:wrap}
.badge{font-size:11px; font-weight:800; letter-spacing:.02em; padding:6px 10px; border-radius:999px; background:#f8fafc; color:#1f2937; border:1px solid #e5e7eb; box-shadow:0 2px 6px rgba(0,0,0,.04)}
.b-desc{margin:6px 0 0; color:#2b2f39; font-size:14px; line-height:1.55}
/* ===== Minimal size table ===== */
.table-card{padding:0; overflow:hidden; border-radius:16px; background:#fff}
.table-card--minimal{
padding:0; border-radius:16px;
background:linear-gradient(#fff,#fff) padding-box,
linear-gradient(135deg,#e5e7eb,#60a5fa33,#f59e0b33,#ef444455) border-box;
border:1px solid transparent; box-shadow:0 8px 20px rgba(0,0,0,.05); overflow:hidden;
}
.sizes--minimal{width:100%; border-collapse:separate; border-spacing:0; font-size:14px; color:#111827; background:transparent}
.sizes--minimal thead th{
padding:12px 14px; text-align:center; font-weight:800; letter-spacing:.01em;
background:linear-gradient(180deg,#ffffff,#f8fafc); border:0; position:relative;
}
.sizes--minimal thead th::after{content:""; position:absolute; left:12px; right:12px; bottom:0; height:1px; background:var(--border)}
.sizes--minimal tbody th,.sizes--minimal td{padding:12px 14px; text-align:center; border:0; background:transparent}
.sizes--minimal tbody tr + tr td,.sizes--minimal tbody tr + tr th{border-top:1px solid #e9edf4}
.sizes--minimal tbody th[scope="row"]{font-weight:900; color:#0f172a; letter-spacing:.02em}
.sizes--minimal tbody tr:hover{background:#fbfcff}
.sizes--minimal thead th:first-child{border-top-left-radius:16px}
.sizes--minimal thead th:last-child{border-top-right-radius:16px}
.sizes--minimal tbody tr:last-child th:first-child{border-bottom-left-radius:16px}
.sizes--minimal tbody tr:last-child td:last-child{border-bottom-right-radius:16px}
/* Size help banner */
.size-help{
display:flex; align-items:center; gap:10px; margin-top:10px; padding:12px 14px; border-radius:14px;
background:linear-gradient(#fff,#fff) padding-box,
linear-gradient(135deg,#e5e7eb,#60a5fa33,#f59e0b33,#ef444455) border-box;
border:1px solid transparent; box-shadow:0 8px 18px rgba(0,0,0,.06); color:#1f2937;
}
.size-help__ico{
width:80px; height:38px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
background:radial-gradient(120% 140% at 0% 0%, #ffffff 0%, #f3f4f6 60%, #e5e7eb 100%);
border:1px solid #e5e7eb; box-shadow:inset 0 1px 0 #fff, 0 2px 8px rgba(0,0,0,.05); color:#111827;
}
.size-help__text{font-size:13.5px; line-height:1.45}
.size-help__text b{font-weight:900; color:#0f172a}
/* ===== Reviews ===== */
.reviews{display:grid; gap:14px}
.rev.card{display:block; padding:16px; min-height:auto}
.rev-head{display:flex; gap:10px; align-items:center; margin-bottom:8px}
.ph.av{width:40px; height:40px; border-radius:50%; background:#e5e7eb}
.stars{color:#f59e0b; letter-spacing:1px; font-size:14px}
.rev p{margin:0; color:#2b2f39}
/* Reviews: social/IG style */
.reviews--social{display:grid; gap:14px}
.rev--post{
padding:14px; border-radius:16px;
background:linear-gradient(#fff,#fff) padding-box,
linear-gradient(135deg,#e5e7eb,#60a5fa33,#f59e0b33,#ef444455) border-box;
border:1px solid transparent; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.rev-head--social{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.av-img{width:42px; height:42px; border-radius:50%; object-fit:cover; background:#e5e7eb; flex:0 0 42px; box-shadow:inset 0 1px 0 #fff}
.rev-meta{display:flex; flex-direction:column; line-height:1.1}
.rev-name{font-size:15px}
.rev-sub{display:flex; align-items:center; gap:6px; color:#6b7280; font-size:12px}
.rev-sub .dot{opacity:.6}
.rev-badge{margin-left:auto; display:inline-flex; align-items:center; gap:6px; padding:6px 10px; font-size:11.5px; font-weight:800; border-radius:999px; color:#1f2937; background:linear-gradient(180deg,#f8fafc,#eef2ff); border:1px solid #e5e7eb; box-shadow:0 2px 6px rgba(0,0,0,.04)}
.rev-text{margin:6px 0 10px; color:#2b2f39}
.rev-media{display:grid; gap:6px; margin:10px 0 10px; grid-template-columns:repeat(2,1fr); grid-auto-rows:120px}
.rev-media .rev-photo{width:100%; height:100%; object-fit:cover; border-radius:12px; background:#f3f4f7}
.rev-media:has(.rev-photo:nth-child(1):last-child){grid-template-columns:1fr; grid-auto-rows:220px}
.rev-actions{display:flex; gap:10px}
.rev-btn{width:36px; height:36px; border-radius:999px; padding:0; border:1px solid #e5e7eb; display:inline-flex; align-items:center; justify-content:center; background:#fff; color:#111827; box-shadow:0 2px 8px rgba(0,0,0,.05)}
.rev-btn:active{transform:translateY(1px)}
/* ===== Delivery / Payment cards ===== */
.cards{display:grid; gap:14px}
.ship-cards{display:grid; gap:14px}
.ship-card{
display:flex; gap:12px; align-items:flex-start; padding:14px; border-radius:16px;
background:linear-gradient(#fff,#fff) padding-box,
linear-gradient(135deg,#e5e7eb,#60a5fa33,#f59e0b33,#ef444455) border-box;
border:1px solid transparent; box-shadow:0 8px 18px rgba(0,0,0,.06);
}
.ship-ico{width:42px; height:42px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; background:radial-gradient(120% 140% at 0% 0%, #ffffff 0%, #f3f4f6 60%, #e5e7eb 100%); border:1px solid #e5e7eb; color:#111827; flex:0 0 42px; box-shadow:inset 0 1px 0 #fff, 0 2px 8px rgba(0,0,0,.04)}
.ship-body b{font-size:15px}
.ship-body .muted{margin-top:2px; font-size:13px}
.chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.chip{padding:5px 10px; border-radius:999px; font-size:11.5px; font-weight:800; background:#f8fafc; color:#1f2937; border:1px solid #e5e7eb; box-shadow:0 2px 6px rgba(0,0,0,.04)}
.chip-ok{background:#ecfdf5; border-color:#bbf7d0; color:#065f46}
/* ===== How-to steps ===== */
.howto{padding:12px 14px; border-radius:16px; background:#fff; border:1px solid var(--border); box-shadow:0 8px 18px rgba(0,0,0,.06); margin-top:14px}
.howto-title{margin:0 0 8px; font-size:16px; font-weight:900; line-height:1.2}
.how-step{display:flex; gap:10px; align-items:flex-start; padding:12px 0}
.how-step + .how-step{border-top:1px solid #eef1f7}
.how-step:last-child{padding-bottom:8px}
.step-ico{width:34px; height:34px; margin-top:2px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#f3f4f6,#e5e7eb); border:1px solid #e5e7eb; color:#111827; flex:0 0 34px; box-shadow:inset 0 1px 0 #fff, 0 2px 6px rgba(0,0,0,.05)}
.step-text{line-height:1.4}
.step-text b{display:block; margin-bottom:3px; font-size:14.5px; font-weight:900; color:#0f172a}
.step-text .muted{font-size:13.5px; color:#6b7280}
.step-text .accent{font-weight:900; color:#111827}
/* ===== Product specs card ===== */
.prod-spec{padding:14px}
.spec-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:12px}
.spec-2cols{display:grid; gap:12px; margin:6px 0 10px; grid-template-columns:1fr}
.spec-col{background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px; box-shadow:0 4px 12px rgba(0,0,0,.04)}
.spec-title{display:flex; align-items:center; gap:8px; margin:0 0 6px; font-size:14.5px; font-weight:900; color:#0f172a}
.spec-title svg{opacity:.85}
.spec-text{margin:0; font-size:13.5px; color:#2b2f39; line-height:1.55}
.size-chips .chip{font-weight:800}
@media (min-width:480px){.spec-2cols{grid-template-columns:1fr 1fr}}
/* Size table spacing tweak */
.size-table-card{margin-top:12px}
/* ===== Colors list ===== */
.colors-card{margin-top:12px; padding:12px 14px}
.colors-title{margin:0 0 8px; display:flex; align-items:center; gap:8px; font-size:15px; font-weight:900; color:#0f172a}
.colors-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
@media (min-width:420px){.colors-list{grid-template-columns:repeat(3,1fr)}}
.color-item{display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:0 12px; height:40px; box-shadow:0 2px 6px rgba(0,0,0,.04); font-size:14px; color:#1f2937}
.swatch-dot{width:12px; height:12px; border-radius:999px; border:1px solid #e5e7eb; background:var(--sw,#f3f4f6); box-shadow:inset 0 1px 0 #fff; flex:0 0 12px}
/* ===== Sizes list ===== */
.sizes-card{padding:12px 14px; margin-top:12px}
.sizes-title{margin:0 0 8px; display:flex; align-items:center; gap:8px; font-size:15px; font-weight:900; color:#0f172a}
.sizes-list{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0; padding:0; list-style:none}
.size-item{background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,.04); padding:10px 12px; display:flex; align-items:center; justify-content:center}
.size-tag{display:inline-flex; align-items:center; justify-content:center; height:40px; border:1px solid #e5e7eb; border-radius:999px; background:#fff; font-weight:600; font-size:13px; padding:0 14px; min-width:72px; box-shadow:0 1px 0 rgba(0,0,0,.04)}
/* Table inside card */
.size-table-card .sizes{width:100%; border-collapse:collapse}
.size-table-card thead th{padding:12px; font-size:13px; font-weight:700; text-align:left}
.size-table-card tbody th,.size-table-card tbody td{padding:12px; font-size:14px; line-height:1.2; height:44px; border-top:1px solid #eef2f7}
/* ===== Availability note ===== */
.avail-note{
display:flex; align-items:center; flex-wrap:wrap; gap:8px; row-gap:4px;
background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46;
padding:10px 12px; border-radius:12px; margin-top:12px; font-size:13.5px; line-height:1.45;
}
.avail-note .sep{opacity:.6}
.avail-note b{font-weight:700}
.avail-note .ico{width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:#10b981; color:#fff; font-size:12px; line-height:1}
/* Small spacing tweaks between cards */
.sizes-card + .colors-card{margin-top:12px}
.colors-card + .size-table-card{margin-top:12px}
#more-photos .size-help{margin-top:12px}
/* ===== Variants card (sizes + colors) ===== */
#more-photos .variants-card{border-radius:14px; padding:16px; margin-top:16px}
.variants-title{display:flex; align-items:center; gap:8px; font-weight:800; font-size:16px; line-height:1.2; margin:0 0 12px}
.v-subtitle{display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; margin:6px 0 10px; color:#0f172a}
.v-colors{border-top:1px solid #eef2f7; padding-top:12px; margin-top:12px}
.v-sizes-list{display:flex; gap:10px; margin:0; padding:0; list-style:none; flex-wrap:wrap}
.v-colors-list{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:0; padding:0; list-style:none}
.v-colors-list .color-item{display:flex; align-items:center; gap:10px; height:40px; padding:0 12px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; font-size:14px}
/* ===== Slider (generic) ===== */
.gallery{position:relative; padding:12px; border-radius:16px; overflow:visible}
.slider-hint{display:flex; align-items:center; gap:8px; font-size:13px; color:#6b7280; margin-bottom:10px}
.slider-hint__ico{
width:28px; height:28px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
background:radial-gradient(120% 140% at 0% 0%, #ffffff 0%, #f3f4f6 60%, #e5e7eb 100%);
border:1px solid #e5e7eb; box-shadow:inset 0 1px 0 #fff; color:#111827;
}
.slider-track{
list-style:none; margin:0; padding:0;
display:grid; grid-auto-flow:column; grid-auto-columns:100%;
gap:12px; overflow-x:auto; overscroll-behavior-x:contain;
scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
border-radius:12px; scrollbar-width:none; touch-action:pan-y;
}
.slider-track::-webkit-scrollbar{display:none}
.slide{scroll-snap-align:center; position:relative; overflow:hidden; border-radius:0; background:#f3f4f7; min-height:260px}
.slide img{width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; user-select:none}
.slider-btn{
position:absolute; top:50%; transform:translateY(-50%);
width:36px; height:36px; border-radius:999px; display:flex; align-items:center; justify-content:center;
border:1px solid #e5e7eb; background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.08); color:#111827; opacity:.95; z-index:5; pointer-events:auto;
}
.slider-btn.prev{left:30px}
.slider-btn.next{right:30px}
.slider-btn:hover,.slider-btn:focus-visible{outline:0; border-color:#d1d5db; box-shadow:0 8px 18px rgba(0,0,0,.12)}
.slider-track.is-dragging{cursor:grabbing; cursor:-webkit-grabbing}
.slider-dots{display:flex; justify-content:center; gap:6px; margin-top:10px}
.slider-dots button{width:8px; height:8px; border-radius:999px; border:0; background:#e5e7eb; padding:0; cursor:pointer}
.slider-dots button[aria-current="true"]{width:18px; border-radius:999px; background:#111827}
/* ===== Meta pills ===== */
.meta-pills{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0}
.pill{padding:7px 12px; border-radius:999px; border:1px solid var(--border); background:#fff; font-weight:700; font-size:12px; box-shadow:0 2px 8px rgba(0,0,0,.03)}
.pill.dark{background:#111827; color:#fff; border-color:#111827}
.pill.outline{background:transparent; color:#111827}
.meta-pills .pill svg{vertical-align:-2px; opacity:.8}
/* ===== HERO title ===== */
.hero-title{margin:10px 0 12px; font-size:18px; font-weight:900; line-height:1.25; text-align:center; color:#0f172a}
.hero-title .badge-qty{display:inline-block; margin-left:6px; padding:4px 10px; font-size:13px; font-weight:800; color:#fff; background:linear-gradient(90deg,#ef4444,#dc2626); border-radius:999px; box-shadow:0 2px 6px rgba(0,0,0,.15); vertical-align:middle}
/* ===== HERO color chooser (hidden by default) ===== */
.color-pills-grid{display:none; grid-template-columns:repeat(5,1fr); gap:8px; margin:8px 0 14px}
.swatch-pill{
height:36px; border-radius:10px; border:1px solid var(--border); font-size:11px; letter-spacing:0; cursor:pointer;
display:flex; align-items:center; justify-content:center; background:var(--sw,#f3f4f6); color:var(--txt,#111827);
box-shadow:0 2px 6px rgba(0,0,0,.05); transition:transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.swatch-pill:hover,.swatch-pill:focus-visible{transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,.12); border-color:#d1d5db; outline:none}
.swatch-pill.is-active{border-color:#60a5fa; box-shadow:0 0 0 3px rgba(96,165,250,.25)}
.color-hint{display:none; align-items:center; gap:6px; font-size:13px; color:#6b7280; margin:6px 0 10px; line-height:1.4}
.color-hint b{color:#111827; font-weight:600}
.color-hint__ico{font-size:14px; line-height:1; opacity:.8}
/* ===== Footer ===== */
.footer{padding:18px; text-align:center; color:#6b6f7D; border-top:1px solid var(--border); background:#fff; font-size:12px}
/* ===== Deal box (Акція) ===== */
.deal-box{
display:flex; align-items:center; gap:10px; padding:12px 14px; margin:10px 0 16px;
border:1px dashed var(--border);
background:linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,#e5e7eb,#60a5fa33,#f59e0b33,#ef444455) border-box;
border-radius:12px; box-shadow:0 6px 16px rgba(0,0,0,.06);
}
.deal-ico{
display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px;
background:radial-gradient(120% 140% at 0% 0%, #ffffff 0%, #f3f4f6 60%, #e5e7eb 100%);
border:1px solid #dde3ef; color:#1f2937; box-shadow:inset 0 1px 0 #fff, 0 2px 8px rgba(0,0,0,.05); flex:0 0 34px;
}
.deal-text{font-size:13px; line-height:1.35; color:#4b5563}
.deal-text b{color:#111827}
/* ===== HERO overlay specs on photo (default bubble) ===== */
.hero-card .ph.main{position:relative}
.hero-specs{
position:absolute; left:12px; bottom:12px; display:flex; flex-wrap:wrap; gap:8px; padding:10px 12px; border-radius:12px; color:#0f172a;
background:rgba(255,255,255,.82); border:1px solid rgba(226,232,240,.9); box-shadow:0 8px 18px rgba(0,0,0,.12); backdrop-filter:saturate(120%) blur(6px);
}
.hero-specs .spec{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-size:12.5px; font-weight:800; background:#fff; border:1px solid #e5e7eb; box-shadow:0 2px 6px rgba(0,0,0,.05); white-space:nowrap}
.hero-specs .spec svg{opacity:.8; vertical-align:-2px}
/* ===== Mode: full-bleed HERO ===== */
.app.is-fullbleed .hero-card{border:none; border-radius:0; padding:0; box-shadow:none}
.app.is-fullbleed .hero-card > .ph.main{margin:0; border-radius:0; height:630px; background-size:cover; background-position:center}
.after-hero{padding:16px 20px 20px; background:transparent}
.hero + .after-hero{padding-top:16px}
@media (max-width:360px){.after-hero{padding:14px 16px 16px}.after-hero > * + *{margin-top:12px}}
/* ===== Default: hide color chooser in HERO ===== */
.color-hint,.color-pills-grid{display:none}
/* ===== Select (custom arrow in circle) ===== */
.select{
appearance:none; -webkit-appearance:none; -moz-appearance:none;
width:100%; height:56px; padding:12px 14px 12px 56px; padding-right:64px;
border:1px solid var(--border); border-radius:14px;
background:radial-gradient(120% 140% at 0% 0%, #ffffff 0%, #fbfcff 100%);
font-size:15.5px; color:var(--text);
box-shadow:inset 0 1px 0 #fff, 0 1px 0 rgba(255,255,255,.6);
transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; cursor:pointer;
}
.select::-ms-expand{display:none}
.select:invalid{color:#9aa3b2}
.select:hover{border-color:#d7dbe5}
.select:focus{outline:0; border-color:#60a5fa; box-shadow:0 0 0 3px rgba(96,165,250,.25); background:radial-gradient(120% 140% at 0% 0%, #ffffff 0%, #f3faff 100%)}
.select-wrap{position:relative}
.select-wrap::before{
content:""; position:absolute; right:12px; top:50%; width:34px; height:34px; transform:translateY(-50%);
border-radius:999px; background:radial-gradient(120% 140% at 0% 0%, #ffffff 0%, #f3f4f6 60%, #e5e7eb 100%); border:1px solid #e5e7eb;
box-shadow:inset 0 1px 0 #fff, 0 2px 6px rgba(0,0,0,.05); pointer-events:none;
}
.select-wrap::after{
content:""; position:absolute; right:25px; top:50%; width:8px; height:8px; transform:translateY(-50%) rotate(-45deg);
border-left:2px solid #6b7280; border-bottom:2px solid #6b7280; pointer-events:none;
transition:transform .2s ease, border-color .2s ease;
}
.select-wrap.is-open::after{transform:translateY(-50%) rotate(135deg)}
.select-wrap.is-open::before{border-color:#dbeafe; box-shadow:0 0 0 3px rgba(96,165,250,.18), inset 0 1px 0 #fff}
/* ===== Video section ===== */
.video-card{
padding:14px; border-radius:16px;
background:linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,#e5e7eb,#60a5fa33,#f59e0b33,#ef444455) border-box;
border:1px solid transparent; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.video-frame{
position:relative; border-radius:14px; overflow:hidden; background:#f3f4f7;
aspect-ratio:16/9; box-shadow:0 6px 16px rgba(0,0,0,.06); height:408px; width:408px;
}
.video-el{width:100%; height:100%; display:block; object-fit:cover}
.video-badge{
position:absolute; left:12px; top:12px; display:inline-flex; align-items:center; gap:6px;
padding:6px 10px; font-size:11.5px; font-weight:800; border-radius:999px; color:#1f2937;
background:linear-gradient(180deg,#f8fafc,#eef2ff); border:1px solid #e5e7eb; box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.video-mute-btn{
position:absolute; right:12px; bottom:12px; width:40px; height:40px;
border-radius:999px; border:1px solid #e5e7eb; display:inline-flex; align-items:center; justify-content:center;
background:radial-gradient(120% 140% at 0% 0%, #ffffff 0%, #f3f4f6 60%, #e5e7eb 100%); color:#111827;
box-shadow:inset 0 1px 0 #fff, 0 2px 8px rgba(0,0,0,.06);
cursor:pointer; transition:transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.video-mute-btn:hover{transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.12); border-color:#d1d5db}
.video-mute-btn:active{transform:translateY(0)}
.video-mute-btn.is-muted .ico-off{display:block}
.video-mute-btn.is-muted .ico-on{display:none}
.video-mute-btn:not(.is-muted) .ico-off{display:none}
.video-mute-btn:not(.is-muted) .ico-on{display:block}
.video-note{margin:10px 2px 0; font-size:13px; color:#6b7280}
.video-frame:focus-within{outline:0; box-shadow:0 0 0 3px rgba(96,165,250,.25), 0 6px 16px rgba(0,0,0,.08)}
/* ===== HERO slider (scoped to HERO only) ===== */
.hero .hero-slider{position:relative; padding:0; border-radius:0; overflow:hidden}
.hero .hero-slider .slider-track{
height:658px; border-radius:0 !important; overflow:hidden; background:transparent !important; scrollbar-width:none;
}
.hero .hero-slider .slider-track::-webkit-scrollbar{display:none; height:0}
.hero .hero-slider .slide{min-height:0}
.hero .hero-slider .slide img{width:100%; height:100%; object-fit:cover; display:block}
/* arrows inside photo (fallback — не используется когда включена панель) */
.hero .hero-slider .slider-btn{top:auto; bottom:16px; transform:none}
.hero .hero-slider .prev{left:16px}
.hero .hero-slider .next{right:16px}
/* photo counter */
.hero-counter{
position:absolute; right:12px; top:12px; z-index:6;
padding:6px 10px; border-radius:999px; font-size:12px; font-weight:800; color:#1f2937;
background:rgba(255,255,255,.9); border:1px solid #e5e7eb; box-shadow:0 2px 6px rgba(0,0,0,.06);
}
/* ======= HERO controls (single source of truth) ======= */
.hero .hero-slider.card{padding:0 !important; border:none !important; background:transparent !important; box-shadow:none !important}
.hero .slider-dots, .hero .hero-hint{display:none !important}
.hero .hero-controls{
position:absolute; left:12px; right:12px;
bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:6;
display:grid; grid-template-columns:36px 1fr 36px; /* symmetry */
align-items:center; gap:10px;
padding:8px;
background:rgba(255,255,255,.92);
backdrop-filter:blur(6px) saturate(120%);
border:1px solid #e5e7eb; border-radius:16px;
box-shadow:0 6px 16px rgba(0,0,0,.08);
}
/* Панель управления внутри HERO */
.hero .hero-controls{
position:absolute; left:12px; right:12px;
bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:6;
display:grid; grid-template-columns:40px 1fr 40px; /* симметрия */
align-items:center; gap:10px; padding:8px;
background:rgba(255,255,255,.92);
backdrop-filter:blur(6px) saturate(120%);
border:1px solid #e5e7eb; border-radius:16px;
box-shadow:0 6px 16px rgba(0,0,0,.08);
}
/* Стрелки */
.hero .hero-controls .slider-btn{
position:static; width:40px; height:40px; flex:0 0 40px;
display:inline-flex; align-items:center; justify-content:center;
border:1px solid #e5e7eb; border-radius:999px; background:#fff;
box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.hero .hero-controls .slider-btn svg{display:block}
/* Центр как «таби» — всегда в одну строку */
.hero .hero-controls .hero-tabs{
min-width:0; display:flex; justify-content:center; align-items:center;
gap:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Таб */
.hero .hero-controls .tab{
display:inline-flex; align-items:center; gap:8px;
padding:12px 12px; font-size:12.5px; font-weight:800; color:#0f172a;
background:#fff; border:1px solid #e5e7eb; border-radius:999px;
box-shadow:0 2px 6px rgba(0,0,0,.05);
}
/* Иконки в табах */
.hero .hero-controls .tab .ico{
width:14px; height:14px; flex:0 0 14px;
stroke:currentColor; fill:none; stroke-width:2; opacity:.85;
}
/* Мобилка */
@media (max-width:420px){
.hero .hero-controls{grid-template-columns:36px 1fr 36px; padding:6px 8px}
.hero .hero-controls .slider-btn{width:36px; height:36px}
.hero .hero-controls .tab{padding:7px 10px; font-size:11.5px}
.hero .hero-controls .tab .ico{width:13px; height:13px}
}
/* ===== Product info (vertical, compact, not clickable) ===== */
.prod-info{ display:flex; flex-direction:column; gap:12px }
/* Матеріал — легкий чіп */
.pi-row{
display:inline-flex; align-items:center; gap:8px;
max-width:100%; padding:8px 12px;
background:#fff; color:#1f2937;
border:1px solid var(--border); border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,.04); font-size:13.5px;
}
.pi-row b{ color:#0f172a; font-weight:900 }
.pi-ico{ width:14px; height:14px; opacity:.85; flex:0 0 14px }
/* Блок (заголовок + контент), все вертикально */
.pi-block{
padding:12px; border:1px solid var(--border); border-radius:12px;
background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.04);
}
.pi-title{
display:flex; align-items:center; gap:8px;
font-size:14px; font-weight:900; color:#0f172a; margin-bottom:8px;
}
/* Розміри — рівна, «здорова» обводка */
.pi-sizes{
list-style:none; margin:0; padding:0;
display:flex; flex-wrap:wrap; gap:8px;
}
.size-pill{
display:flex; align-items:center; justify-content:center;
height:34px; min-width:54px; padding:0 12px;
background:#fff; color:#0f172a; font-weight:800; font-size:13px;
border:1.5px solid #d7dbe5; /* виразніша обводка */
border-radius:999px;
box-shadow:0 1px 0 rgba(255,255,255,.6), 0 2px 6px rgba(0,0,0,.04);
pointer-events:none; user-select:none;
}
/* дрібний тюнінг для дуже вузьких екранів */
@media (max-width:360px){
.size-pill{ min-width:48px; height:32px; font-size:12.5px }
}
/* Кольори: авто-подбор столбцов под ширину контейнера */
.pi-swatches{
list-style:none; margin:0; padding:0;
display:grid;
grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); /* auto-fit робить сам */
gap:8px;
}
.swatch{
height:28px;
border-radius:8px;
background:var(--sw,#f3f4f6);
border:1px solid var(--border);
pointer-events:none;
}
/* База кнопок (и для ) */
.btn{
display:flex; align-items:center; justify-content:center;
text-decoration:none; /* чтобы выглядела как кнопка */
font-size:18px;
letter-spacing:.03em;
height:58px;
border-radius:100px;
font-weight:900;
border:1px solid transparent;
cursor:pointer;
}
/* Твой красный стиль */
.btn.primary{
background:linear-gradient(180deg,#ef4444,#dd3333);
color:#fff;
border-color:#ef4444;
box-shadow:0 14px 24px rgba(221,51,51,.25), inset 0 -2px 0 rgba(255,255,255,.12);
transition:transform .08s ease, box-shadow .2s ease;
}
.btn.primary:hover{ transform:translateY(-1px) }
.btn.primary:active{
transform:translateY(0);
box-shadow:0 10px 18px rgba(221,51,51,.25), inset 0 -1px 0 rgba(255,255,255,.12);
}
.btn.primary:focus-visible{
outline:0;
box-shadow:0 0 0 3px rgba(96,165,250,.25), 0 12px 22px rgba(221,51,51,.25);
}
/* Ширина 440px (не вылазит за контейнер) */
.btn-cta{ width:440px; max-width:100% }
/* Если где-то нужна на всю ширину контейнера */
.btn-block{ width:100% }
/* ================= Product Card (clean, compact) ================= */
.pcard{
border:1px solid var(--border);
border-radius:16px;
background:#fff;
box-shadow:0 8px 20px rgba(0,0,0,.05);
overflow:hidden;
}
/* ---------- Slider ---------- */
.pcard .pcard-slider{ position:relative }
.pcard .pcard-slider .slider-track{
list-style:none; margin:0; padding:0;
display:grid; grid-auto-flow:column; grid-auto-columns:100%;
height:600px; gap:0;
overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
background:#f3f4f7; border-radius: 16px 16px 0 0;
}
.pcard .pcard-slider .slider-track::-webkit-scrollbar{ display:none }
.pcard .pcard-nav.slider-btn{
position:absolute; bottom:14px; width:36px; height:36px; border-radius:999px;
border:1px solid #e5e7eb; background:#fff; display:flex; align-items:center; justify-content:center;
box-shadow:0 2px 8px rgba(0,0,0,.06); z-index:5;
}
.pcard .pcard-nav.prev{ left:14px }
.pcard .pcard-nav.next{ right:14px }
.pcard .pcard-nav svg{ display:block }
.pcard .pcard-counter{
position:absolute; right:12px; top:12px; z-index:6;
padding:6px 10px; border-radius:999px; font-size:12px; font-weight:800; color:#1f2937;
background:rgba(255,255,255,.9); border:1px solid #e5e7eb; box-shadow:0 2px 6px rgba(0,0,0,.06);
}
/* ---------- Middle row: Price + Specs ---------- */
.pcard .pcard-row{ display:grid; grid-template-columns:1fr; gap:10px; padding:12px }
@media (min-width:420px){ .pcard .pcard-row{ grid-template-columns:1fr 1fr } }
/* ===== Price (centered) ===== */
.pcard .pcard-price-center{
border:1px solid var(--border);
border-radius:12px;
background:#fff;
box-shadow:0 2px 8px rgba(0,0,0,.03);
padding:12px 14px;
text-align:center;
}
/* Верхняя подпись */
.pcard .pcard-price-center__label{
font-size:12px;
letter-spacing:.04em;
text-transform:uppercase;
font-weight:800;
color:#6b7280;
margin-bottom:4px;
}
/* Новая цена (красная, крупная) */
.pcard .pcard-price-center__now{
font-weight:900;
font-size:36px;
line-height:1;
color:var(--accent); /* у тебя уже #ef4444 */
text-shadow:0 1px 0 #fff;
}
.pcard .pcard-price-center__now span{
font-size:.6em;
margin-left:6px;
color:var(--accent);
}
/* Маленькая строка "Стара ціна: ..." */
.pcard .pcard-price-center__oldnote{
margin-top:6px;
font-size:12px;
color:#6b7280;
}
/* Ещё ниже — серая перечёркнутая старая цена */
.pcard .pcard-price-center__oldline{
margin-top:2px;
font-weight:900;
font-size:18px;
line-height:1;
color:#9ca3af;
text-decoration:line-through;
}
/* Чуть компактнее на узких */
@media (max-width:380px){
.pcard .pcard-price-center{ padding:10px 12px }
.pcard .pcard-price-center__now{ font-size:32px }
.pcard .pcard-price-center__oldline{ font-size:16px }
}
/* ===== Specs (vertical compact) ===== */
.pcard .pcard-specBlock{
border:1px solid var(--border); border-radius:12px; padding:8px;
background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.03);
}
.pcard .pcard-tabs--stack{ display:grid; grid-template-columns:1fr; row-gap:6px }
.pcard .pcard-tab{
display:flex; align-items:center; gap:8px;
padding:7px 10px; border:1px solid #e5e7eb; border-radius:10px;
background:#f8fafc; color:#0f172a; font-size:12.5px; font-weight:700;
box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.pcard .pcard-ico{ width:14px; height:14px; opacity:.85; display:block }
/* ---------- Bottom: Color + CTA ---------- */
.pcard .pcard-bottom{ display:grid; grid-template-columns:1fr; gap:10px; padding:0 12px 12px }
@media (min-width:420px){ .pcard .pcard-bottom{ grid-template-columns:auto 1fr; align-items:center } }
/* Color (informational) */
.pcard .pcard-color{
display:flex; align-items:center; gap:8px;
min-height:50px; padding:8px 12px;
border:1px solid var(--border); border-radius:12px;
background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.03);
flex:0 0 210px; max-width:240px;
}
.pcard .pcard-color-label{ font-size:12.5px; color:#6b7280 }
.pcard .pcard-color-swatch{
width:28px; height:16px; border-radius:6px;
background:var(--sw,#1f2937); box-shadow:inset 0 1px 0 #fff;
}
.pcard .pcard-color-name{
font-weight:700; font-size:13px; color:#0f172a;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* CTA button */
.pcard .pcard-btn{
width:100%; max-width:440px; height:50px; margin:0 auto;
display:inline-flex; align-items:center; justify-content:center;
text-decoration:none; border-radius:10px; font-weight:900;
letter-spacing:.03em; font-size:18px; border:1px solid transparent; cursor:pointer;
}
.pcard .pcard-btn--red{
background:linear-gradient(180deg,#ef4444,#dd3333); color:#fff; border-color:#ef4444;
box-shadow:0 2px 4px rgba(221,51,51,.25), inset 0 -2px 0 rgba(255,255,255,.12);
transition:transform .08s ease, box-shadow .2s ease;
}
.pcard .pcard-btn--red:hover{ transform:translateY(-1px) }
.pcard .pcard-btn--red:active{ transform:translateY(0); box-shadow:0 2px 4px rgba(221,51,51,.25), inset 0 -2px 0 rgba(255,255,255,.12) }
/* ===== Price center: subtle % watermark ===== */
.pcard .pcard-price-center{ position:relative; overflow:hidden; }
.pcard .pcard-price-center::after{
content:"";
position:absolute;
right:-10px; /* как было */
top:6px;
width:110px; /* вернул прежний размер */
height:110px;
pointer-events:none;
opacity:.06; /* едва заметный */
background:
url("data:image/svg+xml;utf8,\
") no-repeat center/contain;
}
@media (max-width: 380px){
.pcard .pcard-price-center::after{
width:96px;
height:96px;
right:-8px;
top:-12px;
opacity:.12; /* на маленьких можно чуть ярче */
}
}
/* Бар під слайдером */
.pcard .pcard-shipbar{
display:flex; align-items:center; gap:8px;
padding:10px 14px;
margin:0; /* без відступів */
border-top:1px solid var(--border);
background:#fff; /* як у картки */
font-size:13px; font-weight:700; color:#065f46; /* зелений текст */
}
/* Зелена пульсуюча крапка */
.pcard .pcard-shipdot{
width:8px; height:8px; border-radius:50%;
background:#22c55e; /* var(--ok) за духом сайту */
box-shadow:0 0 0 0 rgba(34,197,94,.6);
animation:pcard-dot-pulse 1.6s ease-in-out infinite;
}
/* Легка пульсація тіні (радіальний розлив) */
@keyframes pcard-dot-pulse{
0% { box-shadow:0 0 0 0 rgba(34,197,94,.6); opacity:1; }
70% { box-shadow:0 0 0 10px rgba(34,197,94,0); opacity:.95; }
100% { box-shadow:0 0 0 0 rgba(34,197,94,0); opacity:1; }
}
.pcard .pcard-shiptxt{ line-height:1; }
/* Полоса под слайдером (одна строка) */
.pcard .pcard-infobar{
display:flex; justify-content:space-between; align-items:center;
gap:12px;
padding:10px 14px;
margin:0; /* без отступов от слайдера */
border-top:1px solid var(--border);
background:#fff;
font-size:13px; font-weight:700; color:#0f172a;
}
/* Левая часть */
.pcard .pcard-infobar-left{ display:flex; align-items:center; gap:8px; min-width:0 }
/* Пульсующая зелёная точка */
.pcard .pcard-shipdot{
width:8px; height:8px; border-radius:50%;
background:#22c55e;
box-shadow:0 0 0 0 rgba(34,197,94,.55);
animation:pcard-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes pcard-dot-pulse{
0% { box-shadow:0 0 0 0 rgba(34,197,94,.55); opacity:1 }
70% { box-shadow:0 0 0 10px rgba(34,197,94,0); opacity:.95 }
100% { box-shadow:0 0 0 0 rgba(34,197,94,0); opacity:1 }
}
/* Правая часть (рейтинг) */
.pcard .pcard-infobar-right{
display:flex; align-items:center; gap:8px; flex-shrink:0;
}
.pcard .pcard-rating-val{ color:#111827; font-weight:900 }
/* Пилюля со звёздами */
.pcard .pcard-starPill{
display:inline-flex; align-items:center; justify-content:center;
padding:4px 8px; border-radius:999px;
background:#111827; color:#fff; line-height:1;
box-shadow:0 2px 6px rgba(0,0,0,.06);
}
/* Рисуем 5 звёзд и заполняем процентом через mask */
.pcard .pcard-stars{
--p: 0%; /* ширина заполнения (например 94%) */
width:80px; height:14px; position:relative; display:inline-block;
}
.pcard .pcard-stars::before,
.pcard .pcard-stars::after{
content:""; position:absolute; inset:0;
-webkit-mask: url('data:image/svg+xml;utf8,\
') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,\
') center/contain no-repeat;
}
.pcard .pcard-stars::before{ background:#9ca3af } /* пустые */
.pcard .pcard-stars::after{
background:#f59e0b; /* заполнение */
clip-path: inset(0 calc(100% - var(--p)) 0 0); /* ширина */
}
/* На очень узких экранах чуть уменьшим звёзды и шрифт,
чтобы вся полоска гарантированно помещалась в одну строку */
@media (max-width:360px){
.pcard .pcard-infobar{ padding:8px 12px; gap:8px; font-size:12px }
.pcard .pcard-stars{ width:68px; height:12px }
.pcard .pcard-starPill{ padding:3px 6px }
}
/* Белая полоса прямо под слайдером, без зазоров */
.pcard .pcard-infobar{
display:flex; justify-content:space-between; align-items:center;
gap:12px;
padding:10px 14px;
margin:0; /* вплотную к слайдеру */
background:#fff;
border-top:1px solid var(--border);
/* тонкая нижняя, чтобы полоса выглядела законченно */
border-bottom:1px solid var(--border);
font-size:13px; font-weight:700; color:#0f172a;
white-space:nowrap; /* одна строка */
}
/* левая часть */
.pcard .pcard-infobar-left{ display:flex; align-items:center; gap:8px; min-width:0 }
.pcard .pcard-shipdot{
width:8px; height:8px; border-radius:50%;
background:#22c55e;
box-shadow:0 0 0 0 rgba(34,197,94,.55);
animation:pcard-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes pcard-dot-pulse{
0%{ box-shadow:0 0 0 0 rgba(34,197,94,.55) }
70%{ box-shadow:0 0 0 10px rgba(34,197,94,0) }
100%{ box-shadow:0 0 0 0 rgba(34,197,94,0) }
}
/* правая часть с рейтингом */
.pcard .pcard-infobar-right{ display:flex; align-items:center; gap:8px; flex-shrink:0 }
.pcard .pcard-rating-val{ font-weight:900; color:#111827 }
/* Жёлтая «пилюля» + звёзды */
.pcard .pcard-starPill{
display:inline-flex; align-items:center; padding:4px 10px;
border-radius:999px;
background:#fde047; /* жёлтая */
border:1px solid #facc15;
box-shadow:0 2px 6px rgba(0,0,0,.06);
line-height:1;
}
/* Звёзды: база (пустые) + верхний слой (заполнение) по ширине --p */
.pcard .pcard-stars{
--p: 94%; /* заполнение: рейтинг/5*100% */
position:relative;
display:inline-block;
font-size:14px;
letter-spacing:2px;
line-height:1;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.pcard .pcard-stars::before{
content:"★★★★★";
color:rgba(0,0,0,.25); /* «пустые» */
}
.pcard .pcard-stars::after{
content:"★★★★★";
position:absolute; inset:0 auto 0 0;
width:var(--p); /* 0%–100% */
color:#111827; /* чёрные звёзды на жёлтом */
overflow:hidden; white-space:nowrap;
}
/* На очень узких — всё чуть компактнее, чтобы точно в одну строку */
@media (max-width:360px){
.pcard .pcard-infobar{ padding:8px 12px; gap:8px; font-size:12px }
.pcard .pcard-starPill{ padding:3px 8px }
.pcard .pcard-stars{ font-size:12px; letter-spacing:1px }
}
/* SVG-ряд звёзд (двойной слой через background) */
.pcard .pcard-stars-svg{
--p:94%;
display:inline-block;
width:94px; /* 5 звёзд по ~18-19px + промежутки */
height:16px;
position:relative;
background:
/* слой 1: чёрные звёзды, обрезаем по ширине --p */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 95 16'%3E%3Cg fill='%23111827'%3E%3Cpath d='M9.5 1.2l1.9 3.9 4.3.6-3.1 3 .7 4.2-3.8-2-3.8 2 .7-4.2-3.1-3 4.3-.6 1.9-3.9z'/%3E%3C/g%3E%3C/svg%3E") left/95px 16px no-repeat,
/* слой 0: пустые серые звёзды на всю ширину */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 95 16'%3E%3Cg fill='rgba(0,0,0,.25)'%3E%3Cpath d='M9.5 1.2l1.9 3.9 4.3.6-3.1 3 .7 4.2-3.8-2-3.8 2 .7-4.2-3.1-3 4.3-.6 1.9-3.9z'/%3E%3C/g%3E%3C/svg%3E") left/95px 16px no-repeat;
}
/* Полоса под слайдером */
.pcard-infobar{
display:flex; justify-content:space-between; align-items:center;
padding:10px 12px;
background:#fff; /* белая полоса */
border-top:1px solid var(--border); /* деликатная разделяющая линия */
}
/* Левая часть + зелёная точка */
.pcard-infobar__left{ display:flex; align-items:center; gap:8px; font-size:14px; color:#0f172a; }
.pcard-infobar__left .dot{
width:8px; height:8px; border-radius:50%;
background:#22c55e; box-shadow:0 0 10px rgba(34,197,94,.55);
animation:pulse 1.6s infinite;
}
@keyframes pulse{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.2);opacity:.75} }
/* Правая часть */
.pcard-infobar__right{ display:flex; align-items:center; gap:10px; }
/* Цифровое значение рейтинга */
.pcard-rating-val{ font-weight:800; color:#111827; font-size:14px; }
/* Пилюля со звёздами — приглушённый жёлтый, без белого блика */
.pcard-stars5{
display:inline-flex; gap:6px; align-items:center;
padding:4px 10px; border-radius:999px;
background:#ffd800; /* мягкий жёлтый */
box-shadow:0 2px 6px rgba(0,0,0,.04); /* убрал белый inset */
line-height:0;
}
.pcard-stars5 .star{ width:14px; height:14px; display:block; fill:#111827; }
/* Чтобы всё точно в одну строку на узких */
@media (max-width:380px){
.pcard-infobar{ padding:8px 10px }
.pcard-rating-val{ font-size:13px }
.pcard-stars5{ padding:3px 8px }
}
/* Подсказка: над слайдером, всегда видна, одна строка */
.swipe-hint{
position:absolute;
left:50%;
bottom:92px; /* подними/опусти при необходимости */
transform:translateX(-50%);
display:inline-flex;
align-items:center;
gap:8px;
white-space:nowrap; /* одна строка */
color:#fff;
font-size: 12px;
text-shadow:0 1px 2px rgba(0,0,0,.35);
pointer-events:none;
z-index:30;
}
/* Стрелка справа от текста */
.swipe-hint .hint-ico{ display:inline-flex; }
.swipe-hint .hint-arrow{
width:24px; height:24px; /* крупнее */
stroke:#fff; fill:none;
animation:swipe-right 1.6s ease-in-out infinite;
}
/* Анимация «вправо» */
@keyframes swipe-right{
0% { transform:translateX(0); opacity:.85; }
60% { transform:translateX(12px); opacity:1; }
100% { transform:translateX(0); opacity:.85; }
}
/* Отключаем анимации для тех, кто просит */
@media (prefers-reduced-motion: reduce){
.swipe-hint .hint-arrow{ animation:none; }
}
/* ===== Columbia Proof block (unique classes) ===== */
.col-proof{
border:1px solid var(--border, #e5e7eb);
border-radius:16px;
background:#fff;
box-shadow:0 8px 20px rgba(0,0,0,.05);
overflow:hidden;
}
.col-proof__head{
position:relative;
padding:14px 14px 10px;
background:linear-gradient(180deg,#fff, #fafafa);
border-bottom:1px solid var(--border, #e5e7eb);
}
.col-proof__ribbon{
display:inline-flex; align-items:center; gap:6px;
font-size:11px; font-weight:900; letter-spacing:.04em; text-transform:uppercase;
color:#111827;
padding:6px 10px; border-radius:999px;
background:linear-gradient(180deg,#fde68a,#fbbf24);
border:1px solid #f59e0b;
box-shadow:0 2px 6px rgba(0,0,0,.06), inset 0 -1px 0 rgba(255,255,255,.25);
}
.col-proof__title{
margin:10px 0 0;
font-size:16px; font-weight:800; color:#0f172a;
}
.col-proof__body{ padding:12px; }
.col-proof__list{
list-style:none; margin:0; padding:0; display:grid; gap:10px;
}
.col-proof__item{
display:flex; align-items:flex-start; gap:10px;
padding:10px; border:1px solid var(--border, #e5e7eb); border-radius:12px;
background:#f8fafc;
color:#0f172a; font-size:14px; line-height:1.45;
box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.col-proof__ico{
flex:0 0 24px; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
color:#111827; opacity:.9;
}
.col-proof__badges{
display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;
}
.col-badge{
display:inline-flex; align-items:center; gap:6px;
font-size:12px; font-weight:700; color:#111827;
padding:6px 10px; border-radius:999px;
background:#fff; border:1px solid var(--border, #e5e7eb);
box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.col-badge--gold{
background:linear-gradient(180deg,#fff7cc,#ffe082);
border-color:#facc15;
}
/* чуть плотнее на очень узких */
@media (max-width:380px){
.col-proof__title{ font-size:15px }
.col-proof__item{ font-size:13.5px }
}
/* Fix: отключаем выравнивание по ширине внутри col-proof */
.col-proof,
.col-proof__item,
.col-proof__item * {
text-align: left !important;
text-justify: auto;
word-spacing: normal;
letter-spacing: normal;
word-break: normal;
overflow-wrap: anywhere; /* чтобы длинные слова не выезжали */
hyphens: auto;
}