/**
 * 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).
 */

/* --- Avoid .main-layout default section padding on builder sections --- */
.main-layout > section.vb-grid-section,
.main-layout > section.page_topline {
  padding: 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) --- */

.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 {
  flex: 0 0 min(76vw, 18rem);
  max-width: none;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  text-align: center;
}

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