/**
 * _product-page.css — MaskeZaMob.rs
 * Single product page — radi SA Flatsome layoutom, ne protiv njega
 * v2.0
 *
 * Sections:
 * 1. Gallery
 * 2. Summary spacing & title
 * 3. SKU & model meta
 * 4. Price
 * 5. Color swatches
 * 6. Quantity + Add to cart
 * 7. Trust bar
 * 8. Hide unwanted elements
 * 9. Tabs
 * 10. Deklaracija table
 * 11. Related products
 * 12. Sticky mobile CTA
 * 13. Responsive
 */

/* ============================================================
   1. GALLERY
   ============================================================ */

/*
 * ⚠️ `F-061`, 25.08.2026. — OVDE JE STAJALO STICKY PRAVILO. OBRISANO JE.
 *
 *     position: sticky;
 *     top: calc(var(--header-height, 80px) + 1rem);   ← 96px
 *
 * Prijava je glasila „prazan prostor iznad slike, i ispod slike se ne vidi".
 * Izmereno na 1440:
 *
 *     klase:   product-images relative mb-half … woocommerce-product-gallery …
 *     position relative        ← NE sticky
 *     top      96px            ← preživeo
 *     razmak iznad slike:  96px na vrhu strane, 96px posle skrola od 600px
 *
 * ⚠️ ZAMKA: Flatsome nadjača `position`, ali `top` OSTANE. `sticky` + `top` lepi;
 *    `relative` + `top` samo TRAJNO SPUSTI element, a njegovo mesto u rasporedu
 *    ostaje gore. Zato je praznina bila ista i na vrhu strane i posle skrola —
 *    da je bila sticky, rasla bi sa skrolom. Ta konstanta je i bila dokaz.
 *
 * ⚠️ Druga posledica: kolona je visoka 702px (565 + 15 + 122) računato od mesta
 *    gde slika TREBA da stoji. Spuštena za 96px, slika prelazi preko sličica.
 *    „Prazan prostor iznad" i „ispod slike se ne vidi" su bili JEDAN uzrok.
 *
 * ⚠️ Sticky se NE vraća „kako treba". Pravilo je gađalo `.woocommerce-product-gallery`,
 *    a to je kod Flatsome-a `.product-images` — dakle SAMO slika, bez sličica;
 *    lepila bi se slika, a sličice bi otišle sa skrolom. Uz to se lepi KRAĆA
 *    kolona, a ovde je galerija (702px) VIŠA od info kolone (~350px sadržaja).
 *    Ako se ikad vrati, ide na kolonu i uz uslov da je galerija kraća.
 */

.single-product .woocommerce-product-gallery__wrapper {
    border-radius: 12px;
    overflow: hidden;
    background: #f8f9fb;
}

.single-product .woocommerce-product-gallery__wrapper img {
    object-fit: contain;
}

/* Thumbnails */
.single-product .flex-control-thumbs {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.single-product .flex-control-thumbs::-webkit-scrollbar {
    display: none;
}

.single-product .flex-control-thumbs li {
    flex: 0 0 72px;
}

.single-product .flex-control-thumbs li img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 8px;
    border: 2px solid transparent;
    background: #f8f9fb;
    cursor: pointer;
    transition: border-color 0.15s ease;
    padding: 4px;
}

.single-product .flex-control-thumbs li img.flex-active,
.single-product .flex-control-thumbs li img:hover {
    border-color: var(--color-accent, #3c83f5);
}

/* ============================================================
   2. SUMMARY SPACING & TITLE
   ============================================================ */

/* ⚠️ ODNOS KOLONA — `F-058`, 24.08.2026.

   Izmereno na 1440 (`tools/mzm-mera-proizvod.js`):

       galerija      595px  = 50,0%
       info kolona   397px  = 33,3%
                             ─────
                              83,3%   →  198px PRAZNO

   Flatsome daje galeriji `large-6` (pola) a info koloni `large-4` (trećina).
   Zbir nije 100%, pa desno od dugmeta „Dodaj u korpu" ostaje skoro 200px
   praznine — a naslov se u preostalih 367px prelama u dva reda.

   ⚠️ Prijavljeno je kao „slika je prevelika". Slika drži TAČNO POLA i to je
      u redu; problem je što druga polovina nije iskorišćena. Da se krenulo od
      simptoma, smanjivala bi se galerija — i praznina bi porasla na ~300px.

   Zato se galerija NE dira. Info kolona uzima ostatak.

   ⚠️ Prag je 850px jer tu Flatsome prelazi na `large-*` klase; ispod toga su
      kolone jedna ispod druge i pravilo ne sme da važi. Isti prag na kome
      ladder kartica ide sa 3 na 4 kolone (`F-042`) i korak 2 Print Designera
      (`F-056`) — nije slučajnost, to je granica koju projekat već koristi.

   ⚠️ Bez `!important`: Flatsome `.large-4` je specifičnosti 0,1,0, ovo je
      0,3,0. Ako prestane da radi posle Flatsome nadogradnje, prvo proveriti
      da li je njihova specifičnost porasla — ne dodavati `!important` refleksno. */

/* ⚠️ DOPUNA `F-061`, 25.08.2026. — jedno mesto odlučuje, ne dva.
 *
 * Gore je stajalo `flex-basis: 50%; max-width: 50%`, tačno naspram galerijinih
 * 6/12 iz Customizer-a. Radilo je, ali je značilo da o istoj stvari odlučuju
 * DVA mesta — a klijent vidi samo jedno (Customizer).
 *
 * Sada info kolona uzima OSTATAK, koliki god bio. Širina galerije se menja
 * isključivo u `Prilagodi → WooCommerce → Strana proizvoda → Product Image
 * Width`, i desna kolona se sama poravna. Zbir je uvek 100%.
 *
 * ⚠️ Prag ostaje 850px — ispod njega su kolone jedna ispod druge i pravilo ne
 *    sme da važi. Isti prag kao ladder kartice (`F-042`) i korak 2 (`F-056`).
 */
@media (min-width: 850px) {
    .single-product .product-container .product-info {
        flex: 1 1 0;
        max-width: none;
    }
}

.single-product .summary.entry-summary {
    padding-top: 0;
}

.single-product .product_title {
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-navy, #0e1629);
    margin-bottom: 0.5rem;
}

/* ============================================================
   3. SKU & MODEL META
   ============================================================ */

.projekat__product-sku {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--color-text-muted, #6b7280);
    margin-bottom: 0.25rem;
}

.projekat__product-model {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--color-text-muted, #6b7280);
    margin-bottom: 0.75rem;
}

/* ============================================================
   4. PRICE
   ============================================================ */

.single-product .summary .price {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

/* ⚠️ Boja je 04.09.2026. prebačena sa `var(--color-navy, #0e1629)` na
 *    `var(--mzm-price)`. Razlog nije stil nego BAG: token `--color-navy`
 *    NE POSTOJI nigde u projektu — pravilo je sve vreme radilo samo preko
 *    fallback vrednosti. Zbog toga promena `--mzm-price` ne bi stigla
 *    dovde, pa bi cena na kartici bila plava a na stranici proizvoda navy.
 *
 * ⚠️ ISTI PROBLEM OSTAJE U CELOM OVOM FAJLU — `_product-page.css` je jedini
 *    koji koristi `--color-*` imena umesto `--mzm-*`. Nijedno od njih nije
 *    definisano. Vidi `del` pravilo ispod i ostatak fajla. Nije popravljeno
 *    u ovom prolazu jer dira mnogo pravila odjednom. */
.single-product .summary .price .woocommerce-Price-amount {
    font-size: clamp(1.5rem, 3vw, 1.9rem);
    font-weight: 800;
    color: var(--mzm-price);
}

.single-product .summary .price ins {
    text-decoration: none;
}

.single-product .summary .price del .woocommerce-Price-amount {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text-muted, #6b7280);
    text-decoration: line-through;
}

/* ============================================================
   5. COLOR SWATCHES
   ============================================================ */

.projekat__swatches-wrap {
    margin-bottom: 1rem;
}

.projekat__swatches-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-navy, #0e1629);
    margin-bottom: 0.5rem;
    display: flex;
    gap: 0.35rem;
}

.projekat__swatches-label span {
    font-weight: 400;
    color: var(--color-text-muted, #6b7280);
}

.projekat__swatches {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.projekat__swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    position: relative;
    display: block;
    text-decoration: none;
    transition: transform 0.15s ease;
    outline: none;
}

.projekat__swatch::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: border-color 0.15s ease;
}

.projekat__swatch:hover {
    transform: scale(1.1);
}

.projekat__swatch--active::after {
    border-color: var(--color-accent, #3c83f5);
}

.projekat__swatch--light {
    border-color: #d1d5db;
}

/* Sakrij Flatsome/WooCommerce default prikaz atributa "Boja" */
.single-product .summary .woocommerce-variation-add-to-cart,
.single-product .summary table.variations {
    /* ostavljamo WooCommerce variations ako postoje */
}

/* ============================================================
   6. QUANTITY + ADD TO CART
   ============================================================ */

.single-product .cart {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

/*
 * Quantity — stepper količine
 *
 * ⚠️ MORA BITI VEZAN ZA `form.cart`, NE SAMO ZA `.single-product` (`F-067`,
 * 27.08.2026.). Ranije je selektor bio `.single-product .quantity`, a
 * `.single-product` je klasa na `<body>` — hvata i **padajuću korpu u
 * headeru**, kojoj WooCommerce daje istu klasu `quantity`. Tamo je to običan
 * `<span>` sa tekstom „1 × 410 RSD", pa je oko cene stajao sivi okvir
 * 78×50 sa borderom 2px `#e5e7eb`.
 *
 * Isti obrazac kao `F-060`: pravilo nije bilo pogrešno, nego je hvatalo
 * pogrešan element. **Ista klasa znači dve različite stvari na istoj strani.**
 *
 * Provera posle izmene: na strani proizvoda stepper i dalje ima okvir; u
 * padajućoj korpi oko „1 × 410 RSD" nema ničega.
 *
 * ⚠️ Pravila ISPOD su namerno ostavljena na `.single-product .quantity` —
 * ciljaju `.qty`, `.minus` i `.plus`, kojih u padajućoj korpi **nema**
 * (tamo je goli `<span>`). Nisu propust; ne sužavati ih bez merenja.
 */
.single-product form.cart .quantity {
    display: flex;
    align-items: center;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    height: 50px;
    background: #fff;
    flex-shrink: 0;
}

.single-product .quantity .qty {
    width: 44px;
    height: 100%;
    text-align: center;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-navy, #0e1629);
    background: transparent;
    -moz-appearance: textfield;
    appearance: textfield;
}

.single-product .quantity .qty::-webkit-inner-spin-button,
.single-product .quantity .qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.single-product .quantity .minus,
.single-product .quantity .plus {
    width: 38px;
    height: 100%;
    background: transparent;
    border: none;
    font-size: 1.1rem;
    color: var(--color-navy, #0e1629);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.single-product .quantity .minus:hover,
.single-product .quantity .plus:hover {
    background: #f3f4f6;
}

/* Add to cart dugme */
.single-product .single_add_to_cart_button.button {
    height: 50px;
    background: var(--color-accent, #3c83f5);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0 1.75rem;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    letter-spacing: 0.01em;
    flex: 1;
    min-width: 160px;
    text-transform: none;
}

.single-product .single_add_to_cart_button.button:hover {
    background: #2563eb;
    transform: translateY(-1px);
    color: #fff;
}

.single-product .single_add_to_cart_button.button:active {
    transform: translateY(0);
}

/* ============================================================
   7. TRUST BAR
   ============================================================ */

.projekat__trust-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-top: 0.25rem;
}

.projekat__trust-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    background: #f8f9fb;
    border-radius: 10px;
}

.projekat__trust-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 6px;
    background: var(--color-accent, #3c83f5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.projekat__trust-icon--green {
    background: #16a34a;
}

.projekat__trust-icon--gold {
    background: #d97706;
}

.projekat__trust-text strong {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-navy, #0e1629);
    line-height: 1.2;
}

.projekat__trust-text span {
    font-size: 0.68rem;
    color: var(--color-text-muted, #6b7280);
    line-height: 1.2;
}
.projekat__trust-text {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ============================================================
   8. SAKRIJ NEPOTREBNE ELEMENTE
   ============================================================ */

/* Category i tag linije */
.single-product .product_meta {
    display: none;
}

/* Share dugmad */
.single-product .product-share-buttons,
.single-product .sharedaddy,
.single-product .woocommerce-product-details__short-description + .product_meta ~ div[class*="share"] {
    display: none;
}

/* Archives i Categories widget ispod sadržaja */
.single-product ~ .sidebar,
body.single-product .widget_archive,
body.single-product .widget_categories {
    display: none;
}

/* Footer widgets sa Archives/Categories na product stranici */
body.single-product #sidebar,
body.single-product .sidebar-container {
    display: none;
}

/* Flatsome share dugmad */
.single-product .product .share-product {
    display: none;
}

/* ============================================================
   8b. PORAVNANJE DONJIH SEKCIJA  (`F-057`, 24.08.2026.)
   ============================================================

   ⚠️ DUPLI PADDING — isti obrazac kao `F-044` (`.shop-page-title`).

   Izmereno 24.08. na 1440, `tools/mzm-mera-proizvod.js` + lanac roditelja:

       .shop-container   1290px, padding-left 50px  →  sadržaj 1190px
         .container      1190px, padding-left 50px  →  sadržaj 1090px  ← opet

   Flatsome svoj `.container` stavlja UNUTAR `.shop-container`, koji je već
   primenio bočni padding. Rezultat: tabovi i „Povezani proizvodi" su 1090px,
   a galerija i info kolona 1190px — jer one nisu u tom drugom kontejneru.

   Razlika je 50px sa svake strane i vidi se golim okom: naslov proizvoda i
   naslov „POVEZANI PROIZVODI" ne počinju na istoj vertikali.

   Po `F-044` referenca je header: sadržaj je 1190px na 1440px, ivica 125px.
   Gasi se DRUGI padding, ne prvi — `.shop-container` je taj koji drži pravilo.

   ⚠️ Ne dodavati `max-width` ovde. Širinu već ograničava `.shop-container`;
      drugi `max-width` bi bio treće mesto koje odlučuje o istoj stvari. */

.single-product .product-footer > .container,
.single-product .product-container > .container {
    padding-left: 0;
    padding-right: 0;
}

/* ============================================================
   9. TABOVI
   ============================================================ */

.single-product .woocommerce-tabs {
    margin-top: 2rem;
}

.single-product .woocommerce-tabs ul.tabs {
    border-bottom: 2px solid #e5e7eb;
    padding: 0;
    margin-bottom: 0;
    display: flex;
    gap: 0;
}

.single-product .woocommerce-tabs ul.tabs li {
    border: none;
    background: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
}

.single-product .woocommerce-tabs ul.tabs li a {
    font-size: 0.9rem;
    font-weight: 600;
    color: #6b7280;
    padding: 0.875rem 1.25rem;
    text-decoration: none;
    display: block;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.single-product .woocommerce-tabs ul.tabs li.active a {
    color: var(--color-navy, #0e1629);
    border-bottom-color: var(--color-accent, #3c83f5);
}

.single-product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--color-navy, #0e1629);
}

/* Sakrij h2 naslove unutar panela */
.single-product .woocommerce-tabs .panel > h2:first-child {
    display: none;
}

.single-product .woocommerce-tabs .panel {
    padding: 1.75rem 0;
}

/* Opis tekst */
.single-product #tab-description p {
    font-size: 0.95rem;
    line-height: 1.75;
    color: #374151;
    margin-bottom: 1rem;
    max-width: 680px;
}

/* ============================================================
   10. DEKLARACIJA TABLE
   ============================================================ */

.single-product #tab-additional_information {
    max-width: 500px;
}

.single-product #tab-additional_information table.shop_attributes {
    width: 100%;
    border-collapse: collapse;
}

.single-product #tab-additional_information table.shop_attributes tr {
    border-bottom: 1px solid #e5e7eb;
}

.single-product #tab-additional_information table.shop_attributes tr:last-child {
    border-bottom: none;
}

.single-product #tab-additional_information table.shop_attributes th,
.single-product #tab-additional_information table.shop_attributes td {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    text-align: left;
    vertical-align: top;
    background: transparent;
    border: none;
}

.single-product #tab-additional_information table.shop_attributes th {
    font-weight: 600;
    color: #6b7280;
    width: 42%;
}

.single-product #tab-additional_information table.shop_attributes td {
    color: var(--color-navy, #0e1629);
    font-weight: 500;
}

/* ============================================================
   11. POVEZANI PROIZVODI  (`F-060`, 25.08.2026.)
   ============================================================ */

/*
 * Od 25.08. povezane ispisuje `mzm_povezani_karusel()` kroz isti karusel kao
 * početna — `<section class="mzm-kar">`. Sve što je ovde ranije stajalo bilo je
 * pisano za Flatsome-ov `related.php` (`.related.products`, `ul.products`,
 * `.projekat__section-header`, `.projekat__related-viewall`) i tog markupa
 * VIŠE NEMA na strani. Obrisano je, a ne zakomentarisano.
 *
 * ⚠️ Grid `repeat(5, 1fr)` koji je ovde stajao nikad se nije ni primenio:
 *    Flatsome ne ispisuje `ul.products` nego `div.row … row-slider`. Izgledao
 *    je kao da rešava širinu kartice, a kartica je bila 303px umesto 222,31px.
 *
 * Izgled kartice i razmake u traci drži `_istaknuti.css` + `_product-card.css`.
 * Ovde ostaje SAMO odvajanje sekcije od tabova iznad nje.
 */

.single-product .mzm-kar {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
    clear: both;
}

/* ============================================================
   12. STICKY MOBILE CTA BAR
   ============================================================ */

.projekat__sticky-cta {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /*
     * ⛔ F-082 — KLIZNA KORPA JE MAGNIFIC POPUP: `.mfp-bg` je 1042, `.mfp-wrap`
     *    1043. Sve sto je `fixed` na dnu ekrana mora biti ISPOD 1042, inace
     *    propliva preko otvorene korpe.
     *
     * ⚠️ Izmereno 14.09.2026. na 360px: ova traka je bila `9999` i stajala je
     *    preko otvorene korpe. Zamka je bila ZAPISANA, ali ne i resena — do
     *    danas se nije videla, jer se korpa otvarala tek posle reloada strane,
     *    kada sticky traka nije ni bila prikazana. AJAX dodavanje je prvi put
     *    dovelo oba na ekran u istom trenutku.
     *
     * ⚠️ 30 je izabrano da bude iznad `#top-link` (21) i daleko ispod 1042.
     */
    z-index: 30;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    padding: 0.75rem 1rem;
    gap: 0.75rem;
    align-items: center;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
    transition: transform 0.25s ease;
}

.projekat__sticky-cta-price {
    /*
     * ⚠️ Izmereno 14.09.2026. na 360px: cena je bila siroka 41px i prelamala
     *    se, pa je traka narasla na 85px. Uzrok je `flex: 2` na dugmetu uz
     *    podrazumevani `min-width: auto`, zbog kog dugme ne moze da se smanji
     *    ispod svog teksta i gura cenu.
     *
     * Sada cena uzima tacno koliko joj treba, a dugme ostatak.
     */
    flex: 0 0 auto;
    white-space: nowrap;
}

.projekat__sticky-cta-price strong {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-navy, #0e1629);
}

.projekat__sticky-cta-btn {
    flex: 1 1 auto;
    min-width: 0;        /* ⚠️ bez ovoga flex stavka ne sme ispod svog sadrzaja */
    white-space: nowrap;
    height: 46px;
    background: var(--color-accent, #3c83f5);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: background 0.15s ease;
}

.projekat__sticky-cta-btn:hover {
    background: #2563eb;
    color: #fff;
}

/* ============================================================
   13. RESPONSIVE
   ============================================================ */

/*
 * ⚠️ `F-060`, 25.08.2026. — iz sva tri bloka ispod obrisana su pravila za
 *    `.single-product .related.products ul.products` (4 / 2 / 2 kolone).
 *    Taj markup više ne postoji, a ni ranije se nije primenjivao. Broj
 *    vidljivih kartica u traci povezanih sada drži `--mzm-kar-vidljivo`
 *    iz `_istaknuti.css`, na istim pragovima kao na početnoj.
 */

@media (max-width: 1024px) {
    .projekat__trust-bar {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .projekat__trust-bar {
        grid-template-columns: 1fr;
    }

    .single-product .cart {
        flex-wrap: nowrap;
    }

    /* Sticky CTA — show on mobile */
    .projekat__sticky-cta {
        display: flex;
    }

    /* Extra bottom padding da sticky CTA ne prekriva sadržaj */
    .single-product div.product {
        padding-bottom: 5rem;
    }

    .single-product .woocommerce-tabs ul.tabs li a {
        padding: 0.75rem 1rem;
        font-size: 0.825rem;
    }
}

@media (max-width: 480px) {
    .projekat__trust-item {
        padding: 0.5rem 0.6rem;
    }
    .single-product .share-product {
        display: none;
    }

    /*
     * ⚠️ `F-061`, 25.08.2026. — ovde je stajalo:
     *
     *     .single-product .woocommerce-product-gallery { position: relative; z-index: 1; }
     *
     * Postojalo je SAMO da na telefonu poništi sticky pravilo sa vrha fajla.
     * Sticky je obrisan, pa je i ovo ostalo bez posla. Obrisano.
     *
     * ⚠️ Zanimljivo za ubuduće: na 1440 je `position` ionako bio `relative`, jer
     *    Flatsome elementu daje klasu `relative`. Pravilo koje je „gasilo sticky
     *    na telefonu" gasilo je nešto što nigde nije ni radilo — a `top: 96px`
     *    je celo vreme prolazio.
     */
}

/* ═══════════════════════════════════════════════════════════════════════════
   STICKY CTA — stanje posle dodavanja (14.09.2026.)

   ⚠️ Potvrda je SAMO boja dugmeta, bez poruke i bez linka — isti izbor kao u
      Print dizajneru. Brojac korpe u zaglavlju je druga, nezavisna potvrda.
   ═══════════════════════════════════════════════════════════════════════════ */

.projekat__sticky-cta-btn--dodato {
    background: #16a34a;
    border-color: #16a34a;
}

.projekat__sticky-cta-btn--dodato:hover {
    background: #16a34a;
}

.projekat__sticky-cta-btn[disabled] {
    opacity: 0.7;
    cursor: default;
}

/*
 * ⛔ „PREGLED KORPE" SE NE PRIKAZUJE U TRACI (14.09.2026.)
 *
 * Posle uspesnog AJAX dodavanja Woo/Flatsome uzimaju dugme prosledjeno kao
 * treci argument u `added_to_cart` i ODMAH IZA NJEGA ubace `<a class="added_to_cart
 * wc-forward">Pregled korpe</a>`. Izmereno 14.09. na 360px:
 *
 *     [253,767 91x63] A.added_to_cart.wc-forward < DIV#mzm-sticky-cta
 *
 * Traka je zbog toga narasla na 88px, a cena se stisla na 65px.
 *
 * ⚠️ Gasi se CSS-om, ne uklanjanjem iz JS-a: uklanjanje bi se trkalo sa onim
 *    ko link ubacuje, a ovako ne moze da promasi bez obzira na redosled.
 * ⚠️ Potpis `added_to_cart` ostaje PUN — dugme se i dalje prosledjuje, jer se
 *    na taj potpis kace i druge stvari (klizna korpa). Gasi se samo prikaz.
 *
 * Korisnik do korpe stize kroz popup koji se ionako otvara — jedna akcija po
 * traci, Verina odluka 14.09.
 */
#mzm-sticky-cta .added_to_cart,
.projekat__sticky-cta .added_to_cart {
    display: none !important;
}