/* ==========================================================================
   Olabella — strony: hero, kategorie, sekcje strony głównej, treści, kontakt
   ========================================================================== */

/* ---------- Nagłówki stron ---------- */
.page-head{padding:clamp(40px,7vw,96px) 0 clamp(24px,4vw,48px);background:var(--bg)}
.page-head.compact{padding-block:28px 8px}
.page-head h1{font-size:clamp(2.6rem,6vw,4.8rem)}
.page-head .muted{margin-top:14px;max-width:56ch;margin-inline:auto}
.cat-head.page-head{text-align:left;padding-bottom:clamp(20px,3vw,40px)}
.shop-page{padding-top:0}
.article-hero{max-width:1100px;margin-bottom:12px}
.article-hero img{width:100%;aspect-ratio:16/9;object-fit:cover}
.post-nav{display:flex;justify-content:space-between;gap:24px;padding-bottom:80px;font-family:var(--serif);font-size:1.3rem}
.post-nav a{text-decoration:none;display:inline-flex;align-items:center;gap:10px}

/* ---------- Strona główna: nagłówek na zdjęciu ---------- */
.ola-home .site-header:not(.is-stuck){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.ola-home .hero{margin-top:calc(var(--hdr) * -1)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--bg-alt);min-height:clamp(560px,calc(100svh - 34px),980px);display:grid}
.hero-slides{display:grid;grid-area:1/1}
.hero-slide{grid-area:1/1;position:relative;display:grid;align-items:end;opacity:0;visibility:hidden;transition:opacity 1.4s var(--ease),visibility 1.4s}
.hero-slide.is-active{opacity:1;visibility:visible;z-index:2}
.hero-media{position:absolute;inset:-6% 0;overflow:hidden}
.hero-img{width:100%;height:100%;object-fit:cover;object-position:62% 40%;transform:scale(1.08);transition:transform 10s cubic-bezier(.2,.6,.2,1)}
.hero-slide.is-active .hero-img{transform:scale(1)}
.hero-slide:not(.is-plain)::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(252,250,246,.82) 0%,rgba(252,250,246,.5) 30%,rgba(252,250,246,0) 58%),linear-gradient(0deg,rgba(36,26,23,.18),transparent 30%)}
:root[data-theme="dark"] .hero-slide:not(.is-plain)::before{background:linear-gradient(90deg,rgba(24,21,19,.86) 0%,rgba(24,21,19,.55) 34%,rgba(24,21,19,0) 62%)}
.hero-copy{position:relative;z-index:3;padding-top:calc(var(--hdr) + 48px);padding-bottom:clamp(110px,14vh,170px)}
.hero-copy>*{max-width:min(620px,100%)}
.hero-title{font-size:clamp(3.4rem,8.6vw,8.4rem);line-height:.92;margin-bottom:26px;letter-spacing:-.03em;font-weight:400}
.hero-text{font-size:clamp(15px,1.4vw,17px);color:var(--ink-2);max-width:36ch;margin-bottom:36px;line-height:1.75}
.hero-copy .eyebrow{color:var(--ink-2);display:flex;align-items:center;gap:14px}
.hero-copy .eyebrow::before{content:"";width:36px;height:1px;background:currentColor}
.hero-slide.is-active .hero-copy .eyebrow,.hero-slide.is-active .hero-text,.hero-slide.is-active .btn{animation:rise 1.3s var(--ease) both}
.hero-slide.is-active .hero-copy .eyebrow{animation-delay:.1s}.hero-slide.is-active .hero-text{animation-delay:.5s}.hero-slide.is-active .btn{animation-delay:.65s}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}
.hero-nav{position:absolute;left:0;right:0;bottom:34px;z-index:5;pointer-events:none}
.hero-dots{display:flex;gap:28px;pointer-events:auto}
.hero-dots button{display:flex;align-items:center;gap:12px;padding:8px 0;color:var(--ink-2)}
.hero-dots .n{font-family:var(--serif);font-size:1.1rem;font-variant-numeric:tabular-nums;transition:color .3s}
.hero-dots .bar{position:relative;width:56px;height:1px;background:color-mix(in srgb,var(--ink) 25%,transparent);overflow:hidden}
.hero-dots .bar i{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left}
.hero-dots [aria-selected=true]{color:var(--ink)}
.hero-dots [aria-selected=true] .bar i{animation:fill 7.5s linear forwards}
.hero:hover .hero-dots .bar i{animation-play-state:paused}
@keyframes fill{to{transform:scaleX(1)}}
.scroll-cue{position:absolute;right:var(--gutter);bottom:34px;z-index:5;width:24px;height:42px;border:1px solid var(--ink-2);border-radius:14px}
.scroll-cue span{position:absolute;left:50%;top:8px;width:2px;height:8px;margin-left:-1px;background:var(--ink);border-radius:2px;animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(16px)}}
@media(max-width:700px){
  .hero{min-height:calc(100svh - 34px);max-height:820px}
  .hero-slide:not(.is-plain)::before{background:linear-gradient(0deg,rgba(252,250,246,.94) 0%,rgba(252,250,246,.72) 38%,rgba(252,250,246,0) 66%)}
  :root[data-theme="dark"] .hero-slide:not(.is-plain)::before{background:linear-gradient(0deg,rgba(24,21,19,.94) 0%,rgba(24,21,19,.7) 40%,rgba(24,21,19,0) 70%)}
  .hero-img{object-position:80% 30%}
  .hero-copy{padding-bottom:96px}
  .hero-title{font-size:clamp(3rem,13vw,4.2rem)}
  .hero-dots{gap:16px}.hero-dots .bar{width:32px}
}
.hero-slide.is-plain .hero-copy{padding-top:calc(var(--hdr) + 80px)}

/* ---------- Pasek przewijany ---------- */
.ticker{overflow:hidden;border-block:1px solid var(--line);padding:18px 0;background:var(--bg)}
.ticker-track{display:flex;gap:36px;width:max-content;animation:tick 48s linear infinite;align-items:center}
.ticker span{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.2vw,1.9rem);white-space:nowrap;color:var(--ink-2)}
.ticker i{font-style:normal;font-size:.8rem;color:var(--taupe)}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- Manifest ---------- */
.manifest{padding-block:clamp(80px,12vw,170px)}
.manifest-text{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,3.8vw,3.4rem);line-height:1.18;letter-spacing:-.015em;margin:0 auto 36px;max-width:24ch;color:var(--ink)}
.manifest .more{margin-inline:auto}

/* ---------- Kategorie w łukach ---------- */
.sec-head h2{font-size:clamp(2.4rem,4.6vw,4rem);font-weight:400}
.sec-head .eyebrow{margin-bottom:10px}
.arch-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:clamp(16px,2.4vw,36px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px}
.arch-row::-webkit-scrollbar{display:none}
.arch-row>li{scroll-snap-align:start}
.arch-card{display:grid;gap:16px;text-decoration:none;justify-items:center;text-align:center}
.arch-media{display:block;width:100%;aspect-ratio:3/4;overflow:hidden;border-radius:999px 999px 0 0;background:var(--bg-alt);position:relative}
.arch-media img,.arch-media .ph{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.arch-media .ph{aspect-ratio:auto}
.arch-card:hover .arch-media img{transform:scale(1.06)}
.arch-name{font-family:var(--serif);font-size:clamp(1.5rem,2vw,1.9rem);line-height:1.1;transition:letter-spacing .5s var(--ease)}
.arch-card:hover .arch-name{font-style:italic}
.arch-count{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
@media(max-width:700px){.arch-row{grid-auto-columns:64vw}}

/* ---------- Zakładki produktów ---------- */
.tabs{display:flex;gap:24px}
.tabs button{position:relative;padding:8px 0;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--muted);transition:color .25s}
.tabs button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.tabs button[aria-selected=true]{color:var(--ink)}
.tabs button[aria-selected=true]::after{transform:scaleX(1)}
.tab-panel{animation:fadeIn .8s var(--ease)}
@keyframes fadeIn{from{opacity:0;transform:translateY(16px)}}
.picks-more{margin-top:64px}
.picks{padding-top:clamp(40px,6vw,80px)}

/* ---------- Kolaż redakcyjny ---------- */
.editorial{padding-block:clamp(80px,11vw,160px)}
.ed-grid{display:grid;gap:56px;align-items:center}
.ed-collage{position:relative;padding:0 14% 14% 0}
.ed-media{background:var(--bg-deep)}
.ed-media.arch{aspect-ratio:4/5;border-radius:999px 999px 0 0;overflow:hidden}
.ed-media img{width:100%;height:100%;object-fit:cover}
.ed-media.small{position:absolute;right:0;bottom:0;width:44%;aspect-ratio:4/5;border:10px solid var(--bg);z-index:2}
.ed-stamp{position:absolute;left:-34px;top:12%;writing-mode:vertical-rl;transform:rotate(180deg);font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.ed-copy{display:grid;gap:24px;justify-items:start}
.ed-copy h2{font-size:clamp(2.6rem,5vw,4.6rem);font-weight:400;line-height:1}
.ed-copy>p:not(.eyebrow){font-size:16px;line-height:1.9;color:var(--ink-2);max-width:46ch}
.ed-points{display:grid;gap:0;width:100%;max-width:460px;border-top:1px solid var(--line)}
.ed-points li{display:flex;gap:22px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line);font-family:var(--serif);font-size:1.3rem}
.ed-points span{font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;color:var(--muted)}
@media(min-width:900px){.ed-grid{grid-template-columns:1.05fr 1fr;gap:clamp(64px,9vw,150px)}.ed-collage{max-width:640px}}
@media(max-width:700px){.ed-stamp{display:none}}

/* ---------- Baner kampanii ---------- */
.banner{position:relative;overflow:hidden;min-height:clamp(480px,88vh,920px);display:grid;place-items:center;text-align:center;color:#FCFAF6}
.banner-media{position:absolute;inset:-12% 0}
.banner-media img{width:100%;height:100%;object-fit:cover;object-position:70% 40%}
.banner::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(28,20,17,.62),rgba(28,20,17,.18) 60%,rgba(28,20,17,.25))}
.banner-copy{position:relative;z-index:2;display:grid;justify-items:center;gap:26px;padding-block:80px}
.banner .eyebrow{color:rgba(252,250,246,.85)}
.banner h2{color:#FCFAF6;font-size:clamp(2.6rem,6vw,5.6rem);font-weight:400;line-height:1;max-width:16ch}
.btn-light{background:#FCFAF6;color:#241A17}
.btn-light:hover{background:transparent;color:#FCFAF6;border-color:#FCFAF6}

/* ---------- Korzyści ---------- */
.benefits{padding-block:clamp(40px,6vw,72px);border-bottom:1px solid var(--line)}
.ben-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 20px}
.ben-grid li{display:flex;gap:16px;align-items:flex-start}
.ben-grid .ico{stroke-width:1;color:var(--accent);flex:none;margin-top:2px}
:root[data-theme="dark"] .ben-grid .ico{color:var(--taupe)}
.ben-grid h3{font-size:1.35rem;margin-bottom:4px}
.ben-grid p{font-size:13px;color:var(--muted);line-height:1.6}
@media(min-width:1000px){.ben-grid{grid-template-columns:repeat(4,1fr)}.ben-grid li+li{border-left:1px solid var(--line);padding-left:28px}}

/* ---------- Stylizacje ---------- */
.look-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.look-grid a{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:var(--bg-alt)}
.look-grid img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.look-grid a:hover img{transform:scale(1.06)}
.look-name{position:absolute;left:14px;bottom:12px;z-index:2;color:#FCFAF6;font-family:var(--serif);font-size:1.2rem;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .6s var(--ease);text-shadow:0 1px 12px rgba(0,0,0,.35)}
.look-grid a:hover .look-name{opacity:1;transform:none}
@media(min-width:900px){.look-grid{grid-template-columns:repeat(4,1fr);gap:18px}.look-grid li:nth-child(even){margin-top:56px}}

/* ---------- Wpisy ---------- */
.post-grid{display:grid;gap:48px 28px}
@media(min-width:700px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.post-grid{grid-template-columns:repeat(3,1fr)}.journal .post-card:nth-child(2){margin-top:64px}}
.post-card .pc-media{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--bg-alt)}
.post-card .pc-media img,.post-card .pc-media .ph{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.post-card .pc-media .ph{aspect-ratio:auto}
.post-card:hover .pc-media img{transform:scale(1.05)}
.pc-body{padding-top:22px}
.pc-body h3{font-size:1.85rem;font-weight:400;margin-bottom:10px;line-height:1.15}
.pc-body h3 a{text-decoration:none}
.pc-body p:last-child{color:var(--ink-2);font-size:14.5px}
.pc-body .eyebrow{margin-bottom:10px}

/* ---------- Tekst SEO i FAQ ---------- */
.seo-text{background:var(--bg-alt)}
.seo-grid{max-width:calc(860px + var(--gutter)*2)}
.seo-body{font-size:15px;line-height:1.85;position:relative}
.seo-body h2{font-size:clamp(2.2rem,4vw,3.4rem);margin-top:0;font-weight:400;column-span:all;margin-bottom:28px}
.seo-body h3{font-size:1.45rem;break-after:avoid}

.js .seo-body:not(.is-open){max-height:26em;overflow:hidden;-webkit-mask:linear-gradient(#000 60%,transparent);mask:linear-gradient(#000 60%,transparent)}
.seo-more{display:none;margin-top:20px}
.js .seo-more{display:inline-block}
.faq-sec{padding-top:clamp(72px,9vw,128px)}
.faq-grid{display:grid;gap:36px}
.faq-head h2{font-size:clamp(2.4rem,4.4vw,3.8rem);font-weight:400;margin-bottom:14px}
.faq-head .muted a{color:var(--ink);text-decoration:underline}
@media(min-width:900px){.faq-grid{grid-template-columns:.8fr 1.2fr;gap:96px;align-items:start}.faq-head{position:sticky;top:calc(var(--hdr) + 40px)}}
/* ---------- Kontakt ---------- */
.contact-grid{display:grid;gap:48px}
@media(min-width:900px){.contact-grid{grid-template-columns:1fr 1.1fr;gap:96px}}
.contact-info{display:grid;gap:36px;align-content:start}
.contact-card{background:var(--bg-alt);padding:clamp(24px,4vw,48px);border:1px solid var(--line)}
.contact-card h2{font-size:2.2rem;margin-bottom:24px}
.contact-form .btn{margin-top:8px}
.contact-form .chk{margin:6px 0 18px}

/* ---------- Ulubione ---------- */
.wl-empty{display:grid;justify-items:center;gap:14px;padding:clamp(40px,8vw,100px) 0}
.wl-empty .ico{stroke-width:1;color:var(--taupe)}
.wl-empty h2{font-size:2.2rem}

/* ---------- Okno tabeli rozmiarów ---------- */
.size-modal .prose{margin-top:18px;overflow-x:auto}
.size-modal table{min-width:420px}

/* ---------- Ruch inspirowany referencjami (Lenis, parallax obrazów, preloader, morph hero) ---------- */
[data-pimg]{position:relative;overflow:hidden}
[data-pimg] img{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;will-change:translate}
.pc-media[data-pimg]{aspect-ratio:4/3}
.preloader{display:none}
.pre .preloader{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:var(--bg);transition:opacity .7s var(--ease),visibility .7s;animation:ola-pre-fallback .01s 4s forwards}
.preloader.is-out{opacity:0;visibility:hidden}
@keyframes ola-pre-fallback{to{opacity:0;visibility:hidden}}
.pre-in{display:grid;justify-items:center;gap:22px;width:min(280px,70vw)}
.pre-logo{font-family:var(--serif);font-size:3.4rem;letter-spacing:-.045em;line-height:1}
.pre-bar{display:block;width:100%;height:1px;background:var(--line-2);overflow:hidden}
.pre-bar span{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
:root[data-theme="dark"] .pre-bar span{background:var(--taupe)}
.pre-num{font-family:var(--serif);font-size:1.2rem;color:var(--muted);font-variant-numeric:tabular-nums}
.pre .hero-slide.is-active .hero-img{opacity:0}
.hero.is-intro .hero-slide.is-active .hero-img{animation:morph 1.8s var(--ease) both}
@keyframes morph{from{opacity:0;filter:blur(6px);scale:1.1}to{opacity:1;filter:blur(0);scale:1}}
.hero.is-intro .hero-slide.is-active .hero-copy>*{animation-delay:.35s}
/* podkreślenie linków „wipe” */
.prose a,.ft-col a,.ft-bottom .menu a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease)}
.prose a{background-size:100% 1px}
.prose a:hover{background-size:0 1px;background-position:100% 100%}
.ft-col a:hover,.ft-bottom .menu a:hover{background-size:100% 1px;text-decoration:none}
@media(prefers-reduced-motion:reduce){.pre .preloader{display:none}[data-pimg] img{translate:none!important}}
/* ---------- Newsletter: zdjęcie obok formularza ---------- */
.newsletter{background:var(--bg-alt);margin-top:0}
.newsletter .nl-bg img{opacity:1;object-position:60% 35%}
.nl-copy h2{font-weight:400}
.nl-form .btn{border-radius:0}
@media(min-width:900px){
  .newsletter{min-height:clamp(460px,58vh,620px);display:flex;align-items:center}
  .newsletter .nl-bg{right:auto;width:44%}
  .newsletter .nl-grid{max-width:none;width:56%;margin:0 0 0 44%;padding-inline:clamp(48px,6vw,120px);grid-template-columns:1fr;gap:36px}
}
@media(max-width:899px){
  .newsletter .nl-bg{position:relative;height:300px}
  .newsletter .nl-grid{padding-block:48px 64px}
}
/* ---------- Nagłówek kategorii ze zdjęciem ---------- */
.cat-title .eyebrow{margin-bottom:6px}
.cat-hero{display:grid;gap:28px;align-items:end}
.cat-hero-media{aspect-ratio:4/3;overflow:hidden;border-radius:999px 999px 0 0;background:var(--bg-alt);max-height:420px}
.cat-hero-media img{width:100%;height:100%;object-fit:cover;object-position:60% 30%}
@media(min-width:900px){.cat-hero{grid-template-columns:1.2fr .8fr;gap:clamp(48px,7vw,120px)}.cat-hero-media{aspect-ratio:5/4;max-width:520px;justify-self:end;width:100%}}
@media(max-width:899px){.cat-hero-media{aspect-ratio:16/10;border-radius:200px 200px 0 0}}
@media(max-width:600px){
  .topbar p{font-size:9.5px;letter-spacing:.12em}
  .sec-head{flex-wrap:wrap;align-items:flex-start;gap:14px}
  .manifest-text{font-size:1.75rem}
}