/* VKLADOVKE skin — variant A (Навігація — marine). Base structure = OS24 skin (proven UX blocks). */
:root{
  --paper:#f7fafc;      /* cool white page          */
  --card:#ffffff;
  --sand:#e3eef5;       /* section / menu tint      */
  --sand-2:#d3e4ef;
  --oak:#1273a6;        /* wave-blue accent         */
  --oak-d:#0d5a83;
  --terra:#e8663c;      /* signal coral CTA         */
  --terra-d:#c94e28;
  --ink:#16283e;        /* deep navy text           */
  --muted:#5e7285;
  --line:#d8e4ec;
  --sale:#e8663c;
  --hero-g1:#eaf3f8; --hero-g2:#dcebf4; --hero-g3:#cfe3ef;
  --hero-text:#3d5268;
  --footer-link:#a8c6da;
  --tile-line:#d8e4ec; --tile-bg:#eaf2f7;
}

body{ background:var(--paper); color:var(--ink);
  font-family:"Manrope",system-ui,"Segoe UI",Roboto,Arial,sans-serif; }
h1,h2,h3,h4,h5,h6{ color:var(--ink); font-family:"Manrope",system-ui,Arial,sans-serif; letter-spacing:-.01em; }
a{ color:var(--oak-d); }

/* ---- top strip + header ------------------------------------------------- */
#top{ background:var(--sand); border-bottom:1px solid var(--line); }
#top .list-inline-item > a, #top .list-inline-item .dropdown > a{ color:var(--muted); }
header{ background:var(--paper); }
#logo a, #logo h1{ color:var(--ink); font-weight:800; letter-spacing:.02em; }
#search .form-control{ border:1px solid var(--line); border-radius:10px 0 0 10px; }
#search .btn{ background:var(--oak); border-color:var(--oak); color:#fff; border-radius:0 10px 10px 0; }
#search .btn:hover{ background:var(--oak-d); border-color:var(--oak-d); }
#cart > .btn, #cart .btn-inverse{ background:var(--oak) !important; border-color:var(--oak) !important; color:#fff !important; border-radius:10px; }

/* ---- main menu (override base blue gradient) ---------------------------- */
#menu{ background:var(--sand) !important; background-image:none !important;
  border:1px solid var(--line); border-radius:12px; }
#menu .navbar-nav > li > a, #menu .nav-link{ color:var(--ink) !important; text-shadow:none;
  font-weight:700; font-size:14px; padding:12px 16px; }
#menu .navbar-nav > li > a:hover, #menu .nav-link:hover{ color:var(--terra-d) !important; background:var(--sand-2); border-radius:8px; }
#menu .navbar-toggler i, #category{ color:var(--ink); }
#menu .dropdown-menu{ border:1px solid var(--line); border-top:3px solid var(--oak);
  border-radius:0 0 10px 10px; box-shadow:0 18px 40px -24px rgba(58,49,41,.4); }
#menu .dropdown-item{ color:var(--ink); }
#menu .dropdown-item:hover{ background:var(--sand); color:var(--terra-d); }

/* ---- HERO --------------------------------------------------------------- */
.os24-hero{ position:relative; overflow:hidden; margin:0 0 8px;
  background:linear-gradient(135deg,var(--hero-g1) 0%, var(--hero-g2) 55%, var(--hero-g3) 100%); }
.os24-hero::after{ content:""; position:absolute; right:-120px; top:-40px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(184,137,90,.20), rgba(184,137,90,0) 70%); pointer-events:none; }
.os24-hero-inner{ position:relative; z-index:2; max-width:1140px; margin:0 auto; padding:64px 24px 56px; }
.os24-eyebrow{ display:inline-block; color:var(--oak-d); font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; font-size:12px; margin-bottom:14px; }
.os24-hero h1{ font-size:clamp(30px,4.6vw,52px); line-height:1.05; margin:0 0 14px; max-width:16ch; color:var(--ink); }
.os24-hero p{ color:var(--hero-text); font-size:18px; max-width:52ch; margin:0 0 26px; }
.os24-hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }
.os24-btn{ display:inline-block; font-weight:700; padding:13px 26px; border-radius:30px; text-decoration:none; transition:.18s; }
.os24-btn-primary{ background:var(--terra); color:#fff; }
.os24-btn-primary:hover{ background:var(--terra-d); color:#fff; }
.os24-btn-ghost{ background:transparent; color:var(--oak-d); border:1.5px solid var(--oak); }
.os24-btn-ghost:hover{ background:var(--oak); color:#fff; }
.os24-stats{ display:flex; gap:40px; margin-top:38px; flex-wrap:wrap; }
.os24-stat .n{ font-size:24px; font-weight:800; color:var(--ink); }
.os24-stat .l{ font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--oak-d); }

/* ---- category tiles ----------------------------------------------------- */
.os24-cats{ max-width:1140px; margin:0 auto; padding:44px 24px 6px; }
.os24-cats h2{ font-size:24px; margin:0 0 22px; }
.os24-cats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.os24-tile{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px 20px;
  min-height:124px; display:flex; flex-direction:column; justify-content:space-between; gap:14px;
  text-decoration:none; color:var(--ink); box-shadow:0 8px 24px -20px rgba(58,49,41,.4); transition:.18s; }
.os24-tile:hover{ transform:translateY(-4px); border-color:var(--oak); box-shadow:0 18px 34px -22px rgba(184,137,90,.6); }
.os24-tile .ic{ font-size:30px; line-height:1; }
.os24-tile .nm{ font-weight:700; font-size:15px; line-height:1.25; }
@media (max-width:900px){ .os24-cats-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .os24-cats-grid{ grid-template-columns:1fr; } }

/* ---- product cards (featured module etc.) ------------------------------- */
.product-thumb{ display:flex; flex-direction:column; background:var(--card);
  border:1px solid var(--line); border-radius:16px; overflow:hidden; height:100%; transition:.18s; }
.product-thumb:hover{ transform:translateY(-4px); border-color:var(--oak);
  box-shadow:0 20px 38px -24px rgba(58,49,41,.45); }
.product-thumb .image{ position:relative; background:#fff; }
.product-thumb .image img{ width:100%; height:220px; object-fit:contain; padding:14px; }
.product-thumb .content{ display:flex; flex-direction:column; flex:1; }
.product-thumb .description{ padding:16px; }
.product-thumb .description h4{ font-size:15px; font-weight:700; line-height:1.3; }
.product-thumb .description h4 a{ color:var(--ink); text-decoration:none; }
.product-thumb .description > p{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; color:var(--muted); font-size:13px; }

/* price / special */
.price{ color:var(--ink); }
.price-new{ font-weight:800; font-size:1.15rem; color:var(--terra-d); }
.price-old{ color:var(--muted); text-decoration:line-through; font-weight:600; margin-left:6px; }
.price-tax{ color:var(--muted); font-size:12px; }

/* "Акція" corner badge — only on discounted cards, no twig change (uses :has) */
.product-thumb:has(.price-old) .image::after{ content:"Акція"; position:absolute; top:12px; left:12px;
  background:var(--sale); color:#fff; font-weight:800; font-size:12px; letter-spacing:.04em;
  padding:5px 12px; border-radius:20px; box-shadow:0 6px 14px -6px rgba(200,101,75,.8); }

/* ---- GOTCHA FIX 1: buy buttons overlapping price ------------------------ */
/* base: .description{margin-bottom:45px} + .button{position:absolute;bottom:0} */
.product-thumb .description{ margin-bottom:0 !important; flex:1 1 auto; }
.product-thumb .button{ position:static !important; display:flex; gap:8px; width:auto;
  padding:0 16px 16px; margin-top:auto; }
.product-thumb .button button{ flex:1; width:auto; border:1px solid var(--line) !important;
  background:var(--sand) !important; color:var(--oak-d) !important; line-height:40px; border-radius:10px; transition:.15s; }
.product-thumb .button button:first-child{ flex:2; background:var(--oak) !important; border-color:var(--oak) !important; color:#fff !important; font-weight:700; }
.product-thumb .button button:hover{ background:var(--oak-d) !important; border-color:var(--oak-d) !important; color:#fff !important; }

/* ---- GOTCHA FIX 2 + 3: mega-dropdown off-screen & column overflow ------- */
@media (min-width:960px){
  #menu .nav-item .dropdown-menu{ left:0 !important; right:auto !important; max-width:720px; }
  #menu .nav-item:nth-last-child(-n+4) .dropdown-menu{ left:auto !important; right:0 !important; }
  #menu .dropdown-inner{ flex-wrap:wrap; gap:2px 26px; }
  #menu .dropdown-inner ul{ width:200px; min-width:200px; }
}
#menu .dropdown-item{ white-space:normal; line-height:1.35; }

/* ---- footer polish (base is #303030) ------------------------------------ */
footer{ background:#2c2620; color:#e5dccd; border-top:3px solid var(--oak); }
footer a{ color:var(--footer-link); }
footer a:hover{ color:#fff; }
footer h5{ color:#fff; }

/* OS24 text wordmark (no logo image; header falls back to h1) */
#logo h1{margin:0;font-size:26px;font-weight:800;letter-spacing:-.5px;line-height:1.1}
#logo h1 a{color:var(--ink);text-decoration:none}
#logo h1 a:hover{color:var(--terra)}

/* Photo category tiles (real product photos from the OS24 catalog) */
.os24-tile-photo{position:relative;display:flex;align-items:flex-end;aspect-ratio:4/3;padding:0;overflow:hidden;border-radius:14px;background-size:cover;background-position:center;border:1px solid var(--tile-line)}
.os24-tile-photo .nm{position:relative;z-index:1;width:100%;margin:0;padding:12px 14px;color:#fff;font-weight:700;font-size:16px;background:linear-gradient(to top, rgba(35,28,20,.78), rgba(35,28,20,0));text-shadow:0 1px 2px rgba(0,0,0,.35)}
.os24-tile-photo::after{content:"";position:absolute;inset:0;background:rgba(58,49,41,0);transition:background .2s}
.os24-tile-photo:hover::after{background:rgba(58,49,41,.12)}
.os24-tile-photo:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(58,49,41,.14)}

/* Subcategory plates on category pages */
.os24-subcats{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin:10px 0 24px}
.os24-subcat{display:flex;flex-direction:column;border:1px solid #eadfce;border-radius:12px;overflow:hidden;background:#fff;text-decoration:none;transition:transform .15s, box-shadow .15s}
.os24-subcat:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(58,49,41,.12)}
.os24-subcat .img{display:block;aspect-ratio:4/3;background-size:cover;background-position:center;background-color:var(--tile-bg)}
.os24-subcat .nm{padding:10px 12px;font-weight:600;font-size:14px;line-height:1.3;color:var(--ink)}
.os24-subcat:hover .nm{color:#c8654b}

/* Hero advertisement slider (Higgsfield banners, text overlaid in HTML) */
.os24-hero-slider .os24-slide{min-height:440px;background-size:cover;background-position:center right;display:flex;align-items:center}
.os24-slide-content{max-width:560px;margin-left:6vw;padding:28px 32px;border-radius:16px;background:linear-gradient(100deg, rgba(250,246,240,.94) 55%, rgba(250,246,240,.72));box-shadow:0 8px 28px rgba(58,49,41,.10)}
.os24-slide-content h1,.os24-slide-content h2{font-size:34px;font-weight:800;color:#3a3129;line-height:1.15;margin:.35rem 0 .5rem}
.os24-slide-content p{color:#5d5348;font-size:16px;margin-bottom:1rem}
.os24-hero-slider .carousel-indicators button{background-color:#b8895a}
.os24-hero-slider .carousel-control-prev,.os24-hero-slider .carousel-control-next{width:6%}
.os24-statbar{background:#f5efe4;border-bottom:1px solid #eadfce;padding:18px 6vw}
.os24-statbar .os24-stats{display:flex;gap:48px;max-width:1200px;margin:0 auto}
@media (max-width: 768px){.os24-hero-slider .os24-slide{min-height:360px}.os24-slide-content{margin:0 4vw;padding:20px}.os24-slide-content h1,.os24-slide-content h2{font-size:24px}.os24-statbar .os24-stats{gap:20px;flex-wrap:wrap}}

/* Partner brand logo strip (logos from mpl-group.com.ua — same client) */
.os24-brands{max-width:1200px;margin:8px auto 28px;padding:0 6vw}
.os24-brands h2{font-size:24px;font-weight:800;color:#3a3129;margin-bottom:16px}
.os24-brands-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.os24-brand{display:flex;align-items:center;justify-content:center;height:72px;padding:12px;background:#fff;border:1px solid #eadfce;border-radius:12px;filter:grayscale(1);opacity:.75;transition:filter .2s,opacity .2s,transform .15s}
.os24-brand:hover{filter:grayscale(0);opacity:1;transform:translateY(-2px)}
.os24-brand img{max-width:100%;max-height:46px;object-fit:contain}
/* ==========================================================================
   OS24 — Faceted filter UI  ·  companion stylesheet
   Deploy: append to catalog/view/stylesheet/os24-skin.css  (recommended)
           — OR link separately AFTER the skin so vars/fallbacks resolve.
   Depends on skin tokens (--paper/--card/--oak/--terra/--ink/--line …) but
   every var has a hard-coded fallback so it works standalone too.
   Font: Manrope (already loaded by the skin).
   ========================================================================== */

.os24-filter{
  background:var(--card,#ffffff);
  border:1px solid var(--line,#e6dccd);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 8px 24px -20px rgba(58,49,41,.4);
  font-family:"Manrope",system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  margin-bottom:20px;
}

/* ---- module header ------------------------------------------------------ */
.os24-filter-head{
  display:flex; align-items:center; gap:10px;
  background:var(--sand,#f1e8dc);
  border-bottom:1px solid var(--line,#e6dccd);
  color:var(--ink,#3a3129);
  font-weight:800; font-size:15px; letter-spacing:-.01em;
  padding:13px 16px;
  cursor:default;
}
.os24-filter-head > i:first-child{ color:var(--oak-d,#9a6b3e); font-size:14px; }
.os24-filter-title{ flex:1; }
.os24-filter-total{
  background:var(--terra,#c8654b); color:#fff;
  font-weight:700; font-size:12px; border-radius:20px; padding:2px 9px;
}
.os24-filter-head-chevron{
  display:none; color:var(--muted,#8a7e70); font-size:13px;
  transition:transform .2s ease;
}

/* ---- filter body -------------------------------------------------------- */
.os24-filter-body{ padding:4px 0; }

/* ---- one group ---------------------------------------------------------- */
.os24-fg{ border-bottom:1px solid var(--line,#e6dccd); }
.os24-fg:last-child{ border-bottom:0; }

.os24-fg-head{
  display:flex; align-items:center; gap:8px; width:100%;
  background:transparent; border:0; text-align:left;
  color:var(--ink,#3a3129); font-weight:700; font-size:14px;
  padding:12px 16px; cursor:pointer; transition:background .15s ease;
}
.os24-fg-head:hover{ background:var(--paper,#faf6f0); }
.os24-fg-head:focus-visible{ outline:2px solid var(--oak,#b8895a); outline-offset:-2px; }
.os24-fg-name{ flex:1; }
.os24-fg-badge{
  background:var(--terra,#c8654b); color:#fff;
  font-weight:700; font-size:11px; border-radius:20px; padding:1px 8px; min-width:20px;
}
.os24-fg-chevron{
  color:var(--muted,#8a7e70); font-size:12px; transition:transform .2s ease;
}
/* chevron points up when the group is open (aria-expanded on the trigger) */
.os24-fg-head[aria-expanded="true"] .os24-fg-chevron{ transform:rotate(180deg); }

/* has-selection tint on the header */
.os24-fg.has-selection .os24-fg-head{ color:var(--terra-d,#a94e38); }

.os24-fg-inner{ padding:2px 16px 14px; }

/* ---- inline live-search (groups > 12) ----------------------------------- */
.os24-fg-search{
  position:relative; margin:2px 0 10px;
}
.os24-fg-search > i{
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  color:var(--muted,#8a7e70); font-size:12px; pointer-events:none;
}
.os24-fg-search-input{
  width:100%; border:1px solid var(--line,#e6dccd); border-radius:9px;
  padding:8px 10px 8px 30px; font-size:13px; color:var(--ink,#3a3129);
  background:var(--paper,#faf6f0); transition:border-color .15s, background .15s;
}
.os24-fg-search-input:focus{
  outline:none; border-color:var(--oak,#b8895a); background:#fff;
}

/* ---- checkbox list ------------------------------------------------------ */
.os24-fg-list{ display:flex; flex-direction:column; }

/* JS-clipped state: only first 6 rows visible until "Показати всі".
   Without JS the .os24-enhanced hook is absent → list is fully visible. */
.os24-enhanced .os24-fg-list{
  max-height:210px;               /* ~6 rows                              */
  overflow:hidden;
}
.os24-enhanced .os24-fg-list.is-expanded{
  max-height:300px;               /* taller + scrollable                 */
  overflow-y:auto;
}
/* short groups are never clipped */
.os24-enhanced .os24-fg-list.is-short{ max-height:none; overflow:visible; }

/* tidy scrollbar */
.os24-fg-list.is-expanded::-webkit-scrollbar{ width:8px; }
.os24-fg-list.is-expanded::-webkit-scrollbar-thumb{
  background:var(--sand-2,#e7dccb); border-radius:8px;
}

.os24-check{
  display:flex; align-items:center; gap:10px;
  padding:6px 4px; margin:0; border-radius:8px; cursor:pointer;
  font-size:14px; color:var(--ink,#3a3129); line-height:1.3;
  transition:background .12s ease;
}
.os24-check:hover{ background:var(--paper,#faf6f0); }
.os24-check-input{
  position:absolute; opacity:0; width:0; height:0; pointer-events:none;
}
.os24-check-box{
  flex:0 0 auto; width:18px; height:18px; border-radius:5px;
  border:1.5px solid var(--sand-2,#e7dccb); background:#fff;
  position:relative; transition:all .15s ease;
}
.os24-check-box::after{
  content:""; position:absolute; left:5px; top:1px;
  width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0); transition:transform .15s ease;
}
.os24-check-input:checked + .os24-check-box{
  background:var(--terra,#c8654b); border-color:var(--terra,#c8654b);
}
.os24-check-input:checked + .os24-check-box::after{ transform:rotate(45deg) scale(1); }
.os24-check-input:focus-visible + .os24-check-box{
  outline:2px solid var(--oak,#b8895a); outline-offset:2px;
}
.os24-check-label{ flex:1; }
.os24-check-input:checked ~ .os24-check-label{
  color:var(--terra-d,#a94e38); font-weight:600;
}
/* rows hidden by live-search */
.os24-check.is-filtered-out{ display:none; }

.os24-fg-empty{ color:var(--muted,#8a7e70); font-size:13px; margin:6px 4px 2px; }

/* ---- show-more toggle --------------------------------------------------- */
.os24-showmore{
  background:transparent; border:0; padding:8px 4px 2px;
  color:var(--oak-d,#9a6b3e); font-weight:700; font-size:13px; cursor:pointer;
}
.os24-showmore:hover{ color:var(--terra-d,#a94e38); text-decoration:underline; }
.os24-showmore .os24-showmore-less{ display:none; }
.os24-showmore[aria-expanded="true"] .os24-showmore-more{ display:none; }
.os24-showmore[aria-expanded="true"] .os24-showmore-less{ display:inline; }

/* ---- sticky footer: reset + apply --------------------------------------- */
.os24-filter-foot{
  display:flex; align-items:center; gap:12px;
  background:var(--card,#ffffff);
  border-top:1px solid var(--line,#e6dccd);
  padding:12px 16px;
  position:sticky; bottom:0; z-index:3;
}
.os24-filter-reset{
  color:var(--muted,#8a7e70); font-size:13px; font-weight:600;
  text-decoration:none; white-space:nowrap;
}
.os24-filter-reset:hover{ color:var(--terra-d,#a94e38); text-decoration:underline; }
.os24-filter-reset.is-hidden{ visibility:hidden; }

.os24-filter-apply{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--terra,#c8654b) !important; border-color:var(--terra,#c8654b) !important;
  color:#fff !important; font-weight:700; font-size:14px;
  border-radius:10px; padding:11px 16px; transition:background .15s, transform .1s;
}
.os24-filter-apply:hover{
  background:var(--terra-d,#a94e38) !important; border-color:var(--terra-d,#a94e38) !important;
}
.os24-filter-apply:active{ transform:translateY(1px); }
.os24-filter-apply.is-dirty{ box-shadow:0 6px 16px -6px rgba(200,101,75,.75); }
.os24-filter-apply-count{
  background:rgba(255,255,255,.28); color:#fff;
  font-weight:800; font-size:12px; border-radius:20px; padding:1px 8px;
}

/* ==========================================================================
   MOBILE  — whole filter collapses under the header on < 768px
   Fail-open: without JS the body stays visible (no .is-collapsed is set).
   ========================================================================== */
@media (max-width:767.98px){
  .os24-filter-head{ cursor:pointer; }
  .os24-filter-head-chevron{ display:inline-block; }
  .os24-filter-head[aria-expanded="false"] .os24-filter-head-chevron{ transform:rotate(-90deg); }
  .os24-filter.is-collapsed .os24-filter-body,
  .os24-filter.is-collapsed .os24-filter-foot{ display:none; }
}
/* Desktop always shows the body regardless of any leftover collapsed state */
@media (min-width:768px){
  .os24-filter .os24-filter-body,
  .os24-filter .os24-filter-foot{ display:block; }
  .os24-filter-foot{ display:flex; }
}

/* ===== Video reviews strip (top-selling product reviews, 2026-07-17) ===== */
.os24-reviews { max-width: 1280px; margin: 48px auto 8px; padding: 0 20px; }
.os24-reviews-head h2 { font-family: var(--os24-font-head, inherit); font-size: 28px; margin: 0 0 4px; color: var(--os24-ink, #2f2a26); }
.os24-reviews-head p { margin: 0 0 18px; color: #8a7f74; font-size: 15px; }
.os24-reviews-strip { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 14px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.os24-reviews-strip::-webkit-scrollbar { height: 8px; }
.os24-reviews-strip::-webkit-scrollbar-thumb { background: #d9cfc3; border-radius: 4px; }
.os24-review-card { position: relative; flex: 0 0 232px; margin: 0; scroll-snap-align: start; border-radius: 14px; overflow: hidden; background: #efe9e1; box-shadow: 0 2px 10px rgba(60,50,40,.08); }
.os24-review-card video { display: block; width: 100%; aspect-ratio: 9/16; object-fit: cover; cursor: pointer; }
.os24-review-card::after { content: '▶'; position: absolute; top: 44%; left: 50%; transform: translate(-50%,-50%); width: 54px; height: 54px; line-height: 54px; text-align: center; border-radius: 50%; background: rgba(47,42,38,.62); color: #fff; font-size: 20px; padding-left: 4px; pointer-events: none; transition: opacity .2s; }
.os24-review-card.playing::after { opacity: 0; }
.os24-review-badge { position: absolute; top: 10px; left: 10px; background: var(--os24-accent, #b6552e); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .4px; padding: 4px 10px; border-radius: 999px; }
.os24-review-card figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 12px; background: linear-gradient(to top, rgba(30,26,22,.85), rgba(30,26,22,0)); display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.os24-review-card .rc-name { color: #fff; font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.os24-review-card .rc-link { color: #ffd9a8; font-size: 13px; font-weight: 600; text-decoration: none; pointer-events: auto; }
.os24-review-card .rc-link:hover { text-decoration: underline; }
@media (max-width: 640px) { .os24-review-card { flex-basis: 186px; } .os24-reviews-head h2 { font-size: 22px; } }

/* ===== Kill Bootstrap default blue (2026-07-17) — map to warm palette ===== */
.btn-primary{--bs-btn-bg:var(--terra);--bs-btn-border-color:var(--terra);--bs-btn-hover-bg:var(--terra-d);--bs-btn-hover-border-color:var(--terra-d);--bs-btn-active-bg:var(--terra-d);--bs-btn-active-border-color:var(--terra-d);--bs-btn-disabled-bg:var(--terra);--bs-btn-disabled-border-color:var(--terra);--bs-btn-focus-shadow-rgb:200,101,75;}
.btn-outline-primary{--bs-btn-color:var(--terra-d);--bs-btn-border-color:var(--terra);--bs-btn-hover-bg:var(--terra);--bs-btn-hover-border-color:var(--terra);--bs-btn-active-bg:var(--terra-d);--bs-btn-active-border-color:var(--terra-d);--bs-btn-focus-shadow-rgb:200,101,75;}
.btn-info{--bs-btn-bg:var(--oak);--bs-btn-border-color:var(--oak);--bs-btn-hover-bg:var(--oak-d);--bs-btn-hover-border-color:var(--oak-d);--bs-btn-active-bg:var(--oak-d);--bs-btn-active-border-color:var(--oak-d);--bs-btn-color:#fff;--bs-btn-hover-color:#fff;}
/* Sidebar category list: soft active state instead of solid blue */
.list-group{--bs-list-group-active-bg:var(--sand-2);--bs-list-group-active-border-color:var(--line);--bs-list-group-active-color:var(--ink);}
.list-group-item.active{box-shadow:inset 3px 0 0 var(--terra);font-weight:600;}
.list-group-item.active a{color:var(--ink);}
/* Pagination, badges, misc primary accents */
.pagination{--bs-pagination-active-bg:var(--terra);--bs-pagination-active-border-color:var(--terra);--bs-pagination-color:var(--terra-d);--bs-pagination-hover-color:var(--terra-d);--bs-pagination-focus-color:var(--terra-d);--bs-pagination-focus-box-shadow:0 0 0 .2rem rgba(200,101,75,.2);}
.badge.bg-primary,.badge.text-bg-primary{background-color:var(--terra)!important;}
.text-primary{color:var(--terra-d)!important;}
.form-check-input:checked{background-color:var(--terra);border-color:var(--terra);}
.form-control:focus,.form-select:focus{border-color:var(--oak);box-shadow:0 0 0 .2rem rgba(184,137,90,.18);}
.nav-tabs .nav-link.active{color:var(--ink);}
.nav-tabs .nav-link{color:var(--terra-d);}
a:not([class]){color:var(--terra-d);}
a:not([class]):hover{color:var(--terra);}

/* ===== Golden bestseller cards (.os24-hit, 2026-07-17) ===== */
.product-thumb.os24-hit{
  border:2px solid transparent;
  background:linear-gradient(var(--card),var(--card)) padding-box,
             linear-gradient(135deg,#c9a227,#f3dd8e 45%,#b8860b) border-box;
  box-shadow:0 4px 18px rgba(184,134,11,.16);
}
.product-thumb.os24-hit:hover{ border-color:transparent; box-shadow:0 8px 24px rgba(184,134,11,.28); }
.product-thumb.os24-hit .image::before{
  content:"★ Хіт продажів";
  position:absolute; top:12px; right:12px; z-index:2;
  background:linear-gradient(120deg,#b8860b,#dfb63f 45%,#f3dd8e 55%,#b8860b);
  background-size:220% 100%;
  color:#fff; font-size:12px; font-weight:700; letter-spacing:.3px;
  padding:4px 11px; border-radius:999px;
  box-shadow:0 2px 8px rgba(140,100,10,.35);
  animation:os24-hit-shimmer 3.2s linear infinite;
}
@keyframes os24-hit-shimmer{ 0%{background-position:0 0} 100%{background-position:220% 0} }
/* keep Акція on the left, gold on the right — both fit */
/* inline hit badge on product detail page */
.os24-hit-inline{
  display:inline-block; margin-bottom:10px;
  background:linear-gradient(120deg,#b8860b,#dfb63f 45%,#f3dd8e 55%,#b8860b);
  background-size:220% 100%;
  color:#fff; font-size:13px; font-weight:700; letter-spacing:.3px;
  padding:5px 14px; border-radius:999px;
  box-shadow:0 2px 8px rgba(140,100,10,.3);
  animation:os24-hit-shimmer 3.2s linear infinite;
}

/* ---- VK marine harmonization (override OS24 warm literals in later blocks) */
.os24-slide-content{background:linear-gradient(100deg, rgba(247,250,252,.95) 55%, rgba(247,250,252,.74));box-shadow:0 8px 28px rgba(22,40,62,.12)}
.os24-slide-content h1,.os24-slide-content h2{color:var(--ink)}
.os24-slide-content p{color:var(--hero-text)}
.os24-hero-slider .carousel-indicators button{background-color:var(--oak)}
.os24-statbar{background:var(--sand);border-bottom:1px solid var(--line)}
.os24-hero-slider .os24-slide{background-color:var(--sand)}

/* ---- text brand chips (no logo assets for the preview) */
.os24-brands{max-width:1200px;margin:8px auto 26px;padding:0 24px}
.os24-brands h2{font-size:22px;margin:18px 0 14px;color:var(--ink)}
.os24-brands-grid{display:flex;flex-wrap:wrap;gap:10px}
.os24-brand-txt{display:inline-block;padding:9px 18px;border:1px solid var(--line);border-radius:24px;background:var(--card);color:var(--oak-d);font-weight:700;font-size:14px;letter-spacing:.02em}
.os24-brand-txt:hover{border-color:var(--oak)}

/* ---- product page: stacked sections instead of tabs (2026-08-03) -------- */
.vk-product-sections{margin-top:10px}
.vk-section{margin:0 0 30px}
.vk-section > h2{font-size:21px;font-weight:800;color:var(--ink);margin:0 0 14px;
  padding-bottom:8px;border-bottom:2px solid var(--sand-2)}
/* zebra two-column specs table (motor.com.ua reference) */
.vk-specs-table{width:100%;border:1px solid var(--line);border-radius:12px;border-collapse:separate;border-spacing:0;overflow:hidden}
.vk-specs-table td{padding:10px 16px;border:0;font-size:14.5px;vertical-align:top}
.vk-specs-table tr:nth-child(odd) td{background:var(--sand)}
.vk-specs-table tr:nth-child(even) td{background:var(--card)}
.vk-specs-table td:first-child{color:var(--muted);width:42%;font-weight:600}
.vk-specs-table td:last-child{color:var(--ink)}
@media (max-width:600px){.vk-specs-table td:first-child{width:50%}}
.vk-desc-body{max-width:900px}
.vk-desc-body h2{font-size:19px;margin:18px 0 10px}
.vk-desc-body p{line-height:1.65}

/* ---- product page: описи зліва / характеристики справа ------------------ */
.vk-cols{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:36px;align-items:start}
.vk-col-specs{position:sticky;top:16px}
.vk-cols .vk-desc-body{max-width:none}
@media (max-width:991px){.vk-cols{grid-template-columns:1fr}.vk-col-specs{position:static}}

/* ---- full-bleed helper: home sections now live INSIDE .container as html modules */
body{overflow-x:hidden}
.vk-bleed{position:relative;left:50%;margin-left:-50vw;width:100vw}
#common-home #content > .os24-cats, #common-home #content > .os24-brands{padding-left:0;padding-right:0}

/* ---- brandfacet: manufacturer facet count chip in the filter sidebar ---- */
.os24-check-count{
  margin-left:6px;
  font-size:11px;
  color:var(--muted,#8a7e70);
  font-variant-numeric:tabular-nums;
}
.os24-check-input:checked ~ .os24-check-label .os24-check-count{ color:inherit; opacity:.75; }