/**
 * Visual Builder PoC — shop FE utilities for widget HTML (#box_wrapper).
 * Faza 9 (D4): legacy ls/ds/cs boje + vb-grid-section spacing/background.
 * Pairs with builder-content.js (scroll reveal + contained section parallax).
 */

/*
 * Shop daje svakoj sekciji u .main-layout `padding: 3rem 4vw; margin: 3rem 0 9em`.
 * Za builder sekcije to treba maknuti — razmak određuje sam widget kroz
 * `section_padding_top_*` / `_bottom_*`, a bočni kroz `.container`.
 *
 * VAŽNO: ovdje se NE smije pisati `padding: 0`. Kratica gasi sve četiri
 * strane sa specifičnošću (0,2,1), pa nadjačava i widgetove klase (0,2,0) —
 * postavka "Padding gore/dolje" u modu Struktura tada nema nikakav učinak na
 * storefrontu, iako u canvasu radi. Gasimo samo vodoravni padding i margine.
 */
.main-layout > section.vb-grid-section,
.main-layout > section.page_topline,
.main-layout > .vb-widget-width > section.vb-grid-section,
.main-layout > .vb-widget-width > section.page_topline {
  padding-right: 0;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}


/* --- Section background (grid-section) --- */
.vb-section-bg {
  background-image: var(--vb-section-bg);
}

.vb-bg-cover,
.vb-section-bg.vb-bg-cover {
  background-size: cover;
}

.vb-bg-contain {
  background-size: contain;
}

.vb-bg-stretch-x {
  background-size: 100% auto;
}

.vb-bg-no-repeat {
  background-repeat: no-repeat;
}

.vb-bg-repeat {
  background-repeat: repeat;
}

.vb-bg-repeat-x {
  background-repeat: repeat-x;
}

.vb-bg-center {
  background-position: center center;
}

.vb-bg-top {
  background-position: center top;
}

.vb-bg-bottom {
  background-position: center bottom;
}

.vb-grid-section.vb-section-bg,
section.vb-section-bg,
.vb-grid-section,
.page_topline.vb-grid-section {
  position: relative;
  isolation: isolate;
}

/* --- Parallax (contained — no background-attachment:fixed bleed into sections above) --- */
.vb-grid-section.vb-parallax.vb-section-bg,
.vb-section-bg.vb-parallax {
  background-image: none !important;
  overflow: hidden;
}

.vb-grid-section.vb-parallax.vb-section-bg::before,
.vb-section-bg.vb-parallax::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -18%;
  height: 136%;
  z-index: 0;
  pointer-events: none;
  background-image: var(--vb-section-bg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  will-change: transform;
  transform: translate3d(0, var(--vb-parallax-y, 0), 0);
}

.vb-grid-section.vb-parallax > .container,
.vb-grid-section.vb-parallax > .container-fluid,
.vb-section-bg.vb-parallax > .container,
.vb-section-bg.vb-parallax > .container-fluid {
  position: relative;
  z-index: 1;
}

/* Legacy parallax: background on section (no CSS variable / ::before) */
.vb-section-bg.parallax,
.vb-grid-section.vb-parallax:not(.vb-section-bg),
section.vb-parallax:not(.vb-section-bg),
.parallax:not(.vb-section-bg) {
  overflow: hidden;
  background-attachment: scroll !important;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}

@media (max-width: 767px) {
  .vb-grid-section.vb-parallax.vb-section-bg::before,
  .vb-section-bg.vb-parallax::before {
    top: 0;
    height: 100%;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vb-grid-section.vb-parallax.vb-section-bg::before,
  .vb-section-bg.vb-parallax::before {
    top: 0;
    height: 100%;
    transform: none;
  }
}

/* --- Shop D4 legacy section colors (grid-section + page_topline shell) --- */
.vb-grid-section.ls,
.page_topline.ls {
  background-color: #ffffff;
  color: #868686;
}

.vb-grid-section.ls h1,
.vb-grid-section.ls h2,
.vb-grid-section.ls h3,
.vb-grid-section.ls h4,
.vb-grid-section.ls h5,
.vb-grid-section.ls h6,
.page_topline.ls h1,
.page_topline.ls h2,
.page_topline.ls h3,
.page_topline.ls h4,
.page_topline.ls h5,
.page_topline.ls h6 {
  color: #343434;
}

/*
 * Obojani CTA banneri (banner-cta-arrivals / -girl / -boy / -preorder) imaju
 * tamnu podlogu i bijeli tekst — style-revamp to radi s `[class^='banner-cta-']`
 * (0,1,1), a ls/ds pravila iznad su specifičnija (0,2,1), pa bi naslov na
 * builder stranici ostao siv. Tekst i gumb nasljeđuju boju s bannera i nisu
 * pogođeni; samo naslovi imaju izravno pravilo.
 */
.vb-grid-section [class^='banner-cta-'] h1,
.vb-grid-section [class^='banner-cta-'] h2,
.vb-grid-section [class^='banner-cta-'] h3,
.vb-grid-section [class^='banner-cta-'] h4,
.vb-grid-section [class^='banner-cta-'] h5,
.vb-grid-section [class^='banner-cta-'] h6,
.page_topline [class^='banner-cta-'] h1,
.page_topline [class^='banner-cta-'] h2,
.page_topline [class^='banner-cta-'] h3,
.page_topline [class^='banner-cta-'] h4,
.page_topline [class^='banner-cta-'] h5,
.page_topline [class^='banner-cta-'] h6 {
  color: #ffffff;
}

.vb-grid-section.ls.ms,
.page_topline.ls.ms {
  background-color: #f5f5f5;
}

.vb-grid-section.ds,
.page_topline.ds {
  background-color: #343434;
  color: #b9b9b9;
}

.vb-grid-section.ds h1,
.vb-grid-section.ds h2,
.vb-grid-section.ds h3,
.vb-grid-section.ds h4,
.vb-grid-section.ds h5,
.vb-grid-section.ds h6,
.page_topline.ds h1,
.page_topline.ds h2,
.page_topline.ds h3,
.page_topline.ds h4,
.page_topline.ds h5,
.page_topline.ds h6 {
  color: #ffffff;
}

.vb-grid-section.ds.ms,
.page_topline.ds.ms {
  background-color: #232323;
}

.vb-grid-section.cs,
.page_topline.cs {
  background-color: #459de7;
  color: #ffffff;
}

.vb-grid-section.cs h1,
.vb-grid-section.cs h2,
.vb-grid-section.cs h3,
.vb-grid-section.cs h4,
.vb-grid-section.cs h5,
.vb-grid-section.cs h6,
.page_topline.cs h1,
.page_topline.cs h2,
.page_topline.cs h3,
.page_topline.cs h4,
.page_topline.cs h5,
.page_topline.cs h6 {
  color: #ffffff;
}

.vb-grid-section.cs.main_color2,
.page_topline.cs.main_color2 {
  background-color: #ffd83e;
  color: #ffffff;
}

/* ===================================================================
 * Paleta pozadina iz shop SCSS-a (style-revamp/sass/init/_colors.scss)
 *
 * Zamjenjuje legacy `cs` / `cs main_color2` (#459de7 / #ffd83e) - te dvije
 * boje nisu iz nase palete. `.cs` pravila iznad ostaju samo zato da se
 * stranice spremljene starim builderom ne raspadnu prije ponovnog spremanja;
 * iz ponude u CMS-u su izbacene.
 *
 * Klasa nosi SAMO vrijednosti (custom properties), a kontekst ispod ih trosi.
 * Zato ista klasa radi na tri mjesta - sekcija, `.profile-title` i tablica -
 * bez tri kopije palete. Naziv klase = naziv tokena u branding paleti, pa je
 * hex uvijek provjerljiv na jednom mjestu.
 *
 * Boja teksta prema svjetlini podloge: svijetla -> #434343 / naslovi #2e3339,
 * srednja -> #2e3339, tamna -> #ffffff.
 *
 * Izvor: cms/app/common/builder/poc/src/project/sectionSurfaces.ts
 * =================================================================== */

:root {
  /* `$froddo-pattern` iz `init/_icons.scss` - builder-content.css ne prolazi
   * kroz SASS, pa je SVG kopiran. Mijenja li se dezen u SCSS-u, i ovdje. */
  --vb-froddo: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%22170%22%20height%3D%2280%22%20version%3D%221.1%22%20viewBox%3D%220%200%2044.98%2021.17%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cg%20transform%3D%22translate%282.124%201.503%29%22%3E%3Cpath%20id%3D%22path1077%22%20d%3D%22m16.69%202.655-.8584-1.092c-.7243-.921-2.061-1.085-2.986-.357-.8954.7041-1.071%201.981-.4198%202.897l-.0042.00336%202.042%202.597%204.95-3.893-1.117-1.42z%22%20fill%3D%22%23fff%22%20opacity%3D%22.1%22%2F%3E%3Cuse%20transform%3D%22rotate%28-85%2028.61%20-7.568%29%22%20fill%3D%22none%22%20xlink%3Ahref%3D%22%23path1077%22%2F%3E%3Cpath%20id%3D%22path1088%22%20d%3D%22m3.771%202.541c.3725-.299.365-.9442-.03599-1.216-.3228-.235-.8319-.1616-1.042.1904-.2631.3874-.09813%201.014.3706%201.151.2373.07423.5181.04911.707-.1252zm1.537-2.165c.5095.5496.6802%201.353.5254%202.077-.1458.8676-.8276%201.613-1.68%201.833-.9625.2628-2.085.02629-2.79-.7009-.5-.5228-.7227-1.28-.61-1.992.08593-.8534.6874-1.629%201.499-1.912.891-.3114%201.935-.1675%202.704.3798.1269.09338.2446.1993.3508.3158z%22%20fill%3D%22%23fff%22%20opacity%3D%22.1%22%2F%3E%3Cuse%20transform%3D%22rotate%2890%2013.71%2015.19%29%22%20xlink%3Ahref%3D%22%23path1088%22%2F%3E%3Cuse%20transform%3D%22rotate%28-85%2015.87%2013.14%29%22%20fill%3D%22none%22%20xlink%3Ahref%3D%22%23path1077%22%2F%3E%3Cuse%20transform%3D%22translate%2813.19%2012.24%29%22%20xlink%3Ahref%3D%22%23path1088%22%2F%3E%3Cuse%20transform%3D%22translate%2813.19%2012.24%29%22%20xlink%3Ahref%3D%22%23path1077%22%2F%3E%3Cuse%20transform%3D%22rotate%2890%2014.2%2027.9%29%22%20xlink%3Ahref%3D%22%23path1088%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}

/* --- Brand --- */

.vb-surface-green {
  --vb-surface-bg: #8dc63f;
  --vb-surface-fg: #434343;
  --vb-surface-head: #2e3339;
}

.vb-surface-green-lightened {
  --vb-surface-bg: #b3d739;
  --vb-surface-fg: #434343;
  --vb-surface-head: #2e3339;
}

.vb-surface-green-lightened2 {
  --vb-surface-bg: #b7e41a;
  --vb-surface-fg: #434343;
  --vb-surface-head: #2e3339;
}


/* --- Neutrali (plavkasti) --- */

.vb-surface-super-light-blue {
  --vb-surface-bg: #f8faff;
  --vb-surface-fg: #434343;
  --vb-surface-head: #2e3339;
}

.vb-surface-bluish-white {
  --vb-surface-bg: #eff3fa;
  --vb-surface-fg: #434343;
  --vb-surface-head: #2e3339;
}

.vb-surface-light-bluish-gray {
  --vb-surface-bg: #d9e0ec;
  --vb-surface-fg: #434343;
  --vb-surface-head: #2e3339;
}

.vb-surface-light-bluish-gray2 {
  --vb-surface-bg: #bfc8d5;
  --vb-surface-fg: #2e3339;
  --vb-surface-head: #2e3339;
}

.vb-surface-bluish-gray {
  --vb-surface-bg: #7a899f;
  --vb-surface-fg: #2e3339;
  --vb-surface-head: #2e3339;
}

.vb-surface-bluish-gray2 {
  --vb-surface-bg: #687484;
  --vb-surface-fg: #ffffff;
  --vb-surface-head: #ffffff;
}

.vb-surface-bluish-gray-medium {
  --vb-surface-bg: #586270;
  --vb-surface-fg: #ffffff;
  --vb-surface-head: #ffffff;
}

.vb-surface-dark-bluish-gray {
  --vb-surface-bg: #49515c;
  --vb-surface-fg: #ffffff;
  --vb-surface-head: #ffffff;
}

.vb-surface-bluish-black {
  --vb-surface-bg: #2e3339;
  --vb-surface-fg: #ffffff;
  --vb-surface-head: #ffffff;
}


/* --- Topli sivi --- */

.vb-surface-super-light-gray {
  --vb-surface-bg: #f9f9f9;
  --vb-surface-fg: #434343;
  --vb-surface-head: #2e3339;
}

.vb-surface-dirty-white {
  --vb-surface-bg: #f6f6f6;
  --vb-surface-fg: #434343;
  --vb-surface-head: #2e3339;
}

.vb-surface-gray-info-bg {
  --vb-surface-bg: #f3f3f3;
  --vb-surface-fg: #434343;
  --vb-surface-head: #2e3339;
}

.vb-surface-light-gray2 {
  --vb-surface-bg: #f0f0f0;
  --vb-surface-fg: #434343;
  --vb-surface-head: #2e3339;
}

.vb-surface-light-gray {
  --vb-surface-bg: #e1e1e1;
  --vb-surface-fg: #434343;
  --vb-surface-head: #2e3339;
}

.vb-surface-light-gray-text {
  --vb-surface-bg: #c4c4c4;
  --vb-surface-fg: #2e3339;
  --vb-surface-head: #2e3339;
}

.vb-surface-medium-gray {
  --vb-surface-bg: #a8a8a8;
  --vb-surface-fg: #2e3339;
  --vb-surface-head: #2e3339;
}

.vb-surface-gray-text-medium {
  --vb-surface-bg: #888888;
  --vb-surface-fg: #2e3339;
  --vb-surface-head: #2e3339;
}

.vb-surface-dark-gray2 {
  --vb-surface-bg: #686868;
  --vb-surface-fg: #ffffff;
  --vb-surface-head: #ffffff;
}

.vb-surface-gray-medium {
  --vb-surface-bg: #505050;
  --vb-surface-fg: #ffffff;
  --vb-surface-head: #ffffff;
}

.vb-surface-dark-gray {
  --vb-surface-bg: #434343;
  --vb-surface-fg: #ffffff;
  --vb-surface-head: #ffffff;
}


/* --- Banneri i CTA --- */

.vb-surface-green-light2 {
  --vb-surface-bg: #fefffa;
  --vb-surface-fg: #434343;
  --vb-surface-head: #2e3339;
}

.vb-surface-green-light3 {
  --vb-surface-bg: #f5f9e7;
  --vb-surface-fg: #434343;
  --vb-surface-head: #2e3339;
}

.vb-surface-sephia {
  --vb-surface-bg: #c1a381;
  --vb-surface-fg: #2e3339;
  --vb-surface-head: #2e3339;
}


/* --- Dezeni ---
 *
 * Jedina namjerna razlika od `@include froddo-pattern`: bez
 * `background-attachment: fixed`. Mixin je pisan za blok unutar stranice, a
 * ovdje je rijec o sekciji punom sirinom - `fixed` bi je vezao za viewport, pa
 * dezen ne bi pratio sekciju pri scrollu, a u builder canvasu (vlastiti scroll
 * container, ne viewport) sekcija bi ostala potpuno bez dezena.
 */

/* @include froddo-pattern - SVG na light-bluish-gray2 podlozi */
.vb-pattern-froddo {
  --vb-surface-bg: #bfc8d5;
  --vb-surface-fg: #ffffff;
  --vb-surface-head: #ffffff;
  --vb-surface-image: var(--vb-froddo);
  --vb-surface-size: auto 5rem;
}

/* .login-prompt - isti dezen na brand zelenoj, veci raspon */
.vb-pattern-froddo-green {
  --vb-surface-bg: #8dc63f;
  --vb-surface-fg: #ffffff;
  --vb-surface-head: #ffffff;
  --vb-surface-image: var(--vb-froddo);
  --vb-surface-size: auto 8rem;
}

/* .brand-story ::before - dezen kroz masku, pa moze biti bilo koje boje */
.vb-pattern-froddo-masked {
  --vb-surface-bg: #fefffa;
  --vb-surface-fg: #434343;
  --vb-surface-head: #2e3339;
  --vb-surface-overlay: #8dc63f;
  --vb-surface-overlay-opacity: 0.5;
  --vb-surface-mask: var(--vb-froddo);
}

/* category-shade - crno na 20 posto preko podloge ili pozadinske slike */
.vb-pattern-shade {
  --vb-surface-bg: #49515c;
  --vb-surface-fg: #ffffff;
  --vb-surface-head: #ffffff;
  --vb-surface-overlay: rgba(0, 0, 0, 0.2);
}


/* ===================================================================
 * Kontekst 1: sekcija (grid-section i page_topline omotac widgeta)
 * =================================================================== */

.vb-grid-section[class*='vb-surface-'],
.page_topline[class*='vb-surface-'],
.vb-grid-section[class*='vb-pattern-'],
.page_topline[class*='vb-pattern-'] {
  background-color: var(--vb-surface-bg);
  color: var(--vb-surface-fg);
  position: relative;
  isolation: isolate;
}

.vb-grid-section[class*='vb-surface-'] h1,
.vb-grid-section[class*='vb-surface-'] h2,
.vb-grid-section[class*='vb-surface-'] h3,
.vb-grid-section[class*='vb-surface-'] h4,
.vb-grid-section[class*='vb-surface-'] h5,
.vb-grid-section[class*='vb-surface-'] h6,
.page_topline[class*='vb-surface-'] h1,
.page_topline[class*='vb-surface-'] h2,
.page_topline[class*='vb-surface-'] h3,
.page_topline[class*='vb-surface-'] h4,
.page_topline[class*='vb-surface-'] h5,
.page_topline[class*='vb-surface-'] h6,
.vb-grid-section[class*='vb-pattern-'] h1,
.vb-grid-section[class*='vb-pattern-'] h2,
.vb-grid-section[class*='vb-pattern-'] h3,
.vb-grid-section[class*='vb-pattern-'] h4,
.vb-grid-section[class*='vb-pattern-'] h5,
.vb-grid-section[class*='vb-pattern-'] h6,
.page_topline[class*='vb-pattern-'] h1,
.page_topline[class*='vb-pattern-'] h2,
.page_topline[class*='vb-pattern-'] h3,
.page_topline[class*='vb-pattern-'] h4,
.page_topline[class*='vb-pattern-'] h5,
.page_topline[class*='vb-pattern-'] h6 {
  color: var(--vb-surface-head);
}

.vb-grid-section[class*='vb-pattern-'],
.page_topline[class*='vb-pattern-'] {
  background-image: var(--vb-surface-image, none);
  background-repeat: repeat;
  background-position: center;
  background-size: var(--vb-surface-size, auto);
  background-attachment: scroll;
}

/*
 * Maska (`froddo-masked`) i zatamnjenje (`shade`) trebaju vlastiti sloj - bez
 * `--vb-surface-overlay` pseudoelement je proziran i nista ne radi.
 */
.vb-grid-section[class*='vb-pattern-']::after,
.page_topline[class*='vb-pattern-']::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--vb-surface-overlay, transparent);
  opacity: var(--vb-surface-overlay-opacity, 1);
  -webkit-mask-image: var(--vb-surface-mask, none);
  mask-image: var(--vb-surface-mask, none);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: auto 9em;
  mask-size: auto 9em;
}

/*
 * Sadrzaj iznad sloja dezena. `vb-parallax` vec dize container na z-index 1;
 * ovdje to treba i bez pozadinske slike, jer bi `::after` inace prekrio tekst.
 */
.vb-grid-section[class*='vb-pattern-'] > [class*='container'],
.page_topline[class*='vb-pattern-'] > [class*='container'] {
  position: relative;
  z-index: 1;
}

/* Na uskom ekranu se dezen lomi na pola - smanji korak. */
@media (max-width: 767px) {
  .vb-grid-section[class*='vb-pattern-'],
  .page_topline[class*='vb-pattern-'] {
    background-size: auto 4rem;
  }
}


/* ===================================================================
 * Kontekst 2: naslov froddo heading widgeta (`.profile-title`)
 *
 * Zadano (bez klase) ostaje ono sto daje `%froddo-heading` u SCSS-u: froddo
 * dezen na #bfc8d5.
 *
 * Selektor je namjerno napisan i s pretkom: `.page_topline.ls h1` iznad je
 * (0,2,1) i nadjacao bi golo `.profile-title[class*=...]` (0,2,0), pa bi
 * naslov dobio pozadinu iz palete, ali zadrzao sivu boju slova iz `ls`.
 *
 * `background-attachment: scroll` je obavezan iako se cini suvisnim: shop
 * pise `background` skraceno s `fixed`, a skraceno pravilo postavlja i
 * `attachment`. Bez izricitog resetiranja ostao bi `fixed` iz shopa.
 * =================================================================== */

.page_topline .profile-title[class*='vb-surface-'],
.vb-grid-section .profile-title[class*='vb-surface-'],
.profile-title[class*='vb-surface-'],
.page_topline .profile-title[class*='vb-pattern-'],
.vb-grid-section .profile-title[class*='vb-pattern-'],
.profile-title[class*='vb-pattern-'] {
  background-color: var(--vb-surface-bg);
  background-image: var(--vb-surface-image, none);
  background-repeat: repeat;
  background-position: center;
  background-size: auto 3em;
  background-attachment: scroll;
  color: var(--vb-surface-head);
  position: relative;
  isolation: isolate;
}

/*
 * Naslov nema unutarnji container kao sekcija, pa sloj ide IZA teksta
 * (`z-index: -1`). `isolation: isolate` iznad drzi ga iznad vlastite pozadine.
 */
.page_topline .profile-title[class*='vb-pattern-']::after,
.vb-grid-section .profile-title[class*='vb-pattern-']::after,
.profile-title[class*='vb-pattern-']::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--vb-surface-overlay, transparent);
  opacity: var(--vb-surface-overlay-opacity, 1);
  -webkit-mask-image: var(--vb-surface-mask, none);
  mask-image: var(--vb-surface-mask, none);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: auto 6em;
  mask-size: auto 6em;
}

/* Bez pozadine - tekst preuzima boju sekcije u kojoj naslov stoji. */
.page_topline .profile-title.vb-title-transparent,
.vb-grid-section .profile-title.vb-title-transparent,
.profile-title.vb-title-transparent {
  background: none;
  color: inherit;
}


/* ===================================================================
 * Kontekst 3: tablica (`table` widget, postavka "Boje tablice")
 *
 * `vb-table-default` namjerno nema nijedno pravilo - to je izgled kakav
 * tablica ima danas iz `base/tables/_tables.scss` (zeleni thead), pa ga
 * najsigurnije cuvamo tako da ga ne diramo.
 *
 * `vb-table-cart` preslikava paletu kosarice iz `components/cart/_cart.scss`:
 * tamna glava #49515c s obrubom #687484, redovi naizmjence #eff3fa / #f9f9f9,
 * hover #ffefd6.
 * =================================================================== */

table.vb-table-cart {
  border-collapse: separate;
  border-spacing: 0;
  color: #434343;
}

table.vb-table-cart caption {
  color: #687484;
}

table.vb-table-cart th {
  background-color: #49515c;
  border-bottom: 1px solid #687484;
  border-right: 1px solid #687484;
  color: #ffffff;
  font-weight: 600;
}

table.vb-table-cart th:last-child {
  border-right: 0;
}

table.vb-table-cart tbody tr:nth-child(odd) td {
  background-color: #eff3fa;
}

table.vb-table-cart tbody tr:nth-child(even) td {
  background-color: #f9f9f9;
}

table.vb-table-cart tbody tr:hover td {
  background-color: #ffefd6;
}

table.vb-table-cart td {
  border-bottom: 1px solid #d9e0ec;
}

table.vb-table-cart tbody tr:last-of-type td {
  border-bottom: 0;
}

table.vb-table-cart tfoot th {
  border-bottom: 0;
  border-top: 1px solid #687484;
}

/* --- Vertical align columns (table_section checkbox) --- */
.vb-grid-section.table_section [class*='container'],
.page_topline.table_section [class*='container'] {
  height: 100%;
  padding-left: 0;
  padding-right: 0;
}

.vb-grid-section.table_section .row,
.page_topline.table_section .row {
  display: table;
  min-width: 100%;
  height: 100%;
  margin-left: 0;
  margin-right: 0;
}

.vb-grid-section.table_section > [class*='container'] > .row > [class*='col-'],
.page_topline.table_section > [class*='container'] > .row > [class*='col-'] {
  display: table-cell;
  vertical-align: middle;
  float: none;
}

@media screen and (max-width: 767px) {
  .vb-grid-section.table_section .row,
  .page_topline.table_section .row,
  .vb-grid-section.table_section > [class*='container'] > .row > [class*='col-'],
  .page_topline.table_section > [class*='container'] > .row > [class*='col-'] {
    display: block;
    height: auto;
  }

  .vb-grid-section.table_section.table_section_md .row,
  .page_topline.table_section.table_section_md .row,
  .vb-grid-section.table_section.table_section_md > [class*='container'] > .row > [class*='col-'],
  .page_topline.table_section.table_section_md > [class*='container'] > .row > [class*='col-'] {
    display: table;
    height: 100%;
  }
}

/* --- Scroll reveal (column to_animate + data-animation) --- */
.to_animate {
  visibility: hidden;
}

.animated {
  visibility: visible !important;
}

/* --- Section padding (on section — background includes padding) --- */

.vb-grid-section.section_padding_top_0,
.page_topline.section_padding_top_0 { padding-top: 0; }
.vb-grid-section.section_padding_top_5,
.page_topline.section_padding_top_5 { padding-top: 5px; }
.vb-grid-section.section_padding_top_15,
.page_topline.section_padding_top_15 { padding-top: 15px; }
.vb-grid-section.section_padding_top_25,
.page_topline.section_padding_top_25 { padding-top: 25px; }
.vb-grid-section.section_padding_top_30,
.page_topline.section_padding_top_30 { padding-top: 30px; }
.vb-grid-section.section_padding_top_50,
.page_topline.section_padding_top_50 { padding-top: 50px; }
.vb-grid-section.section_padding_top_75,
.page_topline.section_padding_top_75 { padding-top: 75px; }
.vb-grid-section.section_padding_top_100,
.page_topline.section_padding_top_100 { padding-top: 100px; }

.vb-grid-section.section_padding_bottom_0,
.page_topline.section_padding_bottom_0 { padding-bottom: 0; }
.vb-grid-section.section_padding_bottom_5,
.page_topline.section_padding_bottom_5 { padding-bottom: 5px; }
.vb-grid-section.section_padding_bottom_15,
.page_topline.section_padding_bottom_15 { padding-bottom: 15px; }
.vb-grid-section.section_padding_bottom_25,
.page_topline.section_padding_bottom_25 { padding-bottom: 25px; }
.vb-grid-section.section_padding_bottom_30,
.page_topline.section_padding_bottom_30 { padding-bottom: 30px; }
.vb-grid-section.section_padding_bottom_50,
.page_topline.section_padding_bottom_50 { padding-bottom: 50px; }
.vb-grid-section.section_padding_bottom_75,
.page_topline.section_padding_bottom_75 { padding-bottom: 75px; }
.vb-grid-section.section_padding_bottom_100,
.page_topline.section_padding_bottom_100 { padding-bottom: 100px; }

/* --- Spacing before section (margin-top, outside background) --- */
.vb-grid-section.section_spacing_before_0,
.page_topline.section_spacing_before_0 { margin-top: 0; }
.vb-grid-section.section_spacing_before_5,
.page_topline.section_spacing_before_5 { margin-top: 5px; }
.vb-grid-section.section_spacing_before_15,
.page_topline.section_spacing_before_15 { margin-top: 15px; }
.vb-grid-section.section_spacing_before_25,
.page_topline.section_spacing_before_25 { margin-top: 25px; }
.vb-grid-section.section_spacing_before_30,
.page_topline.section_spacing_before_30 { margin-top: 30px; }
.vb-grid-section.section_spacing_before_50,
.page_topline.section_spacing_before_50 { margin-top: 50px; }
.vb-grid-section.section_spacing_before_75,
.page_topline.section_spacing_before_75 { margin-top: 75px; }
.vb-grid-section.section_spacing_before_100,
.page_topline.section_spacing_before_100 { margin-top: 100px; }

/* --- Row gap (direct sibling rows in section container only) --- */

.vb-grid-section.section_row_gap_0 > .container > .row + .row,
.vb-grid-section.section_row_gap_0 > .container-fluid > .row + .row {
  margin-top: 0;
}

.vb-grid-section.section_row_gap_5 > .container > .row + .row,
.vb-grid-section.section_row_gap_5 > .container-fluid > .row + .row {
  margin-top: 5px;
}

.vb-grid-section.section_row_gap_15 > .container > .row + .row,
.vb-grid-section.section_row_gap_15 > .container-fluid > .row + .row {
  margin-top: 15px;
}

.vb-grid-section.section_row_gap_25 > .container > .row + .row,
.vb-grid-section.section_row_gap_25 > .container-fluid > .row + .row {
  margin-top: 25px;
}

.vb-grid-section.section_row_gap_30 > .container > .row + .row,
.vb-grid-section.section_row_gap_30 > .container-fluid > .row + .row {
  margin-top: 30px;
}

.vb-grid-section.section_row_gap_50 > .container > .row + .row,
.vb-grid-section.section_row_gap_50 > .container-fluid > .row + .row {
  margin-top: 50px;
}

.vb-grid-section.section_row_gap_75 > .container > .row + .row,
.vb-grid-section.section_row_gap_75 > .container-fluid > .row + .row {
  margin-top: 75px;
}

.vb-grid-section.section_row_gap_100 > .container > .row + .row,
.vb-grid-section.section_row_gap_100 > .container-fluid > .row + .row {
  margin-top: 100px;
}

/* --- Column padding (horizontal gutter on direct rows/cols) --- */
.vb-grid-section.columns_padding_0 > .container > .row,
.vb-grid-section.columns_padding_0 > .container-fluid > .row {
  margin-left: 0;
  margin-right: 0;
}

.vb-grid-section.columns_padding_0 > .container > .row > [class*='col-'],
.vb-grid-section.columns_padding_0 > .container-fluid > .row > [class*='col-'] {
  padding-left: 0;
  padding-right: 0;
}

.vb-grid-section.columns_padding_5 > .container > .row,
.vb-grid-section.columns_padding_5 > .container-fluid > .row {
  margin-left: -5px;
  margin-right: -5px;
}

.vb-grid-section.columns_padding_5 > .container > .row > [class*='col-'],
.vb-grid-section.columns_padding_5 > .container-fluid > .row > [class*='col-'] {
  padding-left: 5px;
  padding-right: 5px;
}

.vb-grid-section.columns_padding_15 > .container > .row,
.vb-grid-section.columns_padding_15 > .container-fluid > .row {
  margin-left: -15px;
  margin-right: -15px;
}

.vb-grid-section.columns_padding_15 > .container > .row > [class*='col-'],
.vb-grid-section.columns_padding_15 > .container-fluid > .row > [class*='col-'] {
  padding-left: 15px;
  padding-right: 15px;
}

.vb-grid-section.columns_padding_25 > .container > .row,
.vb-grid-section.columns_padding_25 > .container-fluid > .row {
  margin-left: -25px;
  margin-right: -25px;
}

.vb-grid-section.columns_padding_25 > .container > .row > [class*='col-'],
.vb-grid-section.columns_padding_25 > .container-fluid > .row > [class*='col-'] {
  padding-left: 25px;
  padding-right: 25px;
}

.vb-grid-section.columns_padding_30 > .container > .row,
.vb-grid-section.columns_padding_30 > .container-fluid > .row {
  margin-left: -30px;
  margin-right: -30px;
}

.vb-grid-section.columns_padding_30 > .container > .row > [class*='col-'],
.vb-grid-section.columns_padding_30 > .container-fluid > .row > [class*='col-'] {
  padding-left: 30px;
  padding-right: 30px;
}

.vb-grid-section.columns_padding_50 > .container > .row,
.vb-grid-section.columns_padding_50 > .container-fluid > .row {
  margin-left: -50px;
  margin-right: -50px;
}

.vb-grid-section.columns_padding_50 > .container > .row > [class*='col-'],
.vb-grid-section.columns_padding_50 > .container-fluid > .row > [class*='col-'] {
  padding-left: 50px;
  padding-right: 50px;
}

.vb-grid-section.columns_padding_75 > .container > .row,
.vb-grid-section.columns_padding_75 > .container-fluid > .row {
  margin-left: -75px;
  margin-right: -75px;
}

.vb-grid-section.columns_padding_75 > .container > .row > [class*='col-'],
.vb-grid-section.columns_padding_75 > .container-fluid > .row > [class*='col-'] {
  padding-left: 75px;
  padding-right: 75px;
}

.vb-grid-section.columns_padding_100 > .container > .row,
.vb-grid-section.columns_padding_100 > .container-fluid > .row {
  margin-left: -100px;
  margin-right: -100px;
}

.vb-grid-section.columns_padding_100 > .container > .row > [class*='col-'],
.vb-grid-section.columns_padding_100 > .container-fluid > .row > [class*='col-'] {
  padding-left: 100px;
  padding-right: 100px;
}

.vb-grid-section.columns_padding_100 > .container-fluid > .row > [class*='col-'] {
  padding-left: 100px;
  padding-right: 100px;
}

/* --- Builder scroll carousels (product / image / text / brands) --- */

/*
 * Carousels can end up nested inside a ".to_animate" scroll-reveal wrapper
 * (theme-wide widget-page chrome, not builder-specific). That reveal relies on
 * an IntersectionObserver keyed off the implicit viewport root, which never
 * fires once content scrolls past the first viewport height on pages where
 * <html> stays non-scrolling and <body> is the real scroll container — so
 * anything below the fold that depends on ".animated" to become visible again
 * never does. A carousel is interactive UI, not decorative fade-in copy, so it
 * must never be left permanently invisible by that inherited "visibility:
 * hidden" — force it visible unconditionally.
 */
.carousel-wrapper {
  visibility: visible;
}

.page_topline .carousel-wrapper,
.page_topline .col-sm-12 > .carousel-wrapper,
.page_topline .col-sm-12 > section.carousel-wrapper {
  display: block;
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/*
 * Red s sliderom se slaže kao običan blok, ne kao tablica.
 *
 * Stupac se u ovim sekcijama ponaša kao ćelija tablice i raste s najširim
 * slajdom: uz postavku "Slajdova na ekranu: automatski" slajd ima fiksnu
 * širinu, pa bi red narastao preko stranice i stranica bi se mogla povlačiti
 * lijevo-desno. Isti postupak se i prije koristio na mobitelu i tabletu.
 */
.page_topline.table_section > [class*='container'] > .row:has(.carousel-wrapper),
.vb-grid-section.table_section > [class*='container'] > .row:has(.carousel-wrapper) {
  display: block;
  width: 100%;
}

.page_topline.table_section > [class*='container'] > .row > [class*='col-']:has(.carousel-wrapper),
.vb-grid-section.table_section > [class*='container'] > .row > [class*='col-']:has(.carousel-wrapper) {
  display: block;
  width: 100%;
  float: none;
}

@media (max-width: 991px) {
  .page_topline.table_section > [class*='container']:has(.carousel-wrapper) {
    padding-left: 0;
    padding-right: 0;
    overflow: visible;
  }
}

.page_topline .carousel-wrapper [class^='carousel-button'] {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateZ(0);
  z-index: 5;
  left: max(0.35rem, env(safe-area-inset-left, 0.35rem));
}

.page_topline .carousel-wrapper [class*='next'] {
  left: auto;
  right: max(0.35rem, env(safe-area-inset-right, 0.35rem));
  transform: translateY(-50%) translateZ(0) rotateY(180deg);
}

.page_topline .carousel-scroll-area {
  display: flex;
  flex-flow: row nowrap;
  gap: var(--vb-slide-gap, 0.5rem);
  align-items: stretch;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-inline: clamp(2.5rem, 6vw, 3.5rem);
  scrollbar-width: thin;
  max-width: 100%;
}

/* Mobile-first: ~1 card + peek (override styles.css flex: 1 0 min(50%, …)) */
.page_topline .carousel-scroll-area > figure,
.page_topline .carousel-scroll-area > div,
.page_topline .carousel-scroll-area > article,
.page_topline .carousel-scroll-area > a,
.page_topline .carousel-scroll-area > blockquote,
.page_topline .carousel-scroll-area > img {
  flex: 0 0 var(--vb-slide-basis-sm, min(76vw, 18rem));
  /* Replaced elements (bare <img> slides, e.g. brands-carousel) default their
     flex automatic minimum size to their intrinsic size, which overrides
     flex-basis/max-width and lets a large source image blow past the slide
     width — min-width: 0 removes that floor. */
  min-width: 0;
  max-width: none;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  text-align: center;
}

.page_topline .carousel-scroll-area > img {
  height: auto;
  object-fit: contain;
}

.page_topline .carousel-wrapper.curated .carousel-scroll-area > article {
  flex: 0 0 var(--vb-slide-basis-sm, min(82vw, 22rem));
  max-width: none;
  height: auto;
  align-self: stretch;
}

.page_topline .carousel-wrapper.curated .carousel-scroll-area > article .product-link,
.page_topline .carousel-wrapper.curated .carousel-scroll-area > article .product-image {
  display: block;
  width: 100%;
  height: auto;
}

.page_topline .carousel-wrapper.curated .product-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 0;
}

@media (min-width: 576px) {
  .page_topline .carousel-scroll-area > figure,
  .page_topline .carousel-scroll-area > div,
  .page_topline .carousel-scroll-area > article,
  .page_topline .carousel-scroll-area > a,
  .page_topline .carousel-scroll-area > blockquote {
    flex-basis: var(--vb-slide-basis-sm, min(44vw, 12rem));
  }

  .page_topline .carousel-wrapper.curated .carousel-scroll-area > article {
    flex-basis: var(--vb-slide-basis-sm, min(46vw, 14rem));
  }
}

@media (min-width: 768px) {
  .page_topline .carousel-scroll-area > figure,
  .page_topline .carousel-scroll-area > div,
  .page_topline .carousel-scroll-area > article,
  .page_topline .carousel-scroll-area > a,
  .page_topline .carousel-scroll-area > blockquote {
    flex-basis: var(--vb-slide-basis-md, min(32vw, 12rem));
  }

  .page_topline .carousel-wrapper.curated .carousel-scroll-area > article {
    flex-basis: var(--vb-slide-basis-md, min(34vw, 14rem));
  }
}

@media (min-width: 992px) {
  .page_topline .carousel-scroll-area > figure,
  .page_topline .carousel-scroll-area > div,
  .page_topline .carousel-scroll-area > article,
  .page_topline .carousel-scroll-area > a,
  .page_topline .carousel-scroll-area > blockquote {
    flex-basis: var(--vb-slide-basis-lg, clamp(9rem, 22vw, 12rem));
  }

  .page_topline .carousel-wrapper.curated .carousel-scroll-area > article {
    flex-basis: var(--vb-slide-basis-lg, 13.5em);
  }
}

@media (min-width: 1400px) {
  .page_topline .carousel-scroll-area > figure,
  .page_topline .carousel-scroll-area > div,
  .page_topline .carousel-scroll-area > article,
  .page_topline .carousel-scroll-area > a,
  .page_topline .carousel-scroll-area > blockquote {
    flex-basis: var(--vb-slide-basis-lg, clamp(10rem, 16vw, 13rem));
  }
}

/*
 * Postavke carousela iz buildera (core/carouselOptions.ts): širina i razmak
 * slajdova dolaze kao CSS varijable na .carousel-wrapper, točkice kao statični
 * markup koji builder-content.js poveže sa scrollom. Bez varijabli vrijede
 * dosadašnje fallback vrijednosti, pa stare stranice ne mijenjaju izgled.
 */
.page_topline .carousel-title {
  margin: 0 0 0.5rem;
}

.page_topline .carousel-intro {
  margin: 0 0 1rem;
}

.page_topline .carousel-intro:empty {
  display: none;
}

.page_topline .carousel-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 0 0;
  margin: 0;
}

/* Shop daje svakom <button> padding 20px, min-width 200px i marginu — točkica to sve gasi. */
.page_topline .carousel-dot {
  box-sizing: border-box;
  width: 0.65rem;
  height: 0.65rem;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  font-size: 0;
  line-height: 0;
  background: currentColor;
  box-shadow: none;
  opacity: 0.25;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.page_topline .carousel-dot:hover,
.page_topline .carousel-dot:focus-visible {
  opacity: 0.6;
}

.page_topline .carousel-dot.is-active {
  opacity: 1;
}

/*
 * Prikaz slike u kućici (postavka widgeta image_fit / image_ratio):
 * data-vb-fit="cover|contain" + --vb-image-ratio na .carousel-wrapper ili
 * .product-image-gallery. Bez atributa slika zadržava prirodne proporcije.
 */
.page_topline .carousel-wrapper[data-vb-fit] .carousel-scroll-area > figure img,
.page_topline .carousel-wrapper[data-vb-fit] .carousel-scroll-area > a > img,
.page_topline .carousel-wrapper[data-vb-fit] .carousel-scroll-area > img,
.page_topline .carousel-wrapper[data-vb-fit] .carousel-scroll-area > article .product-image,
.page_topline .product-image-gallery[data-vb-fit] > a > img,
.page_topline .product-image-gallery[data-vb-fit] > label > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--vb-image-ratio, 1 / 1);
}

.page_topline .carousel-wrapper[data-vb-fit='cover'] .carousel-scroll-area img,
.page_topline .product-image-gallery[data-vb-fit='cover'] img {
  object-fit: cover;
}

.page_topline .carousel-wrapper[data-vb-fit='contain'] .carousel-scroll-area img,
.page_topline .product-image-gallery[data-vb-fit='contain'] img {
  object-fit: contain;
  background: rgba(16, 42, 67, 0.05);
}

/* Lightbox slika galerije se ne reže ni uz cover. */
.page_topline .product-image-gallery[data-vb-fit] > a[href='#'] > img {
  width: auto;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  background: none;
}

/*
 * Accordion (details-summary): shop ograničava zatvoreni <details> na visinu
 * jednog retka radi animacije; na mobilnom se dugi naslov prelomi u dva retka
 * i preklopi sljedeću stavku. Zatvoren <details> renderira samo summary, pa
 * veća granica na uskim ekranima ne otkriva sadržaj.
 */
@media (max-width: 55.5em) {
  .page_topline details:not([open]),
  .vb-grid-section details:not([open]) {
    max-height: calc(3.6em + 2.2rem + 4vw);
  }
}

/* Gumb po slajdu (image/text carousel) — ista zelena kao shop <button>, ali kao link */
.page_topline .carousel-slide-btn {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.45rem 1.1rem;
  border-radius: 6px;
  background: #8dc63f;
  color: #fff;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.page_topline .carousel-slide-btn:hover,
.page_topline .carousel-slide-btn:focus-visible {
  background: #7ab330;
  color: #fff;
}

.page_topline .carousel-scroll-area > figure figcaption .carousel-slide-btn {
  display: block;
  width: fit-content;
  margin: 0.5rem auto 0;
}

/*
 * Tekstualni slajdovi (citati, text/custom carousel) ne stanu u 12rem kolonu
 * koju dobivaju slikovni slajdovi — riječ po riječ u retku. Šira zadana
 * osnovica, a postavka "Slajdova na ekranu" i dalje ima prednost (varijabla).
 */
@media (min-width: 768px) {
  .page_topline .carousel-scroll-area > blockquote,
  .page_topline .carousel-scroll-area > div.carousel-text-slide {
    flex-basis: var(--vb-slide-basis-md, clamp(16rem, 42vw, 24rem));
  }
}

@media (min-width: 992px) {
  .page_topline .carousel-scroll-area > blockquote,
  .page_topline .carousel-scroll-area > div.carousel-text-slide {
    flex-basis: var(--vb-slide-basis-lg, clamp(18rem, 30vw, 26rem));
  }
}

/* Kućica slike s omjerom ne smije prerasti ekran (1 slajd po ekranu + 1:1 = 1300px visine). */
.page_topline .carousel-wrapper[data-vb-fit] .carousel-scroll-area img,
.page_topline .product-image-gallery[data-vb-fit] > a[href^='#pic'] > img,
.page_topline .product-image-gallery[data-vb-fit] > a.gallery-main > img {
  max-height: 75vh;
}

/* Testimonials: shop blockquote (zeleni navodnik + footer s crticom) — samo poravnanje u traci */
.page_topline .carousel-scroll-area > blockquote.carousel-testimonial {
  margin: 0;
  text-align: left;
  height: auto;
}

.page_topline .carousel-scroll-area > blockquote.carousel-testimonial footer {
  margin-bottom: 0;
}

/* Team: slika 1:1, ime i uloga ispod */
.page_topline .carousel-scroll-area > figure.team-member {
  margin: 0;
  text-align: center;
}

.page_topline .carousel-scroll-area > figure.team-member img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.page_topline .carousel-scroll-area > figure.team-member figcaption h3 {
  font-size: 1.1rem;
  margin: 0.6rem 0 0.15rem;
}

.page_topline .carousel-scroll-area > figure.team-member figcaption p {
  margin: 0;
  opacity: 0.75;
}

/*
 * Cijela kartica je link, ne samo naslov ili slika.
 *
 * Builder sprema link slajda na jedan element: tim — naslov u figcaption,
 * slikovni slajd — sliku, proizvod — naslov sa slikom. Posjetitelj je klikao
 * samo taj dio, a ostatak kartice (uloga, opis, cijena, prazan prostor) nije
 * reagirao. Prekrivač razvuče postojeći link preko cijele kartice, bez izmjene
 * markupa — pa isto vrijedi i za stranice spremljene prije ove promjene.
 *
 * Prazan link i "#" se preskaču (nema linka — nema prekrivača), a gumbi i
 * vlastiti linkovi u kartici ostaju iznad prekrivača i rade kao dosad.
 */
.page_topline .carousel-scroll-area > figure,
.page_topline .carousel-scroll-area > article.product-item {
  position: relative;
}

/*
 * Tema linku proizvoda daje `position: relative` zbog oznaka (`.product-tags`)
 * koje builder u slajdu ne ispisuje — bez ovoga prekrivač ostaje na slici i
 * naslovu, a cijena i šifra ne reagiraju na klik.
 */
.page_topline .carousel-scroll-area > article.product-item > a.product-link {
  position: static;
}

.page_topline .carousel-scroll-area > figure > a[href]:not([href='']):not([href='#'])::after,
.page_topline
  .carousel-scroll-area
  > figure.team-member
  figcaption
  h3
  > a[href]:not([href='']):not([href='#'])::after,
.page_topline
  .carousel-scroll-area
  > article.product-item
  > a.product-link[href]:not([href='']):not([href='#'])::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.page_topline .carousel-scroll-area > figure figcaption .carousel-slide-btn,
.page_topline .carousel-scroll-area > article.product-item .product-add {
  position: relative;
  z-index: 2;
}

/* Naslov se podvlači na hover bilo gdje po kartici — vidljivo da je sve link. */
.page_topline .carousel-scroll-area > figure.team-member:hover figcaption h3 > a {
  text-decoration: underline;
}

/* Tipkovnica: fokus na linku kartice uokviri cijelu karticu, ne samo tekst. */
.page_topline .carousel-scroll-area > figure:has(> a:focus-visible),
.page_topline .carousel-scroll-area > figure.team-member:has(figcaption h3 > a:focus-visible),
.page_topline .carousel-scroll-area > article.product-item:has(> a.product-link:focus-visible) {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.page_topline .carousel-scroll-area > figure > a:focus-visible,
.page_topline .carousel-scroll-area > figure.team-member figcaption h3 > a:focus-visible,
.page_topline .carousel-scroll-area > article.product-item > a.product-link:focus-visible {
  outline: none;
}

/* Legacy column padding (older documents) */
.vb-grid-section.columns_padding_1 > .container > .row,
.vb-grid-section.columns_padding_1 > .container-fluid > .row {
  margin-left: 0;
  margin-right: -1px;
}

.vb-grid-section.columns_padding_1 > .container > .row > [class*='col-'],
.vb-grid-section.columns_padding_1 > .container-fluid > .row > [class*='col-'] {
  padding-left: 0;
  padding-right: 1px;
}

.vb-grid-section.columns_padding_2 > .container > .row,
.vb-grid-section.columns_padding_2 > .container-fluid > .row {
  margin-left: -1px;
  margin-right: -1px;
}

.vb-grid-section.columns_padding_2 > .container > .row > [class*='col-'],
.vb-grid-section.columns_padding_2 > .container-fluid > .row > [class*='col-'] {
  padding-left: 1px;
  padding-right: 1px;
}


/* --- Bootstrap grid subset za builder grid-section (bootstrap row mode) --- */
/*
 * Preuzeto iz b2b.ivancica.hr `builder-bootstrap-grid.css`, uz DVIJE namjerne
 * razlike:
 *
 * 1. Scope. Tamo su `.col-*` širine globalne; ovdje su vezane na builder
 *    sekcije. Luster storefront koristi `col-*` klase u 10 vlastitih
 *    komponenti (slider, 4box, box3, blog_standard/compact, layouts
 *    two-/three-column, banner, recently_viewed, sidebar_blog) koje računaju
 *    na to da te klase nemaju širinu — globalna pravila bi im razbila layout.
 *
 * 2. Specifičnost. U b2b verziji reset kolone
 *    (`… > [class*='container'] > .row > [class*='col-']`, 0-4-0) nadjačava
 *    globalni `.col-sm-6` (0-1-0), pa širine zapravo ne bi ni primijenile.
 *    Ovdje su i reset i širine na `… .row > …` (0-3-0), a širine dolaze
 *    kasnije u datoteci — pa pobjeđuju kako treba. `.row` je descendant, što
 *    usput pokriva i ugniježđene redove unutar kolone.
 *
 * Ne dira `.page_topline`: te sekcije imaju vlastiti table_section mehanizam
 * (display:table / table-cell, gore u ovoj datoteci) i rade. Višestupčani
 * `[Ivančica]` text widgeti ionako ne koriste bootstrap kolone nego
 * `.two-columns`/`.three-columns`/`.column-aside` iz styles.css.
 */

.vb-grid-section > [class*='container'] > .row,
section.builder:not(.page_topline) > [class*='container'] > .row {
  --vb-gutter-x: 30px;
  --vb-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--vb-gutter-y) * -1);
  margin-right: calc(var(--vb-gutter-x) * -0.5);
  margin-left: calc(var(--vb-gutter-x) * -0.5);
}

.vb-grid-section .row > [class*='col-'],
section.builder:not(.page_topline) .row > [class*='col-'] {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--vb-gutter-x, 30px) * 0.5);
  padding-left: calc(var(--vb-gutter-x, 30px) * 0.5);
  margin-top: var(--vb-gutter-y, 0);
}

.vb-grid-section.table_section > [class*='container'] > .row,
section.builder:not(.page_topline).table_section > [class*='container'] > .row {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  height: auto;
  margin-left: calc(var(--vb-gutter-x) * -0.5);
  margin-right: calc(var(--vb-gutter-x) * -0.5);
}

.vb-grid-section.table_section > [class*='container'] > .row > [class*='col-'],
section.builder:not(.page_topline).table_section > [class*='container'] > .row > [class*='col-'] {
  display: block;
  float: none;
  vertical-align: initial;
}

@media (max-width: 991px) {
  .vb-grid-section.table_section.table_section_md > [class*='container'] > .row,
  section.builder:not(.page_topline).table_section.table_section_md > [class*='container'] > .row {
    display: flex;
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  .vb-grid-section.table_section > [class*='container'] > .row,
  section.builder:not(.page_topline).table_section > [class*='container'] > .row {
    display: flex;
    flex-wrap: wrap;
  }
}

@media (min-width: 576px) {
  .vb-grid-section .row > .col-sm-3,
  section.builder:not(.page_topline) .row > .col-sm-3 { flex: 0 0 auto; width: 25%; }
  .vb-grid-section .row > .col-sm-4,
  section.builder:not(.page_topline) .row > .col-sm-4 { flex: 0 0 auto; width: 33.33333333%; }
  .vb-grid-section .row > .col-sm-6,
  section.builder:not(.page_topline) .row > .col-sm-6 { flex: 0 0 auto; width: 50%; }
  .vb-grid-section .row > .col-sm-8,
  section.builder:not(.page_topline) .row > .col-sm-8 { flex: 0 0 auto; width: 66.66666667%; }
  .vb-grid-section .row > .col-sm-9,
  section.builder:not(.page_topline) .row > .col-sm-9 { flex: 0 0 auto; width: 75%; }
  .vb-grid-section .row > .col-sm-12,
  section.builder:not(.page_topline) .row > .col-sm-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 768px) {
  .vb-grid-section .row > .col-md-3,
  section.builder:not(.page_topline) .row > .col-md-3 { flex: 0 0 auto; width: 25%; }
  .vb-grid-section .row > .col-md-4,
  section.builder:not(.page_topline) .row > .col-md-4 { flex: 0 0 auto; width: 33.33333333%; }
  .vb-grid-section .row > .col-md-6,
  section.builder:not(.page_topline) .row > .col-md-6 { flex: 0 0 auto; width: 50%; }
  .vb-grid-section .row > .col-md-8,
  section.builder:not(.page_topline) .row > .col-md-8 { flex: 0 0 auto; width: 66.66666667%; }
  .vb-grid-section .row > .col-md-9,
  section.builder:not(.page_topline) .row > .col-md-9 { flex: 0 0 auto; width: 75%; }
  .vb-grid-section .row > .col-md-12,
  section.builder:not(.page_topline) .row > .col-md-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 992px) {
  .vb-grid-section .row > .col-lg-3,
  section.builder:not(.page_topline) .row > .col-lg-3 { flex: 0 0 auto; width: 25%; }
  .vb-grid-section .row > .col-lg-4,
  section.builder:not(.page_topline) .row > .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
  .vb-grid-section .row > .col-lg-6,
  section.builder:not(.page_topline) .row > .col-lg-6 { flex: 0 0 auto; width: 50%; }
  .vb-grid-section .row > .col-lg-8,
  section.builder:not(.page_topline) .row > .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
  .vb-grid-section .row > .col-lg-9,
  section.builder:not(.page_topline) .row > .col-lg-9 { flex: 0 0 auto; width: 75%; }
  .vb-grid-section .row > .col-lg-12,
  section.builder:not(.page_topline) .row > .col-lg-12 { flex: 0 0 auto; width: 100%; }
}

/* Bunny Stream semantic player (Val 2 insert; Val 3 widgets may extend) */
.ivc-video {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0.75rem 0;
  aspect-ratio: 16 / 9;
  background: #102a43;
  overflow: hidden;
}

.ivc-video--portrait {
  max-width: 450px;
  margin: 0.75rem auto;
  aspect-ratio: 9 / 16;
}

.ivc-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.ivc-hero-video {
  position: relative;
  min-height: min(70vh, 42rem);
  overflow: hidden;
  background: #102a43;
  color: #fff;
}

/*
 * Bez videa: poster (fallback slika) se prikaže umjesto da ostane skriven iza
 * praznog playera; bez videa i bez postera nema što ispuniti 42rem tamne plohe.
 */
.ivc-hero-video:not(:has(video, iframe)) .ivc-hero-video__fallback {
  display: block;
}

.ivc-hero-video:not(:has(video, iframe, img)) {
  min-height: 0;
}

.ivc-hero-video__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ivc-hero-video .ivc-video--cover,
.ivc-hero-video video.ivc-video--cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  aspect-ratio: auto;
  object-fit: cover;
}

.ivc-hero-video__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.ivc-hero-video__overlay {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.75rem;
  min-height: min(70vh, 42rem);
  padding: 2.5rem 1.5rem 2rem;
  background: linear-gradient(to top, rgba(16, 42, 67, 0.72), rgba(16, 42, 67, 0.12) 55%, transparent);
}

.ivc-hero-video__overlay h2,
.ivc-video-banner__copy h2 {
  margin: 0;
}

.ivc-hero-video__overlay .cta-link,
.ivc-video-banner__copy .cta-link {
  align-self: flex-start;
}

.ivc-video-banner {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .ivc-video-banner:has(.ivc-video-banner__copy) {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
  }
}

.ivc-video-banner__copy {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

@media (max-width: 767px), (prefers-reduced-motion: reduce) {
  .ivc-hero-video video {
    display: none;
  }

  .ivc-hero-video__fallback {
    display: block;
  }
}

/*
 * Širina widgeta (postavka iz CMS-a, izvan buildera).
 *
 * MORA OSTATI NA KRAJU DATOTEKE: pravila bootstrap podskupa iznad imaju istu
 * specifičnost, pa odlučuje redoslijed — samo odavde puna širina sigurno
 * nadjača zadani bočni razmak reda.
 *
 * Builder sadržaj se ne pakira u omotač širine — sekcije nose vlastiti
 * `.container` — pa odabir urednika stiže klasom na tankom omotaču
 * (`shop/application/widgets/views/html/html.view.php`):
 *
 *   širina stranice (zadano) → sekcija ostaje u stupcu sadržaja, kao dosad
 *   puna širina              → cijela sekcija ide od ruba do ruba
 *
 * Puna širina otvara sekciju u cijelosti, ne samo slider: naslov, tekst i
 * slike idu do ruba, a razmake i stupce unutar toga urednik slaže u builderu.
 * Zato ovdje nema mjerenja u `100vw` — širina je naslijeđena od stranice, pa
 * traka za pomicanje ne može ostaviti vodoravni pomak.
 */
.vb-widget-width--full > section.page_topline > [class*='container'],
.vb-widget-width--full > section.vb-grid-section > [class*='container'] {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/*
 * Red inače negativnim marginama poništava bočni razmak containera; kad tog
 * razmaka nema, te margine vire izvan stranice. Razmak između stupaca ostaje
 * na samim stupcima, pa tekst i dalje ne dodiruje rub, a sekcije bez razmaka
 * na stupcu (slider, slike) idu stvarno do ruba.
 */
.vb-widget-width--full > section.page_topline > [class*='container'] > .row,
.vb-widget-width--full > section.vb-grid-section > [class*='container'] > .row {
  margin-left: 0;
  margin-right: 0;
}