﻿/* ==========================================================================
   Product list – make the surrounding wrappers transparent,
   so only the boxes with a border are white
   ========================================================================== */

[data-dw-itemtype="swift-v2_productlistcomponentselector"],
[data-dw-itemtype="swift-v2_productlistcomponentselector"] > section:not(:first-of-type),
[data-dw-itemtype="swift-v2_productlistcomponentselector"] > section:not(:first-of-type) > [data-swift-container],
[data-dw-itemtype="swift-v2_productlistitemrepeater"],
[data-dw-itemtype="swift-v2_productlistitemrepeater"] .product-list,
[data-dw-itemtype="swift-v2_productlistitemrepeater"] .product-list > .grid,
[data-dw-itemtype="swift-v2_productlistfacets"],
:has(> form.item_swift-v2_productlistfacets),
[id^="ComponentSliderProducts_"]:has([id="22766"]),
[id^="ComponentSliderProducts_"]:has([id="22766"]) > .grid {
  background-color: transparent !important;
}


/* ==========================================================================
   Product list – toolbar (antal produkter + sortering)
   ========================================================================== */

/* The toolbar row = the first row in the product list component */
[data-dw-itemtype="swift-v2_productlistcomponentselector"] > section[data-swift-gridrow="4ColumnsFlex"]:first-of-type {
  background-color: #ffffff;
  border: 1px solid #d2d2d2;
  padding: 0.75rem 1.25rem !important;
  margin-bottom: 1rem !important;
}

/* Remove the extra container padding – the padding sits on the box */
[data-dw-itemtype="swift-v2_productlistcomponentselector"] > section[data-swift-gridrow="4ColumnsFlex"]:first-of-type > [data-swift-container] {
  padding-left: 0;
  padding-right: 0;
  align-items: center;
  background-color: transparent !important;
}

/* Text in the toolbar */
[data-dw-itemtype="swift-v2_productlistcomponentselector"] > section[data-swift-gridrow="4ColumnsFlex"]:first-of-type :is(h1, h2, h3, h4, h5, h6, p, span, div, label) {
  margin-bottom: 0;
  font-size: 0.875rem;
  line-height: 1.35;
  color: #1a1a1a;
}

[data-dw-itemtype="swift-v2_productlistcomponentselector"] > section[data-swift-gridrow="4ColumnsFlex"]:first-of-type :is(strong, b) {
  font-weight: 700;
}


/* ==========================================================================
   Product list – compact row layout (no image)
   ========================================================================== */

/* Remove the gap between products so the borders form one continuous list */
[data-dw-itemtype="swift-v2_productlistitemrepeater"] .product-list > .grid {
  gap: 0 !important;
  row-gap: 0 !important;
}

/* Each product = one row */
[data-dw-itemtype="swift-v2_productlistitemrepeater"] .product-list article.product {
  background-color: #ffffff;
  border: 1px solid #d2d2d2;
  margin-top: -1px; /* overlapping borders, so there is no double line */
  padding: 1rem 1.25rem;
}

[data-dw-itemtype="swift-v2_productlistitemrepeater"] .product-list article.product:first-of-type {
  margin-top: 0;
}

/* Remove the extra container padding inside the row – the padding sits on the article */
[data-dw-itemtype="swift-v2_productlistitemrepeater"] .product-list article.product [data-swift-container] {
  padding-left: 0;
  padding-right: 0;
}


/* ==========================================================================
   Frontpage – top 10 products
   Only applies to sliders that render products with the "Bestsellers"
   product component (page 8592) = product component selector paragraph 22766
   ========================================================================== */

/* Remove the gap between products and the equal-height rows */
[id^="ComponentSliderProducts_"]:has([id="22766"]) > .grid {
  gap: 0 !important;
  row-gap: 0 !important;
  grid-auto-rows: auto !important;
  align-items: start !important;
}

/* Each product = one full-width row with its natural height */
[id^="ComponentSliderProducts_"]:has([id="22766"]) > .grid > div {
  grid-column: span 12 !important;
  height: auto !important;
  min-height: 0 !important;
  justify-content: flex-start !important;
  background-color: #ffffff;
  border: 1px solid #d2d2d2;
  margin-top: -1px; /* overlapping borders, so there is no double line */
  padding: 1rem 1.25rem;
}

[id^="ComponentSliderProducts_"]:has([id="22766"]) > .grid > div:first-child {
  margin-top: 0;
}

/* Row content: no stretching, no extra height */
[id^="ComponentSliderProducts_"]:has([id="22766"]) > .grid > div section,
[id^="ComponentSliderProducts_"]:has([id="22766"]) > .grid > div [data-swift-container],
[id^="ComponentSliderProducts_"]:has([id="22766"]) > .grid > div [data-swift-gridcolumn] {
  flex-grow: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

/* The outer row: full width, content vertically centered */
[id^="ComponentSliderProducts_"]:has([id="22766"]) > .grid > div > section {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

[id^="ComponentSliderProducts_"]:has([id="22766"]) > .grid > div > section > [data-swift-container] {
  align-items: center !important;
}

/* Columns in the row may still fill the width (info left, buy button right) */
[id^="ComponentSliderProducts_"]:has([id="22766"]) > .grid > div > section > [data-swift-container] > [data-swift-gridcolumn].flex-fill {
  flex: 1 1 auto !important;
}

/* Remove the extra container padding inside the row – the padding sits on the row */
[id^="ComponentSliderProducts_"]:has([id="22766"]) > .grid > div [data-swift-container] {
  padding-left: 0;
  padding-right: 0;
}

/* Info column: content at the top, no spreading */
[id^="ComponentSliderProducts_"]:has([id="22766"]) [data-dw-itemtype="swift-v2_productcomponentselector"] {
  justify-content: flex-start !important;
}

[id^="ComponentSliderProducts_"]:has([id="22766"]) [data-dw-itemtype="swift-v2_productcomponentselector"] > section {
  flex: 0 0 auto !important;
}


/* ==========================================================================
   Product content – shared by the product list and the frontpage top 10
   ========================================================================== */

/* Info column: varenummer, navn, felter – sat tæt sammen */
:is([data-dw-itemtype="swift-v2_productlistitemrepeater"] .product-list, [id^="ComponentSliderProducts_"]:has([id="22766"])) [data-dw-itemtype="swift-v2_productcomponentselector"] {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

:is([data-dw-itemtype="swift-v2_productlistitemrepeater"] .product-list, [id^="ComponentSliderProducts_"]:has([id="22766"])) [data-dw-itemtype="swift-v2_productcomponentselector"] > section {
  margin: 0 !important;
  padding: 0 !important;
}

:is([data-dw-itemtype="swift-v2_productlistitemrepeater"] .product-list, [id^="ComponentSliderProducts_"]:has([id="22766"])) [data-dw-itemtype="swift-v2_productcomponentselector"] :is(h1, h2, h3, h4, h5, h6, p, div, span) {
  margin: 0;
  line-height: 1.35;
}

/* 1. section – varenummer */
:is([data-dw-itemtype="swift-v2_productlistitemrepeater"] .product-list, [id^="ComponentSliderProducts_"]:has([id="22766"])) [data-dw-itemtype="swift-v2_productcomponentselector"] > section:nth-of-type(1),
:is([data-dw-itemtype="swift-v2_productlistitemrepeater"] .product-list, [id^="ComponentSliderProducts_"]:has([id="22766"])) [data-dw-itemtype="swift-v2_productcomponentselector"] > section:nth-of-type(1) * {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #555555;
  letter-spacing: 0.02em;
}

/* 2. section – produktnavn */
:is([data-dw-itemtype="swift-v2_productlistitemrepeater"] .product-list, [id^="ComponentSliderProducts_"]:has([id="22766"])) [data-dw-itemtype="swift-v2_productcomponentselector"] > section:nth-of-type(2),
:is([data-dw-itemtype="swift-v2_productlistitemrepeater"] .product-list, [id^="ComponentSliderProducts_"]:has([id="22766"])) [data-dw-itemtype="swift-v2_productcomponentselector"] > section:nth-of-type(2) * {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #1a1a1a;
}

/* 3. section – felter (fx Gross pieces) */
:is([data-dw-itemtype="swift-v2_productlistitemrepeater"] .product-list, [id^="ComponentSliderProducts_"]:has([id="22766"])) [data-dw-itemtype="swift-v2_productcomponentselector"] > section:nth-of-type(3),
:is([data-dw-itemtype="swift-v2_productlistitemrepeater"] .product-list, [id^="ComponentSliderProducts_"]:has([id="22766"])) [data-dw-itemtype="swift-v2_productcomponentselector"] > section:nth-of-type(3) * {
  font-size: 0.8125rem;
  font-weight: 400;
  color: #6b6b6b;
}


/* ==========================================================================
   Smaller quantity selector + Add to cart – product list and frontpage top 10
   ========================================================================== */

/* Add to cart-knap (rammer IKKE − / + i antalsvælgeren) */
:is([data-dw-itemtype="swift-v2_productlistitemrepeater"] .product-list, [id^="ComponentSliderProducts_"]:has([id="22766"])) [data-dw-itemtype="swift-v2_productaddtocart"] :is(button, .btn):not(:has(> input[type="number"]) > *) {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0.25rem 0.875rem !important;
  font-size: 0.8125rem !important;
  line-height: 1.2 !important;
  white-space: nowrap;
}

/* Antalsfelt uden +/- (fallback) */
:is([data-dw-itemtype="swift-v2_productlistitemrepeater"] .product-list, [id^="ComponentSliderProducts_"]:has([id="22766"])) [data-dw-itemtype="swift-v2_productaddtocart"] input[type="number"] {
  height: 36px !important;
  min-height: 36px !important;
  width: 60px !important;
  min-width: 60px !important;
  padding: 0.25rem 0.5rem !important;
  font-size: 0.875rem !important;
  line-height: 1.2 !important;
}

/* Antalsvælger med − / + : the box gets the same height as Add to cart */
:is([data-dw-itemtype="swift-v2_productlistitemrepeater"] .product-list, [id^="ComponentSliderProducts_"]:has([id="22766"])) [data-dw-itemtype="swift-v2_productaddtocart"] :has(> input[type="number"]) {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  height: 36px !important;
  min-height: 36px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Antalsvælger: the number in the middle */
:is([data-dw-itemtype="swift-v2_productlistitemrepeater"] .product-list, [id^="ComponentSliderProducts_"]:has([id="22766"])) [data-dw-itemtype="swift-v2_productaddtocart"] :has(> input[type="number"]) > input[type="number"] {
  align-self: center;
  height: 34px !important;
  min-height: 34px !important;
  width: 40px !important;
  min-width: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
}

/* Antalsvælger: − and + keep Swift's standard styling – only height and centering */
:is([data-dw-itemtype="swift-v2_productlistitemrepeater"] .product-list, [id^="ComponentSliderProducts_"]:has([id="22766"])) [data-dw-itemtype="swift-v2_productaddtocart"] :has(> input[type="number"]) > :is(button, .btn) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1 !important;
}

/* The icon inside − / + sits exactly in the middle */
:is([data-dw-itemtype="swift-v2_productlistitemrepeater"] .product-list, [id^="ComponentSliderProducts_"]:has([id="22766"])) [data-dw-itemtype="swift-v2_productaddtocart"] :has(> input[type="number"]) > :is(button, .btn) > * {
  display: block;
  margin: 0 !important;
  line-height: 1 !important;
}


/* ==========================================================================
   Product list – facets (filter box, desktop)
   ========================================================================== */

/* The box */
form.item_swift-v2_productlistfacets {
  background-color: #ffffff !important;
  border: 1px solid #d2d2d2;
  height: auto !important;
  padding-bottom: 1rem;
}

/* "FILTER" heading at the top of the box */
form.item_swift-v2_productlistfacets::before {
  content: "Filter";
  display: block;
  padding: 1rem 1.25rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #d2d2d2;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #1a1a1a;
}

/* Each facet group – no line between the groups, same distance left and right */
form.item_swift-v2_productlistfacets > .border-bottom {
  border-bottom: 0 !important;
  padding: 0.75rem 1.25rem 0;
}

/* Group heading (fx GAUGE, PACK TYPE) */
form.item_swift-v2_productlistfacets > .border-bottom > [data-bs-toggle="collapse"] {
  cursor: pointer;
}

form.item_swift-v2_productlistfacets > .border-bottom > [data-bs-toggle="collapse"] > span {
  margin: 0 0 0.625rem !important;
  opacity: 1 !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a1a1a;
}

/* Hide the collapse chevron */
form.item_swift-v2_productlistfacets .collapse-chevron-icon {
  display: none !important;
}

/* The list of options – no extra indent left or right,
   and no reserved scrollbar space (only shown when the list actually scrolls) */
form.item_swift-v2_productlistfacets [data-swift-facet-container] > div {
  padding-left: 0 !important;
  padding-right: 0 !important;
  scrollbar-gutter: auto !important;
}

/* Each option (checkbox + text + count) */
form.item_swift-v2_productlistfacets label.form-check {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 0;
  margin: 0 0 0.375rem !important;
  padding-left: 0;
  padding-right: 0;
  cursor: pointer;
}

/* Checkbox – small, square, light grey */
form.item_swift-v2_productlistfacets .form-check-input {
  float: none;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin: 0 !important;
  border: 1px solid #c4c4c4;
  border-radius: 0;
  box-shadow: none;
}

/* Option text – takes the full width, so the count can be right-aligned */
form.item_swift-v2_productlistfacets .form-check-label {
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.35;
  color: #1a1a1a;
}

/* Count (antal produkter) – right-aligned, grey */
form.item_swift-v2_productlistfacets .form-check-label > :last-child {
  margin-left: auto !important;
  margin-right: 0 !important;
  padding-left: 0.5rem;
  padding-right: 0 !important;
  font-size: 0.8125rem !important;
  line-height: 1.35;
  color: #8a8a8a !important;
  opacity: 1 !important;
  vertical-align: baseline;
  position: static;
}


/* Mobile: a little less padding */
@media (max-width: 575.98px) {
  [data-dw-itemtype="swift-v2_productlistcomponentselector"] > section[data-swift-gridrow="4ColumnsFlex"]:first-of-type {
    padding: 0.625rem 1rem !important;
  }

  [data-dw-itemtype="swift-v2_productlistitemrepeater"] .product-list article.product,
  [id^="ComponentSliderProducts_"]:has([id="22766"]) > .grid > div {
    padding: 0.75rem 1rem;
  }
}