/* ==========================================================================
   Candyshop redesign — preview stylesheet (body.candyshop-redesign).
   Uitzondering: het kaartje-PDP-veld hoort bij het verborgen kaartje-product.
   ========================================================================== */

body.candyshop-redesign { --candyshop-redesign: on; }

/* ---- Punt 1: Kaartje — veld op de productpagina ------------------------- */
.candyshop-kaartje-field { margin: 0 0 1.25rem; }
.candyshop-kaartje-field .candyshop-kaartje-label {
  display: block;
  margin-bottom: .6rem;
  color: #555;
  line-height: 1.6;
}
.candyshop-kaartje-field .candyshop-kaartje-message {
  width: 100%;
  resize: vertical;
  min-height: 6rem;
  padding: .75rem .9rem;
  border: 1px solid #d5d5d5;
  border-radius: .6rem;
  font: inherit;
}
.candyshop-kaartje-field .candyshop-kaartje-message:focus {
  outline: 2px solid #F54F89;
  outline-offset: 1px;
  border-color: #F54F89;
}
.candyshop-kaartje-field .candyshop-kaartje-counter {
  margin-top: .3rem;
  font-size: .8rem;
  color: #888;
  text-align: right;
}

/* ---- Punt 1: Kaartje — sectie op de winkelwagenpagina ------------------- */
body.candyshop-redesign .candyshop-kaartje-toevoegen {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #ececec;
}
body.candyshop-redesign .candyshop-kaartje-title { margin: 0 0 1.5rem; }
body.candyshop-redesign .candyshop-kaartje-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
}
body.candyshop-redesign .candyshop-kaartje-card {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.1rem;
  border: 1px solid #e6e6e6;
  border-radius: .9rem;
  background: #fff;
  text-align: center;
}
body.candyshop-redesign .candyshop-kaartje-img img {
  width: 100%; height: auto; border-radius: .6rem; display: block;
}
body.candyshop-redesign .candyshop-kaartje-name { margin: 0; font-size: 1rem; }
body.candyshop-redesign .candyshop-kaartje-name a { color: inherit; text-decoration: none; }
body.candyshop-redesign .candyshop-kaartje-price { font-weight: 600; }
body.candyshop-redesign a.candyshop-kaartje-btn {
  display: inline-block;
  margin-top: .25rem;
  padding: .6rem 1.25rem;
  border-radius: 999px;
  background: #adcc61;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: filter .2s ease;
}
body.candyshop-redesign a.candyshop-kaartje-btn:hover,
body.candyshop-redesign a.candyshop-kaartje-btn:focus-visible { filter: brightness(0.94); }

/* ---- Punt 2: Cart progress bar ----------------------------------------- */
body.candyshop-redesign .candyshop-be-shipping-note {
  margin: -1rem 0 1.75rem;
  font-size: .82rem;
  color: #777;
  text-align: center;
}
body.candyshop-redesign .candyshop-progressbar {
  margin: 0 0 2rem;
  padding: 1.25rem 1.5rem 1rem;
  border: 0;
  border-radius: .9rem;
  background: #fff;
}
body.candyshop-redesign .cpb-message {
  margin: .9rem 0 0;
  text-align: center;
  font-size: 1rem;
  color: #141414;               /* tekst donker; alleen bedrag groen */
}
body.candyshop-redesign .cpb-message .cpb-rest { color: #adcc61; font-weight: 700; }
/* Confetti bij een nieuw behaalde status-stap in de winkelwagen. */
.csp-confetti { position: fixed; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2147483647; overflow: hidden; }
.csp-confetti i { position: absolute; top: -8vh; display: block; border-radius: 2px; will-change: transform, top; animation-name: cspFall; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes cspFall { to { top: 108vh; transform: rotate(680deg); } }
body.candyshop-redesign .cpb-message strong { color: #141414; }
body.candyshop-redesign .cpb-message.cpb-done { color: #141414; }
body.candyshop-redesign .cpb-emoji-inline { font-size: 1.05em; }

body.candyshop-redesign .cpb-bar { position: relative; }
body.candyshop-redesign .cpb-track {
  position: absolute;
  top: 2.65rem;                 /* op de verticale hartlijn van de bolletjes */
  left: 0; right: 0;
  height: 6px;
  border-radius: 999px;
  background: #E8E8E8;
  overflow: hidden;
  z-index: 0;
}
body.candyshop-redesign .cpb-fill {
  height: 100%;
  border-radius: 999px;
  background: #F54F89;
  transition: width .4s ease;
}
body.candyshop-redesign .cpb-points {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-around;  /* 3 bolletjes evenredig verdeeld */
  align-items: flex-start;
}
body.candyshop-redesign .cpb-point {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
body.candyshop-redesign .cpb-point .cpb-emoji {
  font-size: 1.5rem;
  line-height: 1;
  height: 1.9rem;
}
body.candyshop-redesign .cpb-point .cpb-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #919191;                  /* niet behaald: gevuld grijs */
  border: 3px solid #fff;               /* witte streep */
  box-shadow: 0 0 0 2px #d8d8d8;        /* dunne grijze lijn eromheen */
}
body.candyshop-redesign .cpb-point.is-reached .cpb-dot {
  background: #F54F89;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #F3C0CF;
}
body.candyshop-redesign .cpb-dot .cpb-check {
  width: 10px;
  height: 8px;
  opacity: 0;
}
body.candyshop-redesign .cpb-point.is-reached .cpb-dot .cpb-check {
  opacity: 1;
}
body.candyshop-redesign .cpb-point .cpb-plabel {
  margin-top: .55rem;
  font-size: .78rem;
  font-weight: 600;
  color: #141414;               /* labels donker */
  white-space: nowrap;          /* op één regel (desktop) */
}
@media (max-width: 575.98px) {
  body.candyshop-redesign .cpb-point .cpb-plabel {
    white-space: normal;        /* mobiel: mag wrappen ipv overlappen */
    font-size: .64rem;
    line-height: 1.2;
    padding: 0 3px;
  }
}

body.candyshop-redesign .cpb-be-note {
  margin: .5rem 0 0;
  font-size: .8rem;
  color: #777;
  text-align: center;
}

/* Compacter in de mini-cart/sidebar */
body.candyshop-redesign .cpb-mini { padding: .9rem 1rem; }
body.candyshop-redesign .cpb-mini .cpb-message { margin: 0 0 .8rem; text-align: left; font-size: .95rem; }
body.candyshop-redesign .cpb-mini .cpb-emoji,
body.candyshop-redesign .cpb-mini .cpb-plabel { display: none; }
body.candyshop-redesign .cpb-mini .cpb-bar { height: 1.7rem; }
body.candyshop-redesign .cpb-mini .cpb-track { top: 50%; transform: translateY(-50%); }

/* ---- Punt 3: Product-cards met opties ---------------------------------- */
body.candyshop-redesign .candyshop-card-actions { margin-top: .75rem; }
body.candyshop-redesign .candyshop-card-form {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0;
}
body.candyshop-redesign .candyshop-card-variation {
  width: 100%;
  padding: .55rem .65rem;
  border: 1px solid #d5d5d5;
  border-radius: .5rem;
  background: #fff;
  font: inherit;
}
body.candyshop-redesign .candyshop-card-variation:focus {
  outline: 2px solid #adcc61;
  outline-offset: 1px;
  border-color: #adcc61;
}
body.candyshop-redesign .candyshop-card-btn,
body.candyshop-redesign .candyshop-card-btn.add,
body.candyshop-redesign .candyshop-card-btn.view {
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: .9rem 1.25rem;
  border: 0;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: filter .2s ease;
  background: #adcc61;
  color: #fff;
}
body.candyshop-redesign .candyshop-card-btn:hover,
body.candyshop-redesign .candyshop-card-btn:focus-visible {
  filter: brightness(0.96);
}

/* ---- Punt 4: Categorie — SEO-tekst + FAQ onder het overzicht ----------- */
body.candyshop-redesign .candyshop-cat-extra {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #ececec;
}
body.candyshop-redesign .candyshop-cat-seo { margin-bottom: 2.5rem; }
body.candyshop-redesign .candyshop-cat-seo-title,
body.candyshop-redesign .candyshop-cat-faq-title { margin: 0 0 1rem; }
body.candyshop-redesign .candyshop-cat-seo-body { color: #444; line-height: 1.7; }
body.candyshop-redesign .candyshop-cat-seo-body p { margin: 0 0 1rem; }
body.candyshop-redesign .candyshop-faq-item { border-bottom: 1px solid #eaeaea; }
body.candyshop-redesign .candyshop-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  color: #141414;
  text-align: left;
}
body.candyshop-redesign .candyshop-faq-ind {
  position: relative;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
body.candyshop-redesign .candyshop-faq-ind::before,
body.candyshop-redesign .candyshop-faq-ind::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #adcc61;
}
body.candyshop-redesign .candyshop-faq-ind::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
body.candyshop-redesign .candyshop-faq-ind::after  { width: 2px; height: 14px; transform: translate(-50%, -50%); transition: opacity .2s ease; }
body.candyshop-redesign .candyshop-faq-q[aria-expanded="true"] .candyshop-faq-ind::after { opacity: 0; }
body.candyshop-redesign .candyshop-faq-a { max-height: 0; overflow: hidden; transition: max-height .32s ease; }
body.candyshop-redesign .candyshop-faq-item.is-open .candyshop-faq-a { max-height: 800px; }
body.candyshop-redesign .candyshop-faq-a-inner { padding: 0 0 1rem; color: #555; line-height: 1.7; }
body.candyshop-redesign .candyshop-faq-a-inner p { margin: 0 0 .75rem; }

/* ---- Punt 3 FIX: acties zichtbaar binnen de kaart ---------------------- */
/* Het thema geeft de card-link height:100%, waardoor de acties buiten de kaart
   vielen. Kaart als flex-kolom → acties netjes onderaan in de kaart. */
body.candyshop-redesign ul.products li.product {
  display: flex;
  flex-direction: column;
}
body.candyshop-redesign ul.products li.product a.woocommerce-loop-product__link {
  height: auto !important;
  flex: 0 0 auto;
}
body.candyshop-redesign .candyshop-card-actions {
  margin-top: auto;
  padding-top: .75rem;
  width: 100%;
}

/* ---- Toevoeg-popup vanaf OVERZICHT: thema geeft de breedte alleen op
   .single-product; op overzichtspagina's mist die → full-width. Zelfde
   breedte/afronding als de thema-popup, zodat 'ie ook hier een nette
   rechter-drawer is (overlay = thema-standaard body.interly-popup::before). */
body.candyshop-redesign .interly-addedtocart-popup {
  width: 600px !important;
  max-width: 100% !important;
  z-index: 100000000;
  border-radius: 16px 0 0 16px;
  padding-top: 1.75rem !important;   /* thema py-sm-8 gaf te veel loze ruimte bovenin */
}
@media (max-width: 575.98px) {
  body.candyshop-redesign .interly-addedtocart-popup { border-radius: 0; }
}

/* Popup "Anderen kochten ook"-slider: thema-CSS is .single-product-gescoped,
   dus op het overzicht misten de slide-breedtes → slides full-width → super hoog
   + niet sliddable. Repliceer de thema-regels voor de preview-popup. */
body.candyshop-redesign .interly-addedtocart-popup .interly-addedtocart-popup-related ul.products { margin: 0; }
body.candyshop-redesign .interly-addedtocart-popup .interly-addedtocart-popup-related .slick-list { overflow: hidden; }
/* Standaard 2-up slider: globale flex-track legt de 50%-slides horizontaal;
   arrows links/rechts, prev-icoon 180° zodat 'ie naar links wijst. */
body.candyshop-redesign .interly-addedtocart-popup .interly-addedtocart-popup-related .slick-prev { left: 6px; right: auto; }
body.candyshop-redesign .interly-addedtocart-popup .interly-addedtocart-popup-related .slick-next { right: 6px; left: auto; }
body.candyshop-redesign .interly-addedtocart-popup .interly-addedtocart-popup-related .slick-prev::after { transform: rotate(180deg); }

/* Popup-slider kaarten: zelfde stijl als de overzicht-kaarten (de [products]-
   shortcode zet ul.products direct in .woocommerce, waardoor de thema-titelregel
   niet matcht → base bold/links). Expliciet overschrijven + lijn om de kaart. */
body.candyshop-redesign .interly-addedtocart-popup-related li.product {
  border: 1px solid #e6e6e6 !important;
  border-radius: 14px;
  text-align: center;
  padding: 12px;
}
body.candyshop-redesign .interly-addedtocart-popup-related .woocommerce-loop-product__title {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #141414 !important;
  text-align: center !important;
  line-height: 19px !important;
}
body.candyshop-redesign .interly-addedtocart-popup-related .price {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #141414 !important;
  text-align: center !important;
  display: block;
}

/* ---- Sidebar-mini: progress bar in de 'toegevoegd aan winkelwagen'-popup -- */
body.candyshop-redesign .candyshop-cart-mini {
  margin: 0 0 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #eee;
}
body.candyshop-redesign .candyshop-cart-mini .candyshop-progressbar {
  margin: 0;
  padding: 0;
  border: 0;
}

/* ---- Punt 3 vervolg: OOS grijs + knoppen onderaan uitgelijnd ------------ */
body.candyshop-redesign .candyshop-card-btn.is-soldout {
  background: #c9c9c9;
  color: #fff;
}
/* Kaarten even hoog (ook in Slick-sliders) → knoppen op 1 lijn onderaan */
/* Slick-sliders even hoge kaarten → knoppen op 1 lijn onderaan. Slick's eigen
   CSS zet .slick-slide{height:100%}; met een auto-hoge track blokkeert dat juist
   de stretch (stretch geldt alleen bij height:auto). Dus: slide-hoogte terug naar
   auto, track flex+stretch. Werkt voor bare-li-slides (homepage) én wrapper-div-
   slides (li erin vult de slide). */
body.candyshop-redesign .slick-track { display: flex !important; align-items: stretch !important; }
/* Ruimte boven de slides zodat de hover-lift (translateY(-4px)) niet door de
   slick-list overflow:hidden bovenaan wordt afgeknipt. */
body.candyshop-redesign .slick-list { padding-top: 10px; margin-top: -10px; }
body.candyshop-redesign .slick-slide { height: auto !important; }
body.candyshop-redesign .slick-slide > li.product { height: 100% !important; }
/* Grid-overzichten (categorie/shop/zoeken): rij-genoten even hoog, zodat de
   knoppen via margin-top:auto op 1 lijn onderaan de kaart uitlijnen. */
body.candyshop-redesign ul.products { align-items: stretch; }

/* ===== Feedbackronde 10 jul — kaartjes + filter ========================== */

/* Gram-variatie: lichtgrijze pill, tekst 12px */
body.candyshop-redesign .candyshop-card-variation {
  border-radius: 999px !important;
  background: #F4F4F4 !important;
  border-color: #F4F4F4;
  font-size: 12px;
}
/* Knoppen: normaal gewicht (400) */
body.candyshop-redesign .candyshop-card-btn,
body.candyshop-redesign .candyshop-card-btn.add,
body.candyshop-redesign .candyshop-card-btn.view { font-weight: 400; }
/* Afgeronde product-afbeelding + kaart-hover: paar px omhoog, geen box-shadow */
body.candyshop-redesign ul.products li.product { border-radius: 14px; transition: transform .2s ease; }
body.candyshop-redesign ul.products li.product a.woocommerce-loop-product__link img { border-radius: 14px; }
body.candyshop-redesign ul.products li.product:hover { transform: translateY(-4px); box-shadow: none !important; }
/* Wishlist-hart over de afbeelding: 5px marge i.p.v. 10px */
body.candyshop-redesign .yith-wcwl-add-to-wishlist-button.yith-wcwl-add-to-wishlist-button-over-image { margin: 5px !important; }

/* Filter (WCAPF) */
body.candyshop-redesign .col-lg-3.interly-filteruitklap { padding-right: 0 !important; }
body.candyshop-redesign .wcapf-list-wrapper input[type="checkbox"]:not(:checked) { background: #F5F5F5 !important; }
body.candyshop-redesign .wcapf-noui-slider .wcapf-noui-connects,
body.candyshop-redesign .wcapf-noui-slider .wcapf-noui-connect { background: #646464 !important; }
body.candyshop-redesign .wcapf-noui-slider .wcapf-noui-handle { background: #19C6C5 !important; border-color: #19C6C5 !important; box-shadow: none !important; }

/* ===== Winkelwagen-feedback 10 jul ======================================= */
/* Kaartje-productkaart: titel normale donkere kleur (niet oranje) + hover-lift */
body.candyshop-redesign .candyshop-kaartje-name a { color: #141414 !important; }
body.candyshop-redesign .candyshop-kaartje-card { transition: transform .2s ease; }
body.candyshop-redesign .candyshop-kaartje-card:hover { transform: translateY(-4px); box-shadow: none; }
/* Product-cards: wat lucht binnen de kaart (overzicht/shop/zoeken) */
body.candyshop-redesign ul.products li.product { padding: 16px; }
/* Producttitel + prijs: direct in style.css aangepast (thema-regel had hogere
   specificiteit) — zie .woocommerce-loop-product__title.h2 / span.price. */
/* Laadspinner in de toevoeg-knop tijdens het ajax-toevoegen (home-slider e.d.) */
body.candyshop-redesign .candyshop-card-btn.loading { position: relative; color: transparent !important; pointer-events: none; }
body.candyshop-redesign .candyshop-card-btn.loading::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255,255,255,.55);
  border-top-color: #fff;
  border-radius: 50%;
  animation: cspspin .6s linear infinite;
}
@keyframes cspspin { to { transform: rotate(360deg); } }
/* Winkelwagenpagina: meer ruimte onderaan (voor de footer) */
body.candyshop-redesign.woocommerce-cart main.container-fluid { padding-bottom: 4rem !important; }

/* ===== Header: 'Ons assortiment'-knop weg, zoekbalk vult tot bij het logo ==== */
body.candyshop-redesign .interly-header-mainbar .interly-menu-button { display: none !important; }
body.candyshop-redesign .interly-header-mainbar .searchbar { padding-left: 0 !important; }