/* =========================================================================
   Obuća Minja — mobilne UX popravke
   Zajednicki fajl za .rs / .me / .ba (isti tema i platforma).

   Sadrzaj:
     1. Swiper: sprjecavanje preklapanja slajdova prije inicijalizacije
     2. Dodirna povrsina minimum 44x44 px
     3. Minimalna velicina fonta 14 px na mobilnom
     4. Manji vertikalni razmaci izmedju sekcija na mobilnom
     5. Ljepljiva traka "Dodaj u korpu" na mobilnom
     6. Putanja (breadcrumb) i opis proizvoda na mobilnom
     7. Baneri: kadriranje na mobilnom
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. SWIPER — prije inicijalizacije
   carousel.js pravi Swiper instance tek kad se DOM ucita. Do tada su svi
   slajdovi u dokumentu i, kod fade efekta, iscrtavaju se jedan preko drugog.
   Dok se ne pojavi klasa .swiper-initialized, prikazuje se samo prvi slajd.
   ------------------------------------------------------------------------- */
.tf-slideshow .swiper:not(.swiper-initialized) .swiper-slide:not(:first-child),
.swiper.slider_effect_fade:not(.swiper-initialized) .swiper-slide:not(:first-child) {
    display: none !important;
}

.tf-slideshow .swiper:not(.swiper-initialized) .swiper-slide:first-child,
.swiper.slider_effect_fade:not(.swiper-initialized) .swiper-slide:first-child {
    width: 100%;
    flex: 0 0 100%;
}

/* Ostali slajderi (proizvodi, brendovi): ne sakrivamo slajdove, samo
   sprjecavamo prelom u vise redova dok Swiper ne preuzme raspored. */
.tf-swiper:not(.swiper-initialized) > .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
}
.tf-swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide {
    flex: 0 0 auto;
}

/* Navigacija i paginacija nemaju smisla dok slajder ne proradi. */
.tf-slideshow .swiper:not(.swiper-initialized) ~ .group-nav-action,
.swiper:not(.swiper-initialized) > .tf-sw-pagination {
    opacity: 0;
    pointer-events: none;
}
.group-nav-action,
.tf-sw-pagination {
    transition: opacity 0.2s ease;
}


/* -------------------------------------------------------------------------
   2. DODIRNA POVRSINA — minimum 44x44 px
   Ikonica ostaje 24 px; siri se samo klikabilna zona, preko pseudo-elementa,
   tako da se raspored zaglavlja i pozicija brojaca na korpi ne mijenjaju.
   ------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .nav-icon-list .nav-icon-item,
    .btn-open-menu,
    .box-open-menu-mobile > a {
        position: relative;
        align-items: center;
        justify-content: center;
    }

    .nav-icon-list .nav-icon-item::before,
    .btn-open-menu::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 44px;
        height: 44px;
        min-width: 100%;
        min-height: 100%;
        border-radius: 50%;
        z-index: 0;
    }

    /* Ikonice iznad prosirene zone, da hover/aktivno stanje ostane vidljivo. */
    .nav-icon-list .nav-icon-item > *,
    .btn-open-menu > * {
        position: relative;
        z-index: 1;
    }
}

@media (max-width: 767px) {
    /* 24 px ikonica + 20 px razmak = 44 px koraka, pa se dodirne zone ne preklapaju. */
    .nav-icon-list {
        gap: 20px;
    }
}

/* Ostali sitni dodirni elementi */
@media (max-width: 991px) {
    .tf-btn.small,
    .product-action_bot .tf-btn {
        min-height: 44px;
    }

    .variant-picker-values .size-btn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .variant-picker-values .color-btn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .wg-quantity .btn-quantity {
        min-width: 40px;
        min-height: 40px;
    }

    /* Zatvaranje modala / offcanvasa */
    .btn-close,
    .icon-close,
    .close-modal,
    .offcanvas .header .icon-close-popup {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Paginacija i filteri */
    .wg-pagination .pagination-item > a,
    .tf-pagination-wrap .pagination-item > a {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Linkovi u podnozju: dovoljan vertikalni razmak za prst */
    .footer-menu-list li > a,
    .footer-heading + .footer-menu-list a {
        display: inline-block;
        padding-block: 6px;
    }
}


/* -------------------------------------------------------------------------
   3. MINIMALNA VELICINA FONTA — 14 px na mobilnom
   Zum vise nije blokiran, ali osnovni tekst ne treba da se zumira da bi se
   procitao. Izuzetak je sitna napomena (klasa .text-note) i brojaci/oznake.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
    body,
    p,
    li,
    td,
    label,
    input,
    select,
    textarea {
        font-size: 14px;
    }

    .text-caption-02,
    .text-label,
    small,
    .fs-12,
    .fs-13 {
        font-size: 14px;
        line-height: 20px;
    }

    /* Inline font-size iz starih sablona */
    [style*="font-size:12px"]:not(.count):not(.badge-sale):not(.tooltip):not(.text-note),
    [style*="font-size: 12px"]:not(.count):not(.badge-sale):not(.tooltip):not(.text-note),
    [style*="font-size:13px"]:not(.count):not(.badge-sale):not(.tooltip):not(.text-note),
    [style*="font-size: 13px"]:not(.count):not(.badge-sale):not(.tooltip):not(.text-note) {
        font-size: 14px !important;
    }

    /* Sitna napomena ("PDV ukalkulisan", "Cijena po komadu") smije 12 px. */
    .text-note,
    .text-note * {
        font-size: 12px !important;
        line-height: 16px;
    }

    /* Polja forme ispod 16 px iOS Safari automatski zumira pri fokusu —
       zato unosi idu na 16 px. */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px;
    }
}


/* -------------------------------------------------------------------------
   4. VERTIKALNI RAZMACI — kraca naslovna na telefonu
   Naslovna je bila ~4.000 px (pet ekrana). Razmaci izmedju sekcija se
   prepolovljavaju, sadrzaj ostaje isti.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .flat-spacing {
        padding-top: 32px;
        padding-bottom: 32px;
    }
    .flat-spacing-2 {
        padding-top: 28px;
        padding-bottom: 28px;
    }
    .flat-spacing-3,
    .flat-spacing-4 {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .sect-heading {
        margin-bottom: 20px !important;
    }
    .sect-heading .s-title {
        font-size: 20px !important;
        line-height: 1.25;
        margin-bottom: 4px;
    }
    .sect-heading .s-desc {
        font-size: 14px;
        line-height: 20px;
    }

    /* Wow animacije na mobilnom samo produzuju osjecaj sporosti. */
    .wow {
        animation-duration: 0.3s !important;
        animation-delay: 0s !important;
    }
}


/* -------------------------------------------------------------------------
   5. LJEPLJIVA TRAKA "DODAJ U KORPU"
   Traka postoji u temi, ali se na telefonu prikazivala bez cijene i sa
   biracem kolicine koji tu ne treba. Na mobilnom: slika, naziv, cijena,
   odabrana velicina i dugme.
   ------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .tf-sticky-btn-atc {
        padding: 8px 0;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }

    .tf-sticky-btn-atc .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .tf-sticky-btn-atc .tf-height-observer {
        gap: 10px;
    }

    /* Kolicina se bira u korpi, ne u ljepljivoj traci — nema mjesta. */
    .tf-sticky-btn-atc .tf-product-info-quantity {
        display: none !important;
    }

    /* Cijena i naziv se prikazuju i na telefonu (tema ih je krila do lg). */
    .tf-sticky-btn-atc .prd_info {
        display: grid !important;
        min-width: 0;
    }
    .tf-sticky-btn-atc .prd_info .name__prd {
        font-size: 13px;
        line-height: 1.2;
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .tf-sticky-btn-atc .prd_info .distribute__prd {
        font-size: 12px;
        line-height: 1.2;
        margin: 0;
    }
    .tf-sticky-btn-atc .prd_info .price__prd {
        font-size: 15px;
        line-height: 1.2;
        margin: 0;
    }

    .tf-sticky-btn-atc .prd_img img {
        width: 44px;
        height: 56px;
    }

    .tf-sticky-btn-atc .tf-sticky-atc-infos {
        margin-left: auto;
        flex: 0 0 auto;
    }
    .tf-sticky-btn-atc .tf-sticky-atc-infos form {
        gap: 8px;
    }
    .tf-sticky-btn-atc .btn-add-to-cart {
        min-height: 46px;
        padding: 10px 18px;
        font-size: 14px;
    }

    /* Traka pokriva dno ekrana — sadrzaj ispod nje mora ostati dohvatljiv. */
    body.has-sticky-atc {
        padding-bottom: 72px;
    }

    /* Dugme "Nazad na vrh" ne smije da stoji ispod trake. */
    body.has-sticky-atc #goTop {
        bottom: 84px;
    }
}

/* Na telefonu u ljepljivoj traci ne treba i naziv i brend — cijena je vaznija. */
@media (max-width: 575px) {
    .tf-sticky-btn-atc .prd_info .name__prd {
        display: none;
    }
    .tf-sticky-btn-atc .btn-add-to-cart .atc-price {
        display: none;
    }
}

/* Traka koja trazi izbor velicine prije dodavanja */
.tf-sticky-btn-atc .sticky-size-hint {
    font-size: 12px;
    color: var(--primary, #DC4646);
    margin: 2px 0 0;
}


/* -------------------------------------------------------------------------
   6. PUTANJA I OPIS PROIZVODA NA MOBILNOM
   Opis od ~500 karaktera je stajao izmedju cijene i izbora velicine i gurao
   dugme za kupovinu naniže. Na mobilnom se skracuje na dva reda.
   ------------------------------------------------------------------------- */
.mj-breadcrumb {
    background: #f8f8f8;
    border-bottom: 1px solid #eee;
    padding: 10px 0;
}
.mj-breadcrumb__nav {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #999;
    flex-wrap: wrap;
}
.mj-breadcrumb__link {
    color: #666;
    text-decoration: none;
    transition: color 0.15s;
}
.mj-breadcrumb__link:hover {
    color: var(--primary, #DC4646);
}
.mj-breadcrumb__sep {
    font-size: 10px;
    color: #ccc;
}
.mj-breadcrumb__current {
    color: #333;
    font-weight: 500;
}

@media (max-width: 767px) {
    .mj-breadcrumb {
        padding: 6px 0;
    }
    .mj-breadcrumb__nav {
        font-size: 12px;
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
    }
    .mj-breadcrumb__nav::-webkit-scrollbar {
        display: none;
    }
    /* Naziv proizvoda je vec u H1 odmah ispod — u putanji je suvisan. */
    .mj-breadcrumb__current {
        display: none;
    }
    .mj-breadcrumb__nav .mj-breadcrumb__sep:last-of-type {
        display: none;
    }
}

/* Skraceni opis + "Više o proizvodu" */
.product-infor-desc.is-collapsible {
    position: relative;
}
@media (max-width: 767px) {
    .product-infor-desc.is-collapsible:not(.is-open) {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .product-infor-desc.is-collapsible:not(.is-open) > * {
        display: inline;
    }
}
.prd-desc-toggle {
    display: none;
    background: none;
    border: 0;
    padding: 2px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary, #DC4646);
    text-decoration: underline;
    min-height: 44px;
}
@media (max-width: 767px) {
    .prd-desc-toggle.is-needed {
        display: inline-block;
    }

    /* Naslov proizvoda i cijena bliže vrhu */
    .tf-product-info-heading .product-infor-name {
        font-size: 20px !important;
        line-height: 1.3;
        margin-bottom: 8px !important;
    }
    .tf-product-info-heading .product-infor-meta {
        margin-bottom: 10px !important;
    }
    .tf-product-info-heading .product-infor-price {
        margin-bottom: 8px !important;
    }
    .tf-product-info-wrap .br-line {
        margin-block: 12px;
    }
}


/* -------------------------------------------------------------------------
   7. BANERI NA MOBILNOM
   Dok marketing ne pripremi uspravne verzije (admin polje "Slika za mobilni"),
   desktop kadar se bar centrira umjesto da se sijece po sredini.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .tf-slideshow .sld_image img {
        aspect-ratio: 4 / 5;
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center center;
    }

    /* Tekst preko banera mora ostati citljiv i na uskom kadru. */
    .tf-slideshow .sld_content .title_sld {
        font-size: 24px !important;
        line-height: 1.2;
    }
    .tf-slideshow .sld_content .sub-text_sld {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }
    .tf-slideshow .sld_content {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 60%);
    }

    /* Strelice lijevo/desno na telefonu samo smetaju — prevlaci se prstom. */
    .tf-slideshow .group-nav-action {
        display: none;
    }
}

/* Slika banera ima poznate dimenzije — rezervisi prostor da nema poskakivanja. */
.tf-slideshow .sld_image img {
    display: block;
    width: 100%;
    height: auto;
}


/* -------------------------------------------------------------------------
   8. H1 NA NASLOVNOJ
   Naslovna nije imala nijedan H1. Traka je namjerno niska — nosi kljucnu
   rijec i naziv brenda, a ne gura sadrzaj naniže.
   ------------------------------------------------------------------------- */
.home-seo-heading {
    padding: 14px 0 2px;
}
.home-seo-heading h1 {
    margin: 0;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--text, #333);
    letter-spacing: -0.01em;
}
.home-seo-heading p {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--cl-text-2, #777);
}

@media (min-width: 768px) {
    .home-seo-heading {
        padding: 20px 0 0;
        text-align: center;
    }
    .home-seo-heading h1 {
        font-size: 22px;
    }
}