/* ════════════════════════════════════════════════════════════
   MEDENT — Product pages (Charcoal · A.R.T. · Sensitive)
   Themed via html[data-line] → --accent tokens.
   ════════════════════════════════════════════════════════════ */

/* ═══ HERO — full-bleed cinematic scene ═══ */
.phero{position:relative;min-height:92svh;padding:108px 0 48px;overflow:hidden;display:flex;align-items:center;background:var(--canvas)}
.phero__media{position:absolute;inset:0}
.phero__media img{width:100%;height:100%;object-fit:cover;object-position:70% center;animation:phero-in 1.6s var(--ease-out) both}
@keyframes phero-in{from{transform:scale(1.07)}to{transform:scale(1)}}
.phero__scrim{position:absolute;inset:0;pointer-events:none}
.phero__inner{position:relative;z-index:2;width:100%}
.phero__copy{max-width:640px;padding-left:clamp(12px,4vw,72px)}
.phero__pill{margin-bottom:var(--s5)}
.phero__title{font-size:var(--fs-h1);line-height:.98;margin-block:var(--s4) var(--s5)}
.phero__lede{margin-bottom:var(--s6)}
.phero__actions{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
/* light scenes (art, sensitive) */
.phero--light .phero__scrim{background:linear-gradient(95deg,rgba(248,247,244,.94) 0%,rgba(248,247,244,.7) 36%,rgba(248,247,244,.12) 64%,transparent 100%)}
/* dark scene (charcoal) */
.phero--dark .phero__scrim{background:linear-gradient(95deg,rgba(6,6,8,.84) 0%,rgba(6,6,8,.56) 38%,rgba(6,6,8,.12) 68%,transparent 100%)}
.phero--dark,.phero--dark .phero__title{color:#fff}
.phero--dark .phero__lede{color:rgba(255,255,255,.78)}
.phero--dark .pill{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff}
.phero--dark .btn-outline{border-color:rgba(255,255,255,.55);color:#fff}
.phero--dark .btn-outline:hover{background:#fff;color:#0E0E10;border-color:#fff}
@media(max-width:860px){
  .phero{min-height:82svh;padding-top:100px;padding-bottom:var(--s7)}
  .phero__inner{padding-inline:var(--s5)}
  .phero__copy{padding-left:0;max-width:none}
  .phero__title{font-size:clamp(2.4rem,9vw,3.4rem)}
  .phero__media img{object-position:64% center}
  .phero--light .phero__scrim{background:linear-gradient(180deg,rgba(248,247,244,.94) 0%,rgba(248,247,244,.6) 55%,rgba(248,247,244,.8) 100%)}
  .phero--dark .phero__scrim{background:linear-gradient(180deg,rgba(6,6,8,.78) 0%,rgba(6,6,8,.5) 55%,rgba(6,6,8,.66) 100%)}
  .phero__actions{gap:var(--s3)}
  .phero__actions .btn{flex:1 1 auto;justify-content:center}
}

/* ═══ MECHANISM — product poster + statement ═══ */
.pstate{position:relative;overflow:hidden}
.pstate__inner{display:grid;gap:var(--s8);align-items:center}
@media(min-width:940px){.pstate__inner{grid-template-columns:.8fr 1.2fr}}
.pstate__poster{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);max-width:440px;margin-inline:auto;width:100%}
.pstate__poster img{width:100%;height:auto;display:block}
.pstate__title{font-size:clamp(2.2rem,4.2vw,3.6rem);margin-bottom:var(--s5)}
.pstate__body p{max-width:62ch}
.pstate__body p + p{margin-top:var(--s4)}
.pstate .marker{display:block;margin-bottom:var(--s4)}

/* ═══ ACTIVES ═══ */
.ping{position:relative;overflow:hidden}
.ping__bg{position:absolute;inset:0;background:url('../assets/images/bg-science-2.webp') center/cover no-repeat;opacity:.85}
.ping__inner{position:relative;z-index:1}
.ping__grid{display:grid;gap:var(--s5);grid-template-columns:repeat(2,1fr)}
.ping__card{display:flex;gap:var(--s4);padding:var(--s6);border-radius:var(--r-l);background:rgba(255,255,255,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.ping__card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.ping__ic{width:56px;height:56px;flex-shrink:0;border-radius:16px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center}
.ping__card h4{margin-bottom:var(--s2);color:var(--navy)}
.ping__card p{font-size:.92rem;line-height:1.6}
@media(max-width:760px){.ping__grid{grid-template-columns:1fr}}

/* ═══ BENEFITS ═══ */
.pfeat__grid{display:grid;gap:var(--s4);grid-template-columns:repeat(5,1fr)}
.pfeat__card{padding:var(--s5);border-radius:var(--r-l);border:1px solid var(--hair);background:#fff;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.pfeat__card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 34%,transparent);box-shadow:var(--shadow)}
.pfeat__ic{width:46px;height:46px;border-radius:13px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:var(--s4)}
.pfeat__card h4{font-size:.95rem;margin-bottom:var(--s1)}
.pfeat__card p{font-size:.82rem;line-height:1.5}
@media(max-width:1080px){.pfeat__grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.pfeat__grid{grid-template-columns:repeat(2,1fr)}}

/* ═══ RITUAL (how to use + UGC) ═══ */
.puse__inner{display:grid;gap:var(--s8);align-items:center}
@media(min-width:940px){.puse__inner{grid-template-columns:.92fr 1.08fr}}
.puse__media{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);max-height:640px}
.puse__media img{width:100%;height:100%;object-fit:cover}
.puse__steps{display:flex;flex-direction:column;gap:var(--s5);margin-top:var(--s6)}
.puse__step{display:flex;gap:var(--s5);align-items:flex-start}
.puse__step-n{flex-shrink:0;width:46px;height:46px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-family:var(--fd);font-weight:800;font-size:1.05rem;display:flex;align-items:center;justify-content:center}
.puse__step h4{margin-bottom:2px}
.puse__step p{font-size:.92rem}


/* ═══ FREE-FROM ═══ */
.pcomp__row{display:grid;gap:var(--s4);grid-template-columns:repeat(3,1fr)}
.pcomp__badge{display:flex;align-items:center;gap:var(--s5);padding:var(--s6);border-radius:var(--r-l);background:#fff;border:1px solid var(--hair);box-shadow:var(--shadow);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.pcomp__badge:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.pcomp__badge svg{color:var(--accent);width:40px;height:40px;flex-shrink:0;transition:transform .35s var(--ease)}
.pcomp__badge:hover svg{transform:scale(1.12)}
.pcomp__badge strong{display:block;font-family:var(--fd);font-weight:700;font-size:1.05rem;color:var(--navy)}
.pcomp__badge span{font-size:.84rem;color:var(--ink-2)}
@media(max-width:760px){.pcomp__row{grid-template-columns:1fr}}

/* mechanism Buy Now */
.pstate__cta{margin-top:var(--s6)}

/* ═══ CLOSER ═══ */
.pcloser{text-align:center;background:linear-gradient(180deg,#fff,var(--accent-soft))}
.pcloser h2{max-width:22ch;margin-inline:auto;margin-block:var(--s4) var(--s3);font-size:clamp(2.2rem,4vw,3.4rem)}
.pcloser__meta{font-family:var(--fb);font-weight:500;font-size:.86rem;letter-spacing:.06em;color:var(--ink-3);margin-bottom:var(--s6)}
.pcloser__actions{display:flex;justify-content:center;gap:var(--s4);flex-wrap:wrap}