/* =============================================================================
   Obchod — spoločný vizuálny jazyk celého e-shopu
   -----------------------------------------------------------------------------
   Vznikol z úvodnej stránky (Jakub 7. 10. 2026: „zjednotiť dizajn celého
   eshopu na základe úvodnej stránky"). Je tu len to, čo sa nedá poskladať
   z utilít a čo používa viac stránok:

     - bočné menu kategórií s vysúvacím panelom (components/kategorie-panel.php)
       a rozloženie stránky s ním (.shop-layout v header.php),
     - drobné písmo (štítok, popiska) a odkaz s podčiarknutím,
     - miniatúry s bielym pozadím (.ds-thumb),
     - jemný pohyb: nabehnutie pri scrollovaní (.ds-reveal) a zdvihnutie (.ds-lift).

   Farby plôch a textu ostávajú na utilitách (paleta ink / surface / accent).
   Načítava sa na každej stránke za root.css (includes/head.php).
   ========================================================================== */

:root {
    --ds-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    --ds-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    /* Tieň len pre to, čo pláva nad obsahom (panel kategórie, karta akcie). */
    --ds-float-shadow: 0 1px 2px rgba(17, 17, 20, 0.04), 0 18px 40px -16px rgba(17, 17, 20, 0.18),
        0 48px 96px -32px rgba(17, 17, 20, 0.22);
}

.dark {
    --ds-float-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.7);
}

/* ----- Drobné písmo: štítok sekcie, popiska, odkaz so šípkou --------------------- */

.ds-kicker {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
    font-family: var(--ds-mono);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6b6c74;
}

.dark .ds-kicker,
.ds-kicker-dark {
    color: #9b9ca3;
}

.ds-kicker-plain {
    color: #fff;
}

.ds-caption {
    font-family: var(--ds-mono);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ds-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
    padding-bottom: 0.25rem;
    transition: background-size 0.35s var(--ds-ease), color 0.2s ease;
}

.ds-link-arrow:hover,
.group:hover .ds-link-arrow {
    background-size: 100% 1px;
}

/* ----- Miniatúry s bielym pozadím ------------------------------------------------ */

/* Fotky kategórií a produktov majú biele pozadie — násobením splynú s plochou pod
   nimi. Na tmavej ploche by násobenie fotku zhaslo, preto tam dostane podložku. */
.ds-thumb img {
    mix-blend-mode: multiply;
    transition: transform 0.35s var(--ds-ease);
}

.ds-tile:hover .ds-thumb img {
    transform: scale(1.1);
}

.dark .ds-thumb {
    padding: 0.1875rem;
    border-radius: 0.5rem;
    background: #fff;
}

.dark .ds-thumb img {
    mix-blend-mode: normal;
}

.ds-noscrollbar {
    scrollbar-width: none;
}

.ds-noscrollbar::-webkit-scrollbar {
    display: none;
}

/* ----- Jemný pohyb ---------------------------------------------------------------- */

@keyframes ds-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

@keyframes ds-float {
    50% {
        transform: translateY(-6px);
    }
}

/* Sekcie pod záhybom nabehnú, keď k nim návštevník doscroluje. Skryté sú len
   vtedy, keď to main.js zvládne (.ds-js na <html>) — bez skriptu je všetko vidno. */
.ds-js .ds-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.8s var(--ds-ease);
}

.ds-js .ds-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* Okienko alebo karta sa pod myšou jemne zdvihne. */
.ds-lift {
    transition: transform 0.35s var(--ds-ease), box-shadow 0.35s ease, background-color 0.2s ease;
}

.ds-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -22px rgba(17, 17, 20, 0.45);
}

/* ----- Karty produktov (ds-product v tailwind-input.css) ---------------------------- */

/* Vo svetlom režime ostáva karta na tmavom páse (vlastná výroba) oceľová s tmavým
   textom ako všade inde. V tmavom režime by splynula s plochou (obe surface-800),
   preto je o odtieň svetlejšia — text karty je tam biely (dark: varianty). */
.dark .ds-dark-sheet .ds-product {
    background: #22252b;
}

.dark .ds-dark-sheet .ds-product:hover {
    background: #2b2f36;
}

/* Na telefóne je karta úzka (dva v rade, karusel 172 px): bez krátkeho popisu
   a bez ikony v tlačidle „Do košíka" — inak sa text láme a srdiečko vypadne
   z karty. Selektor s .ds-product, lebo štýl ikon a line-clamp sa načítajú neskôr. */
@media (max-width: 639px) {
    .ds-product .ds-product-desc,
    .ds-product .ds-product-cart-ico {
        display: none;
    }
}

/* Karusel má okraj 1rem; bez tohto prichytávanie zarovná prvú kartu o ten okraj
   vľavo od ostatného obsahu. */
[data-pc-track] {
    scroll-padding-inline: 1rem;
}

/* ----- Rozloženie stránky s bočným menu ------------------------------------------ */

/* Kategórie vľavo, obsah vpravo. Panel podkategórií sa umiestňuje voči tomuto
   obalu (position: relative), preto ho nesmie mať nič medzi ním a panelom.
   --cats-pad = vnútorný okraj obalu, --cats-top = odsadenie pod plávajúcou hlavičkou
   — rovnaké ako vrch obsahu stránok (md:pt-8), aby menu a obsah začínali v jednej línii. */
.shop-layout {
    --cats-w: 14.5rem;
    --cats-gap: 1.5rem;
    --cats-pad: 1rem;
    --cats-top: 2rem;
    position: relative;
}

.shop-layout-aside {
    display: none;
    padding-top: var(--cats-top);
    padding-bottom: 2rem;
}

@media (min-width: 768px) {
    .shop-layout {
        display: grid;
        grid-template-columns: var(--cats-w) minmax(0, 1fr);
        column-gap: var(--cats-gap);
        align-items: start;
    }

    .shop-layout-aside {
        display: block;
    }
}

@media (min-width: 1024px) {
    .shop-layout {
        --cats-w: 16rem;
    }
}

/* ----- Bočné menu kategórií (components/kategorie-panel.php) --------------------- */

/* Položky nabehnú postupne zhora (--i je poradie). Animuje sa odkaz, nie <li> —
   transformácia na predkovi by panelu podkategórií zobrala umiestnenie. */
.cats-link {
    transition: background-color 0.2s ease, color 0.2s ease;
    animation: ds-in 0.5s var(--ds-ease) both;
    animation-delay: calc(var(--i, 0) * 30ms + 60ms);
}

.cats-item:hover > .cats-link,
.cats-item:focus-within > .cats-link,
.cats-item.is-active > .cats-link {
    background: #fff;
}

.cats-item.is-active > .cats-link {
    color: #ff0b16;
}

.dark .cats-item:hover > .cats-link,
.dark .cats-item:focus-within > .cats-link,
.dark .cats-item.is-active > .cats-link {
    background: #22252b;
}

.cats-chevron {
    transition: transform 0.3s var(--ds-ease), color 0.2s ease;
}

.cats-item:hover .cats-chevron,
.cats-item:focus-within .cats-chevron {
    transform: translateX(3px);
    color: #ff0b16;
}

/* Panel podkategórií sa vysunie cez hlavný stĺpec. Otvára sa s krátkym zdržaním
   a zatvára s dlhším — prejazd myšou cez stĺpec nič neroztvorí a cesta šikmo
   do panela ho nezavrie. Čisto CSS: funguje bez skriptu aj z klávesnice. */
.cats-flyout {
    position: absolute;
    z-index: 30;
    top: var(--cats-top, 0);
    left: calc(var(--cats-pad, 0rem) + var(--cats-w) + var(--cats-gap));
    right: var(--cats-pad, 0rem);
    box-shadow: var(--ds-float-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-12px);
    transition: opacity 0.2s ease 0.14s, transform 0.3s var(--ds-ease) 0.14s, visibility 0s linear 0.34s;
}

/* Most cez medzeru medzi stĺpcami, aby myš cestou nevypadla z položky. */
.cats-flyout::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: var(--cats-gap);
}

.cats-item:hover > .cats-flyout,
.cats-item:focus-within > .cats-flyout {
    z-index: 31;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.25s ease 0.1s, transform 0.35s var(--ds-ease) 0.1s, visibility 0s linear 0.1s;
}

.cats-item.is-dismissed > .cats-flyout {
    opacity: 0;
    visibility: hidden;
    transition: none;
}

.cats-flyout li {
    animation: ds-in 0.4s var(--ds-ease) both;
}

.cats-item:not(:hover):not(:focus-within) .cats-flyout li {
    animation: none;
}

.cats-flyout li:nth-child(2) { animation-delay: 30ms; }
.cats-flyout li:nth-child(3) { animation-delay: 60ms; }
.cats-flyout li:nth-child(4) { animation-delay: 90ms; }
.cats-flyout li:nth-child(5) { animation-delay: 120ms; }
.cats-flyout li:nth-child(n + 6) { animation-delay: 150ms; }

.cats-sub.is-active {
    background: #111114;
    color: #fff;
}

/* ----- Pohyb na želanie vypnutý ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .ds-thumb img,
    .ds-link-arrow,
    .ds-lift,
    .ds-js .ds-reveal,
    .cats-flyout,
    .cats-chevron {
        transition: none;
    }

    .ds-lift:hover,
    .cats-flyout,
    .ds-js .ds-reveal {
        transform: none;
    }

    .ds-js .ds-reveal {
        opacity: 1;
    }

    .cats-link,
    .cats-flyout li {
        animation: none;
    }
}