/* ==========================================================================
   LEIFHEIT TWEAKS — plugin CSS (nezavisno od teme)
   Korak 0, Faza 3: Gilroy woff2 (400/500/600/700) + Grupa A CSS
   (docs/01-performance-plan.md §9). Heavy (800) namerno nije konvertovan —
   koristio se na 2 mesta u child style.css, oba svedena na 700.
   ========================================================================== */

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Tipografska osnova — Gilroy globalno. Duplikat postoji i u child style.css
   (biće uklonjen u Fazi 5); ovde je nezavisan od teme. */
body, h1, h2, h3, h4, h5, h6, p, a, span, div, button, input, select, textarea {
    font-family: 'Gilroy', sans-serif !important;
}

/* Fix mobilni horizontalni overflow — nezavisno od teme/Elementora.
   `clip` umesto `hidden` (Prompt 09, Deo B, 09.08.2026): `overflow: hidden` na
   html/body pravi scroll kontejner (jer se overflow-y implicitno računa kao
   'auto' kad je overflow-x != visible — CSS Overflow spec), a to ubija
   `position: sticky` na svim potomcima, uklj. header. `clip` seče sadržaj
   isto kao `hidden`, ali ne pravi scroll kontejner — sticky ostaje živ.

   Ovo je ZAVOJ, ne LEK — seče simptom, ne uzrok. LEK je pravilo ispod
   (`.site-main`), koje ga čini suvišnim. Namerno stoje jedno uz drugo. */
html, body {
    overflow-x: clip !important;
    max-width: 100% !important;
}

/* LEK za mobilni horizontalni overflow (Prompt 12, Faza 2→4, 10.08.2026).
   Hello Elementor teme (`hello-elementor/assets/css/theme.css`) postavlja na
   `.site-main` (= main#content): `width:100%` + na mobilnom (≤575px)
   `padding-inline:10px` svaka strana — ali NIGDE ne postavlja `box-sizing`.
   Bez border-box, browser podrazumeva content-box: padding se DODAJE na
   100% širine, pa je renderovana kutija šira od roditelja. Nije rat
   specifičnosti (Hello ne postavlja box-sizing uopšte, pa nema sa čim da
   se takmiči) — obično `box-sizing:border-box`, bez !important, dovoljno
   je da padding stane UNUTAR deklarisane širine.

   Faza 4: `.site-main` samo NIJE bio jedini pogođen. `/moj-nalog/` je i
   dalje prelivao — ovog puta `.u-column1/2` (WooCommerce My Account layout),
   isti obrazac (width:100% + padding, bez border-box). Pravi zaključak:
   Elementor postavlja `border-box` samo unutar sopstvenog stabla
   (`.elementor *`), a sve WooCommerce/tema markup koji NIJE renderovan kroz
   Elementor (cart, checkout, my-account, i njihovi potomci) ostaje na
   podrazumevanom content-box — sajtu fali globalni reset za taj deo.
   Krpljenje element-po-element (prvo `.site-main`, pa `.u-column1/2`, pa
   sledeće) nema kraja, pa je pravilo prošireno na CEO sadržajni podstablo:
   `.site-main` i svi njegovi potomci (uklj. ::before/::after). Header/footer
   (HFE/Elementor) se ne diraju — već su border-box kroz `.elementor *`.

   Ovo pravilo LEK-uje isti simptom koji `overflow-x: clip` (gore) samo SEČE
   — otud stoje jedno uz drugo. Cilj je da `clip` postane nepotreban zavoj;
   potvrđeno testom u Fazi 2 da jeste, ali ostaje kao zaštita od budućeg
   sadržaja. Detalji i puna dijagnoza obe faze: docs/STATUS.md §"Prompt 12". */
.site-main,
.site-main *,
.site-main *::before,
.site-main *::after {
    box-sizing: border-box;
}

/* Sticky glavni meni (Prompt 09, Deo B, 09.08.2026, traži Miloš).
   header#masthead = tačno red sa logom/nav/pretragom/ikonicama (HFE header,
   Elementor post 402) — gornja info traka (.leifheit-top-bar, dostava/telefon)
   je SIBLING ispred <header>, ne unutra, pa ostaje van sticky-ja i sme da
   odskroluje. Isti red na mobilnom (nav ide u hamburger, elementor-hidden-mobile)
   postaje traka sa logom/pretragom/korpom — tačno ono što je traženo.

   Selektor `body.ehf-header header#masthead`, NE samo `header#masthead`
   (Prompt 11, Deo B, 09.08.2026): Header Footer Elementor sam učitava
   `.ehf-header #masthead{position:relative}` (generičko kompatibilno pravilo
   za više tema, bez !important) — specifičnost (1 ID, 1 klasa) je veća od
   `header#masthead` (1 ID, 1 tip), pa je HFE pobeđivao i sticky nije radio
   ni u jednom browseru. `.ehf-header` je klasa koju HFE sam dodaje na <body>,
   pa je dodavanje iste klase u NAŠ selektor pouzdano rešenje (2 klase + ID +
   tip > 1 klasa + ID) bez !important. POUKA za svaku buduću izmenu header-a:
   HFE ubacuje sopstvena generička pravila veće specifičnosti nego što se
   očekuje — pre svake nove `header#masthead`/`#masthead` izjave proveriti
   HFE-ov CSS (enqueue handle "hfe-style-css"), ne pretpostaviti da naš
   selektor automatski pobeđuje. */
body.ehf-header header#masthead {
    position: sticky;
    top: 0;
    z-index: 200; /* ispod .mobile-nav i #wpadminbar (99999), iznad ostalog sadržaja */
    background: #fff;
}
body.admin-bar header#masthead {
    top: 32px; /* visina #wpadminbar na desktopu, da se sticky ne sakrije ispod njega */
}
@media screen and (max-width: 782px) {
    body.admin-bar header#masthead {
        top: 46px; /* #wpadminbar je viši na mobilnom (WP core) */
    }
}

/* ==========================================================================
   FOOTER — newsletter input (Prompt 17, Deo A, 17.08.2026, traži Miloš)
   ==========================================================================
   Nalaz: placeholder „Unesite vašu email adresu" se praktično nije video.
   Uzrok: input je stilizovan kao „glass" polje NA gradijentu podnožja —
   `background: rgba(255,255,255,.06)`, tekst `--lh-white`, placeholder
   `--lh-muted`. Na svetlijem (desnom) kraju gradijenta `#00586D → #2DCCD3`
   svetlosivi placeholder na skoro-providnoj beloj podlozi pada duboko pod
   WCAG AA.

   GDE ŽIVI ORIGINAL: NIJE ni u child temi (`hello-elementor-child/style.css`)
   ni u ovom fajlu — ceo footer (markup + CSS) je jedan Elementor HTML widget
   u `_elementor_data` posta 1174 (CPT `elementor-hf`), pa se njegov `<style>`
   blok renderuje INLINE U <body>, posle svih <link> stilova iz <head>.
   Posledica za specifičnost: `.lh-news__input` (0,1,0) iz ovog fajla bi
   IZGUBIO od identično specifičnog `.lh-news__input` iz inline bloka samo
   zato što ovaj dolazi kasnije u dokumentu. Zato selektor ovde ide sa
   roditeljem — `.lh-footer .lh-news__input` (0,2,0) — što pobeđuje bez
   obzira na redosled i bez `!important`. Ista logika kao HFE lekcija na
   sticky header-u iznad.

   Kontrast (na #fff): tekst #333 ≈ 12,6:1; placeholder #595959 ≈ 7,0:1 —
   oba iznad AA praga 4,5:1. `opacity:1` je obavezan jer Firefox default-no
   spušta placeholder na opacity .54 (što bi 7:1 vratilo pod prag).
   Border: bela kutija na svetlo-cijan kraju gradijenta „nestaje" bez ivice,
   pa ide tamna prozirna ivica — vidljiva i na svetlom i na tamnom kraju. */
.lh-footer .lh-news__input {
    background: #fff;
    background-color: #fff;
    color: #333;
    border: 1px solid rgba(0, 0, 0, .22);
}
.lh-footer .lh-news__input::placeholder {
    color: #595959;
    opacity: 1; /* Firefox: default opacity .54 bi oborio kontrast */
}
.lh-footer .lh-news__input::-webkit-input-placeholder {
    color: #595959;
    opacity: 1;
}
.lh-footer .lh-news__input:focus {
    border-color: #00586D; /* brend petrol, jasan fokus i na svetloj kutiji */
    box-shadow: 0 0 0 2px rgba(0, 88, 109, .25);
}

/* ==========================================================================
   OPIS PROIZVODA — „Prikaži više / Prikaži manje" (Prompt 18, Deo A, 17.08.2026)
   ==========================================================================
   Struktura dolazi iz `leifheit-tweaks/product-description.php` (filter
   `the_content`, prioritet 15). Ceo tekst je u HTML-u; ovde se samo SKLAPA.

   Bez JS-a: `.lh-desc` nema klasu `is-collapsed`, pa je `.lh-desc__more`
   vidljiv, a dugme ima `hidden` atribut → ništa se ne gubi i nema mrtvog
   dugmeta. JS dodaje `is-collapsed` i skida `hidden`.

   Boja: brend petrol `#00586D`. (Prompt 18 traži navy `#1B2A4A` — to je
   ZASTARELA paleta, retirirana 03.06.2026; vidi STATUS §„Ključne odluke".) */
/* Režim 1 — opis ima više pasusa: ostatak se prosto skriva. */
.lh-desc.is-collapsed .lh-desc__more {
    display: none;
}

/* Režim 2 (`--clamp`) — opis je JEDAN dugačak pasus (127 od 129 proizvoda,
   izmereno 17.08.2026), pa nema mesta za rez posle prvog pasusa. Tada se ceo
   opis sklapa na ~6 redova sa fade-om na dnu; tekst se ne deli ni ne skraćuje,
   samo se vizuelno seče — u DOM-u je sve, kao i u režimu 1. */
.lh-desc--clamp.is-collapsed .lh-desc__more {
    display: block;
    position: relative;
    max-height: 9.6em; /* ≈6 redova pri line-height 1.6 */
    overflow: hidden;
}
/* Fade ide ka #f8f9fa, NE ka beloj: pozadina panela taba „Opis"
   (`.woocommerce-Tabs-panel`) je izmerena u browseru kao rgb(248,249,250).
   Sa belim gradijentom bi se videla svetla mrlja preko sivkastog panela.
   Ako se pozadina taba ikad promeni, promeniti i ove dve vrednosti. */
.lh-desc--clamp.is-collapsed .lh-desc__more::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4em;
    background: linear-gradient(to bottom, rgba(248, 249, 250, 0) 0%, #f8f9fa 85%);
    pointer-events: none;
}

/* Dugme je skriveno dok JS ne potvrdi da sklapanje radi. Eksplicitno
   `display:none` jer neki WooCommerce/tema resetovi znaju da pregaze [hidden]. */
.lh-desc__toggle[hidden] {
    display: none !important;
}

.lh-desc__toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px; /* klik-zona ≥44px, isti prag kao dugmad u hamburger meniju */
    margin: 18px 0 0;
    padding: 10px 22px;
    background: transparent;
    border: 2px solid #00586D;
    border-radius: 4px;
    color: #00586D;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.lh-desc__toggle:hover,
.lh-desc__toggle:focus-visible {
    background: #00586D;
    color: #fff;
}
.lh-desc__toggle:focus-visible {
    outline: 2px solid #00586D;
    outline-offset: 2px;
}

/* Strelica: CSS trougao, rotira se kad je sadržaj otvoren. */
.lh-desc__caret {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    transition: transform .2s ease;
}
.lh-desc:not(.is-collapsed) .lh-desc__caret {
    transform: rotate(180deg);
}

/* ==========================================================================
   BREND DUGMAD — jedna boja za sva akciona dugmad (Prompt 19, Deo A, 17.08.2026)
   ==========================================================================
   Traži Miloš (zahtevi 8, 9, 10): sva akciona dugmad na sajtu u brend-petrol.

   BOJA — nije izmišljena, izmerena je: `#00586D` je jedini jednoznačan petrol
   u projektu — 57 pojava u `hello-elementor-child/style.css` (linkovi, fokus,
   „Dodaj u korpu" na kategoriji, dugmad na /moj-nalog/), plus `leifheit.css`
   (fokus newsletter input-a, `.lh-desc__toggle`). Vidi i STATUS §„Ključne
   odluke" — navy `#1B2A4A` je retirirana paleta (03.06.2026).

   KONTRAST (WCAG 2.1, relativna luminancija):
     beli tekst na #00586D  = 8,03:1  → prolazi AA (4,5:1) i AAA (7:1)
     beli tekst na #004D5F  = 9,43:1  → hover, isto prolazi
     (za poređenje: stara crvena #E2001A daje 4,94:1 — jedva iznad AA praga)

   HOVER = petrol tamniji za 13% (0,87 × svaki RGB kanal) = #004D5F.

   JEDNO MESTO ZA IZMENU: sve boje idu kroz dva tokena ispod. Ubuduće se menja
   samo `--lh-btn` / `--lh-btn-hover` i sva dugmad prate.

   SPECIFIČNOST — zašto selektori izgledaju „preterano": child tema piše boje
   dugmadi sa `!important` (npr. `.woocommerce div.product form.cart
   .single_add_to_cart_button{background-color:#E2001A !important}` = 0,4,1).
   `leifheit.css` se učitava POSLE child teme (potvrđeno u redosledu <link>
   tagova), ali kod jednake specifičnosti + `!important` odlučuje redosled, a
   Autoptimize ume da premesti fajlove. Zato svaki selektor ovde ima dodatnog
   pretka (`html` ili `body`) — čime je strogo specifičniji od child pravila i
   pobeđuje bez obzira na redosled. Ista klasa opreza kao HFE pouka kod sticky
   header-a.

   ⚠️ ZAŠTO `html`, A NE `body`, KAD SELEKTOR SADRŽI `.woocommerce`: na
   stranici proizvoda i na kategoriji NE POSTOJI element sa golom klasom
   `woocommerce` — tu klasu nosi SAM `<body>` (izmereno curl-om 17.08.2026:
   0 unutrašnjih `<… class="woocommerce">` na proizvodu i kategoriji, 1 na
   korpi/checkout-u/moj-nalog). Zato `body .woocommerce …` na tim stranicama
   ne pogađa ništa — traži `.woocommerce` KAO POTOMKA body-ja. `html` je
   predak body-ja, pa `html .woocommerce …` radi u oba slučaja i i dalje daje
   +1 tip u specifičnosti. Zamka koja bi tiho oborila pola ove izmene. */
:root {
    --lh-btn: #00586D;        /* brend petrol */
    --lh-btn-hover: #004D5F;  /* petrol −13% */
    --lh-btn-text: #fff;
}

/* 1. Stranica proizvoda — „Dodaj u korpu" (bilo #E2001A) */
html .woocommerce div.product form.cart .single_add_to_cart_button,
html .single_add_to_cart_button {
    background-color: var(--lh-btn) !important;
    border-color: var(--lh-btn) !important;
    color: var(--lh-btn-text) !important;
}
html .woocommerce div.product form.cart .single_add_to_cart_button:hover,
html .woocommerce div.product form.cart .single_add_to_cart_button:focus-visible,
html .single_add_to_cart_button:hover,
html .single_add_to_cart_button:focus-visible {
    background-color: var(--lh-btn-hover) !important;
    border-color: var(--lh-btn-hover) !important;
}

/* 2. Korpa — „NASTAVI NA PLAĆANJE" (zahtev 8; bilo #E2001A) */
body.woocommerce-cart .cart_totals .wc-proceed-to-checkout .button.checkout-button,
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
    background: var(--lh-btn) !important;
    background-color: var(--lh-btn) !important;
    color: var(--lh-btn-text) !important;
}
body.woocommerce-cart .cart_totals .wc-proceed-to-checkout .button.checkout-button:hover,
body.woocommerce-cart .cart_totals .wc-proceed-to-checkout .button.checkout-button:focus-visible,
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button:focus-visible {
    background: var(--lh-btn-hover) !important;
    background-color: var(--lh-btn-hover) !important;
}

/* 3. Checkout — „NARUČITE" / place order (zahtev 9; bilo #E2001A) */
body.woocommerce-checkout #place_order {
    background: var(--lh-btn) !important;
    background-color: var(--lh-btn) !important;
    color: var(--lh-btn-text) !important;
}
body.woocommerce-checkout #place_order:hover,
body.woocommerce-checkout #place_order:focus-visible {
    background: var(--lh-btn-hover) !important;
    background-color: var(--lh-btn-hover) !important;
}

/* 4. Kategorija / homepage karusel / cross-sell — „Dodaj u korpu".
   Osnovno stanje je već bilo petrol; crveni su bili HOVER i stanje `.added`
   (povratna informacija posle uspešnog AJAX-a, Prompt 13). `.added` NIJE
   ukinut — samo je prebojen u tamniji petrol, pa i dalje vidno menja boju,
   a kvačica (WC core `::after`) ostaje netaknuta. */
html .woocommerce ul.products li.product .add_to_cart_button {
    background: var(--lh-btn) !important;
    color: var(--lh-btn-text) !important;
}
html .woocommerce ul.products li.product .add_to_cart_button:hover,
html .woocommerce ul.products li.product .add_to_cart_button:focus-visible {
    background: var(--lh-btn-hover) !important;
    color: var(--lh-btn-text) !important;
}
/* `.added` mora da bude bar toliko specifično koliko i osnovno pravilo iznad
   (0,4,2), inače ga ono gazi na kategoriji. Otud dva selektora: prvi za
   `<li class="product">` mrežu, drugi (0,3,1) za karusel-karticu, koja nije
   `<li class="product">` nego `.leifheit-carousel-item` unutar wrappera kome
   je Prompt 13 namerno dodao klasu `woocommerce`. */
html .woocommerce ul.products li.product .add_to_cart_button.added,
html .woocommerce .add_to_cart_button.added {
    background: var(--lh-btn-hover) !important;
    color: var(--lh-btn-text) !important;
}

/* 5. Mobilna pretraga — dugme lupe (hover je bio crven #E30613) */
body .mobile-search-bar button[type="submit"] {
    background: var(--lh-btn);
}
body .mobile-search-bar button[type="submit"]:hover,
body .mobile-search-bar button[type="submit"]:focus-visible {
    background: var(--lh-btn-hover);
}

/* 6. Footer newsletter — „Prijava" (bilo `var(--lh-red)`, hover #a00000).
   Original živi u inline <style> bloku Elementor posta 1174, koji dolazi
   KASNIJE u dokumentu od ovog fajla — zato selektor mora da bude specifičniji,
   ne samo kasniji. `.lh-footer .lh-news__btn` (0,2,0) > `.lh-news__btn` (0,1,0).
   Isti manevar kao kod `.lh-news__input` u Prompt-u 17 iznad. */
.lh-footer .lh-news__btn {
    background: var(--lh-btn);
    color: var(--lh-btn-text);
}
.lh-footer .lh-news__btn:hover,
.lh-footer .lh-news__btn:focus-visible {
    background: var(--lh-btn-hover);
}

/* 7. /moj-nalog/ — prijava, registracija, sačuvaj izmene.
   Osnovna boja je već bila petrol; hover je bio ad-hoc #00485A → token. */
body.woocommerce-account .woocommerce-button,
body.woocommerce-account .woocommerce .button {
    background: var(--lh-btn);
    color: var(--lh-btn-text);
}
body.woocommerce-account .woocommerce-button:hover,
body.woocommerce-account .woocommerce-button:focus-visible,
body.woocommerce-account .woocommerce .button:hover,
body.woocommerce-account .woocommerce .button:focus-visible {
    background: var(--lh-btn-hover);
}

/* 8. Prazna korpa — „Nazad u prodavnicu". Jedino dugme na toj stranici, a bilo
   je na podrazumevanoj WooCommerce sivoj (#f7f6f7, tekst #515151). Namerno
   usko ciljano na `.return-to-shop`, da se ne pogodi svako `a.button`. */
body.woocommerce-cart .return-to-shop .button,
html .woocommerce .return-to-shop .button {
    background-color: var(--lh-btn) !important;
    color: var(--lh-btn-text) !important;
}
body.woocommerce-cart .return-to-shop .button:hover,
html .woocommerce .return-to-shop .button:hover {
    background-color: var(--lh-btn-hover) !important;
    color: var(--lh-btn-text) !important;
}

/* ==========================================================================
   KORPA — polje za kupon (Prompt 19, Deo B1, 17.08.2026)
   ==========================================================================
   Prijava (Miloš): polje „primeni kupon" seče tekst, ne vidi se do kraja.

   UZROK (izmereno u CSS-u child teme, ne pretpostavljeno): red kupona je flex
   kontejner u kome input ima `flex: 1` (= `flex: 1 1 0%`), a dugme
   `flex-shrink: 0`. `flex: 1` NE postavlja `min-width`, pa input zadržava
   podrazumevani `min-width: auto`, koji se za `<input type=text>` razrešava u
   njegovu intrinzičnu širinu (~20 karaktera, ≈175px). Na uskom ekranu
   (320–360px) zbir „input koji odbija da se skupi" + „dugme koje ne sme da se
   skupi" prelazi širinu reda → red se prelije, a `overflow-x: clip` sa vrha
   ovog fajla taj višak SEČE. Otud „ne vidi se do kraja".

   POPRAVKA: `min-width: 0` na flex-item-u (kanonsko rešenje za baš ovaj
   obrazac) + `width: 100%` da input popuni raspoloživo, i `white-space: nowrap`
   na dugmetu da tekst „Primeni kupon" ne prelomi u dva reda kad se red stisne.
   Desktop fiksnih `width: 200px` zamenjeno sa `flex: 1 1 auto`, pa se par
   input+dugme uvek uklapa u `max-width: 400px` kontejnera.

   Specifičnost: child tema piše `.woocommerce-cart .coupon input#coupon_code`
   (1,2,1) unutar media query-ja; ovde je `td.actions` dodat u lanac (1,3,2),
   pa pravila pobeđuju bez `!important` i bez oslanjanja na redosled fajlova. */
body.woocommerce-cart td.actions .coupon {
    min-width: 0;
    max-width: 100%;
}
body.woocommerce-cart td.actions .coupon input#coupon_code {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    text-overflow: ellipsis;
}
body.woocommerce-cart td.actions .coupon button[name="apply_coupon"] {
    flex: 0 0 auto;
    white-space: nowrap;
    background: var(--lh-btn);
    border-color: var(--lh-btn);
    color: var(--lh-btn-text);
}
body.woocommerce-cart td.actions .coupon button[name="apply_coupon"]:hover,
body.woocommerce-cart td.actions .coupon button[name="apply_coupon"]:focus-visible {
    background: var(--lh-btn-hover);
    border-color: var(--lh-btn-hover);
}
/* Na najužim telefonima (≤360px) dugme dodatno olakšati, da inputu ostane
   dovoljno mesta za ceo placeholder „Kod kupona" i za unetu šifru. */
@media (max-width: 360px) {
    body.woocommerce-cart td.actions .coupon button[name="apply_coupon"] {
        padding: 0 12px;
        font-size: 12px;
    }
}


/* =====================================================================
   VIDEO PROIZVODA — poslednji slajd galerije (Prompt 21, 18.08.2026)
   Markup ispisuje leifheit-tweaks/product-video.php kroz
   `woocommerce_product_thumbnails` (prio 30). Sve je pod prefiksom
   `.lh-video`, pa proizvodi bez videa ne dobijaju nijedno pravilo.
   Boja play dugmeta: petrol `#00586D` (Prompt 19 / brand-color-scheme),
   preko `--lh-btn` tokena kad postoji.
   ===================================================================== */
.lh-video-slide .lh-video {
    position: relative;
    display: block;
    line-height: 0; /* bez proreda ispod <img>, da flexSlider smoothHeight ne skače */
}
.lh-video-slide .lh-video__poster {
    display: block;
    width: 100%;
    height: auto;
}
/* Play dugme: 72px na desktopu, 56px na telefonu — obe vrednosti su iznad
   preporuke od 44px za tap zonu. */
.lh-video-slide .lh-video__play {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
    width: 72px;
    height: 72px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 88, 109, 0.88);
    background: color-mix(in srgb, var(--lh-btn, #00586D) 88%, transparent);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.15s ease;
}
.lh-video-slide .lh-video__play:hover,
.lh-video-slide .lh-video__play:focus-visible {
    background: var(--lh-btn, #00586D);
    transform: scale(1.06);
}
.lh-video-slide .lh-video__play-icon {
    width: 0;
    height: 0;
    margin-left: 6px; /* opticki centar trougla */
    border-style: solid;
    border-width: 13px 0 13px 21px;
    border-color: transparent transparent transparent #fff;
}
.lh-video-slide .lh-video__player {
    display: none;
    width: 100%;
    height: auto;
    background: #000;
}
/* Posle klika na play: poster i dugme izlaze, player ulazi na isto mesto. */
.lh-video-slide .lh-video.is-playing .lh-video__player { display: block; }
.lh-video-slide .lh-video.is-playing .lh-video__poster,
.lh-video-slide .lh-video.is-playing .lh-video__play { display: none; }

/* Sličica u traci — play ikona da se video razlikuje od slika.
   Klasu `lh-thumb-video` dodaje naš JS na <li> koji flexSlider napravi za
   video slajd (indeks se poklapa sa indeksom slajda). */
.woocommerce-product-gallery .flex-control-thumbs li.lh-thumb-video {
    position: relative;
}
.woocommerce-product-gallery .flex-control-thumbs li.lh-thumb-video::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 88, 109, 0.9);
    background: color-mix(in srgb, var(--lh-btn, #00586D) 90%, transparent);
    pointer-events: none;
}
.woocommerce-product-gallery .flex-control-thumbs li.lh-thumb-video::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
    width: 0;
    height: 0;
    transform: translateX(2px);
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #fff;
    pointer-events: none;
}

@media (max-width: 768px) {
    .lh-video-slide .lh-video__play {
        width: 56px;
        height: 56px;
    }
    .lh-video-slide .lh-video__play-icon {
        margin-left: 5px;
        border-width: 10px 0 10px 16px;
    }
}


/* =====================================================================
   iOS ZOOM FIX — sva polja koja kupac kuca na telefonu (Prompt 22, 18.08.2026)

   BUG: tap na lupu u headeru → iOS Safari zumira celu stranicu, pa dugme
   pretrage ispada iz vidnog polja. Uzrok NIJE širina forme (izmereno: na
   320px forma je 281px i dugme se cело vidi) nego **font-size ispod 16px**:
   Safari na iOS-u automatski zumira stranicu kad fokusirano polje ima manji
   font od 16px. Isto važi za `<textarea>` i `<select>`.

   Namerno NIJE rešeno preko `maximum-scale=1` / `user-scalable=no` u viewport
   meta tagu — to gasi zum celoj stranici i ruši pristupačnost. Popravlja se
   font, ne viewport. (Viewport ostaje `width=device-width, initial-scale=1`.)

   Zahvaćena su SVA polja koja kupac kuca, ne samo pretraga — izmereno pre
   izmene: pretraga 14px, kupon 14px, količina u korpi 14px, količina na
   proizvodu 15px, sva checkout polja 14px, „Moj nalog" 15px, newsletter 14px,
   sortiranje u kategoriji 13px.

   `!important` je ovde nužan, ne stilski izbor: pravila u child temi idu do
   specifičnosti (0,4,2) — npr.
   `.woocommerce-checkout form.checkout p.form-row input.input-text` — i žive u
   drugom fajlu. Jedan blanket blok sa `!important` je sigurniji i lakši za
   održavanje nego kopiranje desetak nasleđenih selektora koji mogu da se menjaju.

   Samo mobilni breakpoint (≤768px) — desktop izgled se ne dira.
   ===================================================================== */
@media (max-width: 768px) {
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="url"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="date"],
    textarea,
    select,
    .select2-container--default .select2-selection--single .select2-selection__rendered,
    .select2-container--default .select2-search--dropdown .select2-search__field {
        font-size: 16px !important;
    }

    /* Visina polja pretrage mora da ostane ista kao pre izmene: forma 38px,
       input 36px. Na 16px je linija teksta izmerena kao 19px, pa padding ide
       sa 10px na (36−19)/2 = 8,5px — forma, dugme i cela traka ostaju piksel
       u piksel isti kao pre. (Provereno merenjem, ne računicom na pamet:
       sa 9px je izlazilo 37/39px.) */
    .mobile-search-bar input {
        padding-top: 8.5px;
        padding-bottom: 8.5px;
    }

    /* —— Dva mesta gde child tema piše `!important` sa većom specifičnošću,
       pa ih blok iznad NE može da pretekne (izmereno, ne pretpostavljeno:
       posle prvog prolaza checkout je i dalje bio 14px, a količina u korpi 14px).
       Prefiks `html` diže specifičnost za jedan element — isti postupak kao kod
       petrol dugmadi (`html .woocommerce`, Prompt 19). */
    html .woocommerce-checkout .form-row input.input-text,
    html .woocommerce-checkout .form-row textarea,
    html .woocommerce-checkout .form-row select,
    html .woocommerce-checkout form.checkout p.form-row input.input-text,
    html .woocommerce-checkout form.checkout p.form-row textarea,
    html .woocommerce-checkout form.checkout p.form-row select,
    html .woocommerce-checkout form.checkout p.form-row .select2-container--default .select2-selection__rendered,
    html .woocommerce-cart table.shop_table .quantity .qty,
    html .woocommerce-cart .product-quantity .quantity .qty {
        font-size: 16px !important;
    }
}

/* =====================================================================
   PROMPT 23 (19.08.2026) — "Besplatna dostava" u bloku procene dostave
   na stranici proizvoda. Kada aktuelna cena proizvoda prelazi prag
   besplatne dostave (WooCommerce free_shipping min_amount), umesto
   procene se ispisuje "Besplatna dostava". Zelena je ista nijansa koja
   se vec koristi za "na stanju" (#1f8035) — bez novog tokena.
   Specificnost 0,3,0 nadjacava .leifheit-estimated-shipping .shipping-cost
   (0,2,0) iz child style.css, bez !important.
   ===================================================================== */
.leifheit-estimated-shipping .shipping-cost.is-free {
    color: #1f8035;
}


/* =====================================================================
   MATICNI BROJ (MB) JE OPCIONALNO POLJE - 19.08.2026 (prompt 28)
   ---------------------------------------------------------------------
   wcsrb-ov front JS (dist/js/front/main.*.js, toggleFields) kad se izabere
   "Pravno lice" prodje kroz CELU kolekciju $('.entity-type-toggle') i svakom
   polju u labelu doda <abbr class="required" title="obavezno">*</abbr>.
   Guard je nad celom kolekcijom (0 === r.find('label .required').length),
   pa se MB NE moze izuzeti sa servera - ili svi dobiju zvezdicu ili niko.
   Zato se zvezdica gasi ovde, CSS-om.

   "(opciono)" se ispisuje iz CSS-a (::after), a ne oslanja se na
   server-ski <span class="optional">, jer taj span wcsrb ukloni kad se
   izabere "Pravno lice". Vrednosti boje/velicine su izmerene sa
   postojeceg .optional elementa u istoj formi, da izgled bude identican.

   NIJE JS - namerno. Raniji pokusaj (prompt 27) sa MutationObserver-om je
   zaledio checkout: classList.remove() upisuje class atribut i kada nema
   sta da ukloni, pa je callback observera okidao sam sebe u beskonacnoj
   petlji mikrotaskova. Izmereno: 500 poziva za 1,5 s. Vidi STATUS
   §"Prompt 28". Klasa validate-required koju wcsrb dodaje ostaje na polju,
   ali je vizuelno inertna - na sajtu ne postoji NIJEDNO CSS pravilo koje
   gadja .woocommerce-invalid (provereno prolaskom kroz sve stylesheet-ove
   u browseru), pa prazan MB ne dobija nikakvu "gresku" na ekranu.
   ===================================================================== */
#billing_mb_field label > .required,
#billing_mb_field label > .optional {
    display: none !important;
}

#billing_mb_field label::after {
    content: "(opciono)";
    color: #999;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}


/* =====================================================================
   KORPA — kupon polje na DESKTOPU (Prompt 32, Deo A, 21.08.2026)

   Prijava (Miloš, ponovljena): tekst u polju za kupon se i dalje ne vidi ceo.
   Prompt 19 je popravio TELEFON; ovo je regresija koju je isti taj prompt
   napravio na DESKTOPU. Izmereno Playwright-om na 360/768/1280:

     360px  input 157,7 / sadržaj 131,7 · placeholder „Kod kupona" 87,9 → OK
     768px  input 228,4 / sadržaj 202,4 · placeholder 87,9            → OK
    1280px  input  80,0 / sadržaj  50,0 · placeholder 76,9 → SEČE, staju ~4 slova

   UZROK (izmeren, ne pretpostavljen):
   `.coupon` je `float: left` (woocommerce-layout.css + child tema
   @media min-width:769px), pa mu je širina „shrink-to-fit" — određuje je
   sadržaj, ne ćelija (`td.actions` je 1138px i ostaje neiskorišćena).
   Prompt 19 je child teminu desktop širinu `width: 200px` zamenio sa
   `width: 100%` (+ `flex: 1 1 auto`). Unutar FLOAT-a to je kružna
   referenca: procenat se razrešava prema kontejneru čija širina tek treba
   da se izračuna iz sadržaja, pa input pada nazad na WooCommerce-ovo
   `td.actions .input-text { width: 80px }`. Otud 80px i ~4 vidljiva slova.
   Na telefonu se to nije videlo jer je tamo `.coupon` `float: none` i
   `width: 100%` — ima prema čemu da se razreši, pa je prompt 19 tamo radio.

   POPRAVKA: dati redu ODREĐENU širinu umesto shrink-to-fit-a
   (`width: 100%` na floatu se razrešava prema `td.actions` — to je definisano),
   a inputu vratiti `width: auto` da veličinu računa flex, a ne procenat
   nepoznatog. `max-width: 400px` je vrednost koju je child tema i inače
   imala za ovaj red — izgled ostaje isti kao što je zamišljen.

   Mobilni deo (≤768px) se NE dira — izmereno je da tamo radi.

   Posle popravke (Playwright): 1280px input 267,9 / sadržaj 237,9,
   placeholder 76,9 → 161px viška. 360 i 768 nepromenjeni.
   ===================================================================== */
@media (min-width: 769px) {
    body.woocommerce-cart td.actions .coupon {
        width: 100%;
        max-width: 400px;
    }
    body.woocommerce-cart td.actions .coupon input#coupon_code {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }
}


/* =====================================================================
   FUTER — newsletter polje (Prompt 32, Deo B, 21.08.2026)

   Prijava (Miloš): polje za email je premalo, placeholder
   „Unesite vašu email adresu" se ne vidi ceo.

   Izmereno Playwright-om PRE izmene (širina sadržaja inputa vs. širina
   teksta placeholder-a u stvarnom fontu):

     360px  sadržaj 157,8 · tekst 189,7 → seče 31,9px
     768px  sadržaj 171,5 · tekst 189,7 → seče 18,2px
    1280px  sadržaj 135,8 · tekst 166,0 → seče 30,2px

   Dakle seklo je na SVE TRI širine, ne samo na telefonu.

   UZROK: dva nezavisna, oba merena.
   1) Futer je grid od četiri `auto` kolone; newsletter kolona je bila široka
      tačno koliko i forma (298,8px), a dugme „Prijavi se" od toga uzima
      129px — inputu ostaje ~170px kutije, tj. ~136px sadržaja.
   2) iOS fix iz prompta 22 podigao je font na 16px na ≤768px. To je ispravno
      i OSTAJE (bez njega Safari zumira stranicu), ali isti tekst na 16px je
      širi ~14% — pa je na telefonu manjak još veći.

   POPRAVKA, po širini:
   • Desktop (≥769px): inputu `min-width: 230px`. Grid ima ~48px slobodnog
     prostora (kolone 1032 + 120 gap = 1152 od 1200), pa newsletter kolona
     poraste 298,8 → 339,8, a ostale tri se skupe u okviru svog sadržaja.
     Izmereno: visina futera ostaje IDENTIČNA (268px sve četiri kolone),
     nema horizontalnog scroll-a (scrollWidth 1265 < 1280). Spojeni izgled
     input+dugme ostaje.
   • Mobilni (≤768px): red se prelama — input ide u ceo red, dugme ispod,
     takođe u ceo red. Na 360px ni najagresivnije stiskanje padding-a ne
     oslobađa potrebnih 32px, a font se ne sme spuštati ispod 16px (prompt 22).
     Prelamanje je jedino rešenje koje ne seče tekst i ne ruši iOS fix.
     Radijus tu postaje ujednačen (4px), jer spojeni par više ne postoji.

   Bela pozadina i boja teksta iz prompta 17 se NE diraju — ovde se menja
   samo geometrija. (Provereno posle izmene: `background` je i dalje
   `rgb(255,255,255)` na sve tri širine.)

   Posle popravke (Playwright), višak prostora za placeholder:
     360px  +73,3px   768px  +110,8px   1280px  +38,0px
   ===================================================================== */
@media (min-width: 769px) {
    .lh-footer .lh-news__form {
        flex-wrap: nowrap;
    }
    .lh-footer .lh-news__input {
        flex: 1 1 auto;
        min-width: 230px;
        padding-left: 12px;
        padding-right: 12px;
    }
}
@media (max-width: 768px) {
    .lh-footer .lh-news__form {
        flex-wrap: wrap;
    }
    .lh-footer .lh-news__input {
        flex: 1 1 100%;
        min-width: 0;
        border-radius: 4px;
        margin-bottom: 8px;
    }
    .lh-footer .lh-news__btn {
        flex: 1 1 100%;
        border-radius: 4px;
        justify-content: center;
    }
}


/* =====================================================================
   PROIZVOD — istaknut box „Garancija" (Prompt 32, Deo E, 21.08.2026;
   POZICIJA IZMENJENA Prompt 37, 24.08.2026)

   Prikazuje se SAMO kad proizvod ima vrednost globalnog atributa
   „Garancija" (`pa_garancija`). Prazan atribut = nema reda, nema praznog
   okvira (uslov iz zahteva). Logika je u `product-page.php`.

   Boja je postojeći petrol token `--lh-btn` (#00586D) — nema novog tokena
   i nema nove slike: štit je inline SVG u markup-u, pa nema ni novog
   HTTP zahteva. Pozadina je ista petrol boja na 6% providnosti.
   ===================================================================== */
.leifheit-warranty {
    /* Prompt 37: box vise nije u cart box-u nego samostalan element izmedu
       kratkog opisa i cart box-a. Na desktopu se skuplja na sadrzaj (kako je
       na `screenshots/warranty2.png`), na mobilnom ide preko celog reda
       (`screenshots/warranty1.png`). */
    display: flex;
    align-items: center;
    gap: 8px;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 16px;
    padding: 8px 12px;
    border: 1px solid rgba(0, 88, 109, 0.18);
    border-radius: 4px;
    background: rgba(0, 88, 109, 0.06);
    color: var(--lh-btn, #00586D);
    font-size: 14px;
    line-height: 1.3;
}
.leifheit-warranty svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}
.leifheit-warranty__label {
    font-weight: 700;
}
@media (max-width: 768px) {
    .leifheit-warranty {
        width: 100%;
        font-size: 15px;
    }
}


/* =====================================================================
   PROIZVOD BEZ LAGERA — cena (Prompt 32, Deo D, 21.08.2026)

   Cena se na proizvodu bez lagera ispisuje iz `woocommerce_single_product_summary`
   (vidi `product-page.php`), a ne iz zone add-to-cart forme koja tada ne
   postoji. Da bi izgledala identično kao na proizvodu koji jeste na lageru,
   dobija isti razmak koji ima `.leifheit-cart-price` unutar forme.
   ===================================================================== */
.leifheit-cart-price.leifheit-cart-price--nostock {
    margin: 12px 0;
}
/* Prompt 37: cena na proizvodu bez lagera je sa prioriteta 10 presla na 26,
   dakle ispod Garancije koja vec nosi donju marginu — gornja margina bi tu
   napravila duplu prazninu. */
.leifheit-warranty + .leifheit-cart-price.leifheit-cart-price--nostock {
    margin-top: 0;
}


/* =====================================================================
   LISTA ČEKANJA — „OBAVESTI ME KAD STIGNE" (Prompt 37, 21.08.2026)

   Prikazuje se ISKLJUČIVO na proizvodu bez lagera, na mestu na kome bi
   inače stajala add-to-cart forma. Boje idu preko postojećih `--lh-btn`
   tokena (petrol), pa prate svaku buduću izmenu brend boje.

   Mobilni: sva polja 16px (pouka iz prompta 22 — ispod 16px iOS Safari
   zumira stranicu na tap), dugmad i checkbox najmanje 44px visine.
   ===================================================================== */
.lh-waitlist {
    margin: 16px 0 20px;
}

.lh-waitlist__open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 340px;
    min-height: 48px;
    padding: 12px 24px;
    border: 0;
    border-radius: 4px;
    background: var(--lh-btn, #00586D);
    color: var(--lh-btn-text, #fff);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: pointer;
    transition: background-color .15s ease;
}
.lh-waitlist__open:hover,
.lh-waitlist__open:focus {
    background: var(--lh-btn-hover, #004D5F);
    color: var(--lh-btn-text, #fff);
}
.lh-waitlist__open svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.lh-waitlist__form[hidden] {
    display: none;
}
.lh-waitlist__form {
    max-width: 420px;
    margin: 14px 0 0;
    padding: 18px;
    border: 1px solid #d7e3e6;
    border-radius: 6px;
    background: rgba(0, 88, 109, .04);
}
.lh-waitlist__intro {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.5;
    color: #33484d;
}
.lh-waitlist__form label {
    display: block;
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: #1f3438;
}
.lh-waitlist__form input[type="text"],
.lh-waitlist__form input[type="email"],
.lh-waitlist__form input[type="tel"] {
    display: block;
    width: 100%;
    margin-top: 5px;
    padding: 10px 12px;
    border: 1px solid #c6d5d9;
    border-radius: 4px;
    background: #fff;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
}
.lh-waitlist__form input:focus {
    border-color: var(--lh-btn, #00586D);
    outline: 2px solid rgba(0, 88, 109, .18);
    outline-offset: 0;
}
.lh-waitlist__row {
    display: flex;
    gap: 12px;
}
.lh-waitlist__row label {
    flex: 1 1 0;
    min-width: 0;
}

.lh-waitlist__consent {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 16px !important;
    font-weight: 400 !important;
    font-size: 13px;
    line-height: 1.5;
}
.lh-waitlist__consent input[type="checkbox"] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    accent-color: var(--lh-btn, #00586D);
}
.lh-waitlist__consent a {
    text-decoration: underline;
}

/* Honeypot — mora da bude nedostupan i oku i tastaturi, ali NE
   `display:none` (deo botova baš to polje preskače). */
.lh-waitlist__hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.lh-waitlist__submit {
    width: 100%;
    min-height: 44px;
    padding: 11px 24px;
    border: 0;
    border-radius: 4px;
    background: var(--lh-btn, #00586D);
    color: var(--lh-btn-text, #fff);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.lh-waitlist__submit:hover:not(:disabled) {
    background: var(--lh-btn-hover, #004D5F);
}
.lh-waitlist__submit:disabled {
    opacity: .6;
    cursor: default;
}

.lh-waitlist__msg {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.5;
}
.lh-waitlist__msg:empty {
    margin: 0;
}
.lh-waitlist__msg.is-error {
    color: #b3261e;
    font-weight: 700;
}
.lh-waitlist__msg.is-ok {
    color: #1a7f37;
    font-weight: 700;
}

@media (max-width: 768px) {
    .lh-waitlist__open {
        max-width: none;
        min-height: 48px;
        font-size: 15px;
    }
    /* 16px — ispod toga iOS Safari zumira stranicu na tap (prompt 22). */
    .lh-waitlist__form input[type="text"],
    .lh-waitlist__form input[type="email"],
    .lh-waitlist__form input[type="tel"] {
        font-size: 16px;
        padding: 12px;
    }
    .lh-waitlist__row {
        display: block;
    }
    .lh-waitlist__submit {
        min-height: 48px;
        font-size: 16px;
    }
}


/* =====================================================================
   LISTA ŽELJA — srce na proizvodu + stranica /moj-nalog/lista-zelja/
   (Prompt 40, 25.08.2026)

   Sve ide u OVAJ fajl (nema novog asseta, verzija je `filemtime`).
   Srce je namerno „outline" dugme, ne puno petrol: puno petrol dugme na
   stranici proizvoda je „Dodaj u korpu"/„OBAVESTI ME" i ne sme da dobije
   takmaca iste težine odmah ispod sebe.
   ===================================================================== */
.lh-wish {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 18px;
}

.lh-wish__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 18px;
    border: 2px solid var(--lh-btn, #00586D);
    border-radius: 4px;
    background: transparent;
    color: var(--lh-btn, #00586D);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .2px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.lh-wish__btn:hover,
.lh-wish__btn:focus-visible {
    background: var(--lh-btn, #00586D);
    color: var(--lh-btn-text, #fff);
}
.lh-wish__btn[disabled] {
    opacity: .6;
    cursor: default;
}

.lh-wish__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
}

/* Popunjeno srce = proizvod je u listi. Boja ostaje petrol — crveno bi
   se tuklo sa „Akcija" trakom i sa „Trenutno nedostupno" oznakom. */
.lh-wish.is-on .lh-wish__icon {
    fill: currentColor;
}

.lh-wish__msg {
    font-size: 13px;
    color: var(--lh-muted, #5a6a72);
}

/* --- Stranica „Lista želja" u nalogu --- */
.lh-wishlist-page ul.products {
    margin: 0;
    padding: 0;
}
/* Dugme „Ukloni" ispod kartice: manje, tiho, puna širina kartice. */
.lh-wish--loop {
    margin: 8px 0 0;
}
.lh-wish--loop .lh-wish__btn {
    width: 100%;
    min-height: 40px;
    font-size: 13px;
    border-width: 1px;
    border-color: #d6dcdf;
    color: var(--lh-muted, #5a6a72);
}
.lh-wish--loop .lh-wish__btn:hover,
.lh-wish--loop .lh-wish__btn:focus-visible {
    background: #b3261e;
    border-color: #b3261e;
    color: #fff;
}
.lh-wish--loop .lh-wish__icon {
    fill: none;
}

.lh-wishlist-empty {
    padding: 8px 0 0;
}
.lh-wishlist-empty .button {
    margin-top: 8px;
}

/* =====================================================================
   LISTA ČEKANJA U NALOGU — /moj-nalog/lista-cekanja/ (Prompt 40)
   Tabela koristi WooCommerce-ove `shop_table` klase, pa na mobilnom
   preuzima postojeći responsive obrazac; ovde su samo pilule statusa.
   ===================================================================== */
.lh-waitlist-account__intro {
    margin-bottom: 14px;
}
.lh-waitlist-account__table {
    width: 100%;
}
.lh-waitlist-account__actions form {
    margin: 0;
}

.lh-wl-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}
.lh-wl-pill--done {
    background: #e6f4ea;
    color: #1a7f37;
}
.lh-wl-pill--wait {
    background: #fdf3e2;
    color: #8a5a00;
}

.lh-wl-remove {
    min-height: 40px;
}

@media (max-width: 768px) {
    .lh-wish__btn {
        min-height: 48px;
        font-size: 15px;
    }
    .lh-waitlist-account__table th,
    .lh-waitlist-account__table td {
        font-size: 14px;
    }
    /* Prazna „Radnje" kolona nema šta da najavi na mobilnom. */
    .lh-waitlist-account__actions-th {
        display: none;
    }
}