/* ===================================================================
   VELVET DUSK HOMEPAGE (Smart Home Shop L3.5)
   Ported from approved hero mockup 2026-06-09. Scoped under .vd-home.
   =================================================================== */
.vd-home{--vd-bg:#14110F;--vd-bg-2:#1C1815;--vd-surface:#221D19;--vd-teal:#15B8A6;--vd-teal-deep:#0F8C7E;
  --vd-bordo:#7B2A3B;--vd-bordo-2:#9A3548;--vd-champ:#E7C79B;--vd-champ-soft:#D9B789;--vd-text:#F4EEE7;
  --vd-muted:#B6A99C;--vd-line:rgba(231,199,155,.18);--vd-radius:18px;--vd-maxw:1280px;
  --vd-serif:'Fraunces',Georgia,serif;--vd-sans:'Inter',system-ui,sans-serif;
  background:var(--vd-bg);color:var(--vd-text);font-family:var(--vd-sans);line-height:1.6;}
.vd-home *{box-sizing:border-box}
.vd-wrap{max-width:var(--vd-maxw);margin:0 auto;padding:0 32px}
.vd-home a{text-decoration:none;color:inherit}

/* hero */
.vd-hero{position:relative;padding:84px 0 96px;overflow:hidden}
.vd-hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(820px 540px at 8% -8%,rgba(21,184,166,.22),transparent 60%),
   radial-gradient(760px 620px at 102% 118%,rgba(123,42,59,.34),transparent 58%),
   linear-gradient(180deg,var(--vd-bg),var(--vd-bg-2));}
.vd-hero .vd-wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.vd-eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--vd-champ);font-weight:600;font-size:13.5px;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:22px}
.vd-eyebrow::before{content:"";width:30px;height:1px;background:var(--vd-champ)}
.vd-hero h1{font-family:var(--vd-serif);font-weight:600;font-size:60px;line-height:1.05;letter-spacing:-.01em;margin:0 0 22px}
.vd-hero h1 em{font-style:italic;color:var(--vd-champ)}
.vd-lead{font-size:18.5px;color:var(--vd-muted);max-width:30em;margin:0 0 34px}
.vd-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.vd-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:999px;font-weight:600;font-size:15.5px;transition:transform .2s}
.vd-btn-primary{background:linear-gradient(135deg,var(--vd-teal),var(--vd-teal-deep));color:#04201C;box-shadow:0 12px 30px rgba(21,184,166,.32)}
.vd-btn-primary:hover{transform:translateY(-2px);color:#04201C}
.vd-btn-ghost{border:1px solid var(--vd-line);color:var(--vd-text)}
.vd-btn-ghost:hover{border-color:var(--vd-champ);color:var(--vd-champ)}
.vd-hero-trust{display:flex;gap:26px;color:var(--vd-muted);font-size:14px;flex-wrap:wrap}
.vd-hero-trust span{display:flex;align-items:center;gap:8px}
.vd-hero-trust svg{width:17px;height:17px;color:var(--vd-teal)}
.vd-collage{position:relative;height:520px}
.vd-pcard{position:absolute;width:215px;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 26px 60px rgba(0,0,0,.5);color:#1a1a1a}
.vd-pcard img{width:100%;height:188px;object-fit:cover;display:block;background:#f3f3f3}
.vd-pcard .pc-b{padding:13px 15px 16px}
.vd-pcard .pc-t{font-size:13.5px;font-weight:600;line-height:1.35;color:#23201d;min-height:37px}
.vd-pcard .pc-p{margin-top:9px;display:flex;align-items:baseline;gap:8px}
.vd-pcard .now{font-weight:700;font-size:16.5px;color:var(--vd-bordo)}
.vd-pcard .old{font-size:12.5px;color:#aaa;text-decoration:line-through}
.vd-badge{position:absolute;top:11px;left:11px;background:var(--vd-bordo);color:#fff;font-size:11px;font-weight:700;padding:4px 9px;border-radius:7px;z-index:2}
.vd-c1{top:0;right:34px;transform:rotate(3deg)}
.vd-c2{top:150px;right:228px;transform:rotate(-4deg);z-index:3}
.vd-c3{top:286px;right:8px;transform:rotate(2.5deg)}
.vd-glow{position:absolute;width:300px;height:300px;border-radius:50%;top:120px;left:60px;background:radial-gradient(circle,rgba(231,199,155,.16),transparent 65%);filter:blur(8px)}

/* trust strip */
.vd-strip{border-top:1px solid var(--vd-line);border-bottom:1px solid var(--vd-line);background:var(--vd-bg-2)}
.vd-strip .vd-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:26px 32px}
.vd-tr{display:flex;align-items:center;gap:13px}
.vd-tr .ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;flex:none;background:rgba(21,184,166,.12);color:var(--vd-teal)}
.vd-tr .ic svg{width:21px;height:21px}
.vd-tr b{display:block;font-size:14.5px;font-weight:600;color:var(--vd-text)}
.vd-tr small{font-size:12.5px;color:var(--vd-muted)}

/* sections */
.vd-sec{padding:78px 0}
.vd-sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:34px;gap:20px}
.vd-sec-head h2{font-family:var(--vd-serif);font-weight:600;font-size:38px;letter-spacing:-.01em;margin:0}
.vd-sec-head p{color:var(--vd-muted);font-size:15.5px;margin:6px 0 0}
.vd-sec-head .vd-link{color:var(--vd-champ);font-weight:600;font-size:15px;display:flex;align-items:center;gap:7px;white-space:nowrap}

/* categories */
.vd-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.vd-cat{position:relative;height:260px;border-radius:var(--vd-radius);overflow:hidden;border:1px solid var(--vd-line);background:var(--vd-surface)}
.vd-cat img{width:100%;height:100%;object-fit:cover;background:#efefef;transition:transform .5s}
.vd-cat:hover img{transform:scale(1.06)}
.vd-cat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 36%,rgba(20,17,15,.88))}
.vd-cat .lab{position:absolute;left:18px;bottom:16px;z-index:2}
.vd-cat .lab b{display:block;font-family:var(--vd-serif);font-size:20px;font-weight:600;color:#fff}
.vd-cat .lab small{color:var(--vd-champ);font-size:12.5px;font-weight:600;letter-spacing:.04em}

/* products */
.vd-prods{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.vd-prod{background:var(--vd-surface);border:1px solid var(--vd-line);border-radius:var(--vd-radius);overflow:hidden;position:relative;transition:transform .25s,border-color .25s}
.vd-prod:hover{transform:translateY(-4px);border-color:rgba(231,199,155,.4)}
.vd-prod .pimg{height:230px;background:#fff;display:block;overflow:hidden}
.vd-prod .pimg img{width:100%;height:100%;object-fit:cover}
.vd-prod .pb{padding:16px 17px 19px}
.vd-prod .pcat{font-size:11.5px;color:var(--vd-teal);font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.vd-prod .pt{font-size:15px;font-weight:600;line-height:1.4;margin:7px 0 12px;min-height:42px;color:var(--vd-text)}
.vd-prod .pr{display:flex;align-items:baseline;gap:9px}
.vd-prod .pr .now{font-size:19px;font-weight:700;color:var(--vd-champ)}
.vd-prod .pr .old{font-size:13px;color:var(--vd-muted);text-decoration:line-through}
.vd-add{margin-top:14px;display:block;text-align:center;padding:12px;border-radius:11px;font-weight:600;font-size:14.5px;
  background:rgba(21,184,166,.12);color:var(--vd-teal);border:1px solid rgba(21,184,166,.3)}
.vd-prod:hover .vd-add{background:var(--vd-teal);color:#04201C}

/* band */
.vd-band{margin:0 0 30px;border-radius:24px;padding:54px 48px;text-align:center;position:relative;overflow:hidden;background:linear-gradient(120deg,var(--vd-bordo),#5a1f2c)}
.vd-band::after{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 50% -40%,rgba(231,199,155,.25),transparent)}
.vd-band h3{position:relative;font-family:var(--vd-serif);font-size:34px;font-weight:600;margin:0 0 12px}
.vd-band p{position:relative;color:rgba(255,255,255,.85);margin:0 0 26px;font-size:16px}
.vd-band .vd-btn-primary{position:relative;background:var(--vd-champ);color:#3a1620}

@media(max-width:900px){
  .vd-hero .vd-wrap{grid-template-columns:1fr;gap:40px}
  .vd-hero h1{font-size:42px}
  .vd-collage{height:430px;margin:0 auto;max-width:430px}
  .vd-strip .vd-wrap{grid-template-columns:repeat(2,1fr);gap:18px}
  .vd-cats,.vd-prods{grid-template-columns:repeat(2,1fr)}
  .vd-wrap{padding:0 20px}
  .vd-sec{padding:54px 0}

  /* T4/P3.1 (20.07) -- audit nalaz #4: slika proizvoda isecena ~28% po sirini.
     Uzrok: .pimg ima FIKSNU height:230px, a od 900px navise kartica je 2-kolonska
     pa se suzi na ~165px. Kvadratni izvor 300x300 kroz object-fit:cover u
     165x230 portret okvir gubi ivice proizvoda (stativ, montazni nosac).
     aspect-ratio:1 vraca okvir na kvadrat = izvor staje bez isecanja.
     Ide u 900px granu (ne globalno): desktop 4-kolonski raspored nije nalaz
     i ostaje netaknut. Na tabletu je isti bug, samo po visini. */
  .vd-prod .pimg{aspect-ratio:1;height:auto}
}

/* ===========================================================================
   T4/P3.1 (20.07) -- TELEFON (<=560px). Fajl je do danas imao JEDAN breakpoint
   (900px), pa je sve ispod 560px nasledjivalo tablet raspored. Audit nalazi
   #3, #9, #12.
   Zadrzane su 2 kolone (industrijski standard za mobilni e-commerce grid);
   resava se ono sto je izmereno, ne menja se raspored.
   =========================================================================== */
@media(max-width:560px){
  /* #3: cena se prelamala u 2 reda (`1.000` / `RSD`, izmereno rowH 60.8px).
     Unutrasnja sirina kartice je bila 165 - 2*17 = 131px, a `1.000 RSD` (19px)
     + `1.500 RSD` (13px) + gap 9 ne staju. Tri poteza zajedno vracaju cenu u
     JEDAN red: uzi padding daje +20px, manji font i gap oduzimaju ~14px.
     nowrap je mreza -- ako sadrzaj ipak preraste, prelama se CELA stara cena
     u nov red umesto da se raspolovi broj od valute. */
  .vd-prod .pb{padding:13px 12px 15px}
  .vd-prod .pr{flex-wrap:wrap;gap:6px}
  .vd-prod .pr .now{font-size:17px;white-space:nowrap}
  .vd-prod .pr .old{font-size:12.5px;white-space:nowrap}

  /* #9: naslov newslettera se lomio u 3 reda, sa crticom i recju "kupujete"
     nasukanim u sredini reda.
     padding 48px je ostavljao samo 254px tekstualne sirine na 350px bandu. */
  .vd-band{padding:40px 20px}
  .vd-band h3{font-size:26px}
  .vd-band p{font-size:15px}

  /* #12: `space-between` je gurao link `Sve kategorije` u desni donji ugao,
     odvojen od naslova -- izgledalo je kao da pripada drugom redu. */
  .vd-sec-head{flex-direction:column;align-items:flex-start;gap:10px}
  .vd-sec-head h2{font-size:30px}
}

/* scroll-reveal (gated pod .has-reveal — bez JS sve ostaje vidljivo) */
html.has-reveal .vd-home [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
html.has-reveal .vd-home [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){html.has-reveal .vd-home [data-reveal]{opacity:1!important;transform:none!important;transition:none}}