/**
 * 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 {
  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;
}

.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;
}

/* --- 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;
}

/* Full-bleed breakout only on desktop — 100vw inside table-cell breaks mobile/tablet */
@media (min-width: 992px) {
  .page_topline .col-sm-12 > .carousel-wrapper,
  .page_topline .col-sm-12 > section.carousel-wrapper {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .page_topline.table_section .row > .col-sm-12 > .carousel-wrapper,
  .page_topline.table_section .row > .col-sm-12 > section.carousel-wrapper {
    width: 100vw;
    max-width: 100vw;
  }
}

/* table_section_md keeps display:table on mobile/tablet — carousel ends up ~50% width */
@media (max-width: 991px) {
  .page_topline.table_section.table_section_md > [class*='container'] > .row:has(.carousel-wrapper),
  .vb-grid-section.table_section.table_section_md > [class*='container'] > .row:has(.carousel-wrapper) {
    display: block;
    width: 100%;
  }

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

  .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: 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 > img {
  flex: 0 0 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 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 {
    flex-basis: min(44vw, 12rem);
  }

  .page_topline .carousel-wrapper.curated .carousel-scroll-area > article {
    flex-basis: 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 {
    flex-basis: min(32vw, 12rem);
  }

  .page_topline .carousel-wrapper.curated .carousel-scroll-area > article {
    flex-basis: 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 {
    flex-basis: clamp(9rem, 22vw, 12rem);
  }

  .page_topline .carousel-wrapper.curated .carousel-scroll-area > article {
    flex-basis: 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 {
    flex-basis: clamp(10rem, 16vw, 13rem);
  }
}

/* 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%; }
}

/* ════════════════════════════════════════════════════════════════════
 * GIFTIQUE SKIN ZA BUILDER WIDGETE
 *
 * Naslijeđeni widgeti dolaze iz kupljenog HTML predloška froddo ere:
 * tamno-škriljasti promo blokovi, zelene ikone, cipela kao motiv, i
 * pregršt "varijanti" kojima CSS nikad nije napisan pa izgledaju isto.
 * Ovdje se svode na jezik rebranda iz docs/rebranding (giftique-static.html,
 * giftique_ui_demo.html): bijela ploha, tanke linije, Fraunces naslovi,
 * a boja samo kao akcent.
 *
 * SVE je scopeano na `section.builder` (FE) i `.vb-box-wrapper`
 * (canvas buildera + preview iframe u widgets/update). Iste klase koje
 * storefront koristi izvan buildera — košarica (free-delivery), promo-2x2
 * na naslovnici, PDP — OSTAJU NETAKNUTE. Rebrand SCSS pipeline se ne dira.
 *
 * Rollback: obrisati ovaj blok. Widgeti se vraćaju na predložak.
 * ════════════════════════════════════════════════════════════════════ */

.vb-box-wrapper,
section.builder {
  --gq-accent: #ed1164;
  --gq-accent-l: #fbeaf0;
  --gq-accent-m: #f4c0d1;
  --gq-gold: #faa21b;
  --gq-gold-l: #faeeda;
  --gq-surface: #fff;
  --gq-surface-subtle: #ede9e2;
  --gq-page: #f1efe8;
  --gq-text: #1a1a1a;
  --gq-text-2: #6b6860;
  --gq-text-3: #b4b2a9;
  --gq-border: rgb(26 26 26 / 8%);
  --gq-border-s: rgb(26 26 26 / 16%);
  --gq-font-d: 'Fraunces', Georgia, serif;
  --gq-r-md: 8px;
  --gq-r-lg: 12px;
  --gq-r-f: 9999px;
  --gq-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ── Tipografija ────────────────────────────────────────────────── */

section.builder h2,
.vb-box-wrapper section.builder h2 {
  font-family: var(--gq-font-d);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--gq-text);
}

section.builder h3 {
  font-family: var(--gq-font-d);
  font-weight: 400;
  font-style: italic;
  color: var(--gq-text);
}

/* Inline poveznica u tekstu: akcent + tanko podcrtavanje u svijetloj nijansi. */
section.builder p > a:not([class]),
section.builder li > a:not([class]) {
  color: var(--gq-accent);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--gq-accent-m);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
  section.builder p > a:not([class]):hover,
  section.builder li > a:not([class]):hover {
    text-decoration-color: var(--gq-accent);
  }
}

/* ── Gumb (jedan oblik za sve widgete) ──────────────────────────── */

section.builder .cta-link,
section.builder .blog-link,
section.builder .link-img [href],
.vb-box-wrapper section.builder .cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 24px;
  border: 1px solid var(--gq-accent);
  border-radius: var(--gq-r-f);
  background: var(--gq-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 160ms var(--gq-ease), color 160ms var(--gq-ease);
}

@media (hover: hover) and (pointer: fine) {
  section.builder .cta-link:hover,
  section.builder .blog-link:hover,
  section.builder .link-img [href]:hover {
    background: transparent;
    color: var(--gq-accent);
  }
}

/* ── Citat (quote-green) ────────────────────────────────────────── */

section.builder blockquote {
  margin: 2em 0;
  padding: 20px 24px;
  border: 0;
  border-left: 3px solid var(--gq-accent);
  border-radius: 0 var(--gq-r-md) var(--gq-r-md) 0;
  background: var(--gq-accent-l);
  font-family: var(--gq-font-d);
  font-size: 1.0625rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--gq-text);
}

/* Predložak nosi dekorativni navodnik kao zaseban element — u rebrandu
   ga zamjenjuje lijeva linija, pa ga skrivamo. */
section.builder blockquote::before,
section.builder blockquote > .fa-quote-left,
section.builder blockquote > i[class*='quote'] {
  display: none;
}

section.builder blockquote cite {
  display: block;
  margin-top: 10px;
  font-family: inherit;
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--gq-text-2);
}

/* ── Liste (list-green, list-green-page) ────────────────────────── */

section.builder .container ul:not([class]),
section.builder ul[class*='list-green'],
section.builder ul.list-green {
  padding-left: 0;
  list-style: none;
}

section.builder .container ul:not([class]) > li,
section.builder ul[class*='list-green'] > li,
section.builder ul.list-green > li {
  position: relative;
  margin-bottom: 0.5em;
  padding-left: 1.5em;
  list-style: none;
}

section.builder .container ul:not([class]) > li::before,
section.builder ul[class*='list-green'] > li::before,
section.builder ul.list-green > li::before {
  content: '';
  position: absolute;
  top: 0.65em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gq-accent);
}

/* Ugniježđena razina: prazan krug umjesto ispunjenog. */
section.builder ul ul > li::before {
  background: transparent;
  border: 1.5px solid var(--gq-accent);
}

/* ── Tablica ────────────────────────────────────────────────────── */

section.builder table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  margin: 2em 0;
  border: 1px solid var(--gq-border);
  border-radius: var(--gq-r-lg);
  font-size: 14px;
  box-shadow: 0 1px 4px rgb(0 0 0 / 5%);
}

section.builder table caption {
  padding: 0 0 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  color: var(--gq-text-2);
  caption-side: top;
}

section.builder thead {
  background: var(--gq-surface-subtle);
}

section.builder th {
  padding: 12px 16px;
  border-bottom: 1px solid var(--gq-border);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  color: var(--gq-text-2);
}

section.builder td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--gq-border);
  vertical-align: top;
  color: var(--gq-text);
}

section.builder tbody tr:last-child td {
  border-bottom: 0;
}

@media (hover: hover) and (pointer: fine) {
  section.builder tbody tr:hover td {
    background: rgb(241 239 232 / 50%);
  }
}

/* ── Akordion (details-summary, details-summary-2) ──────────────── */

section.builder details {
  border-bottom: 1px solid var(--gq-border);
  background: none;
}

section.builder details:first-of-type {
  border-top: 1px solid var(--gq-border);
}

section.builder details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border: 0;
  background: none;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gq-text);
  cursor: pointer;
  list-style: none;
  transition: color 140ms ease;
}

section.builder details > summary::-webkit-details-marker,
section.builder details > summary::marker {
  display: none;
  content: '';
}

/* Chevron: čista CSS strelica, bez ikonskog fonta — radi i u canvasu. */
section.builder details > summary::after {
  content: '';
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 1.5px solid var(--gq-text-2);
  border-bottom: 1.5px solid var(--gq-text-2);
  margin-top: -4px;
  transform: rotate(45deg);
  transition: transform 220ms var(--gq-ease), border-color 140ms ease;
}

section.builder details[open] > summary {
  color: var(--gq-accent);
}

section.builder details[open] > summary::after {
  margin-top: 2px;
  border-color: var(--gq-accent);
  transform: rotate(-135deg);
}

section.builder details > :not(summary) {
  padding: 0 0 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--gq-text-2);
}

/* ── Baner s tekstom i gumbom (banner-cta obitelj) ──────────────── */

section.builder [class*='banner-cta'] {
  align-items: center;
  margin: 2em 0;
  padding: 32px;
  border: 1px solid var(--gq-border);
  border-radius: var(--gq-r-lg);
  background: var(--gq-surface);
  color: var(--gq-text);
}

section.builder [class*='banner-cta'] h2 {
  margin: 0 0 12px;
  font-family: var(--gq-font-d);
  font-size: 1.5rem;
  font-weight: 400;
  text-align: left;
}

section.builder [class*='banner-cta'] p {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--gq-text-2);
}

section.builder [class*='banner-cta'] img {
  border-radius: var(--gq-r-md);
}

/* Tonske varijante — predložak ih je imenovao, ali nikad stilizirao. */
section.builder .banner-cta-gray {
  background: var(--gq-page);
  border-color: transparent;
}

section.builder .banner-cta-graydark {
  background: var(--gq-text);
  border-color: transparent;
  color: #fff;
}

section.builder .banner-cta-graydark h2,
section.builder .banner-cta-graydark p {
  color: #fff;
}

section.builder .banner-cta-graydark .cta-link {
  border-color: #fff;
  background: #fff;
  color: var(--gq-text);
}

/* ── Tanka traka s poveznicom (thin-cta obitelj) ────────────────────
 * Predložak cilja `[class^='thin-cta-']`, što ne hvata golu klasu
 * `thin-cta` — pa su dvije varijante bile potpuno nestilizirane.
 * Ovdje `[class*='thin-cta']` hvata sve.
 * Uz to: originalna gray varijanta je crtala tamni tekst na punom
 * ružičastom (kontrast 2.1:1). Zamijenjeno svijetlom plohom s akcentnom
 * linijom — boja nosi naglasak, ne cijelu pozadinu. */

section.builder [class*='thin-cta'] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin: 1.5em 0;
  padding: 18px 24px;
  border: 1px solid var(--gq-border);
  border-radius: var(--gq-r-md);
  background: var(--gq-surface);
  line-height: 1.5;
}

section.builder [class*='thin-cta'] .cta-content {
  flex: 1 1 260px;
  margin: 0;
  padding: 0;
  font-size: 15px;
  color: var(--gq-text);
}

section.builder [class*='thin-cta'] .cta-link {
  flex: 0 0 auto;
  margin: 0;
}

section.builder .thin-cta-gray {
  border-color: transparent;
  border-left: 3px solid var(--gq-accent);
  border-radius: 0 var(--gq-r-md) var(--gq-r-md) 0;
  background: var(--gq-accent-l);
}

section.builder .thin-cta-graydark {
  border-color: transparent;
  background: var(--gq-text);
}

section.builder .thin-cta-graydark .cta-content {
  color: #fff;
}

section.builder .thin-cta-graydark .cta-link {
  border-color: #fff;
  background: #fff;
  color: var(--gq-text);
}

/* ── Poruka s ikonom (ad-text obitelj) ──────────────────────────────
 * Predložak crta cipelu u krugu (froddo motiv) kao background-image.
 * Gasimo obje slojne slike i vraćamo mirnu plohu s akcentnom linijom. */

section.builder [class^='ad-text'],
section.builder [class*=' ad-text'] {
  padding: 16px 20px;
  border: 0;
  border-left: 3px solid var(--gq-gold);
  border-radius: 0 var(--gq-r-md) var(--gq-r-md) 0;
  background-color: var(--gq-gold-l);
  background-image: none;
  font-size: 14px;
  line-height: 1.6;
}

section.builder [class^='ad-text'] p,
section.builder [class*=' ad-text'] p {
  margin: 0.25em 0;
  color: var(--gq-text);
}

section.builder [class^='ad-text'] [href] {
  color: var(--gq-accent);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--gq-accent-m);
  text-underline-offset: 3px;
}

/* ── Slika s tekstom (ad-banner obitelj) ────────────────────────────
 * Izvan promo-2x2 mreže ovi widgeti nemaju nikakav CSS, pa je tekst
 * ispadao izvan slike (v. linkimg4 u analizi). */

section.builder [class^='ad-banner'] {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 1.5em 0;
  border-radius: var(--gq-r-lg);
}

section.builder [class^='ad-banner'] img {
  display: block;
  width: 100%;
  height: auto;
}

section.builder [class^='ad-banner'] .ad-content {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  width: auto;
  max-width: min(28rem, calc(100% - 40px));
  padding: 18px 22px;
  border-radius: var(--gq-r-md);
  background: rgb(255 255 255 / 94%);
  color: var(--gq-text);
}

section.builder .ad-banner-center .ad-content {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  text-align: center;
}

section.builder .ad-banner-right .ad-content {
  left: auto;
  right: 20px;
}

section.builder [class^='ad-banner'] .ad-content > :first-child {
  margin-top: 0;
  font-family: var(--gq-font-d);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--gq-text);
}

section.builder [class^='ad-banner'] .ad-content p {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--gq-text-2);
}

/* ── Slika s gumbom (link-img) ──────────────────────────────────── */

section.builder .link-img {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 1.5em 0;
  border-radius: var(--gq-r-lg);
}

section.builder .link-img img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Promo blokovi ──────────────────────────────────────────────────
 * double-points / free-delivery-box su u predlošku tamno-škriljasti
 * (#2f3742) s pozicioniranim tekstom koji se preklapa, a free-delivery
 * i gift-cta koriste zelenu ikonu. Ništa od toga nije u giftique paleti.
 * Svode se na kremastu plohu s akcentnim naslovom.
 * NAPOMENA: iste klase u košarici i na naslovnici NISU pogođene —
 * pravila vrijede samo unutar section.builder. */

section.builder .double-points,
section.builder .free-delivery,
section.builder .free-delivery-box,
section.builder .gift-cta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  min-height: 0;
  margin: 1.5em 0;
  padding: 24px 28px;
  border: 1px solid var(--gq-border);
  border-radius: var(--gq-r-lg);
  background-color: var(--gq-page);
  background-image: none;
  color: var(--gq-text);
  text-align: left;
}

section.builder .double-points > *,
section.builder .free-delivery > *,
section.builder .free-delivery-box > *,
section.builder .gift-cta > * {
  position: static;
  width: auto;
  max-width: 100%;
  margin: 0;
  transform: none;
  color: inherit;
}

section.builder .double-points strong,
section.builder .free-delivery strong,
section.builder .free-delivery-box strong,
section.builder .gift-cta strong,
section.builder .gift-cta .present-title {
  display: block;
  font-family: var(--gq-font-d);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--gq-accent);
}

section.builder .gift-cta .note {
  font-size: 13px;
  color: var(--gq-text-2);
}

/* Ikone predloška su zelene / škriljaste — u builderu ih vodimo na akcent. */
section.builder .double-points img,
section.builder .free-delivery img,
section.builder .free-delivery-box img,
section.builder .gift-cta img {
  flex: 0 0 auto;
  width: 40px;
  height: auto;
}

/* ── Akcija 1+1 (discount-1plus1) ───────────────────────────────── */

section.builder .discount-1plus1 {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 1.5em 0;
  padding: 24px 28px;
  border: 1px solid var(--gq-border);
  border-radius: var(--gq-r-lg);
  background-color: var(--gq-accent-l);
  background-image: none;
}

section.builder .discount-1plus1 [href] {
  color: var(--gq-accent);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--gq-accent-m);
  text-underline-offset: 3px;
}

/* ── Blog kartice ───────────────────────────────────────────────────
 * Pun ružičasti gumb na svakoj kartici je previše boje za mrežu od
 * četiri; u rebrandu je to tekstualna poveznica sa strelicom. */

section.builder .blog-item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--gq-border);
  border-radius: var(--gq-r-lg);
  background: var(--gq-surface);
  transition: box-shadow 200ms var(--gq-ease);
}

@media (hover: hover) and (pointer: fine) {
  section.builder .blog-item:hover {
    box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
  }
}

section.builder .blog-item > * {
  padding-left: 20px;
  padding-right: 20px;
}

section.builder .blog-item > img,
section.builder .blog-item > a > img {
  padding: 0;
}

section.builder .blog-item h2,
section.builder .blog-item h3 {
  margin: 12px 0 8px;
  font-family: var(--gq-font-d);
  font-size: 1.0625rem;
  font-weight: 400;
  font-style: normal;
}

section.builder .blog-item p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--gq-text-2);
}

section.builder .blog-link {
  align-self: flex-start;
  min-height: 0;
  margin: 4px 0 20px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gq-accent);
  text-decoration: underline;
  text-decoration-color: var(--gq-accent-m);
  text-underline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  section.builder .blog-link:hover {
    background: none;
    color: var(--gq-accent);
    text-decoration-color: var(--gq-accent);
  }
}

/* ── Slika s tri gumba (hero) ───────────────────────────────────── */

section.builder .hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--gq-r-lg);
}

section.builder .hero-content {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ── Promo blokovi: dovršetak neutralizacije predloška ──────────────
 * promo-box mixin (0-inits/promo-box) postavlja `flex-flow: column`,
 * `align-items: end`, `text-indent: -6em` i ikonu kroz ::before
 * (cipela / tamna kutija / burst). Gornji blok je promijenio plohu, ali
 * te je geometrijske ostatke trebalo izričito ugasiti — inače tekst
 * ostaje desno poravnat i razlomljen ("Besplatna" / "dostava"). */

section.builder .double-points,
section.builder .free-delivery,
section.builder .free-delivery-box,
section.builder .gift-cta {
  flex-flow: row wrap;
  align-items: center;
  justify-content: flex-start;
  text-indent: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  text-transform: none;
}

/* Ikona predloška → mala akcentna točka, ista kao oznaka u listama. */
section.builder .double-points::before,
section.builder .free-delivery::before,
section.builder .free-delivery-box::before,
section.builder .gift-cta::before {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin: 0;
  border-radius: 50%;
  background: var(--gq-accent);
  font-size: 0;
}

section.builder .double-points span,
section.builder .free-delivery span,
section.builder .free-delivery-box span,
section.builder .gift-cta span {
  display: inline;
  margin: 0;
  font-size: inherit;
  text-indent: 0;
  text-transform: none;
}

section.builder .double-points p,
section.builder .free-delivery p,
section.builder .free-delivery-box p,
section.builder .gift-cta p {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  color: var(--gq-text-2);
}

/*
 * Predložak dijeli poruku na golu riječ + <span> ("Dupli <span>bodovi</span>").
 * Ako se akcent stavi na span, dobiju se dvije različito obojene riječi u
 * istoj rečenici. Cijela poruka ide u jednom stilu, span nasljeđuje.
 */
section.builder .double-points,
section.builder .free-delivery-box {
  font-family: var(--gq-font-d);
  font-size: 1.125rem;
  color: var(--gq-accent);
}

section.builder .double-points span,
section.builder .free-delivery-box span {
  font: inherit;
  color: inherit;
}

/* ── Karusel kartica (multi-cards-carousel) ─────────────────────────
 * Widget je portiran s vlastitim scroll-snap markupom, ali njegov CSS
 * nije postojao nigdje u lusteru — kartice su se slagale jedna ispod
 * druge preko cijele širine. Ovdje je traka: horizontalni scroll sa
 * snapom, tri kartice vidljive na desktopu, bez JS-a. */

section.builder .vb-multi-cards-carousel__root {
  position: relative;
}

section.builder .vb-multi-cards-carousel__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

section.builder .vb-multi-cards-carousel__track:focus-visible {
  outline: 2px solid var(--gq-accent);
  outline-offset: 4px;
}

section.builder .vb-multi-cards-carousel__card {
  display: flex;
  flex-direction: column;
  flex: 0 0 calc((100% - 2 * 20px) / 3);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--gq-border);
  border-radius: var(--gq-r-lg);
  background: var(--gq-surface);
  scroll-snap-align: start;
}

@media (max-width: 991px) {
  section.builder .vb-multi-cards-carousel__card {
    flex-basis: calc((100% - 20px) / 2);
  }
}

@media (max-width: 575px) {
  section.builder .vb-multi-cards-carousel__card {
    flex-basis: 85%;
  }
}

section.builder .vb-multi-cards-carousel__card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

section.builder .vb-multi-cards-carousel__card .card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 20px 20px;
}

section.builder .vb-multi-cards-carousel__card .card-title {
  margin: 0;
  font-family: var(--gq-font-d);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.25;
}

section.builder .vb-multi-cards-carousel__card .card-title a {
  color: var(--gq-text);
  text-decoration: none;
}

section.builder .vb-multi-cards-carousel__card .card-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--gq-text-2);
}

section.builder .vb-multi-cards-carousel__card .card-text p {
  margin: 0;
}

/* Bootstrap `btn btn-primary` na shopu ne postoji — dajemo mu isti
   tekstualni oblik kao poveznici na blog kartici. */
section.builder .vb-multi-cards-carousel__card .btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--gq-accent);
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--gq-accent-m);
  text-underline-offset: 4px;
}

/* ── Gumbi u hero baneru ────────────────────────────────────────────
 * Tri pilule stoje PREKO slike, pa pun akcentni gumb guta podlogu.
 * Ovdje su obrnute: bijela ploha, akcentni rub i tekst — isti oblik kao
 * sekundarni gumb u rebrand predlošku. */

section.builder .hero-content {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

section.builder .hero-content > li {
  margin: 0;
  padding: 0;
  list-style: none;
}

section.builder .hero-content > li::before {
  display: none;
}

section.builder .hero-content .cta-link {
  border: 1px solid var(--gq-accent);
  background: rgb(255 255 255 / 94%);
  color: var(--gq-accent);
}

@media (hover: hover) and (pointer: fine) {
  section.builder .hero-content .cta-link:hover {
    background: var(--gq-accent);
    color: #fff;
  }
}

/* Predložak u hero pilulama radi kontrast dviju veličina fonta preko
   <span>; u pilulama rebranda sve je jedan mali letterspaceani tekst. */
section.builder .hero-content .cta-link span {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

section.builder .hero-content .cta-link span::after {
  content: ' ';
  white-space: pre;
}

/* ── Container ──────────────────────────────────────────────────────
 * Shop NEMA pravilo za `.container` — u kompajliranom CSS-u postoji samo
 * naslijeđeni `.container_12`. Builder markup ga koristi u 50 od 57
 * widgeta, pa je na FE-u sadržaj išao od ruba do ruba, dok je u canvasu
 * izgledao uredno (bootstrap-preview.css ima `.vb-box-wrapper .container`).
 * Canvas i storefront su se time razilazili na skoro svakom widgetu.
 *
 * Vrijednosti prate rebrand predložak (docs/rebranding), ne bootstrap:
 * 1280px maksimalna širina i šire margine na većim ekranima. Učitava se
 * nakon bootstrap-preview.css pa vrijedi i u canvasu — jedan izgled na
 * oba mjesta.
 *
 * SPECIFIČNOST: gore u ovoj datoteci stoji naslijeđeno
 *   `.page_topline.table_section [class*='container'] { padding: 0 }`
 * sa specifičnošću (0,3,0). Zato i ovdje trebaju tri klase — s dvije
 * (`.vb-box-wrapper .container`) padding se gubi i sadržaj opet ide do
 * ruba. Carousel izuzetak (`:has(.carousel-wrapper)`) ostaje jači i dalje
 * radi full-bleed. */

.vb-grid-section.table_section > [class*='container'],
.page_topline.table_section > [class*='container'],
.vb-box-wrapper section.builder > [class*='container'],
.vb-grid-section > [class*='container'],
section.builder > [class*='container'] {
  width: 100%;
  max-width: 1280px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 16px;
  padding-left: 16px;
}

.vb-grid-section.table_section > .container-fluid,
.page_topline.table_section > .container-fluid,
.vb-box-wrapper section.builder > .container-fluid,
.vb-grid-section > .container-fluid,
section.builder > .container-fluid {
  max-width: none;
}

@media (min-width: 768px) {
  .vb-grid-section.table_section > [class*='container'],
  .page_topline.table_section > [class*='container'],
  .vb-box-wrapper section.builder > [class*='container'],
  .vb-grid-section > [class*='container'],
  section.builder > [class*='container'] {
    padding-right: 40px;
    padding-left: 40px;
  }
}

@media (min-width: 1024px) {
  .vb-grid-section.table_section > [class*='container'],
  .page_topline.table_section > [class*='container'],
  .vb-box-wrapper section.builder > [class*='container'],
  .vb-grid-section > [class*='container'],
  section.builder > [class*='container'] {
    padding-right: 64px;
    padding-left: 64px;
  }
}

/* ── Naslovi sekcija ────────────────────────────────────────────────
 * `heading` widget renderira <h1 class="profile-title"> — klasa sa
 * stranice "Moj račun", naslijeđena iz prethodne kodne baze. Daje sivi
 * #333 i ~26px za H1. Rebrand traži Fraunces, near-black i skalu koja
 * prati širinu ekrana. */

section.builder h1,
section.builder .profile-title {
  font-family: var(--gq-font-d);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--gq-text);
  text-transform: none;
}

section.builder h2 {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
}

section.builder h3 {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
}