/* ==========================================================================
   House ads Lowcarbcenter (bouwopdracht Quint 7 okt, ontwerp house-ads-v5). inc/house-ads.php.
   Het eerste deel is de CSS uit de bouwopdracht, ongewijzigd. Daaronder alleen wat het thema
   nodig heeft: plek 2 alleen desktop, plek 3 alleen mobiel, de stijl van de lopende tekst
   (regelhoogte, links) niet laten doorwerken, en niet printen.
   ========================================================================== */

.lcc-ha{color:#1f2a37;position:relative;background:#F4FAFD;border:1px solid #D6ECF6;border-radius:16px;box-shadow:0 4px 14px rgba(31,42,55,.06)}
.lcc-ha img{border-radius:0!important;max-width:none}
.lcc-ha--inline{padding:18px 20px 14px;margin:30px 0}
.lcc-ha--side{padding:16px;margin-top:24px;position:sticky;top:24px}
.lcc-ha__top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.lcc-ha--side .lcc-ha__top{flex-direction:column;align-items:flex-start;gap:4px}
.lcc-ha__logo{height:18px;width:auto;display:block}
.lcc-ha__kiyoh{font-size:11.5px;color:#6b7280;white-space:nowrap}
.lcc-ha__kiyoh .s{color:#f2b33d;letter-spacing:1px}
.lcc-ha__kiyoh b{color:#374151}
.lcc-ha__hook{font-size:13px;font-weight:600;color:#C2620F;margin:12px 0 2px}
.lcc-ha__kop{font-size:21px;line-height:1.25;font-weight:700;margin:0;color:#1f2a37}
.lcc-ha--side .lcc-ha__kop{font-size:18px}
.lcc-ha__zin{font-size:14px;color:#4b5563;margin:6px 0 0}
.lcc-ha__prod{display:grid;grid-template-columns:84px 1fr auto;gap:14px;align-items:center;background:#fff;border-radius:12px;padding:10px 12px;margin-top:12px}
.lcc-ha--side .lcc-ha__prod{grid-template-columns:80px 1fr}
.lcc-ha__img{position:relative}
.lcc-ha__img img{width:84px;height:70px;object-fit:contain}
.lcc-ha__naam{font-weight:600;font-size:14.5px;margin:0 0 3px;line-height:1.3}
.lcc-ha__stars{color:#f2b33d;font-size:12.5px;letter-spacing:1px}
.lcc-ha__rc{color:#6b7280;font-size:12px;margin-left:3px}
.lcc-ha__label{display:inline-block;background:#EAF5FB;color:#2B7FA3;font-size:12px;font-weight:600;border-radius:99px;padding:2px 9px;margin-top:5px}
.lcc-ha__prijs{font-weight:700;font-size:20px;line-height:1}
.lcc-ha__prijs sup{font-size:12px;vertical-align:top;position:relative;top:2px}
.lcc-ha__oud{color:#9ca3af;text-decoration:line-through;font-size:13px;margin-left:6px}
.lcc-ha__badge{position:absolute;top:2px;left:2px;background:#F28A3B;color:#fff;font-weight:700;font-size:11.5px;border-radius:6px;padding:2px 6px}
.lcc-ha__btn,.lcc-ha__btn:visited{display:flex;justify-content:center;align-items:center;background:#F28A3B;color:#fff!important;border-radius:10px;padding:10px 16px;font-weight:700;font-size:14.5px;text-decoration:none;white-space:nowrap}
.lcc-ha__btn:hover{background:#E57A2A}
.lcc-ha--side .lcc-ha__btn{margin-top:10px}
.lcc-ha__lever{font-size:12.5px;color:#4b7f5a;margin-top:8px}
.lcc-ha__mob,.lcc-ha__mobbtn{display:none}
/* mobiel */
@media (max-width:1023px){
  .lcc-ha__mob{display:inline}
  .lcc-ha__mobbtn{display:flex}
  .lcc-ha{padding:12px!important;margin:22px 0!important}
  .lcc-ha__logo{height:15px}
  .lcc-ha__kiyoh{font-size:11px}
  .lcc-ha__hook{margin-top:10px;font-size:12.5px}
  .lcc-ha__kop{font-size:18px}
  .lcc-ha__zin,.lcc-ha__stars,.lcc-ha__rc,.lcc-ha__lever,.lcc-ha__desk{display:none!important}
  .lcc-ha__prod{grid-template-columns:60px 1fr;gap:10px;padding:8px 10px;margin-top:10px}
  .lcc-ha__img img{width:60px;height:54px}
  .lcc-ha__naam{font-size:13.5px;margin:0}
  .lcc-ha__btn{margin-top:10px;padding:10px 14px}
}
/* wisselblok */
.lcc-ha__dia{display:none}
.lcc-ha__dia.is-on{display:block;animation:lccHaFade .4s ease}
@keyframes lccHaFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.lcc-ha__dia.is-on{animation:none}}

/* ---------- Aanvullingen voor het thema ---------- */

/* Niet de stijl van de lopende tekst (.entry-content: 17 px, regelhoogte 1.8, blauwe vette links). */
.lcc-ha{font-size:14px;line-height:1.4}
.entry-content .lcc-ha a.lcc-ha__btn{color:#fff;font-weight:700}
.entry-content .lcc-ha a.lcc-ha__btn:hover{text-decoration:none}
.entry-content > .lcc-ha .lcc-ha__zin{margin:6px 0 0}
.lcc-ha__btn:focus-visible{outline:2px solid #1f2a37;outline-offset:2px}

/* Zijbalk (80 px kolom): foto even breed. Wisselblok: knop onder de productregel. */
.lcc-ha--side .lcc-ha__img img{width:80px}
.lcc-ha__dia > .lcc-ha__btn{margin-top:10px}

/* Plek 2 alleen desktop (de zijbalk staat op mobiel onder de tekst), plek 3 alleen mobiel. */
@media (max-width:1023px){
  .lcc-ha--plek2{display:none!important}
}
@media (min-width:1024px){
  .lcc-ha--plek3{display:none!important}
}

/* Niet in de printweergave (Ctrl+P). */
@media print{.lcc-ha{display:none!important}}

/* ---------- A/B-test plek 1 (inc/ads.php, 9 okt) ----------
   #lcc-ab-plek1 bevat óf de house ad óf de AdPushup-plek oqruc (het inline script haalt de andere weg vóór
   de eerste weergave). Beide varianten krijgen DEZELFDE vaste ruimte, zodat de keuze en een latere terugval
   (adblock) niets laten verspringen (CLS): mobiel 300 px (336x280 + AdPushup-label), vanaf 1024 px 280 px
   (728x250 / 486x250 + label). De house ad (mobiel ~230-255 px, desktop ~265 px) staat verticaal in het
   midden; is hij hoger (smalle desktop 1024-1200 px, lange kop), dan groeit het vak mee.
   Geen overflow/transform/contain (flying carpet), geen afgeronde kaart om de advertentie. "Advertentie"
   staat alleen als rustige plaatshouder zolang het vak leeg is; daarna toont AdPushup zijn eigen label
   (advertenties.md punt 11: geen tweede label). */
.lcc-ab{display:flex;flex-direction:column;justify-content:center;min-height:300px;margin:22px 0}
.lcc-ab>.lcc-ha.lcc-ha--plek1{margin:0!important}
.lcc-ab__slot{position:relative;display:block;width:100%;min-height:300px;text-align:center;background:#F7F8FA}
.lcc-ab__slot::before{content:"Advertentie";position:absolute;top:8px;left:0;right:0;font-size:12px;line-height:16px;color:#9CA3AF}
.lcc-ab__slot:has(iframe){background:transparent}
.lcc-ab__slot:has(iframe)::before{content:none}
.lcc-ab__slot .adPushupAds{display:block}
@media (min-width:1024px){
  .lcc-ab{min-height:280px;margin:30px 0}
  .lcc-ab__slot{min-height:280px}
}
/* Desktop/tablet met de huidige AdPushup-config ("tasty", inc/ads.php): het A/B-script zet data-ab-mode=desk en
   variant desk_adpushup (desktop/tablet doet voorlopig niet mee aan de test). Geen house ad en geen eigen plek
   (0 hoog); AdPushup's sectie vóór .tasty-recipes (2x 300x250 / 728x250, 250 + 2x10 px) is de advertentie.
   #lcc-ap-reserve houdt die 270 px vooraf vrij; ads-ab.js krimpt hem in hetzelfde frame zodra de sectie er staat.
   Telefoon (data-ab-mode=oqruc): alles in onze plek, geen reservering vóór de kaart. */
.lcc-ap-reserve{display:none}
html[data-ab-plek1="desk_adpushup"] .lcc-ap-reserve{position:relative;display:block;height:270px;background:#F7F8FA}
html[data-ab-plek1="desk_adpushup"] .lcc-ap-reserve::before{content:"Advertentie";position:absolute;top:8px;left:0;right:0;text-align:center;font-size:12px;line-height:16px;color:#9CA3AF}
html[data-ab-plek1="desk_adpushup"] .lcc-ap-reserve.is-los{display:none}
.lcc-ab[data-ab-variant="desk_adpushup"]{min-height:0;margin:0}
@media print{.lcc-ab__slot,.lcc-ap-reserve{display:none!important}}