/* =====================================================================
   Модна къща Славея — статичен сайт
   Тема-архитектура: всичко минава през токени.
   Парад = тема по подразбиране (:root). Нова тема = [data-theme="x"]{...}.
   ===================================================================== */

/* ---- non-theme tokens (споделени между всички теми) ---- */
:root{
  --maxw: 1140px;
  --pad: 28px;
  --radius: 10px;
  --radius-sm: 4px;
  --step: clamp(3rem, 6vw, 5.5rem);   /* вертикален ритъм между секции */
}

/* ---- ТЕМА: ПАРАД (по подразбиране + [data-theme="parade"]) ---- */
:root,
:root[data-theme="parade"]{
  --bg:        #0E1230;
  --bg-2:      #141A46;
  --surface:   #11163A;
  --text:      #F4F1EA;
  --text-dim:  #AAB0D6;
  --accent:    #E3A93C;
  --accent-2:  #F0C064;
  --pop:       #E8437F;
  --on-accent: #12142E;
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.16);
  --nav-bg:    rgba(14,18,48,.82);
  --shadow:    0 24px 60px -30px rgba(0,0,0,.7);
  --hero-shade: 14,18,48;   /* rgb за hero градиента (текстовата страна избледнява към него) */
  --tile-shade: 10,13,36;   /* rgb за долния градиент на категорийните карти */
  --font-display: "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Helvetica Neue", Arial, sans-serif;
  --display-transform: uppercase;
  --display-weight: 800;
  --display-tracking: -.01em;
  color-scheme: dark;
}

/* ---- ТЕМА: ПАРАД СВЕТЛА ([data-theme="parade-light"]) ---- */
:root[data-theme="parade-light"]{
  --bg:        #F6F4EF;
  --bg-2:      #ECE7DB;
  --surface:   #FFFFFF;
  --text:      #15183A;
  --text-dim:  #5C6079;
  --accent:    #B67F1D;
  --accent-2:  #9A6A14;
  --pop:       #C7325F;
  --on-accent: #FFFFFF;
  --line:      rgba(21,24,58,.12);
  --line-2:    rgba(21,24,58,.22);
  --nav-bg:    rgba(246,244,239,.85);
  --shadow:    0 24px 60px -30px rgba(30,30,70,.28);
  --hero-shade: 246,244,239;
  --tile-shade: 21,24,58;
  color-scheme: light;
}

/* ---- reset / base ---- */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
.wrap{ max-width: var(--maxw); margin:0 auto; padding: 0 var(--pad); }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:12px; top:12px; z-index:100; background:var(--accent); color:var(--on-accent); padding:10px 16px; border-radius:var(--radius-sm); }

.kick{ color: var(--accent); font-size:12px; letter-spacing:.28em; text-transform:uppercase; font-weight:700; }
h1,h2,h3{
  font-family: var(--font-display); font-weight: var(--display-weight);
  text-transform: var(--display-transform); letter-spacing: var(--display-tracking);
  line-height:1.05; margin:0; text-wrap: balance;
}

/* ---- buttons ---- */
.btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display);
  font-weight:800; text-transform:uppercase; letter-spacing:.07em; font-size:13px;
  padding:14px 26px; border-radius:var(--radius-sm); transition:.2s; cursor:pointer; border:1px solid transparent; }
.btn--primary{ background:var(--accent); color:var(--on-accent); }
.btn--primary:hover{ background:var(--accent-2); }
.btn--ghost{ border-color:var(--line-2); color:var(--text); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }

/* ---- nav ---- */
.nav{ position:sticky; top:0; z-index:30; background:var(--nav-bg); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav__in{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px var(--pad); max-width:var(--maxw); margin:0 auto; }
.brand{ font-family:var(--font-display); font-weight:800; letter-spacing:.16em; text-transform:uppercase; font-size:16px; line-height:1; }
.brand b{ color:var(--accent); font-weight:800; }
.brand small{ display:block; font-size:9.5px; letter-spacing:.3em; color:var(--text-dim); font-weight:600; margin-top:4px; }
.menu{ display:flex; gap:22px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); }
.menu a:hover, .menu a[aria-current="page"]{ color:var(--accent); }
.nav__cta{ display:flex; align-items:center; gap:12px; }
.burger{ display:none; background:none; border:1px solid var(--line-2); color:var(--text); width:42px; height:38px; border-radius:var(--radius-sm); font-size:18px; cursor:pointer; }

/* ---- hero ---- */
.hero{ position:relative; min-height:min(78vh,600px); display:flex; align-items:center; overflow:hidden; }
.hero__img{ position:absolute; inset:0; }
.hero__img img{ width:100%; height:100%; object-fit:cover; object-position:center 28%; }
.hero__img::after{ content:""; position:absolute; inset:0; background:
  linear-gradient(90deg, var(--bg) 6%, rgba(var(--hero-shade),.72) 46%, rgba(var(--hero-shade),.28) 100%),
  linear-gradient(0deg, var(--bg) 3%, transparent 46%); }
.hero .wrap{ width:100%; }   /* иначе flex-елементът се свива до текста и се центрира */
.hero__c{ position:relative; z-index:2; max-width:640px; padding:56px 0; }
.hero h1{ font-size:clamp(34px,6vw,60px); margin-top:16px; }
.hero h1 em{ color:var(--accent); font-style:normal; }
.hero p{ color:var(--text-dim); font-size:clamp(15px,2vw,18px); margin:20px 0 30px; max-width:46ch; }
.hero__btns{ display:flex; flex-wrap:wrap; gap:14px; }

/* ---- ticker ---- */
.ticker{ background:var(--accent); color:var(--on-accent); }
.ticker .wrap{ display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:center; padding:13px var(--pad); font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:13px; }
.ticker span{ display:inline-flex; align-items:center; gap:10px; }
.ticker span::before{ content:"◆"; font-size:9px; opacity:.55; }

/* ---- section frame ---- */
.section{ padding: var(--step) 0; }
.section--tight{ padding: calc(var(--step) * .6) 0 var(--step); }

/* ---- about ---- */
.about__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start; }
.about h2{ font-size:clamp(24px,3.2vw,34px); margin:14px 0 20px; }
.about p{ color:var(--text-dim); font-size:16.5px; margin:0 0 16px; }
.produce{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 28px; }
.produce h3{ font-family:var(--font-body); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin:0 0 16px; }
.produce ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.produce li{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px; }
.produce li::before{ content:""; flex:0 0 auto; width:7px; height:7px; margin-top:8px; background:var(--accent); transform:rotate(45deg); }
.produce .note{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:13.5px; color:var(--text-dim); }

/* ---- category grid ---- */
.cats__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:26px; flex-wrap:wrap; }
.cats__head h2{ font-size:clamp(22px,3vw,30px); margin-top:8px; }
.cats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.cat{ position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:8px; background:var(--bg-2); }
.cat img{ width:100%; height:100%; object-fit:cover; opacity:.85; transition:.5s; }
.cat:hover img{ transform:scale(1.05); opacity:1; }
.cat::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(var(--tile-shade),.94),transparent 58%); }
.cat__l{ position:absolute; left:18px; bottom:16px; z-index:2; }
.cat__l b{ display:block; font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:15px; }
.cat__l b::before{ content:""; display:block; width:28px; height:3px; background:var(--accent); margin-bottom:10px; }
.cat__l span{ font-size:12px; color:var(--text-dim); }

/* ---- quote band ---- */
.quote{ background-color:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.quote .wrap{ padding:var(--step) var(--pad); text-align:center; }
.quote p{ font-family:var(--font-display); font-weight:700; text-transform:none; font-size:clamp(20px,3vw,30px); line-height:1.25; max-width:26ch; margin:0 auto; text-wrap:balance; }
.quote em{ color:var(--accent); font-style:normal; }

/* ---- page header (interior pages) ---- */
.phead{ padding: calc(var(--step) * .8) 0 0; }
.phead h1{ font-size:clamp(30px,5vw,50px); margin:14px 0 0; }
.phead p{ color:var(--text-dim); font-size:17px; margin:16px 0 0; max-width:60ch; }
.crumbs{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); }
.crumbs a:hover{ color:var(--accent); }

/* ---- gallery ---- */
.gallery{ columns: 4; column-gap:14px; }
.gallery a{ display:block; margin:0 0 14px; break-inside:avoid; border-radius:8px; overflow:hidden; background:var(--bg-2); position:relative; }
.gallery img{ width:100%; height:auto; transition:.4s; }
.gallery a:hover img{ transform:scale(1.04); opacity:.92; }
.gallery a::after{ content:"＋"; position:absolute; right:12px; bottom:10px; color:#fff; font-size:20px; opacity:0; transition:.25s; text-shadow:0 2px 8px rgba(0,0,0,.6); }
.gallery a:hover::after{ opacity:.9; }

/* ---- lightbox ---- */
.lb{ position:fixed; inset:0; z-index:60; background:rgba(8,10,26,.94); display:none; align-items:center; justify-content:center; padding:24px; }
.lb.is-open{ display:flex; }
.lb img{ max-width:min(94vw,1200px); max-height:88vh; border-radius:6px; box-shadow:var(--shadow); }
.lb__btn{ position:fixed; background:rgba(255,255,255,.08); border:1px solid var(--line-2); color:#fff; width:52px; height:52px; border-radius:50%; font-size:22px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.lb__btn:hover{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.lb__close{ top:20px; right:20px; }
.lb__prev{ left:20px; top:50%; transform:translateY(-50%); }
.lb__next{ right:20px; top:50%; transform:translateY(-50%); }
.lb__count{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%); color:var(--text-dim); font-size:13px; letter-spacing:.1em; }

/* ---- contact ---- */
.contact__grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.contact h2{ font-size:clamp(26px,3.4vw,38px); margin:14px 0 18px; }
.contact .lead{ color:var(--text-dim); font-size:16.5px; margin:0 0 12px; max-width:44ch; }
.addr{ margin-top:22px; display:grid; gap:6px; font-size:15.5px; color:#CBD0EC; }
.addr .big{ color:var(--text); font-weight:700; font-size:17px; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.02em; }
.addr a{ color:var(--accent); }
.cards{ display:grid; gap:16px; }
.ccard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; }
.ccard .who{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); margin-bottom:6px; }
.ccard .val{ font-size:22px; font-weight:800; font-family:var(--font-display); }
.ccard .val a:hover{ color:var(--accent); }
.map{ margin-top:22px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.map iframe{ width:100%; height:300px; border:0; display:block; filter:grayscale(.2) contrast(1.05); }

/* ---- footer ---- */
.foot{ border-top:1px solid var(--line); padding:34px 0; color:var(--text-dim); font-size:14px; }
.foot__in{ display:flex; flex-wrap:wrap; gap:14px 24px; justify-content:space-between; align-items:center; }
.foot .cities{ max-width:60ch; }
.foot a:hover{ color:var(--accent); }

/* ---- responsive ---- */
@media (max-width: 900px){
  .about__grid, .contact__grid{ grid-template-columns:1fr; gap:32px; }
  .cats__grid{ grid-template-columns:repeat(2,1fr); }
  .gallery{ columns:3; }
}
@media (max-width: 640px){
  .menu{ display:none; }
  .burger{ display:inline-flex; align-items:center; justify-content:center; }
  .nav.is-open .menu{ display:flex; position:absolute; left:0; right:0; top:100%; flex-direction:column; gap:0; background:var(--bg); border-bottom:1px solid var(--line); }
  .nav.is-open .menu a{ padding:14px var(--pad); border-top:1px solid var(--line); }
  .gallery{ columns:2; }
  .hero__img::after{ background:linear-gradient(0deg, var(--bg) 6%, rgba(var(--hero-shade),.5) 70%); }
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}