/** Shopify CDN: Minification failed

Line 135:2 Unexpected "/"

**/
/* Sofia Pro Soft Font Family */
@font-face {
  font-family: 'SofiaProSoft';
  src: url('SofiaProSoftLight.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SofiaProSoft';
  src: url('SofiaProSoftLight-Italic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SofiaProSoft';
  src: url('SofiaProSoftRegular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SofiaProSoft';
  src: url('SofiaProSoftRegular-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SofiaProSoft';
  src: url('SofiaProSoftMedium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SofiaProSoft';
  src: url('SofiaProSoftMedium-Italic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SofiaProSoft';
  src: url('SofiaProSoftBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SofiaProSoft';
  src: url('SofiaProSoftBold-Italic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Quinn Display Font Family */
@font-face {
  font-family: 'QuinnDisplay';
  src: url('QuinnDisplay.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'QuinnDisplay';
  src: url('QuinnDisplay-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'QuinnDisplay';
  src: url('QuinnDisplay-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'QuinnDisplay';
  src: url('QuinnDisplay-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'QuinnDisplay';
  src: url('QuinnDisplay-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'QuinnDisplay';
  src: url('QuinnDisplay-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'QuinnDisplay';
  src: url('QuinnDisplay-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'QuinnDisplay';
  src: url('QuinnDisplay-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
 */
body {
  font-family: var(--font-base);
}

h1, h2, h3, h4, h5, h6,
.heading {
  font-family: var(--font-headline);
}

.navigation,
.nav-item {
  font-family: var(--font-navigation);
}

.price,
.product-price {
  font-family: var(--font-price);
}

.button,
.btn {
  font-family: var(--font-button);
}

/* Custom Font Classes - For direct usage if needed */
.custom-body-font {
  font-family: var(--font-base) !important;
}

.custom-headings-font {
  font-family: var(--font-headline) !important;
}

.wt-page-nav-mega__link__text--underline {
  font-weight: 500;
}

body:not(.mobile-nav) .wt-page-nav-mega__list--center ul {
  justify-content: left;
}

.wt-header__search__button {
  background-color: unset;
  color: var(--color-header-text);
}

.wt-header__search__button svg {
  color: var(--color-header-text);
}

.search-overlay-on .search-result-top__list .card__container .card__picture-container {
  aspect-ratio: 1;
}

custom-select [custom-select-body] {
  background-color: var(--color-background);
  color: var(--color-text);
}

.hero--out-pic-landscape .hero__pic,
.hero--out-pic-landscape .hero__pic img {
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.hero--out-pic-3-2 .hero__pic,
.hero--out-pic-3-2 .hero__pic img {
  aspect-ratio: 3/2;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.hero--out-pic-landscape,
.hero--out-pic-landscape img,
.hero--out-pic-3-2,
.hero--out-pic-3-2 img {
  width: auto;
  height: auto;
  object-fit: initial;
}

/* color stock status text pdp */
p#Inventory-template--24819273072967__main {
  color: rgb(62, 214, 96);
}

/* hide tax info pdp price */
.product__tax.caption.rte {
  display: none;
}

/* Letter spacing titles */
h1,
h2,
h3,
h4,
h5,
h6,
.headline__title,
.wt-page__title,
.wt-product__name,
.wt-collapse__trigger__title,
.card__title,
.wt-blog-item__title,
.article__title,
.cms-page__title,
.account-form__title,
.main-article__title,
.page-title,
.wt-featured-icon__title,
.wt-product__text {
  letter-spacing: -0.04em !important;
  text-wrap: balance;
}

.wt-collapse.custom_liquid_block .wt-collapse__trigger--active + .wt-collapse__target:hover,
.wt-collapse.custom_liquid_block .wt-collapse__trigger--active + .wt-collapse__target:hover .wt-collapse__target--text {
  overflow: visible;
}

/* hide cart wishlist button */
cart-drawer-items.wt-cart__drawer__items
  .swym-wishlist-collections-v2-container {
  display: none;
}

/* contactpage */

@media only screen and (max-width: 1000px) {
  section#shopify-section-template--24917509013831__multicolumn_x8PApm
    .wt-multicol__wrapper {
    padding-left: 36px;
    padding-right: 36px;
  }
}
@media only screen and (max-width: 600px) {
  section#shopify-section-template--24917509013831__multicolumn_x8PApm
    .wt-multicol__wrapper {
    padding-left: 0px;
    padding-right: 0px;
  }
}

section#shopify-section-template--24917509013831__multicolumn_x8PApm
  .hero__overlay.hero__overlay--left.hero__overlay--.hero__overlay--mobile--.hero__overlay--mobile-- {
  padding: 0;
}

section#shopify-section-template--24917509013831__multicolumn_x8PApm
  .hero__overlay__content.hero__overlay__content--left.hero__overlay__content--mobile--.rte {
  background: white;
  padding: 24px;
}

section#shopify-section-template--24917509013831__multicolumn_x8PApm
  .hero__overlay__content.hero__overlay__content--left.hero__overlay__content--mobile--.rte {
  min-height: 320px;
}

section#shopify-section-template--24917509013831__multicolumn_x8PApm
  .hero__overlay__content.hero__overlay__content--left.hero__overlay__content--mobile--.rte {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

section#shopify-section-template--24917509013831__multicolumn_x8PApm
  .hero__button--gap {
  margin-top: auto;
}

/* change width */

@media only screen and (min-width: 1000px) {
  /*.hero__overlay {
    max-width: 1900px !important;
    margin-left: auto;
    margin-right: auto;
  }*/

  /*.hero__overlay.hero__overlay--left.hero__overlay--center.hero__overlay--mobile--center.hero__overlay--mobile-- {
    padding-left: 0;
  }*/

  .hero__overlay {
    padding: 32px;
  }

  slideshow-section.wt-slider.wt-slider--full {
    margin-left: 10px;
    padding-left: 32px !important;
  }
}

@media only screen and (max-width: 600px) {
  .hero__overlay {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hero__overlay.hero__overlay--left.hero__overlay--center.hero__overlay--mobile--left.hero__overlay--mobile-- {
    padding-left: 0;
    padding-right: 0;
  }

  section#shopify-section-template--24917509800263__multicolumn_9cWEFH
    .hero__overlay--mobile-- {
    padding: 0 !important;
  }
  .wt-collapse__wrapper.wt-collapse-menu.wt-collapse__wrapper--compact.rte {
    padding: 0 !important;
  }
  #shopify-section-template--24917565735239__featured_content_RAiqD8
    .featured-content__block {
    padding: 10px;
    background-color: white;
    min-height: 200px;
    padding: 12px 24px;
  }
}
@media only screen and (min-width: 600px) {
  #shopify-section-template--24917565735239__featured_content_RAiqD8
    .featured-content__heading {
    font-size: 36px;
    line-height: 1 !important;
    margin: 0 !important;
  }

  #shopify-section-template--24917565735239__featured_content_RAiqD8
    .featured-content__block {
    padding: 24px !important;
  }
}

/* div#swym-atw-button-container {
  display: none !important;
}

button.swym-button.custom-wishlist-btn.swym-iconbtnlink.swym-heart.swym-loaded {
  color: black;
  background: none;
  border: 1px solid #eaeaea;
  display: flex;
  width: 100% !important;
  height: 52.4px;
  margin-bottom: 20px;
} */

.hero__button {
  line-height: 1;
}

/*span.price-item.price-item--regular.wt-product__price__final.wt-product__price__final {
  font-family: var(--font-headline) !important;
}*/

.wt-product__upsell__description {
  color: var(--Dark, #212121);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  margin-bottom: 5px;
}

.wt-product__upsell__product .card__title {
  font-size: 20px !important;
  margin-bottom: 3px;
}

.card__heading {
  font-family: 'SofiaProSoft', var(--font-base) !important;
}

/* Mobile font sizes for product cards */
@media (max-width: 768px) {
  .card__title,
  .card__heading,
  .card__price,
  .card__price .price,
  .card__price .price-item,
  .card__price .price-item--regular,
  .card__price .price-item--sale,
  .wt-dot__title {
    font-size: 16px !important;
  }
  
  .card__subtitle {
    font-size: 12px !important;
  }
  
  .card__title,
  .card__heading,
  .card h3.card__title {
    margin-right: 5px;
    line-height: 1.4em !important;
  }
}

span.wt-filter__trigger__counter {
  margin-left: -10px;
  margin-top: -12px;
  min-width: 15px;
  height: 15px !important;
  font-size: 10px !important;
}

.wt-product__upsell__product
  span.price-item.price-item--regular.wt-product__price__final.wt-product__price__final {
  font-family: "DM Sans" !important;
}

.jdgm-rev-widg__reviews {
  display: flex;
  gap: 24px;
}

.jdgm-rev.jdgm-divider-top.jdgm--done-setup {
  flex: 0 0 calc(50% - 12px); /* Each item takes up 50% of width minus half the gap */
  background: white;
  padding: 24px;
}

.jdgm-rev-widg {
  padding: 0 !important;
}

.jdgm-rev-widg__header {
  background: white !important;
  padding: 24px;
}

div#shopify-block-AK1lZMTJZVVZIdUpBT__judge_me_reviews_review_widget_LzpA83 {
  padding-bottom: 80px;
  padding-top: 40px;
}

.jdgm-preview-badge .jdgm-star {
  color: #ffbf00 !important;
  font-size: 14px !important;
}

span.jdgm-prev-badge__text {
  font-size: 12px;
}

.jdgm-star.jdgm--on:before {
  color: #ffbf00 !important;
}

.hero__overlay__content.hero__overlay__content--left.hero__overlay__content--mobile--left.rte {
  max-width: 700px !important;
}

.dealer-loc.wt-product__add-to-cart_form--wrapper a {
  background: var(--color-button-primary-background);
  color: var(--color-button-primary-text);
  border-color: transparent;
  flex-grow: 2;
  width: 100% !important;
  display: flex;
  animation: lice;
  align-items: center;
  justify-content: center;
  padding: 12px;
  margin-bottom: 10px;
  margin-top: 10px;
}

.dealer-loc.wt-product__add-to-cart_form--wrapper {
  width: 100% !important;
}

div#CartDrawer {
  z-index: 10000000 !important;
}

div#product-grid img.card__img {
  background: white;
}

/* Add white background to product recommendations slider images */
.wt-featured-collection--recommendation img.card__img,
.wt-featured-collection--recommendation .card__picture img {
  background: white;
}

/* Product card image padding */
/* Desktop and tablet - 30px padding */
@media (min-width: 769px) {
  .card__img:not(.card__badges--image),
  .card__picture img:not(.card__badges--image),
  .card__picture-container img:not(.card__badges--image),
  div#product-grid img.card__img:not(.card__badges--image) {
    padding: 30px;
  }
}

/* Mobile - 10px padding */
@media (max-width: 768px) {
  .card__img:not(.card__badges--image),
  .card__picture img:not(.card__badges--image),
  .card__picture-container img:not(.card__badges--image),
  div#product-grid img.card__img:not(.card__badges--image) {
    padding: 10px;
  }
}

/* Cart images - add 5px padding and white background */
.wt-cart__item__thumb img,
.wt-cart__item__thumb .card__img,
.cart-item img,
.cart-notification-product__image img {
  padding: 5px !important;
  background: white;
}

aside.collection__aside.collection__filter.wt-filter::-webkit-scrollbar {
  width: 2px !important;
  border-radius: 0 !important;
}

aside.collection__aside.collection__filter.wt-filter {
  padding-right: 30px;
}

.filter__header div {
  font-family: "SofiaProSoft" !important;
  font-weight: 500;
  font-size: 16px !important;
}

.filter__header div,
.filter__header.wt-collapse__trigger {
  font-family: SofiaProSoft !important;
  font-weight: 500;
  font-size: 16px !important;
}
collection-section.collection.collection--with-aside {
  padding-top: 30px;
}

form#FacetFiltersForm {
  margin-top: -20px;
}

collection-section.collection.collection--with-aside
  section#ProductGridContainer {
  margin-top: -20px;
}

.wt-collapse__wrapper.wt-collapse-menu.wt-collapse__wrapper--compact.rte {
  padding: 0 !important;
}

.fabric-sample-modal-header h3 {
  font-size: 32px !important;
}

.fabric-sample-modal-body * {
  font-family: "SofiaProSoft" !important;
  font-weight: 500 !important;
}

button.needsclick.go300628013.kl-private-reset-css-Xuajs1 {
  background: black !important;
  border-radius: 0 !important;
  width: 150px;
  margin-top: 20px !important;
}

.fabric-sample-modal-body input::placeholder {
  font-family: "SofiaProSoft" !important;
  font-weight: 500 !important;
}

/* img.wt-product__img.wt-product__img--zoom-cursor {
  max-width: 50vw !important;
} */

.stofstaal .wt-product__upsell__content {
  padding: 20px 0px;
  border-top: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
}

.stofstaal .wt-product__upsell__content .wt-product__upsell__image {
  margin: auto;
  width: 100%;
  height: 100%;
  max-width: 100px;
  max-height: 100px;
  object-fit: cover;
  aspect-ratio: var(--aspect-ratio, auto);
}

.stofstaal .wt-product__upsell__info {
  width: 80%;
  min-width: 100px;
}

.stofstaal .wt-product__upsell__product .card__title {
  margin-top: 0;
}

.breadcrumbs * {
  font-size: 14px;
}

/* section#shopify-section-template--25018806272327__breadcrumbs {
  margin-top: 20px;
} */

header.sticky-enabled {
  border-bottom: 1px solid #dedede;
}

.template-product .rte p {
  margin-block: .5em;
}

.wt-product__text-block {
  padding-top: 0;
  padding-bottom: 0;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  font-size: 12px;
  min-width: 240px;
  visibility: hidden;
  background-color: black;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  position: absolute;
  bottom: 1.5rem;
  z-index: 1;
  margin-left: -150px;
  opacity: 0;
  transition: opacity 0.3s;
  padding: 8px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.product-name {
  padding: 2px;
  margin-bottom: 5px;
  display: block;
  text-align: center;
}

.tooltip-table {
  width: 100%;
  border-collapse: collapse;
}

.tooltip-table th {
  text-align: left;
  color: white;
}

.wt-footer__aside__wrapper {
  justify-content: space-between;
  width: 100%;
}

.card__color-swatches {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/*@media (min-width: 1200px) {
  .wt-header__body--search .wt-header__search {
    width: 45rem;
    min-width: 45rem;
  }
}*/


div.collection__grid__item {
  position: relative;
}

.wt-product__payments-badge__icons__list {
  display: flex;
  gap: 1rem;
  overflow-y: scroll;
}



/* ------------- OLD CONTENT FROM MAIN --------------------  */

.wt-footer-meta {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: var(--site-max-width-big);
  padding: 1rem;
  margin-left: auto;
  margin-right: auto;
}

.policy-menu {
  display: flex;
  gap: 1rem;
  font-size: var(--font-breadcrumbs-size);
}

.wt-header__language-flag {
  display: inline-flex;
  overflow: hidden;
  border-radius: 3px;
}

.disclosure__list-wrapper li a {
  display: flex;
  align-items: center;
  padding: 0.75em 1em;
  width: 100%;
}

.disclosure__list-wrapper .disclosure__item .wt-header__language-flag {
  margin-right: .8rem;
}

/* Add any zoom-in related styles here */
@media (prefers-reduced-motion: no-preference) {
  .animate--ambient > img,
  .animate--ambient > svg {
    animation: animateAmbient 30s linear infinite;
  }
  @keyframes animateAmbient {
    0% {
      transform: rotate(0deg) translateX(1em) rotate(0deg) scale(1.2);
    }
    100% {
      transform: rotate(360deg) translateX(1em) rotate(-360deg) scale(1.2);
    }
  }
}

/* Color swatches from related_kleuren metafield */
.card__color-swatches {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.card__color-swatch {
  cursor: pointer;
  border: 1px solid #e0e0e0;
  transition: all 0.2s ease;
  overflow: hidden;
}

.card__color-swatch:hover {
  transform: scale(1.1);
  border-color: #333;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card__color-swatch img {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: cover;
}

.headline--left {
  text-align: left;
}

.headline--right {
  text-align: right;
}

.hero__richtext p {
  margin-top: 0;
  margin-bottom: 0;
  font-size: inherit;
}

.hero__text p {
  margin: 0;
  padding: 0;
}

@media (min-width: 1200px) {
  .hero__text {
    margin-top: 4px;
    margin-bottom: 4px;
  }
}

.wt-keys__image-container {
  width: 100%;
  max-width: 5rem;
  max-height: 5rem;
  margin-inline-end: calc(var(--gap, 8px) * 2);
  margin-inline-start: calc(var(--gap, 8px) * 1);
}

@media (min-width: 600px) {
  .wt-keys__image-container {
    max-width: 7rem;
    max-height: 7rem;
  }
}

.wt-keys__icon {
  width: 5rem;
  height: 5rem;
}

.wt-cart--empty .wt-cart__drawer__items {
  height: 100%;
  display: flex;
}

.wt-cart--empty .wt-cart__drawer__form {
  width: 100%;
}

.wt-cart--empty .wt-cart__drawer__content {
  height: 100%;
  display: flex;
}

.wt-cart--empty .wt-cart__drawer__content .wt-cart__title {
  flex-grow: initial;
  margin: initial;
  margin-bottom: calc(var(--gap, 8px) * 2);
}

.wt-cart__cross-sell {
  width: 100%;
  background-color: var(--color-foreground);
  padding: calc(var(--gap, 8px) * 2) 0;
}

.wt-cart__cross-sell__heading {
  font-size: var(--font-base-size);
  font-family: var(--font-base);
  font-style: var(--font-base-style);
  font-weight: var(--font-base-weight);
  text-transform: var(--font-base-transform, none);
  letter-spacing: var(--font-base-letter-spacing, normal);
  line-height: var(--font-base-line-height, normal);
  margin: 0 0 calc(var(--gap, 8px) * 2) calc(var(--gap, 8px) * 2);
}

[dir=rtl] .wt-cart__cross-sell__heading {
  margin: 0 calc(var(--gap, 8px) * 2) calc(var(--gap, 8px) * 2) 0;
}

.wt-cart__cross-sell__products {
  display: flex;
  gap: calc(var(--gap, 8px) * 2);
  overflow-x: auto;
  padding: 0 calc(var(--gap, 8px) * 2);
}

.cart-item__error-text + svg {
  width: 2.2rem;
  margin-right: 0.7rem;
}

.cart-item__error-text + svg path {
  fill: var(--color-sale-price);
}

.wt-free-shipping-bar__text {
  font-size: 14px;
  margin-bottom: calc(var(--gap, 8px) * 1);
  color: #333;
}

.wt-progress-bar {
  width: 100%;
  background-color: var(--swiper-scrollbar-track-color);
  border-radius: min(2px, var(--border-radius));
  overflow: hidden;
  height: 4px;
  margin-bottom: calc(var(--gap, 8px) * 1);
}

.wt-progress-bar__fill {
  width: 0%; /* Domyślna wartość, będzie aktualizowana */
  height: 100%;
  background-color: var(--swiper-theme-color);
  transition: width 0.5s ease-in-out;
}

.social-links__item {
  display: flex;
  padding: .5rem;
  border-radius: 100%;
  color: var(--color-footer-background);
  background-color: var(--color-footer-text);
}

.wt-collapse__wrapper {
  width: 100%;
  max-width: var(--site-max-width);
  padding-left: calc(var(--gap, 8px) * 2);
  padding-right: calc(var(--gap, 8px) * 2);
}

/* Removed conflicting collapse target styles to allow main.css grid-based approach for PDP tabs */

.wt-select__item--current {
  background-color: var(--color-text-highlight);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wt-product__option__body--drawer .drawer__list-nav__close {
  border: none;
  background: none;
  padding: calc(var(--gap, 8px) * 1);
  cursor: pointer;
  height: auto;
  display: flex;
  background-color: transparent;
  color: var(--color-links);
}

.wt-product__option__body--drawer .drawer__list-nav__close:hover {
  color: var(--color-links-active);
}

.wt-product__option__body--drawer .drawer__list__item label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  font-family: var(--font-base);
  padding: calc(var(--gap, 8px) * 1.5) calc(var(--gap, 8px) * 2);
  border-radius: var(--border-radius-button);
  color: var(--color-button-secondary-text);
}

.wt-product__option__body--drawer .drawer__list__item input:checked + label {
  background-color: var(--color-text-highlight);
  padding: calc(var(--gap, 8px) * 2);
  padding-right: calc(var(--gap, 8px) * 3);
  cursor: pointer;
}

.wt-product__option__body--drawer .drawer__list__item input:checked + label::after {
  content: "";
  position: absolute;
  right: calc(var(--gap, 8px) * 1);
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid var(--color-links);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

.wt-product__option__body--thumbs label img {
  border-radius: max(0px, var(--custom-border-radius, var(--border-radius-button)) - (var(--gap, 8px) * 0.5));
  width: auto;
  height: auto;
}

.wt-product__add-to-cart_form .product-form__error-message-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: start;
  gap: 16px;
  margin-bottom: 16px;
}

.wt-product__feature-icons__list--row-2 {
  grid-template-columns: repeat(2, 1fr);
}

.wt-product__feature-icons__list--row-3 {
  grid-template-columns: repeat(3, 1fr);
}

.wt-product__feature-icons__list--row-4 {
  grid-template-columns: repeat(4, 1fr);
}

.complementary-products__container .summary__title--h3 {
  margin-top: 8px;
  margin-bottom: 0;
  font-family: var(--font-headline);
  font-weight: var(--font-headline-weight);
  font-style: var(--font-headline-style);
  letter-spacing: var(--font-headline-letter-spacing);
  text-transform: var(--font-headline-transform, initial);
  line-height: 1.2;
}

pickup-availability-drawer .pickup-availability-list .pickup-availability-list__item .pickup-availability-list__item__button {
  width: 4rem;
  height: 4rem;
  border: 0;
  padding: calc(var(--gap, 8px) * 1);
  position: absolute;
  top: calc(var(--gap, 8px) * 2);
  right: calc(var(--gap, 8px) * 2);
  cursor: pointer;
}

@media only screen and (max-width: 1000px) {
  .wt-image-banner .hero__overlay__content {
  padding: 0px 0px;
  border-radius: var(--border-radius);
}
}

.newsletter-with-image .newsletter__wrapper {
  background-color: transparent;
  /*background-color: rgba(var(--color-background-rgb), var(--color-background-opacity, 1));*/
  backdrop-filter: blur(var(--color-background-blur, 0));
  padding: calc(var(--gap, 8px) * 2.5);
  margin: 0 calc(var(--gap, 8px) * 2);
  border-radius: var(--border-radius);
}

@media (min-width: 1200px) {
  .wt-benefits-product__icon-item-text {
    display: block;
    text-align: center;
  }
}

/* Custom dropdown styling - fix arrow hover issue */
.wt-product__option__dropdown {
  text-decoration: none !important;
  background: white;
  border: 1px solid #ddd;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.wt-product__option__dropdown:hover {
  background: white;
  border-color: #999;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.wt-product__option__dropdown:focus {
  background: white;
  border-color: #999;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  outline: none;
}

.wt-product__option__dropdown svg {
  opacity: 1 !important;
  color: #000 !important;
  fill: #000 !important;
}

.wt-product__option__dropdown:hover svg,
.wt-product__option__dropdown:focus svg {
  opacity: 1 !important;
  color: #000 !important;
  fill: #000 !important;
}

/* Custom wishlist button styling */
.custom-wishlist-btn {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid #ddd !important;
  padding: 12px 16px !important;
  background-color: white;
  font-size: 16px !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  transition: border-color 0.2s !important;
  width: 100% !important;
  margin-bottom: 20px;
  height: 56px;
  background: none !important;
}

/* Make add-to-cart button full width when PDP quantity selector is hidden */
.wt-product__add-to-cart_form--wrapper.no-qty {
  width: 100%;
}
.wt-product__add-to-cart_form--wrapper.no-qty .js-add-to-cart {
  flex: 1 1 100%;
  width: 100%;
}

/* Ensure the form expands to full width when there is no quantity selector */
/* also force full width on large screens when no qty */
@media (min-width: 1400px) {
  .wt-product__add-to-cart_form.no-qty form {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Make the product-form stretch inside the flex container when no qty */
.main-product__buy-buttons--container product-form.wt-product__add-to-cart:has(.wt-product__add-to-cart_form--wrapper.no-qty),
.main-product__buy-buttons--container product-form.wt-product__add-to-cart.no-qty {
  flex: 1 1 100%;
  width: 100%;
}

/* Always expand form to full width when qty is hidden */
.wt-product__add-to-cart_form.no-qty form {
  width: 100% !important;
}

.custom-wishlist-btn:hover {
  border-color: #999 !important;
  color: inherit !important;
}

.custom-wishlist-btn:hover span,
.custom-wishlist-btn:hover .wishlist-text {
  color: inherit !important;
}

.custom-wishlist-btn svg {
  transition: fill 0.2s ease !important;
}

.custom-wishlist-btn:hover svg {
  fill: #e74c3c !important;
}

/* Variant dropdown trigger arrow styling */
button#rvd-trigger path {
  stroke: black !important;
}

/* Material dropdown trigger arrow styling */
button#rmd-trigger path {
  stroke: black !important;
}

/* Colors dropdown trigger arrow styling */
button#rvd-colors-trigger path {
  stroke: black !important;
}

/* Hide stofstaal upsell on mobile at its original position */
@media (max-width: 899px) {
  .stofstaal:not(.stofstaal-mobile .stofstaal) {
    display: none !important;
  }

  /* Show mobile stofstaal section on mobile */
  .stofstaal-mobile {
    display: block !important;
  }

  /* Ensure stofstaal inside mobile version is visible */
  .stofstaal-mobile .stofstaal {
    display: block !important;
  }

  /* Mobile stofstaal styling */
  .fabric-sample-modal-body {
    padding: 0;
  }

  .wt-product__upsell__product .card__title {
    font-size: 18px !important;
    margin-bottom: 3px;
  }

  .stofstaal .wt-product__upsell__info {
    width: 100% !important;
  }

  .stofstaal .wt-product__upsell__content .wt-product__upsell__image {
    margin: auto;
    width: 100%;
    height: 100%;
    max-width: 60px;
    max-height: 60px;
    object-fit: cover;
    aspect-ratio: var(--aspect-ratio, auto);
  }

  .stofstaal .wt-product__upsell__content {
    gap: 20px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }

  /* Remove margin from photoswipe slider on mobile */
  .photoswipe.swiper.wt-slider__container.undefined.swiper-initialized.swiper-horizontal.swiper-autoheight.swiper-android {
    margin: 0;
  }

  /* Make images in photoswipe slider fill 100% width on mobile */
  .photoswipe.swiper.wt-slider__container img,
  .photoswipe img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
  }

  /* Mobile date input improvements for gift cards */
  .recipient-fields__field .field.date {
    max-width: 100% !important;
    width: 100% !important;
  }

  .recipient-fields__field .field.date input {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    border: 2px solid var(--color-input-border) !important;
    background-color: #fff !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
  }

  .recipient-fields__field .field.date input:focus {
    border-color: #007bff !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1) !important;
  }

  .recipient-fields__field .field.date input::-webkit-calendar-picker-indicator {
    background-size: 20px 20px !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 8px !important;
    cursor: pointer !important;
  }

  .recipient-fields__field .field.date label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333 !important;
    margin-bottom: 8px !important;
    display: block !important;
    position: static !important;
    background: none !important;
    scale: 1 !important;
    padding: 0 !important;
  }
}

/* Additional mobile date input improvements for smaller screens */
@media (max-width: 480px) {
  .recipient-fields__field .field.date input {
    min-height: 52px !important;
    font-size: 18px !important;
    padding: 14px 18px !important;
  }

  .recipient-fields__field .field.date input::-webkit-calendar-picker-indicator {
    background-size: 24px 24px !important;
    width: 24px !important;
    height: 24px !important;
  }

  .recipient-fields__field .field.date label {
    font-size: 16px !important;
    margin-bottom: 10px !important;
  }
}

/* Desktop - hide mobile stofstaal section */
@media (min-width: 900px) {
  .stofstaal-mobile {
    display: none !important;
  }
}

/* Fabric Sample Modal Styles */
.fabric-sample-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
}

.fabric-sample-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fabric-sample-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.fabric-sample-modal-container {
  position: relative;
  background: white;
  border-radius: 8px;
  max-width: 90vw;
  max-height: 90vh;
  width: 500px;
  z-index: 2;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.fabric-sample-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  border-bottom: 1px solid #eee;
}

.fabric-sample-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  color: #666;
  line-height: 1;
}

.fabric-sample-modal-close:hover {
  color: #000;
}

.fabric-sample-modal-body {
  padding: 20px 30px;
  max-height: 60vh;
  overflow-y: auto;
}

/* Prevent body scroll when modal is open */
body.modal-open {
  overflow: hidden;
}

/* Shop per categorie swiper pagination bullets */
section#shopify-section-template--25018806731079__collection_list_fCybzt .swiper-pagination.wt-slider__pagination.swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: -24px !important;
}

section#shopify-section-template--25018806731079__collection_list_fCybzt slideshow-section.wt-slider {
  padding-bottom: 20px !Important;
}

/* Remove padding under images in section-content.wt-slider--wrapper */
.section-content.wt-slider--wrapper img {
  padding: 0 !important;
}

.jdgm-form__reviewer-name-format-container {
  display: none;
}

.wt-image-banner.hero__wrapper--full {
  padding-top: 0;
}

/* Wishlist icon positioning next to product title */
.wt-product__title-wishlist-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.product-card__wishlist--title {
  flex-shrink: 0;
  margin-top: 15px;
  overflow: visible;
}

.product-card__wishlist--title .wkh-button {
  width: 28px !important;
  height: 28px !important;
  min-height: auto !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  cursor: pointer;
  transition: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.product-card__wishlist--title .wkh-button:focus {
  outline: none !important;
  border: none !important;
}

.product-card__wishlist--title .wkh-button:hover .wkh-icon svg path {
  fill: none !important;
  stroke: #999 !important;
}

.product-card__wishlist--title .wkh-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.product-card__wishlist--title .wkh-icon svg {
  width: 22px !important;
  height: 22px !important;
  display: block;
  overflow: visible;
}

/* Outlined style when not selected */
.product-card__wishlist--title .wkh-icon svg path {
  fill: none !important;
  stroke: #000 !important;
  stroke-width: 2 !important;
  transition: stroke 0.3s ease, fill 0.3s ease;
}

/* Filled style when selected/active */
.product-card__wishlist--title .wkh-button.wk-selected .wkh-icon svg path {
  fill: #000 !important;
  stroke: #000 !important;
}

/* Hover state for filled icon */
.product-card__wishlist--title .wkh-button.wk-selected:hover .wkh-icon svg path {
  fill: #999 !important;
  stroke: #999 !important;
}

@media (max-width: 600px) {
  .wt-product__add-to-cart_form .js-add-to-cart {
    font-size: 12px;
    padding: 10px;
    height: 44px !important;
  }
  
  .wt-product__name {
      font-size: 30px;
  }
  .wt-product__price__final, .wt-product__price__compare {
      font-size: 2.5rem;
  }
  .wt-product__price {
    margin-top: 1rem;
  }
  .wt-collapse__target__content > table {
    font-size: 14px;
}  

  .product-card__wishlist--title {
    margin-top: 10px;
  }

  .product-card__wishlist--title .wkh-button {
    width: 28px !important;
    height: 28px !important;
    min-height: auto !important;
  }

  .product-card__wishlist--title .wkh-icon {
    width: 22px;
    height: 22px;
  }
  
  .product-card__wishlist--title .wkh-icon svg {
    width: 22px !important;
    height: 22px !important;
    overflow: visible;
  }

}

.wt-header__search__results .card__picture {
  aspect-ratio: 1;
  overflow: hidden;
  background-color: #fff; 
}

.wt-header__search__results .card__color-swatches {
  display: none;
}

.wt-collapse__target__content > table {
  table-layout: fixed;
}  

.wt-collapse__target__content > .tooltip-table {
  font-size: 12px;
}  

/* --- Mobile nav sliding panels --- */
@media (max-width: 1199px) {
  /* Remove any arrow/chevron from the mobile panel title */
  mega-menu-section .mobile-nav-panel__title svg,
  mega-menu-section .mobile-nav-panel__title .svg-icon,
  mega-menu-section .mobile-nav-panel__title [class*="icon"],
  mega-menu-section .mobile-nav-panel__title::before,
  mega-menu-section .mobile-nav-panel__title::after {
    display: none !important;
    content: none !important;
    background: none !important;
  }
  /* Increase top padding for level 2 Producten links */
  a.producten-dropdown__link.producten-dropdown__link--level2 {
    padding-top: 15px !important;
  }
  mega-menu-section .mobile-nav-panels {
    position: relative;
    width: 100%;
    height: auto; /* allow content to define height */
    overflow: hidden;
    background: var(--color-background);
  }

  mega-menu-section .mobile-nav-panels__track {
    display: flex;
    width: 100%;
    height: auto; /* match content height */
    transition: transform 0.3s cubic-bezier(0.12, 0.67, 0.53, 1);
    will-change: transform;
  }

  mega-menu-section .mobile-nav-panel {
    flex: 0 0 100%;
    max-width: 100%;
    height: auto; /* grow with content */
    display: flex;
    flex-direction: column;
    background: var(--color-background);
  }

  /* Header for nested panels */
  mega-menu-section .mobile-nav-panel__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: calc(var(--gap, 8px) * 2) calc(var(--gap, 8px) * 4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-background);
  }

  mega-menu-section .mobile-nav-panel__back {
    width: 36px;
    height: 36px;
    padding: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-button);
    background: transparent;
    color: var(--color-text);
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
  }

  mega-menu-section .mobile-nav-panel__title {
    font-family: var(--font-headline);
    font-style: var(--font-headline-style);
    font-weight: var(--font-headline-weight);
    text-transform: var(--font-headline-transform, none);
    font-size: 24px;
    letter-spacing: var(--font-headline-letter-spacing, normal);
    line-height: var(--font-headline-line-height, normal);
    margin: 0;
  }

  mega-menu-section .mobile-nav-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }

  /* Keep exact styling of main menu content inside panels */
  mega-menu-section .mobile-nav-panel__body .wt-page-nav-mega,
  mega-menu-section .mobile-nav-panel__body .producten-dropdown__menu,
  mega-menu-section .mobile-nav-panel__body .wt-page-nav-mega__sublist,
  mega-menu-section .mobile-nav-panel__body .producten-dropdown__submenu {
    background: inherit;
  }

  /* Force visibility for containers normally hidden by hover/accordion logic */
  mega-menu-section .mobile-nav-panel__body .producten-dropdown__menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  mega-menu-section .mobile-nav-panel__body .wt-page-nav-mega__sublist__wrapper {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Only force visibility of the ROOT container cloned into the panel */
  mega-menu-section .mobile-nav-panel__body > .producten-dropdown__menu,
  mega-menu-section .mobile-nav-panel__body > .producten-dropdown__submenu,
  mega-menu-section .mobile-nav-panel__body > .wt-page-nav-mega__sublist {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Topbar Filter Button - next to product count in subheader */
.collection__filter-trigger.collection__filter-trigger--topbar {
  display: inline-flex !important;
  align-items: center;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 8px;
  padding: 10px 16px;
  background: var(--color-button-secondary-background, #f5f5f5);
  color: var(--color-button-secondary-text, #000);
  border: 1px solid var(--color-button-secondary-border, #e0e0e0);
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--font-base-size);
  font-family: var(--font-base);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  margin-right: 16px;
  white-space: nowrap;
  position: relative;
}

.collection__filter-trigger.collection__filter-trigger--topbar:hover {
  background: #000;
  border: 1px solid #000;
  color: #fff;
}

.collection__filter-trigger.collection__filter-trigger--topbar:hover .svg-icon,
.collection__filter-trigger.collection__filter-trigger--topbar:hover svg {
  color: #fff;
  fill: #fff;
}

.collection__filter-trigger.collection__filter-trigger--topbar .svg-icon,
.collection__filter-trigger.collection__filter-trigger--topbar svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-block;
}

.collection__filter-trigger.collection__filter-trigger--topbar > span {
  display: inline;
  white-space: nowrap;
}

.collection__filter-trigger.collection__filter-trigger--topbar .wt-filter__trigger__counter {
  margin-left: 4px;
}

/* Remove the divider on topbar button */
.collection__filter-trigger.collection__filter-trigger--topbar::after {
  display: none !important;
}

/* Remove ::before pseudo element */
.collection__filter-trigger.collection__filter-trigger--topbar::before {
  display: none !important;
}

/* Override main.css rule that hides non-drawer triggers on desktop */
@media (min-width: 1200px) {
  .collection__filter-trigger.collection__filter-trigger--topbar.wt-filter__trigger {
    display: inline-flex !important;
  }
}

/* Ensure subheader displays items in a row */
.collection__subheader {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap;
}

/* Floating Filter Button */
.collection__filter-trigger.wt-filter__trigger--drawer {
  position: fixed !important;
  bottom: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 999 !important;
  background: black !important;
  color: white !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 15px 25px 15px 20px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
}

.collection__filter-trigger.wt-filter__trigger--drawer:hover {
  background: #333 !important;
  color: white !important;
  transform: translateX(-50%) scale(1.05) !important;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4) !important;
}

.collection__filter-trigger.wt-filter__trigger--drawer svg,
.collection__filter-trigger.wt-filter__trigger--drawer .svg-icon {
  color: white !important;
  fill: white !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* Ensure text appears properly centered after icon */
.collection__filter-trigger.wt-filter__trigger--drawer {
  white-space: nowrap !important;
}

/* Adjust text positioning to center it optically */
.collection__filter-trigger.wt-filter__trigger--drawer svg {
  margin-right: -2px !important;
}

.collection__filter-trigger.wt-filter__trigger--drawer svg + * {
  margin-left: -2px !important;
}

/* Remove the :after pseudo-element divider from floating button */
.collection__filter-trigger.wt-filter__trigger--drawer::after {
  display: none !important;
  content: none !important;
}

.collection__filter-trigger.wt-filter__trigger--drawer .wt-filter__trigger__counter {
  background: white !important;
  color: black !important;
  border: none !important;
}

/* Ensure floating button shows on all devices */
.collection__toolbar .collection__filter-trigger.wt-filter__trigger--drawer {
  position: fixed !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Keep floating button on all screen sizes */

/* Desktop spacing adjustment */
@media (min-width: 1200px) {
  .collection__filter-trigger.wt-filter__trigger--drawer {
    bottom: 40px !important;
  }
}

/* Mobile and tablet: move product count next to sort text and set both to 14px */
@media (max-width: 1199px) {
  .collection__subheader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
  }
  
  /* Hide desktop counter on mobile - only show mobile counter */
  .collection__counter:not(.mobile) {
    display: none !important;
  }
  
  .collection__counter.mobile {
    display: block !important;
    text-align: left;
    margin: 0;
    font-size: 14px;
  }
  
  .collection__toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .collection__sort {
    font-size: 14px;
  }
}

/* Hero banner height on desktop - 100vh minus header height (HOME PAGE ONLY) */
@media only screen and (min-width: 900px) {
  /* Calculate actual header + announcement bar height dynamically */
  /* Target home page hero banner to be exactly 100vh minus header + announcement */
  .template-index .wt-image-banner .hero__pic,
  .template-index .wt-image-banner .hero__pic img,
  .template-index .wt-image-banner .hero__img {
    height: calc(100vh - 145px) !important; /* Adjust based on header (100px) + announcement bar (~45px) */
    min-height: 500px;
    object-fit: cover;
  }
  
  .template-index .wt-image-banner .hero__video,
  .template-index .wt-image-banner .hero__video__yt-wrapper {
    height: calc(100vh - 145px) !important;
    min-height: 500px;
  }
  
  /* When no announcement bar is visible (it can be closed), use just header height */
  body.template-index:not(:has(.wt-announcement:not([style*="display: none"]))) .wt-image-banner .hero__pic,
  body.template-index:not(:has(.wt-announcement:not([style*="display: none"]))) .wt-image-banner .hero__pic img,
  body.template-index:not(:has(.wt-announcement:not([style*="display: none"]))) .wt-image-banner .hero__img {
    height: calc(100vh - 100px) !important;
  }
  
  body.template-index:not(:has(.wt-announcement:not([style*="display: none"]))) .wt-image-banner .hero__video,
  body.template-index:not(:has(.wt-announcement:not([style*="display: none"]))) .wt-image-banner .hero__video__yt-wrapper {
    height: calc(100vh - 100px) !important;
  }
}

/* Dropdown quantity selector styling for products with increments > 1 */
.counter-dropdown-wrapper {
  position: relative;
  display: inline-block;
}

.counter-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: white;
  min-width: 80px;
  height: 48px;
}

.counter-dropdown select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  background: transparent;
  padding: 12px 32px 12px 12px;
  font-size: 16px;
  font-weight: 500;
  color: #111827;
  cursor: pointer;
  outline: none;
  width: 100%;
  text-align: center;
}

.counter-dropdown .dropdown-arrow {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #6b7280;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.counter-dropdown .dropdown-arrow svg {
  width: 12px;
  height: 12px;
}

/* Focus and hover states */
.counter-dropdown:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
}

.counter-dropdown:hover {
  border-color: #9ca3af;
}

/* Integration with add-to-cart form */
.wt-product__add-to-cart_form--wrapper .counter-dropdown-wrapper {
  margin-right: 8px;
  order: 1;
}

/* Ensure proper alignment with button */
.wt-product__add-to-cart_form--wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
}

/* Make sure the dropdown is positioned left of the button */
.wt-product__add-to-cart_form--wrapper .counter-dropdown-wrapper {
  flex-shrink: 0;
  order: -1; /* Ensures dropdown is first (leftmost) */
}

/* Button container should be in the middle */
.wt-product__add-to-cart_form--wrapper .button-wishlist-container {
  order: 0;
}

/* Ensure the add-to-cart button takes available space */
.wt-product__add-to-cart_form--wrapper .button-wishlist-container {
  flex-grow: 1;
  flex: 1 1 auto;
}

.wt-product__add-to-cart_form--wrapper .button-wishlist-container .js-add-to-cart {
  width: 100%;
}

/* Ensure dropdown height matches button height */
.counter-dropdown {
  height: 56px !important;
}

.counter-dropdown select {
  height: 100%;
  padding: 0 32px 0 12px !important;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .counter-dropdown {
    min-width: 70px;
    height: 44px !important;
    border-radius: 0 !important;
  }
  
  .counter-dropdown select {
    padding: 10px 28px 10px 10px;
    font-size: 14px;
  }
  
  .counter-dropdown .dropdown-arrow {
    right: 6px;
  }
  
  /* Reduce gap between dropdown and button to 5px on mobile */
  .wt-product__add-to-cart_form--wrapper {
    gap: 5px !important;
  }
}

/* Collection Promotional Banner - Injected between items */
.collection__promo-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius, 8px);
  height: 100%;
  min-height: 400px;
}

.collection__promo-banner__link {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  min-height: 400px;
  text-decoration: none;
  color: #ffffff;
  position: relative;
}

.collection__promo-banner__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.collection__promo-banner__image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.6) 100%);
  z-index: 1;
}

.collection__promo-banner__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.collection__promo-banner__content {
  position: relative;
  z-index: 2;
  padding: 32px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.collection__promo-banner__title {
  font-size: 48px;
  font-weight: 400;
  margin: 0;
  line-height: 1.1;
  font-family: var(--font-heading-family);
}

.collection__promo-banner__description {
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  max-width: 90%;
}

.collection__promo-banner__cta {
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  margin-top: 4px;
  width: fit-content;
  transition: text-underline-offset 0.2s ease;
}

.collection__promo-banner__cta svg {
  display: none;
}

.collection__promo-banner__link:hover .collection__promo-banner__cta {
  text-underline-offset: 8px;
}

/* Responsive adjustments */
@media (max-width: 899px) {
  .collection__promo-banner {
    min-height: 350px;
  }
  
  .collection__promo-banner__link {
    min-height: 350px;
  }
  
  .collection__promo-banner__content {
    padding: 24px;
    gap: 12px;
  }
  
  .collection__promo-banner__title {
    font-size: 32px;
  }
  
  .collection__promo-banner__description {
    font-size: 14px;
    max-width: 100%;
  }
  
  .collection__promo-banner__cta {
    font-size: 14px;
    text-underline-offset: 4px;
  }
  
  .collection__promo-banner__link:hover .collection__promo-banner__cta {
    text-underline-offset: 6px;
  }
}

/* Mobile-specific adjustments for smaller screens */
@media (max-width: 749px) {
  .collection__promo-banner {
    min-height: 280px;
  }
  
  .collection__promo-banner__link {
    min-height: 280px;
  }
  
  .collection__promo-banner__content {
    padding: 16px;
    gap: 8px;
  }
  
  .collection__promo-banner__title {
    font-size: 22px;
    line-height: 1.15;
  }
  
  .collection__promo-banner__description {
    font-size: 13px;
    line-height: 1.4;
  }
  
  .collection__promo-banner__cta {
    font-size: 13px;
    margin-top: 2px;
  }
}

/* Make the banner span full width on mobile when in 1-column layout */
@media (max-width: 899px) {
  .collection__grid[data-cols="1"] .collection__promo-banner {
    grid-column: 1 / -1;
  }
}

/* Desktop: span 1 column in 3-column or 4-column grid */
@media (min-width: 900px) {
  .collection__grid[data-cols-desktop="3"] .collection__promo-banner,
  .collection__grid[data-cols-desktop="4"] .collection__promo-banner {
    grid-column: span 1;
  }
}

/* Collection Full-Width Injection Banner 2 - Above Pagination */
.collection__injection-banner {
  position: relative;
  width: 100%;
  min-height: 420px;
  margin-top: 16px;
  margin-bottom: 48px;
  overflow: hidden;
  border-radius: var(--border-radius, 8px);
  grid-column: 1 / -1;
}

.collection__injection-banner__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.collection__injection-banner__image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
  pointer-events: none;
}

.collection__injection-banner__image picture,
.collection__injection-banner__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.collection__injection-banner__image picture {
  position: absolute;
  inset: 0;
}

.collection__injection-banner__image picture img {
  position: absolute;
  inset: 0;
}

.collection__injection-banner__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  min-height: 420px;
  padding: 48px 24px;
  color: #ffffff;
}

.collection__injection-banner__subtitle {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
  opacity: 0.9;
}

.collection__injection-banner__title {
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 300;
  font-family: var(--font-heading-family);
  margin: 0 0 16px 0;
  line-height: 1.1;
  max-width: 800px;
}

.collection__injection-banner__description {
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 24px 0;
  max-width: 600px;
  opacity: 0.95;
}

.collection__injection-banner__button {
  display: inline-block;
  padding: 16px 40px;
  background-color: #ffffff;
  color: #1a1a1a;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 0;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.collection__injection-banner__button:hover {
  background-color: #1a1a1a;
  color: #ffffff;
}

/* Responsive adjustments for injection banner */
@media (max-width: 899px) {
  .collection__injection-banner {
    min-height: 350px;
    margin-top: 48px;
  }

  .collection__injection-banner__content {
    min-height: 350px;
    padding: 32px 20px;
  }

  .collection__injection-banner__subtitle {
    font-size: 12px;
    margin-bottom: 8px;
  }

  .collection__injection-banner__title {
    margin-bottom: 16px;
  }

  .collection__injection-banner__description {
    font-size: 15px;
    margin-bottom: 20px;
  }

  .collection__injection-banner__button {
    padding: 14px 32px;
    font-size: 13px;
  }
}

@media (max-width: 749px) {
  .collection__injection-banner {
    min-height: 300px;
    margin-top: 40px;
  }

  .collection__injection-banner__content {
    min-height: 300px;
    padding: 24px 16px;
  }

  .collection__injection-banner__subtitle {
    font-size: 11px;
    letter-spacing: 0.08em;
  }

  .collection__injection-banner__title {
    margin-bottom: 12px;
  }

  .collection__injection-banner__description {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
  }

  .collection__injection-banner__button {
    padding: 12px 28px;
    font-size: 12px;
  }
}

@media only screen and (min-width: 1000px) {
    #shopify-section-template--26579000000839__video_section_HtiAYP .wt-video {
        height: 84vh;
    }
}

/* Make SALE menu item always red */
.wt-page-nav-mega__link--sale,
.wt-page-nav-mega__link--sale .wt-page-nav-mega__link__text {
  color: #e31c1c !important;
}

/* Also style the underline for SALE menu item */
.wt-page-nav-mega__link--sale .wt-page-nav-mega__link__text::after {
  background: #e31c1c !important;
}

/* Mobile drawer styles for SALE menu item */
.wt-drawer--nav .wt-page-nav-mega__link--sale,
.wt-drawer--nav .wt-page-nav-mega__link--sale .wt-page-nav-mega__link__text {
  color: #e31c1c !important;
}

/* Submenu and sub-submenu dropdown border radius */
@media (min-width: 1200px) {
  /* First level submenu - border radius only at bottom */
  body:not(.mobile-nav) .wt-page-nav-mega__item--parent .wt-page-nav-mega__sublist__wrapper {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    overflow: hidden;
  }
  
  body:not(.mobile-nav) .wt-page-nav-mega__sublist__wrapper--simple {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    overflow: hidden;
  }
  
  /* Sub-submenu (nested) dropdowns - border radius all around */
  body:not(.mobile-nav) .wt-page-nav-mega__sublist .wt-page-nav-mega__sublist {
    border-radius: 5px;
    overflow: hidden;
  }
  
  body:not(.mobile-nav) .wt-page-nav-mega__sublist--nested {
    border-radius: 5px;
    overflow: hidden;
  }
}

/* Features banner titles - use body font instead of headline font */
.wt-keys__title {
  font-family: var(--font-base) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 20px !important;
}

/* ============================================
   Global Button Styling Overrides
   ============================================ */

/* Set border-radius to 7px for ALL buttons via CSS variable */
:root {
  --border-radius-button: 7px !important;
}

/* Explicit border-radius for ALL buttons including cart/buy now */
button,
.button,
.btn,
.hero__button,
.hero__button--primary,
.hero__button--secondary,
.js-add-to-cart,
.btn-checkout,
.shopify-payment-button__button,
.shopify-payment-button__button--unbranded,
[class*="__button--primary"],
[class*="__button--secondary"] {
  border-radius: 7px !important;
}

/* Set font-size to 16px for all buttons EXCEPT add-to-cart/buy now/checkout */
button:not(.js-add-to-cart):not(.btn-checkout):not(.shopify-payment-button__button):not(.shopify-payment-button__button--unbranded),
.button:not(.js-add-to-cart):not(.btn-checkout):not(.shopify-payment-button__button):not(.shopify-payment-button__button--unbranded),
.btn:not(.js-add-to-cart):not(.btn-checkout):not(.shopify-payment-button__button):not(.shopify-payment-button__button--unbranded),
.hero__button:not(.js-add-to-cart),
.hero__button--primary:not(.js-add-to-cart),
.hero__button--secondary:not(.js-add-to-cart),
[class*="__button--primary"]:not(.js-add-to-cart):not(.btn-checkout):not(.shopify-payment-button__button),
[class*="__button--secondary"]:not(.js-add-to-cart):not(.btn-checkout):not(.shopify-payment-button__button) {
  font-size: 16px !important;
}

/* Collection list card titles - "Shop per categorie" section */
.collection-list a.card {
  border-radius: 7px;
}

.collection-list .card__title {
  font-size: 16px;
}

/* PDP product title - 32px on desktop */
@media (min-width: 900px) {
  .wt-product__name {
    font-size: 32px !important;
  }
}

/* Judge.me review form - make links clearly visible */
.jdgm-form a,
.jdgm-form__privacy-policy a {
  color: #000 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

.jdgm-form a:hover,
.jdgm-form__privacy-policy a:hover {
  opacity: 0.7;
}

/* ============================================
   B2B Application Form
   ============================================ */

.b2b-form-section {
  background: var(--color-background, transparent);
}

.b2b-form-container {
  max-width: 860px;
  margin: 0 auto;
  padding: 60px 20px;
}

.b2b-form__header {
  text-align: center;
  margin-bottom: 48px;
}

.b2b-form__title {
  margin-bottom: 16px;
}

.b2b-form__description {
  font-size: 16px;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
  opacity: 0.8;
}

/* Form grid */
.b2b-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.b2b-form__field--full {
  grid-column: 1 / -1;
}

/* Floating label pattern */
.b2b-form__label {
  position: relative;
  display: block;
  width: 100%;
}

.b2b-form__input,
.b2b-form__select,
.b2b-form__textarea {
  width: 100%;
  padding: 20px 16px 8px;
  font-size: 15px;
  font-family: inherit;
  border: 1px solid #d1d1d1;
  border-radius: 7px;
  background: #fff;
  color: #000;
  outline: none;
  transition: border-color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.b2b-form__textarea {
  resize: vertical;
  min-height: 120px;
}

.b2b-form__input:focus,
.b2b-form__select:focus,
.b2b-form__textarea:focus {
  border-color: #000;
}

.b2b-form__input:hover,
.b2b-form__select:hover,
.b2b-form__textarea:hover {
  border-color: #999;
}

/* Floating label text */
.b2b-form__label-text {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  font-size: 15px;
  color: #888;
  pointer-events: none;
  transition: all 0.2s ease;
}

.b2b-form__textarea ~ .b2b-form__label-text {
  top: 20px;
  transform: none;
}

/* Float label up when input has value or is focused */
.b2b-form__input:focus ~ .b2b-form__label-text,
.b2b-form__input:not(:placeholder-shown) ~ .b2b-form__label-text,
.b2b-form__textarea:focus ~ .b2b-form__label-text,
.b2b-form__textarea:not(:placeholder-shown) ~ .b2b-form__label-text {
  top: 10px;
  transform: none;
  font-size: 11px;
  color: #666;
}

/* Select styling */
.b2b-form__label--select {
  position: relative;
}

.b2b-form__select {
  padding-right: 40px;
  cursor: pointer;
  color: #888;
}

.b2b-form__select:valid:not([value=""]) {
  color: #000;
}

.b2b-form__select option:not([value=""]) {
  color: #000;
}

.b2b-form__select-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #888;
}

/* Submit button */
.b2b-form__submit {
  margin-top: 32px;
  text-align: center;
}

.b2b-form__button {
  display: inline-block;
  min-width: 280px;
  padding: 16px 40px;
  font-size: 16px !important;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s ease, transform 0.15s ease;
}

.b2b-form__button:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.b2b-form__button:active {
  transform: translateY(0);
}

/* Success / Error messages */
.b2b-form__message {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  border-radius: 7px;
  margin-bottom: 32px;
  font-size: 15px;
  line-height: 1.5;
}

.b2b-form__message svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.b2b-form__message p {
  margin: 0;
}

.b2b-form__message p + p {
  margin-top: 4px;
}

.b2b-form__message--success {
  background: #f0faf0;
  border: 1px solid #c3e6c3;
  color: #1a5c1a;
}

.b2b-form__message--success svg {
  color: #2d862d;
}

.b2b-form__message--error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.b2b-form__message--error svg {
  color: #dc2626;
}

/* Validation states */
.b2b-form__input:invalid:not(:placeholder-shown):not(:focus),
.b2b-form__select:invalid:not(:focus) {
  border-color: #dc2626;
}

/* Responsive */
@media (max-width: 749px) {
  .b2b-form__grid {
    grid-template-columns: 1fr;
  }

  .b2b-form-container {
    padding: 40px 16px;
  }

  .b2b-form__button {
    width: 100%;
    min-width: unset;
  }

  .b2b-form__message {
    padding: 16px;
    gap: 12px;
    font-size: 14px;
  }
}

/* ==========================================================================
   Device-specific content variants (hero heading / text / button)
   Only ever hides, never forces a display value, so button and text layout
   stays exactly as it is. Breakpoint matches the hero mobile layout (900px).
   ========================================================================== */
@media (min-width: 900px) {
  .wt-device--mobile {
    display: none !important;
  }
}

@media (max-width: 899px) {
  .wt-device--desktop {
    display: none !important;
  }
}

/* ==========================================================================
   Predictive search dropdown (redesign)
   Markup: sections/predictive-search.liquid (.psearch namespace)
   Grid based, so every card aligns regardless of reviews, vendor or title
   length. Rules are !important where the header overlay styles in
   sections/page-header.liquid force colors on .search-result-wrapper *.
   ========================================================================== */
.psearch {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding: calc(var(--gap, 8px) * 2) 0 calc(var(--gap, 8px) * 3);
  text-align: left;
}

.psearch__label {
  margin: 0 0 12px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-body-text-light, #6b6b6b) !important;
}

/* Suggestions / collections / pages / articles */
.psearch__links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}

.psearch__links-col {
  /* flex-basis instead of min-width, so the row never forces the drawer wider
     than the viewport on small screens */
  flex: 1 1 140px;
  min-width: 0;
}

@media (min-width: 900px) {
  .psearch__links {
    gap: 24px 56px;
  }

  .psearch__links-col {
    flex: 0 1 auto;
    min-width: 160px;
  }
}

.psearch__linklist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.psearch__link {
  display: inline-block;
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none;
  color: var(--color-body-text-light, #6b6b6b) !important;
  overflow-wrap: anywhere;
  transition: color 0.15s ease;
}

.psearch__link .highlight,
.psearch__link:hover {
  color: var(--color-body-text, #000) !important;
}

/* Product grid */
.psearch__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .psearch__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .psearch__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px 20px;
  }
}

@media (min-width: 1200px) {
  .psearch__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.psearch__cell {
  min-width: 0;
  display: flex;
}

.psearch-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.psearch-card__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

.psearch-card__media {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  margin-bottom: 12px;
  padding: 10%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* white tile: product photography is shot on white, and it reads as a crisp
     block against the grey search overlay background */
  background: #fff;
  border-radius: 8px;
}

.psearch-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.35s cubic-bezier(0.12, 0.67, 0.53, 1);
}

@media (hover: hover) {
  .psearch-card__link:hover .psearch-card__img {
    transform: scale(1.05);
  }
}

.psearch-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* Typography comes from the theme's own card classes (card__subtitle,
   card__title, card__price, wt-rating) that the markup also carries, so the
   fonts, sizes and colors match the regular Woood product cards. Only spacing
   and the alignment rhythm are set here. */
.psearch-card__vendor {
  margin: 0 0 2px;
}

.psearch-card__title {
  margin: 0;
  /* two-line box keeps every card in the row aligned */
  min-height: calc(2 * 1.4em);
  min-height: 2lh;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.psearch .highlight {
  background: transparent;
  font-weight: 600;
}

/* Price sits tight under the title instead of being pinned to the bottom of
   the card, and is set smaller than on the collection cards: in this compact
   dropdown the full card price size overpowers the title. */
.psearch-card__price {
  margin-top: 4px;
  margin-bottom: 0;
  font-size: calc(var(--font-base-size) * 0.75);
  line-height: 1.2;
}

.psearch-card__price .price,
.psearch-card__price .price__container {
  margin: 0;
}

/* Color variants. custom.css hides .card__color-swatches everywhere inside
   .wt-header__search__results (for the suggestion cards), so the dropdown
   cards switch them back on explicitly. */
#predictive-search-results .card__color-swatches {
  display: flex;
}

.psearch-card__swatches {
  margin-top: 14px;
}

/* Footer button */
.psearch__footer {
  display: flex;
  margin-top: 28px;
}

.psearch__more {
  width: 100%;
  padding: 13px 28px;
  font-size: 14px;
  line-height: 1;
  background: transparent;
  color: var(--color-body-text, #000);
  border: 1px solid var(--color-body-text, #000);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

@media (min-width: 600px) {
  .psearch__more {
    width: auto;
  }
}

@media (hover: hover) {
  .psearch__more:hover {
    background: var(--color-body-text, #000);
    color: var(--color-background, #fff) !important;
  }
}

/* Mobile: products first, then the "view all" button, then suggestions and
   other links. Only the visual order changes, the DOM keeps the desktop order
   so keyboard focus still follows what desktop users see. Scoped with :has()
   so a result set without products keeps the normal order. */
@media (max-width: 899px) {
  .psearch:has(.psearch__products) {
    display: flex;
    flex-direction: column;
  }

  .psearch:has(.psearch__products) .psearch__products {
    order: 1;
  }

  .psearch:has(.psearch__products) .psearch__footer {
    order: 2;
  }

  .psearch:has(.psearch__products) .psearch__links {
    order: 3;
    margin: 28px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 0;
  }
}

/* No results */
.psearch--no-results {
  padding-block: calc(var(--gap, 8px) * 4);
}

.psearch__empty {
  display: block;
  font-size: 15px;
  color: var(--color-body-text-light, #6b6b6b) !important;
}

/* Header overlay mode (sections/page-header.liquid) forces a color on every
   element inside .search-result-wrapper with !important. The id selector
   outranks those rules, so the dropdown keeps its own color hierarchy. */
#predictive-search-results .psearch__label,
#predictive-search-results .psearch__link,
#predictive-search-results .psearch__empty {
  color: var(--color-body-text-light, #6b6b6b) !important;
}

/* Same color the regular product cards use */
#predictive-search-results .psearch-card__vendor {
  color: var(--color-brand) !important;
}

@media (max-width: 768px) {
  #predictive-search-results .psearch-card__price,
  #predictive-search-results .psearch-card__price .price,
  #predictive-search-results .psearch-card__price .price-item,
  #predictive-search-results .psearch-card__price .price-item--regular,
  #predictive-search-results .psearch-card__price .price-item--sale {
    font-size: 13px !important;
  }
}

#predictive-search-results .psearch__link:hover,
#predictive-search-results .psearch__link .highlight,
#predictive-search-results .psearch-card__title,
#predictive-search-results .psearch-card__price,
#predictive-search-results .psearch-card__price .price__regular .price-item--regular {
  color: var(--color-custom-text, var(--color-body-text, #000)) !important;
}

/* Sale colors, same as on the regular product cards: red sale price and a
   struck original price. Needed with !important because the header overlay
   styles otherwise repaint everything in the body text color. */
#predictive-search-results .psearch-card__price .price-item--sale {
  color: var(--color-sale-badge-background) !important;
}

#predictive-search-results .psearch-card__price .price__sale .price-item--lower,
#predictive-search-results .psearch-card__price .price__sale .price-item--regular {
  color: var(--color-price) !important;
  text-decoration: line-through;
}

@media (hover: hover) {
  #predictive-search-results .psearch__more:hover {
    color: var(--color-background, #fff) !important;
  }
}