/* ===========================================================================
   40-home — VKLADOVKE homepage bands (promo redesign, band sequence per
   DESIGN_SPEC.md §6). Owned by the promo-home agent.
   Loads AFTER vkladovke-skin.css, so every rule that fights the legacy skin
   must reset what the old design set (borders, paddings, vk-bleed math).
   =========================================================================== */

/* The hero and quick-link carousels bleed past the container on purpose;
   clip the page at the viewport so no horizontal scrollbar appears. */
body:has(#common-home){overflow-x:clip}

/* ---------------------------------------------------------------------------
   Band 3 — hero swiper (oc_module opencart.html.21, content_top)
   Owns the full container width since 2026-08-11: the catalog sidebar no
   longer sits open beside it (it became a toggled overlay), so the old 336px
   left offset is gone and the band starts at the container's left edge.
   Slide: dark navy card r12, headline white, indigo CTA, product photo in a
   white rounded panel; next slide peeks past the right viewport edge.
--------------------------------------------------------------------------- */
.vk-hero{
  position:relative;
  margin-top:24px;
  margin-right:calc((100% - 100vw)/2); /* bleed to the right viewport edge */
}
.vk-hero .swiper{overflow:hidden}
.vk-hero .swiper-slide{
  width:min(100%,728px);
  height:330px;
  border-radius:var(--pr-radius-card);
  overflow:hidden;
  background:linear-gradient(120deg,#101730 0%,#1b2749 100%);
  display:flex;align-items:stretch;
}
.vk-hero-text{
  flex:1 1 auto;min-width:0;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:12px;padding:32px 8px 32px 32px;color:#fff;
}
.vk-hero-eyebrow{font-size:12px;line-height:18px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:#8fa3d9}
.vk-hero-title,.vk-hero-text h1,.vk-hero-text h2{
  margin:0;color:#fff;font-size:28px;line-height:36px;font-weight:700}
.vk-hero-text p{margin:0;font-size:14px;line-height:21px;font-weight:400;color:#c6cde0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vk-hero-text .vk-btn{margin-top:8px}
a.vk-btn-secondary,a.vk-btn-secondary:visited{color:#fff}
.vk-hero-img{
  flex:0 0 auto;align-self:center;
  width:280px;height:266px;margin-right:24px;
  background:#fff;border-radius:var(--pr-radius-card);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.vk-hero-img img{max-width:100%;max-height:100%;object-fit:contain}
/* round 40px prev/next */
.vk-hero-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.45);background:rgba(16,23,48,.35);
  color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background var(--pr-main-transition);
  font-size:14px;line-height:1;padding:0;
}
.vk-hero-nav:hover{background:rgba(255,255,255,.2)}
.vk-hero-prev{left:16px}
.vk-hero-next{right:24px}
/* dash pagination, bottom-left of the active slide */
.vk-hero-pag{position:absolute;left:32px;bottom:20px;z-index:3;display:flex;gap:6px}
.vk-hero-pag .swiper-pagination-bullet{
  width:24px;height:4px;border-radius:2px;background:rgba(255,255,255,.35);opacity:1;margin:0}
.vk-hero-pag .swiper-pagination-bullet-active{background:#fff}
@media (max-width:767px){
  .vk-hero .swiper-slide{width:78%;height:330px;position:relative;display:block}
  .vk-hero-text{padding:20px 16px 116px;justify-content:flex-start;gap:10px}
  .vk-hero-title,.vk-hero-text h1,.vk-hero-text h2{font-size:20px;line-height:26px}
  .vk-hero-text p{-webkit-line-clamp:2}
  /* keep the CTA clear of the photo panel in the bottom-right corner */
  .vk-hero-text .vk-btn{max-width:calc(100% - 128px);margin-top:4px;
    padding:0 14px;font-size:13px}
  .vk-hero-img{position:absolute;right:12px;bottom:12px;width:116px;height:92px;
    margin:0;padding:8px;border-radius:8px}
  .vk-hero-prev{left:8px}
  .vk-hero-next{right:8px}
  .vk-hero-pag{left:16px;bottom:14px}
}

/* ---------------------------------------------------------------------------
   Band 4 — quick-link pastel tiles (Twig band, prices live from
   event/vk_design.home). Horizontal Swiper, bleeds off the edges.
   Reset the legacy grid the old skin gave .vk-quicklinks / .vk-ql.
--------------------------------------------------------------------------- */
.vk-quicklinks{
  display:block;margin:16px 0 0;
  margin-right:calc((100% - 100vw)/2);
}
/* no 336px sidebar offset since 2026-08-11 — aligns with the hero above */
@media (max-width:1199px){
  .vk-quicklinks{margin-left:calc((100% - 100vw)/2)}
  .vk-quicklinks .swiper{padding-left:12px}
}
/* NB: swiper-bundle.min.css loads after this file (end of body) and sets
   .swiper-slide{width:100%}; two class selectors are needed to win. */
.vk-ql-swiper .swiper-slide.vk-ql-slide{width:200px}
.vk-ql{
  display:flex;flex-direction:column;align-items:center;
  width:200px;height:200px;border-radius:var(--pr-radius-card);
  padding:20px 12px 0;border:0;overflow:hidden;background:#a8c0f5;
  transition:transform var(--pr-main-transition),box-shadow var(--pr-main-transition);
}
.vk-ql:hover{transform:translateY(-3px);box-shadow:0 12px 24px -12px rgba(18,23,21,.35)}
/* pastel cycle — the reference's six flats */
.vk-ql-c0{background:#f6c99f}.vk-ql-c1{background:#a8c0f5}.vk-ql-c2{background:#e8a0a1}
.vk-ql-c3{background:#b5c36f}.vk-ql-c4{background:#d98cd7}.vk-ql-c5{background:#6cbc82}
.vk-ql-name{
  padding:0;font-size:17px;line-height:22px;font-weight:700;color:#fff;text-align:center;
  text-shadow:0 1px 2px rgba(0,0,0,.12);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
a.vk-ql,a.vk-ql:visited,a.vk-ql:hover{color:#fff}
.vk-ql-price{padding:2px 0 0;font-size:13px;line-height:18px;font-weight:600;color:rgba(255,255,255,.9)}
.vk-ql img{
  width:auto;max-width:86%;height:104px;object-fit:contain;object-position:bottom;
  margin-top:auto;padding:0;background:transparent;
  mix-blend-mode:multiply; /* white catalog shots read as cut-outs on the pastel */
}
@media (max-width:767px){
  .vk-ql-swiper .swiper-slide.vk-ql-slide{width:190px}
  .vk-ql{width:190px;height:190px}
}

/* ---------------------------------------------------------------------------
   Band 5 — advantages (oc_module opencart.html.22, CSS-only restyle).
   Six white cards; icon in a 48px #f3f3f3 rounded square; 14/700 + 12 grey.
   Neutralise the legacy full-bleed strip styling.
--------------------------------------------------------------------------- */
.vk-adv,.vk-adv.vk-bleed{
  position:static;left:auto;margin:24px 0 0;width:auto;
  background:transparent;border:0;padding:0;
}
.vk-adv-grid{max-width:none;margin:0;display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.vk-adv-item{
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  background:var(--pr-white);border-radius:var(--pr-radius-card);padding:16px;
}
.vk-adv-item i{
  font-size:20px;color:var(--pr-dark-text-color);
  background:var(--pr-bg);border-radius:var(--pr-radius-ctl);
  width:48px;height:48px;display:flex;align-items:center;justify-content:center;padding:0;
}
.vk-adv-item b{font-size:14px;line-height:17.5px;font-weight:700;color:var(--pr-dark-text-color)}
.vk-adv-item span{font-size:12px;line-height:18px;font-weight:400;color:var(--pr-grey-color)}
@media (max-width:1199px){.vk-adv-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.vk-adv-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------------------------------------------------------------------------
   Band 6 — category tiles (oc_module opencart.html.23, CSS-only restyle).
   White tiles r12: photo above a centred 14/600 label. The markup keeps the
   photo as a background-image, so paint it inside the content box.
--------------------------------------------------------------------------- */
#common-home .os24-cats{max-width:none;margin:24px 0 0;padding:0}
#common-home .os24-cats h2{font-size:22px;line-height:33px;font-weight:600;margin:0 0 16px;color:var(--pr-dark-text-color)}
#common-home .os24-cats-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:16px}
#common-home .os24-tile-photo{
  aspect-ratio:auto;min-height:190px;border:0;border-radius:var(--pr-radius-card);
  background-color:var(--pr-white);
  background-size:auto 96px;background-repeat:no-repeat;background-position:center 20px;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  padding:128px 10px 14px;overflow:hidden;
  transition:transform var(--pr-main-transition),box-shadow var(--pr-main-transition);
}
#common-home .os24-tile-photo:hover{transform:translateY(-3px);box-shadow:0 12px 24px -14px rgba(18,23,21,.3)}
#common-home .os24-tile-photo::after{content:none}
#common-home .os24-tile-photo .nm{
  position:static;width:auto;margin:0;padding:0;background:none;text-shadow:none;
  color:var(--pr-dark-text-color);font-size:13px;line-height:17px;font-weight:600;text-align:center;
}
@media (max-width:1199px){
  #common-home .os24-cats-grid{grid-template-columns:repeat(5,1fr)}
}
@media (max-width:767px){
  /* horizontal strip on mobile, like the reference */
  #common-home .os24-cats-grid{
    display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;
    margin-right:calc((100% - 100vw)/2);padding-right:12px;
    -webkit-overflow-scrolling:touch;
  }
  #common-home .os24-tile-photo{flex:0 0 150px;scroll-snap-align:start}
}

/* ---------------------------------------------------------------------------
   Band 7 — banner-plus (oc_module opencart.html.25). Four gradient cards,
   headline 20/700 white, ghost «Дивитись» button, product photo bottom-right.
--------------------------------------------------------------------------- */
.vk-banners4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:24px 0 0}
.vk-b4{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;
  min-height:232px;border-radius:var(--pr-radius-card);padding:24px;overflow:hidden;
  color:#fff;border:0;
  transition:transform var(--pr-main-transition),box-shadow var(--pr-main-transition);
}
a.vk-b4,a.vk-b4:visited,a.vk-b4:hover{color:#fff}
.vk-b4:hover{transform:translateY(-3px);box-shadow:0 14px 28px -16px rgba(18,23,21,.45)}
.vk-b4-sale   {background:linear-gradient(135deg,#4b0da8,#7c3aed)}
.vk-b4-brands {background:linear-gradient(135deg,#0aa89d,#16cebc)}
.vk-b4-help   {background:linear-gradient(135deg,#372b3f,#544360)}
.vk-b4-account{background:linear-gradient(135deg,#4f6cf0,#7690fa)}
.vk-b4 b{font-size:20px;line-height:26px;font-weight:700;max-width:80%}
.vk-b4-sub{font-size:12px;line-height:18px;font-weight:400;color:rgba(255,255,255,.8);
  margin-top:6px;max-width:75%}
.vk-b4-btn{
  margin-top:auto;position:relative;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(255,255,255,.55);border-radius:var(--pr-radius-ctl);
  padding:10px 16px;font-size:13px;font-weight:600;color:#fff;
  background:transparent;transition:background var(--pr-main-transition);
}
.vk-b4:hover .vk-b4-btn{background:rgba(255,255,255,.15)}
.vk-b4-img{
  position:absolute;right:-8px;bottom:-8px;width:150px;height:130px;z-index:1;pointer-events:none;
}
.vk-b4-img img{width:100%;height:100%;object-fit:contain;object-position:bottom right;
  mix-blend-mode:multiply}
@media (max-width:1199px){.vk-banners4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.vk-banners4{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------------
   Brands strip (oc_module opencart.html.24) — kept from the earlier build
   (no reference equivalent): one white card, grey text chips.
--------------------------------------------------------------------------- */
#common-home .os24-brands,#common-home #content > .os24-brands{
  max-width:none;margin:24px 0 0;padding:16px;
  background:var(--pr-white);border-radius:var(--pr-radius-card);
}
#common-home .os24-brands h2{font-size:22px;line-height:33px;font-weight:600;margin:0 0 12px;color:var(--pr-dark-text-color)}
#common-home .os24-brands-grid{display:flex;flex-wrap:wrap;gap:8px}
#common-home .os24-brand-txt{
  background:var(--pr-bg);border-radius:var(--pr-radius-ctl);
  padding:8px 14px;font-size:12px;line-height:18px;font-weight:600;color:var(--pr-dark-grey-color);
}

/* ---------------------------------------------------------------------------
   Band 8 — product module (opencart.featured.2). The card itself belongs to
   the card agent (product/thumb.twig); this styles only the band around it:
   heading 22/600 and a 5-up grid at >=1200px with 16px gutters.
--------------------------------------------------------------------------- */
#common-home #content > h3{
  font-size:22px;line-height:33px;font-weight:600;margin:24px 0 16px;
  color:var(--pr-dark-text-color);
}
#common-home #content > .row[class*="row-cols"]{
  --bs-gutter-x:16px;--bs-gutter-y:0;
}
#common-home #content > .row[class*="row-cols"] > .col{margin-bottom:16px!important}
@media (min-width:1200px){
  #common-home #content > .row.row-cols-xl-4 > *{width:20%}
}

/* ---------------------------------------------------------------------------
   Band 9 — news/blog (oc_module opencart.html.26, CSS-only restyle).
   White cards r12: image top, 14/600 title, 12px grey meta.
--------------------------------------------------------------------------- */
.vk-blog{margin:24px 0 0}
.vk-blog .vk-section-title{margin-bottom:16px}
.vk-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.vk-post{
  display:flex;flex-direction:column;background:var(--pr-white);border:0;
  border-radius:var(--pr-radius-card);overflow:hidden;
  transition:transform var(--pr-main-transition),box-shadow var(--pr-main-transition);
}
.vk-post:hover{transform:translateY(-3px);box-shadow:0 12px 24px -14px rgba(18,23,21,.3)}
.vk-post-img{display:block;aspect-ratio:16/9;background-size:cover;background-position:center;border-radius:0}
.vk-post-body{display:flex;flex-direction:column;gap:8px;padding:16px}
.vk-post b{font-size:14px;line-height:17.5px;font-weight:600;color:var(--pr-dark-text-color);order:1}
.vk-post-lead{font-size:12px;line-height:18px;color:var(--pr-grey-color);order:2}
.vk-post-meta{font-size:12px;line-height:18px;color:var(--pr-grey-color);order:3;margin-top:4px}
@media (max-width:800px){.vk-blog-grid{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------------
   Band 10 — about (oc_module opencart.html.27, CSS-only restyle).
   One white card p24; heading with a hairline rule under it.
--------------------------------------------------------------------------- */
.vk-about{
  margin:24px 0 0;background:var(--pr-white);border:0;
  border-radius:var(--pr-radius-card);padding:24px;
}
.vk-about .vk-section-title{
  border-bottom:1px solid var(--pr-border);padding-bottom:12px;margin-bottom:16px;
}
.vk-about p{font-size:14px;line-height:21px;font-weight:400;color:var(--pr-dark-text-color);
  max-width:none;margin:0 0 12px}
.vk-about p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------------------
   Band 11 — reviews (oc_module opencart.html.28, sample data; CSS-only).
   One white card; average-rating block left, review cards right.
--------------------------------------------------------------------------- */
.vk-reviews{
  margin:24px 0 0;background:var(--pr-white);border-radius:var(--pr-radius-card);padding:24px;
}
.vk-reviews-wrap{display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:start}
.vk-reviews-avg{
  background:var(--pr-white);border:1px solid var(--pr-border);
  border-radius:var(--pr-radius-card);padding:20px;text-align:center;
  display:flex;flex-direction:column;gap:8px;align-items:center;
}
.vk-reviews-score{font-size:44px;font-weight:700;line-height:1;color:var(--pr-dark-text-color)}
.vk-reviews-stars{color:var(--pr-yellow-color);font-size:14px}
.vk-reviews-note{font-size:12px;line-height:18px;color:var(--pr-grey-color)}
.vk-reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.vk-review{
  margin:0;background:var(--pr-white);border:1px solid var(--pr-border);
  border-radius:var(--pr-radius-card);padding:16px;
  display:flex;flex-direction:column;gap:10px;
}
.vk-review-stars{color:var(--pr-yellow-color);font-size:12px}
.vk-review blockquote{margin:0;font-size:13px;line-height:19px;font-weight:400;
  color:var(--pr-dark-text-color)}
.vk-review figcaption{font-size:12px;line-height:18px;color:var(--pr-grey-color)}
@media (max-width:991px){
  .vk-reviews-wrap{grid-template-columns:1fr}
  .vk-reviews-grid{grid-template-columns:1fr}
}

/* --- fix pass 2026-08-07 -------------------------------------------------- */
/* B. The prev/next arrows are vertically centred, which puts them straight
      through the subtitle line on our longer Ukrainian copy. Clear a gutter
      for them instead of moving them — the reference keeps them inset. */
/* The slide's text box starts at 32px padding (x=440) while the prev arrow
   occupies x424-464 — so the arrow sat straight through the subtitle. There is
   no room to move the arrow (it is already 16px off the hero edge), so open a
   gutter wide enough to clear it. .vk-hero-body does not exist; the real
   container is .vk-hero-text. */
@media (min-width: 992px){
  .vk-hero .vk-hero-text{padding-left:72px}
}
/* C. Catalog photos are white-background studio shots. On the coloured banner
      cards they rendered as opaque light rectangles cutting the rounded
      corner. Multiply drops the white and keeps the product. */
.vk-banner-plus img, .vk-bannerplus img, [class*=vk-banner] .vk-banner-img img{
  mix-blend-mode:multiply;
}

/* C (corrected). The wrapper carries `position:absolute; z-index:1`, which
   creates a stacking context and ISOLATES the image's blend group — so
   `mix-blend-mode:multiply` on the <img> had no backdrop to multiply against
   and the white studio background rendered opaque, breaking the card's rounded
   corner. Blending it properly would tint the product against these saturated
   gradients, so use the treatment the hero already proved: seat the photo in a
   white rounded panel, fully inside the card. */
.vk-b4-img{
  right:12px; bottom:12px; width:132px; height:112px;
  background:var(--pr-white); border-radius:var(--pr-radius-card); padding:8px;
  box-shadow:0 6px 18px -10px rgba(18,23,21,.5);
}
.vk-b4-img img{
  mix-blend-mode:normal;
  object-position:center;
}

/* Quick-link tiles, corrected for the same reason as the banner cards.
   `mix-blend-mode:multiply` treats a white studio JPEG as a cut-out, which
   works for dark products (lantern, suitcase) and erases pale ones — the grill
   and the pressure washer were barely visible against their pastel. The
   reference gets away with it because its assets are true cut-out PNGs and
   ours are not. Seat the photo in a white panel instead, matching the hero and
   the banner cards so the treatment is consistent across the page. */
.vk-ql img{
  mix-blend-mode:normal;
  height:96px; max-width:none; width:calc(100% - 8px);
  object-fit:contain; object-position:center;
  background:var(--pr-white);
  border-radius:10px 10px 0 0;
  padding:6px;
  margin-top:auto;
}