/* ==========================================================================
   Olabella — warstwa „editorial luxury” (iteracja 3)
   Inspiracje: lekki szeryf z kursywą (Agnes Toth), numerowane etykiety i minimalne karty (Serotoninn),
   hero w ramce i przypięta narracja (Seasats), wielki znak marki i mozaika (Cassandra Vale).
   ========================================================================== */

:root{--frame:clamp(8px,1vw,14px);--hdr:72px}

/* ---------- Typografia ---------- */
body{font-size:14.5px}
h1,h2,.display{font-weight:300;letter-spacing:-.025em}
.display em,h1 em,h2 em,h3 em,.manifest-text em,.story-title em{font-style:italic;font-weight:300}
.eyebrow{font-size:10.5px;letter-spacing:.22em;font-weight:500;color:var(--ink-2)}
.sec-head h2{font-weight:300;font-size:clamp(2.6rem,5vw,4.6rem);line-height:.98}

/* ---------- Pasek i nagłówek ---------- */
.topbar{padding:8px var(--gutter)}
.topbar p{font-size:10px;letter-spacing:.24em}
.hdr{grid-template-columns:1fr auto 1fr;height:var(--hdr);gap:20px}
.hdr-left{display:flex;align-items:center;gap:clamp(20px,2.6vw,44px);justify-self:start;min-width:0}
.menu-btn{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--ink)}
.mb-lines{position:relative;display:block;width:24px;height:8px}
.mb-lines i{position:absolute;left:0;height:1px;background:currentColor;transition:width .45s var(--ease)}
.mb-lines i:first-child{top:0;width:24px}
.mb-lines i:last-child{bottom:0;width:14px}
.menu-btn:hover .mb-lines i:last-child{width:24px}
.logo{justify-self:center}
.logo-text{font-weight:400;font-size:clamp(2rem,2.6vw,2.7rem);letter-spacing:-.05em}
.nav{justify-self:auto}
.nav .menu{gap:clamp(16px,2vw,34px)}
.nav a{font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;padding:29px 0}
.nav .menu>li>a::after{bottom:22px}
.nav .sub-menu{left:-28px;padding:18px 28px}
.nav .sub-menu a{font-family:var(--serif);font-size:1.2rem;letter-spacing:0;text-transform:none;font-weight:400;padding:8px 0}
.hdr-tools{gap:clamp(2px,1.1vw,18px);margin-right:0}
.tool{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap}
.tool .t-label{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .45s var(--ease);padding:2px 0}
.tool:hover .t-label{background-size:100% 1px}
.icon-tool{min-width:36px;justify-content:center}
.wl-count{font-size:10px;letter-spacing:.05em}
.cc{letter-spacing:.06em}
.market-btn{margin:0;border-radius:0}
.market-btn:hover{background:none}
@media(max-width:1599px){.nav.only-desktop{display:none!important}}
.hdr-left,.hdr-tools{overflow:hidden}
@media(min-width:1024px){.only-mobile-ico{display:none}}
@media(max-width:1023px){
  .hdr{grid-template-columns:auto 1fr auto}
  .tool .t-label{display:none}
  .menu-btn .t-label{display:none}
  .menu-btn{padding-right:8px}
}

/* ---------- Hero w ramce ---------- */
.ola-home .hero{margin-top:0}
.ola-home .site-header:not(.is-stuck){background:color-mix(in srgb,var(--bg) 92%,transparent)}
.hero{margin:0 var(--frame);border-radius:6px;min-height:clamp(560px,calc(100svh - var(--hdr) - 34px - var(--frame)),980px)}
.hero-copy{padding-top:56px;padding-bottom:clamp(104px,13vh,160px)}
.hero-copy>*{max-width:min(760px,100%)}
.hero-title{font-size:clamp(3.6rem,9vw,9.6rem);font-weight:300;line-height:.88;letter-spacing:-.035em}
.hero-slide:not(.is-plain)::before{background:linear-gradient(90deg,rgba(252,250,246,.78) 0%,rgba(252,250,246,.4) 32%,rgba(252,250,246,0) 58%),linear-gradient(0deg,rgba(36,26,23,.16),transparent 30%)}
.hero-nav{bottom:30px}
@media(max-width:700px){.hero{border-radius:4px;min-height:calc(100svh - var(--hdr) - 60px)}.hero-title{font-size:clamp(3.2rem,14vw,4.6rem)}}

/* ---------- Pasek haseł ---------- */
.ticker{border:0;padding:26px 0}
.ticker span{font-weight:300;font-size:clamp(1.5rem,2.6vw,2.3rem)}

/* ---------- Manifest ---------- */
.manifest{padding-block:clamp(72px,11vw,160px)}
.manifest .narrow{max-width:calc(1240px + var(--gutter)*2);text-align:left}
.manifest-text{font-size:clamp(2.2rem,4.8vw,4.6rem);font-weight:300;line-height:1.1;max-width:none;letter-spacing:-.025em;margin:0 0 28px}
.manifest-sign{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:32px}
.manifest .more{margin-inline:0}

/* ---------- Kategorie: wysokie karty z pionowym napisem ---------- */
.arch-row{grid-auto-columns:minmax(260px,1fr);gap:clamp(10px,1.2vw,18px)}
.arch-card{position:relative;display:block}
.arch-media{border-radius:0;aspect-ratio:3/4.4}
.arch-card::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,14,12,.45),rgba(20,14,12,0) 40%),linear-gradient(180deg,rgba(20,14,12,.25),rgba(20,14,12,0) 20%);pointer-events:none;transition:opacity .6s}
.arch-name{position:absolute;left:14px;bottom:18px;z-index:2;max-height:calc(100% - 36px);writing-mode:vertical-rl;transform:rotate(180deg);color:#FCFAF6;font-size:clamp(1.9rem,2.6vw,3rem);font-weight:300;line-height:1;letter-spacing:-.02em;text-align:left}
.arch-card:hover .arch-name{font-style:italic}
.arch-count{position:absolute;right:16px;top:16px;z-index:2;color:rgba(252,250,246,.88)}
@media(max-width:700px){.arch-row{grid-auto-columns:70vw}}

/* ---------- Karty produktów: minimalny opis ---------- */
.card-body{padding-top:14px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 14px}
.card-title{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;line-height:1.5}
.card-sub,.dots{display:none}
.card-foot{margin:0}
.card .price{font-size:11px;letter-spacing:.12em;font-weight:500}
.card .price .from{font-size:9.5px}
.card-note{width:100%}
.badges li{font-size:9px;padding:5px 9px}

/* ---------- Przypięta narracja ---------- */
.story{position:relative;height:calc(var(--n,4) * 80vh + 40vh)}
.story-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.story-grid{display:grid;gap:28px;align-items:center;width:100%}
.story-title{font-size:clamp(2.6rem,5vw,4.8rem);line-height:.98;margin-bottom:clamp(20px,3vw,40px)}
.story-lines{display:grid;gap:6px}
.story-lines li{font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,2.8vw,2.7rem);line-height:1.15;letter-spacing:-.015em;color:color-mix(in srgb,var(--ink) 20%,transparent);transition:color .7s var(--ease),transform .7s var(--ease)}
.story-lines li.is-past{color:color-mix(in srgb,var(--ink) 42%,transparent)}
.story-lines li.is-on{color:var(--ink);transform:translateX(14px);font-style:italic}
.story .more{margin-top:clamp(24px,3vw,40px)}
.story-media{position:relative;aspect-ratio:3/4;max-height:80vh;width:100%;max-width:540px;justify-self:end;overflow:hidden;border-radius:4px;background:var(--bg-alt)}
.story-img{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.08);transition:opacity 1.1s var(--ease),transform 1.8s var(--ease)}
.story-img.is-on{opacity:1;transform:none}
.story-img img{width:100%;height:100%;object-fit:cover;object-position:72% 30%}
.story-count{position:absolute;left:16px;bottom:14px;z-index:2;color:#FCFAF6;font-family:var(--serif);font-size:1.15rem;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.story-count b{font-weight:400}
@media(min-width:900px){.story-grid{grid-template-columns:1.1fr .9fr;gap:clamp(48px,7vw,120px)}}
@media(max-width:899px){
  .story{height:calc(var(--n,4) * 70vh + 40vh)}
  .story-sticky{align-items:flex-start;padding-top:calc(var(--hdr) + 12px)}
  .story-media{max-height:44vh;aspect-ratio:4/5;justify-self:start;max-width:none}
  .story-title{font-size:2.4rem}
  .story-lines li{font-size:1.35rem}
  .story-lines li.is-on{transform:translateX(8px)}
}

/* ---------- Lookbook w mozaice ---------- */
.masonry{columns:2;column-gap:12px}
.masonry li{break-inside:avoid;margin-bottom:12px}
.masonry a,.masonry .m-item{position:relative;display:block;overflow:hidden;background:var(--bg-alt)}
.masonry img{width:100%;height:auto;transition:transform 1.4s var(--ease)}
.masonry a:hover img{transform:scale(1.04)}
.masonry a:hover .look-name{opacity:1;transform:none}
@media(min-width:900px){.masonry{columns:4;column-gap:18px}.masonry li{margin-bottom:18px}}

/* ---------- Wielki znak marki w stopce ---------- */
.ft-word{overflow:hidden;padding:0 var(--frame);user-select:none;line-height:.74}
.ft-word span{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(5rem,27vw,31rem);letter-spacing:-.065em;text-align:center;color:var(--ink);transform:translateY(10%)}
.ft-bottom{padding-bottom:20px}

/* ---------- Przyciski ---------- */
.btn{border-radius:0;letter-spacing:.24em;font-size:10.5px}
.btn-ghost{border-color:var(--ink)}

/* Strona główna: 4 produkty w rzędzie bez osieroconych kart */
.picks .products.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:1024px){.picks .products.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* ==========================================================================
   Ścieżka zakupowa i konto
   ========================================================================== */
.flow-head h1 em{font-style:italic}

/* Mini koszyk */
.drawer-right .drawer-panel{width:min(460px,94vw);padding:24px 28px 28px}
.drawer-right .drawer-head h2{font-size:2rem;font-weight:300}
.mini-n{font-family:var(--sans);font-size:.42em;letter-spacing:.1em;color:var(--muted);vertical-align:middle}
.mini-item{grid-template-columns:96px 1fr;gap:18px;padding:20px 0}
.mi-thumb img{width:96px}
.mi-name{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.mi-info dl.variation{margin:6px 0 10px}
.mi-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px}
.mi-line{font-size:12.5px}
.mi-remove{width:auto;height:auto;display:inline;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.mi-remove:hover{color:var(--sale)}
.mini-total strong{font-family:var(--sans);font-size:15px;font-weight:600}
.mini-note{font-size:12px;color:var(--muted);margin:-4px 0 6px}
.mini-empty{justify-items:center;text-align:center;gap:12px;padding:56px 8px}
.mini-empty .ico{color:var(--taupe);stroke-width:1}
.mini-empty-t{font-family:var(--serif);font-size:1.9rem;font-weight:300}
.fs-bar{background:transparent;border:0;padding:0 0 4px}
.fs-text{font-size:12.5px}
.fs-track{height:2px}

/* Koszyk: podsumowanie */
.summary-card .cart_totals h2{font-size:1.9rem;font-weight:300}
.cart_totals .order-total th,.cart_totals .order-total td,.shop_table .order-total th,.shop_table .order-total td{font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.02em}
.checkout-button,.wc-proceed-to-checkout a.button,#place_order{border-radius:0;letter-spacing:.24em;font-size:10.5px}

/* Kasa: numerowane sekcje */
.co-fields{counter-reset:co}
.co-card{border-top:1px solid var(--line);padding-top:28px}
.co-card:empty{display:none}
.co-card h3{counter-increment:co;display:flex;align-items:baseline;gap:14px;font-size:2rem;font-weight:300}
.co-card h3::before{content:"0" counter(co);font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;color:var(--muted)}
#ship-to-different-address{font-size:1.4rem}
#ship-to-different-address::before{display:none}
.co-side{background:var(--bg-alt);border:0;padding:clamp(24px,3vw,40px)}
.co-side h2{font-weight:300}
.woocommerce-checkout-review-order-table thead{display:none}
.woocommerce-checkout-review-order-table td.product-name{padding:14px 0}
.rv-item{display:flex;gap:14px;align-items:center}
.rv-thumb{position:relative;flex:none;width:64px}
.rv-thumb img{width:64px;height:80px;object-fit:cover;display:block}
.rv-q{position:absolute;top:-8px;right:-8px;min-width:20px;height:20px;border-radius:10px;background:var(--ink);color:var(--bg);font-family:var(--sans);font-size:10px;font-weight:600;display:grid;place-items:center}
.rv-name{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;line-height:1.5}
.rv-name dl.variation{text-transform:none;letter-spacing:.02em;font-size:12px;margin-top:2px}
#payment .wc_payment_method{border-color:var(--line-2);border-radius:0}
#payment .wc_payment_method:has(input:checked){border-color:var(--ink)}
.woocommerce-form-login-toggle .woocommerce-info,.woocommerce-form-coupon-toggle .woocommerce-info{background:transparent;border:0;border-bottom:1px solid var(--line);padding:12px 0;font-size:13px}

/* Potwierdzenie */
.thanks{max-width:900px}
.thanks-head{justify-items:start;text-align:left}
.thanks-head>.ico{width:56px;height:56px;padding:14px}
.thanks-t{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--ok)}
.order-no{font-family:var(--sans);font-size:1em;letter-spacing:.08em;padding:3px 10px;border:1px solid var(--line-2);border-radius:20px}
.thanks-steps{grid-template-columns:1fr;gap:0}
@media(min-width:760px){.thanks-steps{grid-template-columns:repeat(3,1fr);gap:28px}.thanks-steps li{border-top:1px solid var(--ink);padding:18px 0 0}.thanks-steps li::before{position:static;margin-bottom:10px}}
.order-overview{background:transparent;border:0;border-block:1px solid var(--line);padding:22px 0}
.woocommerce-order-details h2,.woocommerce-customer-details h2{font-weight:300}
.woocommerce-customer-details address{padding:20px;background:var(--bg-alt);border:0;line-height:1.8}

/* Konto: logowanie i rejestracja */
.acc-head{padding-bottom:12px}
.acc-head h1{font-size:clamp(2.6rem,5vw,4.4rem)}
.acc-auth{display:grid;gap:clamp(24px,4vw,64px)}
@media(min-width:900px){.acc-auth.has-reg{grid-template-columns:1fr 1fr}}
.auth-card{display:grid;gap:18px;align-content:start;padding:clamp(24px,4vw,56px);border:1px solid var(--line)}
.auth-card.alt{background:var(--bg-alt);border-color:transparent}
.auth-card h2{font-size:clamp(2.2rem,3.6vw,3.2rem);font-weight:300}
.auth-card form{display:grid;gap:4px;border:0;padding:0;background:none}
.auth-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin:4px 0 18px;font-size:13px}
.auth-perks{display:grid;gap:10px;margin-bottom:8px}
.auth-perks li{display:flex;gap:12px;align-items:center;font-size:13.5px;color:var(--ink-2)}
.auth-perks .ico{color:var(--accent)}
:root[data-theme="dark"] .auth-perks .ico{color:var(--taupe)}
.auth-note{font-size:13px;margin:4px 0 14px}
.woocommerce-form-login__submit,.woocommerce-form-register__submit{width:100%;min-width:0}

/* Konto: nawigacja i pulpit */
.woocommerce-MyAccount-navigation a{display:flex;align-items:center;gap:12px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.woocommerce-MyAccount-navigation .ico{color:var(--muted)}
.woocommerce-MyAccount-navigation .is-active a .ico{color:currentColor}
.acc-hello h2{font-size:clamp(2.2rem,4vw,3.4rem);font-weight:300;margin-bottom:10px}
.acc-tiles{display:grid;gap:12px;margin:28px 0 8px}
@media(min-width:700px){.acc-tiles{grid-template-columns:repeat(2,1fr);gap:16px}}
.acc-tiles a{position:relative;display:grid;gap:6px;padding:26px 24px;background:var(--bg-alt);text-decoration:none;transition:background-color .3s,color .3s}
.acc-tiles a:hover{background:var(--ink);color:var(--bg)}
.acc-tiles .ico{stroke-width:1.1;margin-bottom:8px}
.at-t{font-family:var(--serif);font-size:1.6rem;font-weight:400}
.at-d{font-size:12.5px;color:var(--muted)}
.acc-tiles a:hover .at-d{color:inherit;opacity:.75}
.at-arrow{position:absolute;right:22px;top:26px;transition:transform .4s var(--ease)}
.acc-tiles a:hover .at-arrow{transform:translateX(4px)}
.summary-card .fs-bar,.co-side .fs-bar,.cart-collaterals .fs-bar{background:transparent;border:0;padding:0 0 4px}
.woocommerce-checkout-review-order-table td.product-name{width:72%}
.rv-name dl.variation{display:flex;flex-wrap:wrap;gap:0 10px}
.rv-name dl.variation dt,.rv-name dl.variation dd{display:inline;margin:0}
.flow-head + .woocommerce-notices-wrapper:empty{display:none}@media(max-width:699px){
  .cart-row{grid-template-columns:96px minmax(0,1fr);grid-template-areas:"t i" "t s";gap:6px 16px}
  .cr-thumb img{width:96px}
  .cr-sub{text-align:left;font-size:13px}
  .cr-name{font-size:1.35rem}
  .cr-actions{gap:12px;flex-wrap:wrap}
  .flow-head{padding-top:24px}
}