/* 
   RESPONSIVE — MOBILE FIRST
   NAVBAR + SIGNATURE HERO / PONUDA
*/
/* 
   TABLET / MANJI LAPTOP
*/
@media (max-width: 900px) {
    .container {
        width: calc(100% - 40px) !important;
        max-width: none !important;
    }
    /* =========================
       NAVBAR
    ========================== */
    .site-header {
        height: 72px !important;
    }
    .navbar {
        height: 72px !important;
        display: grid !important;
        grid-template-columns: 1fr auto auto !important;
        align-items: center !important;
        gap: 14px !important;
    }
    .desktop-nav {
        display: none !important;
    }
    .navbar-brand {
        justify-self: start !important;
    }
    .navbar-logo-img {
        width: 38px !important;
        height: 38px !important;
        object-fit: contain !important;
    }
    .nav-actions {
        margin-left: auto !important;
    }
    .nav-cart-button {
        width: 46px !important;
        height: 46px !important;
        border-radius: 12px !important;
    }
    .mobile-menu-button {
        display: flex !important;
        width: 44px !important;
        height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 6px !important;
        border-radius: 12px !important;
    }
    /* =========================
       HERO
    ========================== */
    .signature-hero {
        min-height: auto !important;
        padding-top: 72px !important;
        padding-bottom: 34px !important;
        overflow: hidden !important;
    }
    .signature-shell {
        min-height: auto !important;
    }
    .signature-main {
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
        padding-top: 38px !important;
        padding-bottom: 0 !important;
    }
    .signature-copy {
        width: 100% !important;
        max-width: none !important;
        order: 1 !important;
    }
    .signature-stage {
        order: 2 !important;
        width: 100% !important;
        min-height: 470px !important;
    }
    .signature-product {
        width: 86% !important;
        height: 455px !important;
        margin: 0 auto !important;
    }
    .signature-shop-wrap {
        width: 100% !important;
        margin-top: 8px !important;
    }
    .signature-configurator {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 18px !important;
    }
    .signature-config-divider {
        width: 100% !important;
        height: 1px !important;
    }
}
/* 
   TELEFON
*/
@media (max-width: 600px) {
    /* =====================================================
       GLOBAL
    ===================================================== */
    .container {
        width: calc(100% - 32px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* =====================================================
       NAVBAR
    ===================================================== */
    .site-header {
        height: 66px !important;
        background: rgba(253,252,251,.88) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        border-bottom:
            1px solid rgba(30,25,20,.07) !important;
    }
    .navbar {
        height: 66px !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 !important;
    }
    /* logo */
    .navbar-brand {
        margin-right: auto !important;
    }
    .navbar-logo-img {
        width: 34px !important;
        height: 34px !important;
    }
    /* desktop meni skroz skloni */
    .desktop-nav {
        display: none !important;
    }
    /* korpa */
    .nav-actions {
        margin-left: auto !important;
    }
    .nav-cart-button {
        width: 42px !important;
        height: 42px !important;
        border-radius: 11px !important;
        background:
            rgba(255,255,255,.45) !important;
        border:
            1px solid rgba(180,122,69,.18) !important;
    }
    .nav-cart-button svg {
        width: 17px !important;
        height: 17px !important;
    }
    /* burger */
    .mobile-menu-button {
        display: flex !important;
        width: 42px !important;
        height: 42px !important;
        margin-left: 7px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        border-radius: 11px !important;
        background:
            rgba(255,255,255,.35) !important;
        border:
            1px solid rgba(30,25,20,.08) !important;
    }
    .mobile-menu-button span {
        width: 17px !important;
        height: 1.5px !important;
        background: #181613 !important;
    }
    /* =====================================================
       HERO — GENERAL
    ===================================================== */
    .signature-hero {
        min-height: auto !important;
        padding:
            66px 0
            28px !important;
        overflow: hidden !important;
    }
    .signature-shell {
        min-height: auto !important;
    }
    /* =====================================================
       HERO LAYOUT
    ===================================================== */
    .signature-main {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding:
            34px 0
            0 !important;
    }
    /* =====================================================
       COPY / NASLOV
    ===================================================== */
    .signature-copy {
        order: 1 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }
    .signature-eyebrow {
        display: block !important;
        margin-bottom: 14px !important;
        font-size: 8px !important;
        letter-spacing: .16em !important;
    }
    .signature-copy h1 {
        max-width: 100% !important;
        margin: 0 !important;
        font-size:
            clamp(44px, 12vw, 58px) !important;
        line-height: .94 !important;
        letter-spacing: -.055em !important;
    }
    .signature-copy h1 span {
        display: block !important;
    }
    .signature-copy > p {
        max-width: 100% !important;
        margin-top: 23px !important;
        font-size: 13px !important;
        line-height: 1.7 !important;
    }
    /* =====================================================
       MINI BENEFITI
    ===================================================== */
    .signature-mini-benefits {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 9px 15px !important;
        margin-top: 20px !important;
    }
    .signature-mini-benefits span {
        font-size: 8px !important;
        white-space: nowrap !important;
    }
    .signature-mini-benefits svg {
        width: 13px !important;
        height: 13px !important;
    }
    /* =====================================================
       PRODUCT STAGE
    ===================================================== */
    .signature-stage {
        order: 2 !important;
        position: relative !important;
        width: 100% !important;
        min-height: 420px !important;
        margin-top: 12px !important;
    }
    .signature-product {
        width: 100% !important;
        max-width: none !important;
        height: 410px !important;
        margin: 0 auto !important;
    }
    .signature-product-image {
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }
    /* ako druge slike imaju klasu smaller */
    .signature-product-image.hero-image-smaller {
        transform:
            scale(.88) !important;
    }
    /* strelice */
    .signature-arrow {
        width: 40px !important;
        height: 40px !important;
        top: 52% !important;
        border-radius: 50% !important;
    }
    .signature-arrow-left {
        left: -2px !important;
    }
    .signature-arrow-right {
        right: -2px !important;
    }
    .signature-arrow svg {
        width: 14px !important;
        height: 14px !important;
    }
    /* counter */
    .signature-counter {
        right: 2px !important;
        bottom: 16px !important;
        gap: 8px !important;
    }
    .signature-counter span {
        width: 26px !important;
    }
    /* =====================================================
       SHOP WRAP
    ===================================================== */
    .signature-shop-wrap {
        width: 100% !important;
        margin:
            4px auto
            0 !important;
    }
    .signature-shop-label {
        padding:
            0 0
            10px !important;
    }
    .signature-shop-label > div > span {
        font-size: 9px !important;
        letter-spacing: .12em !important;
    }
    .signature-shop-label > div > small {
        font-size: 7px !important;
    }
    /* =====================================================
       GLASS CONFIGURATOR
    ===================================================== */
    .signature-configurator {
        width: 100% !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding: 16px !important;
        border-radius: 22px !important;
    }
    /* =====================================================
       BOJE
    ===================================================== */
    .signature-color-buttons {
        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;
        gap: 8px !important;
    }
    .signature-color {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 58px !important;
        padding:
            9px 12px !important;
        border-radius: 13px !important;
    }
    .signature-swatch {
        width: 23px !important;
        height: 23px !important;
        flex:
            0 0 23px !important;
    }
    .signature-color > span {
        font-size: 10px !important;
    }
    .signature-color small {
        font-size: 7px !important;
    }
    /* dimensions isto kao boje */
    .signature-dimensions-button {
        width: 100% !important;
        min-height: 58px !important;
        border-radius: 13px !important;
    }
    /* =====================================================
       DIVIDERI
    ===================================================== */
    .signature-config-divider {
        width: 100% !important;
        height: 1px !important;
        margin:
            16px 0 !important;
        background:
            rgba(45,36,27,.08) !important;
    }
    /* =====================================================
       CENA
    ===================================================== */
    .signature-price {
        padding:
            2px 10px
            4px !important;
    }
    .signature-price > span {
        margin-bottom:
            10px !important;
        font-size:
            8px !important;
    }
    .signature-price strong {
        font-size:
            35px !important;
        font-weight:
            700 !important;
    }
    .signature-price small {
        font-size:
            9px !important;
    }
    /* =====================================================
       DUGME DODAJ U KORPU
    ===================================================== */
    .signature-buy {
        width: 100% !important;
    }
    .signature-buy-button {
        width: 100% !important;
        height: 64px !important;
        border-radius:
            14px !important;
        padding:
            0 20px !important;
        font-size:
            10px !important;
    }
    .signature-buy > small {
        margin-top:
            8px !important;
        font-size:
            7px !important;
    }
}
/* 
   MOBILE FIX — NAVBAR + HERO START
*/
@media (max-width: 600px) {
    /* =========================
       NAVBAR — SAMO LOGO + KORPA
    ========================== */
    .mobile-menu-button {
        display: none !important;
    }
    .desktop-nav {
        display: none !important;
    }
    .navbar {
        height: 64px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 !important;
    }
    .site-header {
        height: 64px !important;
    }
    .navbar-brand {
        margin: 0 !important;
    }
    .navbar-logo-img {
        width: 34px !important;
        height: 34px !important;
    }
    .nav-actions {
        margin: 0 !important;
        margin-left: auto !important;
    }
    .nav-cart-button {
        width: 42px !important;
        height: 42px !important;
    }
    /* =========================
       HERO — PODIGNI CEO SADRŽAJ
    ========================== */
    .signature-hero {
        padding-top: 64px !important;
    }
    .signature-main {
        padding-top: 16px !important;
    }
    .signature-copy {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    .signature-eyebrow {
        margin-top: 0 !important;
    }
}
/* 
   MOBILE — KAKO FUNKCIONIŠE
*/
@media (max-width: 600px) {
    /* SEKCIJA */
    .how-section {
        padding:
            72px 0
            64px !important;
        overflow: hidden !important;
    }
    /* NASLOV */
    .how-heading {
        margin-bottom:
            34px !important;
        text-align: center !important;
    }
    .how-heading .eyebrow {
        font-size:
            8px !important;
        letter-spacing:
            .15em !important;
        margin-bottom:
            12px !important;
    }
    .how-heading h2 {
        font-size:
            clamp(42px, 11vw, 54px) !important;
        line-height:
            .96 !important;
        letter-spacing:
            -.045em !important;
        margin:
            0 !important;
    }
    .how-heading h2 em {
        display: block !important;
    }
    .how-heading p {
        max-width:
            320px !important;
        margin:
            18px auto 0 !important;
        font-size:
            12px !important;
        line-height:
            1.65 !important;
    }
    /* =====================================================
       KORACI — VERTIKALNO
    ===================================================== */
    .how-steps {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        width: 100% !important;
    }
    /* KARTICE */
    .how-step {
        width: 100% !important;
        min-height: 0 !important;
        padding:
            22px 20px
            24px !important;
        border-radius:
            20px !important;
        display: grid !important;
        grid-template-columns:
            auto 1fr auto !important;
        grid-template-areas:
            "icon title number"
            "icon text number" !important;
        column-gap:
            14px !important;
        row-gap:
            5px !important;
        align-items: start !important;
        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,.64),
                rgba(255,255,255,.30)
            ) !important;
        border:
            1px solid rgba(255,255,255,.92) !important;
        backdrop-filter:
            blur(24px)
            saturate(150%) !important;
        -webkit-backdrop-filter:
            blur(24px)
            saturate(150%) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.96),
            0 14px 34px rgba(55,40,25,.06) !important;
    }
    /* BROJ */
    .how-step-number {
        grid-area:
            number !important;
        position:
            static !important;
        font-size:
            9px !important;
        line-height:
            1 !important;
        padding-top:
            3px !important;
    }
    /* IKONICA */
    .how-step-icon {
        grid-area:
            icon !important;
        width:
            44px !important;
        height:
            44px !important;
        margin:
            0 !important;
        border-radius:
            13px !important;
    }
    .how-step-icon svg {
        width:
            18px !important;
        height:
            18px !important;
    }
    /* NASLOV KARTICE */
    .how-step h3 {
        grid-area:
            title !important;
        margin:
            0 !important;
        font-size:
            14px !important;
        line-height:
            1.3 !important;
    }
    /* TEKST */
    .how-step p {
        grid-area:
            text !important;
        margin:
            0 !important;
        font-size:
            10px !important;
        line-height:
            1.55 !important;
        max-width:
            none !important;
    }
    /* =====================================================
       LINIJE IZMEĐU KARTICA
    ===================================================== */
    .how-step-line {
        width:
            100% !important;
        height:
            42px !important;
        display:
            flex !important;
        align-items:
            center !important;
        justify-content:
            center !important;
    }
    .how-step-line span {
        width:
            1px !important;
        height:
            100% !important;
        background:
            rgba(180,122,69,.16) !important;
        position:
            relative !important;
    }
    /* PUNJENJE LINIJE VERTIKALNO */
    .how-step-line span::before {
        width:
            100% !important;
        height:
            0% !important;
        left:
            0 !important;
        top:
            0 !important;
        background:
            #B47A45 !important;
    }
    /* mali romb između koraka */
    .how-step-line span::after {
        right:
            auto !important;
        left:
            50% !important;
        top:
            auto !important;
        bottom:
            -3px !important;
        transform:
            translateX(-50%)
            rotate(45deg) !important;
    }
}
/* 
   MOBILE — ANATOMY / PROMIŠLJENA IZNUTRA
*/
@media (max-width: 600px) {
    /* =====================================================
       SEKCIJA
    ===================================================== */
    .anatomy-section {
        padding:
            64px 0
            70px !important;
        overflow: hidden !important;
    }
    .anatomy-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 58px !important;
    }
    /* =====================================================
       LEVA STRANA
    ===================================================== */
    .anatomy-visual {
        width: 100% !important;
        min-width: 0 !important;
    }
    /* NASLOV */
    .anatomy-visual-heading {
        transform: none !important;
        margin:
            0 0
            30px !important;
        padding: 0 !important;
    }
    .anatomy-visual-heading .eyebrow {
        display: block !important;
        margin-bottom:
            11px !important;
        font-size:
            8px !important;
        letter-spacing:
            .15em !important;
    }
    .anatomy-visual-heading h2 {
        margin: 0 !important;
        max-width: 100% !important;
        font-size:
            clamp(42px, 11vw, 54px) !important;
        line-height:
            .96 !important;
        letter-spacing:
            -.045em !important;
    }
    .anatomy-visual-heading h2 em {
        display: inline !important;
    }
    /* =====================================================
       STAGE
    ===================================================== */
    .anatomy-stage {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    /* =====================================================
       PROIZVOD
    ===================================================== */
    .anatomy-product {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: 390px !important;
        margin:
            0 auto
            22px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        order: -10 !important;
        transform: none !important;
    }
    .anatomy-image {
        width: 100% !important;
        height: 100% !important;
        max-width: 330px !important;
        max-height: 390px !important;
        object-fit: contain !important;
        transform: none !important;
    }
    /* glow iza proizvoda */
    .anatomy-glow {
        width: 300px !important;
        height: 300px !important;
        left: 50% !important;
        top: 50% !important;
        transform:
            translate(-50%, -50%) !important;
        opacity: .55 !important;
        filter:
            blur(45px) !important;
    }
    /* =====================================================
       CALLOUTI 01–05
    ===================================================== */
    .anatomy-callout,
    .anatomy-callout-rfid,
    .anatomy-callout-led,
    .anatomy-callout-soft,
    .anatomy-callout-alcantara,
    .anatomy-callout-board {
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
        gap: 0 !important;
        margin: 0 !important;
        z-index: 3 !important;
    }
    /* ujednačimo redosled:
       kartica -> linija -> tačka */
    .anatomy-callout-soft,
    .anatomy-callout-alcantara,
    .anatomy-callout-board {
        flex-direction: row-reverse !important;
    }
    /* =====================================================
       GLASS KARTICE
    ===================================================== */
    .anatomy-callout-copy {
        width: calc(100% - 42px) !important;
        min-width: 0 !important;
        padding:
            17px 18px !important;
        border-radius:
            17px !important;
        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,.68),
                rgba(255,255,255,.30)
            ) !important;
        border:
            1px solid
            rgba(255,255,255,.92) !important;
        backdrop-filter:
            blur(24px)
            saturate(150%) !important;
        -webkit-backdrop-filter:
            blur(24px)
            saturate(150%) !important;
        box-shadow:
            inset 0 1px 0
            rgba(255,255,255,.96),
            0 12px 28px
            rgba(55,40,25,.055) !important;
    }
    .anatomy-callout-copy span {
        display: block !important;
        margin-bottom:
            5px !important;
        font-size:
            8px !important;
        letter-spacing:
            .11em !important;
        color:
            #B47A45 !important;
    }
    .anatomy-callout-copy strong {
        display: block !important;
        margin: 0 !important;
        font-size:
            12px !important;
        line-height:
            1.3 !important;
    }
    .anatomy-callout-copy small {
        display: block !important;
        margin-top:
            5px !important;
        font-size:
            9px !important;
        line-height:
            1.45 !important;
    }
    /* =====================================================
       LINIJA + TAČKA
    ===================================================== */
    .anatomy-line,
    .anatomy-line.reverse,
    .anatomy-line-rfid,
    .anatomy-line-led,
    .anatomy-line-soft,
    .anatomy-line-alcantara,
    .anatomy-line-board {
        position: relative !important;
        flex:
            0 0 42px !important;
        width: 42px !important;
        height: 1px !important;
        margin: 0 !important;
        transform: none !important;
        background:
            rgba(180,122,69,.34) !important;
    }
    /* TAČKICA */
    .anatomy-dot {
        position: absolute !important;
        width: 8px !important;
        height: 8px !important;
        top: 50% !important;
        border-radius: 50% !important;
        background:
            #B47A45 !important;
        box-shadow:
            0 0 0 4px rgba(180,122,69,.10),
            0 0 10px rgba(180,122,69,.18) !important;
        transform:
            translateY(-50%) !important;
    }
    /* leve kartice:
       tačka na kraju linije */
    .anatomy-callout-rfid .anatomy-dot,
    .anatomy-callout-led .anatomy-dot {
        right: -4px !important;
        left: auto !important;
    }
    /* desne kartice koje smo okrenuli:
       tačka sa druge strane */
    .anatomy-callout-soft .anatomy-dot,
    .anatomy-callout-alcantara .anatomy-dot,
    .anatomy-callout-board .anatomy-dot {
        left: -4px !important;
        right: auto !important;
    }
    /* =====================================================
       RAZMAK IZMEĐU KARTICA
    ===================================================== */
    .anatomy-callout + .anatomy-callout {
        margin-top:
            10px !important;
    }
    /* =====================================================
       DESNA STRANA — MATERIJALI
    ===================================================== */
    .anatomy-details {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }
    .anatomy-details-label {
        display: block !important;
        margin-bottom:
            11px !important;
        font-size:
            8px !important;
        letter-spacing:
            .15em !important;
    }
    .anatomy-details h3 {
        margin:
            0 0
            20px !important;
        font-size:
            clamp(36px, 10vw, 48px) !important;
        line-height:
            .98 !important;
        letter-spacing:
            -.035em !important;
    }
    .anatomy-details h3 em {
        display: block !important;
        margin-top:
            2px !important;
    }
    .anatomy-details-intro {
        margin:
            0 0
            28px !important;
        font-size:
            11px !important;
        line-height:
            1.65 !important;
    }
    /* =====================================================
       DETALJNA LISTA 01–05
    ===================================================== */
    .anatomy-detail-list {
        width: 100% !important;
    }
    .anatomy-detail-item {
        display: grid !important;
        grid-template-columns:
            28px 1fr !important;
        gap:
            10px !important;
        padding:
            17px 0 !important;
    }
    .anatomy-detail-number {
        font-size:
            8px !important;
        padding-top:
            2px !important;
    }
    .anatomy-detail-item strong {
        font-size:
            12px !important;
        line-height:
            1.35 !important;
    }
    .anatomy-detail-item p {
        margin-top:
            6px !important;
        font-size:
            9px !important;
        line-height:
            1.55 !important;
    }
}
/* 
   MOBILE — ANATOMY CALLOUTS OKO PROIZVODA
   01–05 + linije + tačke
*/
@media (max-width: 600px) {
    /* =====================================================
       STAGE
    ===================================================== */
    .anatomy-stage {
        position: relative !important;
        width: 100% !important;
        height: 650px !important;
        min-height: 650px !important;
        display: block !important;
        margin-top: 15px !important;
        overflow: visible !important;
    }
    /* =====================================================
       KOMODA U SREDINI
    ===================================================== */
    .anatomy-product {
        position: absolute !important;
        left: 50% !important;
        top: 72px !important;
        width: 255px !important;
        height: 430px !important;
        margin: 0 !important;
        transform:
            translateX(-50%) !important;
        z-index: 1 !important;
    }
    .anatomy-image {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain !important;
        transform: none !important;
    }
    .anatomy-glow {
        left: 50% !important;
        top: 48% !important;
        width: 260px !important;
        height: 330px !important;
        transform:
            translate(-50%, -50%) !important;
    }
    /* =====================================================
       SVE CALLOUT KARTICE
    ===================================================== */
    .anatomy-callout {
        position: absolute !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        transform: none !important;
        z-index: 5 !important;
    }
    .anatomy-callout-copy {
        flex: 0 0 112px !important;
        width: 112px !important;
        padding:
            10px 10px !important;
        border-radius:
            13px !important;
        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,.74),
                rgba(255,255,255,.34)
            ) !important;
        border:
            1px solid
            rgba(255,255,255,.95) !important;
        backdrop-filter:
            blur(20px)
            saturate(150%) !important;
        -webkit-backdrop-filter:
            blur(20px)
            saturate(150%) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.95),
            0 8px 18px rgba(40,30,20,.07) !important;
    }
    .anatomy-callout-copy span {
        margin-bottom:
            3px !important;
        font-size:
            6px !important;
        line-height:
            1 !important;
        color:
            #B47A45 !important;
    }
    .anatomy-callout-copy strong {
        display: block !important;
        font-size:
            8px !important;
        line-height:
            1.2 !important;
    }
    .anatomy-callout-copy small {
        display: block !important;
        margin-top:
            4px !important;
        font-size:
            6px !important;
        line-height:
            1.35 !important;
    }
    /* =====================================================
       LINIJE
    ===================================================== */
    .anatomy-line,
    .anatomy-line.reverse {
        position: relative !important;
        height: 1px !important;
        margin: 0 !important;
        flex: none !important;
        background:
            rgba(180,122,69,.48) !important;
        transform: none !important;
    }
    .anatomy-dot {
        position: absolute !important;
        width: 7px !important;
        height: 7px !important;
        top: 50% !important;
        border-radius:
            50% !important;
        background:
            #B47A45 !important;
        box-shadow:
            0 0 0 3px rgba(180,122,69,.11),
            0 0 8px rgba(180,122,69,.22) !important;
        transform:
            translateY(-50%) !important;
    }
    /* =====================================================
       01 — RFID / NFC
       TAČKA NA RFID MODULU NA POKLOPCU
    ===================================================== */
    .anatomy-callout-rfid {
        left: 0 !important;
        top: 112px !important;
        flex-direction:
            row !important;
    }
    .anatomy-callout-rfid .anatomy-line {
        width: 73px !important;
    }
    .anatomy-callout-rfid .anatomy-dot {
        right: -3px !important;
        left: auto !important;
    }
    /* =====================================================
       02 — LED
       TAČKA NA BELOJ LED TRACI DESNO
    ===================================================== */
    .anatomy-callout-led {
        left: 0 !important;
        top: 316px !important;
        flex-direction:
            row !important;
    }
    .anatomy-callout-led .anatomy-line {
        width: 152px !important;
    }
    .anatomy-callout-led .anatomy-dot {
        right: -3px !important;
        left: auto !important;
    }
    /* =====================================================
       03 — SOFT CLOSE
       TAČKA NA LEVOM KLIZAČU / AMORTIZERU
    ===================================================== */
    .anatomy-callout-soft {
        right: 0 !important;
        top: 244px !important;
        flex-direction:
            row !important;
    }
    .anatomy-callout-soft .anatomy-line {
        width: 108px !important;
        order: 1 !important;
    }
    .anatomy-callout-soft .anatomy-callout-copy {
        order: 2 !important;
    }
    .anatomy-callout-soft .anatomy-dot {
        left: -3px !important;
        right: auto !important;
    }
    /* =====================================================
       04 — ALCANTARA
       TAČKA NA CRNOJ PODLOZI UNUTRA
    ===================================================== */
    .anatomy-callout-alcantara {
        right: 0 !important;
        top: 355px !important;
        flex-direction:
            row !important;
    }
    .anatomy-callout-alcantara .anatomy-line {
        width: 72px !important;
        order: 1 !important;
    }
    .anatomy-callout-alcantara .anatomy-callout-copy {
        order: 2 !important;
    }
    .anatomy-callout-alcantara .anatomy-dot {
        left: -3px !important;
        right: auto !important;
    }
    /* =====================================================
       05 — KONSTRUKCIJA
       TAČKA NA DONJOJ FRONTI KOMODE
    ===================================================== */
    .anatomy-callout-board {
        right: 0 !important;
        top: 493px !important;
        flex-direction:
            row !important;
    }
    .anatomy-callout-board .anatomy-line {
        width: 70px !important;
        order: 1 !important;
    }
    .anatomy-callout-board .anatomy-callout-copy {
        order: 2 !important;
    }
    .anatomy-callout-board .anatomy-dot {
        left: -3px !important;
        right: auto !important;
    }
}
/* 
   MOBILE — COMPARISON TABLE
   OSTAVLJAMO PRAVU TABELU, SABIJENU ZA TELEFON
*/
@media (max-width: 600px) {
    .comparison-section {
        padding:
            56px 0
            58px !important;
    }
    .comparison-heading {
        margin-bottom:
            22px !important;
    }
    .comparison-heading .eyebrow {
        margin-bottom:
            8px !important;
        font-size:
            7px !important;
        letter-spacing:
            .14em !important;
    }
    .comparison-heading h2 {
        margin: 0 !important;
        font-size:
            38px !important;
        line-height:
            .96 !important;
        letter-spacing:
            -.045em !important;
    }
    .comparison-heading h2 em {
        display:
            block !important;
    }
    .comparison-heading p {
        max-width:
            300px !important;
        margin:
            12px auto 0 !important;
        font-size:
            9px !important;
        line-height:
            1.5 !important;
    }
    /* =====================================================
       TABELA
    ===================================================== */
    .comparison-table {
        width:
            100% !important;
        display:
            block !important;
        overflow:
            hidden !important;
        border-radius:
            16px !important;
        border:
            1px solid
            rgba(30,25,20,.08) !important;
        background:
            rgba(255,255,255,.34) !important;
        backdrop-filter:
            blur(18px) !important;
        -webkit-backdrop-filter:
            blur(18px) !important;
    }
    /* svaki red 3 kolone */
    .comparison-row {
        display:
            grid !important;
        grid-template-columns:
            1.15fr .85fr 1fr !important;
        width:
            100% !important;
        min-height:
            58px !important;
        padding:
            0 !important;
        border-bottom:
            1px solid
            rgba(30,25,20,.07) !important;
    }
    .comparison-row:last-child {
        border-bottom:
            none !important;
    }
    /* =====================================================
       HEADER
    ===================================================== */
    .comparison-header {
        min-height:
            64px !important;
    }
    .comparison-feature-title,
    .comparison-column-title {
        min-width:
            0 !important;
        padding:
            10px 8px !important;
        display:
            flex !important;
        align-items:
            center !important;
        font-size:
            8px !important;
        line-height:
            1.25 !important;
        text-align:
            left !important;
    }
    .comparison-column-title.premium {
        flex-direction:
            column !important;
        align-items:
            flex-start !important;
        justify-content:
            center !important;
        gap:
            3px !important;
    }
    .comparison-badge {
        margin:
            0 !important;
        padding:
            3px 5px !important;
        border-radius:
            999px !important;
        font-size:
            5px !important;
        letter-spacing:
            .09em !important;
    }
    /* =====================================================
       PRVA KOLONA
    ===================================================== */
    .comparison-feature {
        min-width:
            0 !important;
        padding:
            10px 8px !important;
        display:
            flex !important;
        align-items:
            center !important;
        font-size:
            8px !important;
        line-height:
            1.28 !important;
        font-weight:
            600 !important;
        word-break:
            normal !important;
        overflow-wrap:
            anywhere !important;
        border-right:
            1px solid
            rgba(30,25,20,.06) !important;
    }
    /* =====================================================
       VREDNOSTI
    ===================================================== */
    .comparison-value {
        min-width:
            0 !important;
        padding:
            9px 7px !important;
        display:
            flex !important;
        align-items:
            center !important;
        gap:
            4px !important;
        font-size:
            7px !important;
        line-height:
            1.25 !important;
        overflow-wrap:
            anywhere !important;
    }
    .comparison-value:not(:last-child) {
        border-right:
            1px solid
            rgba(30,25,20,.06) !important;
    }
    .comparison-value.negative,
    .comparison-value.neutral {
        color:
            rgba(30,27,23,.48) !important;
    }
    .comparison-value.positive {
        color:
            #9A6534 !important;
        font-weight:
            500 !important;
    }
    /* ikonice manje */
    .comparison-value svg {
        width:
            10px !important;
        height:
            10px !important;
        flex:
            0 0 10px !important;
        stroke-width:
            1.5 !important;
    }
    /* =====================================================
       DONJI CTA
    ===================================================== */
    .comparison-bottom {
        margin-top:
            16px !important;
    }
    .comparison-cta {
        min-height:
            48px !important;
        padding:
            0 15px !important;
        font-size:
            8px !important;
        border-radius:
            12px !important;
    }
}
/* 
   MOBILE FOOTER — TAČNO ZA TVOJ HTML
*/
@media (max-width: 600px) {
    /* =====================================================
       FOOTER MAIN
    ===================================================== */
    .site-footer,
    .premium-footer {
        padding: 44px 0 20px !important;
    }
    .footer-main {
        display: grid !important;
        grid-template-columns:
            1fr 1fr 1fr !important;
        gap:
            22px 12px !important;
        align-items: start !important;
    }
    /* =====================================================
       BRAND BLOK — IDE PREKO CELE ŠIRINE
    ===================================================== */
    .footer-brand-column {
        grid-column:
            1 / -1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .footer-logo-symbol {
        width: 38px !important;
        height: auto !important;
    }
    .footer-brand-column h3 {
        max-width: 330px !important;
        margin:
            18px 0
            12px !important;
        font-size:
            39px !important;
        line-height:
            .96 !important;
        letter-spacing:
            -.045em !important;
    }
    .footer-description {
        max-width:
            320px !important;
        margin:
            0 0
            20px !important;
        font-size:
            10px !important;
        line-height:
            1.6 !important;
    }
    /* =====================================================
       PORUČITE DUGME — MANJE
    ===================================================== */
    .footer-order-button {
        width:
            230px !important;
        min-height:
            44px !important;
        padding:
            0 14px !important;
        margin:
            0 !important;
        border-radius:
            11px !important;
        display:
            flex !important;
        align-items:
            center !important;
        justify-content:
            space-between !important;
        font-size:
            7.5px !important;
        letter-spacing:
            .06em !important;
    }
    .footer-order-button span {
        font-size:
            12px !important;
    }
    /* =====================================================
       NAVIGACIJA + INFORMACIJE + KONTAKT
       SVE 3 KOLONE JEDNA PORED DRUGE
    ===================================================== */
    .footer-links-column,
    .footer-contact-column {
        width:
            100% !important;
        min-width:
            0 !important;
        margin:
            0 !important;
        padding:
            0 !important;
    }
    /* NASLOVI */
    .footer-label {
        display:
            block !important;
        margin-bottom:
            11px !important;
        font-size:
            6px !important;
        line-height:
            1 !important;
        letter-spacing:
            .13em !important;
        white-space:
            nowrap !important;
    }
    /* NAVIGACIJA LINKOVI */
    .footer-links-column a,
    .footer-links-column > span:not(.footer-label) {
        display:
            block !important;
        margin-bottom:
            8px !important;
        font-size:
            7px !important;
        line-height:
            1.35 !important;
        overflow-wrap:
            anywhere !important;
    }
    /* =====================================================
       KONTAKT — MALE KARTICE
    ===================================================== */
    .footer-contact-column {
        display:
            flex !important;
        flex-direction:
            column !important;
        gap:
            6px !important;
    }
    .footer-contact-column .footer-label {
        margin-bottom:
            5px !important;
    }
    .footer-social-card,
    .footer-email-card {
        width:
            100% !important;
        min-width:
            0 !important;
        min-height:
            46px !important;
        padding:
            7px 8px !important;
        margin:
            0 !important;
        border-radius:
            10px !important;
        display:
            flex !important;
        align-items:
            center !important;
        justify-content:
            space-between !important;
        gap:
            4px !important;
        background:
            rgba(255,255,255,.40) !important;
        border:
            1px solid
            rgba(255,255,255,.72) !important;
        backdrop-filter:
            blur(14px) !important;
        -webkit-backdrop-filter:
            blur(14px) !important;
    }
    .footer-social-card small,
    .footer-email-card small {
        display:
            block !important;
        margin-bottom:
            3px !important;
        font-size:
            4.5px !important;
        line-height:
            1 !important;
        letter-spacing:
            .07em !important;
    }
    .footer-social-card strong,
    .footer-email-card strong {
        display:
            block !important;
        max-width:
            72px !important;
        font-size:
            6px !important;
        line-height:
            1.2 !important;
        overflow-wrap:
            anywhere !important;
    }
    .footer-social-card > span,
    .footer-email-card > span {
        flex:
            0 0 auto !important;
        font-size:
            9px !important;
    }
    /* =====================================================
       VAŠA TAJNA — KOMPAKTNIJE
    ===================================================== */
    .footer-signature {
        padding:
            34px 0
            28px !important;
        text-align:
            center !important;
    }
    .footer-signature span,
    .footer-signature strong {
        font-size:
            36px !important;
        line-height:
            .96 !important;
    }
    /* =====================================================
       DONJI RED
       2026 LEVO / LINKOVI DESNO
    ===================================================== */
    .footer-bottom-wrap {
        width:
            100% !important;
    }
    .footer-bottom {
        width:
            100% !important;
        display:
            flex !important;
        flex-direction:
            row !important;
        align-items:
            center !important;
        justify-content:
            space-between !important;
        gap:
            10px !important;
        padding:
            14px 0
            0 !important;
        margin:
            0 !important;
    }
    .footer-bottom > div:first-child {
        flex:
            0 0 auto !important;
        font-size:
            6.5px !important;
        line-height:
            1.2 !important;
        white-space:
            nowrap !important;
    }
    .footer-bottom-links {
        display:
            flex !important;
        flex-direction:
            row !important;
        align-items:
            center !important;
        justify-content:
            flex-end !important;
        gap:
            10px !important;
        margin-left:
            auto !important;
    }
    .footer-bottom-links a {
        margin:
            0 !important;
        font-size:
            6px !important;
        line-height:
            1.2 !important;
        white-space:
            nowrap !important;
    }
}
/* 
   MOBILE FOOTER — FINAL SIZE + SPACING TWEAK
*/
@media (max-width: 600px) {
    /* =====================================================
       NAVIGACIJA / INFORMACIJE / KONTAKT — VEĆE
    ===================================================== */
    .footer-label {
        font-size: 7.5px !important;
        letter-spacing: .14em !important;
        margin-bottom: 13px !important;
    }
    .footer-links-column a,
    .footer-links-column > span:not(.footer-label) {
        font-size: 8.5px !important;
        line-height: 1.45 !important;
        margin-bottom: 9px !important;
    }
    .footer-main {
        gap: 24px 16px !important;
    }
    /* =====================================================
       KONTAKT KARTICE — MALO VEĆE DA BUDU ČITLJIVE
    ===================================================== */
    .footer-social-card,
    .footer-email-card {
        min-height: 52px !important;
        padding: 9px 10px !important;
        border-radius: 11px !important;
    }
    .footer-social-card small,
    .footer-email-card small {
        font-size: 5.5px !important;
        margin-bottom: 3px !important;
    }
    .footer-social-card strong,
    .footer-email-card strong {
        font-size: 7.2px !important;
        line-height: 1.25 !important;
        max-width: 82px !important;
    }
    .footer-social-card > span,
    .footer-email-card > span {
        font-size: 10px !important;
    }
    /* =====================================================
       VAŠA TAJNA / VAŠA SIGURNOST — VEĆE
    ===================================================== */
    .footer-signature {
        padding: 42px 0 34px !important;
    }
    .footer-signature span,
    .footer-signature strong {
        font-size: 42px !important;
        line-height: .94 !important;
        letter-spacing: -.045em !important;
    }
    /* =====================================================
       DONJI RED — ODVOJI OD IVICA
    ===================================================== */
    .footer-bottom-wrap {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .footer-bottom {
        padding-top: 16px !important;
        padding-bottom: 4px !important;
    }
    .footer-bottom > div:first-child {
        font-size: 7px !important;
        margin-left: 0 !important;
    }
    .footer-bottom-links {
        gap: 12px !important;
        margin-right: 0 !important;
    }
    .footer-bottom-links a {
        font-size: 6.8px !important;
    }
}
/* 
   MOBILE FOOTER
   NAVIGACIJA + INFORMACIJE GORE
   KONTAKT ISPOD
*/
@media (max-width: 600px) {
    /* FOOTER GRID */
    .footer-main {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        column-gap: 35px !important;
        row-gap: 30px !important;
        align-items: start !important;
    }
    /* BRAND OSTANE PREKO CELE ŠIRINE */
    .footer-brand-column {
        grid-column: 1 / -1 !important;
    }
    /* NAVIGACIJA + INFORMACIJE */
    .footer-links-column {
        grid-column: auto !important;
        width: 100% !important;
    }
    .footer-label {
        font-size: 11px !important;
        line-height: 1.2 !important;
        letter-spacing: .12em !important;
        margin-bottom: 16px !important;
        font-weight: 600 !important;
    }
    .footer-links-column a,
    .footer-links-column > span:not(.footer-label) {
        font-size: 12px !important;
        line-height: 1.5 !important;
        margin-bottom: 10px !important;
    }
    /* =========================================
       KONTAKT IDE ISPOD OBE KOLONE
    ========================================= */
    .footer-contact-column {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        column-gap: 10px !important;
        row-gap: 10px !important;
        margin-top: 4px !important;
    }
    /* KONTAKT NASLOV PREKO CELE ŠIRINE */
    .footer-contact-column .footer-label {
        grid-column: 1 / -1 !important;
        margin-bottom: 3px !important;
        font-size: 11px !important;
    }
    /* INSTAGRAM + EMAIL JEDNO PORED DRUGOG */
    .footer-social-card,
    .footer-email-card {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 68px !important;
        padding: 12px 13px !important;
        border-radius: 13px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: rgba(255, 255, 255, .43) !important;
        border: 1px solid rgba(255, 255, 255, .8) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
    }
    .footer-social-card small,
    .footer-email-card small {
        font-size: 7px !important;
        margin-bottom: 5px !important;
    }
    .footer-social-card strong,
    .footer-email-card strong {
        font-size: 10px !important;
        line-height: 1.25 !important;
        max-width: none !important;
        overflow-wrap: anywhere !important;
    }
    .footer-social-card > span,
    .footer-email-card > span {
        font-size: 14px !important;
    }
    /* =========================================
       VAŠA TAJNA / VAŠA SIGURNOST
    ========================================= */
    .footer-signature {
        padding: 48px 0 40px !important;
    }
    .footer-signature span,
    .footer-signature strong {
        font-size: 50px !important;
        line-height: .9 !important;
        letter-spacing: -.05em !important;
    }
    /* =========================================
       DONJI RED DA NE LEPI ZA IVICE
    ========================================= */
    .footer-bottom-wrap {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }
}
/* 
   MOBILE — ISKLJUČI ANIMACIJU "KAKO FUNKCIONIŠE"
*/
@media (max-width: 600px) {
    /* kartice se odmah vide */
    .process-card,
    .process-step,
    .how-card,
    .how-step {
        opacity: 1 !important;
        transform: none !important;
        translate: none !important;
        animation: none !important;
        transition: none !important;
    }
    /* pseudo-elementi kartica takođe bez animacije */
    .process-card::before,
    .process-card::after,
    .process-step::before,
    .process-step::after {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    /* linija između koraka odmah bude cela */
    .process-line,
    .steps-line,
    .how-line {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}
@media (max-width: 600px) {
    .signature-counter {
        gap: 10px !important;
        right: 4px !important;
        bottom: 12px !important;
        font-size: 11px !important;
    }
    .signature-counter span {
        width: 36px !important;
    }
    .signature-counter strong {
        font-size: 14px !important;
    }
    .signature-counter small {
        font-size: 10px !important;
    }
}
/* 
   ANATOMY / MATERIJALI — RESPONSIVE FINAL
   DESKTOP > 1180px OSTAVLJA POTPUNO NETAKNUT
*/
/* 
   MANJI LAPTOPOVI / TABLETI LANDSCAPE
   901px — 1180px
*/
/* 
   TABLET / IPAD
   do 900px
*/
@media (max-width: 900px) {
    .anatomy-section {
        padding:
            75px 0
            80px !important;
        overflow: hidden !important;
    }
    .anatomy-layout {
        display: block !important;
    }
    .anatomy-visual {
        width: 100% !important;
    }
    .anatomy-visual-heading {
        max-width: 100% !important;
        margin-bottom: 25px !important;
        transform: none !important;
    }
    .anatomy-visual-heading h2 {
        font-size:
            clamp(44px, 8vw, 64px) !important;
    }
    /* CEO PRODUCT + LINIJE + KARTICE
       ostaju isti koncept, samo smanjeni */
    .anatomy-stage {
        position: relative !important;
        width: 100% !important;
        max-width: 760px !important;
        min-height: 650px !important;
        margin:
            0 auto
            55px !important;
        transform: scale(.92) !important;
        transform-origin: top center !important;
    }
    .anatomy-product {
        width: 55% !important;
        height: 570px !important;
    }
    .anatomy-callout-copy {
        width: 155px !important;
        min-width: 155px !important;
        flex-basis: 155px !important;
    }
    /* DESNI TEKST IDE ISPOD */
    .anatomy-details,
    .anatomy-info,
    .anatomy-copy {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        margin: 0 !important;
        padding-top: 0 !important;
        transform: none !important;
    }
    .anatomy-details h3 {
        max-width: 680px !important;
        font-size:
            clamp(42px, 7vw, 58px) !important;
    }
    .anatomy-details-intro {
        max-width: 620px !important;
    }
}
/* 
   TELEFON
   do 600px
*/
@media (max-width: 600px) {
    .anatomy-section {
        padding:
            65px 0
            65px !important;
    }
    .anatomy-section .container {
        width:
            calc(100% - 28px) !important;
    }
    .anatomy-visual-heading {
        margin-bottom: 20px !important;
    }
    .anatomy-visual-heading .eyebrow {
        font-size: 9px !important;
    }
    .anatomy-visual-heading h2 {
        margin-top: 10px !important;
        font-size:
            clamp(38px, 12vw, 52px) !important;
        line-height: .96 !important;
    }
    /* =====================================================
       CEO DIJAGRAM SMANJUJEMO KAO JEDNU CELINU
       LINIJE OSTAJU
    ===================================================== */
    .anatomy-stage {
        position: relative !important;
        width: 720px !important;
        min-width: 720px !important;
        min-height: 650px !important;
        left: 50% !important;
        margin:
            0 0
            -135px !important;
        transform:
            translateX(-50%)
            scale(.58) !important;
        transform-origin:
            top center !important;
        overflow: visible !important;
    }
    /* SLIKA KOMODE */
    .anatomy-product {
        width: 56% !important;
        height: 610px !important;
    }
    /* KARTICE OSTAJU SA LINIJAма */
    .anatomy-callout {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .anatomy-callout-copy {
        width: 175px !important;
        min-width: 175px !important;
        flex: 0 0 175px !important;
        min-height: 84px !important;
        padding:
            11px 13px !important;
        border-radius:
            16px !important;
        /* SAFARI GLASS */
        -webkit-backdrop-filter:
            blur(18px)
            saturate(150%) !important;
        backdrop-filter:
            blur(18px)
            saturate(150%) !important;
    }
    /* LINIJE NIKAKO NE SKRIVATI */
    .anatomy-line,
    .anatomy-line-rfid,
    .anatomy-line-led,
    .anatomy-line-soft,
    .anatomy-line-alcantara,
    .anatomy-line-board {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    /* TAČKE OSTAJU */
    .anatomy-dot {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    /* =====================================================
       04 ALCANTARA
       ZADRŽI POSEBNU LINIJU / TAČKU
    ===================================================== */
    .anatomy-callout-alcantara::before,
    .anatomy-callout-alcantara::after {
        visibility: visible !important;
        opacity: 1 !important;
    }
    /* DESNI OPIS ISPOD DIJAGRAMA */
    .anatomy-details,
    .anatomy-info,
    .anatomy-copy {
        position: relative !important;
        width: 100% !important;
        margin:
            0 !important;
        padding-top:
            0 !important;
        transform:
            none !important;
    }
    .anatomy-details-label {
        font-size: 9px !important;
    }
    .anatomy-details h3 {
        margin-top: 14px !important;
        font-size:
            clamp(38px, 11vw, 48px) !important;
        line-height: 1 !important;
    }
    .anatomy-details-intro {
        margin-top: 20px !important;
        font-size: 12px !important;
        line-height: 1.7 !important;
    }
    .anatomy-detail-list {
        margin-top: 30px !important;
    }
    .anatomy-detail-item {
        grid-template-columns:
            34px 1fr !important;
        gap: 12px !important;
        padding:
            18px 0 !important;
    }
}
/* 
   MALI TELEFONI
   iPhone SE / 320–390px
*/
@media (max-width: 390px) {
    .anatomy-stage {
        transform:
            translateX(-50%)
            scale(.50) !important;
        margin-bottom:
            -180px !important;
    }
    .anatomy-visual-heading h2 {
        font-size:
            38px !important;
    }
    .anatomy-details h3 {
        font-size:
            36px !important;
    }
}
/* 
   SAFARI / iOS STABILNOST
*/
@supports (-webkit-touch-callout: none) {
    .anatomy-callout-copy {
        -webkit-backdrop-filter:
            blur(18px)
            saturate(150%) !important;
    }
    .anatomy-stage,
    .anatomy-product,
    .anatomy-callout,
    .anatomy-line {
        -webkit-transform-style:
            preserve-3d;
    }
}
/* 
   ANATOMY — MOBILE SAFE SCALE
   NE MENJA POJEDINACNE KARTICE / LINIJE / TACKE
*/
@media (max-width: 600px) {
    .anatomy-section {
        overflow: hidden !important;
    }
    .anatomy-layout {
        display: block !important;
    }
    .anatomy-visual {
        width: 100% !important;
        overflow: visible !important;
    }
    .anatomy-stage {
        position: relative !important;
        width: 820px !important;
        min-width: 820px !important;
        height: 720px !important;
        min-height: 720px !important;
        left: 50% !important;
        margin:
            0 0
            -150px !important;
        transform:
            translateX(-50%)
            scale(.64) !important;
        transform-origin:
            top center !important;
        overflow: visible !important;
    }
    .anatomy-details {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}
/* manji telefoni */
@media (max-width: 390px) {
    .anatomy-stage {
        transform:
            translateX(-50%)
            scale(.58) !important;
        margin-bottom:
            -190px !important;
    }
}
/* 
   MOBILE ANATOMY — INTERACTIVE PREMIUM DESIGN
   DESKTOP SE NE MENJA
*/
@media (max-width: 600px) {
    .anatomy-section {
        position: relative !important;
        overflow: hidden !important;
        padding: 64px 0 80px !important;
    }
    .anatomy-layout {
        display: block !important;
    }
    .anatomy-visual {
        width: 100% !important;
    }
    /* ---------- NASLOV ---------- */
    .anatomy-visual-heading {
        margin-bottom: 24px !important;
    }
    .anatomy-visual-heading h2 {
        font-size: clamp(42px, 12vw, 54px) !important;
        line-height: .94 !important;
        letter-spacing: -.045em !important;
    }
    /* =====================================================
       KOMODA
    ===================================================== */
    .anatomy-stage {
        position: relative !important;
        width: 100% !important;
        height: 570px !important;
        min-height: 570px !important;
        left: auto !important;
        margin: 0 auto 24px !important;
        transform: none !important;
        overflow: visible !important;
    }
    .anatomy-product {
        position: absolute !important;
        width: 88% !important;
        max-width: 390px !important;
        height: 540px !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 1 !important;
    }
    .anatomy-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
    /* =====================================================
       SAKRIJ DESKTOP KARTICE I LINIJE
       OSTAVLJAMO SAMO HOTSPOT BROJEVE
    ===================================================== */
    .anatomy-callout-copy,
    .anatomy-line,
    .anatomy-callout::before,
    .anatomy-callout::after {
        display: none !important;
    }
    /* =====================================================
       SVI HOTSPOTOVI
    ===================================================== */
    .anatomy-callout {
        display: flex !important;
        position: absolute !important;
        width: 42px !important;
        height: 42px !important;
        padding: 0 !important;
        margin: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(180,122,69,.78) !important;
        border-radius: 50% !important;
        background:
            rgba(35,30,25,.76) !important;
        -webkit-backdrop-filter:
            blur(15px)
            saturate(150%) !important;
        backdrop-filter:
            blur(15px)
            saturate(150%) !important;
        box-shadow:
            0 5px 18px rgba(20,15,10,.18),
            inset 0 1px 0 rgba(255,255,255,.15) !important;
        color: #d39a62 !important;
        z-index: 20 !important;
        cursor: pointer !important;
        transform: none !important;
        transition:
            transform .25s ease,
            background .25s ease,
            box-shadow .25s ease !important;
    }
    /* broj pravimo preko CSS-a */
    .anatomy-callout::after {
        display: block !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        background: none !important;
        box-shadow: none !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        color: #d39a62 !important;
    }
    .anatomy-callout-rfid::after {
        content: "01" !important;
    }
    .anatomy-callout-led::after {
        content: "02" !important;
    }
    .anatomy-callout-soft::after {
        content: "03" !important;
    }
    .anatomy-callout-alcantara::after {
        content: "04" !important;
    }
    .anatomy-callout-board::after {
        content: "05" !important;
    }
    /* =====================================================
       POZICIJE NA KOMODI
    ===================================================== */
    .anatomy-callout-rfid {
        left: 47% !important;
        top: 17% !important;
    }
    .anatomy-callout-led {
        left: 76% !important;
        top: 43% !important;
    }
    .anatomy-callout-soft {
        left: 23% !important;
        top: 48% !important;
    }
    .anatomy-callout-alcantara {
        left: 47% !important;
        top: 54% !important;
    }
    .anatomy-callout-board {
        left: 65% !important;
        top: 79% !important;
    }
    /* AKTIVAN HOTSPOT */
    .anatomy-callout.mobile-active {
        transform: scale(1.12) !important;
        background:
            rgba(180,122,69,.92) !important;
        border-color:
            rgba(255,255,255,.75) !important;
        box-shadow:
            0 0 0 5px rgba(180,122,69,.12),
            0 0 25px rgba(180,122,69,.32) !important;
    }
    .anatomy-callout.mobile-active::after {
        color: #fff !important;
    }
    /* =====================================================
       DESKTOP DESNA STRANA
       NA TELEFONU JE NE PRIKAZUJEMO
    ===================================================== */
    .anatomy-details {
        display: none !important;
    }
    /* =====================================================
       OVERLAY
    ===================================================== */
    .mobile-anatomy-overlay {
        position: fixed !important;
        inset: 0 !important;
        background:
            rgba(25,20,16,.34) !important;
        -webkit-backdrop-filter:
            blur(3px) !important;
        backdrop-filter:
            blur(3px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        z-index: 9998 !important;
        transition:
            opacity .3s ease,
            visibility .3s ease !important;
    }
    .mobile-anatomy-overlay.is-open {
        opacity: 1 !important;
        visibility: visible !important;
    }
    /* =====================================================
       GLASS BOTTOM SHEET
    ===================================================== */
    .mobile-anatomy-sheet {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: 10px !important;
        padding:
            16px 22px
            calc(20px + env(safe-area-inset-bottom)) !important;
        border:
            1px solid rgba(255,255,255,.72) !important;
        border-radius:
            30px !important;
        background:
            linear-gradient(
                145deg,
                rgba(255,252,247,.94),
                rgba(244,235,224,.89)
            ) !important;
        -webkit-backdrop-filter:
            blur(35px)
            saturate(170%) !important;
        backdrop-filter:
            blur(35px)
            saturate(170%) !important;
        box-shadow:
            0 -10px 50px rgba(45,30,20,.10),
            0 25px 70px rgba(45,30,20,.22),
            inset 0 1px 0 rgba(255,255,255,.9) !important;
        z-index: 9999 !important;
        transform:
            translateY(calc(100% + 30px)) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition:
            transform .42s cubic-bezier(.2,.8,.2,1),
            opacity .3s ease,
            visibility .3s ease !important;
    }
    .mobile-anatomy-sheet.is-open {
        transform:
            translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    /* mala ručkica */
    .mobile-sheet-handle {
        width: 42px !important;
        height: 4px !important;
        margin:
            0 auto
            20px !important;
        border-radius:
            20px !important;
        background:
            rgba(35,25,18,.13) !important;
    }
    /* X */
    .mobile-sheet-close {
        position: absolute !important;
        top: 22px !important;
        right: 20px !important;
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        border:
            1px solid rgba(70,50,30,.09) !important;
        border-radius:
            50% !important;
        background:
            rgba(255,255,255,.58) !important;
        font-size:
            25px !important;
        line-height:
            34px !important;
        color:
            #181512 !important;
        cursor:
            pointer !important;
    }
    .mobile-sheet-number {
        display: block !important;
        margin-bottom:
            7px !important;
        color:
            #B47A45 !important;
        font-size:
            12px !important;
        font-weight:
            700 !important;
        letter-spacing:
            .08em !important;
    }
    .mobile-anatomy-sheet h3 {
        max-width:
            calc(100% - 50px) !important;
        margin:
            0 0
            10px !important;
        font-family:
            Georgia, "Times New Roman", serif !important;
        font-size:
            30px !important;
        line-height:
            1.05 !important;
        font-weight:
            500 !important;
        letter-spacing:
            -.025em !important;
        color:
            #171411 !important;
    }
    .mobile-anatomy-sheet > p {
        max-width:
            92% !important;
        margin:
            0 !important;
        font-size:
            13px !important;
        line-height:
            1.65 !important;
        color:
            rgba(30,25,20,.66) !important;
    }
    /* =====================================================
       FOOTER SHEETA
    ===================================================== */
    .mobile-sheet-footer {
        display: grid !important;
        grid-template-columns:
            44px 1fr 44px !important;
        align-items:
            center !important;
        gap:
            12px !important;
        margin-top:
            24px !important;
        padding-top:
            16px !important;
        border-top:
            1px solid rgba(70,50,30,.10) !important;
    }
    .mobile-sheet-footer > span {
        text-align:
            center !important;
        font-size:
            11px !important;
        color:
            rgba(25,20,16,.45) !important;
    }
    .mobile-sheet-footer strong {
        color:
            #181512 !important;
        font-weight:
            700 !important;
    }
    .mobile-sheet-footer button {
        width:
            44px !important;
        height:
            44px !important;
        padding:
            0 !important;
        border:
            1px solid rgba(70,50,30,.10) !important;
        border-radius:
            50% !important;
        background:
            rgba(255,255,255,.62) !important;
        color:
            #181512 !important;
        font-size:
            20px !important;
        cursor:
            pointer !important;
    }
}
/* 
   ANATOMY MOBILE — CLEAN RESET + HOTSPOTS
   SAMO TELEFON
   LAPTOP / DESKTOP SE NE DIRAJU
*/
@media (max-width: 600px) {
    /* =====================================================
       1. RESETUJ SVE STARE MOBILE LINIJE / PSEUDO ELEMENTE
    ===================================================== */
    html body .anatomy-callout::before,
    html body .anatomy-callout::after,
    html body .anatomy-callout-alcantara::before,
    html body .anatomy-callout-alcantara::after {
        content: none !important;
        display: none !important;
    }
    html body .anatomy-line,
    html body .anatomy-line-rfid,
    html body .anatomy-line-led,
    html body .anatomy-line-soft,
    html body .anatomy-line-alcantara,
    html body .anatomy-line-board,
    html body .anatomy-dot {
        display: none !important;
        visibility: hidden !important;
    }
    /* =====================================================
       2. SEKCIJA
    ===================================================== */
    html body .anatomy-section {
        padding: 62px 0 70px !important;
        overflow: hidden !important;
    }
    html body .anatomy-section .container {
        width: calc(100% - 28px) !important;
        max-width: none !important;
    }
    html body .anatomy-layout {
        display: block !important;
    }
    html body .anatomy-visual {
        width: 100% !important;
        max-width: none !important;
        overflow: visible !important;
    }
    /* =====================================================
       3. NASLOV
    ===================================================== */
    html body .anatomy-visual-heading {
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 24px !important;
        transform: none !important;
    }
    html body .anatomy-visual-heading h2 {
        margin: 10px 0 0 !important;
        font-size: clamp(42px, 12vw, 54px) !important;
        line-height: .94 !important;
        letter-spacing: -.05em !important;
    }
    /* =====================================================
       4. SCENA — PRAVA ŠIRINA TELEFONA
    ===================================================== */
    html body .anatomy-stage {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 430px !important;
        height: 520px !important;
        min-height: 520px !important;
        margin: 0 auto 24px !important;
        transform: none !important;
        overflow: visible !important;
    }
    /* =====================================================
       5. KOMODA — TAČNO U CENTRU
    ===================================================== */
    html body .anatomy-product {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 92% !important;
        max-width: 390px !important;
        height: 500px !important;
        margin: 0 !important;
        transform: translate(-50%, -50%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 1 !important;
    }
    html body .anatomy-image {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        object-fit: contain !important;
        transform: none !important;
    }
    /* =====================================================
       6. SVI HOTSPOTOVI
       parent postaje samo pozicija
    ===================================================== */
    html body .anatomy-callout {
        position: absolute !important;
        display: block !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        left: auto !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        z-index: 20 !important;
        cursor: pointer !important;
    }
    /* =====================================================
       7. POSTOJEĆA KARTICA POSTAJE KRUŽIĆ
       koristimo pravi span 01–05 iz HTML-a
    ===================================================== */
    html body .anatomy-callout .anatomy-callout-copy {
        position: absolute !important;
        inset: 0 !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border:
            1px solid rgba(180,122,69,.75) !important;
        border-radius: 50% !important;
        background:
            rgba(25,22,19,.76) !important;
        -webkit-backdrop-filter:
            blur(14px)
            saturate(150%) !important;
        backdrop-filter:
            blur(14px)
            saturate(150%) !important;
        box-shadow:
            0 5px 18px rgba(20,15,10,.14),
            inset 0 1px 0 rgba(255,255,255,.14) !important;
        overflow: visible !important;
        transform: none !important;
    }
    /* samo 01 / 02 / 03 / 04 / 05 */
    html body .anatomy-callout-copy > span {
        display: block !important;
        position: static !important;
        margin: 0 !important;
        padding: 0 !important;
        font-family: Arial, sans-serif !important;
        font-size: 11px !important;
        line-height: 1 !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
        color: #D29A63 !important;
        transform: none !important;
    }
    html body .anatomy-callout-copy strong,
    html body .anatomy-callout-copy small {
        display: none !important;
    }
    /* refleksiju stare glass kartice ugasi */
    html body .anatomy-callout-copy::before,
    html body .anatomy-callout-copy::after {
        content: none !important;
        display: none !important;
    }
    /* =====================================================
       8. POZICIJE NA KOMODI
    ===================================================== */
    /* 01 — RFID */
    html body .anatomy-callout-rfid {
        left: 57% !important;
        top: 20% !important;
    }
    /* 02 — bela LED traka desno */
    html body .anatomy-callout-led {
        left: 75% !important;
        top: 43% !important;
    }
    /* 03 — soft-close mehanizam levo */
    html body .anatomy-callout-soft {
        left: 34% !important;
        top: 44% !important;
    }
    /* 04 — crna alkantara unutra */
    html body .anatomy-callout-alcantara {
        left: 52% !important;
        top: 50% !important;
    }
    /* 05 — konstrukcija / donji deo */
    html body .anatomy-callout-board {
        left: 65% !important;
        top: 78% !important;
    }
    /* =====================================================
       9. AKTIVAN HOTSPOT
    ===================================================== */
    html body .anatomy-callout.mobile-active
    .anatomy-callout-copy {
        background:
            rgba(180,122,69,.94) !important;
        border-color:
            rgba(255,255,255,.82) !important;
        box-shadow:
            0 0 0 5px rgba(180,122,69,.12),
            0 0 25px rgba(180,122,69,.34) !important;
    }
    html body .anatomy-callout.mobile-active
    .anatomy-callout-copy > span {
        color: #fff !important;
    }
    /* =====================================================
       10. DESKTOP DESNI DEO
       na telefonu ga menja popup
    ===================================================== */
    html body .anatomy-details {
        display: none !important;
    }
}
@media (max-width: 600px) {
    .anatomy-stage {
        position: relative !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        transform: none !important;
    }
    .anatomy-product {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        top: 50% !important;
        margin: 0 !important;
        transform: translate(-50%, -50%) !important;
    }
}
/* =========================================
   FINAL — KOMODA TAČNO NA SREDINI TELEFONA
========================================= */
@media (max-width: 600px) {
    html body .anatomy-stage {
        position: relative !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    html body .anatomy-stage .anatomy-product {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        top: 50% !important;
        margin: 0 !important;
        transform: translate(-50%, -50%) !important;
    }
}
/* =========================================
   FINAL — CENTRIRAJ KOMODU NA TELEFONU
========================================= */
@media (max-width: 600px) {
    html body #anatomy .anatomy-stage {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        transform: none !important;
    }
    html body #anatomy .anatomy-stage .anatomy-product {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
}
}
@media (max-width: 600px) {
    /* sve hotspot tačke */
    html body #anatomy .anatomy-callout {
        position: absolute !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        transform: translate(-50%, -50%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 30 !important;
    }
    html body #anatomy .anatomy-callout .anatomy-callout-copy {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
    }
    html body #anatomy .anatomy-callout-copy > span {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 10px !important;
        line-height: 1 !important;
    }
    html body #anatomy .anatomy-callout-copy strong,
    html body #anatomy .anatomy-callout-copy small,
    html body #anatomy .anatomy-line {
        display: none !important;
    }
    /* 01 — RFID modul gore */
    html body #anatomy .anatomy-callout-rfid {
        left: 56% !important;
        top: 21% !important;
        right: auto !important;
    }
    /* 02 — LED bela traka desno */
    html body #anatomy .anatomy-callout-led {
        left: 70% !important;
        top: 44% !important;
        right: auto !important;
    }
    /* 03 — soft close levo unutra */
    html body #anatomy .anatomy-callout-soft {
        left: 41% !important;
        top: 45% !important;
        right: auto !important;
    }
    /* 04 — alkantara u crnom mekanom delu */
    html body #anatomy .anatomy-callout-alcantara {
        left: 50% !important;
        top: 51% !important;
        right: auto !important;
    }
    /* 05 — konstrukcija dole */
    html body #anatomy .anatomy-callout-board {
        left: 59% !important;
        top: 76% !important;
        right: auto !important;
    }
}
@media (max-width: 600px) {
    /* 01 — RFID modul */
    html body #anatomy .anatomy-callout-rfid {
        left: 54% !important;
        top: 24% !important;
    }
    /* 02 — LED desno unutra */
    html body #anatomy .anatomy-callout-led {
        left: 64% !important;
        top: 45% !important;
    }
    /* 03 — soft-close levo */
    html body #anatomy .anatomy-callout-soft {
        left: 41% !important;
        top: 44% !important;
    }
    /* 04 — alkantara u crnom mekanom delu */
    html body #anatomy .anatomy-callout-alcantara {
        left: 50% !important;
        top: 49% !important;
    }
    /* 05 — konstrukcija dole */
    html body #anatomy .anatomy-callout-board {
        left: 58% !important;
        top: 76% !important;
    }
}
/* 
   SEFKOMODA MOBILE HOTSPOTS — STVARNO FINAL
   SAMO TELEFON
*/
@media screen and (max-width: 600px) {
    /* UGASI SVE STARE LINIJE I PSEUDO BROJEVE */
    html body #anatomy .anatomy-line,
    html body #anatomy .anatomy-dot,
    html body #anatomy .anatomy-callout::before,
    html body #anatomy .anatomy-callout::after {
        display: none !important;
        content: none !important;
    }
    /* SVI KRUŽIĆI */
    html body #anatomy .anatomy-callout {
        position: absolute !important;
        inset: 0 auto auto 0 !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        z-index: 50 !important;
    }
    /* VIDLJIV KRUŽIĆ */
    html body #anatomy .anatomy-callout .anatomy-callout-copy {
        position: absolute !important;
        inset: 0 !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: rgba(27,24,21,.82) !important;
        border:
            1px solid rgba(190,132,77,.82) !important;
        box-shadow:
            0 5px 18px rgba(30,20,12,.16),
            inset 0 1px 0 rgba(255,255,255,.13) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        backdrop-filter: blur(14px) !important;
    }
    html body #anatomy .anatomy-callout-copy > span {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 10px !important;
        line-height: 1 !important;
        color: #D19A63 !important;
    }
    html body #anatomy .anatomy-callout-copy strong,
    html body #anatomy .anatomy-callout-copy small {
        display: none !important;
    }
    /* =====================================================
       POZICIJE
       OVDE VIŠE NE KORISTIMO STARE left/top PROCENTE
    ===================================================== */
    /* 01 — TAČNO PREKO RFID MODULA */
    html body #anatomy .anatomy-callout-rfid {
        transform:
            translate(
                calc(50vw - 6px),
                118px
            ) !important;
    }
    /* 02 — DESNA BELA LED TRAKA */
    html body #anatomy .anatomy-callout-led {
        transform:
            translate(
                calc(50vw + 82px),
                300px
            ) !important;
    }
    /* 03 — LEVI SOFT-CLOSE / MEHANIZAM */
    html body #anatomy .anatomy-callout-soft {
        transform:
            translate(
                calc(50vw - 94px),
                283px
            ) !important;
    }
    /* 04 — CRNA MEKANA ALCANTARA */
    html body #anatomy .anatomy-callout-alcantara {
        transform:
            translate(
                calc(50vw - 9px),
                326px
            ) !important;
    }
    /* 05 — DONJA KONSTRUKCIJA */
    html body #anatomy .anatomy-callout-board {
        transform:
            translate(
                calc(50vw + 55px),
                475px
            ) !important;
    }
}
/* 
   MOBILE — HOTSPOT POZICIJE NA TAČNIM DELOVIMA KOMODE
   SAMO TELEFON
*/
@media (max-width: 600px) {
    /* 01 — RFID / NFC MODUL NA POKLOPCU */
    html body #anatomy .anatomy-callout-rfid {
        transform:
            translate(
                calc(50vw - 22px),
                88px
            ) !important;
    }
    /* 02 — BELA LED TRAKA DESNO UNUTRA */
    html body #anatomy .anatomy-callout-led {
        transform:
            translate(
                calc(50vw + 66px),
                218px
            ) !important;
    }
    /* 03 — SOFT-CLOSE / LEVI MEHANIZAM */
    html body #anatomy .anatomy-callout-soft {
        transform:
            translate(
                calc(50vw - 108px),
                178px
            ) !important;
    }
    /* 04 — CRNA MEKANA ALCANTARA U SREDINI */
    html body #anatomy .anatomy-callout-alcantara {
        transform:
            translate(
                calc(50vw - 10px),
                226px
            ) !important;
    }
    /* 05 — DONJA KONSTRUKCIJA / FRONT */
    html body #anatomy .anatomy-callout-board {
        transform:
            translate(
                calc(50vw + 12px),
                390px
            ) !important;
    }
}
/* 
   MOBILE COMPARISON — 2 VERTIKALNE KOLONE
*/
.mobile-comparison-table {
    display: none;
}
@media (max-width: 600px) {
    /* desktop tabelu skloni SAMO na telefonu */
    #comparison .comparison-table {
        display: none !important;
    }
    /* nova mobile tabela */
    #comparison .mobile-comparison-table {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        width: 100% !important;
        margin-top: 28px !important;
        border:
            1px solid rgba(45, 36, 27, .13) !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        background:
            rgba(255,255,255,.36) !important;
        box-shadow:
            0 18px 45px rgba(44, 31, 20, .05) !important;
    }
    /* obe kolone */
    #comparison .mobile-comparison-column {
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    /* DESNA linija tačno po sredini */
    #comparison .mobile-comparison-normal {
        border-right:
            1px solid rgba(45,36,27,.12) !important;
    }
    /* header obe kolone */
    #comparison .mobile-comparison-column-header {
        height: 92px !important;
        padding:
            16px 12px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        border-bottom:
            1px solid rgba(45,36,27,.10) !important;
    }
    #comparison .mobile-comparison-normal
    .mobile-comparison-column-header span {
        font-family:
            "DM Sans", sans-serif !important;
        font-size:
            8px !important;
        font-weight:
            600 !important;
        letter-spacing:
            .11em !important;
        color:
            rgba(28,25,22,.56) !important;
    }
    /* desni header */
    #comparison .mobile-comparison-premium
    .mobile-comparison-column-header {
        background:
            rgba(180,122,69,.045) !important;
    }
    #comparison .mobile-sef-badge {
        display: inline-flex !important;
        width: fit-content !important;
        padding:
            5px 8px !important;
        margin-bottom:
            7px !important;
        border:
            1px solid rgba(180,122,69,.32) !important;
        border-radius:
            999px !important;
        font-size:
            6px !important;
        font-weight:
            700 !important;
        letter-spacing:
            .12em !important;
        color:
            #9d6737 !important;
        background:
            rgba(180,122,69,.07) !important;
    }
    #comparison .mobile-comparison-column-header strong {
        font-family:
            "DM Sans", sans-serif !important;
        font-size:
            10px !important;
        font-weight:
            600 !important;
        color:
            #201c18 !important;
    }
    /* lista */
    #comparison .mobile-comparison-list {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }
    /* jedan benefit */
    #comparison .mobile-comparison-item {
        min-height:
            82px !important;
        padding:
            15px 12px !important;
        display: flex !important;
        align-items: center !important;
        gap:
            8px !important;
        border-bottom:
            1px solid rgba(45,36,27,.075) !important;
        box-sizing:
            border-box !important;
    }
    #comparison .mobile-comparison-item:last-child {
        border-bottom:
            none !important;
    }
    /* da desna strana bude malo premium */
    #comparison
    .mobile-comparison-premium
    .mobile-comparison-item {
        background:
            rgba(180,122,69,.025) !important;
    }
    /* tekst */
    #comparison .mobile-comparison-item strong {
        display: block !important;
        font-family:
            "DM Sans", sans-serif !important;
        font-size:
            9px !important;
        font-weight:
            500 !important;
        line-height:
            1.45 !important;
        color:
            #29241f !important;
    }
    /* minus */
    #comparison .mobile-minus {
        flex:
            0 0 13px !important;
        font-size:
            12px !important;
        line-height:
            1 !important;
        color:
            rgba(30,27,24,.40) !important;
    }
    /* check */
    #comparison .mobile-check {
        flex:
            0 0 13px !important;
        font-size:
            11px !important;
        line-height:
            1 !important;
        font-weight:
            600 !important;
        color:
            #B47A45 !important;
    }
}
/* 
   MOBILE — KAKO FUNKCIONIŠE
   ISTI DIZAJN KAO DESKTOP
*/
@media (max-width: 600px) {
    /* SEKCIJA */
    #how.how-section {
        padding: 68px 0 72px !important;
        overflow: hidden !important;
    }
    /* NASLOV */
    #how .how-heading {
        margin-bottom: 40px !important;
        text-align: center !important;
    }
    #how .how-heading h2 {
        font-size: clamp(38px, 10.5vw, 48px) !important;
        line-height: .96 !important;
    }
    #how .how-heading p {
        max-width: 310px !important;
        margin: 17px auto 0 !important;
        font-size: 11px !important;
        line-height: 1.6 !important;
    }
    /* =====================================================
       HORIZONTALNI DESKTOP IZGLED
    ===================================================== */
    #how .how-steps {
        position: relative !important;
        display: grid !important;
        grid-template-columns:
            1fr 24px
            1fr 24px
            1fr 24px
            1fr 24px
            1fr !important;
        align-items: start !important;
        width: 760px !important;
        max-width: none !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 18px 8px !important;
        overflow: visible !important;
    }
    /* spoljašnji horizontalni scroll */
    #how .container {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        padding-bottom: 8px !important;
    }
    #how .container::-webkit-scrollbar {
        display: none !important;
    }
    /* =====================================================
       KORAK — UKLANJAMO MOBILE KARTICE
    ===================================================== */
    #how .how-step {
        position: relative !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        text-align: center !important;
    }
    /* =====================================================
       KRUG SA IKONICOM
    ===================================================== */
    #how .how-step-icon {
        order: 1 !important;
        position: relative !important;
        width: 62px !important;
        height: 62px !important;
        margin: 0 0 30px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background:
            rgba(255,255,255,.46) !important;
        border:
            1px solid rgba(180,122,69,.16) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.92),
            0 8px 24px rgba(50,35,20,.045) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        z-index: 3 !important;
    }
    #how .how-step-icon svg {
        width: 17px !important;
        height: 17px !important;
        stroke: #B47A45 !important;
        stroke-width: 1.45 !important;
    }
    /* =====================================================
       BROJ 01–05
    ===================================================== */
    #how .how-step-number {
        order: 2 !important;
        position: static !important;
        display: block !important;
        margin: 0 0 5px !important;
        padding: 0 !important;
        font-size: 8px !important;
        line-height: 1 !important;
        font-weight: 600 !important;
        letter-spacing: .08em !important;
        color: #B47A45 !important;
    }
    /* =====================================================
       NASLOV
    ===================================================== */
    #how .how-step h3 {
        order: 3 !important;
        margin: 0 !important;
        width: 100% !important;
        font-size: 10px !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
        text-align: center !important;
        color: #1e1b18 !important;
    }
    /* =====================================================
       OPIS
    ===================================================== */
    #how .how-step p {
        order: 4 !important;
        width: 100% !important;
        margin: 8px 0 0 !important;
        font-size: 7.5px !important;
        line-height: 1.45 !important;
        text-align: center !important;
        color: rgba(30,27,24,.48) !important;
    }
    /* =====================================================
       LINIJE IZMEĐU KRUGOVA — HORIZONTALNO
    ===================================================== */
    #how .how-step-line {
        position: relative !important;
        width: 24px !important;
        height: 62px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        z-index: 1 !important;
    }
    #how .how-step-line span {
        position: absolute !important;
        top: 50% !important;
        left: -18px !important;
        width: 60px !important;
        height: 1px !important;
        transform: translateY(-50%) !important;
        background:
            rgba(180,122,69,.20) !important;
    }
    /* UGASI STARE VERTIKALNE ANIMACIJE / ROMBOVE */
    #how .how-step-line span::before,
    #how .how-step-line span::after {
        display: none !important;
        content: none !important;
    }
}
/* 
   MOBILE — KAKO FUNKCIONIŠE
   DESKTOP ESTETIKA, PRILAGOĐENA TELEFONU
*/
@media (max-width: 600px) {
    #how {
        padding: 64px 0 72px !important;
        overflow: hidden !important;
    }
    #how .container {
        overflow: visible !important;
    }
    #how .how-heading {
        margin-bottom: 42px !important;
        text-align: center !important;
    }
    #how .how-heading h2 {
        font-size: 42px !important;
        line-height: .96 !important;
    }
    #how .how-heading p {
        max-width: 300px !important;
        margin: 16px auto 0 !important;
        font-size: 11px !important;
        line-height: 1.6 !important;
    }
    /* cela lista */
    #how .how-steps {
        position: relative !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* jedan korak */
    #how .how-step {
        position: relative !important;
        width: 100% !important;
        min-height: 116px !important;
        display: grid !important;
        grid-template-columns:
            76px 1fr !important;
        grid-template-areas:
            "icon number"
            "icon title"
            "icon text" !important;
        column-gap: 18px !important;
        row-gap: 4px !important;
        align-items: center !important;
        padding: 16px 6px !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        text-align: left !important;
    }
    /* krug */
    #how .how-step-icon {
        grid-area: icon !important;
        position: relative !important;
        width: 64px !important;
        height: 64px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background:
            rgba(255,255,255,.42) !important;
        border:
            1px solid rgba(180,122,69,.18) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.9),
            0 8px 24px rgba(45,30,18,.05) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        z-index: 3 !important;
    }
    #how .how-step-icon svg {
        width: 18px !important;
        height: 18px !important;
        stroke: #B47A45 !important;
        stroke-width: 1.45 !important;
    }
    /* broj */
    #how .how-step-number {
        grid-area: number !important;
        position: static !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 8px !important;
        line-height: 1 !important;
        letter-spacing: .08em !important;
        font-weight: 600 !important;
        color: #B47A45 !important;
        text-align: left !important;
    }
    /* naslov */
    #how .how-step h3 {
        grid-area: title !important;
        width: 100% !important;
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
        text-align: left !important;
        color: #1f1b18 !important;
    }
    /* opis */
    #how .how-step p {
        grid-area: text !important;
        width: 100% !important;
        max-width: 250px !important;
        margin: 1px 0 0 !important;
        font-size: 9px !important;
        line-height: 1.5 !important;
        text-align: left !important;
        color: rgba(30,27,24,.47) !important;
    }
    /* linije između koraka */
    #how .how-step-line {
        position: relative !important;
        width: 64px !important;
        height: 34px !important;
        margin-left: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #how .how-step-line span {
        position: relative !important;
        width: 1px !important;
        height: 34px !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        background:
            rgba(180,122,69,.18) !important;
    }
    /* skroz ugasi stare animacije */
    #how .how-step-line span::before,
    #how .how-step-line span::after {
        content: none !important;
        display: none !important;
    }
}
/* 
   MOBILE — JEDNA GLASS LINIJA KROZ SVIH 5 KRUGOVA
*/
@media (max-width: 600px) {
    #how .how-steps {
        position: relative !important;
        isolation: isolate !important;
    }
    /* SKLONI STARE MALE ISEČENE LINIJE */
    #how .how-step-line {
        display: none !important;
    }
    /* JEDNA NEPREKIDNA GLASS LINIJA */
    #how .how-steps::before {
        content: "" !important;
        position: absolute !important;
        /* centar krugova */
        left: 38px !important;
        /* od centra prvog do centra poslednjeg */
        top: 48px !important;
        bottom: 48px !important;
        width: 2px !important;
        transform: translateX(-50%) !important;
        background:
            linear-gradient(
                180deg,
                rgba(180,122,69,.04) 0%,
                rgba(180,122,69,.22) 12%,
                rgba(255,255,255,.85) 30%,
                rgba(180,122,69,.25) 50%,
                rgba(255,255,255,.85) 70%,
                rgba(180,122,69,.22) 88%,
                rgba(180,122,69,.04) 100%
            ) !important;
        border-left:
            1px solid rgba(255,255,255,.72) !important;
        box-shadow:
            0 0 8px rgba(255,255,255,.90),
            0 0 14px rgba(180,122,69,.10) !important;
        opacity: 1 !important;
        z-index: 0 !important;
        pointer-events: none !important;
    }
    /* svaki korak */
    #how .how-step {
        position: relative !important;
        z-index: 1 !important;
        margin-bottom: 24px !important;
    }
    #how .how-step:last-of-type {
        margin-bottom: 0 !important;
    }
    /* KRUGOVI IDU PREKO LINIJE */
    #how .how-step-icon {
        position: relative !important;
        z-index: 5 !important;
        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,.74),
                rgba(255,255,255,.34)
            ) !important;
        border:
            1px solid rgba(255,255,255,.92) !important;
        -webkit-backdrop-filter:
            blur(22px)
            saturate(150%) !important;
        backdrop-filter:
            blur(22px)
            saturate(150%) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.98),
            0 0 0 1px rgba(180,122,69,.08),
            0 10px 28px rgba(55,40,25,.055) !important;
    }
    /* mali sjaj na ivici kruga */
    #how .how-step-icon::after {
        content: "" !important;
        position: absolute !important;
        inset: 3px !important;
        border-radius: 50% !important;
        border-top:
            1px solid rgba(255,255,255,.85) !important;
        pointer-events: none !important;
    }
}
/* 
   MOBILE — VRATI GLASS LINIJE IZMEĐU KRUGOVA
*/
@media (max-width: 600px) {
    /* ukloni prethodnu pseudo-liniju ako postoji */
    #how .how-steps::before {
        display: none !important;
        content: none !important;
    }
    /* VRATI POSTOJEĆE LINE ELEMENTE */
    #how .how-step-line {
        display: flex !important;
        position: relative !important;
        width: 76px !important;
        height: 54px !important;
        margin: 0 !important;
        margin-left: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
        z-index: 2 !important;
    }
    /* GLAVNA VERTIKALNA GLASS LINIJA */
    #how .how-step-line > span {
        display: block !important;
        position: relative !important;
        width: 1px !important;
        height: 54px !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        transform: none !important;
        background:
            linear-gradient(
                180deg,
                rgba(180,122,69,.12) 0%,
                rgba(180,122,69,.35) 50%,
                rgba(180,122,69,.12) 100%
            ) !important;
        box-shadow:
            0 0 6px rgba(255,255,255,.9),
            0 0 10px rgba(180,122,69,.12) !important;
        opacity: 1 !important;
    }
    /* UGASI STARE ROMBOVE I ANIMACIJE */
    #how .how-step-line > span::before,
    #how .how-step-line > span::after {
        display: none !important;
        content: none !important;
    }
    /* KRUGOVI IZNAD LINIJE */
    #how .how-step-icon {
        position: relative !important;
        z-index: 5 !important;
    }
}
/* 
   MOBILE — SIGURNA LINIJA IZMEĐU KRUGOVA
*/
@media (max-width: 600px) {
    /* stare line elemente više ne koristimo */
    #how .how-step-line {
        height: 54px !important;
        display: block !important;
        visibility: hidden !important;
    }
    #how .how-step {
        position: relative !important;
        overflow: visible !important;
        isolation: isolate !important;
    }
    /* =====================================================
       LINIJA DIREKTNO OD KRUGA DO SLEDEĆEG KRUGA
    ===================================================== */
    #how .how-step:not(:last-child)::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        /* TAČNO CENTAR KRUGA */
        left: 38px !important;
        top: 48px !important;
        /* prolazi kroz prazninu do sledećeg kruga */
        width: 2px !important;
        height: calc(100% + 54px) !important;
        transform: translateX(-50%) !important;
        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.95) 0%,
                rgba(180,122,69,.28) 20%,
                rgba(180,122,69,.38) 50%,
                rgba(180,122,69,.28) 80%,
                rgba(255,255,255,.95) 100%
            ) !important;
        box-shadow:
            0 0 0 1px rgba(255,255,255,.28),
            0 0 8px rgba(180,122,69,.15),
            0 0 12px rgba(255,255,255,.70) !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: -1 !important;
        pointer-events: none !important;
    }
    /* KRUG MORA DA BUDE PREKO LINIJE */
    #how .how-step-icon {
        position: relative !important;
        z-index: 5 !important;
        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,.78),
                rgba(255,255,255,.38)
            ) !important;
        border:
            1px solid rgba(180,122,69,.17) !important;
        -webkit-backdrop-filter:
            blur(20px)
            saturate(145%) !important;
        backdrop-filter:
            blur(20px)
            saturate(145%) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.95),
            0 7px 22px rgba(60,42,24,.05) !important;
    }
    /* da sadržaj ne prekrije liniju nekim backgroundom */
    #how .how-step,
    #how .how-steps {
        background: transparent !important;
    }
}
/* 
   MOBILE — HOW IT WORKS / DESIGN 01 MODERN TIMELINE
   SAMO TELEFON
*/
@media (max-width: 600px) {
    /* SEKCIJA */
    #how.how-section {
        position: relative !important;
        padding: 64px 0 76px !important;
        overflow: hidden !important;
    }
    #how .container {
        width: calc(100% - 32px) !important;
        margin: 0 auto !important;
        overflow: visible !important;
    }
    /* =========================
       NASLOV
    ========================== */
    #how .how-heading {
        margin-bottom: 42px !important;
        text-align: center !important;
    }
    #how .how-heading .eyebrow {
        display: block !important;
        margin-bottom: 11px !important;
        font-size: 8px !important;
        line-height: 1 !important;
        letter-spacing: .16em !important;
    }
    #how .how-heading h2 {
        margin: 0 !important;
        font-size: clamp(40px, 11vw, 49px) !important;
        line-height: .95 !important;
        letter-spacing: -.045em !important;
    }
    #how .how-heading h2 em {
        display: block !important;
    }
    #how .how-heading p {
        max-width: 300px !important;
        margin: 17px auto 0 !important;
        font-size: 11px !important;
        line-height: 1.6 !important;
    }
    /* =========================
       GLAVNI TIMELINE
    ========================== */
    #how .how-steps {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    /* =========================
       STEP
    ========================== */
    #how .how-step {
        position: relative !important;
        width: 100% !important;
        min-height: 130px !important;
        display: grid !important;
        grid-template-columns: 84px 1fr !important;
        grid-template-areas:
            "icon number"
            "icon title"
            "icon text" !important;
        column-gap: 18px !important;
        row-gap: 5px !important;
        align-items: center !important;
        padding: 14px 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        overflow: visible !important;
        text-align: left !important;
    }
    /* =========================
       GLASS KRUG
    ========================== */
    #how .how-step-icon {
        grid-area: icon !important;
        position: relative !important;
        width: 70px !important;
        height: 70px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.78),
                rgba(255,255,255,.34)
            ) !important;
        border:
            1px solid rgba(180,122,69,.16) !important;
        -webkit-backdrop-filter:
            blur(22px)
            saturate(150%) !important;
        backdrop-filter:
            blur(22px)
            saturate(150%) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.96),
            0 7px 24px rgba(60,42,24,.055),
            0 0 20px rgba(180,122,69,.035) !important;
        z-index: 4 !important;
    }
    /* unutrašnji glass highlight */
    #how .how-step-icon::after {
        content: "" !important;
        position: absolute !important;
        inset: 4px !important;
        border-radius: 50% !important;
        border-top:
            1px solid rgba(255,255,255,.82) !important;
        pointer-events: none !important;
    }
    #how .how-step-icon svg {
        width: 19px !important;
        height: 19px !important;
        stroke: #B47A45 !important;
        stroke-width: 1.45 !important;
    }
    /* =========================
       BROJ
    ========================== */
    #how .how-step-number {
        grid-area: number !important;
        position: static !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 8px !important;
        line-height: 1 !important;
        font-weight: 600 !important;
        letter-spacing: .10em !important;
        color: #B47A45 !important;
        text-align: left !important;
    }
    /* =========================
       NASLOV STEP-A
    ========================== */
    #how .how-step h3 {
        grid-area: title !important;
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 1.28 !important;
        font-weight: 600 !important;
        color: #201c18 !important;
        text-align: left !important;
    }
    /* =========================
       OPIS
    ========================== */
    #how .how-step p {
        grid-area: text !important;
        width: 100% !important;
        max-width: 245px !important;
        margin: 0 !important;
        font-size: 9px !important;
        line-height: 1.5 !important;
        color: rgba(32,28,24,.46) !important;
        text-align: left !important;
    }
    /* =====================================================
       CONNECTOR LINIJE
    ===================================================== */
    #how .how-step-line {
        position: relative !important;
        display: block !important;
        visibility: visible !important;
        width: 70px !important;
        height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    #how .how-step-line > span {
        display: block !important;
        visibility: visible !important;
        position: absolute !important;
        left: 35px !important;
        top: -6px !important;
        width: 1px !important;
        height: 50px !important;
        transform: none !important;
        background:
            linear-gradient(
                180deg,
                rgba(180,122,69,.12) 0%,
                rgba(180,122,69,.48) 45%,
                rgba(180,122,69,.16) 100%
            ) !important;
        box-shadow:
            0 0 6px rgba(255,255,255,.8),
            0 0 10px rgba(180,122,69,.08) !important;
        opacity: 1 !important;
    }
    /* mali diamond kao na desktopu */
    #how .how-step-line > span::after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        bottom: 0 !important;
        width: 5px !important;
        height: 5px !important;
        transform:
            translate(-50%, 50%)
            rotate(45deg) !important;
        border:
            1px solid rgba(167,124,67,.55) !important;
        background:
            rgba(246,242,235,.90) !important;
    }
    /* ukloni stare animacije */
    #how .how-step-line > span::before {
        content: none !important;
        display: none !important;
    }
    /* ukloni eventualne stare pseudo linije */
    #how .how-step::before,
    #how .how-step::after,
    #how .how-steps::before,
    #how .how-steps::after {
        content: none !important;
        display: none !important;
    }
}
/* 
   DESIGN 01 — FINO PODEŠAVANJE
   manji razmak + jedna linija + glass krugovi
*/
@media (max-width: 600px) {
    /* =========================================
       1. MANJI RAZMAK IZMEĐU KORAKA
    ========================================= */
    #how .how-step {
        min-height: 108px !important;
        padding: 8px 0 !important;
        grid-template-columns: 78px 1fr !important;
        column-gap: 14px !important;
        row-gap: 4px !important;
    }
    #how .how-step-line {
        width: 64px !important;
        height: 22px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* =========================================
       2. UKLONI SVE STARE / DUPLE LINIJE
    ========================================= */
    #how .how-step::before,
    #how .how-step::after,
    #how .how-steps::before,
    #how .how-steps::after,
    #how .how-step-icon::before {
        content: none !important;
        display: none !important;
    }
    /* =========================================
       3. JEDNA JEDINA LINIJA IZMEĐU KRUGOVA
    ========================================= */
    #how .how-step-line {
        display: block !important;
        visibility: visible !important;
        position: relative !important;
        overflow: visible !important;
    }
    #how .how-step-line > span {
        display: block !important;
        visibility: visible !important;
        position: absolute !important;
        left: 35px !important;
        top: -10px !important;
        width: 1px !important;
        height: 42px !important;
        margin: 0 !important;
        transform: none !important;
        border: none !important;
        background:
            linear-gradient(
                180deg,
                rgba(180,122,69,.08) 0%,
                rgba(180,122,69,.32) 50%,
                rgba(180,122,69,.08) 100%
            ) !important;
        box-shadow: none !important;
        opacity: 1 !important;
    }
    /* skloni romb — da bude skroz čista linija */
    #how .how-step-line > span::before,
    #how .how-step-line > span::after {
        content: none !important;
        display: none !important;
    }
    /* =========================================
       4. PRAVI GLASS KRUGOVI
    ========================================= */
    #how .how-step-icon {
        width: 66px !important;
        height: 66px !important;
        position: relative !important;
        margin: 0 !important;
        border-radius: 50% !important;
        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.46) 0%,
                rgba(255,255,255,.17) 55%,
                rgba(255,255,255,.08) 100%
            ) !important;
        border:
            1px solid rgba(255,255,255,.88) !important;
        outline:
            1px solid rgba(180,122,69,.08) !important;
        -webkit-backdrop-filter:
            blur(20px)
            saturate(155%) !important;
        backdrop-filter:
            blur(20px)
            saturate(155%) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.95),
            inset 0 -1px 0 rgba(180,122,69,.06),
            0 8px 22px rgba(55,39,24,.055),
            0 0 18px rgba(255,255,255,.40) !important;
        z-index: 5 !important;
    }
    /* STAKLENI REFLECTION UNUTAR KRUGA */
    #how .how-step-icon::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        top: 6px !important;
        left: 10px !important;
        width: 32px !important;
        height: 17px !important;
        border-radius: 50% !important;
        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.72),
                rgba(255,255,255,0)
            ) !important;
        filter: blur(.3px) !important;
        opacity: .62 !important;
        pointer-events: none !important;
    }
    /* IKONICA IZNAD GLASS REFLECTIONA */
    #how .how-step-icon svg {
        position: relative !important;
        z-index: 2 !important;
        width: 18px !important;
        height: 18px !important;
        stroke: #B47A45 !important;
        stroke-width: 1.4 !important;
    }
}
/* 
   MOBILE FOOTER — CONTACT KARTICE
   manje + razmak između + glass
*/
@media (max-width: 600px) {
    /* WRAPPER ZA KONTAKT KARTICE */
    footer .footer-contact-grid,
    footer .footer-contact-links {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        margin-top: 14px !important;
        padding: 0 !important;
    }
    /* INSTAGRAM + EMAIL KARTICA */
    footer .footer-contact-card,
    footer .footer-contact-link {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 66px !important;
        height: auto !important;
        padding: 12px 13px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,.46),
                rgba(255,255,255,.18)
            ) !important;
        border:
            1px solid rgba(255,255,255,.72) !important;
        -webkit-backdrop-filter:
            blur(18px)
            saturate(140%) !important;
        backdrop-filter:
            blur(18px)
            saturate(140%) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.82),
            0 6px 18px rgba(40,30,20,.035) !important;
    }
    /* mali naziv INSTAGRAM / EMAIL */
    footer .footer-contact-card small,
    footer .footer-contact-link small {
        display: block !important;
        margin-bottom: 5px !important;
        font-size: 6px !important;
        line-height: 1 !important;
        letter-spacing: .10em !important;
        opacity: .55 !important;
    }
    /* @sefkomoda.rs / email */
    footer .footer-contact-card strong,
    footer .footer-contact-link strong {
        display: block !important;
        max-width: calc(100% - 20px) !important;
        font-size: 9px !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
    /* STRELICA */
    footer .footer-contact-card svg,
    footer .footer-contact-link svg {
        width: 13px !important;
        height: 13px !important;
    }
}
/* 
   MOBILE FOOTER — KONTAKT JEDAN ISPOD DRUGOG
*/
@media (max-width: 600px) {
    footer .footer-contact-column {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    footer .footer-contact-column > .footer-label {
        margin-bottom: 4px !important;
    }
    footer .footer-social-card,
    footer .footer-email-card {
        width: 100% !important;
        max-width: 100% !important;
        height: 58px !important;
        min-height: 58px !important;
        margin: 0 !important;
        padding: 10px 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
        border-radius: 14px !important;
        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,.42),
                rgba(255,255,255,.16)
            ) !important;
        border:
            1px solid rgba(255,255,255,.72) !important;
        backdrop-filter:
            blur(18px)
            saturate(145%) !important;
        -webkit-backdrop-filter:
            blur(18px)
            saturate(145%) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.82),
            0 5px 16px rgba(45,32,20,.035) !important;
    }
    footer .footer-social-card > div,
    footer .footer-email-card > div {
        min-width: 0 !important;
    }
    footer .footer-social-card small,
    footer .footer-email-card small {
        display: block !important;
        margin-bottom: 3px !important;
        font-size: 6px !important;
        line-height: 1 !important;
        letter-spacing: .10em !important;
    }
    footer .footer-social-card strong,
    footer .footer-email-card strong {
        display: block !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
    }
    footer .footer-social-card > span,
    footer .footer-email-card > span {
        font-size: 13px !important;
        margin-left: 10px !important;
        flex-shrink: 0 !important;
    }
}
/* MOBILE — MANJE KONTAKT KARTICE */
@media (max-width: 600px) {
    footer .footer-contact-column {
        gap: 7px !important;
    }
    footer .footer-social-card,
    footer .footer-email-card {
        width: 82% !important;
        max-width: 310px !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 7px 11px !important;
        border-radius: 11px !important;
        align-self: flex-start !important;
    }
    footer .footer-social-card small,
    footer .footer-email-card small {
        font-size: 5px !important;
        margin-bottom: 3px !important;
    }
    footer .footer-social-card strong,
    footer .footer-email-card strong {
        font-size: 8px !important;
    }
    footer .footer-social-card > span,
    footer .footer-email-card > span {
        font-size: 11px !important;
    }
}
/* 
   MOBILE FOOTER — FINAL CONTACT SIZE
*/
@media (max-width: 600px) {
    /* KONTAKT KARTICE */
    footer .footer-social-card,
    footer .footer-email-card {
        /* odlepi od leve ivice */
        margin-left: 16px !important;
        /* malo uže */
        width: calc(100% - 48px) !important;
        max-width: 285px !important;
        /* ostaju niske i elegantne */
        height: 52px !important;
        min-height: 52px !important;
        padding: 9px 13px !important;
        border-radius: 12px !important;
    }
    /* INSTAGRAM / EMAIL */
    footer .footer-social-card small,
    footer .footer-email-card small {
        font-size: 6px !important;
        line-height: 1 !important;
        margin-bottom: 5px !important;
        letter-spacing: .09em !important;
    }
    /* GLAVNI TEKST — VEĆI */
    footer .footer-social-card strong,
    footer .footer-email-card strong {
        font-size: 9.5px !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
    }
    /* STRELICA MALO VEĆA */
    footer .footer-social-card > span,
    footer .footer-email-card > span {
        font-size: 14px !important;
        margin-right: 1px !important;
    }
}
/* =========================================
   MOBILE NAVBAR — SAMO IKONICA KORPE
========================================= */
@media (max-width: 600px) {
    /* dugme / okvir korpe */
    .cart-btn,
    .cart-button,
    #cartBtn,
    #cartButton {
        background: transparent !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* ukloni eventualni okvir preko pseudo elemenata */
    .cart-btn::before,
    .cart-btn::after,
    .cart-button::before,
    .cart-button::after,
    #cartBtn::before,
    #cartBtn::after,
    #cartButton::before,
    #cartButton::after {
        content: none !important;
        display: none !important;
    }
    /* sama ikonica kese */
    .cart-btn svg,
    .cart-button svg,
    #cartBtn svg,
    #cartButton svg {
        width: 21px !important;
        height: 21px !important;
        stroke: #111 !important;
        fill: none !important;
        display: block !important;
    }
}
/* 
   MOBILE NAVBAR — KORPA BEZ OKVIRA
   OSTAVLJA SAMO IKONICU KESE
*/
@media (max-width: 600px) {
    .nav-cart-button {
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .nav-cart-button::before,
    .nav-cart-button::after {
        content: none !important;
        display: none !important;
    }
}
/* MOBILE — KORPA VEĆA + MALO ULEVO */
@media (max-width: 600px) {
    .nav-cart-button {
        transform: translateX(-8px) !important;
    }
    .nav-cart-button svg {
        width: 23px !important;
        height: 23px !important;
    }
}
/* 
   MOBILE ANATOMY — HOTSPOTS MORAJU PRIMATI TOUCH
   SAMO TELEFON
*/
@media (max-width: 600px) {
    html body #anatomy .anatomy-callout,
    html body #anatomy .anatomy-callout-copy,
    html body #anatomy .anatomy-callout-copy > span {
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }
    html body #anatomy .anatomy-callout {
        cursor: pointer !important;
        z-index: 100 !important;
    }
}
/* 
   MOBILE ANATOMY — CLICK LAYER FIX
   SAMO TELEFON
*/
@media (max-width: 600px) {
    html body #anatomy .anatomy-callout {
        pointer-events: auto !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
        z-index: 999 !important;
    }
    html body #anatomy .anatomy-callout-copy,
    html body #anatomy .anatomy-callout-copy > span {
        pointer-events: none !important;
    }
    body > #mobileAnatomyOverlay {
        pointer-events: none !important;
    }
    body > #mobileAnatomyOverlay.is-open {
        pointer-events: auto !important;
    }
    body > #mobileAnatomySheet {
        pointer-events: none !important;
    }
    body > #mobileAnatomySheet.is-open {
        pointer-events: auto !important;
    }
}
/* 
   FINAL MOBILE ANATOMY POPUP FIX
   SAMO TELEFON — DESKTOP/LAPTOP NETAKNUT
*/
@media screen and (max-width: 600px) {
    body #mobileAnatomyOverlay,
    body #mobileAnatomySheet {
        display: block !important;
    }
    body #mobileAnatomyOverlay {
        pointer-events: none !important;
    }
    body #mobileAnatomyOverlay.is-open {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    body #mobileAnatomySheet {
        pointer-events: none !important;
    }
    body #mobileAnatomySheet.is-open {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }
    html body #anatomy .anatomy-callout {
        pointer-events: auto !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        z-index: 9999 !important;
    }
    html body #anatomy .anatomy-callout-copy,
    html body #anatomy .anatomy-callout-copy > span {
        pointer-events: none !important;
    }
}
/* 
   MOBILE ANATOMY POPUP — SAMO BLUR GLASS IZGLED
   NE MENJA RASPORED NI POZICIJU
*/
@media (max-width: 600px) {
    body #mobileAnatomySheet {
        background:
            rgba(255, 255, 255, .28) !important;
        backdrop-filter:
            blur(24px)
            saturate(135%) !important;
        -webkit-backdrop-filter:
            blur(24px)
            saturate(135%) !important;
        border:
            1px solid rgba(255, 255, 255, .72) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .88),
            inset 0 -1px 0 rgba(255, 255, 255, .20),
            0 14px 34px rgba(25, 22, 20, .10) !important;
    }
}
/* 
   MOBILE — SAKRIJ CHAT DOK JE ANATOMY POPUP OTVOREN
*/
@media (max-width: 600px) {
    body:has(#mobileAnatomySheet.is-open) .ai-chat-toggle {
        display: none !important;
    }
}
@media (max-width: 600px) {
    /* SAMO 01 — pomeri malo ulevo, ništa drugo */
    html body #anatomy .anatomy-callout-rfid {
        transform:
            translate(
                calc(50vw - 42px),
                88px
            ) !important;
    }
}
/* 
   MOBILE — UKLONI HORIZONTALNI PROSTOR DESNO
   SAMO TELEFON
*/
@media (max-width: 600px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: clip !important;
    }
    /* navbar ne sme biti širi od ekrana */
    html body .site-header,
    html body .site-header .navbar {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    html body .site-header .navbar {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }
    /* glavni sadržaj takođe zaključaj na širinu telefona */
    html body main,
    html body .signature-hero,
    html body .signature-shell,
    html body .signature-main {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}
@media (max-width: 600px) {
    html body .signature-shop-label {
        margin-bottom: 32px !important;
    }
}
@media screen and (max-width: 600px) {
    /* PODIGNI CEO GORNJI HERO DEO */
    html body section.signature-hero {
        padding-top: 15px !important;
    }
    html body section.signature-hero .signature-main {
        padding-top: 0 !important;
    }
    /* DONJI SHOP VRATI NA ISTO MESTO — NJEGA NE DIRAMO */
    html body section.signature-hero .signature-shop-wrap {
        margin-top: 69px !important;
    }
}
@media (max-width: 600px) {
    html body .signature-counter {
        bottom: -18px !important;
    }
}
@media (max-width: 600px) {
    /* PODIGNI NASLOV + CEO CONFIGURATOR */
    html body .signature-shop-wrap {
        position: relative !important;
        top: -55px !important;
        margin-bottom: -55px !important;
    }
}
@media (max-width: 600px) {
    /* SAMO KARTICA: BOJE + DIMENZIJE + CENA */
    html body .signature-shop-wrap .signature-configurator {
        position: relative !important;
        top: -22px !important;
        margin-bottom: -22px !important;
    }
}
@media (max-width: 600px) {
    html body .signature-price strong {
        font-weight: 650 !important;
        letter-spacing: 0.015em !important;
        font-variant-numeric: tabular-nums !important;
        line-height: 0.95 !important;
    }
    html body .signature-price > div {
        gap: 9px !important;
        align-items: baseline !important;
    }
    html body .signature-price small {
        font-weight: 600 !important;
        letter-spacing: 0.04em !important;
    }
}
@media (max-width: 600px) {
    /* =========================================
       NAVBAR — VIDLJIV
    ========================================= */
    html body #siteHeader {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 67px !important;
        z-index: 9999 !important;
        /* providan glass */
        background: rgba(255, 255, 255, .18) !important;
        backdrop-filter:
            blur(18px)
            saturate(135%) !important;
        -webkit-backdrop-filter:
            blur(18px)
            saturate(135%) !important;
        border: 0 !important;
        box-shadow:
            0 1px 0 rgba(255,255,255,.28) !important;
        transform: translateY(0) !important;
        opacity: 1 !important;
        transition:
            transform .42s cubic-bezier(.22,1,.36,1),
            opacity .28s ease !important;
        will-change: transform, opacity;
    }
    html body #siteHeader .navbar {
        width: 100% !important;
        height: 67px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 12px 22px 19px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    html body #siteHeader .desktop-nav,
    html body #siteHeader .mobile-menu-button {
        display: none !important;
    }
    /* =========================================
       SKROL DOLE — CEO NAVBAR ODE GORE
    ========================================= */
    html body #siteHeader.aura-nav-hidden {
        transform: translateY(-80px) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}
@media (max-width: 600px) {
    html body #siteHeader {
        border: none !important;
        border-top: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
        outline: none !important;
    }
    html body #siteHeader::before,
    html body #siteHeader::after,
    html body #siteHeader .navbar::before,
    html body #siteHeader .navbar::after {
        content: none !important;
        display: none !important;
        border: none !important;
        box-shadow: none !important;
    }
}
@media (max-width: 600px) {
    html body #siteHeader {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 67px !important;
        z-index: 9999 !important;
        background: transparent !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        opacity: 1 !important;
        transition:
            transform .35s ease,
            opacity .25s ease !important;
    }
    html body #siteHeader .navbar {
        height: 67px !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 12px 22px 19px !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    html body #siteHeader::before,
    html body #siteHeader::after,
    html body #siteHeader .navbar::before,
    html body #siteHeader .navbar::after {
        content: none !important;
        display: none !important;
    }
    html body #siteHeader .desktop-nav,
    html body #siteHeader .mobile-menu-button {
        display: none !important;
    }
    html body #siteHeader.aura-nav-hidden {
        transform: translateY(-80px) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}
@media (max-width: 600px) {
    html body #siteHeader {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 54px !important;
        z-index: 9999 !important;
        /* mnogo providnije */
        background: rgba(255, 255, 255, 0.07) !important;
        -webkit-backdrop-filter:
            blur(18px) saturate(135%) !important;
        backdrop-filter:
            blur(18px) saturate(135%) !important;
        border: 0 !important;
        border-bottom:
            1px solid rgba(255,255,255,.10) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.15),
            0 5px 20px rgba(40,35,28,.015) !important;
        padding: 0 !important;
        /* STALNO PRISUTAN */
        transform: none !important;
    }
    html body #siteHeader .navbar {
        width: calc(100% - 44px) !important;
        height: 54px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    /* malo manji logo */
    html body #siteHeader .navbar-logo-img {
        width: 30px !important;
        height: 30px !important;
    }
    /* malo manja korpa */
    html body #siteHeader .nav-cart-button {
        width: 38px !important;
        height: 38px !important;
    }
    html body #siteHeader .nav-cart-button svg {
        width: 16px !important;
        height: 16px !important;
    }
    /* NE SME DA NESTANE PRI SKROLU */
    html body #siteHeader.aura-nav-hidden,
    html body #siteHeader.is-hidden {
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    /* NASLOV POČINJE ISPOD NAVBARA */
    html body .signature-hero {
        padding-top: 54px !important;
    }
    html body .signature-main {
        padding-top: 22px !important;
    }
}
/* 
   MOBILE NAVBAR — IZNAD SAJTA + STICKY
   SAMO TELEFON
*/
@media (max-width: 600px) {
    html body #siteHeader {
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 54px !important;
        z-index: 9999 !important;
        /* vrlo providan glass */
        background: rgba(255,255,255,.002) !important;
-webkit-backdrop-filter: blur(12px) saturate(115%) !important;
backdrop-filter: blur(12px) saturate(115%) !important;
        /* samo tanka linija dole */
        border: 0 !important;
        border-bottom:
            1px solid rgba(55,50,45,.16) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.12) !important;
        padding: 0 !important;
        transform: none !important;
        opacity: 1 !important;
    }
    html body #siteHeader .navbar {
        width: calc(100% - 44px) !important;
        height: 54px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    /* samo logo + korpa */
    html body #siteHeader .desktop-nav,
    html body #siteHeader .mobile-menu-button {
        display: none !important;
    }
    html body #siteHeader .navbar-brand {
        margin: 0 !important;
    }
    html body #siteHeader .navbar-logo-img {
        width: 31px !important;
        height: 31px !important;
    }
    html body #siteHeader .nav-actions {
        margin: 0 0 0 auto !important;
    }
    /* KORPA — BEZ OKVIRA, SAMO VEĆA IKONICA */
    html body #siteHeader .nav-cart-button {
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    html body #siteHeader .nav-cart-button svg {
        width: 21px !important;
        height: 21px !important;
        stroke-width: 1.7 !important;
    }
    /* ako stari JS pokušava da sakrije navbar — NE DAJ MU */
    html body #siteHeader.is-hidden,
    html body #siteHeader.aura-nav-hidden {
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    /* pošto je navbar sada U FLOW-U,
       ne treba više 64px praznog prostora iz starog koda */
    html body .signature-hero {
        padding-top: 0 !important;
    }
    html body .signature-main {
        padding-top: 24px !important;
    }
}
/* MANJI RAZMAK IZMEĐU HOW I ANATOMY — SAMO TELEFON */
@media (max-width: 600px) {
    .how-section {
        padding-bottom: 20px !important;
    }
    .anatomy-section {
        padding-top: 38px !important;
    }
}
/* 
   FINAL — RAZMAK HOW → ANATOMY
   SAMO TELEFON
*/
@media (max-width: 600px) {
    html body #how.how-section {
        padding-bottom: 24px !important;
        margin-bottom: 0 !important;
    }
    html body #anatomy.anatomy-section {
        padding-top: 30px !important;
        margin-top: 0 !important;
    }
}
/* 
   MOBILE ANATOMY — FINAL REFERENCE LOOK
   SAMO TELEFON
*/
@media (max-width: 600px) {
    /* =========================================
       1. KOMODICA TAČNO U CENTAR
    ========================================= */
    html body #anatomy .anatomy-stage {
        position: relative !important;
        width: 100% !important;
        max-width: 430px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        left: 0 !important;
        right: 0 !important;
        overflow: visible !important;
    }
    html body #anatomy
    .anatomy-stage
    .anatomy-product {
        position: absolute !important;
        /* BITNO — 50%, NE 50vw */
        left: 50% !important;
        right: auto !important;
        top: 50% !important;
        margin: 0 !important;
        transform:
            translate(-50%, -50%) !important;
    }
    /* =========================================
       2. HOTSPOT KRUGOVI
    ========================================= */
    html body #anatomy .anatomy-callout {
        overflow: visible !important;
    }
    html body #anatomy
    .anatomy-callout
    .anatomy-callout-copy {
        position: relative !important;
        overflow: visible !important;
        box-shadow:
            0 4px 15px rgba(30,20,12,.12),
            0 0 0 1px rgba(180,122,69,.12),
            inset 0 1px 0 rgba(255,255,255,.16) !important;
        animation:
            anatomyHotspotPulse 2.8s ease-in-out infinite !important;
    }
    /* =========================================
       3. MALA SVETLEĆA TAČKA PORED BROJA
    ========================================= */
    html body #anatomy
    .anatomy-callout
    .anatomy-callout-copy::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        width: 5px !important;
        height: 5px !important;
        right: -10px !important;
        top: 50% !important;
        transform:
            translateY(-50%) !important;
        border-radius: 50% !important;
        background:
            #d39a62 !important;
        box-shadow:
            0 0 0 3px rgba(211,154,98,.12),
            0 0 7px rgba(211,154,98,.85),
            0 0 14px rgba(211,154,98,.45) !important;
        opacity: 1 !important;
        animation:
            anatomyDotPulse 1.8s ease-in-out infinite !important;
        pointer-events: none !important;
    }
    /* malo različit ritam da ne pulsiraju svi isto */
    html body #anatomy
    .anatomy-callout-led
    .anatomy-callout-copy {
        animation-delay: .25s !important;
    }
    html body #anatomy
    .anatomy-callout-soft
    .anatomy-callout-copy {
        animation-delay: .5s !important;
    }
    html body #anatomy
    .anatomy-callout-alcantara
    .anatomy-callout-copy {
        animation-delay: .75s !important;
    }
    html body #anatomy
    .anatomy-callout-board
    .anatomy-callout-copy {
        animation-delay: 1s !important;
    }
    /* =========================================
       4. TEKST ISPOD KOMODE
    ========================================= */
    html body #anatomy .mobile-anatomy-hint {
        display: block !important;
        width: 100% !important;
        margin:
            6px auto
            0 !important;
        padding:
            0 8px !important;
    }
    html body #anatomy .mobile-anatomy-touch {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 9px !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
        font-weight: 500 !important;
        color:
            rgba(30,26,22,.72) !important;
        text-align: center !important;
    }
    html body #anatomy .mobile-touch-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 20px !important;
        color: #B47A45 !important;
        transform:
            rotate(-8deg) !important;
    }
    /* =========================================
       5. 01 -------- 05
    ========================================= */
    html body #anatomy .mobile-anatomy-progress {
        width: 100% !important;
        display: grid !important;
        grid-template-columns:
            auto 1fr auto !important;
        align-items: center !important;
        gap: 13px !important;
        margin-top:
            32px !important;
    }
    html body #anatomy
    .mobile-anatomy-progress span {
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: .08em !important;
        color:
            #B47A45 !important;
    }
    html body #anatomy
    .mobile-anatomy-progress i {
        display: block !important;
        width: 100% !important;
        height: 1px !important;
        background:
            linear-gradient(
                90deg,
                rgba(180,122,69,.08),
                rgba(180,122,69,.32),
                rgba(180,122,69,.08)
            ) !important;
    }
    /* =========================================
       6. ANIMACIJE — SUPTILNE
    ========================================= */
    @keyframes anatomyHotspotPulse {
        0%,
        100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.055);
        }
    }
    @keyframes anatomyDotPulse {
        0%,
        100% {
            opacity: .50;
            transform:
                translateY(-50%)
                scale(.82);
        }
        50% {
            opacity: 1;
            transform:
                translateY(-50%)
                scale(1.25);
        }
    }
}
/* sve novo sakrij van telefona */
@media (min-width: 601px) {
    .mobile-anatomy-hint {
        display: none !important;
    }
}
/* 
   ANATOMY — PRAVI FINAL CENTAR
   SAMO TELEFON
*/
@media (max-width: 600px) {
    html body #anatomy .anatomy-stage {
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        left: auto !important;
        right: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        transform: none !important;
    }
    /* KOMODA TAČNO U SREDINI SCENE */
    html body #anatomy .anatomy-stage .anatomy-product {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        top: 50% !important;
        width: 92% !important;
        max-width: 390px !important;
        margin: 0 !important;
        transform: translate(-50%, -50%) !important;
    }
    /* RESETUJ STARE 50vw TRANSFORMACIJE BROJEVA */
    html body #anatomy .anatomy-callout {
        transform: translate(-50%, -50%) !important;
    }
    /* 01 */
    html body #anatomy .anatomy-callout-rfid {
        left: 54% !important;
        top: 24% !important;
    }
    /* 02 */
    html body #anatomy .anatomy-callout-led {
        left: 70% !important;
        top: 44% !important;
    }
    /* 03 */
    html body #anatomy .anatomy-callout-soft {
        left: 34% !important;
        top: 44% !important;
    }
    /* 04 */
    html body #anatomy .anatomy-callout-alcantara {
        left: 50% !important;
        top: 51% !important;
    }
    /* 05 */
    html body #anatomy .anatomy-callout-board {
        left: 64% !important;
        top: 78% !important;
    }
}
/* 
   MOBILE ANATOMY — HOTSPOT PULSE
   SAMO TELEFON
*/
@media (max-width: 600px) {
    html body #anatomy
    .anatomy-callout
    .anatomy-callout-copy {
        /* malo providnije */
        background:
            rgba(25, 22, 19, .58) !important;
        border:
            1px solid rgba(180,122,69,.58) !important;
        -webkit-backdrop-filter:
            blur(10px)
            saturate(125%) !important;
        backdrop-filter:
            blur(10px)
            saturate(125%) !important;
        box-shadow:
            0 4px 14px rgba(30,20,12,.10),
            0 0 0 0 rgba(180,122,69,.18),
            inset 0 1px 0 rgba(255,255,255,.10) !important;
        animation:
            anatomyHotspotPulse 2.2s ease-in-out infinite !important;
    }
    /* broj malo nežniji */
    html body #anatomy
    .anatomy-callout-copy > span {
        color:
            rgba(211,154,98,.90) !important;
    }
    /* da ne trepere svih 5 identično */
    html body #anatomy .anatomy-callout-led .anatomy-callout-copy {
        animation-delay: .25s !important;
    }
    html body #anatomy .anatomy-callout-soft .anatomy-callout-copy {
        animation-delay: .5s !important;
    }
    html body #anatomy .anatomy-callout-alcantara .anatomy-callout-copy {
        animation-delay: .75s !important;
    }
    html body #anatomy .anatomy-callout-board .anatomy-callout-copy {
        animation-delay: 1s !important;
    }
    @keyframes anatomyHotspotPulse {
        0%,
        100% {
            opacity: .76;
            box-shadow:
                0 4px 14px rgba(30,20,12,.10),
                0 0 0 0 rgba(180,122,69,.14),
                inset 0 1px 0 rgba(255,255,255,.10);
        }
        50% {
            opacity: 1;
            box-shadow:
                0 5px 17px rgba(30,20,12,.12),
                0 0 0 6px rgba(180,122,69,.07),
                0 0 18px rgba(180,122,69,.18),
                inset 0 1px 0 rgba(255,255,255,.13);
        }
    }
}
/* 
   MOBILE — VIDLJIV PULSE HOTSPOTOVA
   SAMO TELEFON
*/
@media (max-width: 600px) {
    html body #anatomy .anatomy-callout {
        animation: anatomyClickPulse 1.8s ease-in-out infinite !important;
        will-change: filter;
    }
    /* da ne pulsiraju svi baš u isto vreme */
    html body #anatomy .anatomy-callout-led {
        animation-delay: .20s !important;
    }
    html body #anatomy .anatomy-callout-soft {
        animation-delay: .40s !important;
    }
    html body #anatomy .anatomy-callout-alcantara {
        animation-delay: .60s !important;
    }
    html body #anatomy .anatomy-callout-board {
        animation-delay: .80s !important;
    }
    @keyframes anatomyClickPulse {
        0%,
        100% {
            filter:
                brightness(.92)
                drop-shadow(0 0 0 rgba(180,122,69,0));
        }
        50% {
            filter:
                brightness(1.25)
                drop-shadow(0 0 7px rgba(180,122,69,.65))
                drop-shadow(0 0 15px rgba(180,122,69,.28));
        }
    }
}
@media (max-width: 600px) {
    html body #siteHeader .nav-actions {
        transform: translateX(8px) !important;
    }
}
@media (max-width: 600px) {
    .signature-counter {
        transform: translateY(8px) !important;
    }
}
@media (max-width: 600px) {
    /* KOMODICA BLIŽE NASLOVU */
    html body #anatomy .anatomy-stage {
        margin-top: -55px !important;
    }
    /* TEKST ISPOD BLIŽE KOMODICI */
    html body #anatomy .mobile-anatomy-hint {
        margin-top: -45px !important;
    }
}
/* 
   MOBILE — LIGHT GLASS HOTSPOTS
   SAMO TELEFON
*/
@media (max-width: 600px) {
    html body #anatomy
    .anatomy-callout
    .anatomy-callout-copy {
        /* PROVIDNO STAKLO */
        background: rgba(255,255,255,.12) !important;
        border: 1px solid rgba(255,255,255,.65) !important;
        -webkit-backdrop-filter:
            blur(10px) saturate(115%) !important;
        backdrop-filter:
            blur(10px) saturate(115%) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.75),
            0 2px 8px rgba(255,255,255,.12) !important;
    }
    /* BROJEVI SVETLI */
    html body #anatomy
    .anatomy-callout-copy > span {
        color: rgba(255,255,255,.95) !important;
    }
    /* UKLANJAMO STARU BRAON TAČKICU */
    html body #anatomy
    .anatomy-callout
    .anatomy-callout-copy::before {
        display: none !important;
        content: none !important;
    }
    /* NOVO SVETLO PULSIRANJE */
    html body #anatomy .anatomy-callout {
        animation: glassHotspotPulse 1.9s ease-in-out infinite !important;
    }
    html body #anatomy .anatomy-callout-led {
        animation-delay: .2s !important;
    }
    html body #anatomy .anatomy-callout-soft {
        animation-delay: .4s !important;
    }
    html body #anatomy .anatomy-callout-alcantara {
        animation-delay: .6s !important;
    }
    html body #anatomy .anatomy-callout-board {
        animation-delay: .8s !important;
    }
    @keyframes glassHotspotPulse {
        0%,
        100% {
            filter:
                brightness(1)
                drop-shadow(0 0 2px rgba(255,255,255,.12));
        }
        50% {
            filter:
                brightness(1.35)
                drop-shadow(0 0 7px rgba(255,255,255,.75))
                drop-shadow(0 0 14px rgba(255,255,255,.35));
        }
    }
}
@media (max-width: 600px) {
    html body #anatomy
    .anatomy-callout
    .anatomy-callout-copy {
        /* SKROZ PROVIDAN */
        background: rgba(255,255,255,.015) !important;
-webkit-backdrop-filter: blur(0.8px) !important;
backdrop-filter: blur(0.8px) !important;
        /* SAMO JEDNA IVICA */
        border: 1px solid rgba(255,255,255,.72) !important;
        /* UKLANJA DUPLI KRUG */
        box-shadow: none !important;
        outline: none !important;
    }
    /* UKLONI SVE PSEUDO-ELEMENTE KOJI PRAVE DODATNI KRUG */
    html body #anatomy
    .anatomy-callout
    .anatomy-callout-copy::before,
    html body #anatomy
    .anatomy-callout
    .anatomy-callout-copy::after {
        content: none !important;
        display: none !important;
        box-shadow: none !important;
    }
    /* PULSIRA SAMO SVETLINA — BEZ KRUGA/GLOW-A OKO NJEGA */
    html body #anatomy .anatomy-callout {
        animation: cleanGlassBlink 1.9s ease-in-out infinite !important;
    }
    @keyframes cleanGlassBlink {
        0%,
        100% {
            filter: brightness(1);
            opacity: .72;
        }
        50% {
            filter: brightness(1.35);
            opacity: 1;
        }
    }
}
@media (max-width: 600px) {
    /* UKLONI SVE BRONZANE KRUGOVE / GLOW IZA */
    html body #anatomy .anatomy-callout,
    html body #anatomy .anatomy-callout-copy {
        box-shadow: none !important;
        outline: none !important;
    }
    html body #anatomy .anatomy-callout-copy {
        background: rgba(255,255,255,.015) !important;
        border: 1px solid rgba(255,255,255,.68) !important;
        -webkit-backdrop-filter: blur(.8px) !important;
        backdrop-filter: blur(.8px) !important;
    }
    /* NEMA NIKAKVIH DODATNIH KRUGOVA */
    html body #anatomy .anatomy-callout::before,
    html body #anatomy .anatomy-callout::after,
    html body #anatomy .anatomy-callout-copy::before,
    html body #anatomy .anatomy-callout-copy::after {
        content: none !important;
        display: none !important;
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}
@media (max-width: 600px) {
    /* SPOLJNI STARI BRONZANI KRUG — SKROZ UKLONI */
    html body #anatomy .anatomy-callout {
        background: transparent !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    /* OSTAVLJAMO SAMO JEDAN PROVIDNI GLASS KRUG */
    html body #anatomy
    .anatomy-callout
    .anatomy-callout-copy {
        background: rgba(255,255,255,.015) !important;
        border:
            1px solid rgba(255,255,255,.65) !important;
        box-shadow: none !important;
        outline: none !important;
        -webkit-backdrop-filter:
            blur(.8px) !important;
        backdrop-filter:
            blur(.8px) !important;
    }
}
@media (max-width: 600px) {
    html body #anatomy
    .anatomy-callout
    .anatomy-callout-copy {
        background: rgba(255,255,255,.055) !important;
        -webkit-backdrop-filter:
            blur(2px)
            saturate(110%) !important;
        backdrop-filter:
            blur(2px)
            saturate(110%) !important;
        border:
            1px solid rgba(255,255,255,.68) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.22) !important;
    }
}
@media (max-width: 600px) {
    html body #anatomy
    .anatomy-callout
    .anatomy-callout-copy {
        /* STAKLENA POVRŠINA UNUTAR KRUGA */
        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.24) 0%,
                rgba(255,255,255,.09) 32%,
                rgba(255,255,255,.035) 65%,
                rgba(255,255,255,.13) 100%
            ) !important;
        /* KOMODA SE VIDI, ALI KAO KROZ TANKO STAKLO */
        -webkit-backdrop-filter:
            blur(3.5px)
            saturate(115%)
            brightness(1.08) !important;
        backdrop-filter:
            blur(3.5px)
            saturate(115%)
            brightness(1.08) !important;
        /* TANKA STAKLENA IVICA */
        border:
            1px solid rgba(255,255,255,.72) !important;
        /* DIMENZIJA UNUTAR STAKLA — NE PRAVI DRUGI KRUG */
        box-shadow:
            inset 1px 1px 2px rgba(255,255,255,.35),
            inset -1px -1px 2px rgba(255,255,255,.06) !important;
        overflow: hidden !important;
    }
}
@media (max-width: 600px) {
    html body #anatomy
    .anatomy-callout
    .anatomy-callout-copy {
        /* STAKLENA POVRŠINA UNUTAR KRUGA */
        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.24) 0%,
                rgba(255,255,255,.09) 32%,
                rgba(255,255,255,.035) 65%,
                rgba(255,255,255,.13) 100%
            ) !important;
        /* KOMODA SE VIDI, ALI KAO KROZ TANKO STAKLO */
        -webkit-backdrop-filter:
            blur(3.5px)
            saturate(115%)
            brightness(1.08) !important;
        backdrop-filter:
            blur(3.5px)
            saturate(115%)
            brightness(1.08) !important;
        /* TANKA STAKLENA IVICA */
        border:
            1px solid rgba(255,255,255,.72) !important;
        /* DIMENZIJA UNUTAR STAKLA — NE PRAVI DRUGI KRUG */
        box-shadow:
            inset 1px 1px 2px rgba(255,255,255,.35),
            inset -1px -1px 2px rgba(255,255,255,.06) !important;
        overflow: hidden !important;
    }
}
/* 
   MOBILE — RAZMACI ISPOD ANATOMY KOMODE
   SAMO TELEFON
*/
@media (max-width: 600px) {
    /* TEKST BLIŽE DONJEM DELU KOMODE */
    html body #anatomy .mobile-anatomy-hint {
        margin-top: -55px !important;
        padding-bottom: 0 !important;
    }
    /* 01 ----- 05 BLIŽE TEKSTU */
    html body #anatomy .mobile-anatomy-progress {
        margin-top: 22px !important;
        margin-bottom: 0 !important;
    }
    /* MANJE PRAZNOG PROSTORA POSLE LINIJE */
    html body #anatomy.anatomy-section {
        padding-bottom: 30px !important;
    }
    /* SLEDEĆA SEKCIJA BLIŽE */
    html body #comparison.comparison-section {
        padding-top: 34px !important;
    }
}
@media (max-width: 600px) {
    .footer-link-arrow {
        width: 19px !important;
        height: 19px !important;
        display: block !important;
        fill: none !important;
        stroke: #1c1a18 !important;
        stroke-width: 1.6 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }
}
@media (max-width: 600px) {
    .footer-bottom {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }
    .footer-bottom > div:first-child {
        flex: 0 0 auto !important;
        margin-right: auto !important;
    }
    .footer-bottom-links {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 14px !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        width: auto !important;
        flex: 0 0 auto !important;
    }
    .footer-bottom-links a {
        display: inline-block !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }
}
@media (max-width: 600px) {
    /* CELA TABELA — GLASS / SOAP BUBBLE */
    .comparison-table {
        position: relative !important;
        overflow: hidden !important;
        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.34) 0%,
                rgba(255,255,255,.13) 28%,
                rgba(255,255,255,.055) 58%,
                rgba(255,255,255,.18) 100%
            ) !important;
        -webkit-backdrop-filter:
            blur(16px)
            saturate(125%)
            brightness(1.05) !important;
        backdrop-filter:
            blur(16px)
            saturate(125%)
            brightness(1.05) !important;
        border:
            1px solid rgba(255,255,255,.72) !important;
        box-shadow:
            inset 1px 1px 0 rgba(255,255,255,.92),
            inset -1px -1px 0 rgba(255,255,255,.18),
            0 14px 38px rgba(50,40,30,.055),
            0 0 24px rgba(255,255,255,.20) !important;
        border-radius: 24px !important;
    }
    /* BELI ODSJAJ PREKO STAKLA */
    .comparison-table::before {
        content: "" !important;
        position: absolute !important;
        top: -25% !important;
        left: -18% !important;
        width: 62% !important;
        height: 150% !important;
        background:
            linear-gradient(
                115deg,
                transparent 0%,
                rgba(255,255,255,.06) 30%,
                rgba(255,255,255,.34) 46%,
                rgba(255,255,255,.11) 58%,
                transparent 76%
            ) !important;
        transform: rotate(7deg) !important;
        filter: blur(5px) !important;
        opacity: .65 !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }
    /* BLAGI DRUGI ODSJAJ U DONJEM UGLU */
    .comparison-table::after {
        content: "" !important;
        position: absolute !important;
        right: -70px !important;
        bottom: -90px !important;
        width: 220px !important;
        height: 220px !important;
        border-radius: 50% !important;
        background:
            radial-gradient(
                circle,
                rgba(255,255,255,.27) 0%,
                rgba(255,255,255,.09) 38%,
                transparent 72%
            ) !important;
        filter: blur(14px) !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }
    /* REDOVI OSTAJU PROVIDNI DA SE VIDI STAKLO ISPOD */
    .comparison-row,
    .comparison-header,
    .comparison-feature,
    .comparison-value,
    .comparison-feature-title,
    .comparison-column-title {
        background: transparent !important;
    }
    /* LINIJE UNUTAR TABELE — MEKŠE, STAKLENE */
    .comparison-row {
        border-bottom:
            1px solid rgba(255,255,255,.34) !important;
    }
    .comparison-feature,
    .comparison-value:not(:last-child) {
        border-right:
            1px solid rgba(255,255,255,.28) !important;
    }
    /* SADRŽAJ IZNAD ODSJAJA */
    .comparison-table > * {
        position: relative !important;
        z-index: 3 !important;
    }
}
@media (max-width: 600px) {
    .comparison-table {
        /* MALO VIŠE STAKLENE DUBINE */
        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,.42) 0%,
                rgba(255,255,255,.12) 22%,
                rgba(255,255,255,.035) 48%,
                rgba(255,255,255,.08) 72%,
                rgba(255,255,255,.28) 100%
            ) !important;
        -webkit-backdrop-filter:
            blur(20px)
            saturate(135%)
            brightness(1.07) !important;
        backdrop-filter:
            blur(20px)
            saturate(135%)
            brightness(1.07) !important;
        border: 1px solid rgba(255,255,255,.82) !important;
        box-shadow:
            /* beli odsjaj po gornjoj ivici */
            inset 0 1px 0 rgba(255,255,255,1),
            /* odsjaj sa leve strane */
            inset 1px 0 0 rgba(255,255,255,.55),
            /* mekana donja ivica */
            inset 0 -1px 0 rgba(255,255,255,.22),
            /* dubina stakla */
            inset 8px 8px 24px rgba(255,255,255,.055),
            /* spoljašnji soft glow */
            0 10px 35px rgba(70,55,40,.045),
            0 0 35px rgba(255,255,255,.32) !important;
    }
    /* JAČI REFLEKS KAO PREKO STAKLENE PLOČE */
    .comparison-table::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        top: -20% !important;
        left: -22% !important;
        width: 72% !important;
        height: 145% !important;
        background:
            linear-gradient(
                112deg,
                transparent 18%,
                rgba(255,255,255,.035) 30%,
                rgba(255,255,255,.16) 39%,
                rgba(255,255,255,.48) 46%,
                rgba(255,255,255,.18) 52%,
                rgba(255,255,255,.045) 61%,
                transparent 72%
            ) !important;
        filter: blur(7px) !important;
        transform: rotate(5deg) !important;
        opacity: .72 !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }
    /* MEKANI REFLEKS SA SUPROTNE STRANE */
    .comparison-table::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        right: -80px !important;
        bottom: 12% !important;
        width: 190px !important;
        height: 360px !important;
        border-radius: 50% !important;
        background:
            radial-gradient(
                ellipse,
                rgba(255,255,255,.26) 0%,
                rgba(255,255,255,.10) 30%,
                rgba(255,255,255,.025) 52%,
                transparent 72%
            ) !important;
        filter: blur(20px) !important;
        opacity: .75 !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }
    /* I UNUTRAŠNJE LINIJE DA IZGLEDAJU KAO UREZANE U STAKLO */
    .comparison-table td,
    .comparison-table th {
        border-color: rgba(255,255,255,.38) !important;
    }
}
@media (max-width: 600px) {
    /* JAČI STAKLENI SJAJ CELE TABELE */
    .comparison-table {
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,1),
            inset 1px 0 0 rgba(255,255,255,.70),
            inset -1px 0 0 rgba(255,255,255,.35),
            inset 0 -1px 0 rgba(255,255,255,.30),
            0 0 18px rgba(255,255,255,.55),
            0 0 42px rgba(255,255,255,.28),
            0 18px 45px rgba(50,40,30,.06) !important;
    }
    /* GLAVNI BELI ODSJAJ PREKO STAKLA */
    .comparison-table::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        top: -15% !important;
        left: -35% !important;
        width: 95% !important;
        height: 135% !important;
        background:
            linear-gradient(
                112deg,
                transparent 20%,
                rgba(255,255,255,.03) 31%,
                rgba(255,255,255,.18) 39%,
                rgba(255,255,255,.62) 45%,
                rgba(255,255,255,.30) 49%,
                rgba(255,255,255,.09) 55%,
                transparent 66%
            ) !important;
        transform: rotate(4deg) !important;
        filter: blur(6px) !important;
        opacity: .85 !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }
    /* SOFT SJAJ SA DESNE STRANE */
    .comparison-table::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        right: -110px !important;
        top: 18% !important;
        width: 250px !important;
        height: 65% !important;
        border-radius: 50% !important;
        background:
            radial-gradient(
                ellipse at center,
                rgba(255,255,255,.38) 0%,
                rgba(255,255,255,.16) 30%,
                rgba(255,255,255,.05) 52%,
                transparent 72%
            ) !important;
        filter: blur(24px) !important;
        opacity: .85 !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }
    /* SADRŽAJ OSTAJE IZNAD ODSJAJA */
    .comparison-table > * {
        position: relative !important;
        z-index: 3 !important;
    }
}
@media (max-width: 600px) {
    #comparison .mobile-comparison-table {
        position: relative !important;
        overflow: hidden !important;
        isolation: isolate !important;
        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.78) 0%,
                rgba(255,255,255,.34) 24%,
                rgba(255,255,255,.12) 52%,
                rgba(255,255,255,.28) 76%,
                rgba(255,255,255,.62) 100%
            ) !important;
        -webkit-backdrop-filter:
            blur(22px)
            saturate(145%)
            brightness(1.08) !important;
        backdrop-filter:
            blur(22px)
            saturate(145%)
            brightness(1.08) !important;
        border:
            1px solid rgba(255,255,255,.92) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,1),
            inset 1px 0 0 rgba(255,255,255,.72),
            inset -1px 0 0 rgba(255,255,255,.35),
            inset 0 -1px 0 rgba(255,255,255,.40),
            0 0 18px rgba(255,255,255,.95),
            0 0 42px rgba(255,255,255,.60),
            0 22px 45px rgba(50,40,30,.06) !important;
        border-radius: 22px !important;
    }
    /* JAK BELI ODSJAJ */
    #comparison .mobile-comparison-table::before {
        content: "" !important;
        position: absolute !important;
        top: -15% !important;
        left: -35% !important;
        width: 95% !important;
        height: 140% !important;
        background:
            linear-gradient(
                112deg,
                transparent 20%,
                rgba(255,255,255,.05) 31%,
                rgba(255,255,255,.30) 39%,
                rgba(255,255,255,.95) 46%,
                rgba(255,255,255,.50) 51%,
                rgba(255,255,255,.12) 58%,
                transparent 68%
            ) !important;
        filter: blur(8px) !important;
        transform: rotate(5deg) !important;
        opacity: .88 !important;
        pointer-events: none !important;
        z-index: 20 !important;
    }
    /* DRUGI SJAJ SA DESNE */
    #comparison .mobile-comparison-table::after {
        content: "" !important;
        position: absolute !important;
        right: -90px !important;
        top: 18% !important;
        width: 220px !important;
        height: 65% !important;
        border-radius: 50% !important;
        background:
            radial-gradient(
                ellipse,
                rgba(255,255,255,.72) 0%,
                rgba(255,255,255,.34) 30%,
                rgba(255,255,255,.10) 52%,
                transparent 72%
            ) !important;
        filter: blur(26px) !important;
        opacity: .75 !important;
        pointer-events: none !important;
        z-index: 10 !important;
    }
    /* SVE ĆELIJE PROVIDNE DA SE VIDI GLASS ISPOD */
    #comparison .mobile-comparison-table > * {
        position: relative !important;
        z-index: 30 !important;
        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.20),
                rgba(255,255,255,.055)
            ) !important;
        border-color:
            rgba(255,255,255,.40) !important;
    }
}
@media (max-width: 600px) {
    /* SPOLJNI OKVIR TABELE */
    #comparison .mobile-comparison-table {
        border: 1px solid rgba(255,255,255,.90) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,1),
            inset 0 -1px 0 rgba(255,255,255,.38),
            0 0 18px rgba(255,255,255,.55),
            0 16px 38px rgba(50,40,30,.05) !important;
    }
    /* VERTIKALNE I HORIZONTALNE LINIJE */
    #comparison .mobile-comparison-table > * {
        border-color: rgba(255,255,255,.52) !important;
    }
    /* ako su ćelije grid */
    #comparison .mobile-comparison-table > *:nth-child(odd) {
        border-right: 1px solid rgba(255,255,255,.52) !important;
    }
    #comparison .mobile-comparison-table > * {
        border-bottom: 1px solid rgba(255,255,255,.42) !important;
    }
    /* poslednji red bez duple donje linije */
    #comparison .mobile-comparison-table > *:nth-last-child(-n+2) {
        border-bottom: 0 !important;
    }
}
@media (max-width: 600px) {
    /* SPOLJNI OKVIR TABELE */
    #comparison .mobile-comparison-table {
        border: 1px solid rgba(255,255,255,.90) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,1),
            inset 0 -1px 0 rgba(255,255,255,.38),
            0 0 18px rgba(255,255,255,.55),
            0 16px 38px rgba(50,40,30,.05) !important;
    }
    /* VERTIKALNE I HORIZONTALNE LINIJE */
    #comparison .mobile-comparison-table > * {
        border-color: rgba(255,255,255,.52) !important;
    }
    /* ako su ćelije grid */
    #comparison .mobile-comparison-table > *:nth-child(odd) {
        border-right: 1px solid rgba(255,255,255,.52) !important;
    }
    #comparison .mobile-comparison-table > * {
        border-bottom: 1px solid rgba(255,255,255,.42) !important;
    }
    /* poslednji red bez duple donje linije */
    #comparison .mobile-comparison-table > *:nth-last-child(-n+2) {
        border-bottom: 0 !important;
    }
}
@media (max-width: 600px) {
    /* =========================================
       SPOLJNI OKVIR CELE MOBILE TABELE
    ========================================= */
    html body #comparison .mobile-comparison-table {
        border: 1px solid rgba(92, 76, 60, .20) !important;
        border-radius: 22px !important;
        overflow: hidden !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.95),
            inset 0 -1px 0 rgba(255,255,255,.50),
            0 0 24px rgba(255,255,255,.65),
            0 18px 45px rgba(45,32,20,.06) !important;
    }
    /* =========================================
       SREDNJA VERTIKALNA LINIJA
    ========================================= */
    html body #comparison .mobile-comparison-normal {
        border-right:
            1px solid rgba(83, 68, 54, .16) !important;
    }
    /* =========================================
       LINIJA ISPOD HEADERA
    ========================================= */
    html body #comparison .mobile-comparison-column-header {
        border-bottom:
            1px solid rgba(83, 68, 54, .15) !important;
    }
    /* =========================================
       HORIZONTALNE LINIJE IZMEĐU SVIH REDOVA
    ========================================= */
    html body #comparison .mobile-comparison-item {
        border-bottom:
            1px solid rgba(83, 68, 54, .13) !important;
    }
    /* POSLEDNJI RED NEMA DUPLU LINIJU */
    html body #comparison .mobile-comparison-item:last-child {
        border-bottom: 0 !important;
    }
    /* =========================================
       DA GLASS ODSJAJ OSTANE VIDLJIV,
       ALI DA NE POJEDE LINIJE
    ========================================= */
    html body #comparison .mobile-comparison-column,
    html body #comparison .mobile-comparison-list,
    html body #comparison .mobile-comparison-item {
        position: relative !important;
        z-index: 25 !important;
    }
}
@media (max-width: 600px) {
    /* SAFARI — uklanja tanku liniju/artefakt oko chat widgeta */
    .chat-widget,
    .chat-button,
    .chat-toggle,
    .chat-launcher,
    .chat-icon {
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        outline: none !important;
    }
    /* Safari compositing fix za fixed glass element */
    @supports (-webkit-touch-callout: none) {
        .chat-widget,
        .chat-button,
        .chat-toggle,
        .chat-launcher,
        .chat-icon {
            -webkit-background-clip: padding-box !important;
            background-clip: padding-box !important;
        }
    }
}
@media (max-width: 600px) {
    html body .site-header {
        border-bottom: none !important;
    }
}
@media (max-width: 600px) {
    html body #siteHeader,
    html body #siteHeader .navbar {
        border: 0 !important;
        border-top: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
    }
    html body #siteHeader::before,
    html body #siteHeader::after,
    html body #siteHeader .navbar::before,
    html body #siteHeader .navbar::after {
        content: none !important;
        display: none !important;
    }
}
@media (max-width: 600px) {
    html body #anatomy .anatomy-callout .anatomy-callout-copy {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 50% !important;
        background:
            radial-gradient(
                circle at 35% 30%,
                #4a3425 0%,
                #2f2118 55%,
                #211711 100%
            ) !important;
        border:
            1.5px solid rgba(180,122,69,.92) !important;
        box-shadow:
            inset 0 0 0 1px rgba(255,255,255,.04),
            0 0 0 2px rgba(180,122,69,.08),
            0 3px 10px rgba(35,20,10,.22) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        overflow: hidden !important;
    }
    html body #anatomy .anatomy-callout .anatomy-callout-copy > span {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #D79B62 !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        text-shadow:
            0 0 6px rgba(215,155,98,.18) !important;
    }
    html body #anatomy .anatomy-callout .anatomy-callout-copy::before,
    html body #anatomy .anatomy-callout .anatomy-callout-copy::after {
        content: none !important;
        display: none !important;
    }
}
@media (max-width: 600px) {
    /* 03 — na levu stranu prednje ploče gornje fioke */
    html body #anatomy .anatomy-callout-soft {
        left: 27% !important;
        top: 61% !important;
        right: auto !important;
    }
}
@media (max-width: 600px) {
    html body #anatomy .anatomy-callout,
    html body #anatomy .anatomy-callout .anatomy-callout-copy,
    html body #anatomy .anatomy-callout .anatomy-callout-copy::before,
    html body #anatomy .anatomy-callout .anatomy-callout-copy::after {
        animation: none !important;
        transition: none !important;
    }
}
/* 
   MOBILE — HOTSPOT BREATHING AURA
   KRUG MIRUJE / AURA SE ŠIRI I SKUPLJA
*/
@media (max-width: 600px) {
    /* SAM BRAON HOTSPOT NE MRDA */
    html body #anatomy .anatomy-callout {
        overflow: visible !important;
        animation: none !important;
        filter: none !important;
    }
    /* AURA OKO HOTSPOTA */
    html body #anatomy .anatomy-callout::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 72px !important;
        height: 72px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        outline: 0 !important;
        border-radius: 50% !important;
        background:
    radial-gradient(
        circle,
        rgba(180,122,69,.48) 0%,
        rgba(180,122,69,.34) 24%,
        rgba(180,122,69,.22) 44%,
        rgba(180,122,69,.11) 63%,
        rgba(180,122,69,0) 82%
    ) !important;
        pointer-events: none !important;
        z-index: 1 !important;
        transform:
            translate3d(-50%, -50%, 0)
            scale(.82);
        transform-origin: center center !important;
        opacity: .42;
        will-change:
            transform,
            opacity;
        animation:
            sefAuraBreath
            2.8s
            cubic-bezier(.45, 0, .55, 1)
            infinite !important;
    }
    /* BRAON KRUG JE IZNAD AURE */
    html body #anatomy
    .anatomy-callout
    .anatomy-callout-copy {
        position: absolute !important;
        z-index: 5 !important;
        animation: none !important;
    }
    @keyframes sefAuraBreath {
        0% {
            transform:
                translate3d(-50%, -50%, 0)
                scale(.82);
            opacity: .40;
        }
        50% {
            transform:
                translate3d(-50%, -50%, 0)
                scale(1.42);
            opacity: .22;
        }
        100% {
            transform:
                translate3d(-50%, -50%, 0)
                scale(.82);
            opacity: .40;
        }
    }
}
/* 
   MOBILE — KAD JE KORPA OTVORENA
   SAKRIJ CHAT + NAVBAR
*/
@media (max-width: 600px) {
    body.cart-open .ai-chat-widget,
    body.cart-open #siteHeader,
    body.cart-open #siteHeader .navbar {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    body.cart-open #siteHeader {
        transform: translateY(-100%) !important;
    }
}
/* 
   MOBILE ANATOMY — ISTO KAO LAPTOP
   TAP: KRUG → BRAON KARTICA
   SVIH 5 PULSIRAJU ZAJEDNO
*/
@media (max-width: 600px) {
    /* svi markeri isti mali krug */
    html body #anatomy .anatomy-callout {
        overflow: visible !important;
        animation: mobileMarkerPulse 2.4s ease-in-out infinite !important;
        animation-delay: 0s !important;
        transform-origin: center center !important;
    }
    html body #anatomy
    .anatomy-callout .anatomy-callout-copy {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        max-width: 42px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        border-radius: 50% !important;
        background:
            radial-gradient(
                circle at 35% 30%,
                #4a3425 0%,
                #2f2118 55%,
                #211711 100%
            ) !important;
        border:
            1.5px solid rgba(180,122,69,.92) !important;
        transition:
            width .35s cubic-bezier(.22,.8,.22,1),
            max-width .35s cubic-bezier(.22,.8,.22,1),
            border-radius .35s ease,
            box-shadow .35s ease !important;
    }
    /* BROJ */
    html body #anatomy
    .anatomy-callout .anatomy-callout-copy > span {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #D79B62 !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
    }
    /* naziv je sakriven dok je krug */
    html body #anatomy
    .anatomy-callout .anatomy-callout-copy strong {
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 14px !important;
        color: #D79B62 !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    html body #anatomy
    .anatomy-callout .anatomy-callout-copy small {
        display: none !important;
    }
    /* =========================================
       TAPNUT MARKER — ISTO KAO LAPTOP HOVER
    ========================================= */
    html body #anatomy
    .anatomy-callout.mobile-active {
        animation: none !important;
    }
    html body #anatomy
    .anatomy-callout.mobile-active
    .anatomy-callout-copy {
        width: 165px !important;
        max-width: 165px !important;
        border-radius: 22px !important;
        box-shadow:
            inset 0 0 0 1px rgba(255,255,255,.04),
            0 8px 24px rgba(35,20,10,.24),
            0 0 0 2px rgba(180,122,69,.08) !important;
    }
    /* broj nestaje */
    html body #anatomy
    .anatomy-callout.mobile-active
    .anatomy-callout-copy > span {
        display: none !important;
    }
    /* naziv se pojavi */
    html body #anatomy
    .anatomy-callout.mobile-active
    .anatomy-callout-copy strong {
        display: flex !important;
        opacity: 1 !important;
        transform: none !important;
        text-align: center !important;
    }
}
/* 
   ISTI PULSE KAO LAPTOP
*/
@keyframes mobileMarkerPulse {
    0%,
    100% {
        scale: 1;
        filter:
            drop-shadow(0 0 3px rgba(180,122,69,.15))
            drop-shadow(0 0 5px rgba(180,122,69,.08));
    }
    50% {
        scale: 1.10;
        filter:
            drop-shadow(0 0 6px rgba(215,155,98,.42))
            drop-shadow(0 0 11px rgba(180,122,69,.32));
    }
}
/* MOBILE — SKLONI STARU BRAON AURU OKO 04 */
@media (max-width: 600px) {
    html body #anatomy .anatomy-callout-alcantara::before,
    html body #anatomy .anatomy-callout-alcantara::after {
        content: none !important;
        display: none !important;
        opacity: 0 !important;
        box-shadow: none !important;
        background: none !important;
        animation: none !important;
    }
}
/* MOBILE — SKLONI SVE STARE DOT/AURA ELEMENTE */
@media (max-width: 600px) {
    html body #anatomy .anatomy-callout-alcantara .anatomy-dot,
    html body #anatomy .anatomy-callout-alcantara .anatomy-line,
    html body #anatomy .anatomy-callout-alcantara > .anatomy-dot,
    html body #anatomy .anatomy-callout-alcantara > .anatomy-line {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        animation: none !important;
        transform: none !important;
    }
}
/* MOBILE — VRATI SAMO PULSE KRUG OKO 04 */
@media (max-width: 600px) {
    html body #anatomy
    .anatomy-callout-alcantara
    .anatomy-callout-copy {
        position: relative !important;
        overflow: visible !important;
    }
    html body #anatomy
    .anatomy-callout-alcantara
    .anatomy-callout-copy::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 50% !important;
        border: 1.5px solid rgba(180,122,69,.55) !important;
        background: transparent !important;
        box-shadow:
            0 0 8px rgba(215,155,98,.30),
            0 0 16px rgba(180,122,69,.18) !important;
        transform:
            translate(-50%, -50%)
            scale(1) !important;
        animation:
            mobile04PulseRing 2.4s ease-in-out infinite !important;
        pointer-events: none !important;
        z-index: -1 !important;
    }
}
@keyframes mobile04PulseRing {
    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(1);
        opacity: .30;
    }
    50% {
        transform:
            translate(-50%, -50%)
            scale(1.28);
        opacity: .85;
    }
}
/* MOBILE — MALO MANJI 01–05 KRUŽIĆI */
@media (max-width: 600px) {
    html body #anatomy
    .anatomy-callout .anatomy-callout-copy {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        max-width: 38px !important;
    }
    html body #anatomy
    .anatomy-callout .anatomy-callout-copy > span {
        width: 38px !important;
        height: 38px !important;
        flex: 0 0 38px !important;
        font-size: 10px !important;
    }
    /* 04 pulsirajući prsten prati novu veličinu */
    html body #anatomy
    .anatomy-callout-alcantara
    .anatomy-callout-copy::after {
        width: 38px !important;
        height: 38px !important;
    }
}
/* 
   MOBILE — 04 ISTA AURA KAO 01 / 02 / 03 / 05
*/
@media (max-width: 600px) {
    html body #anatomy
    .anatomy-callout-alcantara::before {
        content: "" !important;
        display: block !important;
        visibility: visible !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        outline: 0 !important;
        border-radius: 50% !important;
        background:
            radial-gradient(
                circle,
                rgba(180,122,69,.28) 0%,
                rgba(180,122,69,.18) 30%,
                rgba(180,122,69,.08) 55%,
                rgba(180,122,69,.025) 72%,
                rgba(180,122,69,0) 88%
            ) !important;
        box-shadow:
            0 0 14px rgba(180,122,69,.14),
            0 0 26px rgba(180,122,69,.09) !important;
        filter: blur(3px) !important;
        -webkit-filter: blur(3px) !important;
        pointer-events: none !important;
        z-index: 4 !important;
        animation:
            sefNexenAura 2.8s
            cubic-bezier(.22,.61,.36,1)
            infinite !important;
    }
}
/* 
   MOBILE — 04 VRATI ISTU JS AURU KAO OSTALI
*/
@media (max-width: 600px) {
    html body #anatomy
    .anatomy-callout-alcantara
    > .js-hotspot-aura {
        display: block !important;
        visibility: visible !important;
        opacity: 1;
        pointer-events: none !important;
        z-index: 1 !important;
    }
    html body #anatomy
    .anatomy-callout-alcantara {
        overflow: visible !important;
        isolation: auto !important;
    }
    html body #anatomy
    .anatomy-callout-alcantara
    .anatomy-callout-copy {
        z-index: 5 !important;
    }
}
/* 
   MOBILE — TAPNUT HOTSPOT OSTAJE KRUŽIĆ
   NE OTVARA SE U MALU KARTICU
*/
@media (max-width: 600px) {
    html body #anatomy
    .anatomy-callout.mobile-active
    .anatomy-callout-copy {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        max-width: 38px !important;
        max-height: 38px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        transform: none !important;
    }
    /* BROJ OSTAVLJAMO U KRUŽIĆU */
    html body #anatomy
    .anatomy-callout.mobile-active
    .anatomy-callout-copy > span {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 38px !important;
        height: 38px !important;
        flex: 0 0 38px !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* NAZIV SE NE PRIKAZUJE U KRUŽIĆU */
    html body #anatomy
    .anatomy-callout.mobile-active
    .anatomy-callout-copy strong {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    /* OPIS TAKOĐE NE PRIKAZUJ */
    html body #anatomy
    .anatomy-callout.mobile-active
    .anatomy-callout-copy small {
        display: none !important;
    }
}
/* 
   MOBILE — LINIJA IZMEĐU KRUŽIĆA KAO NA LAPTOPU
*/
@media (max-width: 600px) {
    /* skloni postojeću debelu liniju */
    html body #how .how-steps::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        left: 55px !important;
        top: 55px !important;
        bottom: 55px !important;
        width: 3px !important;
        height: auto !important;
        transform: translateX(-50%) !important;
        /* isti nežni izgled kao desktop */
        background:
            linear-gradient(
                to right,
                rgba(180,122,69,.18) 0%,
                rgba(255,255,255,.95) 48%,
                rgba(180,122,69,.18) 100%
            ) !important;
        border: 0 !important;
        border-radius: 999px !important;
        box-shadow:
            0 0 0 1px rgba(180,122,69,.10),
            0 0 8px rgba(180,122,69,.05) !important;
        z-index: 0 !important;
        pointer-events: none !important;
    }
    /* tanka bronzana linija kroz sredinu */
    html body #how .how-steps::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        left: 55px !important;
        top: 55px !important;
        bottom: 55px !important;
        width: 1px !important;
        height: auto !important;
        transform: translateX(-50%) !important;
        background:
            rgba(180,122,69,.32) !important;
        border: 0 !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }
    /* kružići ostaju iznad linije */
    html body #how .how-step-icon {
        position: relative !important;
        z-index: 5 !important;
    }
}
/* 
   MOBILE HOW — VRATI PRVOBITNO
*/
@media (max-width: 600px) {
    /* skloni naknadno dodate linije */
    html body #how .how-steps::before,
    html body #how .how-steps::after,
    html body #how .how-step::before,
    html body #how .how-step::after,
    html body #how .how-step-icon::before {
        content: none !important;
        display: none !important;
    }
    /* ORIGINALNI CONNECTOR */
    html body #how .how-step-line {
        display: block !important;
        visibility: visible !important;
        position: relative !important;
        overflow: visible !important;
    }
    html body #how .how-step-line > span {
        display: block !important;
        visibility: visible !important;
        position: absolute !important;
        left: 35px !important;
        top: -10px !important;
        width: 1px !important;
        height: 42px !important;
        margin: 0 !important;
        transform: none !important;
        border: none !important;
        background:
            linear-gradient(
                180deg,
                rgba(180,122,69,.08) 0%,
                rgba(180,122,69,.32) 50%,
                rgba(180,122,69,.08) 100%
            ) !important;
        box-shadow: none !important;
        opacity: 1 !important;
    }
    /* bez rombića i dodatnih linija */
    html body #how .how-step-line > span::before,
    html body #how .how-step-line > span::after {
        content: none !important;
        display: none !important;
    }
    html body #how .how-step-icon {
        position: relative !important;
        z-index: 5 !important;
    }
}
/* MOBILE ANATOMY POPUP — SKLONI DUPLI X */
@media (max-width: 600px) {
    .mobile-sheet-close {
        font-size: 0 !important;
        line-height: 0 !important;
    }
    .mobile-sheet-close > svg,
    .mobile-sheet-close > span {
        display: none !important;
    }
    .mobile-sheet-close::before {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 15px !important;
        height: 1.5px !important;
        background: currentColor !important;
        transform:
            translate(-50%, -50%)
            rotate(45deg) !important;
        border-radius: 999px !important;
    }
    .mobile-sheet-close::after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 15px !important;
        height: 1.5px !important;
        background: currentColor !important;
        transform:
            translate(-50%, -50%)
            rotate(-45deg) !important;
        border-radius: 999px !important;
    }
}
/* 
   MOBILE ANATOMY — MANJI KRUŽIĆI + BLAŽI PULSE
*/
@media (max-width: 600px) {
    /* 01–05 malo manji */
    html body #anatomy
    .anatomy-callout .anatomy-callout-copy,
    html body #anatomy
    .anatomy-callout.mobile-active .anatomy-callout-copy {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
        border-radius: 50% !important;
    }
    /* brojevi proporcionalno manji */
    html body #anatomy
    .anatomy-callout .anatomy-callout-copy > span,
    html body #anatomy
    .anatomy-callout.mobile-active .anatomy-callout-copy > span {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px !important;
        font-size: 9px !important;
    }
    /* svih 5 isti, blaži pulse */
    html body #anatomy .anatomy-callout {
        animation: mobileMarkerPulseSoft 2.8s ease-in-out infinite !important;
        animation-delay: 0s !important;
    }
}
/* BLAŽE PULSIRANJE */
@keyframes mobileMarkerPulseSoft {
    0%,
    100% {
        scale: 1;
        filter:
            drop-shadow(0 0 2px rgba(180,122,69,.10));
    }
    50% {
        scale: 1.055;
        filter:
            drop-shadow(0 0 6px rgba(180,122,69,.22));
    }
}
/* MOBILE ANATOMY — JOŠ MALO MANJI KRUŽIĆI */
@media (max-width: 600px) {
    html body #anatomy
    .anatomy-callout .anatomy-callout-copy,
    html body #anatomy
    .anatomy-callout.mobile-active .anatomy-callout-copy {
        width: 31px !important;
        height: 31px !important;
        min-width: 31px !important;
        min-height: 31px !important;
        max-width: 31px !important;
        max-height: 31px !important;
    }
    html body #anatomy
    .anatomy-callout .anatomy-callout-copy > span,
    html body #anatomy
    .anatomy-callout.mobile-active .anatomy-callout-copy > span {
        width: 31px !important;
        height: 31px !important;
        flex: 0 0 31px !important;
        font-size: 8.5px !important;
    }
}
/* MOBILE — POTPUNO PREKRIJ SPOJ RECENZIJE / FAQ */
@media (max-width: 600px) {
    html body #faq {
        position: relative !important;
        z-index: 10 !important;
        margin-top: -4px !important;
    }
    html body #faq::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: -4px !important;
        width: 100% !important;
        height: 8px !important;
        background: #FDFCFB !important;
        border: 0 !important;
        box-shadow: none !important;
        z-index: 20 !important;
        pointer-events: none !important;
    }
}
/* 
   FINAL — NEMA NIKAKVE LINIJE IZMEĐU RECENZIJA I FAQ
*/
@media (max-width: 600px) {
    html body #reviews,
    html body #reviews.reviews-section {
        border-bottom: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
    }
    html body #reviews::before,
    html body #reviews::after {
        content: none !important;
        display: none !important;
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    html body #faq,
    html body #faq.faq-section {
        margin-top: 0 !important;
        border-top: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
    }
    /* GASI ONU TRAKU KOJU SMO PRETHODNO DODALI */
    html body #faq::before,
    html body #faq::after {
        content: none !important;
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}
/* 
   MOBILE — FINALNO UKLANJANJE SEAM LINIJE REVIEWS → FAQ
*/
@media (max-width: 600px) {
    html body #reviews.reviews-section {
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        isolation: auto !important;
        background: #FDFCFB !important;
        background-color: #FDFCFB !important;
        background-image: none !important;
    }
    html body #reviews.reviews-section::before,
    html body #reviews.reviews-section::after {
        content: none !important;
        display: none !important;
    }
    html body #faq.faq-section {
        margin-top: -1px !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        background: #FDFCFB !important;
        background-color: #FDFCFB !important;
        background-image: none !important;
    }
    html body #faq.faq-section::before,
    html body #faq.faq-section::after {
        content: none !important;
        display: none !important;
    }
}
/* 
   MOBILE FAQ — SMOOTH ZATVARANJE ODGOVORA
*/
@media (max-width: 600px) {
    html body #faq .faq-item {
        overflow: hidden !important;
    }
    html body #faq .faq-answer {
        max-height: 0 !important;
        opacity: 0 !important;
        transform: translateY(-6px) !important;
        transition:
    max-height .52s cubic-bezier(.22,.61,.36,1),
    opacity .26s ease,
    transform .38s cubic-bezier(.22,.61,.36,1) !important;
        will-change:
            max-height,
            opacity,
            transform !important;
    }
    html body #faq .faq-answer p {
        transform: translateY(-3px) !important;
        opacity: 0 !important;
        transition:
    opacity .22s ease,
    transform .34s cubic-bezier(.22,.61,.36,1) !important;
    }
    html body #faq .faq-item.active .faq-answer {
        max-height: 420px !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    html body #faq .faq-item.active .faq-answer p {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    html body #faq .faq-question > span {
        transition:
            transform .55s cubic-bezier(.22,.61,.36,1) !important;
    }
}
/* 
   MOBILE FAQ — TEKST + POLJE ZAJEDNO
*/
@media (max-width: 600px) {
    html body #faq .faq-item {
        overflow: hidden !important;
    }
    html body #faq .faq-answer {
        max-height: 0 !important;
        opacity: 0 !important;
        transform: translateY(-4px) !important;
        transition:
            max-height .48s cubic-bezier(.4,0,.2,1),
            opacity .48s cubic-bezier(.4,0,.2,1),
            transform .48s cubic-bezier(.4,0,.2,1) !important;
    }
    html body #faq .faq-answer p {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    html body #faq .faq-item.active .faq-answer {
        max-height: 420px !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    html body #faq .faq-item.active .faq-answer p {
        opacity: 1 !important;
        transform: none !important;
    }
    html body #faq .faq-question > span {
        transition:
            transform .48s cubic-bezier(.4,0,.2,1) !important;
    }
}
/* 
   AI CHAT — PRAVI FULL SCREEN NA TELEFONU
*/
@media (max-width: 600px) {
    body:has(#aiChatWindow.active) {
        overflow: hidden !important;
    }
    #aiChatWindow.ai-chat-window {
        position: fixed !important;
        z-index: 999999 !important;
        inset: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100dvh !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        transform: none !important;
        background: #fdfcfb !important;
    }
    #aiChatWindow.ai-chat-window.active {
        display: flex !important;
        flex-direction: column !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    /* HEADER */
    #aiChatWindow .ai-chat-header {
        width: 100% !important;
        flex: 0 0 auto !important;
        border-radius: 0 !important;
        padding-top:
            max(18px, env(safe-area-inset-top)) !important;
    }
    /* SREDINA CHATA */
    #aiChatWindow .ai-chat-messages {
        width: 100% !important;
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    /* INPUT ZALEPLJEN DO DNA */
    #aiChatWindow .ai-chat-input-wrap {
        position: relative !important;
        width: 100% !important;
        flex: 0 0 auto !important;
        bottom: auto !important;
        margin: 0 !important;
        border-radius: 0 !important;
        padding-bottom:
            max(14px, env(safe-area-inset-bottom)) !important;
    }
    /* DOK JE CHAT OTVOREN SKLONI FLOATING CHAT DUGME */
    body:has(#aiChatWindow.active) #aiChatToggle {
        display: none !important;
    }
}
/* 
   AI CHAT — BEZ iPHONE ZOOM-A NA INPUT
*/
@media (max-width: 600px) {
    #aiChatWindow #aiChatInput {
        font-size: 16px !important;
        line-height: 1.2 !important;
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }
}
/* 
   MOBILE CHAT — APP / INSTAGRAM BEHAVIOUR
*/
@media (max-width: 600px) {
    body:has(#aiChatWindow.active) {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        inset: 0 !important;
    }
    #aiChatWindow.ai-chat-window {
        position: fixed !important;
        top: var(--chat-viewport-top, 0px) !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        width: 100vw !important;
        height: var(--chat-viewport-height, 100dvh) !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        transform: none !important;
        display: none !important;
        flex-direction: column !important;
        overflow: hidden !important;
        background: #fdfcfb !important;
        overscroll-behavior: none !important;
    }
    #aiChatWindow.ai-chat-window.active {
        display: flex !important;
    }
    /* HEADER UVEK GORE */
    #aiChatWindow .ai-chat-header {
        position: relative !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        z-index: 10 !important;
    }
    /* SAMO PORUKE SKROLUJU */
    #aiChatWindow .ai-chat-messages {
        position: relative !important;
        flex: 1 1 0 !important;
        width: 100% !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain !important;
    }
    /* INPUT UVEK IZNAD TASTATURE */
    #aiChatWindow .ai-chat-input-wrap {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        z-index: 20 !important;
        padding-bottom:
            max(12px, env(safe-area-inset-bottom)) !important;
    }
    /* IOS — NEMA AUTO ZOOM */
    #aiChatWindow #aiChatInput {
        font-size: 16px !important;
        line-height: 1.25 !important;
        transform: none !important;
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }
    /* NEMA FLOATING DUGMETA DOK JE CHAT OTVOREN */
    body:has(#aiChatWindow.active) #aiChatToggle {
        display: none !important;
    }
}
/* 
   MOBILE CHAT — IOS / SAFARI VIEWPORT FIX
*/
@media (max-width: 768px){
    .chat-popup{
        position:fixed !important;
        left:0 !important;
        right:0 !important;
        top:var(--chat-viewport-top, 0px) !important;
        width:100% !important;
        height:var(--chat-viewport-height, 100dvh) !important;
        max-height:var(--chat-viewport-height, 100dvh) !important;
        bottom:auto !important;
        margin:0 !important;
        transform:none !important;
        overflow:hidden !important;
        z-index:999999 !important;
    }
    /* sadržaj chata */
    .chat-popup .chat-messages{
        min-height:0 !important;
        overflow-y:auto !important;
        overscroll-behavior:contain !important;
        -webkit-overflow-scrolling:touch;
    }
    /* input deo uvek ostaje dole */
    .chat-popup .chat-input-area{
        position:relative !important;
        flex-shrink:0 !important;
        padding-bottom:
            max(
                12px,
                env(safe-area-inset-bottom)
            ) !important;
        background:#fff;
    }
}
/* FIX - MOBILE COMPARISON UVEK 2 KOLONE */
@media (max-width: 768px) {
    .mobile-comparison-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        width: 100% !important;
        align-items: stretch !important;
    }
    .mobile-comparison-column {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    .mobile-comparison-column-header {
        width: 100% !important;
        min-height: 145px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
    .mobile-comparison-list {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    .mobile-comparison-item {
        width: 100% !important;
        min-height: 145px !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
    }
    .mobile-comparison-premium {
        border-left: 1px solid rgba(120, 100, 75, 0.13) !important;
    }
}
/* 
   SEFKOMODA — FINAL CLEAN PRODUCT GALLERY
   Jedan sistem za svih 9 slika i sve uređaje
*/
/* =========================
   DESKTOP / LAPTOP
========================= */
#shop .signature-stage {
    position: relative !important;
    width: 100% !important;
    height: 590px !important;
    min-height: 590px !important;
    overflow: hidden !important;
}
#shop .signature-product {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin: 0 !important;
    contain: layout paint !important;
}
html body #shop #offerMainImage,
html body #shop #offerMainImage.hero-image-smaller,
html body #shop #offerMainImage:not(.hero-image-smaller) {
    width: min(560px, 100%) !important;
    height: 560px !important;
    max-width: 560px !important;
    max-height: 560px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: auto !important;
    padding: 0 !important;
    position: static !important;
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: 1 !important;
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    image-rendering: auto !important;
}
/* =========================
   TABLET
========================= */
@media (max-width: 900px) {
    #shop .signature-stage {
        height: 470px !important;
        min-height: 470px !important;
    }
    #shop .signature-product {
        height: 470px !important;
        min-height: 470px !important;
    }
    html body #shop #offerMainImage,
    html body #shop #offerMainImage.hero-image-smaller,
    html body #shop #offerMainImage:not(.hero-image-smaller) {
        width: min(420px, 88vw) !important;
        height: 420px !important;
        max-width: 420px !important;
        max-height: 420px !important;
        transform: none !important;
        scale: 1 !important;
    }
}
/* =========================
   TELEFON
========================= */
@media (max-width: 600px) {
    #shop .signature-stage {
        width: 100% !important;
        height: 390px !important;
        min-height: 390px !important;
        margin-top: 10px !important;
        overflow: hidden !important;
    }
    #shop .signature-product {
        width: 100% !important;
        height: 390px !important;
        min-height: 390px !important;
        inset: 0 !important;
        overflow: hidden !important;
    }
    html body #shop #offerMainImage,
    html body #shop #offerMainImage.hero-image-smaller,
    html body #shop #offerMainImage:not(.hero-image-smaller) {
        width: min(330px, 84vw) !important;
        height: 330px !important;
        max-width: 330px !important;
        max-height: 330px !important;
        object-fit: contain !important;
        object-position: center center !important;
        margin: auto !important;
        transform: none !important;
        translate: none !important;
        rotate: none !important;
        scale: 1 !important;
        transition: none !important;
        animation: none !important;
    }
    #shop .signature-arrow {
        z-index: 30 !important;
        touch-action: manipulation !important;
    }
    #shop .signature-arrow-left {
        left: 4px !important;
    }
    #shop .signature-arrow-right {
        right: 4px !important;
    }
}
/* 
   MOBILE GALLERY — PERFORMANCE / NO JUMP
*/
@media (max-width: 600px) {
    #shop .signature-stage {
        contain: layout paint !important;
    }
    #shop .signature-product {
        contain: layout paint !important;
        transform: translateZ(0) !important;
        -webkit-transform: translateZ(0) !important;
    }
    html body #shop #offerMainImage {
        /*
           DIMENZIJE NAMERNO NE DIRAMO.
           Ostaju one koje smo već sredili.
        */
        flex-shrink: 0 !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        transform: translateZ(0) !important;
        -webkit-transform: translateZ(0) !important;
        transition: none !important;
        animation: none !important;
        pointer-events: none !important;
    }
}
/* 
   MOBILE ANATOMY — FINAL AURA FIX
   samo aura, NE menja položaj tačaka
*/
@media (max-width: 600px) {
    /* roditelj ostaje na svom postojećem mestu */
    html body #anatomy .anatomy-callout {
        overflow: visible !important;
    }
    /* broj / kružić je referentna tačka za auru */
    html body #anatomy
    .anatomy-callout
    .anatomy-callout-copy > span {
        position: relative !important;
        overflow: visible !important;
    }
    /* ISTA AURA ZA 01, 02, 03, 04 I 05 */
    html body #anatomy
    .anatomy-callout
    .anatomy-callout-copy > span::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        /* TAČAN CENTAR BROJA */
        left: 50% !important;
        top: 50% !important;
        /* ISTA VELIČINA SVUDA */
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        border-radius: 50% !important;
        border:
            1px solid rgba(180,122,69,.48) !important;
        background:
            rgba(180,122,69,.025) !important;
        box-shadow:
            0 0 7px rgba(180,122,69,.20),
            0 0 14px rgba(180,122,69,.10) !important;
        transform:
            translate(-50%, -50%)
            scale(1) !important;
        transform-origin:
            center center !important;
        pointer-events: none !important;
        z-index: -1 !important;
        animation:
            anatomyMobileAuraFinal
            2.6s
            ease-in-out
            infinite !important;
    }
    /* 04 JE RANIJE IMALA SVOJU POSEBNU AURU —
       NJU GASIMO DA NE DOBIJEMO DUPLI OBRUČ */
    html body #anatomy
    .anatomy-callout-alcantara
    .anatomy-callout-copy::after,
    html body #anatomy
    .anatomy-callout-alcantara
    > .js-hotspot-aura {
        content: none !important;
        display: none !important;
        animation: none !important;
    }
}
/* 
   PULSE — CENTAR SE NIKADA NE POMERA
*/
@keyframes anatomyMobileAuraFinal {
    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(.92);
        opacity: .35;
    }
    50% {
        transform:
            translate(-50%, -50%)
            scale(1.10);
        opacity: .85;
    }
}
/* 
   MOBILE ANATOMY — FINAL AURA CLEAN FIX
   SAMO TELEFON
   NE MENJA POLOŽAJ NI VELIČINU HOTSPOT TAČAKA
*/
@media (max-width: 600px) {
    /* -----------------------------------------------------
       1. GASIMO SVE DODATNE / STARE AURE
    ----------------------------------------------------- */
    html body #anatomy
    .anatomy-callout
    .anatomy-callout-copy > span::before,
    html body #anatomy
    .anatomy-callout
    .anatomy-callout-copy > span::after,
    html body #anatomy
    .anatomy-callout
    .anatomy-callout-copy::before,
    html body #anatomy
    .anatomy-callout
    .anatomy-callout-copy::after,
    html body #anatomy
    .anatomy-callout::before {
        content: none !important;
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
        animation: none !important;
    }
    /* -----------------------------------------------------
       2. POSEBNO GASIMO STARU 04 AURU
    ----------------------------------------------------- */
    html body #anatomy
    .anatomy-callout-alcantara::before {
        content: none !important;
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: none !important;
        box-shadow: none !important;
        filter: none !important;
        animation: none !important;
    }
    /* -----------------------------------------------------
       3. KORISTIMO SAMO POSTOJEĆU JS AURU
       ZA SVIH 5 HOTSPOTOVA
    ----------------------------------------------------- */
    html body #anatomy
    .anatomy-callout {
        overflow: visible !important;
    }
    html body #anatomy
    .anatomy-callout
    > .js-hotspot-aura {
        display: block !important;
        visibility: visible !important;
        position: absolute !important;
        /*
           callout je sama tačka,
           zato je 50/50 njen TAČAN centar
        */
        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        /* IDENTIČNA VELIČINA NA 01–05 */
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background:
            radial-gradient(
                circle,
                rgba(180,122,69,.20) 0%,
                rgba(180,122,69,.12) 38%,
                rgba(180,122,69,.055) 62%,
                rgba(180,122,69,0) 78%
            ) !important;
        box-shadow:
            0 0 9px rgba(180,122,69,.13),
            0 0 17px rgba(180,122,69,.07) !important;
        filter: none !important;
        -webkit-filter: none !important;
        transform:
            translate(-50%, -50%)
            scale(1) !important;
        transform-origin:
            50% 50% !important;
        pointer-events: none !important;
        z-index: -1 !important;
        animation:
            mobileHotspotAuraFINAL
            2.5s
            ease-in-out
            infinite !important;
    }
    /* -----------------------------------------------------
       4. 04 NEMA VIŠE NIKAKAV POSEBAN TRETMAN
    ----------------------------------------------------- */
    html body #anatomy
    .anatomy-callout-alcantara
    > .js-hotspot-aura {
        width: 48px !important;
        height: 48px !important;
        left: 50% !important;
        top: 50% !important;
        transform:
            translate(-50%, -50%)
            scale(1) !important;
        animation:
            mobileHotspotAuraFINAL
            2.5s
            ease-in-out
            infinite !important;
    }
}
/* 
   JEDINA MOBILE AURA ANIMACIJA
*/
@keyframes mobileHotspotAuraFINAL {
    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(.92);
        opacity: .35;
    }
    50% {
        transform:
            translate(-50%, -50%)
            scale(1.12);
        opacity: .75;
    }
}
/* 
   MOBILE ANATOMY — TOTALNI RESET ANIMACIJA
   TAČKE MIRUJU / SAMO AURA DIŠE
   SAMO TELEFON
*/
@media (max-width: 600px) {
    /* =====================================================
       1. SAME TAČKE — POTPUNO STATIČNE
    ===================================================== */
    html body #anatomy .anatomy-callout,
    html body #anatomy .anatomy-callout.mobile-active {
        animation: none !important;
        transition: none !important;
        scale: 1 !important;
        filter: none !important;
        /* NE DIRAMO left/top */
    }
    /* =====================================================
       2. STAKLENI KRUŽIĆ — POTPUNO STATIČAN
    ===================================================== */
    html body #anatomy
    .anatomy-callout
    .anatomy-callout-copy,
    html body #anatomy
    .anatomy-callout.mobile-active
    .anatomy-callout-copy {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        scale: 1 !important;
        filter: none !important;
    }
    /* =====================================================
       3. BROJEVI 01–05 — POTPUNO STATIČNI
    ===================================================== */
    html body #anatomy
    .anatomy-callout
    .anatomy-callout-copy > span,
    html body #anatomy
    .anatomy-callout.mobile-active
    .anatomy-callout-copy > span {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        scale: 1 !important;
        filter: none !important;
    }
    /* =====================================================
       4. GASIMO SVE STARE CSS AURE
    ===================================================== */
    html body #anatomy
    .anatomy-callout::before,
    html body #anatomy
    .anatomy-callout::after,
    html body #anatomy
    .anatomy-callout
    .anatomy-callout-copy::before,
    html body #anatomy
    .anatomy-callout
    .anatomy-callout-copy::after,
    html body #anatomy
    .anatomy-callout
    .anatomy-callout-copy > span::before,
    html body #anatomy
    .anatomy-callout
    .anatomy-callout-copy > span::after {
        animation: none !important;
        box-shadow: none !important;
        filter: none !important;
    }
    /* =====================================================
       5. 04 VIŠE NEMA NIKAKVU POSEBNU ANIMACIJU
    ===================================================== */
    html body #anatomy
    .anatomy-callout-alcantara::before,
    html body #anatomy
    .anatomy-callout-alcantara::after,
    html body #anatomy
    .anatomy-callout-alcantara
    .anatomy-callout-copy::before,
    html body #anatomy
    .anatomy-callout-alcantara
    .anatomy-callout-copy::after {
        animation: none !important;
        content: none !important;
        display: none !important;
        background: none !important;
        box-shadow: none !important;
        filter: none !important;
    }
    /* =====================================================
       6. JEDINA STVAR KOJA SME DA SE ANIMIRA = JS AURA
    ===================================================== */
    html body #anatomy
    .anatomy-callout {
        overflow: visible !important;
    }
    html body #anatomy
    .anatomy-callout
    > .js-hotspot-aura {
        display: block !important;
        visibility: visible !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        width: 50px !important;
        height: 50px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        /*
           NEŽNA BRAON AURA
        */
        background:
            radial-gradient(
                circle,
                rgba(180,122,69,.25) 0%,
                rgba(180,122,69,.16) 32%,
                rgba(180,122,69,.08) 55%,
                rgba(180,122,69,0) 78%
            ) !important;
        box-shadow:
            0 0 10px rgba(180,122,69,.16),
            0 0 20px rgba(180,122,69,.08) !important;
        filter: none !important;
        /*
           CENTAR JE ZAKUCAN.
           MENJA SE SAMO SCALE AURE.
        */
        transform:
            translate(-50%, -50%)
            scale(.85) !important;
        transform-origin:
            center center !important;
        pointer-events: none !important;
        z-index: -1 !important;
        animation:
            sefMobileAuraOnly
            2.4s
            ease-in-out
            infinite !important;
    }
}
/* 
   JEDINA ANIMACIJA KOJU SADA KORISTIMO
   MENJA SE SAMO AURA — TAČKA SE NE POMERA
*/
@keyframes sefMobileAuraOnly {
    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(.82);
        opacity: .30;
    }
    50% {
        transform:
            translate(-50%, -50%)
            scale(1.18);
        opacity: .80;
    }
}
/* MOBILE — 02 MALO NIŽE */
@media (max-width: 600px) {
    html body #anatomy .anatomy-callout-led {
        top: calc(44% + 10px) !important;
    }
}
/* MOBILE — 03 FINAL POZICIJA */
@media (max-width: 600px) {
    html body #anatomy .anatomy-callout-soft {
        transform: translate(-8px, 27px) !important;
    }
}
/* MOBILE — 03 POMERAJ: MALO GORE + MALO LEVO */
@media (max-width: 600px) {
    html body #anatomy .anatomy-callout-soft {
        translate: -10px -8px !important;
    }
}
/* 
   MOBILE — SEFKOMODA SIGNAL AURA
*/
@media (max-width: 600px) {
    #anatomy .anatomy-callout {
        overflow: visible !important;
    }
    /* potpuno NOV element — samo za auru */
    #anatomy .anatomy-callout > .sef-mobile-signal {
        display: block !important;
        visibility: visible !important;
        position: absolute !important;
        /* CENTAR TAČKICE */
        left: 50% !important;
        top: 50% !important;
        width: 42px !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        outline: none !important;
        border-radius: 50% !important;
        pointer-events: none !important;
        /* aura je IZA tačkice */
        z-index: -1 !important;
        /* nema oštrog kružnog obruba */
        background:
            radial-gradient(
                circle,
                rgba(222, 162, 104, .60) 0%,
                rgba(205, 143, 83, .40) 30%,
                rgba(180, 122, 69, .22) 50%,
                rgba(180, 122, 69, .08) 68%,
                rgba(180, 122, 69, 0) 82%
            ) !important;
        box-shadow:
            0 0 10px rgba(214, 151, 91, .28),
            0 0 20px rgba(180, 122, 69, .16) !important;
        transform-origin: center center !important;
        animation:
            sefMobileSignalNEW
            1.8s
            ease-out
            infinite !important;
    }
}
/* 
   AURA IZLAZI IZ TAČKE → ŠIRI SE → NESTAJE
*/
@keyframes sefMobileSignalNEW {
    0% {
        transform:
            translate(-50%, -50%)
            scale(.75);
        opacity: 0;
    }
    15% {
        transform:
            translate(-50%, -50%)
            scale(.95);
        opacity: .85;
    }
    45% {
        transform:
            translate(-50%, -50%)
            scale(1.25);
        opacity: .50;
    }
    75% {
        transform:
            translate(-50%, -50%)
            scale(1.55);
        opacity: .18;
    }
    100% {
        transform:
            translate(-50%, -50%)
            scale(1.75);
        opacity: 0;
    }
}
@media (max-width: 600px) {
    html body #anatomy
    .anatomy-callout > .sef-mobile-signal {
        left: 15px !important;
        top: 16px !important;
    }
}
/* 
   MOBILE — NAVBAR IKONE TAČNO VERTIKALNO CENTRIRANE
*/
@media (max-width: 600px) {
    /* sam navbar */
    header,
    .header,
    .navbar,
    .site-header {
        align-items: center !important;
    }
    /* LEVO — LOGO */
    .logo,
    .navbar-logo,
    .header-logo {
        align-self: center !important;
        top: auto !important;
        bottom: auto !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    /* DESNO — KORPICA */
    .cart-icon,
    .cart-button,
    .header-cart,
    .navbar-cart {
        align-self: center !important;
        top: auto !important;
        bottom: auto !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}
/* 
   FINAL MOBILE NAVBAR — PRAVI VERTIKALNI CENTAR
*/
@media (max-width: 600px) {
    html body #siteHeader {
        height: 54px !important;
        min-height: 54px !important;
        padding: 0 !important;
    }
    html body #siteHeader .navbar {
        height: 54px !important;
        min-height: 54px !important;
        padding: 0 !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    /* LOGO WRAPPER */
    html body #siteHeader .navbar-brand {
        height: 54px !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
        position: static !important;
        transform: none !important;
    }
    /* SAM LOGO */
    html body #siteHeader .navbar-logo-img {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
    }
    /* DESNA STRANA */
    html body #siteHeader .nav-actions {
        height: 54px !important;
        display: flex !important;
        align-items: center !important;
        margin: 0 0 0 auto !important;
        padding: 0 !important;
        position: static !important;
        transform: none !important;
    }
    /* KORPA */
    html body #siteHeader .nav-cart-button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
    }
}
/* 
   SAMO 03 SLIKE — POMERI DESNO NA SVIM TELEFONIMA
*/
@media (max-width: 600px) {
    html body #shop #offerMainImage[src$="black3.png"],
    html body #shop #offerMainImage[src$="bela3.png"],
    html body #shop #offerMainImage[src$="braon3.png"] {
        transform: translate3d(3px, 0, 0) !important;
        -webkit-transform: translate3d(3px, 0, 0) !important;
    }
}
/* MOBILE — strelice malo više ka ivicama */
@media (max-width: 600px) {
    html body #shop .signature-arrow-left {
        left: 1px !important;
    }
    html body #shop .signature-arrow-right {
        right: 1px !important;
    }
}
/* 
   MOBILE HOW — CONNECTOR ISTI KAO DESKTOP, VERTIKALNO
*/
@media (max-width: 600px) {
    html body #how .how-step-line {
        display: block !important;
        position: relative !important;
        width: 76px !important;
        height: 22px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    html body #how .how-step-line > span {
        display: block !important;
        position: absolute !important;
        /* tačno ispod centra kruga */
        left: 38px !important;
        top: -19px !important;
        /*
           Na desktopu je connector širok između krugova.
           Na telefonu ga okrećemo:
           70px desktop dužina -> 70px vertikalna dužina
           glass traka je 22px široka
        */
        width: 22px !important;
        height: 66px !important;
        transform: translateX(-50%) !important;
        border-radius: 0 !important;
        border-left: 1px solid rgba(158,116,62,.10) !important;
        border-right: 1px solid rgba(158,116,62,.10) !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
        background:
            linear-gradient(
                90deg,
                rgba(255,255,255,0) 0%,
                rgba(255,255,255,.55) 18%,
                rgba(158,116,62,.07) 48%,
                rgba(255,255,255,.55) 82%,
                rgba(255,255,255,0) 100%
            ) !important;
        box-shadow:
            inset 1px 0 0 rgba(255,255,255,.8),
            inset -1px 0 0 rgba(255,255,255,.8) !important;
        opacity: 1 !important;
    }
    /* centralna zlatna linija — ista kao desktop */
    html body #how .how-step-line > span::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    /* tanja i nežnija zlatna linija */
    width: 0.5px !important;
    height: 100% !important;
    transform: translateX(-50%) !important;
    background: rgba(158, 116, 62, .22) !important;
    border: 0 !important;
    box-shadow: none !important;
}
    html body #how .how-step-line > span::after {
        content: none !important;
        display: none !important;
    }
}
@media (max-width: 600px) {
    html body #how .how-step-line > span {
        top: -21px !important;
        height: 65px !important;
    }
}
@media (max-width: 600px) {
    html body #how .how-step-line > span::before {
        width: 0.35px !important;
        background: rgba(158, 116, 62, 0.16) !important;
    }
}
@media (max-width: 600px) {
    .signature-copy h1 {
        line-height: 1.04 !important;
    }
}
/* MOBILE — PREMIUM KOLONA ISTA KAO NA LAPTOPU */
@media (max-width: 600px) {
    #comparison .mobile-comparison-premium {
        background:
            linear-gradient(
                90deg,
                rgba(190,145,85,.03),
                rgba(190,145,85,.10)
            ) !important;
    }
    #comparison .mobile-comparison-premium .mobile-comparison-column-header,
    #comparison .mobile-comparison-premium .mobile-comparison-list,
    #comparison .mobile-comparison-premium .mobile-comparison-item {
        background: transparent !important;
    }
    #comparison .mobile-comparison-normal,
    #comparison .mobile-comparison-normal .mobile-comparison-column-header,
    #comparison .mobile-comparison-normal .mobile-comparison-list,
    #comparison .mobile-comparison-normal .mobile-comparison-item {
        background: transparent !important;
    }
}
/* 
   MOBILE — PREMIUM KOLONA 1:1 KAO DESKTOP
*/
@media (max-width: 600px) {
    #comparison .mobile-comparison-premium {
        background:
            linear-gradient(
                135deg,
                rgba(218,178,135,.12),
                rgba(255,255,255,.035)
            ) !important;
        -webkit-backdrop-filter:
            blur(18px) saturate(150%) !important;
        backdrop-filter:
            blur(18px) saturate(150%) !important;
    }
    /* SVI DELOVI DESNE KOLONE PROVIDNI
       da se vidi JEDAN gradient kroz celu kolonu */
    #comparison .mobile-comparison-premium
    .mobile-comparison-column-header,
    #comparison .mobile-comparison-premium
    .mobile-comparison-list,
    #comparison .mobile-comparison-premium
    .mobile-comparison-item {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
    }
}
@media (max-width: 600px) {
    /* DESNA KOLONA — HEADER */
    html body #comparison
    .mobile-comparison-table
    .mobile-comparison-premium
    .mobile-comparison-column-header {
        background: rgba(218, 178, 135, 0.055) !important;
    }
    html body #comparison
    .mobile-comparison-table
    .mobile-comparison-premium
    .mobile-comparison-item {
        background: rgba(218, 178, 135, 0.055) !important;
    }
    html body #comparison
    .mobile-comparison-table
    .mobile-comparison-normal
    .mobile-comparison-column-header,
    html body #comparison
    .mobile-comparison-table
    .mobile-comparison-normal
    .mobile-comparison-item {
        background: rgba(255, 255, 255, 0.55) !important;
    }
}
/* 
   MOBILE PERFORMANCE
*/
@media (max-width: 600px) {
    /* elementi daleko ispod hero-a ne opterećuju prvi render */
    #how,
    #anatomy,
    #comparison,
    #reviews,
    #faq {
        content-visibility: auto !important;
        contain-intrinsic-size: auto 850px;
    }
    /* GPU raster optimization */
    .signature-product-image {
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
}