/* ============================================================
   SkinCeuticals brandpagina — Veloura Skin plugin
   Shortcode: [skinceuticals_brandpagina]
   Alle selectors zijn geprefixt met .skc zodat thema- en
   pagebuilder-styles (Rey / Elementor) de opmaak niet overschrijven.
   ============================================================ */

/* --- Thema-resets binnen de brandpagina --- */
.skc, .skc * { box-sizing: border-box; }
.skc h2, .skc h3, .skc h4, .skc p, .skc span, .skc strong, .skc em, .skc a, .skc img {
  margin: 0; padding: 0; font-family: inherit; color: inherit; line-height: inherit;
}
.skc .skc-sectie h2, .skc .skc-sectie h3, .skc .skc-sectie p,
.skc .skc-hero__cta p, .skc .skc-nav a, .skc .skc-breadcrumb a { margin: 0; padding: 0; text-decoration: none; }
.skc h2, .skc h3 { text-transform: none; letter-spacing: normal; font-weight: 600; }
.skc a, .skc a:hover, .skc a:focus { text-decoration: none; box-shadow: none; outline-offset: 2px; }
.skc a:focus-visible { outline: 2px solid #0a0a0a; }
.skc ul, .skc ol { list-style: none; margin: 0; padding: 0; }
.skc img { max-width: 100%; height: auto; border-radius: 0; box-shadow: none; }

.skc{
  --skc-zwart:#0a0a0a;
  --skc-wit:#ffffff;
  --skc-grijs:#f5f5f3;
  --skc-lijn:#e4e4e0;
  --skc-tekst:#1a1a1a;
  --skc-subtekst:#6b6b68;
  --skc-max:1200px;
}

.skc *,.skc *::before,.skc *::after{box-sizing:border-box;margin:0;padding:0}
.skc{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  color:var(--skc-tekst);
  background:var(--skc-wit);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.skc img{max-width:100%;display:block}
.skc a{color:inherit;text-decoration:none}

.skc .skc-container{max-width:var(--skc-max);margin:0 auto;padding:0 20px}
.skc .skc-sectie{padding:64px 0}
.skc .skc-sectie--grijs{background:var(--skc-grijs)}
.skc .skc-sectie--zwart{background:var(--skc-zwart);color:var(--skc-wit)}

/* --- Typografie --- */
.skc-eyebrow{
  display:block;text-align:center;
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--skc-subtekst);margin-bottom:14px;
}
.skc .skc-sectie--zwart .skc-eyebrow{color:#b5b5b0}
.skc .skc-h2{
  text-align:center;font-weight:600;
  font-size:clamp(22px,3vw,32px);
  letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:18px;
}
.skc .skc-h3{
  font-weight:600;font-size:15px;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px;
}
.skc .skc-intro{
  max-width:760px;margin:0 auto 40px;text-align:center;
  font-size:15px;color:var(--skc-subtekst);
}
.skc .skc-sectie--zwart .skc-intro{color:#cfcfca}
.skc .skc-voetnoot{font-size:11px;color:var(--skc-subtekst);margin-top:22px;text-align:center}

/* --- Knoppen --- */
.skc .skc-knop{
  display:inline-block;padding:14px 36px;
  background:var(--skc-zwart);color:var(--skc-wit);
  font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  border:1px solid var(--skc-zwart);cursor:pointer;
  transition:background .2s,color .2s;
}
.skc .skc-knop:hover{background:var(--skc-wit);color:var(--skc-zwart)}
.skc .skc-knop--wit{background:var(--skc-wit);color:var(--skc-zwart);border-color:var(--skc-wit)}
.skc .skc-knop--wit:hover{background:transparent;color:var(--skc-wit)}
.skc .skc-knop--lijn{background:transparent;color:var(--skc-zwart);border:1px solid var(--skc-zwart)}
.skc .skc-knop--lijn:hover{background:var(--skc-zwart);color:var(--skc-wit)}
.skc .skc-knopcentrum{text-align:center;margin-top:36px}

/* --- Merkbalk / navigatie --- */
.skc-merkbalk{background:var(--skc-zwart);padding:26px 20px;text-align:center}
.skc .skc-merkbalk img{height:30px;width:auto;margin:0 auto}
.skc .skc-breadcrumb{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--skc-subtekst);padding:14px 0;
}
.skc .skc-breadcrumb a:hover{color:var(--skc-zwart)}
.skc .skc-nav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 28px;
  padding:16px 20px;border-top:1px solid #2a2a2a;background:var(--skc-zwart);
}
.skc .skc-nav a{
  color:#d8d8d3;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  padding:4px 0;border-bottom:1px solid transparent;
}
.skc .skc-nav a:hover{color:var(--skc-wit);border-bottom-color:var(--skc-wit)}

/* --- Hero --- */
.skc-hero{position:relative}
.skc .skc-hero img{width:100%;height:auto}
.skc .skc-hero__cta{text-align:center;padding:28px 20px;background:var(--skc-grijs)}
.skc .skc-hero__cta p{
  font-size:13px;letter-spacing:.24em;text-transform:uppercase;
  margin-bottom:16px;color:var(--skc-tekst);
}

/* --- Merkintroductie --- */
.skc-splitsing{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.skc .skc-splitsing .skc-h2,.skc .skc-splitsing .skc-eyebrow{text-align:left}
.skc .skc-splitsing p{margin-bottom:16px;font-size:15px;color:#3c3c3a}
.skc .skc-claim{
  border-top:1px solid var(--skc-lijn);border-bottom:1px solid var(--skc-lijn);
  padding:22px 0;margin:26px 0;
  font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}

/* --- Filosofie: Prevent / Correct / Protect --- */
.skc-pijlers{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--skc-lijn)}
.skc .skc-pijler{background:var(--skc-wit);padding:44px 34px;text-align:center}
.skc .skc-pijler__nummer{
  font-size:12px;letter-spacing:.3em;color:var(--skc-subtekst);
  display:block;margin-bottom:16px;
}
.skc .skc-pijler h3{font-size:20px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;margin-bottom:14px}
.skc .skc-pijler p{font-size:14px;color:var(--skc-subtekst)}

/* --- Categorie-tegels --- */
.skc-tegels{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.skc .skc-tegel{position:relative;overflow:hidden;background:var(--skc-grijs)}
.skc .skc-tegel img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .4s}
.skc .skc-tegel:hover img{transform:scale(1.04)}
.skc .skc-tegel__label{
  position:absolute;left:0;right:0;bottom:0;
  background:rgba(10,10,10,.82);color:var(--skc-wit);
  padding:14px 18px;display:flex;justify-content:space-between;align-items:center;
}
.skc .skc-tegel__label span{font-size:13px;letter-spacing:.24em;text-transform:uppercase;font-weight:600}
.skc .skc-tegel__label em{font-style:normal;font-size:11px;letter-spacing:.14em;color:#c9c9c4}

/* --- Huidproblemen --- */
.skc-problemen{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.skc .skc-probleem{
  background:var(--skc-wit);border:1px solid var(--skc-lijn);
  padding:28px 20px;text-align:center;transition:border-color .2s,transform .2s;
}
.skc .skc-probleem:hover{border-color:var(--skc-zwart);transform:translateY(-3px)}
.skc .skc-probleem strong{
  display:block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;margin-bottom:8px;
}
.skc .skc-probleem span{font-size:12px;color:var(--skc-subtekst)}

/* --- Productkaarten --- */
.skc-producten{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.skc .skc-producten--3{grid-template-columns:repeat(3,1fr)}
.skc .skc-kaart{
  background:var(--skc-wit);border:1px solid var(--skc-lijn);
  color:var(--skc-tekst);
  display:flex;flex-direction:column;transition:box-shadow .2s;
}
.skc .skc-kaart .skc-kaart__link{border-bottom-color:var(--skc-zwart)}
.skc .skc-kaart:hover{box-shadow:0 10px 30px rgba(0,0,0,.08)}
.skc .skc-kaart__foto{background:var(--skc-wit);padding:18px}
.skc .skc-kaart__foto img{width:100%;aspect-ratio:1/1;object-fit:contain}
.skc .skc-kaart__info{
  padding:0 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1;
}
.skc .skc-kaart__naam{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.skc .skc-kaart__meta{font-size:11px;letter-spacing:.08em;color:var(--skc-subtekst);text-transform:uppercase}
.skc .skc-kaart__omschrijving{
  font-size:10.5px;letter-spacing:.05em;line-height:1.5;
  color:var(--skc-subtekst);text-transform:uppercase;flex:1;
}
.skc .skc-kaart__link{
  margin-top:10px;align-self:flex-start;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  border-bottom:1px solid var(--skc-zwart);padding-bottom:3px;
}
.skc .skc-kaart__link:hover{color:var(--skc-subtekst);border-color:var(--skc-subtekst)}
.skc .skc-badge{
  position:absolute;top:12px;left:12px;background:var(--skc-zwart);color:var(--skc-wit);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding:5px 10px;
}
.skc .skc-kaart{position:relative}

/* --- Assortiment categorie-koppen --- */
.skc-catkop{margin:56px 0 26px}
.skc .skc-catkop:first-of-type{margin-top:0}
.skc .skc-catkop img{width:100%;height:auto}
.skc .skc-catkop__titel{
  display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:2px solid var(--skc-zwart);padding:18px 0 10px;
}
.skc .skc-catkop__titel h3{font-size:18px;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.skc .skc-catkop__titel span{font-size:12px;color:var(--skc-subtekst);letter-spacing:.1em;text-transform:uppercase}

/* --- Vitamine C keuzehulp --- */
.skc-duke{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:#2a2a2a;margin-bottom:56px}
.skc .skc-duke__item{background:var(--skc-zwart);padding:36px 30px;text-align:center}
.skc .skc-duke__item strong{
  display:block;font-size:26px;font-weight:300;letter-spacing:.06em;margin-bottom:12px;color:var(--skc-wit);
}
.skc .skc-duke__item p{font-size:13px;color:#b5b5b0}

/* --- Integrated Skincare --- */
.skc-behandelingen{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:40px}
.skc .skc-behandeling{text-align:center}
.skc .skc-behandeling img{aspect-ratio:1/1;object-fit:cover;width:100%;margin-bottom:12px}
.skc .skc-behandeling span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--skc-subtekst)}

/* --- Video --- */
.skc-video{position:relative;max-width:900px;margin:0 auto;aspect-ratio:16/9;background:var(--skc-zwart);overflow:hidden}
.skc .skc-video iframe,.skc .skc-video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.skc .skc-video__placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.skc .skc-video__placeholder img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.skc .skc-video__afspelen{
  position:relative;z-index:1;width:76px;height:76px;border-radius:50%;
  border:2px solid var(--skc-wit);display:flex;align-items:center;justify-content:center;
}
.skc .skc-video__afspelen::after{
  content:"";border-style:solid;border-width:12px 0 12px 20px;
  border-color:transparent transparent transparent var(--skc-wit);margin-left:5px;
}

/* --- Authorized retailer --- */
.skc-retailer{display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap}
.skc .skc-retailer img{width:min(420px,90vw);height:auto}
.skc .skc-retailer div{max-width:520px}
.skc .skc-retailer p{font-size:14px;color:var(--skc-subtekst)}

/* --- Responsief --- */
@media(max-width:960px){
  .skc .skc-producten{grid-template-columns:repeat(3,1fr)}
  .skc .skc-problemen{grid-template-columns:repeat(2,1fr)}
  .skc .skc-behandelingen{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:720px){
  .skc .skc-sectie{padding:44px 0}
  .skc .skc-splitsing{grid-template-columns:1fr;gap:32px}
  .skc .skc-pijlers{grid-template-columns:1fr}
  .skc .skc-tegels{grid-template-columns:repeat(2,1fr);gap:14px}
  .skc .skc-producten,.skc .skc-producten--3{grid-template-columns:repeat(2,1fr);gap:14px}
  .skc .skc-duke{grid-template-columns:1fr}
}
@media(max-width:480px){
  .skc .skc-problemen{grid-template-columns:1fr}
  .skc .skc-behandelingen{grid-template-columns:repeat(2,1fr)}
}

/* --- Aanvullingen voor de WordPress-shortcode --- */
.skc .skc-header { margin: 0; }
.skc .skc-merkbalk img { height: 30px; width: auto; max-width: 260px; }
.skc .skc-h2--wit { color: #ffffff; }
.skc .skc-bron { font-size: 11px; color: #6b6b68; }
.skc .skc-kaart__foto a { display: block; }
.skc .skc-kaart__foto img { aspect-ratio: 1 / 1; object-fit: contain; width: 100%; }
.skc .skc-kaart__prijs { font-size: 14px; font-weight: 600; letter-spacing: .06em; color: #0a0a0a; }
.skc .skc-kaart__prijs del { color: #9a9a96; font-weight: 400; margin-right: 6px; }
.skc .skc-kaart__prijs ins { text-decoration: none; }
.skc .skc-kaart__prijs .woocommerce-Price-currencySymbol { font-weight: inherit; }
.skc .skc-kaart__omschrijving--plain { text-transform: none; font-size: 13px; letter-spacing: 0; }
.skc .skc-producten--keuzehulp { margin-top: 36px; }
.skc .skc-kaart__link--uit { color: #9a9a96; border-bottom-color: transparent; cursor: default; }
.skc .skc-catkop__titel span a { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.skc .skc-catkop__titel span a:hover { color: #0a0a0a; }
.skc .skc-cta .skc-cta__inner { text-align: center; }
.skc .skc-cta .skc-intro { margin-bottom: 28px; }
.skc .skc-knop, .skc .skc-knop:hover, .skc .skc-knop:focus { border-radius: 0; text-decoration: none; line-height: 1.4; }
.skc .skc-sectie--zwart .skc-kaart { color: #1a1a1a; }
@media (max-width: 720px) {
  .skc .skc-catkop__titel { flex-direction: column; gap: 6px; align-items: flex-start; }
  .skc .skc-merkbalk { padding: 18px 16px; }
  .skc .skc-nav { gap: 4px 18px; }
}