/* ============================================================
   ESTE SKLEP — PRO / "Editorial skincare" (top-tier)
   Inspiracja: Aesop, Augustinus Bader, Dr Barbara Sturm,
   Tata Harper, Necessaire. Kinowy hero, rozdziały kolorystyczne,
   oversized typo, storytelling składnikowy. Ładowana PO
   estesklep.css + estesklep-elevate.css. Most do estesalon.
   ============================================================ */

.fb{width:100vw;margin-left:calc(50% - 50vw)}
.display{font-family:var(--font-d);font-weight:300;letter-spacing:-.03em;line-height:1}
.serif{font-family:'Cormorant','Georgia',serif;font-style:italic;font-weight:600}

/* ---------- HERO kinowy: split, zdjęcie do krawędzi ---------- */
.cine{position:relative;display:grid;grid-template-columns:1.04fr .96fr;min-height:90vh;align-items:center}
.cine-copy{padding:40px 4vw 40px max(28px,calc((100vw - var(--container))/2 + 28px))}
.cine .eyebrow{display:inline-block;margin-bottom:26px}
.cine h1{font-size:clamp(46px,6.4vw,98px);font-weight:300;letter-spacing:-.03em;line-height:.97}
.cine h1 .serif{color:var(--deep)}
.cine .lead{margin:28px 0 36px;max-width:440px;font-size:17px;font-weight:300;color:var(--soft);line-height:1.7}
.cine-media{position:relative;height:90vh;overflow:hidden;background:var(--bg-alt)}
.cine-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.cine-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,rgba(248,246,241,0) 22%)}
.cine-card{position:absolute;left:28px;bottom:40px;z-index:3;background:#fff;border-radius:var(--r);padding:14px 22px 14px 14px;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow);max-width:330px}
.cine-card .thumb{width:66px;height:80px;border-radius:12px;background:var(--bg);flex-shrink:0;display:grid;place-items:center;overflow:hidden}
.cine-card .thumb img{width:100%;height:100%;object-fit:contain;padding:7px;transform:none}
.cine-card .d{font-family:var(--font-d);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--deep);font-weight:500}
.cine-card .t{display:block;font-size:13px;line-height:1.35;margin:5px 0 5px}
.cine-card .p{font-family:var(--font-d);font-size:16px;font-weight:600}
.cine-cue{position:absolute;left:max(28px,calc((100vw - var(--container))/2 + 28px));bottom:34px;z-index:3;font-family:var(--font-d);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:12px}
.cine-cue::before{content:"";width:40px;height:1px;background:var(--muted);display:inline-block;animation:cueline 2.2s ease-in-out infinite}
@keyframes cueline{0%,100%{transform:scaleX(.4);opacity:.4;transform-origin:left}50%{transform:scaleX(1);opacity:1;transform-origin:left}}
@media(max-width:980px){.cine{grid-template-columns:1fr;min-height:auto}.cine-copy{padding:60px 28px 30px}.cine-media{height:62vh}.cine-media::after{background:linear-gradient(0deg,var(--bg) 0%,rgba(248,246,241,0) 30%)}.cine-card{left:20px;bottom:20px}.cine-cue{display:none}}

/* ---------- MANIFEST: duże zdanie copy-forward (Aesop) ---------- */
.manifest{padding:130px 0}
.manifest .eyebrow{display:block;text-align:center;margin-bottom:34px}
.manifest p{max-width:1020px;margin:0 auto;text-align:center;font-family:var(--font-d);font-weight:300;font-size:clamp(26px,3.4vw,46px);line-height:1.28;letter-spacing:-.01em}
.manifest p .serif{color:var(--deep)}

/* ---------- Nagłówki sekcji XL (rytm estesalon, większa skala) ---------- */
.sec-head--xl{align-items:flex-end}
.sec-head--xl h2{font-size:clamp(34px,4.6vw,64px);font-weight:300;letter-spacing:-.02em;line-height:1.02;margin-top:18px}
.sec-head--xl .num{font-family:var(--font-d);font-size:12px;letter-spacing:.2em;color:var(--muted);font-weight:500}

/* ---------- ROZDZIAŁ CIEMNY: deep teal band, kontrast ---------- */
.dark{background:#0E3E3B;color:#EAEFEE}
.dark .inner{padding:120px 0}
.dark .eyebrow{color:#85D6D2}
.dark h2{font-size:clamp(32px,4.4vw,58px);font-weight:300;letter-spacing:-.02em;line-height:1.04;color:#fff;max-width:16ch}
.dark .h2 .serif,.dark h2 .serif{color:#85D6D2}
.dark .lead{color:#9DB0AE;max-width:520px;font-weight:300;margin-top:22px}
.dark .why{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:72px}
.dark .why .n{font-family:var(--font-d);font-size:13px;letter-spacing:.2em;color:#85D6D2;font-weight:500}
.dark .why h3{font-family:var(--font-d);font-size:23px;font-weight:400;color:#fff;margin:18px 0 12px;letter-spacing:-.005em}
.dark .why p{font-size:14.5px;font-weight:300;color:#9DB0AE;line-height:1.7}
.dark .why .item{padding-top:26px;border-top:1px solid rgba(133,214,210,.28)}
.dark .btn--white{border-color:rgba(255,255,255,.5);color:#fff}
.dark .btn--white:hover{background:#fff;color:#0E3E3B}
@media(max-width:860px){.dark .why{grid-template-columns:1fr;gap:32px}.dark .inner{padding:80px 0}}

/* ---------- SPLIT edytorski: zdjęcie + copy + chipy składników ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;min-height:560px}
.split .media{position:relative;overflow:hidden;background:var(--bg-alt)}
.split .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split .copy{padding:90px clamp(28px,5vw,86px);display:flex;flex-direction:column;justify-content:center}
.split--rev .media{order:2}
.split .copy h2{font-size:clamp(28px,3.2vw,46px);font-weight:300;letter-spacing:-.015em;line-height:1.08;margin-top:16px}
.split .copy h2 .serif{color:var(--deep)}
.split .copy .lead{margin:22px 0 26px;font-weight:300;color:var(--soft);max-width:460px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.chips span{font-family:var(--font-d);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--deep);background:var(--tint);border-radius:var(--r-pill);padding:9px 16px;font-weight:500}
@media(max-width:860px){.split{grid-template-columns:1fr}.split .media{min-height:62vw}.split--rev .media{order:0}.split .copy{padding:54px 28px}}

/* ---------- CTA band edytorski (tint, pełna szerokość) ---------- */
.ctaband{background:var(--tint);text-align:center}
.ctaband .inner{padding:110px 28px}
.ctaband .eyebrow{color:var(--deep)}
.ctaband h2{font-size:clamp(32px,4.4vw,60px);font-weight:300;letter-spacing:-.02em;line-height:1.04;margin:16px auto 14px;max-width:18ch}
.ctaband h2 .serif{color:var(--deep)}
.ctaband p{max-width:520px;margin:0 auto 30px;color:#33635f;font-weight:300}
@media(max-width:860px){.ctaband .inner{padding:72px 24px}}

/* ---------- INTERAKTYWNY DOBÓR PIELĘGNACJI ---------- */
.concern{padding:110px 0}
.concern-chips{display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 46px}
.concern-chip{font-family:var(--font-d);font-size:13px;letter-spacing:.03em;border:1px solid var(--line);background:#fff;color:var(--soft);border-radius:var(--r-pill);padding:12px 22px;cursor:pointer;transition:all .25s}
.concern-chip:hover{border-color:var(--deep);color:var(--deep);transform:translateY(-2px)}
.concern-chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
@media(max-width:560px){.concern{padding:72px 0}}