/* ============================================================
   ESTE SKLEP — WARSTWA ELEVACJI "Quiet luxury, in motion"
   Additive: ładowana PO estesklep.css. Most do estesalon
   (hairline, turkus z umiarem, rytm eyebrow→title→link-arrow)
   + światowej klasy detal i ruch. Bez ruchu degraduje się
   gracefully (prefers-reduced-motion).
   ============================================================ */

/* --- detale bazowe --- */
::selection{background:var(--tint);color:var(--deep)}
:focus-visible{outline:2px solid var(--deep);outline-offset:3px;border-radius:6px}
.stat .v{font-variant-numeric:tabular-nums}
h1,h2,h3{text-wrap:balance}
.lead,.sec-sub,.hf .lead{text-wrap:pretty}

/* --- reveal: dopracowany easing + stagger (JS dokłada delay) --- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}

/* --- sticky header kondensuje się przy scrollu --- */
header.site{transition:background .35s,box-shadow .35s}
.nav{transition:height .35s cubic-bezier(.16,1,.3,1)}
header.site.condensed{background:rgba(248,246,241,.96);box-shadow:0 1px 0 var(--line)}
header.site.condensed .nav{height:62px}

/* --- marquee: miękkie wygaszenie krawędzi (sygnatura premium) --- */
.marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}

/* --- sec-head: link-arrow w duchu estesalon --- */
.sec-head .more{position:relative;transition:color .25s,border-color .25s,gap .25s}
.sec-head .more:hover{gap:12px}

/* --- karty produktów: quick-add odsłaniany na hover (desktop), most do hairline --- */
@media (pointer:fine){
  .prod-card .add{opacity:0;transform:translateY(8px);transition:opacity .3s,transform .35s cubic-bezier(.16,1,.3,1),background .25s,color .25s}
  .prod-card:hover .add,.prod-card:focus-within .add{opacity:1;transform:none}
  .prod-card{border-color:var(--line)}
}
.prod-card .ph img{transition:transform .6s cubic-bezier(.16,1,.3,1)}
.prod-card:hover .ph img{transform:scale(1.06)}

/* --- moment edytorski: wielki Cormorant w cytacie-separatorze --- */
.quote-sep{position:relative;overflow:hidden}
.quote-sep .em{font-family:'Cormorant','Georgia',serif;font-style:italic;font-weight:600;color:var(--deep)}
.quote-sep .wmq{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:'Cormorant','Georgia',serif;font-style:italic;font-size:clamp(180px,30vw,420px);line-height:1;color:var(--deep);opacity:.04;pointer-events:none;z-index:0;user-select:none}
.quote-sep .container{position:relative;z-index:1}

/* --- hero: delikatny „shine" na akcencie Cormorant --- */
.hf h1 .serif{position:relative}

/* --- custom cursor (desktop, fine pointer) --- */
.ek-cur{position:fixed;left:0;top:0;width:30px;height:30px;border:1.5px solid var(--deep);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:9998;opacity:0;transition:width .28s cubic-bezier(.16,1,.3,1),height .28s cubic-bezier(.16,1,.3,1),background .28s,opacity .3s,border-color .28s}
.ek-cur.on{opacity:1}
.ek-cur.hot{width:56px;height:56px;background:rgba(60,147,143,.08);border-color:var(--deep)}
.ek-cur.press{width:22px;height:22px}

@media (hover:none),(pointer:coarse){.ek-cur{display:none}}
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1!important;transform:none!important;transition:none}
  .marquee .track{animation:none}
  .ek-cur{display:none}
  .nav,header.site{transition:none}
}