/* ===========================================================================
   Doterivanje — sitnice koje razdvajaju „radi" od „izgleda skupo"
   ---------------------------------------------------------------------------
   Ovde nema novih komponenata. Sve je podešavanje već postojećih: ritam
   razmaka, dubina senki, ponašanje pri prelasku mišem i tipografski detalji.
   =========================================================================== */

/* --- Ritam ----------------------------------------------------------------
   Sekcije su bile podjednako razmaknute, pa je stranica delovala ravno.
   Sada prva sekcija posle hero-a diše više, a susedne sekcije iste boje
   dele razmak umesto da ga udvostručuju. */
.section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.section--tinted + .section--tinted { padding-block-start: 0; }
.trustbar + .section { padding-block-start: clamp(3rem, 6vw, 5rem); }

/* --- Naslovi sekcija ------------------------------------------------------- */
.section-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.section-head__title { font-size: var(--dg-fs-2xl); letter-spacing: -0.03em; }
.section-head--center .kalem { margin-top: var(--dg-3); }

.row-head__title { letter-spacing: -0.03em; }

/* --- Dubina ----------------------------------------------------------------
   Jedna meka senka izgleda plastično. Dve — jedna uska i tamna, druga široka
   i razlivena — daju utisak da predmet stvarno stoji na podlozi. */
:root {
    --dg-shadow-2: 0 1px 2px rgb(var(--dg-shadow-color) / 0.05),
                   0 6px 14px rgb(var(--dg-shadow-color) / 0.07),
                   0 18px 40px rgb(var(--dg-shadow-color) / 0.06);
    --dg-shadow-3: 0 2px 4px rgb(var(--dg-shadow-color) / 0.06),
                   0 10px 24px rgb(var(--dg-shadow-color) / 0.09),
                   0 30px 60px rgb(var(--dg-shadow-color) / 0.10);
}

/* --- Kartice --------------------------------------------------------------- */
.product-card {
    border-color: color-mix(in srgb, var(--dg-border) 70%, transparent);
    box-shadow: 0 1px 2px rgb(var(--dg-shadow-color) / 0.04);
}
.product-card:hover,
.product-card:focus-within {
    box-shadow: var(--dg-shadow-3);
    transform: translateY(-4px);
}

/* Slika dobija tanku unutrašnju liniju — bez nje se beli kadar stapa sa
   karticom i proizvod deluje kao da lebdi u praznom. */
.product-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 -1px 0 rgb(var(--dg-shadow-color) / 0.06);
    pointer-events: none;
}

.product-card__variety { transition: color var(--dg-dur-fast) var(--dg-ease); }
.product-card:hover .product-card__variety { color: var(--dg-primary); }

/* --- Dugmad ---------------------------------------------------------------- */
.btn--primary {
    box-shadow: 0 1px 2px rgb(var(--dg-shadow-color) / 0.10),
                0 6px 16px color-mix(in srgb, var(--dg-accent) 35%, transparent);
}
.btn--primary:hover {
    box-shadow: 0 2px 4px rgb(var(--dg-shadow-color) / 0.12),
                0 10px 24px color-mix(in srgb, var(--dg-accent) 45%, transparent);
    transform: translateY(-1px);
}
.btn--primary:active { transform: translateY(0); }

.btn--brand { box-shadow: 0 1px 2px rgb(var(--dg-shadow-color) / 0.10); }

/* --- Zaglavlje ------------------------------------------------------------- */
/* Traka se pojavljuje tek kad se stranica pomeri — dok je na vrhu, zaglavlje
   se stapa sa sadržajem. Klasu postavlja skripta. */
.site-header { transition: box-shadow var(--dg-dur) var(--dg-ease); }
.site-header.is-stuck { box-shadow: 0 1px 0 var(--dg-border), 0 6px 20px rgb(var(--dg-shadow-color) / 0.06); }

.mainnav__link { transition: color var(--dg-dur-fast) var(--dg-ease); }

/* --- Polje pretrage --------------------------------------------------------- */
.search__input {
    border-radius: var(--dg-radius-pill);
    padding-inline: var(--dg-4);
    background: var(--dg-surface);
    border-color: transparent;
}
.search__input:hover { background: var(--dg-surface-sunken); }
.search__input:focus {
    background: var(--dg-bg);
    border-color: var(--dg-primary);
}
.search__button { border-radius: var(--dg-radius-pill); }

/* --- Tematske pločice ------------------------------------------------------- */
.theme-tile__name { letter-spacing: -0.01em; }
.theme-tile { box-shadow: 0 1px 2px rgb(var(--dg-shadow-color) / 0.06); }

/* --- Blok saveta ------------------------------------------------------------ */
.advice {
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--dg-primary) 14%, transparent);
}
.advice::before {
    content: "";
    position: absolute;
    inset-block-start: -6rem;
    inset-inline-end: -6rem;
    width: 22rem;
    height: 22rem;
    border-radius: 50%;
    background: var(--dg-primary);
    opacity: 0.05;
    pointer-events: none;
}
.advice__facts li { box-shadow: 0 1px 2px rgb(var(--dg-shadow-color) / 0.05); }

/* --- Podnožje --------------------------------------------------------------- */
.site-footer__inner { padding-block: clamp(2.5rem, 5vw, 4rem); }
.site-footer__heading { letter-spacing: 0.12em; }
.site-footer a { transition: color var(--dg-dur-fast) var(--dg-ease); }

/* --- Tipografski detalji ---------------------------------------------------- */
/* Naslovi u tekstu ne smeju da vise sami na dnu ekrana */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Brojevi u cenama i tabelama uvek iste širine, da se kolone poravnaju */
.price, .numeric, .filter-count, .megapanel__count { font-variant-numeric: tabular-nums; }

/* --- Fokus ------------------------------------------------------------------ */
/* Na tamnim podlogama zeleni prsten se gubi — tamo ide žuti */
[data-tone] :focus-visible,
.site-footer :focus-visible,
.admin-nav :focus-visible { outline-color: var(--dg-accent); }

/* --- Manje kretanja --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .product-card:hover,
    .btn--primary:hover,
    .theme-tile:hover,
    .group-tile:hover { transform: none; }
}

/* --- Traka za kolačiće ------------------------------------------------------
   Stoji na dnu i ne prekriva sadržaj u potpunosti — prekrivanje celog ekrana
   tera korisnika da klikne bilo šta samo da nastavi, što nije saglasnost. */
.cookie-banner {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 90;
    background: var(--dg-bg);
    border-top: 1px solid var(--dg-border);
    box-shadow: 0 -8px 30px rgb(var(--dg-shadow-color) / 0.12);
    animation: cookie-in var(--dg-dur) var(--dg-ease-out);
}

@keyframes cookie-in {
    from { transform: translateY(100%); }
    to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cookie-banner { animation: none; }
}

.cookie-banner__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--dg-4);
    max-width: var(--dg-container);
    margin-inline: auto;
    padding: var(--dg-4) var(--dg-4);
}

.cookie-banner__title { margin: 0 0 var(--dg-1); font-weight: 700; font-size: var(--dg-fs-sm); }
.cookie-banner__text {
    margin: 0;
    max-width: 46rem;
    font-size: var(--dg-fs-xs);
    line-height: var(--dg-lh-loose);
    color: var(--dg-ink-muted);
}

.cookie-banner__actions { display: flex; gap: var(--dg-2); flex: none; }

@media (max-width: 47.999rem) {
    .cookie-banner__actions { width: 100%; }
    .cookie-banner__actions .btn { flex: 1; }
}