/*
 * Productpagina — Wietzadenshop
 * ----------------------------------------
 * Bron: docs/design/wietzadenshop-productpagina.html
 *
 * Licht, met links een meescrollende galerij en rechts de koopinformatie.
 * Daaronder de belofteband, de tabs, de Google-reviews en de vergelijkbare
 * wietzaden. Gedeelde chrome (kruimelpad, paginering) staat in shop.css.
 */

/* ----------------------------------------
 * LAYOUT
 * ---------------------------------------- */

.product-main {
  padding: 30px 0 90px;
}

.product-main__grid {
  display:               grid;
  grid-template-columns: 1.05fr 1fr;
  gap:                   56px;
  align-items:           start;
}

/* ----------------------------------------
 * GALERIJ
 * ---------------------------------------- */

.product-gallery {
  position: sticky;
  top:      100px;
}

.product-gallery__main {
  aspect-ratio:     1 / 1;
  overflow:         hidden;
  background-color: var(--color-card-lite);
  border:           1px solid var(--color-line-lite);
  border-radius:    var(--radius-panel);
}

.product-gallery__main img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.product-gallery__thumbs {
  display:    flex;
  gap:        var(--space-3);
  margin-top: var(--space-3);
}

.product-gallery__thumb {
  flex:          1;
  aspect-ratio:  1 / 1;
  padding:       0;
  overflow:      hidden;
  background:    none;
  border:        2px solid transparent;
  border-radius: 9px;
  transition:    border-color var(--transition-fast);
}

.product-gallery__thumb.is-on {
  border-color: var(--color-primary);
}

.product-gallery__thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

/* ----------------------------------------
 * KOPREGELS
 * ---------------------------------------- */

.product-info__eyebrow {
  margin-bottom:  14px;
  font-family:    var(--font-heading);
  font-weight:    var(--font-bold);
  font-size:      var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--color-primary-dark);
}

.product-info__title {
  margin-bottom:  14px;
  font-family:    var(--font-heading);
  font-weight:    var(--font-black);
  font-size:      clamp(34px, 4.4vw, 52px);
  line-height:    var(--leading-none);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.product-rating {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  margin-bottom: var(--space-5);
  font-size:     var(--text-sm);
  color:         var(--color-text-muted-lite);
}

.product-rating .stars {
  color:          var(--color-amber);
  letter-spacing: 1px;
}

.product-rating__score {
  font-weight: var(--font-bold);
  color:       var(--color-text-lite);
}

.product-rating__sep {
  color: var(--color-text-faint-lite);
}

.product-rating__link {
  color:                inherit;
  text-decoration:      underline;
  text-underline-offset: 2px;
}

.product-info__intro {
  max-width:     52ch;
  margin-bottom: 26px;
  color:         var(--color-text-muted-lite);
  font-size:     var(--text-base);
}

.product-info__intro p + p {
  margin-top: var(--space-3);
}

/* ----------------------------------------
 * PRIJS
 * ---------------------------------------- */

.product-price {
  display:        flex;
  align-items:    baseline;
  flex-wrap:      wrap;
  gap:            var(--btn-gap);
  margin-bottom:  26px;
}

.product-price__now {
  font-family:    var(--font-heading);
  font-weight:    var(--font-black);
  font-size:      38px;
  letter-spacing: var(--tracking-tight);
}

.product-price__per {
  font-size: var(--text-sm);
  color:     var(--color-text-faint-lite);
}

/* ----------------------------------------
 * VARIANTEN
 * ---------------------------------------- */

.product-buy__label {
  margin-bottom:  var(--space-3);
  font-family:    var(--font-heading);
  font-weight:    var(--font-bold);
  font-size:      var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--color-text-muted-lite);
}

.variants {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-3);
  margin-bottom:         var(--space-3);
}

.variant {
  position:         relative;
  padding:          16px 18px;
  text-align:       left;
  background-color: var(--color-card-lite);
  border:           1.5px solid var(--color-line-strong-lite);
  border-radius:    11px;
  transition:       border-color var(--transition-fast),
                    box-shadow var(--transition-fast);
}

.variant:hover {
  border-color: var(--color-primary);
}

.variant.is-on {
  border-color: var(--color-primary);
  box-shadow:   0 0 0 3px var(--color-primary-soft);
}

.variant.is-uitverkocht {
  opacity: 0.55;
  cursor:  not-allowed;
}

.variant.is-uitverkocht:hover {
  border-color: var(--color-line-strong-lite);
}

.variant__aantal {
  display:     block;
  font-family: var(--font-heading);
  font-weight: var(--font-extrabold);
  font-size:   19px;
  color:       var(--color-text-lite);
}

.variant__prijs {
  position:    absolute;
  top:         16px;
  right:       18px;
  font-family: var(--font-heading);
  font-weight: var(--font-extrabold);
  font-size:   var(--text-base);
  color:       var(--color-text-lite);
}

.variant__gratis {
  display:          inline-block;
  margin-top:       var(--space-2);
  padding:          4px 8px;
  background-color: var(--color-primary-soft);
  color:            var(--color-primary-dark);
  border-radius:    var(--radius-full);
  font-family:      var(--font-heading);
  font-weight:      var(--font-bold);
  font-size:        10.5px;
  letter-spacing:   var(--tracking-wider);
  text-transform:   uppercase;
}

.variant__gratis--uit {
  background-color: var(--color-surface-lite);
  color:            var(--color-text-muted-lite);
}

/* ----------------------------------------
 * KIEMGARANTIE-BLOK
 * ---------------------------------------- */

.kiem {
  display:          flex;
  align-items:      flex-start;
  gap:              var(--space-3);
  margin-bottom:    var(--space-6);
  padding:          15px 18px;
  background-color: var(--color-primary-soft);
  border-radius:    11px;
}

.kiem svg {
  flex-shrink: 0;
  margin-top:  1px;
  color:       var(--color-primary-dark);
}

.kiem__title {
  font-family:    var(--font-heading);
  font-weight:    var(--font-bold);
  font-size:      var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color:          var(--color-text-lite);
}

.kiem__text {
  margin-top: 2px;
  font-size:  13.5px;
  color:      var(--color-text-muted-lite);
}

/* ----------------------------------------
 * KOOPRIJ
 * ---------------------------------------- */

.product-buy__row {
  display:       flex;
  gap:           var(--space-3);
  margin-bottom: var(--space-5);
}

.product-buy__submit {
  flex: 1;
}

.product-stock {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         var(--space-2);
  font-size:   13.5px;
  color:       var(--color-text-muted-lite);
}

.product-stock__dot {
  width:            8px;
  height:           8px;
  border-radius:    var(--radius-full);
  background-color: var(--color-primary);
}

.product-stock.is-uit .product-stock__dot {
  background-color: var(--color-text-faint-lite);
}

/* ----------------------------------------
 * TRUST-RIJ
 * ---------------------------------------- */

.product-trust {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   14px;
  margin:                26px 0;
  padding:               18px 0;
  border-top:            1px solid var(--color-line-lite);
  border-bottom:         1px solid var(--color-line-lite);
}

.product-trust__item {
  display:     flex;
  align-items: center;
  gap:         9px;
  font-size:   12.5px;
  line-height: 1.3;
  color:       var(--color-text-muted-lite);
}

.product-trust__item svg {
  flex-shrink: 0;
  width:       20px;
  height:      20px;
  color:       var(--color-primary-dark);
}

/* ----------------------------------------
 * EIGENSCHAPPEN
 * ---------------------------------------- */

.product-specs__title {
  margin-bottom:  14px;
  font-family:    var(--font-heading);
  font-weight:    var(--font-extrabold);
  font-size:      var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.product-specs__rows {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1px;
  overflow:              hidden;
  background-color:      var(--color-line-lite);
  border:                1px solid var(--color-line-lite);
  border-radius:         11px;
}

.product-specs__row {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  gap:              var(--btn-gap);
  padding:          13px 16px;
  background-color: var(--color-card-lite);
}

.product-specs__key {
  font-family:    var(--font-heading);
  font-weight:    var(--font-semibold);
  font-size:      11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color:          var(--color-text-muted-lite);
}

.product-specs__value {
  margin:      0;
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size:   var(--text-sm);
  color:       var(--color-text-lite);
}

/* ----------------------------------------
 * BELOFTEBAND (donker)
 * ---------------------------------------- */

.belofte {
  background-color: var(--color-bg);
  color:            var(--color-text);
}

.belofte__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             30px;
  padding-top:     54px;
  padding-bottom:  54px;
}

.belofte__title {
  font-family:    var(--font-heading);
  font-weight:    var(--font-black);
  font-size:      clamp(26px, 3.2vw, 40px);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.belofte__title span {
  color: var(--color-primary);
}

.belofte__lead {
  max-width:  44ch;
  margin-top: var(--space-3);
  color:      var(--color-text-muted);
  font-size:  var(--text-base);
}

/* ----------------------------------------
 * TABS
 * ---------------------------------------- */

.product-tabs {
  padding: 80px 0;
}

.product-tabs__nav {
  display:       flex;
  flex-wrap:     wrap;
  gap:           var(--space-2);
  margin-bottom: 34px;
  border-bottom: 1px solid var(--color-line-lite);
}

.product-tabs__tab {
  position:        relative;
  padding:         14px 6px;
  margin-right:    22px;
  background:      none;
  border:          none;
  font-family:     var(--font-heading);
  font-weight:     var(--font-bold);
  font-size:       15px;
  letter-spacing:  var(--tracking-wide);
  text-transform:  uppercase;
  color:           var(--color-text-muted-lite);
  transition:      color var(--transition-fast);
}

.product-tabs__tab:hover,
.product-tabs__tab.is-on {
  color: var(--color-text-lite);
}

.product-tabs__tab.is-on::after {
  content:          "";
  position:         absolute;
  left:             0;
  right:            0;
  bottom:           -1px;
  height:           2px;
  background-color: var(--color-primary);
}

.product-tabs__panel {
  max-width: 760px;
}

/* Zonder JavaScript blijven alle panelen zichtbaar (zie product.js). */
.js .product-tabs[data-tabs-actief] .product-tabs__panel {
  display: none;
}

.js .product-tabs[data-tabs-actief] .product-tabs__panel.is-on {
  display: block;
}

.product-tabs__panel h2,
.product-tabs__panel h3 {
  margin:         26px 0 12px;
  font-family:    var(--font-heading);
  font-weight:    var(--font-bold);
  font-size:      20px;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.product-tabs__panel > :first-child {
  margin-top: 0;
}

.product-tabs__panel p {
  margin-bottom: 14px;
  color:         var(--color-text-muted-lite);
  font-size:     var(--text-base);
}

.product-tabs__panel ul {
  margin-bottom: 14px;
  list-style:    none;
}

.product-tabs__panel li {
  position:      relative;
  padding:       8px 0 8px 26px;
  border-bottom: 1px solid var(--color-line-lite);
  color:         var(--color-text-muted-lite);
  font-size:     15px;
}

.product-tabs__panel li::before {
  content:          "";
  position:         absolute;
  left:             4px;
  top:              15px;
  width:            8px;
  height:           8px;
  border-radius:    var(--radius-full);
  background-color: var(--color-primary);
}

/* ----------------------------------------
 * REVIEWS
 * ---------------------------------------- */

.shop-reviews {
  padding-bottom: 80px;
}

.shop-reviews__title {
  margin-bottom:  26px;
  font-family:    var(--font-heading);
  font-weight:    var(--font-extrabold);
  font-size:      clamp(24px, 3vw, 34px);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.shop-reviews__head {
  display:       flex;
  align-items:   center;
  flex-wrap:     wrap;
  gap:           var(--space-6);
  margin-bottom: 34px;
}

.shop-reviews__big {
  font-family:    var(--font-heading);
  font-weight:    var(--font-black);
  font-size:      56px;
  line-height:    0.9;
  letter-spacing: var(--tracking-tight);
}

.shop-reviews__meta .stars {
  color:          var(--color-amber);
  font-size:      17px;
  letter-spacing: 2px;
}

.shop-reviews__meta p {
  margin-top: 3px;
  color:      var(--color-text-muted-lite);
  font-size:  var(--text-sm);
}

.shop-reviews__cta {
  margin-left: auto;
}

.shop-reviews__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-4);
}

.review--lite {
  padding:          var(--space-6);
  background-color: var(--color-card-lite);
  border:           1px solid var(--color-line-lite);
  border-radius:    var(--radius-panel);
}

.review--lite .stars {
  display:        block;
  margin-bottom:  var(--space-3);
  color:          var(--color-amber);
  font-size:      13px;
  letter-spacing: 1px;
}

.review--lite .review__text {
  margin-bottom: 14px;
  font-size:     15px;
  color:         var(--color-text-lite);
}

.review--lite .review__author {
  font-family:    var(--font-heading);
  font-weight:    var(--font-semibold);
  font-size:      var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--color-text-muted-lite);
}

/* ----------------------------------------
 * VERGELIJKBARE WIETZADEN
 * ---------------------------------------- */

.gerelateerd {
  padding-bottom: 90px;
}

.gerelateerd__title {
  margin-bottom:  34px;
  font-family:    var(--font-heading);
  font-weight:    var(--font-extrabold);
  font-size:      clamp(26px, 3.4vw, 40px);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

/* De kolomvarianten van .product-grid staan in components.css. */

/* ----------------------------------------
 * RESPONSIVE
 * ---------------------------------------- */

@media (max-width: 960px) {

  .product-main__grid {
    grid-template-columns: 1fr;
    gap:                   34px;
  }

  .product-gallery {
    position: static;
  }

  .product-trust {
    grid-template-columns: 1fr;
  }

  .shop-reviews__grid {
    grid-template-columns: 1fr;
  }

  .shop-reviews__cta {
    margin-left: 0;
  }

  .belofte__inner {
    padding-top:    44px;
    padding-bottom: 44px;
  }
}

@media (max-width: 560px) {

  .variants,
  .product-specs__rows {
    grid-template-columns: 1fr;
  }
}