/* ========================================================================
   SIRA — design system
   Stil inspirat din wantsandneeds.com (dark, type mare, accent roșu),
   adaptat la identitatea SIRA (paletă oficială + wordmark geometric).
   ======================================================================== */

/* ---- Fonturi ---------------------------------------------------------- */
@font-face { font-family:"Karla"; src:url("/assets/fonts/Karla-Light.ttf") format("truetype"); font-weight:300; font-display:swap; }
@font-face { font-family:"Karla"; src:url("/assets/fonts/Karla-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Karla"; src:url("/assets/fonts/Karla-Medium.ttf") format("truetype"); font-weight:500; font-display:swap; }
@font-face { font-family:"Karla"; src:url("/assets/fonts/Karla-SemiBold.ttf") format("truetype"); font-weight:600; font-display:swap; }
@font-face { font-family:"Karla"; src:url("/assets/fonts/Karla-Bold.ttf") format("truetype"); font-weight:700; font-display:swap; }
@font-face { font-family:"Karla"; src:url("/assets/fonts/Karla-ExtraBold.ttf") format("truetype"); font-weight:800; font-display:swap; }
/* Montserrat (wordmark SIRA + display) — self-hosted, font VARIABIL (acoperă 700–800).
   Split pe subseturi cu unicode-range, ca la Google: latin se descarcă mereu,
   latin-ext doar când pagina chiar folosește diacritice (ă î ș ț). */
@font-face {
  font-family:"Montserrat";
  src:url("/assets/fonts/Montserrat-Variable-latin.woff2") format("woff2");
  font-weight:700 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:"Montserrat";
  src:url("/assets/fonts/Montserrat-Variable-latin-ext.woff2") format("woff2");
  font-weight:700 800; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Tokens ----------------------------------------------------------- */
:root{
  --ink:#0D0D0D;        /* fundal principal (Black brand) */
  --ink-2:#141414;      /* fundal alternativ */
  --char:#1c1c1c;       /* suprafețe / carduri pe dark */
  --char-2:#2B2B2B;     /* Charcoal brand */
  --line:#2e2e2e;       /* borduri pe dark */
  --paper:#F2F2F0;      /* Off-White brand — text pe dark + secțiuni light */
  --paper-2:#e9e9e6;
  --grey:#A6A6A6;       /* Grey brand — text secundar */
  --muted:#6b6b6b;      /* text mut pe light */
  --sand:#D8D2C3;       /* Sand brand */
  --olive:#4B533D;      /* Olive brand */
  --accent:#C8102E;     /* roșu print SIRA (accent, folosit punctual) */
  --accent-700:#A60D26;
  --accent-soft:#EF4560; /* roșu luminos DOAR pt text mic pe fundal închis — 5.3:1 pe ink, 4.6:1 pe char (WCAG AA). Butoanele/badge-urile rămân pe --accent. */

  --maxw:1280px;
  --pad:clamp(20px,4vw,56px);
  --radius:4px;
  --radius-pill:999px;

  --shadow-card:0 18px 40px -24px rgba(0,0,0,.55), 0 2px 6px -2px rgba(0,0,0,.4);
  --shadow-float:0 24px 60px -20px rgba(0,0,0,.6);
  --ease:cubic-bezier(.22,.61,.36,1);     /* spring-ish ease-out */
}

/* ---- Reset / base ----------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:"Karla",system-ui,sans-serif; font-weight:400;
  font-size:16px; line-height:1.7; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}

/* grain overlay subtil pentru adâncime */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9000; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Tipografie ------------------------------------------------------- */
.font-display{font-family:"Montserrat","Karla",sans-serif}
.wordmark{font-family:"Montserrat",sans-serif; font-weight:800; letter-spacing:.34em; text-indent:.34em}
.eyebrow{font-size:12px; letter-spacing:.28em; text-transform:uppercase; font-weight:600; color:var(--grey)}

.h-display{
  font-family:"Montserrat",sans-serif; font-weight:800;
  font-size:clamp(2.6rem,8vw,7rem); line-height:.96; letter-spacing:-.02em;
  text-transform:uppercase;
}
.h-1{font-family:"Montserrat",sans-serif; font-weight:800; font-size:clamp(2rem,4.5vw,3.4rem); line-height:1.02; letter-spacing:-.02em; text-transform:uppercase}
.h-2{font-family:"Montserrat",sans-serif; font-weight:700; font-size:clamp(1.4rem,3vw,2rem); line-height:1.1; letter-spacing:-.01em}

/* ---- Layout helpers --------------------------------------------------- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.section{padding-block:clamp(64px,9vw,128px)}
.bg-light{background:var(--paper); color:var(--ink)}
.bg-light .eyebrow{color:var(--muted)}

/* ---- Header ----------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:1000;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:16px; padding:14px var(--pad);
  background:rgba(13,13,13,.72); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.site-header.on-light{background:rgba(242,242,240,.8); border-color:#dddcd7; color:var(--ink)}

/* Homepage: header-ul plutește PESTE hero (fixed, nu rezervă spațiu) — astfel voalul
   translucid dezvăluie zidul cald al hero-ului, nu fundalul închis al paginii.
   Fără asta, header translucid peste --ink = bandă gri (cauza problemei). */
body[data-page="home"] .site-header{position:fixed; left:0; right:0}

/* header floating peste hero (homepage): imaginea hero e închisă (stradă, noapte) —
   voal întunecat care se stinge spre transparent, text/logo albe. Solid dark la scroll. */
.site-header.at-top-light{
  background:linear-gradient(180deg,
    rgba(13,13,13,.55) 0%,
    rgba(13,13,13,.16) 60%,
    rgba(13,13,13,0) 100%);
  backdrop-filter:none;
  border-bottom-color:transparent;
}
.site-header.at-top-light .nav-left a{color:rgba(242,242,240,.88)}
.site-header.at-top-light .nav-left a:hover,.site-header.at-top-light .nav-left a[aria-current="page"]{color:#fff}
.site-header.at-top-light .menu-toggle{color:var(--paper)}
.site-header.at-top-light .cart-btn{color:var(--paper); border-color:rgba(242,242,240,.42)}
.site-header.at-top-light .cart-btn:hover{color:#fff; border-color:var(--paper)}

.nav-left{display:flex; gap:32px; align-items:center; font-size:16px; font-weight:600; letter-spacing:.04em}
.nav-left a{color:var(--grey); transition:color .25s var(--ease)}
.nav-left a:hover,.nav-left a[aria-current="page"]{color:var(--paper)}
.on-light .nav-left a{color:var(--muted)} .on-light .nav-left a:hover{color:var(--ink)}
.brand-center{justify-self:center; display:flex; align-items:center; line-height:0}
.brand-logo{height:34px; width:auto; display:block}
.on-light .brand-logo{filter:invert(1)}
@media(max-width:760px){.brand-logo{height:28px}}
.nav-right{justify-self:end; display:flex; gap:18px; align-items:center}

/* buton coș (redesign) */
.cart-btn{display:inline-flex; align-items:center; gap:9px; padding:9px 16px;
  border:1px solid var(--line); border-radius:var(--radius-pill); background:transparent;
  color:var(--grey); font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), transform .2s var(--ease)}
.cart-btn:hover{color:var(--paper); border-color:rgba(242,242,240,.55)}
.cart-btn:active{transform:scale(.96)}
.cart-btn svg{flex:none}
.cart-btn__label{line-height:1}
.on-light .cart-btn{color:var(--muted); border-color:#d4d3cd}
.on-light .cart-btn:hover{color:var(--ink); border-color:var(--ink)}
.cart-btn .cart-count{position:static; transform:none; inset:auto; min-width:19px; height:19px;
  line-height:19px; padding:0 6px; background:var(--accent); color:#fff; border-radius:999px;
  font-size:10px; font-weight:700; text-align:center; display:none}
.cart-btn .cart-count.show{display:inline-block}
@media(max-width:760px){.cart-btn__label{display:none} .cart-btn{padding:9px 12px}}
.icon-btn{display:grid; place-items:center; width:40px; height:40px; color:var(--grey); position:relative; transition:color .25s var(--ease),transform .25s var(--ease)}
.icon-btn:hover{color:var(--paper)} .on-light .icon-btn{color:var(--muted)} .on-light .icon-btn:hover{color:var(--ink)}
.icon-btn:active{transform:scale(.92)}
.cart-count{
  position:absolute; top:4px; right:2px; min-width:17px; height:17px; padding:0 4px;
  background:var(--accent); color:#fff; font-size:10px; font-weight:700; line-height:17px;
  text-align:center; border-radius:999px; transform:scale(0); transition:transform .3s var(--ease);
}
.cart-count.show{transform:scale(1)}

.menu-toggle{display:none; background:none; border:0; color:inherit}
@media(max-width:760px){
  .site-header{grid-template-columns:auto 1fr auto}
  .nav-left{display:none}
  .menu-toggle{display:grid; place-items:center; width:40px; height:40px; color:var(--grey)}
}

/* ---- Butoane ---------------------------------------------------------- */
.btn{
  --bg:var(--paper); --fg:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 30px; border-radius:var(--radius-pill); border:1px solid transparent;
  background:var(--bg); color:var(--fg); font-weight:700; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase;
  transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-accent{--bg:var(--accent); --fg:#fff}
.btn-accent:hover{--bg:var(--accent-700)}
.btn-ghost{--bg:transparent; --fg:var(--paper); border-color:rgba(242,242,240,.4)}
.btn-ghost:hover{--bg:var(--paper); --fg:var(--ink); border-color:var(--paper)}
.btn-ghost-dark{--bg:transparent; --fg:var(--ink); border-color:rgba(13,13,13,.25)}
.btn-ghost-dark:hover{--bg:var(--ink); --fg:var(--paper)}
.btn-block{width:100%}
.btn[disabled]{opacity:.45; pointer-events:none}

.link-underline{position:relative; font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:600}
.link-underline::after{content:""; position:absolute; left:0; bottom:-4px; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease)}
.link-underline:hover::after{transform:scaleX(1)}

/* ---- Badge vertical lateral (ca în referință) ------------------------- */
.side-badge{
  position:fixed; left:0; top:50%; z-index:800;
  writing-mode:vertical-rl; transform:rotate(180deg) translateY(50%);
  background:var(--accent); color:#fff; font-size:11px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; padding:18px 7px;
  border-radius:0 0 4px 4px;
}
.side-badge:hover{background:var(--accent-700)}
/* mobil: bandă orizontală subțire FIXĂ JOS — varianta verticală s-ar suprapune
   peste conținut pe ecrane înguste */
@media(max-width:760px){
  .side-badge{
    writing-mode:horizontal-tb; transform:none;
    top:auto; left:0; right:0; bottom:0;
    text-align:center; border-radius:0;
    font-size:11px; letter-spacing:.12em;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  /* rezervă loc la finalul paginii, ca banda să nu acopere ultimul rând din footer */
  body.has-side-promo{padding-bottom:40px}
}

/* ---- Hero ------------------------------------------------------------- */
.hero{position:relative; min-height:88vh; display:grid; align-items:center; overflow:hidden}
.hero__media{position:absolute; inset:0; z-index:0}
.hero__media img{width:100%; height:100%; object-fit:cover; object-position:center 28%}
.hero__media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(13,13,13,.55) 0%,rgba(13,13,13,.15) 38%,rgba(13,13,13,.78) 100%)}
.hero__media::before{content:""; position:absolute; inset:0; z-index:1; mix-blend-mode:multiply;
  background:radial-gradient(120% 90% at 50% 30%, transparent 40%, rgba(13,13,13,.5) 100%)}
.hero__inner{position:relative; z-index:2; text-align:center; padding-block:120px}

/* banner artwork: mască centrată (vizibilă sus), titlu jos (stil poster), fade la bază spre --ink */
.hero--art{background:var(--ink); align-items:end}
.hero--art .hero__media::before{display:none}
.hero--art .hero__media::after{
  background:linear-gradient(180deg,
    rgba(13,13,13,.5) 0%, transparent 13%, transparent 40%,
    rgba(13,13,13,.55) 62%, rgba(13,13,13,.92) 86%, var(--ink) 100%);
}
.hero--art .hero__inner{padding-block:0 clamp(44px,8vh,92px); text-align:center}
.hero--art .h-display{font-size:clamp(2.2rem,5.6vw,4.6rem)}

/* banner cu raport fix: înălțimea urmează lățimea, deci imaginea se vede INTEGRAL,
   fără crop, pe orice lățime de ecran. Textul stă în zona neagră din stânga,
   nu peste mască. Sub 760px raportul e prea plat pentru un hero → revine la vh + crop. */
.hero--banner{min-height:0; aspect-ratio:2086/754; background:var(--ink)}
.hero--banner .hero__media img{object-fit:contain; object-position:center}
.hero--banner .hero__media::before{display:none}
.hero--banner .hero__media::after{
  background:linear-gradient(90deg,
    rgba(13,13,13,.72) 0%, rgba(13,13,13,.55) 22%, transparent 42%);
}
.hero--banner .hero__inner{text-align:left; padding-block:0; padding-inline:clamp(22px,5.5vw,104px)}
@media(max-width:760px){
  .hero--banner{aspect-ratio:auto; min-height:56vh}
  .hero--banner .hero__media img{object-fit:cover; object-position:58% center}
  .hero--banner .hero__media::after{
    background:linear-gradient(180deg,rgba(13,13,13,.35) 0%,rgba(13,13,13,.2) 40%,rgba(13,13,13,.88) 100%)}
  .hero--banner .hero__inner{text-align:center; align-self:end; padding-block:0 clamp(32px,6vh,64px)}
}

/* hero home: imagine urbană închisă, persoana în dreapta, text alb pe stânga.
   Voal întunecat dinspre stânga pentru lizibilitate, se stinge peste subiect. */
.hero--light{background:var(--ink)}
.hero--light .hero__media img{object-position:center}
.hero--light .hero__media::before{display:none}
.hero--light .hero__media::after{
  background:linear-gradient(90deg,
    rgba(13,13,13,.82) 0%,
    rgba(13,13,13,.6) 22%,
    rgba(13,13,13,.3) 44%,
    rgba(13,13,13,.1) 58%,
    transparent 70%);
}
.hero--light .hero__inner{text-align:left; max-width:none; margin:0; padding-inline:clamp(22px,5.5vw,104px)}
.hero--light .h-display{font-size:clamp(2.8rem,7vw,6rem); line-height:.92; letter-spacing:-.03em}
@media(max-width:760px){
  /* Imaginea e landscape: pe portrait `cover` taie mult din lățime. Reducem înălțimea hero
     (raport mai lat) → "zoom out": se vede mai mult din băiat (față + spate cu print).
     Scrim mai luminos sus (unde e el / zidul) și progresiv mai închis jos, sub text,
     ca textul alb să rămână lizibil fără să întunecăm tot cadrul. */
  .hero.hero--light{min-height:72vh!important}
  .hero--light .h-display{font-size:clamp(2.4rem,11vw,3.6rem); color:var(--paper)!important;
    text-shadow:0 2px 26px rgba(13,13,13,.7), 0 1px 3px rgba(13,13,13,.5)}
  /* pe telefon împingem cadrul spre stânga (object-position < 50%) ca subiectul
     din dreapta pozei să apară mai spre dreapta ecranului, cu textul liber pe stânga */
  .hero--light .hero__media img{object-position:51% center}
  .hero--light .hero__media::after{
    background:linear-gradient(180deg,
      rgba(13,13,13,.08) 0%,
      rgba(13,13,13,.02) 26%,
      rgba(13,13,13,.12) 46%,
      rgba(13,13,13,.28) 64%,
      rgba(13,13,13,.44) 82%,
      rgba(13,13,13,.60) 100%)}
  .hero--light .hero__inner{text-align:center; padding-block:72px}
  .hero--light .hero__inner>div{max-width:none!important}
  .hero--light .eyebrow{color:rgba(242,242,240,.82)!important}
  .hero--light .hero__inner p.reveal:not(.eyebrow){color:rgba(242,242,240,.94)!important; text-shadow:0 1px 16px rgba(13,13,13,.7), 0 1px 2px rgba(13,13,13,.5)}
  /* butonul secundar devine alb pe fundal închis (pe desktop rămâne ghost-dark) */
  .hero--light .btn-ghost-dark{--fg:var(--paper); border-color:rgba(242,242,240,.5)}
  .hero--light .btn-ghost-dark:hover{--bg:var(--paper); --fg:var(--ink); border-color:var(--paper)}
}

/* ---- Product card ----------------------------------------------------- */
.product-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,28px)}
@media(max-width:980px){.product-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.product-grid{grid-template-columns:1fr}}

/* shop — categorii simetrice (3 pe rând) */
.shop-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,28px)}

/* ---- Carusel per-colecție (DOAR pe mobil ≤640px) ---------------------- */
.carousel{position:relative}
.carousel__arrow,.carousel__dots{display:none}

@media(max-width:640px){
  /* grila devine pistă orizontală cu snap; un card + margine din următorul */
  .shop-grid{
    display:flex; grid-template-columns:none; gap:16px;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-bottom:2px;
  }
  .shop-grid::-webkit-scrollbar{display:none}
  .shop-grid>.card{flex:0 0 82%; scroll-snap-align:center}

  /* săgeți rotunde, plutind peste imagine (top setat din JS = centrul imaginii) */
  .carousel__arrow{
    display:grid; place-items:center; position:absolute; top:40%;
    transform:translateY(-50%); width:42px; height:42px; border-radius:999px;
    background:rgba(242,242,240,.88); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    border:1px solid rgba(13,13,13,.08); color:var(--ink); cursor:pointer; z-index:3;
    box-shadow:0 12px 26px -14px rgba(0,0,0,.55), 0 2px 6px -3px rgba(0,0,0,.35);
    transition:transform .3s var(--ease), opacity .3s var(--ease), background .25s var(--ease);
  }
  .carousel__arrow svg{width:20px; height:20px}
  .carousel__arrow.prev{left:6px}
  .carousel__arrow.next{right:6px}
  .carousel__arrow:hover{background:var(--paper)}
  .carousel__arrow:active{transform:translateY(-50%) scale(.88)}
  .carousel__arrow:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
  .carousel__arrow[disabled]{opacity:0; pointer-events:none}

  /* indicatori (dots) sub carusel */
  .carousel__dots{display:flex; justify-content:center; gap:7px; margin-top:16px}
  .carousel__dot{
    width:7px; height:7px; padding:0; border:0; border-radius:999px; cursor:pointer;
    background:rgba(13,13,13,.2); transition:width .35s var(--ease), background .35s var(--ease);
  }
  .carousel__dot.is-active{width:22px; background:var(--accent)}
  .carousel__dot:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

  /* colecție cu o singură piesă → fără controale */
  .carousel--single .carousel__arrow,.carousel--single .carousel__dots{display:none}
}
.shop-cat{margin:0 0 clamp(18px,2.6vw,30px); padding-bottom:14px; border-bottom:1px solid var(--line)}
.bg-light .shop-cat{border-color:#dcdad3}
.shop-cat--next{margin-top:clamp(52px,7vw,96px)}
.shop-cat .h-2{margin:0; text-transform:uppercase; letter-spacing:.02em}

/* layout editorial pentru 5 produse — fără spațiu gol (feature 2x2 + 4 carduri) */
.product-grid--featured{grid-template-columns:repeat(4,1fr); align-items:stretch}
.card--feature{grid-column:span 2; grid-row:span 2; display:flex; flex-direction:column}
.card--feature .card__media{aspect-ratio:auto; flex:1; min-height:0}
.card--feature .card__name{font-size:16px}
@media(max-width:980px){
  .product-grid--featured{grid-template-columns:repeat(2,1fr)}
  .card--feature{grid-column:1 / -1; grid-row:auto}
  .card--feature .card__media{aspect-ratio:16/10}
}
@media(max-width:480px){
  .product-grid--featured{grid-template-columns:1fr}
  .card--feature{grid-column:auto}
  .card--feature .card__media{aspect-ratio:4/5}
}

.card{display:block; position:relative}
.card__media{position:relative; overflow:hidden; border-radius:var(--radius); background:#e4e1da; aspect-ratio:4/5}
.bg-light .card__media{background:#e4e1da}
body:not(.is-light) .card__media{background:var(--char)}
.card__media img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease), opacity .4s var(--ease)}
.card__media img.alt{position:absolute; inset:0; opacity:0}
/* hover-swap doar pe device-uri cu hover (desktop) — pe touch ar rămâne „sticky" */
@media (hover:hover){
  .card:hover .card__media img.main{opacity:0}
  .card:hover .card__media img.alt{opacity:1}
  .card:hover .card__media img{transform:scale(1.04)}
}
/* touch: tap-to-flip prin buton dedicat (clasa .show-back pusă din JS) */
.card.show-back .card__media img.main{opacity:0}
.card.show-back .card__media img.alt{opacity:1}
.card__flip{position:absolute; right:10px; bottom:10px; z-index:3; display:none;
  align-items:center; gap:6px; padding:7px 11px 7px 9px; border-radius:999px;
  border:1px solid rgba(255,255,255,.45); background:rgba(13,13,13,.55); color:#fff;
  font-weight:700; font-size:11px; line-height:1; letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease)}
.card__flip svg{width:15px; height:15px; transition:transform .5s var(--ease)}
.card__flip:active{transform:scale(.94)}
.card.show-back .card__flip{background:var(--accent); border-color:var(--accent)}
.card.show-back .card__flip svg{transform:rotate(180deg)}
@media (hover:none){ .card__flip{display:inline-flex} }
.card__badge{position:absolute; top:10px; left:10px; z-index:2;
  background:var(--ink); color:var(--paper); font-size:10px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; padding:5px 9px; border-radius:2px}
.card__badge.sold{background:#8a8a8a}
.card__badge.accent{background:var(--accent); color:#fff}
.card__add{position:absolute; left:10px; right:10px; bottom:10px; z-index:2;
  transform:translateY(12px); opacity:0; transition:transform .35s var(--ease), opacity .35s var(--ease)}
.card:hover .card__add{transform:translateY(0); opacity:1}
.card__info{padding:14px 2px 4px}
.card__name{font-weight:700; font-size:14px; letter-spacing:.02em}
.card__price{color:var(--grey); font-size:13px; margin-top:2px}
.bg-light .card__price{color:var(--muted)}
.card__price .old{text-decoration:line-through; opacity:.6; margin-right:8px}
.card__price .new{color:var(--accent)}

/* ---- Marquee ---------------------------------------------------------- */
.marquee{overflow:hidden; border-block:1px solid var(--line); background:var(--ink-2)}
.marquee__track{display:flex; gap:0; padding-block:8px; width:max-content;
  animation:marquee 110s linear infinite}
.marquee span{font-family:"Montserrat",sans-serif; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; font-size:11.5px; color:var(--grey); padding-inline:20px}
.marquee span b{color:var(--accent)}
@keyframes marquee{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ---- Accordion (FAQ) -------------------------------------------------- */
.acc{border-top:1px solid var(--line)}
.bg-light .acc{border-color:#dcdbd5}
.acc__item{border-bottom:1px solid var(--line)}
.bg-light .acc__item{border-color:#dcdbd5}
.acc__head{width:100%; background:none; border:0; color:inherit; text-align:left;
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:24px 4px; font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-weight:700}
.acc__icon{position:relative; width:16px; height:16px; flex:none}
.acc__icon::before,.acc__icon::after{content:""; position:absolute; background:currentColor; transition:transform .3s var(--ease)}
.acc__icon::before{left:0; top:7px; width:16px; height:2px}
.acc__icon::after{left:7px; top:0; width:2px; height:16px}
.acc__item.open .acc__icon::after{transform:scaleY(0)}
.acc__body{max-height:0; overflow:hidden; transition:max-height .4s var(--ease)}
.acc__body p{margin:0; padding:0 4px 24px; color:var(--grey); max-width:64ch}
.bg-light .acc__body p{color:var(--muted)}

/* ---- Newsletter ------------------------------------------------------- */
.news{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end}
@media(max-width:760px){.news{grid-template-columns:1fr; gap:20px}}
.news__field{display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line); padding-bottom:10px}
.bg-light .news__field{border-color:#cfcec8}
.news__field input{flex:1; background:none; border:0; color:inherit; font-size:15px; padding:8px 0}
.news__field input::placeholder{color:var(--grey)}
.news__field button{background:none; border:0; color:inherit; display:grid; place-items:center;
  width:38px; height:38px; border-radius:999px; transition:transform .3s var(--ease)}
.news__field button:hover{transform:translateX(4px); color:var(--accent)}

/* ---- Footer ----------------------------------------------------------- */
.site-footer{background:var(--paper); color:var(--ink); padding:clamp(48px,7vw,90px) 0 28px}
.footer-logo{height:30px; width:auto; display:block; margin-bottom:16px}
.footer-cols{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px}
@media(max-width:760px){.footer-cols{grid-template-columns:1fr 1fr}}
.footer-col h4{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; font-weight:700}
.footer-col a{display:block; font-size:14px; color:#3a3a3a; padding:5px 0; transition:color .25s var(--ease)}
.footer-col a:hover{color:var(--accent)}
.pay-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.pay-row img{height:24px; width:auto; border-radius:3px; opacity:.9}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; gap:16px;
  flex-wrap:wrap; border-top:1px solid #dcdbd5; margin-top:48px; padding-top:22px;
  font-size:12px; color:var(--muted)}

/* ---- Reveal on load / scroll ----------------------------------------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none}}

/* ---- Cart drawer ------------------------------------------------------ */
.drawer-scrim{position:fixed; inset:0; z-index:1040; background:rgba(0,0,0,.55);
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease)}
.drawer-scrim.open{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; bottom:0; z-index:1041; width:min(420px,92vw);
  background:var(--ink); border-left:1px solid var(--line); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .4s var(--ease); box-shadow:var(--shadow-float)}
.drawer.open{transform:none}
.drawer__head{display:flex; justify-content:space-between; align-items:center; padding:22px 24px; border-bottom:1px solid var(--line)}
.drawer__items{flex:1; overflow-y:auto; padding:8px 24px}
.drawer__foot{border-top:1px solid var(--line); padding:20px 24px}
.line-item{display:grid; grid-template-columns:64px 1fr auto; gap:14px; padding:16px 0; border-bottom:1px solid var(--line)}
.line-item img{width:64px; height:80px; object-fit:cover; border-radius:3px; background:var(--char)}
.li-name{font-size:14px; font-weight:700}
.li-meta{font-size:12px; color:var(--grey); margin-top:2px}
.qty{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; margin-top:8px}
.qty button{width:28px; height:28px; background:none; border:0; color:var(--paper); font-size:16px; line-height:1}
.qty span{min-width:26px; text-align:center; font-size:13px}
.li-remove{background:none; border:0; color:var(--grey); font-size:11px; letter-spacing:.1em; text-transform:uppercase; align-self:start;
  min-height:24px; display:inline-flex; align-items:center} /* țintă tactilă ≥24px (WCAG 2.5.8) */
.li-remove:hover{color:var(--accent)}
.cart-empty{color:var(--grey); text-align:center; padding:60px 0}
.cart-total{display:flex; justify-content:space-between; font-size:15px; font-weight:700; margin-bottom:14px}
.cart-note{font-size:11px; color:var(--grey); text-align:center; margin-top:12px}

/* ---- Pay chips + mobile menu ----------------------------------------- */
.pay-chip{display:inline-grid; place-items:center; height:26px; padding:0 9px;
  background:#fff; border:1px solid #e2e1db; border-radius:4px;
  font-size:10px; font-weight:700; letter-spacing:.04em; color:#444;
  box-shadow:0 1px 2px rgba(0,0,0,.05)}
.mobile-menu{position:sticky; top:69px; z-index:999; background:var(--ink);
  border-bottom:1px solid var(--line); display:flex; flex-direction:column}
.mobile-menu[hidden]{display:none}
.mobile-menu a{padding:16px var(--pad); border-top:1px solid var(--line);
  font-size:14px; letter-spacing:.04em; color:var(--grey)}
.mobile-menu a:first-child{border-top:0}
.mobile-menu a:hover{color:var(--paper)}

/* ---- Chips (filtre) + size picker ------------------------------------ */
.chip{padding:9px 18px; border-radius:var(--radius-pill); border:1px solid var(--line);
  background:transparent; color:var(--grey); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; font-weight:600; transition:all .25s var(--ease)}
.chip:hover{color:var(--paper); border-color:var(--paper)}
.chip.active{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.bg-light .chip{border-color:#cfcec8; color:var(--muted)}
.bg-light .chip:hover{color:var(--ink); border-color:var(--ink)}
.bg-light .chip.active{background:var(--ink); color:var(--paper); border-color:var(--ink)}

.size-picker{display:flex; gap:10px; flex-wrap:wrap}
.size{min-width:52px; height:48px; padding:0 14px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:var(--radius); background:transparent;
  color:var(--paper); font-weight:600; letter-spacing:.06em; transition:all .2s var(--ease)}
.size:hover{border-color:var(--paper)}
.size.active{background:var(--paper); color:var(--ink); border-color:var(--paper)}

/* ---- Product page ----------------------------------------------------- */
.pdp{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,64px); align-items:start}
@media(max-width:880px){.pdp{grid-template-columns:1fr}}
.pdp-gallery{display:flex; flex-direction:column; gap:14px; position:sticky; top:90px}
@media(max-width:880px){.pdp-gallery{position:static}}
.pdp-main{border-radius:var(--radius); overflow:hidden; background:var(--char); aspect-ratio:4/5}
.pdp-main img{width:100%; height:100%; object-fit:cover}
.pdp-thumbs{display:flex; gap:12px}
.pdp-thumb{width:84px; aspect-ratio:4/5; border-radius:3px; overflow:hidden; border:1px solid var(--line); opacity:.6; transition:opacity .2s var(--ease)}
.pdp-thumb.active,.pdp-thumb:hover{opacity:1; border-color:var(--paper)}
.pdp-thumb img{width:100%; height:100%; object-fit:cover}
.pdp-price{font-size:24px; font-weight:700; margin-top:6px}
.field-label{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--grey); margin:0 0 12px; font-weight:700}

/* Origine — Designed in Romania · Made in Turkey */
.pdp-origin{display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:6px 12px;
  border:1px solid var(--line); border-radius:var(--radius-pill);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--grey)}
.pdp-origin span{width:3px; height:3px; border-radius:50%; background:var(--accent); flex:none}

/* Specificații în accordion */
.spec{padding:0 4px 24px}
.spec > *:last-child{margin-bottom:0}
.spec p{padding:0 !important; margin:0 0 14px}
.spec h4{font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--paper); margin:0 0 10px}
.spec h4 + ul,.spec h4 + p{margin-top:0}
.spec ul{list-style:none; padding:0; margin:0 0 20px; display:grid; gap:7px}
.spec li{position:relative; padding-left:16px; color:var(--grey); line-height:1.6}
.spec li::before{content:""; position:absolute; left:0; top:.68em; width:5px; height:1px; background:var(--accent)}
.spec li strong{color:var(--paper); font-weight:600}
.spec-note{font-size:13px; color:var(--grey); font-style:italic}

/* Tabel mărimi */
.size-table-wrap{overflow-x:auto; margin:0 0 16px; -webkit-overflow-scrolling:touch}
.size-table{width:100%; min-width:340px; border-collapse:collapse; font-size:14px}
.size-table th,.size-table td{padding:10px 12px; text-align:center; border-bottom:1px solid var(--line); color:var(--grey)}
.size-table thead th{color:var(--paper); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700}
.size-table tbody th{text-align:left; color:var(--paper); font-weight:600; white-space:nowrap}
.size-table tbody tr:last-child th,.size-table tbody tr:last-child td{border-bottom:0}

/* ---- Forms ------------------------------------------------------------ */
.input,.textarea{width:100%; background:var(--char); border:1px solid var(--muted); color:var(--paper);
  border-radius:var(--radius); padding:14px 16px; font:inherit; transition:border-color .2s var(--ease)}
.input:focus,.textarea:focus{outline:none; border-color:var(--accent-soft)}
.input::placeholder,.textarea::placeholder{color:var(--grey)}
.bg-light .input,.bg-light .textarea{background:#fff; border-color:#d8d7d1; color:var(--ink)}
.form-row{display:grid; gap:16px; margin-bottom:16px}
.form-2{grid-template-columns:1fr 1fr}
@media(max-width:560px){.form-2{grid-template-columns:1fr}}

/* ---- Prose (pagini legale) ------------------------------------------- */
.prose{max-width:760px; margin-inline:auto}
.prose h2{font-family:"Montserrat",sans-serif; font-weight:700; font-size:1.3rem; margin:38px 0 12px}
.prose h3{font-weight:700; font-size:1rem; margin:26px 0 8px}
.prose p,.prose li{color:var(--grey); margin:0 0 12px}
.prose a{color:var(--accent-soft)}
.prose ul{padding-left:20px; margin:0 0 16px}
.prose strong{color:var(--paper)}

/* ---- Utils ------------------------------------------------------------ */
.center{text-align:center}
.mt-s{margin-top:14px}.mt-m{margin-top:26px}.mt-l{margin-top:48px}
.flex-between{display:flex; justify-content:space-between; align-items:center; gap:16px}
.text-accent{color:var(--accent-soft)}
.divider{height:1px; background:var(--line); border:0}

/* ---- Accesibilitate ---------------------------------------------------- */
/* Ascuns vizual, dar citit de screen reader (labels, live regions). */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}
/* Skip link: invizibil până primește focus de la tastatură (primul Tab). */
.skip-link{position:fixed; top:12px; left:12px; z-index:400; background:var(--accent); color:#fff;
  padding:10px 16px; border-radius:6px; font-size:13px; font-weight:700; letter-spacing:.04em;
  transform:translateY(-250%); transition:transform .15s var(--ease)}
.skip-link:focus{transform:none}
/* Breadcrumb: mărește zona de tap fără să miște layout-ul. */
.breadcrumb a{display:inline-block; padding:6px 2px; margin:-6px -2px}