/* ============================================================
   PepsPlanit — Biotech Skincare-specific styles
   Master design system: do not fork per page.
   Photography: .photo containers are swap-ready — replace inner
   .still SVG with <img class="campaign" src="assets/images/...">
   ============================================================ */

/* ---------- biotech skincare collection additions ---------- */
.skn-hero{padding:100px 0 84px}
.skn-hero .hero-visual{max-width:940px;margin:52px auto 0;border-radius:22px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow);position:relative;aspect-ratio:21/9}
/* philosophy */
.phil{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.phil-visual{position:relative;aspect-ratio:4/4.4;border-radius:22px;border:1px solid var(--border);box-shadow:var(--shadow);overflow:hidden}
.phil-copy h2{font-size:clamp(30px,3.6vw,42px);margin:14px 0 18px}
.phil-copy p{color:#5f5f5a;margin-bottom:16px;font-size:15.5px}
.phil-pillars{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:28px}
.phil-pillars div{border-top:1px solid var(--gold-soft);padding-top:14px}
.phil-pillars b{font-family:var(--display);font-weight:600;font-size:18px;display:block;margin-bottom:4px}
.phil-pillars span{font-size:12px;color:#8a857b;line-height:1.5;display:block}
/* shop by concern */
.concern-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.concern{padding:30px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.concern .c-ring{width:56px;height:56px;border-radius:999px;border:1px solid var(--gold-soft);background:var(--warm-ivory);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.concern .c-ring svg{width:24px;height:24px;stroke:var(--emerald);fill:none}
.concern h3{font-size:20px}
.concern p{font-size:12.5px;color:#7d7d77;flex:1}
/* ritual meta */
.r-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.r-meta span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#7a7568;border:1px solid var(--border);background:rgba(255,255,255,.85);border-radius:999px;padding:5px 12px;display:inline-flex;align-items:center;gap:6px}
.r-meta svg{width:11px;height:11px;stroke:var(--gold);fill:none}
/* ingredients */
.ing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ing{padding:28px 24px;display:flex;flex-direction:column;gap:8px}
.ing .ing-art{height:74px;display:flex;align-items:center;justify-content:flex-start;margin-bottom:6px}
.ing .ing-art svg{height:100%;width:auto}
.ing h3{font-size:19px}
.ing .ing-what{font-size:12.5px;color:#7d7d77;flex:1}
.ing .ing-benefit{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--emerald);margin-top:6px}
.ing .ing-in{font-size:11.5px;color:#9a948a;border-top:1px solid var(--border);padding-top:10px;margin-top:8px}
.ing .ing-in a{color:var(--emerald);border-bottom:1px solid var(--gold)}
/* learn extra links */
.more-links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.more-links a{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--border);background:rgba(255,255,255,.9);border-radius:999px;padding:12px 22px;transition:border-color .3s,color .3s,transform .3s var(--ease)}
.more-links a:hover{border-color:var(--gold);color:var(--emerald);transform:translateY(-2px)}
/* story band */
.story-band{position:relative;min-height:520px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:radial-gradient(140% 120% at 24% 10%,#F9F0EA 0%,var(--blush) 48%,#E2CCBF 100%)}
.story-band::before{content:"";position:absolute;inset:0;opacity:.4;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.story-band .glow{position:absolute;top:-80px;left:10%;width:300px;height:300px;border-radius:999px;background:radial-gradient(circle,rgba(255,255,255,.8),rgba(255,255,255,0) 70%)}
.story-band-inner{position:relative;z-index:5;max-width:680px;padding:100px 24px}
.story-band h2{font-size:clamp(36px,5.4vw,64px);line-height:1.06;color:var(--navy);margin-bottom:22px}
.story-band h2 i{font-style:italic}
.story-band p{color:#6b5a4d;font-size:15.5px;margin-bottom:34px}
/* FAQ */
.faq{max-width:760px;margin:0 auto}
.faq details{background:rgba(255,255,255,.95);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden;transition:box-shadow .3s}
.faq details:hover{box-shadow:var(--shadow-hover)}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px;font-family:var(--display);font-size:19px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--body);font-weight:300;font-size:22px;color:var(--gold);transition:transform .35s var(--ease);line-height:1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .faq-body{padding:0 26px 24px;font-size:14px;color:#6b6b66;line-height:1.75}
/* related collections */

@media (max-width:1080px){
.concern-grid,.ing-grid{grid-template-columns:repeat(2,1fr)}
.phil{grid-template-columns:1fr;gap:44px}
.rel-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:720px){
.concern-grid,.ing-grid{grid-template-columns:1fr}
.rel-grid{grid-template-columns:repeat(2,1fr)}
.phil-pillars{grid-template-columns:1fr;gap:14px}
.skn-hero .hero-visual{aspect-ratio:4/3}
.story-band{min-height:440px}
}