/* =========================================================
   Solbio product page styling
   Colors:
     image background  #eff7eb
     header text       #227533
     cta button        #227533
     quantity border   #d0d0d0
     details card      #f9f9f9
   ========================================================= */

:root {
  --solbio-green: #227533;
  --solbio-green-dark: #1c632b;
  --solbio-image-bg: #eff7eb;
  --solbio-border: #d0d0d0;
  --solbio-card: #f9f9f9;
}

/* ---------- Gallery wrapper ----------
   Theme: .thumbslide--vertical is flex; .slideshow is display:inline-block and
   collapses to 0 width as a flex child (its inner content is absolutely
   positioned, so it has no intrinsic width). We force the slideshow to occupy
   all remaining width via an explicit basis, and reserve the thumb rail width.
   Only then can aspect-ratio resolve a real height. */
.solbio-product .solbio-gallery .thumbslide--vertical {
  display: flex;
  align-items: flex-start;
}
/* thumb rail keeps its theme width; don't let it shrink */
.solbio-product .solbio-gallery .thumbslide--vertical .thumbslide__nav-wrapper {
  flex: 0 0 auto;
}
/* slideshow fills the rest. flex-basis:0 + flex-grow:1 makes it take all the
   leftover space regardless of (lack of) intrinsic content width. */
.solbio-product .solbio-gallery .thumbslide--vertical .slideshow {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
}

/* ---------- Image stage ---------- */
.solbio-product .solbio-stage {
  background: var(--solbio-image-bg);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}
@supports not (aspect-ratio: 1 / 1) {
  .solbio-product .solbio-stage::before {
    content: "";
    display: block;
    padding-top: 100%;
  }
}

.solbio-product .solbio-stage .slideshow__content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.solbio-product .solbio-stage .slideshow__item {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  padding-bottom: 0 !important;
}
.solbio-product .solbio-stage .slideshow__item .img-mag,
.solbio-product .solbio-stage .slideshow__item figure {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.solbio-product .solbio-stage .slideshow__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 32px;
}

/* magnifier glass button (top-right) */
.solbio-product .solbio-zoom-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}
.solbio-product .solbio-zoom-btn .icon {
  width: 20px;
  height: 20px;
}

/* vertical thumbnails on the left */
.solbio-product .thumbslide--vertical .thumbslide__nav-list {
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin-top: 14px;
}
.solbio-product .thumbslide__nav-list li {
  border: 1px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: var(--solbio-image-bg);
}
.solbio-product .thumbslide__nav-list li img {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: contain;
  padding: 6px;
}
.solbio-product .thumbslide__nav-list li[aria-selected="true"],
.solbio-product .thumbslide__nav-list li.is-selected {
  border-color: var(--solbio-green);
}

/* Thumbnails: theme already renders them via JS into .thumbslide__nav-list.
   On desktop the vertical rail sits to the right of the stage (theme default).
   We only restyle the thumb chips, not the layout. */

/* ---------- Detail cards (Inhoud / Dosis / Houdbaarheid / Geur) ---------- */
.solbio-detail-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.solbio-detail-card {
  background: var(--solbio-card);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.solbio-detail-card__label {
  font-size: 0.95rem;
  color: #555;
}
.solbio-detail-card__value {
  font-weight: 700;
  font-size: 1.05rem;
  color: #1a1a1a;
}
@media (max-width: 47.99rem) {
  .solbio-detail-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Title & price ---------- */
.solbio-product .solbio-title {
  color: var(--solbio-green);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.1;
  margin-bottom: 18px;
}

.solbio-price-wrapper {
  margin-bottom: 24px;
}

.prod-card__price {
	  color: var(--solbio-green);
  	font-weight: bold;
}

.solbio-product .solbio-price {
  display: inline-block;
  color: black;
  font-weight: 800;
  font-size: 1.6rem;
}
.solbio-product .solbio-price--old {
  color: #999;
  text-decoration: line-through;
  margin-right: 10px;
  font-size: 1.2rem;
}
.solbio-unitprice {
  display: block;
  font-size: 0.8rem;
  color: #777;
  margin-top: 4px;
}

/* ---------- Buy row (quantity + CTA) ---------- */
.solbio-buy-row {
  display: flex;
  align-items: stretch;
  gap: 16px;
  margin-bottom: 22px;
}

.solbio-product .solbio-qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--solbio-border);
  border-radius: 999px;
  padding: 4px 40px;
  background: #fff;
}
.solbio-product .solbio-qty .js-number-input__value {
  width: 48px;
  text-align: center;
  border: none;
  background: transparent;
  font-weight: 600;
  font-size: 1.05rem;
  -moz-appearance: textfield;
  appearance: textfield;
}
.solbio-product .solbio-qty .js-number-input__value::-webkit-outer-spin-button,
.solbio-product .solbio-qty .js-number-input__value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.solbio-product .solbio-qty .number-input__btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  cursor: pointer;
}
.solbio-product .solbio-qty .number-input__btn .icon {
  width: 14px;
  height: 14px;
}

.solbio-product .solbio-cta {
  flex: 1;
  background: var(--solbio-green);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0 28px;
  min-height: 56px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.solbio-product .solbio-cta:hover,
.solbio-product .solbio-cta:focus {
  background: var(--solbio-green-dark);
}

/* ---------- Free shipping banner ---------- */
.solbio-shipping-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--solbio-image-bg);
  border-radius: 12px;
  padding: 18px 22px;
  color: var(--solbio-green);
  margin-bottom: 28px;
}
.solbio-shipping-banner__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.solbio-shipping-banner strong {
  font-weight: 800;
}

/* ---------- Feature icons ---------- */
.solbio-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  text-align: center;
  padding: 8px 0 28px;
  border-bottom: 1px solid #ececec;
  margin-bottom: 28px;
}
.solbio-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.solbio-feature__icon {
  width: 54px;
  height: 54px;
  color: #7dbb3a;
}
.solbio-feature__icon--vegan {
  color: #c9d400;
}
.solbio-feature span {
  font-weight: 700;
  color: #333;
}

/* ---------- Description ---------- */
.solbio-section-title {
  color: black;
  font-weight: 800;
  font-size: 1.6rem;
  margin-bottom: 14px;
}
.solbio-description ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.solbio-description ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  line-height: 1.4;
}
.solbio-description ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #7dbb3a;
}

img-mag__asset {
  background-color: var(--solbio-green);
}

/* ---------- Responsive stacking ---------- */
@media (max-width: 47.99rem) {
  .solbio-buy-row {
    flex-wrap: wrap;
  }
  .solbio-product .solbio-cta {
    flex: 1 1 100%;
  }
}

.collection-page__content {
	margin-top: 50px;
}

.solbio-product {
	margin-top: 80px;
}

/* ============================================
   Newsletter Banner
   ============================================ */
.newsletter {
  background-color: var(--color-corporate1-std);
  background-image: url('https://cdn.webshopapp.com/shops/357088/files/499782442/bg-center.svg') ;
  border-radius: 24px;
  padding: 5rem 4rem;
  margin-bottom: 4rem;
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 35px;
}

/* Override the constrained inner wrapper so content can spread out */
.newsletter .max-width-xxs {
  max-width: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
}

/* Left side: heading */
.newsletter .text-component {
  flex: 1 1 300px;
  margin-bottom: 0 !important;
}

.newsletter h4 {
  color: #ffffff;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}

/* If you want the two-tone "Nieuws"+"brief" effect, see note below */

/* Right side: intro text + input row */
.newsletter .grid {
  flex: 1 1 400px;
  align-items: center;
}

/* Input + button row */
.newsletter .form-control {
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  color: #ffffff;
  padding: 0.85rem 1.5rem;
  flex: 1;
}

.newsletter .text-component p {
	  font-weight: normal;
    color: white;
    margin-top: 15px;
  	font-size: 16px;
}

.newsletter .grid p {
	  font-weight: normal;
    color: white;
    margin-bottom: 15px;
  	font-size: 16px;
}

.newsletter .form-control::placeholder {
  color: rgba(255, 255, 255, 0.85);
}

.newsletter .form-control:focus {
  border-color: #ffffff;
  outline: none;
}

.newsletter .btn--primary {
  background-color: #ffffff;
  color: var(--solbio-green);
  border-radius: 999px;
  border: 2px solid #ffffff;
  padding: 0.85rem 2rem;
  font-weight: 600;
  white-space: nowrap;
}

.newsletter .btn--primary:hover {
  background-color: #f0f0f0;
  color: var(--solbio-green);
}

/* Mobile */
@media (max-width: 768px) {
  .newsletter {
    padding: 2rem 1.5rem;
    border-radius: 16px;
  }
  .newsletter h4 {
    font-size: 1.75rem;
  }
}

.bg-contrast-lower {
  background: #f5faf2;
}

.prod-card__text-wrapper {
  height: 60px;
}

.prod-card__img-link img {
	padding: 60px;
  object-fit: contain;
}

.solbio-gallery  {
  display: flex;
  align-items: center;
  justify-content: center;
}

.solbio-gallery .slideshow {
	    height: 500px;
}

.solbio-gallery img {
	background: var(--solbio-image-bg);
}

.add-to-cart {
    background: var(--solbio-green);
    color: white;
    font-size: 13px;
}

.add-to-cart:hover {
	border: 1px solid var(--solbio-green);
  color: var(--solbio-green);
}

.accordion.js-accordion .accordion__item:last-of-type{
	display: none;
}

/* Partner */
.row > .col-lg-4:nth-child(odd) .partner_ct {
    background-color: #ffffff;
}

.row > .col-lg-4:nth-child(even) .partner_ct {
    background-color: #22753329;
}

.partner_ct {
	border-radius: 16px;
}

.partner_ct img {
  max-width: 250px;
  max-height: 60px;
  margin: 0px 0px 20px;
}

.partner_ct h2 {
  font-size:20px;
  margin: 0px;
}

.partner_ct span {
  color: var(--solbio-green);
}

/* UPDATE 10-8-26 */
@media (max-width: 768px) {
  .prod-card__img-link img {
		padding: 25px;
	}
  
	.bg_image_std{
  	display:none;
  }
  .hp_hero.fixed_header_fix{
  	margin-top:0 !important;
  }
  .icon_w_lg_square{
  	max-width: unset !important;
  }
  .flex-mobile{
    flex-direction:column;
  }
  .mobile-text-left{
  	text-align:left;
  }
  .home-carousel.carousel__item{
  	flex: 0 0 100%;
  }
  .header-top-sm{
  	padding-top: 5rem;
  }
  .main-header__mobile-content{
  	background:#fff;
  }
  .btn-text-sm.add-to-cart{
  	font-size:12px;
    padding: 15px 13px;
  }
  .product-card-title-sm{
  	text-overflow: ellipsis;
    overflow:hidden;
    width:120px;
    height:40px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .sm-mb-3{
  	margin-bottom: 1rem;
  }
}

/* ==========================================================================
   Downloads / documents section  —  namespace: .sb-downloads
   ========================================================================== */
.sb-downloads {
  --sb-dl-accent:        #1a7a34;  /* pdf + download icon + link color */
  --sb-dl-check:         #2196c9;  /* check icon */
  --sb-dl-heading:       #2f3d34;
  --sb-dl-icon-size:     1.25rem;
  --sb-dl-row-gap:       1.15rem;
}

.sb-downloads__card {
  height: 100%;
}

.sb-downloads__title {
  margin: 0 0 1.5rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--sb-dl-heading);
}

.sb-downloads__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sb-downloads__list > li {
  position: relative;
  padding-left: calc(var(--sb-dl-icon-size) + .75rem);
  min-height: var(--sb-dl-icon-size);
}

.sb-downloads__list > li + li {
  margin-top: var(--sb-dl-row-gap);
}

.sb-downloads__list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .05em;
  width: var(--sb-dl-icon-size);
  height: var(--sb-dl-icon-size);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.sb-downloads__list a {
  color: var(--sb-dl-accent);
  font-weight: 700;
  text-decoration: none;
  transition: opacity .15s ease;
}

.sb-downloads__list a:hover,
.sb-downloads__list a:focus-visible {
  text-decoration: underline;
  opacity: .8;
}

/* --- icon variants --- */
.sb-downloads__list--pdf > li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231a7a34'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm.5 1.9L18.6 8H14.5V3.9zM7 13h10v1.4H7V13zm0 3h10v1.4H7V16z'/%3E%3C/svg%3E");
}

.sb-downloads__list--download > li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231a7a34'%3E%3Cpath d='M11 3h2v9.2l3.3-3.3 1.4 1.4L12 16.9 6.3 10.3l1.4-1.4L11 12.2V3zM4 18h16v2.5H4V18z'/%3E%3C/svg%3E");
}

.sb-downloads__list--check > li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%232196c9'/%3E%3Cpath d='M10.2 16.8 5.9 12.5l1.5-1.5 2.8 2.8 6.4-6.4 1.5 1.5-7.9 7.9z' fill='%23fff'/%3E%3C/svg%3E");
}

@media (max-width: 991.98px) {
  .sb-downloads__card { padding: 1.5rem !important; }
}