/* ============================================================
   search.css — vyhľadávanie
     1. pole v čiernej hlavičke (index.html, category.html, search.html)
     2. stránka s výsledkami (search.html)

   Paleta je rovnaká ako na zvyšku webu:
     ink #172124 · mint #dbfaf2 · gold #bd8c00

   NAČÍTAJTE HO AŽ ZA cart.css — jedno pravidlo nižšie prebíja
   .site-header .liberty-cart-btn { margin-left: auto } na mobile.
   ============================================================ */

/* ============================================================
   1. VYHĽADÁVACIE POLE V HLAVIČKE
   ============================================================ */

/* Kotva pre rozbalené pole na mobile (pozri .site-search.is-open nižšie).
   Bez nej by sa prilepilo na .sticky-nav, teda aj cez promo lištu. */
.site-header { position: relative; }

.site-search {
    position: relative;
    display: flex;
    align-items: center;
    /* Collapsed by default; the icon sits immediately before the cart. */
    margin-left: auto;
    margin-right: 0;
    flex: 0 0 42px;
    width: 42px;
    min-width: 42px;
    transition: flex-basis 0.28s ease, width 0.28s ease;
}

.site-search.is-open {
    flex-basis: min(360px, 38vw);
    width: min(360px, 38vw);
}

.site-search__input {
    font-family: 'Barlow Condensed', sans-serif;
    width: 0;
    height: 38px;
    box-sizing: border-box;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #ffffff;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    outline: none;
    transition: border-color 0.18s ease, background 0.18s ease;
    -webkit-appearance: none;
    appearance: none;
}

.site-search__input::placeholder {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 300;
}

.site-search__input:focus {
    border-color: #dbfaf2;
    background: rgba(255, 255, 255, 0.12);
}

/* Chrome kreslí do type="search" vlastný krížik, ktorý na tmavom
   podklade nevidno a nesedí do rastra. */
.site-search__input::-webkit-search-decoration,
.site-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.site-search__btn {
    position: absolute;
    right: 0;
    top: 0;
    width: 42px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: #ffffff;
    cursor: pointer;
    padding: 0;
    /* ZIADNE opacity. Lupa mala opacity:0.8, cim sa biela ikona zliala
       s cernou hlavickou na #D1D3D3 - vedla kosika, ktory je cisto
       biely, to citat ako sedu. Stlmenie navyse nerobila farba, ale
       priehladnost celeho prvku, takze by rovnako zosvetlila aj ramcek
       pri fokuse. Jas teraz drzi color, presne ako pri kosiku. */
    transition: transform 0.15s ease;
}

.site-search.is-open .site-search__input {
    width: 100%;
    padding: 0 42px 0 14px;
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.06);
}

/* Rovnaka odozva ako kosik (.liberty-cart-btn:hover v cart.css) -
   obe tlacidla v hlavicke reaguju rovnako. */
.site-search__btn:hover { transform: scale(1.06); }
.site-search__btn svg { width: 20px; height: 20px; display: block; }

/* × — vymaže napísaný text. Pridáva ho search.js (HTML sa nemení na
   žiadnej stránke) a ukáže sa len v otvorenom poli, v ktorom niečo je.
   Stojí hneď vľavo od lupy, preto pole dostane vpravo miesto pre oboje. */
.site-search__clear {
    position: absolute;
    right: 42px;
    top: 0;
    width: 30px;
    height: 38px;
    display: none;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.site-search__clear:hover { color: #dbfaf2; }

.site-search.is-open.has-value .site-search__clear { display: flex; }
.site-search.is-open.has-value .site-search__input { padding-right: 74px; }

/* --- mobil: pole je zbalené na lupu a otvorí sa cez celú hlavičku ---

   Rozbalené pole je position:absolute a ťahá sa od left:12px po
   right:12px. Preto tu MUSÍ byť width:auto — akákoľvek konkrétna
   šírka (a zbalený stav ju dáva: 42px) je pre absolútne umiestnený
   prvok tretí rozmer navyše, prehlasovanie sa vyrieši zahodením
   `right` a pole sa otvorí ako 42px prúžok pri ľavom okraji.        */
@media screen and (max-width: 768px) {

    .site-search {
        flex: 0 0 42px;
        width: 42px;
        margin-left: auto;
    }

    /* Košík stays beside the search icon. */
    .site-header .liberty-cart-btn { margin-left: 0; }

    .site-search.is-open {
        position: absolute;
        left: 12px;
        right: 12px;
        top: 16px;               /* (70px hlavička − 38px pole) / 2 */
        z-index: 5;
        flex: none;
        width: auto;             /* pozri poznámku vyššie */
        margin: 0;
    }

    .site-search.is-open .site-search__input {
        border-color: #dbfaf2;
        background: #172124;
    }
}

/* ============================================================
   2. STRÁNKA S VÝSLEDKAMI
   ============================================================ */

.se-page {
    /* Rovnaké premenné ako .cat-page — panel produktu a sekcia
       Parametre sú z category-page.css a čítajú si ich. */
    --cat-ink:      #172124;
    --cat-muted:    #888780;
    --cat-mint:     #dbfaf2;
    --cat-gold:     #bd8c00;
    --cat-line:     #eeece4;
    --cat-chip:     #efefec;

    font-family: 'Barlow Condensed', sans-serif;
    color: var(--cat-ink);
    background: #fff;
    min-height: 60vh;
}

/* .cat-body dáva stránke rovnakú šírku ako kategórii. */
.se-page .cat-body { padding-top: 34px; }

.se-head {
    margin: 0 0 26px;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.15;
}

.se-head em {
    font-style: normal;
    color: var(--cat-gold);
}

.se-count {
    display: block;
    margin-top: 6px;
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--cat-muted);
}

.se-msg {
    padding: 40px 0 60px;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--cat-muted);
}

.se-msg strong { color: var(--cat-ink); }
.se-msg--err   { color: #a3271f; }

/* „Možno ste mysleli" — hlavička nad uvoľnenými výsledkami.
   Na rozdiel od prázdneho výsledku tu pod správou karty SÚ, takže
   nepotrebuje 100px priestoru; má ich len oddeliť. */
.se-msg--hint {
    padding: 0 0 20px;
    font-size: 1.1rem;
}

.se-msg a { color: var(--cat-ink); }

/* --- mriežka kariet --- */
.se-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
    /* Karty v jednom riadku sú rovnako vysoké — ceny tak sedia na jednej
       linke a offsetTop, podľa ktorého sa hľadá riadok pre vysunutý
       produkt, je pre celý riadok rovnaký. */
    align-items: stretch;
}

.se-card {
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 26px 22px 24px;
    border: 1px solid var(--cat-line);
    background: #fff;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.se-card:hover {
    border-color: #d5d3ca;
    box-shadow: 0 6px 18px rgba(23, 33, 36, 0.07);
}

.se-card.active { border-color: var(--cat-ink); }

/* Fotka na podstavci — ten istý PNG ako na kartách radov.

   TU NESMIE PRIBUDNÚŤ ::after CEZ CELÝ RÁMČEK. Taký prekryv leží nad
   fotkou (tá je z-index:1) a zašedí celú scénu vrátane bicykla — presne
   to sa raz už stalo s rgba(23,33,36,.18) a vyzeralo to ako pokazené
   fotky z feedu. Stav vybranej karty rieši .se-card.active nižšie,
   a to len cez podstavec.

   isolation:isolate tu ostáva kvôli mix-blend-mode:multiply na mintovom
   podstavci — drží miešanie vnútri tohto rámčeka namiesto toho, aby sa
   prepadlo na pozadie stránky. */
/* VEĽKÁ FOTKA. Obrázky z feedu sú všetky 800×700 a bicykel v nich zaberá
   len ~75 % šírky a ~53 % výšky — zvyšok je biely okraj. Pri 4:3 rámčeku
   a max-height 88 % vychádzal bicykel na ~57 % šírky karty.

   Preto: rámček 8:5 (tvar bicykla, nie fotky), fotka ho vyplní
   (object-fit: cover) a zväčší sa o 15 %, čím sa biely okraj odreže.
   Rámček navyše zaberie aj bočný padding karty (align-self: stretch +
   záporný margin), takže bicykel má ~88 % šírky karty.

   1,15 je zmerané na všetkých 220 fotkách feedu: pri ňom sa okraj dotkne
   len 6 fotiek, ktoré sú nafotené na doraz (111 ANNIVERSARY, SHARE BIKE,
   kľuky). Pri 1,2 by to bolo 17, pri 1,25 už 35. */
.se-card-img {
    position: relative;
    align-self: stretch;
    margin-inline: -12px;
    aspect-ratio: 8 / 5;
    overflow: hidden;
    isolation: isolate;
}

/* :not(.se-card-brand) — v rámčeku je aj odznak značky a ten sa nesmie
   roztiahnuť ani zväčšiť spolu s fotkou. */
.se-card-img img:not(.se-card-brand) {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: 50% 50%;
    transform: scale(1.15);
}

.se-card-name {
    font-size: 1.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.1;
    margin-top: 14px;
}

.se-card-colors {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
}

.se-card-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(23, 33, 36, 0.25);
    display: block;
}

.se-card-size {
    font-size: 1.25rem;
    color: var(--cat-ink);
}

.se-card-size b { font-weight: 600; }

.se-card-price {
    align-self: flex-end;
    margin-top: auto;
    padding-top: 8px;
    font-size: 1.8rem;
    font-weight: 700;
}

/* --- filter nad výsledkami ---
   Stĺpce vedľa seba, oddelené tenkou čiarou, každý so svojím nadpisom.
   Vypnutá voľba je tmavá, zapnutá mätová — tie isté farby ako odpovede
   sprievodcu na úvodnej stránke (.guide-opt), takže filter pôsobí ako jeho
   pokračovanie. Stojí nad mriežkou, nie vedno s ňou: výsledky sa menia
   pod tým, čo človek práve klikol. */
.se-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    row-gap: 24px;
    margin: 0 0 44px;
}

.se-filter[hidden] { display: none; }

.se-fcol {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 30px 4px;
    border-left: 1px solid #d8d6cf;
}

.se-fcol:first-child { border-left: none; }

.se-fcol__title {
    margin: 0 0 14px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-transform: uppercase;
    white-space: nowrap;
    color: #172124;
}

.se-fcol__title--sub { margin: 18px 0 10px; }

.se-fcol__hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
    font-size: 0.85rem;
    color: #93a0a4;
}

.se-chips {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.se-chips--row  { flex-direction: row; justify-content: center; }
.se-chips--grid { display: grid; grid-template-columns: repeat(3, auto); }

.se-chip {
    min-width: 140px;
    padding: 8px 16px;
    /* border: none je NUTNÉ — <button> by inak vrátil rámček prehliadača. */
    border: none;
    border-radius: 0;
    background: #172124;
    color: #ffffff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.se-chip:hover { background: #34444a; }

.se-chip.is-on,
.se-chip.is-on:hover { background: #dbfaf2; color: #172124; }

/* Štvorčeky na čísla — veľkosť rámu a kolies. */
.se-chip--sq {
    min-width: 42px;
    height: 42px;
    padding: 0 8px;
}

/* Odporúčaná veľkosť rámu — zlatá linka pod číslom, zapnutá aj vypnutá.
   Nie iba farba: odporúčaná a zvolená sú dve rôzne veci a kto si vybral
   inú, má stále vidieť, ktorá sa radila. */
.se-chip.is-rec { box-shadow: inset 0 -4px 0 #bd8c00; }

.se-rec-key {
    display: inline-block;
    width: 16px;
    height: 4px;
    background: #bd8c00;
}

.se-clear {
    margin-top: 6px;
    padding: 0;
    border: none;
    background: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.85rem;
    color: #93a0a4;
    text-decoration: underline;
    cursor: pointer;
}

.se-clear:hover { color: #172124; }

/* Posuvník — ten istý ako výška v sprievodcovi (.guide-range), menší. */
.se-slider { width: 200px; }

.se-slider__val {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    margin: 0 0 8px;
    font-family: 'Barlow Condensed', sans-serif;
}

.se-slider__val output {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    color: #172124;
}

.se-slider__val span { font-size: 0.9rem; font-weight: 600; color: #93a0a4; }

/* Posuvník, ktorý ešte nič nefiltruje: číslo sivé — 175 cm je len
   východisko, nie odpoveď. */
.se-slider.is-idle .se-slider__val output { color: #c4c2ba; }

.se-range {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 5px;
    margin: 0;
    border-radius: 999px;
    background: #e6e4dc;
    outline: none;
}

.se-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #172124;
    border: 3px solid #dbfaf2;
    cursor: pointer;
}

.se-range::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #172124;
    border: 3px solid #dbfaf2;
    cursor: pointer;
}

.se-range:focus-visible { box-shadow: 0 0 0 3px rgba(189, 140, 0, 0.35); }

.se-slider__scale {
    display: flex;
    justify-content: space-between;
    margin: 8px 0 0;
    font-size: 0.8rem;
    color: #93a0a4;
}

/* ZRUŠIŤ FILTER — vlastný riadok pod stĺpcami, len keď je niečo zapnuté.
   Obrys, nie plná farba: je to únik z filtra, nie ďalšia voľba v ňom. */
.se-freset {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
}

.se-reset {
    padding: 8px 22px;
    border: 2px solid #172124;
    border-radius: 0;
    background: #ffffff;
    color: #172124;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.se-reset:hover { background: #172124; color: #ffffff; }

/* ZRUŠIŤ HĽADANIE vedľa nadpisu "VÝSLEDKY PRE …". Nadpis je h1 veľkým
   písmom, tlačidlo si drží vlastnú menšiu veľkosť a sedí na strednej
   línii textu. Počet produktov (.se-count) je display:block, ide pod. */
.se-reset--head {
    margin-left: 16px;
    padding: 5px 14px;
    font-size: 0.95rem;
    line-height: 1.2;
    vertical-align: middle;
}

@media screen and (max-width: 768px) {
    .se-reset--head { margin: 8px 0 0; display: block; }
}

/* Úzky displej: dva stĺpce vedľa seba, čiary vodorovne medzi riadkami. */
@media screen and (max-width: 900px) {
    .se-filter {
        display: grid;
        grid-template-columns: 1fr 1fr;
        row-gap: 0;
        margin-bottom: 30px;
    }
    .se-fcol { padding: 18px 10px; border-left: none; border-top: 1px solid #e6e4dc; }
    .se-fcol:nth-child(-n+2) { border-top: none; }
    .se-fcol__title { font-size: 1.3rem; margin-bottom: 10px; }
    .se-chips { align-self: stretch; }
    .se-chips--row, .se-chips--grid { align-self: center; }
    .se-chip { min-width: 0; font-size: 1.05rem; }
    .se-slider { width: 100%; }
    .se-freset { grid-column: 1 / -1; padding: 16px 0 0; border-top: 1px solid #e6e4dc; }
}

/* --- vysunutý produkt ---
   Vloží sa do mriežky hneď za riadok, v ktorom je vybraná karta,
   a zaberie celú šírku. Vnútri je .cat-product a sekcia Parametre,
   obe zo štýlov kategórie — nič sa tu nekopíruje. */
.se-rollout {
    grid-column: 1 / -1;
    scroll-margin-top: 90px;
}

.se-rollout[hidden] { display: none; }

.se-rollout .cat-divider { margin: 8px 0 21px; }

@media screen and (max-width: 768px) {
    .se-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
    .se-card-name { font-size: 1.15rem; }
    .se-card-price { font-size: 1.2rem; }
    .se-card { padding: 14px 10px 16px; }
    .se-card-img { margin-inline: -6px; }
    .se-page .cat-body { padding-top: 24px; }
}
/* ── Odznak značky na karte hľadania ──────────────────────────────
   Hľadanie ukazuje obe značky, tak nech je na karte vidieť, ktorá je
   ktorá. Vlastná značka v plnej sile, cudzia decentne.

   Je to SVG z engine/ (liberty-badge.svg / mayo-badge.svg), nie farebný
   text — preto tu nie je ani jedna firemná farba a súbor môže zostať
   zdieľaný oboma webmi cez symlink bez brand.css.

   .se-card-img UŽ MÁ position: relative a display: flex, takže odznak
   netreba nijako ukotvovať; absolútne umiestnenie ho vyberie z flexu.

   Selektor je .se-card-img .se-card-brand, nie .se-card-brand samotný:
   v rámčeku platí .se-card-img img { max-width: 92%; height: auto; … }
   a to by odznak roztiahlo. Dve triedy (0,2,0) prebijú triedu s prvkom
   (0,1,1), takže tieto pravidlá vyhrajú bez !important. */
.se-card-img .se-card-brand {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 2;                 /* nad fotkou, ktorá má z-index: 1 */
    width: 34px;
    height: 34px;               /* obe SVG sú štvorcové, 100 × 100 */
    max-width: none;            /* zruší max-width: 92% z pravidla vyššie */
    max-height: none;
    opacity: .45;
    pointer-events: none;       /* klik patrí karte, nie odznaku */
}

.se-card-img .se-card-brand--own {
    opacity: 1;
}

/* Na mobile má karta ~150px, kde je 34px odznak takmer štvrtina šírky.

   Toto MUSÍ stáť až za pravidlom vyššie, nie v @media bloku v strede
   súboru: .se-card-img .se-card-brand je (0,2,0) a rovnakú váhu má aj
   tento selektor, takže rozhoduje poradie — a vyhráva to, čo je nižšie. */
@media screen and (max-width: 768px) {
    .se-card-img .se-card-brand {
        width: 24px;
        height: 24px;
        top: 6px;
        left: 6px;
    }
}