/* ============================================================
   LUXORA — refined premium polish (Zara/COS sensibility)
   Subtle, intentional motion. Generous stillness.
   Homepage-focused, with light touches site-wide.
   ============================================================ */

/* ---- typography refinement: tighter, more editorial ---- */
h1,h2,h3{letter-spacing:-.02em}
.eyebrow{letter-spacing:.28em}
body{letter-spacing:-.005em}

/* ---- smoother global easing for a high-end feel ---- */
:root{--ease-lux:cubic-bezier(.22,.61,.36,1)}
.btn,.p-card .p-frame img,.cat-tile img,.nav-account,.p-heart{transition-timing-function:var(--ease-lux)!important}

/* ============================================================
   HERO — the centrepiece
   ============================================================ */
/* darker, more cinematic gradient for legible, moodier text */
.hero-slide::after{background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.28) 55%,rgba(0,0,0,.08))!important}
/* very slow, barely-there zoom on the active image (luxury standard) */
.hero-slide.on img{animation:luxZoom 9s var(--ease-lux) both}
@keyframes luxZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
/* refined staggered entrance — smaller travel, slower, more poised */
.hero-slide.on .eyebrow{animation:luxRise 1s .15s var(--ease-lux) both}
.hero-slide.on h1{animation:luxRise 1.1s .3s var(--ease-lux) both}
.hero-slide.on p{animation:luxRise 1.1s .45s var(--ease-lux) both}
.hero-slide.on .btn{animation:luxRise 1.1s .6s var(--ease-lux) both}
@keyframes luxRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* thinner, more elegant hero heading */
.hero-content h1{font-weight:500;line-height:1.05}
.hero-content .btn{backdrop-filter:blur(2px)}
/* refined dots — thin lines, gold active */
.hero-dots button{height:2px;width:30px;transition:background .4s,width .4s var(--ease-lux)}
.hero-dots button.on{background:var(--gold);width:44px}
/* arrows: quieter until hovered */
.hero-arrow{background:rgba(255,255,255,.08);transition:background .3s,transform .3s var(--ease-lux)}
.hero-arrow:hover{background:rgba(255,255,255,.24);transform:translateY(-50%) scale(1.06)}

/* ============================================================
   SECTION HEADINGS — editorial reveal
   ============================================================ */
.sec-head h2{position:relative;overflow:visible}
.reveal .sec-head h2{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease-lux),transform .8s var(--ease-lux)}
.reveal.in .sec-head h2{opacity:1;transform:none}
.reveal .sec-head .eyebrow{opacity:0;transform:translateY(8px);transition:opacity .7s .05s var(--ease-lux),transform .7s .05s var(--ease-lux)}
.reveal.in .sec-head .eyebrow{opacity:1;transform:none}
.sec-head a{position:relative;border:none;padding-bottom:3px}
.sec-head a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--ink);transform:scaleX(1);transform-origin:right;transition:transform .4s var(--ease-lux),background .3s}
.sec-head a:hover::after{transform:scaleX(0);transform-origin:left}
.sec-head a:hover{color:var(--gold)}

/* ============================================================
   CATEGORY TILES — the refined hover
   ============================================================ */
.cat-tile{transition:box-shadow .5s var(--ease-lux)}
.cat-tile img{transition:transform 1.2s var(--ease-lux)!important;filter:saturate(.96)}
.cat-tile:hover{box-shadow:0 26px 60px rgba(0,0,0,.22)}
.cat-tile:hover img{transform:scale(1.07)}
.cat-tile::after{background:linear-gradient(transparent 35%,rgba(0,0,0,.7))!important;transition:opacity .5s}
.cat-tile b{transition:transform .5s var(--ease-lux)}
.cat-tile:hover b{transform:translateY(-4px)}
/* thin gold rule under the category label on hover */
.cat-tile b small{position:relative;padding-top:6px}
.cat-tile b small::before{content:"";position:absolute;top:0;left:20px;width:0;height:1px;background:var(--gold);transition:width .5s var(--ease-lux)}
.cat-tile:hover b small::before{width:40px}

/* ============================================================
   PRODUCT CARDS — quiet luxury
   ============================================================ */
.p-card .p-frame{transition:box-shadow .5s var(--ease-lux)}
.p-card:hover .p-frame{box-shadow:0 20px 44px rgba(0,0,0,.14)}
.p-card .p-frame img{transition:transform 1s var(--ease-lux),opacity .6s ease!important}
.p-card:hover .p-frame img{transform:scale(1.05)}
.p-info .name{transition:color .3s}
.p-card:hover .p-info .name{color:var(--gold)}
/* badges: refined, less shouty */
.p-badge{font-size:.62rem;letter-spacing:.12em;padding:5px 11px;backdrop-filter:blur(4px)}
.p-badge.sale{background:rgba(178,56,56,.92)}
.p-badge.new{background:rgba(184,152,90,.95)}
/* quick-add: slides up more gracefully */
.p-quick{transition:opacity .4s var(--ease-lux),transform .4s var(--ease-lux),background .3s,color .3s;letter-spacing:.04em}
/* heart: gentle */
.p-heart{background:rgba(255,255,255,.86);backdrop-filter:blur(6px);transition:transform .3s var(--ease-lux),background .3s}
.p-heart:hover{transform:scale(1.14)}

/* staggered card reveal within a grid */
.p-grid.in .p-card{animation:luxRise .8s var(--ease-lux) both}
.p-grid .p-card:nth-child(1){animation-delay:.02s}
.p-grid .p-card:nth-child(2){animation-delay:.08s}
.p-grid .p-card:nth-child(3){animation-delay:.14s}
.p-grid .p-card:nth-child(4){animation-delay:.20s}
.p-grid .p-card:nth-child(5){animation-delay:.26s}
.p-grid .p-card:nth-child(6){animation-delay:.32s}
.p-grid .p-card:nth-child(7){animation-delay:.38s}
.p-grid .p-card:nth-child(8){animation-delay:.44s}

/* ============================================================
   SALE BANNER + VALUES + IG — subtle depth
   ============================================================ */
.sale-banner img{transition:transform 8s var(--ease-lux)}
.sale-banner:hover img{transform:scale(1.06)}
.sale-inner h2{font-weight:500}
.val{border:1px solid transparent;border-radius:var(--radius);transition:border-color .4s,transform .4s var(--ease-lux),background .4s}
.val:hover{border-color:var(--line);transform:translateY(-4px);background:var(--raise)}
.val svg{transition:transform .5s var(--ease-lux)}
.val:hover svg{transform:scale(1.12) translateY(-2px)}
.ig-grid img{transition:transform 1s var(--ease-lux),filter .4s!important;filter:saturate(.94)}
.ig-grid a::after{content:"";position:absolute;inset:0;background:rgba(184,152,90,0);transition:background .4s}
.ig-grid a:hover::after{background:rgba(184,152,90,.14)}
.ig-grid a:hover img{transform:scale(1.08);filter:saturate(1.05)}

/* ============================================================
   BUTTONS — refined shine + press
   ============================================================ */
.btn{letter-spacing:.06em}
.btn-primary,.btn-gold{position:relative;overflow:hidden}
.btn-primary::after,.btn-gold::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.28),transparent);transition:left .7s var(--ease-lux)}
.btn-primary:hover::after,.btn-gold:hover::after{left:150%}
.btn:active{transform:translateY(0) scale(.985)}

/* ============================================================
   NAVBAR — refined presence
   ============================================================ */
header.nav{transition:box-shadow .4s,background .4s}
header.nav.scrolled{box-shadow:0 4px 24px rgba(0,0,0,.06)}
.nav-menu a{transition:color .3s}
.nav-menu a:hover{color:var(--gold)}
.nav-logo{transition:letter-spacing .4s var(--ease-lux)}
.nav-logo:hover{letter-spacing:.2em}

/* ============================================================
   PAGE ENTRANCE — a whisper of a fade
   ============================================================ */
@keyframes pageFade{from{opacity:0}to{opacity:1}}
main{animation:pageFade .6s var(--ease-lux) both}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-slide.on img,.hero-slide.on .eyebrow,.hero-slide.on h1,.hero-slide.on p,.hero-slide.on .btn,
  .p-grid.in .p-card,main,.sale-banner img{animation:none!important}
}

/* ============================================================
   FABRIC FALLBACK — elegant woven-texture behind every image
   so nothing ever looks "broken" if a photo fails to load
   ============================================================ */
.p-frame, .cat-tile, .gal-main, .sale-banner, .hero-slide, .ig-grid a, .cimg, .order-items img{
  background-color:#e8ede4;
  background-image:
    linear-gradient(135deg, #eef2ea 0%, #dde6d5 45%, #cdd9c2 100%);
}
[data-theme="dark"] .p-frame,[data-theme="dark"] .cat-tile,[data-theme="dark"] .gal-main{
  background-image:
    repeating-linear-gradient(45deg, rgba(184,152,90,.08) 0 2px, transparent 2px 6px),
    linear-gradient(135deg, #23201c, #1a1815);
}
/* if an <img> fails, hide the broken icon so the fabric texture shows through */
.p-frame img,.cat-tile img,.gal-main img{color:transparent}
img{font-size:0} /* hides alt-text broken-image glyph, texture shows instead */

/* ============================================================ Coming soon page (Men) ============================================================ */
.coming-soon{min-height:70vh;display:grid;place-items:center;padding:80px 24px;text-align:center;
  background:linear-gradient(135deg,#eef2ea 0%,#dde6d5 45%,#cdd9c2 100%)}
[data-theme="dark"] .coming-soon{background:linear-gradient(135deg,#1a1815,#23201c)}
.cs-inner{max-width:520px}
.cs-inner h1{font-size:clamp(2.6rem,7vw,4.5rem);margin:14px 0 18px;letter-spacing:-.02em}
.cs-inner p{color:var(--ink-soft);font-size:1.02rem;line-height:1.7;margin-bottom:28px}
.cs-form{display:flex;gap:10px;max-width:400px;margin:0 auto;flex-wrap:wrap}
.cs-form input{flex:1;min-width:180px;border:1.5px solid var(--line-strong);border-radius:999px;padding:13px 20px;background:var(--surface);color:var(--ink);font-size:.92rem}
.cs-form input:focus{outline:none;border-color:var(--gold)}
@media(max-width:440px){.cs-form{flex-direction:column}.cs-form .btn{width:100%}}

/* ============================================================
   Order number (confirmation) + guest order tracking
   ============================================================ */
.ord-code-box{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin:22px auto;padding:18px 24px;max-width:420px;border:1.5px dashed var(--gold);
  border-radius:var(--radius);background:var(--raise)}
.ord-code-label{display:block;width:100%;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.ord-code{font-family:"Playfair Display",Georgia,serif;font-size:1.7rem;letter-spacing:.06em;color:var(--gold);font-weight:600}
.ord-note{font-size:.9rem;color:var(--ink-soft);max-width:440px;margin:0 auto 8px}

.track-form{display:flex;gap:10px;max-width:460px;margin:0 auto 32px;flex-wrap:wrap}
.track-form input{flex:1;min-width:200px;padding:13px 18px;border:1.5px solid var(--line-strong);
  border-radius:999px;background:var(--surface);color:var(--ink);font-size:1rem;letter-spacing:.08em;text-transform:uppercase}
.track-form input:focus{outline:none;border-color:var(--gold)}
@media(max-width:480px){.track-form{flex-direction:column}.track-form .btn{width:100%}}

.track-loading,.track-empty{text-align:center;padding:60px 20px;color:var(--ink-soft)}
.track-empty b{display:block;font-size:1.15rem;color:var(--ink);margin-bottom:10px}
.track-empty p{max-width:420px;margin:0 auto;font-size:.92rem}

.track-card{max-width:640px;margin:0 auto;border:1px solid var(--line);border-radius:var(--radius);padding:28px;background:var(--surface)}
.track-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.track-label{display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.track-id{font-family:"Playfair Display",Georgia,serif;font-size:1.4rem;color:var(--gold);letter-spacing:.04em}
.track-pill{padding:6px 14px;border-radius:999px;background:var(--ink);color:var(--surface);
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.track-pill.bad{background:#b23838;color:#fff}
.track-dead{margin-top:20px;padding:14px;border-radius:10px;background:#fbe6e6;color:#8c2b2b;font-size:.9rem}

.track-steps{list-style:none;margin:26px 0 8px;padding:0;display:flex;justify-content:space-between;position:relative}
.track-steps::before{content:"";position:absolute;top:7px;left:6%;right:6%;height:2px;background:var(--line)}
.track-steps li{position:relative;z-index:2;flex:1;text-align:center}
.track-steps .dot{display:block;width:16px;height:16px;border-radius:50%;margin:0 auto 10px;
  background:var(--surface);border:2px solid var(--line);transition:.3s}
.track-steps li.done .dot{background:var(--gold);border-color:var(--gold)}
.track-steps li.now .dot{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 5px rgba(184,152,90,.22)}
.track-steps .t{font-size:.7rem;color:var(--ink-soft);letter-spacing:.03em}
.track-steps li.done .t,.track-steps li.now .t{color:var(--ink);font-weight:600}
.track-blurb{text-align:center;font-size:.9rem;color:var(--ink-soft);margin-top:14px}
@media(max-width:560px){.track-steps .t{font-size:.6rem}}

.track-items,.track-addr{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.track-items h3,.track-addr h3{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px}
.track-line{display:flex;justify-content:space-between;gap:12px;font-size:.9rem;padding:6px 0}
.track-total{display:flex;justify-content:space-between;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:1rem}
.track-addr p{font-size:.9rem;color:var(--ink-soft);line-height:1.7}