/* ==========================================================================
   Olabella v6 — podstrony w języku strony głównej.
   Nagłówek-scena (.pg-hero), treść ze spisem rozdziałów (.pg-body), „O marce” (.ch),
   kontakt, FAQ, journal (siatka magazynu) i wpis. Ładowany na wszystkich stronach poza główną.
   ========================================================================== */

/* ---------- Nagłówek podstrony ---------- */
.pg-hero{position:relative;background:var(--choc);color:var(--cream)}
.pg-pin{position:relative;display:flex;align-items:flex-end;min-height:clamp(360px,58svh,620px);overflow:hidden}
.pg-copy{position:relative;z-index:2;width:100%;padding-top:calc(var(--hdr) + 24px);padding-bottom:clamp(40px,7svh,88px)}
.pg-hero .crumbs{padding:0 0 clamp(24px,5svh,56px);color:rgba(244,232,216,.62);letter-spacing:.08em}
.pg-hero .crumbs a:hover{color:var(--cream)}
.pg-eyebrow{margin:0 0 16px;font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:rgba(244,232,216,.8)}
.pg-title{margin:0;font-family:var(--cond);font-weight:400;font-size:clamp(3.6rem,10vw,11rem);line-height:.86;letter-spacing:-.03em;color:#F4E8D8;max-width:14ch;text-wrap:balance}
.pg-title em{font-style:normal;color:#C9A48A}
.pg-lead{max-width:46ch;margin:clamp(18px,3svh,30px) 0 0;font-size:clamp(15px,1.15vw,17px);line-height:1.7;color:rgba(244,232,216,.86)}
/* wejście */
@keyframes pgrise{from{opacity:0;translate:0 34px}to{opacity:1;translate:0 0}}
.js .pg-title,.js .pg-eyebrow,.js .pg-lead{animation:pgrise 1.2s var(--ease) backwards}
.js .pg-eyebrow{animation-delay:.1s}.js .pg-lead{animation-delay:.35s}

/* scena ze zdjęciem: karta po prawej rośnie do pełnego ekranu, tytuł zostaje nad zdjęciem */
.pg-hero.has-img{height:170svh}
.pg-hero.has-img .pg-pin{position:sticky;top:0;height:100svh;min-height:0;--a:clamp(0,calc(var(--p,0) / .7),1)}
.has-img .pg-copy{padding-bottom:calc(clamp(40px,8svh,96px) + var(--lift,0px));transform:translateY(calc(var(--a) * -5svh))}
.has-img .pg-title{max-width:min(46vw,12ch);font-size:clamp(3.4rem,8.6vw,10rem)}
.has-img .pg-lead{max-width:min(40vw,46ch)}
.pg-media{position:absolute;inset:0;z-index:1;
  clip-path:inset(calc((1 - var(--a)) * (var(--hdr) + 6svh)) calc((1 - var(--a)) * 4vw) calc((1 - var(--a)) * (8svh + var(--lift,0px))) calc((1 - var(--a)) * 54vw) round calc((1 - var(--a)) * 4px))}
.pg-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.16 - var(--a) * .16))}
.pg-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(36,22,15,.72),rgba(36,22,15,.2) 58%,rgba(36,22,15,0)),linear-gradient(0deg,rgba(36,22,15,.4),rgba(36,22,15,0) 40%);opacity:var(--a)}
.js .pg-media{animation:pgcard 1.4s .2s var(--ease) backwards}
@keyframes pgcard{from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}}
@media(max-width:899px){
  .pg-hero.has-img{height:150svh}
  .has-img .pg-pin{align-items:flex-start}
  .has-img .pg-copy{padding-bottom:0}
  .has-img .pg-title,.has-img .pg-lead{max-width:none}
  .has-img .pg-title{font-size:clamp(3rem,15vw,5.6rem)}
  .has-img .pg-lead{display:none}
  .pg-media{clip-path:inset(calc((1 - var(--a)) * 50svh) calc((1 - var(--a)) * 4vw) calc((1 - var(--a)) * (4svh + var(--lift,0px))) calc((1 - var(--a)) * 4vw) round calc((1 - var(--a)) * 4px))}
  .pg-media::after{background:linear-gradient(180deg,rgba(36,22,15,.7),rgba(36,22,15,0) 55%)}
}

/* ---------- Treść ze spisem rozdziałów ---------- */
.pg-body{padding-block:clamp(56px,8vw,120px)}
.pg-body.has-toc{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
@media(min-width:1000px){.pg-body.has-toc{grid-template-columns:minmax(220px,.34fr) minmax(0,1fr);gap:clamp(48px,7vw,128px)}.pg-toc{position:sticky;top:calc(var(--hdr) + 32px);align-self:start}}
.pg-toc-h{margin:0 0 14px;font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.pg-toc ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.pg-toc a{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;font-family:var(--cond);font-size:1.45rem;line-height:1.1;color:var(--muted);transition:color .3s,padding .5s var(--ease)}
.pg-toc a span{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.1em;padding-top:.45em}
.pg-toc a:hover,.pg-toc a.is-on{color:var(--ink);padding-left:8px}
.pg-prose{max-width:760px;font-size:17px;line-height:1.8}
.pg-body.wrap.narrow .pg-prose{margin-inline:auto}
.pg-prose>p:first-child{font-family:var(--cond);font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1.3;color:var(--ink);letter-spacing:-.005em}
.pg-prose h2{position:relative;scroll-margin-top:calc(var(--hdr) + 24px);margin-top:2.2em;padding-top:28px;border-top:1px solid var(--line);font-family:var(--cond);font-weight:400;font-size:clamp(2.4rem,4.4vw,3.8rem);line-height:.95;letter-spacing:-.02em}
.pg-prose h2:first-child{margin-top:0}
.pg-n{display:block;margin-bottom:14px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--muted)}
.prose h3{font-family:var(--cond);font-weight:400;font-size:clamp(1.7rem,2.4vw,2.2rem);line-height:1.05;letter-spacing:-.01em}
.pg-prose ul,.ch-copy ul{list-style:none;padding:0}
.pg-prose ul li,.ch-copy ul li{position:relative;padding:12px 0 12px 34px;border-bottom:1px solid var(--line)}
.pg-prose ul li+li,.ch-copy ul li+li{margin-top:0}
.pg-prose ul li::before,.ch-copy ul li::before{content:"";position:absolute;left:0;top:1.45em;width:18px;height:1px;background:var(--ink)}
.pg-prose table{font-size:15px;margin-block:1.6em;border-top:1px solid var(--ink)}
.pg-prose thead th{padding-block:16px;color:var(--ink)}
.pg-prose tbody tr{transition:background .3s}
.pg-prose tbody tr:hover{background:var(--surface)}
.pg-prose tbody td:first-child{font-family:var(--cond);font-size:1.5rem;color:var(--ink)}
@media(max-width:640px){.pg-prose table{display:block;overflow-x:auto;white-space:nowrap}}

/* ---------- O marce: rozdziały ze zdjęciami ---------- */
.ch-intro{padding-block:clamp(56px,8vw,112px) 0;font-family:var(--cond);font-size:clamp(1.8rem,3vw,2.8rem);line-height:1.25;text-align:center;color:var(--ink)}
.ch{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:clamp(48px,7vw,112px) var(--gutter,20px)}
.ch-media{overflow:hidden;aspect-ratio:4/5;max-height:86svh;border-radius:2px}
.ch-media img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.14 - var(--p,.5) * .14))}
.ch-copy{align-self:center;max-width:560px;font-size:17px}
.ch-n{display:block;margin-bottom:18px;font-size:11px;font-weight:600;letter-spacing:.22em;color:var(--muted)}
.ch-copy h2,.ch-copy h3{margin-top:0;font-family:var(--cond);font-weight:400;font-size:clamp(2.8rem,5.4vw,5.2rem);line-height:.92;letter-spacing:-.02em;color:var(--ink)}
@media(min-width:900px){
  .ch{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(48px,7vw,128px);align-items:center;padding-inline:4vw}
  .ch.is-rev .ch-media{order:2}
  .ch-media{position:sticky;top:calc(var(--hdr) + 24px)}
}

/* ---------- Kontakt ---------- */
.ct-sec{padding-block:clamp(56px,8vw,120px)}
@media(min-width:900px){.ct-sec .contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,7vw,128px);align-items:start}}
.ct-big{margin:0;font-family:var(--cond);font-size:clamp(3.2rem,7vw,7rem);line-height:.88;letter-spacing:-.025em;color:var(--ink)}
.ct-big em{font-style:normal;color:#8A6550}
:root[data-theme="dark"] .ct-big em{color:#C9A48A}
.ct-sec .contact-info .prose{font-size:17px;max-width:44ch}
.ct-sec .contact-card{background:var(--surface);border:0;box-shadow:0 30px 80px -40px rgba(60,36,24,.35)}
.ct-sec .contact-card h2{font-family:var(--cond);font-weight:400;font-size:clamp(2.2rem,3vw,3rem)}

/* ---------- FAQ ---------- */
.pg-prose .faq{border-top:1px solid var(--ink)}
.pg-prose .faq .acc-btn{font-family:var(--cond);font-weight:400;font-size:clamp(1.5rem,2.2vw,2rem);padding:22px 0;transition:padding .5s var(--ease)}
.pg-prose .faq .acc-btn:hover{padding-left:8px}
.pg-prose .faq .acc-panel p{max-width:60ch;padding-bottom:22px;color:var(--ink-2)}

/* ---------- Journal: siatka magazynu ---------- */
.post-grid.mag{grid-template-columns:minmax(0,1fr);gap:clamp(40px,5vw,72px) clamp(20px,3vw,40px)}
@media(min-width:760px){
  .post-grid.mag{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post-grid.mag .post-card:nth-child(even){margin-top:clamp(40px,8vw,120px)}
}
@media(min-width:1100px){
  .post-grid.mag{grid-template-columns:repeat(3,minmax(0,1fr))}
  .post-grid.mag .post-card:nth-child(even){margin-top:0}
  .post-grid.mag .post-card:nth-child(3n+2){margin-top:clamp(40px,6vw,100px)}
  .post-grid.mag.has-lead .post-card:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(32px,5vw,80px);align-items:center;margin:0}
  .post-grid.mag.has-lead .post-card:first-child .pc-media{aspect-ratio:16/10}
  .post-grid.mag.has-lead .post-card:first-child h3{font-size:clamp(2.6rem,4vw,4rem);line-height:.95}
  .post-grid.mag.has-lead{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,6vw,112px)}
  .post-grid.mag.has-lead .post-card:nth-child(3n+2){margin-top:0}
  .post-grid.mag.has-lead .post-card:nth-child(odd):not(:first-child){margin-top:clamp(60px,9vw,160px)}
}
.post-grid.mag .pc-body h3{font-family:var(--cond);letter-spacing:-.01em}

/* ---------- Wpis ---------- */
.art-body{font-size:17.5px}
.art-body>p:first-child::first-letter{float:left;margin:.06em .12em 0 0;font-family:var(--cond);font-size:5.2em;line-height:.8;color:var(--choc)}
:root[data-theme="dark"] .art-body>p:first-child::first-letter{color:#C9A48A}
.post-nav{border-top:1px solid var(--line);padding-top:28px;font-family:var(--cond);font-size:1.6rem}

/* ---------- Sklep: nagłówek katalogu ---------- */
.shop-hero .pg-pin{min-height:0}
.shop-hero .pg-copy{padding-bottom:clamp(36px,6svh,64px)}
.shop-hero .woocommerce-breadcrumb{padding:0 0 clamp(20px,4svh,44px);font-size:11.5px;letter-spacing:.08em;color:rgba(244,232,216,.62)}
.shop-hero .woocommerce-breadcrumb a{color:inherit;text-decoration:none}
.shop-hero .woocommerce-breadcrumb a:hover{color:var(--cream)}
.shop-hero .pg-title{font-size:clamp(3.2rem,8vw,8.4rem)}
.shop-hero .pg-lead p{margin:0}
.sh-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:end}
@media(min-width:900px){.sh-grid{grid-template-columns:minmax(0,1fr) clamp(240px,26vw,400px);gap:clamp(40px,6vw,96px)}}
.sh-media{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:999px 999px 0 0;max-height:62svh}
.sh-media img{width:100%;height:100%;object-fit:cover;animation:shzoom 2.4s var(--ease) backwards}
@keyframes shzoom{from{transform:scale(1.18)}to{transform:scale(1)}}
@media(max-width:899px){.sh-media{display:none}}
.sh-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:clamp(22px,4svh,36px) 0 0;padding:0}
.sh-chips a{display:inline-block;padding:9px 16px;border:1px solid rgba(244,232,216,.35);border-radius:999px;font-size:12px;letter-spacing:.06em;color:var(--cream);text-decoration:none;transition:background .3s,color .3s,border-color .3s}
.sh-chips a:hover,.sh-chips a[aria-current]{background:var(--cream);border-color:var(--cream);color:var(--choc)}
@media(max-width:899px){
  .shop-hero .pg-copy{padding-top:28px;padding-bottom:24px}
  .shop-hero .woocommerce-breadcrumb{padding-bottom:18px}
  .shop-hero .pg-title{font-size:clamp(2.8rem,12vw,4rem)}
  .shop-hero .pg-lead{display:none}
  .sh-chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--gutter,20px) * -1);padding-inline:var(--gutter,20px);scrollbar-width:none}
  .sh-chips::-webkit-scrollbar{display:none}
  .sh-chips a{white-space:nowrap}
}

/* ---------- Karta produktu ---------- */
.pdp-title{font-family:var(--cond);font-weight:400;font-size:clamp(2.8rem,4.6vw,4.6rem);line-height:.92;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.pdp-sub{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pdp-price .price{font-family:var(--cond);font-size:1.9rem;color:var(--ink)}
@media(min-width:1000px){.pdp-summary{position:sticky;top:calc(var(--hdr) + 24px);align-self:start}}
.pdp-acc .acc-btn{font-family:var(--cond);font-weight:400;font-size:1.6rem}
.pdp .related>h2,.pdp .related .sec-head h2{font-family:var(--cond);font-weight:400;font-size:clamp(2.8rem,5.4vw,5rem);line-height:.92;letter-spacing:-.02em}
.pdp .woocommerce-breadcrumb{font-size:11.5px;letter-spacing:.08em;color:var(--muted)}

/* ---------- Tryb ciemny ---------- */
:root[data-theme="dark"] .pg-hero{background:#2A1B14}