/* ============================================================
   PepsPlanit — Beauty Finds-specific styles
   The Beauty Room: warm, feminine, editorial. Blush, ivory,
   champagne gold, and midnight navy from the master palette.
   Imagery containers are swap-ready for real campaign photos
   (assets/images/beauty/, assets/images/editorial/).
   ============================================================ */

/* ---------- beauty hero ---------- */
.bty-hero{position:relative;overflow:hidden;background:linear-gradient(170deg,var(--soft-white) 0%,var(--blush) 62%,#EBD8CC 130%);padding:100px 0 88px;text-align:center}
.bty-hero::after{content:"";position:absolute;inset:0;opacity:.35;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")}
.bty-hero .wrap{position:relative;z-index:3}
.bty-hero .crumb{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:#9a948a;margin-bottom:22px;display:block}
.bty-hero .crumb a{color:var(--emerald)}
.bty-hero .crumb a:hover{color:var(--gold)}
.bty-hero h1{font-size:clamp(44px,6.2vw,76px);margin:18px 0 20px;letter-spacing:-.01em}
.bty-hero h1 i{font-style:italic;color:var(--emerald)}
.bty-hero p{font-size:16px;color:#6b5a4d;max-width:580px;margin:0 auto 36px}
.bty-visual{max-width:880px;margin:54px auto 0;position:relative;z-index:3}
.bty-visual svg{width:100%;height:auto;display:block}

/* ---------- curator's note ---------- */
.creed{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.creed-visual{position:relative;aspect-ratio:4/4.2;border-radius:22px;border:1px solid var(--border);box-shadow:var(--shadow);overflow:hidden}
.creed-copy h2{font-size:clamp(30px,3.6vw,42px);margin:14px 0 18px}
.creed-copy p{color:#5f5f5a;margin-bottom:16px;font-size:15.5px}
.creed-motto{margin-top:26px;border-top:1px solid var(--gold-soft);padding-top:20px;font-family:var(--display);font-style:italic;font-size:19px;line-height:1.7;color:#6b5a4d}

/* ---------- shop by mood (interactive buttons) ---------- */
.mood-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
button.mood{font-family:var(--body);text-align:center;display:flex;flex-direction:column;align-items:center;gap:7px;padding:28px 20px;cursor:pointer;background:rgba(255,255,255,.95);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s}
button.mood:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:var(--gold)}
button.mood .m-ring{width:52px;height:52px;border-radius:999px;border:1px solid var(--gold-soft);background:var(--warm-ivory);display:flex;align-items:center;justify-content:center;margin-bottom:4px;transition:background .3s,border-color .3s}
button.mood .m-ring svg{width:22px;height:22px;stroke:var(--emerald);fill:none;transition:stroke .3s}
button.mood h3{font-family:var(--display);font-weight:500;font-size:19px;color:var(--charcoal)}
button.mood p{font-size:11.5px;color:#8a857b;line-height:1.55}
button.mood[aria-pressed="true"]{border-color:var(--emerald);box-shadow:0 14px 34px rgba(63,107,91,.2);transform:translateY(-4px)}
button.mood[aria-pressed="true"] .m-ring{background:var(--emerald);border-color:var(--emerald)}
button.mood[aria-pressed="true"] .m-ring svg{stroke:#fff}
.mood-result{text-align:center;font-size:13.5px;color:#8a6f3d;font-family:var(--display);font-style:italic;min-height:22px;margin-top:26px}

/* highlighted find */

/* ---------- find your notes (families) ---------- */
.fam-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fam{padding:26px 24px;display:flex;flex-direction:column;gap:7px}
.fam h3{font-size:20px}
.fam .fam-notes{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gold)}
.fam p{font-size:12.5px;color:#7d7d77;line-height:1.65;flex:1}
.fam .link-more{font-size:10.5px;margin-top:8px}

/* size/format line on cards + quick view */
.notes-row{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 8px}
.notes-row span{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#8a6f3d;border:1px solid var(--gold-soft);border-radius:999px;padding:3px 9px}

/* ---------- scent finder ---------- */
.finder{background:var(--navy);border-radius:22px;padding:54px 50px;position:relative;overflow:hidden;border:1px solid rgba(201,169,110,.3);box-shadow:var(--shadow)}
.finder::before{content:"";position:absolute;inset:0;opacity:.35;background:radial-gradient(120% 100% at 85% 0%,rgba(242,232,227,.14),transparent 55%)}
.finder>*{position:relative;z-index:2}
.finder .eyebrow{color:var(--gold-soft)}
.finder .eyebrow::before{background:var(--gold-soft)}
.finder h2{color:#fff;font-size:clamp(28px,3.4vw,40px);margin:12px 0 8px}
.finder .finder-sub{color:#B7BFD2;font-size:14px;max-width:520px;margin-bottom:30px}
.fq{margin-bottom:26px}
.fq .fq-label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--gold-soft);display:block;margin-bottom:12px}
.fq .fq-q{font-family:var(--display);font-size:20px;color:#fff;margin-bottom:14px}
.fq-opts{display:flex;flex-wrap:wrap;gap:9px}
.fq-opts button{font-family:var(--body);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#D8DDE9;background:rgba(250,249,246,.06);border:1px solid rgba(201,169,110,.35);border-radius:999px;padding:11px 19px;cursor:pointer;transition:border-color .3s,background .3s,color .3s,transform .3s var(--ease)}
.fq-opts button:hover{border-color:var(--gold);color:#fff;transform:translateY(-2px)}
.fq-opts button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.finder-result{margin-top:8px;border-top:1px solid rgba(201,169,110,.3);padding-top:26px;display:none}
.finder-result.show{display:block}
.finder-result .fr-label{font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--gold-soft)}
.finder-result h3{font-family:var(--display);color:#fff;font-size:30px;margin:8px 0 2px}
.finder-result .fr-find{color:#B7BFD2;font-size:14px;margin-bottom:18px}
.finder-result .fr-find b{color:var(--gold-soft);font-weight:600}
.finder-hint{margin-top:10px;font-size:12px;color:#8792AB;font-style:italic;font-family:var(--display)}

/* ---------- mini bar ---------- */
.minibar-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.mini-tag{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#8a6f3d;border:1px solid var(--gold-soft);border-radius:999px;padding:5px 12px}

/* ---------- beyond the bottle ---------- */
.beyond-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.beyond{overflow:hidden;display:flex;flex-direction:column}
.beyond .photo{aspect-ratio:4/3;border-radius:0}
.beyond .b-body{padding:22px 24px;display:flex;flex-direction:column;gap:6px;flex:1}
.beyond h3{font-size:20px}
.beyond p{font-size:12.5px;color:#7d7d77;flex:1;line-height:1.65}
.beyond .link-more{font-size:10.5px;margin-top:8px}

/* ---------- layering stories ---------- */
.layer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.layer{padding:28px 26px;display:flex;flex-direction:column;gap:8px;border-top:3px solid var(--gold-soft)}
.layer .l-mood{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--gold)}
.layer h3{font-size:21px}
.layer .l-formula{font-family:var(--display);font-style:italic;font-size:15px;color:#6b5a4d;line-height:1.6}
.layer p{font-size:12.5px;color:#7d7d77;flex:1;line-height:1.65}
.layer .link-more{font-size:10.5px;margin-top:8px}

/* ---------- the beauty edit (golden hour) ---------- */
.golden{position:relative;overflow:hidden;min-height:460px;display:flex;align-items:center;background:radial-gradient(140% 125% at 26% 6%,#F7ECD6 0%,var(--gold-soft) 50%,#CBA97A 120%)}
.golden::before{content:"";position:absolute;inset:0;opacity:.45;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")}
.golden .sun{position:absolute;top:-70px;right:10%;width:300px;height:300px;border-radius:999px;background:radial-gradient(circle,rgba(255,255,255,.8),rgba(255,255,255,0) 70%)}
.golden-inner{position:relative;z-index:3;max-width:1240px;margin:0 auto;padding:88px 24px;width:100%}
.golden .issue{font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:#8a6f3d;display:block;margin-bottom:14px}
.golden h2{font-size:clamp(38px,5.4vw,66px);line-height:1.03;color:var(--navy);margin-bottom:18px}
.golden h2 i{font-style:italic}
.golden p{max-width:470px;color:#5b4d33;font-size:15.5px;margin-bottom:30px}
.golden .btn{background:var(--navy);color:#fff}
.golden .btn:hover{background:#16203A;transform:translateY(-2px);box-shadow:0 12px 28px rgba(31,42,68,.35)}

/* ---------- gift beautifully ---------- */
.gift-paths{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gift-path{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 24px;background:rgba(255,255,255,.95);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);font-family:var(--display);font-size:19px;font-weight:500;color:var(--charcoal);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.gift-path:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:var(--gold)}
.gift-path svg{width:16px;height:16px;stroke:var(--gold);fill:none;flex-shrink:0}
.gift-strip{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.gift-strip span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#7a7568;border:1px dashed var(--gold-soft);border-radius:999px;padding:11px 22px;background:rgba(255,255,255,.7)}

/* ---------- beauty notes: pyramid ---------- */
.pyramid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center;margin-bottom:56px}
.pyr-visual svg{width:100%;height:auto}
.pyr-steps{display:flex;flex-direction:column}
.pyr-steps>div{padding:22px 0;border-bottom:1px solid var(--border);display:flex;gap:22px;align-items:baseline}
.pyr-steps>div:last-child{border-bottom:none}
.pyr-steps b{font-family:var(--display);font-weight:600;font-size:21px;flex:0 0 120px}
.pyr-steps b small{display:block;font-family:var(--body);font-weight:600;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:4px}
.pyr-steps p{font-size:13.5px;color:#6b6b66;line-height:1.75}

/* (community shelf styles promoted to global.css — shared by beauty & lab) */

/* ---------- editorial moment (navy night) ---------- */
.bty-night{position:relative;min-height:500px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:linear-gradient(155deg,#151F34 0%,var(--navy) 48%,#2A3050 130%)}
.bty-night::before{content:"";position:absolute;inset:0;opacity:.3;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")}
.bty-night .blushlight{position:absolute;top:-90px;left:12%;width:340px;height:340px;border-radius:999px;background:radial-gradient(circle,rgba(242,232,227,.22),rgba(242,232,227,0) 70%)}
.bty-night-inner{position:relative;z-index:3;max-width:660px;padding:100px 24px}
.bty-night h2{font-size:clamp(34px,5vw,60px);line-height:1.08;color:#fff;margin-bottom:20px}
.bty-night h2 i{font-style:italic;color:var(--gold-soft)}
.bty-night .gold-rule{width:52px;height:1px;background:var(--gold);margin:0 auto 26px}
.bty-night p{color:#B7BFD2;font-size:15px;margin-bottom:32px}

@media (max-width:1080px){
  .mood-grid,.fam-grid,.beyond-grid,.layer-grid,.shelf-grid{grid-template-columns:repeat(2,1fr)}
  .creed,.pyramid{grid-template-columns:1fr;gap:44px}
  .gift-paths{grid-template-columns:repeat(2,1fr)}
  .finder{padding:44px 32px}
}
@media (max-width:720px){
  .mood-grid,.fam-grid,.beyond-grid,.layer-grid,.gift-paths{grid-template-columns:1fr}
  .bty-hero{padding:84px 0 68px}
  .bty-night{min-height:440px}
  .golden{min-height:420px}
  .pyr-steps b{flex-basis:90px}
  .finder{padding:38px 24px}
  .fq .fq-q{font-size:18px}
}