/* ==========================================================================
   Rover Nature — PDP concept "Tallow" — ronde 3
   Laadt NA pdp-tallow.css en pdp-tallow.v2.css.
   Onderwerp van deze ronde: het Rover Gezichtsserum moet je met één klik
   kunnen meenemen. Daarom:
     · .addon      — serum-toggle in de buybox (stap 3)
     · .duo        — routine-sectie serum -> tallow, met dezelfde toggle
     · .sticky__add— serum-chip in de sticky balk
     · xsell       — serum als hoofditem, gesynchroniseerd met de toggle
   ========================================================================== */

/* ==========================================================================
   1. ADD-ON IN DE BUYBOX
   ========================================================================== */
.addon{position:relative;display:grid;grid-template-columns:22px 66px 1fr auto;gap:14px;
  align-items:center;width:100%;text-align:left;background:#fff;border:1.5px solid var(--line);
  padding:16px 16px 16px 14px;cursor:pointer;font:inherit;color:inherit;
  transition:border-color .2s ease,background .2s ease,transform .2s ease}
.addon:hover{border-color:var(--gold)}
.addon:active{transform:scale(.995)}
.addon.is-on{border-color:var(--gold);background:rgba(198,171,116,.10)}

.addon__save{position:absolute;top:-11px;left:14px;background:var(--wine);color:#fff;
  font-family:var(--h);font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 9px;white-space:nowrap}

.addon__check{width:22px;height:22px;border:1.5px solid rgba(16,16,16,.28);border-radius:4px;
  display:grid;place-items:center;flex:none;transition:background .18s ease,border-color .18s ease}
.addon__check::after{content:"";width:11px;height:11px;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/contain no-repeat;
  background:#fff;transform:scale(.4);opacity:0;transition:transform .18s ease,opacity .18s ease}
.addon.is-on .addon__check{background:var(--gold);border-color:var(--gold)}
.addon.is-on .addon__check::after{transform:scale(1);opacity:1}

.addon__img{width:66px;height:66px;object-fit:cover;background:var(--beige);flex:none}
.addon__txt{display:grid;gap:4px;min-width:0}
.addon__txt b{font-family:var(--h);font-size:15px;letter-spacing:-.01em;line-height:1.25}
.addon__txt span{font-size:13px;line-height:1.55;opacity:.75}
.addon__meta{font-family:var(--h);font-size:10.5px!important;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;opacity:.55!important;margin-top:2px}
.addon__price{text-align:right;display:grid;gap:2px;white-space:nowrap}
.addon__price s{font-size:12.5px;opacity:.45}
.addon__price b{font-family:var(--h);font-size:17px}
.addon__price em{font-style:normal;font-family:var(--h);font-size:9.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--wine)}

.addon__why{display:flex;align-items:flex-start;gap:9px;margin-top:10px;padding:11px 13px;
  background:var(--beige);font-size:13px;line-height:1.6}
.addon__why svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--wine)}
.addon__why b{font-family:var(--h)}
.addon__why a{border-bottom:1px solid var(--line);font-weight:600}
.addon__why a:hover{border-color:var(--ink)}

/* het regeltje in de prijsopbouw als het serum meeloopt */
.lineitems{display:grid;gap:5px;margin:0 0 12px;font-size:13px}
.lineitems div{display:flex;justify-content:space-between;gap:12px;opacity:.78}
.lineitems div b{font-weight:600}
.lineitems .is-add{color:var(--wine);opacity:1}

@media(max-width:520px){
  .addon{grid-template-columns:22px 1fr auto;row-gap:10px;padding:16px 14px}
  .addon__img{display:none}
  .addon__price{text-align:right}
}

/* ==========================================================================
   2. ROUTINE-SECTIE (serum -> tallow)
   ========================================================================== */
.duo{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch}
@media(max-width:900px){.duo{grid-template-columns:1fr;gap:14px}}

.duostep{position:relative;background:var(--cream);border:1px solid rgba(16,16,16,.10);
  padding:clamp(22px,2.6vw,32px);display:grid;gap:14px;align-content:start}
.sec--dark .duostep{background:rgba(255,255,255,.045);border-color:rgba(198,171,116,.28)}
.duostep--hero{border-color:var(--gold)}
.duostep__n{font-family:var(--h);font-size:10px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold)}
.duostep__img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--beige)}
.duostep h3{font-size:21px;margin:0}
.duostep p{font-size:14.5px;line-height:1.7;margin:0;opacity:.8}
.duostep ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:13.5px;opacity:.82}
.duostep li{display:flex;gap:9px;align-items:flex-start;line-height:1.5}
.duostep li svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--gold)}
.duostep__price{font-family:var(--h);font-size:15px;display:flex;align-items:baseline;gap:9px}
.duostep__price s{font-size:13px;opacity:.45;font-family:var(--b)}
.duostep__price em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold)}

.duoplus{display:grid;place-items:center;font-family:var(--h);font-size:26px;color:var(--gold);
  opacity:.7;align-self:center}
@media(max-width:900px){.duoplus{font-size:20px}}

.duobar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  margin-top:22px;padding:20px clamp(18px,2.4vw,28px);border:1px solid var(--gold);
  background:rgba(198,171,116,.10)}
.duobar__l{display:grid;gap:3px}
.duobar__t{font-family:var(--h);font-size:16px}
.duobar__s{font-size:13.5px;opacity:.75}
.duobar__p{font-family:var(--h);font-size:22px;display:flex;align-items:baseline;gap:10px}
.duobar__p s{font-size:15px;opacity:.45;font-family:var(--b)}
.duobar .btn{width:auto}
@media(max-width:640px){.duobar{flex-direction:column;align-items:stretch}.duobar .btn{width:100%}}

/* ==========================================================================
   3. STICKY BAR — serum-chip
   ========================================================================== */
.sticky__add{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(198,171,116,.55);
  background:rgba(198,171,116,.14);color:inherit;font-family:var(--h);font-size:10.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;padding:7px 11px;cursor:pointer;white-space:nowrap;
  transition:background .2s ease,border-color .2s ease}
.sticky__add:hover{background:rgba(198,171,116,.3)}
.sticky__add.is-on{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.sticky__add::before{content:"+";font-size:13px;line-height:1}
.sticky__add.is-on::before{content:"✓"}
@media(max-width:820px){.sticky__add{display:none}}

/* ==========================================================================
   4. CROSS-SELL — serum als hoofditem
   ========================================================================== */
.xitem--hero{border-color:var(--gold)!important;position:relative}
.xitem--hero::after{content:"Meest toegevoegd";position:absolute;top:-10px;left:14px;
  background:var(--gold);color:var(--ink);font-family:var(--h);font-size:9px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;padding:4px 9px}
.xprice s{font-size:12px;opacity:.45;margin-right:6px;font-weight:400}

/* ==========================================================================
   5. PULSE — korte aandacht bij het serum als je erheen springt
   ========================================================================== */
@keyframes rnPulse{
  0%{box-shadow:0 0 0 0 rgba(198,171,116,.85)}
  70%{box-shadow:0 0 0 14px rgba(198,171,116,0)}
  100%{box-shadow:0 0 0 0 rgba(198,171,116,0)}
}
.is-pulsing{animation:rnPulse 1.1s ease-out 2}