/* LXR / Apple × Ferrari — complete home page */
:root{--ink:#0b0b0b;--muted:#727272;--line:#d9d9db;--silver:#8c8985;--white:#f5f5f7;--gold:#b99238}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--white);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}.header{height:82px;padding:0 5.2%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;position:relative;z-index:30;background:var(--white);border-bottom:1px solid #e5e5e5}.logo{grid-column:1;grid-row:1;justify-self:start}.logo img,.footer-logo img{display:block;width:78px;height:48px;object-fit:contain}.nav{grid-column:2;grid-row:1;display:flex;gap:38px;align-items:center}.nav a{font-size:11px;letter-spacing:.065em;font-weight:600;color:#777;white-space:nowrap;transition:color .2s}.nav a:hover,.nav a.active{color:#0b0b0b}.nav a.active{border-bottom:1px solid #111;padding-bottom:8px}.cart-button{grid-column:3;grid-row:1;justify-self:end;display:flex;position:relative;border:0;background:transparent;padding:10px;color:#111}.cart-count{position:absolute;top:0;right:0;background:#b99238;color:white;border-radius:100%;font-size:10px;width:17px;height:17px;display:grid;place-items:center}.menu-toggle{display:none}
.hero{min-height:min(790px,calc(100svh - 82px));display:grid;grid-template-columns:52% 48%;align-items:center;overflow:hidden;position:relative}.hero-copy{padding:40px 0 65px clamp(35px,5.4vw,110px);position:relative;z-index:2}.hero h1{font-size:clamp(49px,5.5vw,96px);letter-spacing:-.07em;line-height:1.06;font-weight:760;margin:0;white-space:nowrap}.hero h1 span{color:#8c8985}.hero-copy>p{max-width:580px;color:#696969;font-size:clamp(14px,1.08vw,17px);line-height:1.7;margin:30px 0 0}.hero-cta{display:flex;align-items:center;gap:35px;margin-top:38px}.btn{min-height:55px;display:inline-flex;align-items:center;justify-content:center;padding:0 29px;border-radius:6px;font-size:11px;letter-spacing:.08em;font-weight:750;transition:transform .25s,background .25s}.btn:hover{transform:translateY(-3px)}.btn-black{background:#0b0b0b;color:#fff}.btn-black:hover{background:#303030}.text-cta{display:inline-flex;gap:22px;align-items:center;font-size:11px;font-weight:750;letter-spacing:.07em;padding-bottom:8px;border-bottom:1px solid #111;white-space:nowrap}.text-cta span{font-size:20px;font-weight:400}.hero-product{height:100%;display:flex;align-items:center;justify-content:flex-start}.hero-product img{width:120%;max-width:none;height:auto;object-fit:contain;transform:translateX(-2%);filter:drop-shadow(0 25px 18px rgba(0,0,0,.16))}
.section{padding:120px clamp(25px,5.4vw,110px)}.section-index{display:flex;justify-content:space-between;border-top:1px solid currentColor;padding-top:18px;opacity:.5;font-size:10px;font-weight:750;letter-spacing:.16em;margin-bottom:82px}.statement{background:#fff}.statement-grid{display:grid;grid-template-columns:1.1fr .75fr;gap:11vw;align-items:start}.statement h2{font-size:clamp(54px,6.6vw,116px);line-height:1.03;letter-spacing:-.075em;font-weight:750;margin:0}.statement h2 em{font-style:normal;color:#929292}.statement-right{padding-top:12px}.statement-right p{font-size:15px;line-height:1.85;color:#707070;max-width:450px}.statement-right .statement-lead{font-size:clamp(23px,2.1vw,34px);line-height:1.25;color:#111;font-weight:650;letter-spacing:-.04em;margin-top:0;margin-bottom:28px}.underlined-link{margin-top:32px;padding-bottom:12px;display:inline-flex;gap:40px;border-bottom:1px solid #111;font-size:11px;font-weight:750;letter-spacing:.08em}.spec-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:120px;border-top:1px solid #ddd;border-bottom:1px solid #ddd}.spec-strip>div{padding:30px 16px 30px 0;display:flex;gap:22px;align-items:center;border-right:1px solid #ddd}.spec-strip>div:last-child{border-right:0;padding-left:22px}.spec-strip>div:nth-child(2){padding-left:22px}.spec-number{font-size:11px;color:#999}.spec-strip strong{font-size:11px;letter-spacing:.08em}
.process{background:#111;color:#f5f5f7}.process-heading{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:100px}.process-heading h2{font-size:clamp(62px,7.5vw,132px);letter-spacing:-.078em;line-height:1.02;margin:0}.process-heading h2 span{color:#777}.process-heading p{color:#aaa;max-width:290px;line-height:1.8;font-size:14px}.process-rows{border-top:1px solid #444}.process-row{display:grid;grid-template-columns:70px 1fr 1fr 30px;align-items:center;gap:28px;min-height:155px;padding:25px 0;border-bottom:1px solid #444;transition:padding .25s,background .25s}.process-row:hover{padding-left:16px;background:#1b1b1b}.row-no{font-size:12px;color:#999}.process-row h3{font-size:clamp(22px,2.15vw,34px);letter-spacing:-.045em;margin:0;font-weight:620}.process-row p{color:#aaa;font-size:13px;line-height:1.75;max-width:440px}.row-arrow{font-size:22px;color:#aaa}
.faq{background:#f5f5f7}.faq-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:10vw}.faq-intro h2{font-size:clamp(49px,5vw,88px);line-height:1.07;letter-spacing:-.07em;margin:0}.faq-intro h2 span{color:#919191}.faq-intro>p{color:#777;font-size:14px;line-height:1.7;max-width:310px;margin-top:30px}.faq-list{border-top:1px solid #c9c9c9}.faq-list details{border-bottom:1px solid #c9c9c9}.faq-list summary{list-style:none;display:grid;grid-template-columns:30px 1fr 30px;gap:12px;align-items:center;padding:28px 0;cursor:pointer;font-size:17px;font-weight:600;letter-spacing:-.02em}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{font-size:11px;color:#999}.faq-list summary b{font-size:24px;font-weight:350;justify-self:end;transition:transform .25s}.faq-list details[open] summary b{transform:rotate(45deg)}.faq-list details>p{color:#777;font-size:14px;line-height:1.8;padding:0 40px 28px 42px;margin:0}
.reviews{background:#e8e8e9}.reviews-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:55px}.reviews-heading h2{font-size:clamp(55px,6vw,105px);letter-spacing:-.075em;line-height:1.03;margin:0}.reviews-heading h2 span{color:#8b8b8b}.reviews-heading p{max-width:230px;color:#777;font-size:14px;line-height:1.7}.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.review{min-height:345px;border:1px solid #c8c8c8;padding:32px;display:flex;flex-direction:column;background:#f1f1f1}.review-top{display:flex;justify-content:space-between;gap:10px;align-items:center}.review-top>span{color:#b99238;letter-spacing:.15em;font-size:12px}.review-top small{font-size:9px;letter-spacing:.07em;color:#777}.review blockquote{margin:auto 0;font-size:clamp(21px,2.05vw,30px);line-height:1.3;font-weight:570;letter-spacing:-.035em}.review-bottom{border-top:1px solid #ccc;padding-top:22px;display:flex;justify-content:space-between;gap:10px;font-size:10px}.review-bottom span{color:#888;text-align:right}
.final-cta{background:#111;color:white;min-height:620px;display:flex;align-items:center;position:relative;overflow:hidden}.cta-inner{z-index:2;position:relative}.final-cta h2{font-size:clamp(66px,8vw,150px);letter-spacing:-.085em;line-height:.99;margin:0 0 44px}.final-cta h2 span{color:#8e8e8e}.btn-white{background:white;color:#111;gap:50px}.btn-white span{font-size:19px}.cta-monogram{position:absolute;right:-3%;bottom:-24%;font-size:clamp(230px,35vw,650px);font-weight:850;letter-spacing:-.12em;color:#1b1b1b;line-height:1;user-select:none}
.footer{background:#080808;color:white;padding:85px clamp(25px,5.4vw,110px) 25px}.footer-main{display:grid;grid-template-columns:2fr 1fr 1fr;gap:55px;padding-bottom:100px}.footer-main>div{display:flex;flex-direction:column;align-items:flex-start;gap:16px}.footer-main p{max-width:320px;color:#999;font-size:14px;line-height:1.7}.footer-main a:not(.footer-logo){font-size:13px;color:#bbb}.footer-main a:hover{color:white}.footer-label{font-size:10px;letter-spacing:.16em;color:#777;margin-bottom:10px}.footer-bottom{border-top:1px solid #333;padding-top:25px;display:flex;justify-content:space-between;gap:20px;color:#777;font-size:10px;letter-spacing:.08em}
.cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:100;opacity:0;visibility:hidden;transition:.3s}.cart-drawer{position:fixed;right:0;top:0;height:100dvh;width:min(440px,100%);background:#f5f5f7;color:#111;z-index:101;padding:35px;transform:translateX(100%);transition:transform .35s;display:flex;flex-direction:column}.cart-open{overflow:hidden}.cart-open .cart-overlay{opacity:1;visibility:visible}.cart-open .cart-drawer{transform:translateX(0)}.cart-header{display:flex;justify-content:space-between;border-bottom:1px solid #ddd;padding-bottom:25px}.cart-label{font-size:10px;letter-spacing:.15em;color:#888}.cart-header h2{font-size:35px;margin:7px 0}.cart-close{border:0;background:none;font-size:30px}.cart-empty{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#777;font-size:14px}.cart-empty a{border-bottom:1px solid #111;padding-bottom:8px;color:#111;font-weight:650;font-size:12px}.reveal{opacity:0;transform:translateY(25px);transition:opacity .7s,transform .7s}.reveal.visible{opacity:1;transform:none}
@media(max-width:1100px){.nav{gap:18px}.nav a{font-size:10px}.hero h1{font-size:5.4vw}.hero-copy>p{font-size:14px}.hero-cta{gap:20px}.btn{padding:0 20px}.statement-grid{gap:5vw}.faq-grid{gap:5vw}}
@media(max-width:800px){
.header{height:68px;padding:0 22px}.menu-toggle{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:center;gap:6px;border:0;background:none;width:34px;height:40px;padding:5px}.menu-toggle span{height:1.5px;width:23px;background:#111}.logo{grid-column:2;justify-self:center}.logo img{width:72px}.cart-button{grid-column:3}.nav{display:none;position:absolute;top:68px;left:0;right:0;background:#f5f5f7;padding:28px 25px;box-shadow:0 15px 25px #0001;flex-direction:column;align-items:flex-start;gap:25px}.nav.open{display:flex}.nav a{font-size:13px}.hero{display:flex;flex-direction:column-reverse;min-height:0;padding-bottom:55px}.hero-product{height:clamp(250px,72vw,460px);width:100%;overflow:hidden;justify-content:center;flex:none}.hero-product img{width:min(118%,670px);transform:translate(14%,0)}.hero-copy{padding:0 25px;width:100%;max-width:650px}.hero h1{font-size:clamp(36px,8.6vw,65px);letter-spacing:-.065em}.hero-copy>p{font-size:15px;margin-top:24px}.hero-cta{flex-direction:column;align-items:stretch;gap:25px;margin-top:28px}.hero-cta .btn{width:100%}.text-cta{align-self:center}.section{padding:80px 25px}.section-index{margin-bottom:50px}.statement-grid,.faq-grid{grid-template-columns:1fr;gap:40px}.statement h2{font-size:clamp(49px,10vw,78px)}.spec-strip{margin-top:65px;grid-template-columns:1fr}.spec-strip>div,.spec-strip>div:nth-child(2),.spec-strip>div:last-child{padding:20px 0;border-right:0;border-bottom:1px solid #ddd}.spec-strip>div:last-child{border-bottom:0}.process-heading,.reviews-heading{display:block;margin-bottom:50px}.process-heading h2,.reviews-heading h2{font-size:clamp(52px,10vw,90px)}.process-heading p,.reviews-heading p{margin-top:24px}.process-row{grid-template-columns:32px 1fr 22px;gap:15px;padding:24px 0;min-height:0}.process-row h3{font-size:23px}.process-row p{grid-column:2;grid-row:2;margin:0}.row-arrow{grid-column:3;grid-row:1}.faq-intro h2{font-size:clamp(46px,9vw,72px)}.reviews-grid{grid-template-columns:1fr}.review{min-height:270px}.review blockquote{font-size:26px}.final-cta{min-height:460px}.final-cta h2{font-size:clamp(53px,10vw,85px)}.cta-monogram{font-size:50vw;bottom:-8%}.footer-main{grid-template-columns:1fr 1fr;gap:45px}.footer-main>div:first-child{grid-column:1/-1}.footer-bottom{flex-direction:column}
}
@media(max-width:380px){.hero h1{font-size:8.3vw}.hero-copy{padding:0 20px}.hero-product{height:250px}.section{padding:70px 20px}.faq-list summary{font-size:15px}.review{padding:24px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}}
/* =========================================
   LXR HERO — ZLATNI NASLOV
========================================= */

.hero h1 span {
    color: #DFBD4D;
}
/* =========================================
   LXR — HERO CARD POSITION + 3D ANIMATION
   SAMO DESKTOP
========================================= */

@media (min-width: 901px) {

    /* Kartica se pomera ulevo */

    .hero-product img {
        width: 100%;
        max-width: 100%;

        transform: translateX(-12%);

        transform-origin: center center;

        animation: lxrCardMotion 5s ease-in-out infinite;

        will-change: transform;
    }

    /* Automatska 3D animacija */

    @keyframes lxrCardMotion {

        0%, 65%, 100% {
            transform:
                translateX(-12%)
                rotateY(0deg)
                rotateZ(0deg)
                scale(1);
        }

        72% {
            transform:
                translateX(-12%)
                rotateY(-5deg)
                rotateZ(-1deg)
                scale(1.015);
        }

        82% {
            transform:
                translateX(-12%)
                rotateY(4deg)
                rotateZ(0.5deg)
                scale(1.01);
        }

        92% {
            transform:
                translateX(-12%)
                rotateY(0deg)
                rotateZ(0deg)
                scale(1);
        }
    }

    /* Dubina 3D efekta */

    .hero-product {
        perspective: 1200px;
        overflow: visible;
    }
}

/* Na telefonu nema animacije */

@media (max-width: 900px) {

    .hero-product img {
        animation: none !important;
    }
}

/* Pristupačnost */

@media (prefers-reduced-motion: reduce) {

    .hero-product img {
        animation: none !important;
    }
}
/* LXR — UKLANJANJE ANIMACIJE KARTICE */

.hero-product img {
    animation: none !important;
    transition: none !important;
}
/* =========================================
   LXR — FINAL CTA + FOOTER
   KOMPAKTNIJI PREMIUM DIZAJN
========================================= */

/* GLAVNA SEKCIJA */

.final-cta {
    min-height: 380px !important;
    padding: 75px 5.4% !important;

    display: flex;
    align-items: center;

    position: relative;
    overflow: hidden;

    background: #111111;
}

/* SADRŽAJ */

.final-cta .cta-inner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1250px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* NASLOV */

.final-cta h2 {
    font-size: clamp(48px, 5.5vw, 85px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.065em !important;

    margin: 0 0 30px !important;
}

/* DRUGI RED NASLOVA */

.final-cta h2 span {
    color: #858585;
}

/* DUGME */

.final-cta .btn-white {
    min-height: 52px;
    padding: 0 28px;

    border-radius: 5px;
}

/* LXR MONOGRAM U POZADINI */

.final-cta .cta-monogram {
    position: absolute;

    right: -1%;
    bottom: -18%;

    font-size: clamp(180px, 25vw, 390px) !important;

    line-height: 1;
    opacity: 0.55;

    pointer-events: none;
}

/* FOOTER — MANJI RAZMAK NA VRHU */

.footer {
    padding-top: 65px !important;
}

.footer-main {
    padding-bottom: 65px !important;
}

/* =========================================
   MOBILNA VERZIJA
========================================= */

@media (max-width: 800px) {

    .final-cta {
        min-height: 320px !important;
        padding: 65px 25px !important;
    }

    .final-cta h2 {
        font-size: clamp(42px, 9vw, 65px) !important;
        margin-bottom: 28px !important;
    }

    .final-cta .cta-monogram {
        font-size: 48vw !important;
        right: -5%;
        bottom: -8%;
        opacity: 0.35;
    }

    .footer {
        padding-top: 50px !important;
    }

    .footer-main {
        padding-bottom: 45px !important;
    }
}
/* =========================================
   LXR — CREDIT CARD REVIEWS
   INFINITE LOOP
========================================= */

.reviews {
    overflow: hidden;
}

/* PROSTOR ZA KARTICE */

.reviews-grid {
    display: flex !important;
    grid-template-columns: none !important;

    gap: 24px;

    width: max-content;

    animation: lxrReviewsLoop 30s linear infinite;
}

/* KREDITNE KARTICE */

.reviews-grid .review {
    flex: 0 0 420px;

    width: 420px;
    height: 265px;
    min-height: 265px;

    padding: 28px 32px;

    border: 1px solid #bcbcbc;
    border-radius: 17px;

    background: transparent !important;

    box-shadow: none !important;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    transition: border-color 0.3s ease;
}

/* HOVER */

.reviews-grid .review:hover {
    border-color: #b99238;
}

/* TEKST RECENZIJE */

.reviews-grid .review blockquote {
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: -0.03em;

    margin: auto 0;
}

/* DONJI DEO */

.reviews-grid .review-bottom {
    padding-top: 16px;
}

/* BESKONAČNO KRETANJE */

@keyframes lxrReviewsLoop {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* PAUZA KADA SE PREĐE MIŠEM */

.reviews-grid:hover {
    animation-play-state: paused;
}

/* MOBILNA VERZIJA */

@media (max-width: 800px) {

    .reviews-grid {
        gap: 15px;
        animation-duration: 24s;
    }

    .reviews-grid .review {
        flex: 0 0 310px;

        width: 310px;
        height: 196px;
        min-height: 196px;

        padding: 20px;
        border-radius: 13px;
    }

    .reviews-grid .review blockquote {
        font-size: 15px;
    }

    .reviews-grid .review-top small {
        font-size: 8px;
    }
}
/* =========================================
   LXR — INFINITE REVIEWS CAROUSEL
========================================= */

/* Sekcija */

.reviews {
    overflow: hidden !important;
}

/* Carousel */

.reviews-grid {
    display: flex !important;
    grid-template-columns: none !important;

    gap: 24px !important;

    width: max-content !important;

    animation: lxrInfiniteReviews 55s linear infinite !important;

    will-change: transform;
}

/* Kreditne kartice */

.reviews-grid .review {
    flex: 0 0 420px !important;

    width: 420px !important;
    height: 265px !important;
    min-height: 265px !important;

    padding: 28px 32px !important;

    border: 1px solid #bcbcbc !important;
    border-radius: 17px !important;

    background: transparent !important;
    box-shadow: none !important;
}

/* Animacija */

@keyframes lxrInfiniteReviews {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(
            calc(-50% - 12px)
        );
    }
}

/* Pauza kada miš pređe preko kartica */

.reviews-grid:hover {
    animation-play-state: paused !important;
}

/* Mobilna verzija */

@media (max-width: 800px) {

    .reviews-grid {
        gap: 16px !important;
        animation-duration: 45s !important;
    }

    .reviews-grid .review {
        flex: 0 0 310px !important;

        width: 310px !important;
        height: 196px !important;
        min-height: 196px !important;

        padding: 20px !important;
        border-radius: 13px !important;
    }

    .reviews-grid .review blockquote {
        font-size: 15px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reviews-grid {
        animation: none !important;
    }
}
/* =========================================
   LXR — PREMIUM LIQUID GLASS REVIEWS
   APPLE GLASS × LXR LUXURY
========================================= */

/* KARTICE */

.reviews-grid .review {
    position: relative !important;
    isolation: isolate;

    overflow: hidden !important;

    /* Providno staklo */
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.48) 0%,
        rgba(255, 255, 255, 0.16) 45%,
        rgba(255, 255, 255, 0.32) 100%
    ) !important;

    /* Glass efekat */
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);

    /* Staklena ivica */
    border: 1px solid rgba(255, 255, 255, 0.75) !important;

    border-radius: 19px !important;

    /* Dubina i refleksija */
    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(255, 255, 255, 0.3) !important;

    transition:
        border-color 0.4s ease,
        box-shadow 0.4s ease !important;
}


/* =========================================
   REFLEKSIJA NA POVRŠINI STAKLA
========================================= */

.reviews-grid .review::before {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: inherit;

    background: linear-gradient(
        115deg,
        rgba(255, 255, 255, 0.48) 0%,
        rgba(255, 255, 255, 0.12) 25%,
        transparent 48%,
        rgba(255, 255, 255, 0.15) 75%,
        rgba(255, 255, 255, 0.3) 100%
    );

    pointer-events: none;

    z-index: 0;
}


/* =========================================
   TANKA REFLEKSIJA PRI VRHU
========================================= */

.reviews-grid .review::after {
    content: "";

    position: absolute;

    top: 1px;
    left: 8%;
    right: 8%;

    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.95),
        transparent
    );

    pointer-events: none;
}


/* =========================================
   SADRŽAJ IZNAD STAKLA
========================================= */

.reviews-grid .review > * {
    position: relative;
    z-index: 2;
}


/* =========================================
   HOVER — DISKRETAN ZLATNI ODSJAJ
========================================= */

.reviews-grid .review:hover {
    border-color: rgba(190, 153, 66, 0.55) !important;

    box-shadow:
        0 16px 42px rgba(0, 0, 0, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 0 22px rgba(190, 153, 66, 0.07) !important;
}


/* =========================================
   ZLATNE ZVEZDICE
========================================= */

.reviews-grid .review-top > span {
    color: #C29B43 !important;

    letter-spacing: 3px;
}


/* =========================================
   DONJA LINIJA
========================================= */

.reviews-grid .review-bottom {
    border-top: 1px solid rgba(100, 100, 100, 0.17) !important;
}


/* =========================================
   MOBILNA VERZIJA
========================================= */

@media (max-width: 800px) {

    .reviews-grid .review {
        border-radius: 15px !important;

        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);

        box-shadow:
            0 8px 24px rgba(0, 0, 0, 0.05),
            inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    }

}
/* LXR — LOOP SE NE ZAUSTAVLJA NA HOVER */

.reviews-grid:hover {
    animation-play-state: running !important;
}
/* =========================================
   LXR — REVIEWS TITLE
   PREMIUM TYPOGRAPHY
========================================= */

/* CEO NASLOV */

.reviews-heading h2 {
    letter-spacing: -0.045em !important;
    line-height: 1.12 !important;
}

/* VAŠE PERSPEKTIVE — ZLATNA */

.reviews-heading h2 span {
    color: #DFBD4D !important;
    letter-spacing: -0.035em !important;
}

/* MOBILNA VERZIJA */

@media (max-width: 800px) {
    .reviews-heading h2 {
        letter-spacing: -0.035em !important;
        line-height: 1.15 !important;
    }

    .reviews-heading h2 span {
        letter-spacing: -0.025em !important;
    }
}
/* =========================================
   LXR — TOPLA BELA POZADINA
========================================= */

body {
    background: #f8f7f3;
}

/* O NAMA */
.statement {
    background: #f8f7f3;
}

/* KAKO FUNKCIONISE */
.process {
    background: #f8f7f3;
    color: #0b0b0b;
}

/* PITANJA KUPACA */
.faq {
    background: #f8f7f3;
}

/* RECENZIJE */
.reviews {
    background: #f8f7f3;
}
/* =========================================
   LXR — HERO CARD SIZE & ROTATION
========================================= */

.hero-product img {
    width: 135%;
    max-width: none;
    height: auto;
    object-fit: contain;

    transform: translateX(-8%) rotate(-12deg);

    filter: drop-shadow(
        0 25px 18px rgba(0, 0, 0, 0.16)
    );
}

/* MOBILE */

@media (max-width: 800px) {
    .hero-product img {
        width: 115%;
        transform: translateX(8%) rotate(-8deg);
    }
}
/* =========================================
   LUXXOR — LIQUID GLASS PROCESS
========================================= */

.lxr-process {
    background: #f8f7f3 !important;
    padding: 65px 5.5% 85px !important;
    color: #111;
}


/* =========================================
   HEADING
========================================= */

.lxr-process-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;

    margin: 50px 0 55px;
}

.lxr-process-heading h2 {
    font-size: clamp(45px, 5vw, 78px);
    font-weight: 750;
    letter-spacing: -0.065em;
    line-height: 1.05;
    margin: 0;
}

.lxr-process-heading h2 span {
    color: #929292;
}

.lxr-process-heading > p {
    max-width: 300px;
    font-size: 14px;
    line-height: 1.8;
    color: #777;
    margin: 0;
}


/* =========================================
   GRID
========================================= */

.lxr-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}


/* =========================================
   GLASS CARD
========================================= */

.lxr-glass-card {
    position: relative;

    min-width: 0;
    min-height: 440px;

    padding: 28px 25px 32px;

    display: flex;
    flex-direction: column;
    align-items: center;

    border-radius: 24px;

    background: rgba(255, 255, 255, 0.42);

    border: 1px solid rgba(255, 255, 255, 0.9);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.035),
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(0, 0, 0, 0.025);

    overflow: hidden;
}


/* SUBTLE GLASS REFLECTION */

.lxr-glass-card::before {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: inherit;

    background: linear-gradient(
        145deg,
        rgba(255,255,255,0.55) 0%,
        rgba(255,255,255,0.08) 35%,
        transparent 65%
    );

    pointer-events: none;
}


/* =========================================
   NUMBER
========================================= */

.lxr-card-number {
    position: relative;
    z-index: 2;

    align-self: flex-start;

    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.05em;

    color: #b99238;
}


/* =========================================
   CIRCULAR VISUAL
========================================= */

.lxr-icon-circle {
    position: relative;
    z-index: 2;

    width: 175px;
    height: 175px;

    flex-shrink: 0;

    margin: 18px auto 28px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255,255,255,0.48);

    border: 1px solid rgba(180,170,150,0.25);

    box-shadow:
        inset 0 2px 8px rgba(255,255,255,0.8),
        0 5px 18px rgba(0,0,0,0.025);
}


/* SVG ICONS */

.lxr-icon-circle svg {
    width: 95px;
    height: 95px;

    color: #171717;
}


/* =========================================
   CARD SLIDER
========================================= */

.lxr-card-slider {
    overflow: hidden;
}

.lxr-slide {
    position: absolute;

    width: 145px;
    height: 110px;

    object-fit: contain;

    opacity: 0;

    transform: translateY(6px);

    transition:
        opacity 0.65s ease,
        transform 0.65s ease;
}

.lxr-slide.active {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================
   TEXT
========================================= */

.lxr-card-text {
    position: relative;
    z-index: 2;

    width: 100%;
    margin-top: 0;
}

.lxr-card-text h3 {
    font-size: 21px;
    font-weight: 700;

    line-height: 1.2;
    letter-spacing: -0.045em;

    margin: 0 0 15px;

    color: #111;
}

.lxr-card-text p {
    font-size: 13px;
    line-height: 1.75;

    color: #666;

    margin: 0;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .lxr-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lxr-glass-card {
        min-height: 390px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .lxr-process {
        padding: 50px 20px 70px !important;
    }

    .lxr-process-heading {
        display: block;
        margin: 35px 0 35px;
    }

    .lxr-process-heading h2 {
        font-size: clamp(38px, 10vw, 55px);
    }

    .lxr-process-heading > p {
        margin-top: 20px;
        max-width: 320px;
    }

    .lxr-process-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .lxr-glass-card {
        min-height: 350px;
        padding: 25px;
    }

    .lxr-icon-circle {
        width: 150px;
        height: 150px;
        margin: 15px auto 25px;
    }

    .lxr-icon-circle svg {
        width: 85px;
        height: 85px;
    }

    .lxr-slide {
        width: 125px;
        height: 95px;
    }

    .lxr-card-text h3 {
        font-size: 22px;
    }

    .lxr-card-text p {
        font-size: 14px;
    }

}
/* ==========================================
   LXR — GLOBAL TYPOGRAPHY
========================================== */

@font-face {
    font-family: "Instrument Serif";
    src: url("fonts/InstrumentSerif-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Instrument Serif";
    src: url("fonts/InstrumentSerif-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* OSNOVNI FONT */

body {
    font-family: Arial, Helvetica, sans-serif;
}

/* NASLOVI */

h1,
h2,
h3 {
    font-family: "Instrument Serif", Georgia, serif;
    font-weight: 400;
    letter-spacing: -1.5px;
}

/* NAVIGACIJA, DUGMAD I OPISI */

nav,
button,
p,
.product-price {
    font-family: Arial, Helvetica, sans-serif;
}
/* =========================================================
   LXR — CREATE CARD PAGE
   ========================================================= */

.builder-page {
    margin: 0;
    background: #f8f7f4;
    color: #151515;
    font-family: Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.builder-page * {
    box-sizing: border-box;
}

.builder-page button,
.builder-page input,
.builder-page textarea {
    font: inherit;
}

/* TOP BAR */

.builder-announcement {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    min-height: 34px;
    padding: 8px 16px;
    background: #171717;
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
}

.announcement-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #c49a3a;
}

/* NAVBAR */

.builder-header {
    min-height: 88px;
    padding: 0 6%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: #f7f7f9;
    border-bottom: 1px solid #e8e7e4;
}

.builder-logo {
    color: #c7a044;
    font-family: Georgia, serif;
    font-size: 46px;
    font-weight: 700;
    letter-spacing: -5px;
    text-decoration: none;
}

.builder-nav {
    display: flex;
    align-items: center;
    gap: clamp(16px, 3vw, 44px);
}

.builder-nav a {
    color: #777;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.1px;
    white-space: nowrap;
    padding: 10px 0;
    border-bottom: 1px solid transparent;
    transition: color .2s ease;
}

.builder-nav a:hover,
.builder-nav a.active {
    color: #171717;
    border-bottom-color: #171717;
}

.builder-cart {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #151515;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
}

.builder-cart-count {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #c49a3a;
    color: white;
    font-size: 11px;
}

/* MAIN LAYOUT */

.card-builder {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
    align-items: start;
    min-height: calc(100vh - 122px);
}

.builder-preview {
    position: sticky;
    top: 0;
    min-width: 0;
    height: 100vh;
    background: #f2f0eb;
    border-right: 1px solid #e6e2da;
}

.preview-inner {
    width: min(100%, 720px);
    min-height: 100%;
    margin: 0 auto;
    padding: clamp(32px, 5vw, 76px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 36px;
}

/* PREVIEW HEADING */

.preview-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
}

.preview-step {
    display: block;
    margin-bottom: 24px;
    color: #b78e35;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.preview-heading h1 {
    margin: 0;
    font-family: Georgia, serif;
    font-size: clamp(38px, 4vw, 65px);
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -2px;
}

.preview-heading h1 span {
    color: #bd9135;
    font-style: italic;
}

.preview-heading p {
    max-width: 170px;
    margin: 0 0 5px;
    color: #85817b;
    font-size: 12px;
    line-height: 1.8;
}

/* CARD PREVIEW */

.card-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 35px;
    padding: 35px 0;
}

.builder-card {
    position: relative;
    width: min(100%, 450px);
    aspect-ratio: 1.586;
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(
        125deg,
        #080808 0%,
        #292929 32%,
        #111 65%,
        #252525 100%
    );
    box-shadow:
        0 28px 50px rgba(0,0,0,.16),
        inset 0 1px 1px rgba(255,255,255,.22);
    transform: perspective(1200px) rotateY(-4deg);
    transition:
        background .3s ease,
        transform .4s ease;
}

.builder-chip {
    position: absolute;
    top: 27%;
    left: 10%;
    width: 48px;
    height: 36px;
    border-radius: 7px;
    border: 1px solid #9c782b;
    background: linear-gradient(
        135deg,
        #f1d681,
        #bd8e30 50%,
        #e9c66e
    );
    overflow: hidden;
}

.builder-chip span {
    position: absolute;
    background: rgba(112,79,20,.55);
}

.builder-chip span:nth-child(1) {
    width: 1px;
    height: 100%;
    left: 50%;
}

.builder-chip span:nth-child(2) {
    width: 100%;
    height: 1px;
    top: 50%;
}

.builder-chip span:nth-child(3) {
    width: 14px;
    height: 1px;
    top: 25%;
    left: 0;
}

.builder-chip span:nth-child(4) {
    width: 14px;
    height: 1px;
    bottom: 25%;
    right: 0;
}

.builder-card-logo {
    position: absolute;
    right: 9%;
    top: 10%;
    color: #d5b25b;
    font-family: Georgia, serif;
    font-size: 26px;
    letter-spacing: -2px;
}

.builder-custom-text {
    position: absolute;
    bottom: 17%;
    left: 10%;
    max-width: 80%;
    color: #d5b25b;
    font-size: 17px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.preview-material {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #77736e;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.material-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #111;
    border: 1px solid #ddd;
}

.preview-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.preview-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d0cdc7;
    cursor: pointer;
}

.preview-dot.active {
    width: 25px;
    border-radius: 10px;
    background: #bd9135;
}

/* RIGHT SIDE */

.builder-options {
    min-width: 0;
    background: #fbfaf8;
}

.options-inner {
    width: min(100%, 720px);
    margin: 0 auto;
    padding: clamp(28px, 4vw, 65px);
}

.builder-product-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 40px;
}

.builder-small-label {
    display: block;
    margin-bottom: 15px;
    color: #b58c35;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.builder-product-top h2 {
    margin: 0 0 14px;
    font-family: Georgia, serif;
    font-size: clamp(30px, 3vw, 46px);
    font-weight: 400;
    letter-spacing: -1px;
}

.builder-product-top p {
    max-width: 360px;
    margin: 0;
    color: #898681;
    font-size: 13px;
    line-height: 1.8;
}

.builder-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    white-space: nowrap;
}

.builder-price span {
    color: #999;
    font-size: 10px;
    letter-spacing: 1.5px;
}

.builder-price strong {
    font-size: 18px;
}

/* ACCORDION */

.builder-accordion {
    border-top: 1px solid #e7e3dc;
}

.accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 25px 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.accordion-left {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.accordion-number {
    padding-top: 4px;
    color: #bd9135;
    font-size: 12px;
    font-weight: 700;
}

.accordion-left strong {
    display: block;
    margin-bottom: 7px;
    color: #171717;
    font-size: 15px;
    font-weight: 600;
}

.accordion-value {
    display: block;
    color: #96928d;
    font-size: 12px;
}

.accordion-plus {
    color: #a7894a;
    font-size: 26px;
    font-weight: 300;
    transition: transform .25s ease;
}

.builder-accordion.open .accordion-plus {
    transform: rotate(45deg);
}

.accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
}

.builder-accordion.open .accordion-content {
    grid-template-rows: 1fr;
}

.accordion-content-inner {
    min-height: 0;
    overflow: hidden;
}

.builder-accordion.open .accordion-content-inner {
    padding-bottom: 28px;
}

.option-helper {
    margin: 0 0 20px;
    color: #8a8781;
    font-size: 13px;
}

/* MODEL OPTIONS */

.model-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.model-option {
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 100px;
    padding: 18px;
    border: 1px solid #e5e1d9;
    border-radius: 12px;
    background: #fff;
    text-align: left;
    cursor: pointer;
}

.model-option.active {
    border-color: #bd9135;
    background: #faf7ef;
}

.model-option strong {
    display: block;
    font-size: 13px;
}

.model-option small {
    display: block;
    margin-top: 5px;
    color: #999;
    font-size: 11px;
}

.model-card-preview {
    display: block;
    flex: 0 0 65px;
    height: 42px;
    border-radius: 5px;
    background: #222;
}

.model-card-preview.premium {
    background: linear-gradient(
        135deg,
        #252525,
        #777,
        #151515
    );
}

/* COLOR OPTIONS */

.color-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.color-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 15px 8px;
    border: 1px solid #e7e3dc;
    border-radius: 12px;
    background: #fff;
    color: #555;
    font-size: 11px;
    text-align: center;
    cursor: pointer;
}

.color-option.active {
    border-color: #bd9135;
    background: #faf7ef;
}

.color-circle {
    display: block;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.12);
    background: #222;
}

.mirror-gold {
    background: linear-gradient(135deg,#8c641d,#ffe39b,#b88425);
}

.matt-gold {
    background: #c7a451;
}

.brush-gold {
    background: linear-gradient(135deg,#9e7b30,#d9bb72,#9e7b30);
}

.mirror-black {
    background: linear-gradient(135deg,#050505,#666,#090909);
}

.brass-black {
    background: #24221d;
}

.brush-black {
    background: linear-gradient(135deg,#111,#444,#111);
}

.mirror-silver {
    background: linear-gradient(135deg,#777,#fff,#888);
}

.brush-silver {
    background: linear-gradient(135deg,#888,#ddd,#999);
}

.mirror-rainbow {
    background: linear-gradient(135deg,#5c8ed7,#d178b5,#d8b46b);
}

.brush-rainbow {
    background: linear-gradient(135deg,#6678ad,#ae82b1,#7eaa9e);
}

.rose-gold {
    background: #c88977;
}

.matt-blue {
    background: #27587c;
}

.brush-blue {
    background: linear-gradient(135deg,#164e68,#4b9ab4);
}

.brush-pink {
    background: #d78694;
}

.matt-red {
    background: #8d3733;
}

.brush-red {
    background: linear-gradient(135deg,#792521,#c35b50);
}

.carbon {
    background: repeating-linear-gradient(
        45deg,
        #111 0 4px,
        #333 4px 8px
    );
}

.brush-purple {
    background: #694878;
}

/* UPLOAD */

.builder-upload-box {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 24px;
    border: 1px dashed #c9c3b7;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
}

.upload-icon {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    height: 42px;
    border-radius: 50%;
    background: #f2eee5;
    color: #b58c35;
    font-size: 24px;
}

.builder-upload-box strong {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
}

.builder-upload-box div span {
    color: #999;
    font-size: 11px;
}

.upload-action {
    margin-left: auto;
    color: #b58c35;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* INPUTS */

.builder-input-group label,
.position-label {
    display: block;
    margin-bottom: 12px;
    color: #777;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.builder-input-group input,
.builder-input-group textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #e5e1d9;
    border-radius: 9px;
    outline: none;
    background: #fff;
    color: #171717;
    font-size: 13px;
}

.builder-input-group input:focus,
.builder-input-group textarea:focus {
    border-color: #bd9135;
}

.input-note {
    display: block;
    margin-top: 9px;
    color: #aaa;
    font-size: 11px;
}

.text-position {
    margin-top: 25px;
}

.position-buttons {
    display: flex;
    gap: 10px;
}

.text-position-button {
    flex: 1;
    padding: 12px;
    border: 1px solid #e5e1d9;
    border-radius: 8px;
    background: #fff;
    color: #777;
    font-size: 12px;
    cursor: pointer;
}

.text-position-button.active {
    border-color: #bd9135;
    color: #b58c35;
}

/* REVIEW */

.builder-review {
    margin-top: 25px;
    padding: 25px;
    border: 1px solid #e5e1d9;
    border-radius: 14px;
    background: #f5f3ef;
}

.builder-review-label {
    display: block;
    margin-bottom: 22px;
    color: #b58c35;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.review-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 11px 0;
    color: #777;
    font-size: 13px;
}

.review-row strong {
    color: #171717;
    font-weight: 600;
    text-align: right;
}

.review-total {
    margin-top: 12px;
    padding-top: 20px;
    border-top: 1px solid #ddd8ce;
}

.review-total strong {
    font-size: 20px;
}

/* ACTION BUTTONS */

.builder-bottom-space {
    height: 30px;
}

.builder-actions {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 18px clamp(28px,4vw,65px);
    border-top: 1px solid #e7e3dc;
    background: rgba(251,250,248,.96);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.builder-add-button,
.builder-checkout-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 15px 20px;
    border: 0;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    cursor: pointer;
}

.builder-add-button {
    background: #171717;
    color: #fff;
}

.builder-checkout-button {
    background: #bd9135;
    color: #fff;
}

.builder-add-button:hover {
    background: #333;
}

.builder-checkout-button:hover {
    background: #a77c27;
}

/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .builder-header {
        padding: 0 4%;
    }

    .builder-nav {
        gap: 16px;
    }

    .builder-nav a {
        font-size: 9px;
    }

    .preview-inner {
        padding: 35px;
    }

    .options-inner {
        padding: 35px;
    }

    .builder-product-top {
        flex-direction: column;
    }

    .builder-price {
        align-items: flex-start;
    }

    .color-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

}

/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .builder-announcement {
        font-size: 8px;
        letter-spacing: 1px;
    }

    .builder-header {
        min-height: 70px;
        padding: 12px 5%;
        flex-wrap: wrap;
    }

    .builder-logo {
        font-size: 38px;
    }

    .builder-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        gap: 22px;
        padding: 8px 0;
        scrollbar-width: none;
    }

    .builder-nav::-webkit-scrollbar {
        display: none;
    }

    .builder-nav a {
        font-size: 9px;
    }

    .card-builder {
        display: flex;
        flex-direction: column;
        min-height: auto;
    }

    .builder-preview {
        position: relative;
        top: auto;
        width: 100%;
        height: auto;
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid #e6e2da;
    }

    .preview-inner {
        width: 100%;
        min-height: 0;
        padding: 35px 22px;
        gap: 25px;
    }

    .preview-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .preview-step {
        margin-bottom: 14px;
    }

    .preview-heading h1 {
        font-size: clamp(36px, 10vw, 52px);
    }

    .preview-heading p {
        max-width: 100%;
        font-size: 12px;
    }

    .card-stage {
        gap: 25px;
        padding: 25px 5px;
    }

    .builder-card {
        width: min(100%, 380px);
        border-radius: 12px;
    }

    .builder-chip {
        width: 38px;
        height: 29px;
    }

    .builder-card-logo {
        font-size: 22px;
    }

    .builder-custom-text {
        font-size: 14px;
    }

    .builder-options {
        width: 100%;
    }

    .options-inner {
        width: 100%;
        padding: 35px 22px;
    }

    .builder-product-top {
        gap: 20px;
        padding-bottom: 30px;
    }

    .builder-product-top h2 {
        font-size: 35px;
    }

    .builder-price strong {
        font-size: 19px;
    }

    .accordion-trigger {
        padding: 22px 0;
    }

    .accordion-left {
        gap: 13px;
    }

    .accordion-left strong {
        font-size: 14px;
    }

    .model-options {
        grid-template-columns: 1fr;
    }

    .color-grid {
        grid-template-columns: repeat(3, minmax(0,1fr));
        gap: 8px;
    }

    .color-option {
        padding: 12px 5px;
        font-size: 10px;
    }

    .color-circle {
        width: 32px;
        height: 32px;
    }

    .builder-upload-box {
        flex-wrap: wrap;
        padding: 18px;
    }

    .upload-action {
        width: 100%;
        margin-left: 0;
        padding-left: 57px;
    }

    .builder-review {
        padding: 20px;
    }

    .builder-actions {
        grid-template-columns: 1fr;
        padding: 12px 20px;
        gap: 8px;
    }

    .builder-add-button,
    .builder-checkout-button {
        min-height: 48px;
        padding: 12px 16px;
    }

}

/* SMALL PHONES */

@media (max-width: 380px) {

    .preview-heading h1 {
        font-size: 34px;
    }

    .color-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .builder-card {
        width: 100%;
    }

}
/* =========================================================
   LUXXOR — CONTACT PAGE
   COMPLETE DESIGN + RESPONSIVE
   ========================================================= */


/* GLOBAL */

body.contact-page {
    margin: 0;
    background: #f8f7f3;
    color: #111;
    font-family: Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.contact-page * {
    box-sizing: border-box;
}


/* =========================================================
   HEADER
   ========================================================= */

.contact-page .site-header {
    width: 100%;
    height: 88px;

    padding: 0 5.5%;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    background: #f7f7f9;

    border-bottom: 1px solid #e7e5e1;

    position: relative;
    z-index: 100;
}


/* LOGO */

.contact-page .header-logo {
    justify-self: start;
    text-decoration: none;
}

.contact-page .logo-text {
    font-family: Georgia, serif;
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -5px;
    line-height: 1;

    color: #c7a044;
}


/* DESKTOP NAVIGATION */

.contact-page .desktop-nav {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: clamp(20px, 2.8vw, 45px);
}

.contact-page .nav-link {
    position: relative;

    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.1px;

    text-transform: uppercase;
    white-space: nowrap;

    color: #777;

    padding: 12px 0;

    transition: color 0.25s ease;
}

.contact-page .nav-link:hover,
.contact-page .nav-link.active {
    color: #111;
}

.contact-page .nav-link.active::after {
    content: "";

    position: absolute;
    bottom: 5px;
    left: 0;

    width: 100%;
    height: 1px;

    background: #111;
}


/* HEADER ACTIONS */

.contact-page .header-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    gap: 20px;
}


/* CART */

.contact-page .cart-button {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    background: transparent;

    padding: 10px;

    color: #111;
    font-size: 12px;
    font-weight: 600;
}

.contact-page .cart-count {
    position: absolute;

    top: -2px;
    right: -7px;

    width: 19px;
    height: 19px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #b99238;
    color: #fff;

    font-size: 10px;
    font-weight: 700;
}


/* MOBILE MENU BUTTON */

.contact-page .menu-button {
    display: none;

    width: 36px;
    height: 36px;

    padding: 7px;

    border: none;
    background: transparent;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 6px;
}

.contact-page .menu-button span {
    width: 23px;
    height: 1.5px;

    display: block;

    background: #111;
}


/* MOBILE MENU */

.contact-page .mobile-menu {
    display: none;

    position: absolute;
    top: 88px;
    left: 0;

    width: 100%;

    padding: 30px 5.5%;

    background: #f8f7f3;

    border-bottom: 1px solid #e5e2dc;

    z-index: 99;
}

.contact-page .mobile-menu.open,
.contact-page .mobile-menu.active {
    display: block;
}

.contact-page .mobile-nav {
    display: flex;
    flex-direction: column;

    gap: 24px;
}

.contact-page .mobile-nav a {
    font-size: 13px;
    font-weight: 700;

    letter-spacing: 1px;
    text-transform: uppercase;

    color: #111;
}


/* =========================================================
   CONTACT MAIN
   ========================================================= */

.contact-page .contact-nav-page {
    width: 100%;
    min-height: 70vh;

    background: #f8f7f3;
}

.contact-page .contact-nav-section {
    width: 100%;
    max-width: 1600px;

    margin: 0 auto;

    padding: 95px 5.5% 100px;
}


/* =========================================================
   HEADING
   ========================================================= */

.contact-page .contact-nav-heading {
    margin-bottom: 65px;
}

.contact-page .contact-nav-eyebrow {
    display: block;

    margin-bottom: 22px;

    color: #b99238;

    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2.5px;
}

.contact-page .contact-nav-heading h1 {
    margin: 0;

    font-family: "Instrument Serif", Georgia, serif;

    font-size: clamp(58px, 6.3vw, 100px);
    font-weight: 400;

    line-height: 1.02;
    letter-spacing: -2px;

    color: #111;
}

.contact-page .contact-nav-heading h1 br + * {
    color: #b99238;
}

.contact-page .contact-nav-heading p {
    margin: 25px 0 0;

    color: #777;

    font-family: Arial, sans-serif;
    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   MAIN GRID
   ========================================================= */

.contact-page .contact-nav-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: clamp(50px, 8vw, 140px);

    align-items: start;
}


/* =========================================================
   LEFT — CATEGORIES
   ========================================================= */

.contact-page .contact-nav-categories {
    width: 100%;

    display: flex;
    flex-direction: column;

    border-top: 1px solid #d9d6cf;
}

.contact-page .contact-category {
    width: 100%;
    min-height: 78px;

    padding: 20px 5px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    border: none;
    border-bottom: 1px solid #d9d6cf;

    background: transparent;

    color: #777;

    text-align: left;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 500;

    cursor: pointer;

    transition:
        color 0.25s ease,
        padding 0.25s ease;
}

.contact-page .contact-category span:last-child {
    font-size: 25px;
    font-weight: 300;

    color: #aaa;

    transition:
        transform 0.25s ease,
        color 0.25s ease;
}

.contact-page .contact-category:hover {
    color: #111;
    padding-left: 12px;
}

.contact-page .contact-category:hover span:last-child {
    transform: translateX(5px);
    color: #b99238;
}


/* ACTIVE CATEGORY */

.contact-page .contact-category.active {
    color: #111;
    font-weight: 700;
}

.contact-page .contact-category.active span:last-child {
    color: #b99238;
}


/* =========================================================
   RIGHT — CONTACT FORM
   ========================================================= */

.contact-page .contact-nav-form {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 28px;
}


/* FORM FIELD */

.contact-page .contact-nav-field {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 12px;
}

.contact-page .contact-nav-field label {
    font-family: Arial, sans-serif;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.2px;
    text-transform: uppercase;

    color: #111;
}


/* INPUTS */

.contact-page .contact-nav-field input,
.contact-page .contact-nav-field textarea {
    width: 100%;

    padding: 17px 0;

    border: none;
    border-bottom: 1px solid #d5d2cb;

    border-radius: 0;

    background: transparent;

    color: #111;

    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;

    outline: none;

    transition: border-color 0.25s ease;
}

.contact-page .contact-nav-field input::placeholder,
.contact-page .contact-nav-field textarea::placeholder {
    color: #aaa;
}

.contact-page .contact-nav-field input:focus,
.contact-page .contact-nav-field textarea:focus {
    border-bottom-color: #b99238;
}


/* MESSAGE */

.contact-page .contact-nav-field textarea {
    min-height: 140px;

    resize: vertical;

    line-height: 1.7;
}


/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.contact-page .contact-nav-submit {
    width: 100%;
    min-height: 60px;

    margin-top: 15px;

    padding: 0 25px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    border: none;
    border-radius: 5px;

    background: #b99238;
    color: #fff;

    font-family: Arial, sans-serif;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.5px;

    cursor: pointer;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.contact-page .contact-nav-submit span:last-child {
    font-size: 23px;
    font-weight: 300;

    transition: transform 0.3s ease;
}

.contact-page .contact-nav-submit:hover {
    background: #a5802f;
    transform: translateY(-2px);
}

.contact-page .contact-nav-submit:hover span:last-child {
    transform: translateX(5px);
}


/* =========================================================
   SUCCESS MESSAGE
   ========================================================= */

.contact-page .contact-success {
    display: none;

    align-items: center;
    gap: 15px;

    padding: 20px;

    border: 1px solid #d8c79e;
    border-radius: 8px;

    background: #f4efdf;
}

.contact-page .contact-success.show,
.contact-page .contact-success.active {
    display: flex;
}

.contact-page .contact-success-icon {
    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: #b99238;
    color: white;

    font-size: 17px;
}

.contact-page .contact-success strong {
    font-size: 14px;
}

.contact-page .contact-success p {
    margin: 5px 0 0;

    font-size: 12px;
    color: #777;
}


/* =========================================================
   BOTTOM CONTACT INFO
   ========================================================= */

.contact-page .contact-nav-info {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 25px 55px;

    margin-top: 85px;
    padding-top: 30px;

    border-top: 1px solid #dedbd5;
}

.contact-page .contact-nav-info-item {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    color: #666;

    font-family: Arial, sans-serif;
    font-size: 13px;

    transition: color 0.25s ease;
}

.contact-page a.contact-nav-info-item:hover {
    color: #b99238;
}

.contact-page .contact-nav-icon,
.contact-page .contact-nav-instagram,
.contact-page .contact-nav-clock {
    font-size: 21px;
    color: #b99238;
}


/* =========================================================
   FOOTER
   ========================================================= */

.contact-page .site-footer {
    width: 100%;

    padding: 65px 5.5% 25px;

    background: #111;
    color: #fff;
}

.contact-page .site-footer .footer-main {
    display: flex;
    justify-content: space-between;

    gap: 60px;

    padding-bottom: 65px;
}

.contact-page .footer-brand {
    max-width: 350px;
}

.contact-page .footer-logo {
    font-family: Georgia, serif;

    font-size: 48px;
    font-weight: 700;

    letter-spacing: -5px;

    color: #c7a044;
}

.contact-page .footer-brand p {
    margin: 20px 0 0;

    color: #999;

    font-family: Arial, sans-serif;
    font-size: 13px;

    line-height: 1.8;
}

.contact-page .footer-contact {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 17px;
}

.contact-page .footer-label {
    color: #888;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;
}

.contact-page .footer-contact a {
    color: #ddd;
    font-size: 13px;

    transition: color 0.25s ease;
}

.contact-page .footer-contact a:hover {
    color: #c7a044;
}

.contact-page .site-footer .footer-bottom {
    display: flex;
    justify-content: space-between;

    gap: 20px;

    padding-top: 25px;

    border-top: 1px solid #333;

    color: #888;

    font-size: 10px;
    letter-spacing: 1px;
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .contact-page .site-header {
        padding: 0 4%;
    }

    .contact-page .desktop-nav {
        gap: 18px;
    }

    .contact-page .nav-link {
        font-size: 10px;
        letter-spacing: 0.6px;
    }

    .contact-page .contact-nav-section {
        padding: 75px 5% 85px;
    }

    .contact-page .contact-nav-grid {
        gap: 50px;
    }

    .contact-page .contact-nav-heading h1 {
        font-size: clamp(55px, 7vw, 80px);
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 800px) {

    /* HEADER */

    .contact-page .site-header {
        height: 72px;

        padding: 0 22px;

        grid-template-columns: 1fr auto 1fr;
    }

    .contact-page .header-logo {
        grid-column: 2;
        grid-row: 1;

        justify-self: center;
    }

    .contact-page .logo-text {
        font-size: 40px;
    }

    .contact-page .desktop-nav {
        display: none;
    }

    .contact-page .header-actions {
        display: contents;
    }

    .contact-page .menu-button {
        display: flex;

        grid-column: 1;
        grid-row: 1;

        justify-self: start;
    }

    .contact-page .cart-button {
        grid-column: 3;
        grid-row: 1;

        justify-self: end;
    }

    .contact-page .mobile-menu {
        top: 72px;
    }


    /* MAIN */

    .contact-page .contact-nav-section {
        padding: 65px 25px 75px;
    }


    /* HEADING */

    .contact-page .contact-nav-heading {
        margin-bottom: 45px;
    }

    .contact-page .contact-nav-eyebrow {
        font-size: 10px;
        margin-bottom: 18px;
    }

    .contact-page .contact-nav-heading h1 {
        font-size: clamp(48px, 9vw, 72px);

        line-height: 1.05;
        letter-spacing: -1.5px;
    }

    .contact-page .contact-nav-heading p {
        font-size: 14px;
        margin-top: 20px;
    }


    /* GRID */

    .contact-page .contact-nav-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    /* CATEGORIES */

    .contact-page .contact-category {
        min-height: 67px;

        font-size: 15px;

        padding: 17px 4px;
    }


    /* FORM */

    .contact-page .contact-nav-form {
        gap: 25px;
    }

    .contact-page .contact-nav-field input,
    .contact-page .contact-nav-field textarea {
        font-size: 16px;
    }

    .contact-page .contact-nav-submit {
        min-height: 58px;
    }


    /* INFO */

    .contact-page .contact-nav-info {
        margin-top: 65px;

        gap: 25px;

        flex-direction: column;
        align-items: flex-start;
    }


    /* FOOTER */

    .contact-page .site-footer {
        padding: 55px 25px 25px;
    }

    .contact-page .site-footer .footer-main {
        flex-direction: column;

        gap: 45px;

        padding-bottom: 45px;
    }

    .contact-page .site-footer .footer-bottom {
        flex-direction: column;

        gap: 12px;
    }

}


/* =========================================================
   RESPONSIVE — SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

    .contact-page .contact-nav-section {
        padding: 50px 20px 65px;
    }

    .contact-page .contact-nav-heading h1 {
        font-size: clamp(42px, 10.5vw, 55px);

        letter-spacing: -1px;
    }

    .contact-page .contact-nav-heading p {
        font-size: 13px;
    }

    .contact-page .contact-nav-grid {
        gap: 40px;
    }

    .contact-page .contact-category {
        font-size: 14px;
        min-height: 62px;
    }

    .contact-page .contact-nav-info {
        margin-top: 55px;
    }

    .contact-page .site-footer {
        padding-left: 20px;
        padding-right: 20px;
    }

}
/* ==========================================
   LUXXOR — STATIC CARD PREVIEW
   ========================================== */


/* LEVA STRANA */

.builder-page .builder-preview {

    position: sticky !important;

    top: 0;

    height: 100vh !important;
    height: 100dvh !important;

    min-height: 0;

    background: #f2f0eb;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

}


/* CENTRALNI SADRŽAJ */

.builder-page .builder-preview .preview-inner {

    width: 100%;
    max-width: none;

    height: 100%;
    min-height: 0;

    padding: 40px;

    margin: 0;

    display: flex;
    align-items: center;
    justify-content: center;

}


/* KARTICA I OZNAKA BOJE */

.builder-page .builder-preview .card-stage {

    width: 100%;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 32px;

    padding: 0;

}


/* VELIČINA KARTICE */

.builder-page .builder-preview .builder-card {

    width: min(100%, 520px);

    aspect-ratio: 1.586;

    flex-shrink: 0;

    margin: 0 auto;

}


/* OZNAKA BOJE */

.builder-page .builder-preview .preview-material {

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;

    color: #77736e;

}


/* ==========================================
   TABLET
   ========================================== */

@media (max-width: 1100px) {

    .builder-page .builder-preview .preview-inner {
        padding: 30px;
    }

    .builder-page .builder-preview .builder-card {
        width: min(100%, 460px);
    }

}


/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 800px) {

    .builder-page .builder-preview {

        position: relative !important;

        top: auto;

        width: 100%;

        height: auto !important;

        min-height: 330px;

        padding: 35px 20px;

    }

    .builder-page .builder-preview .preview-inner {

        height: auto;
        min-height: 0;

        padding: 0;

    }

    .builder-page .builder-preview .card-stage {

        gap: 22px;

    }

    .builder-page .builder-preview .builder-card {

        width: min(100%, 420px);

    }

}


/* ==========================================
   SMALL MOBILE
   ========================================== */

@media (max-width: 480px) {

    .builder-page .builder-preview {

        min-height: 280px;

        padding: 30px 25px;

    }

    .builder-page .builder-preview .builder-card {

        width: 100%;

        max-width: 350px;

    }

    .builder-page .builder-preview .preview-material {

        font-size: 9px;

        letter-spacing: 1.5px;

    }

}
/* ==========================================
   LUXXOR — BUILDER NAVBAR
   IDENTICAN POCETNOJ STRANICI
========================================== */

/* UKLANJANJE CRNE TRAKE */

.builder-page .builder-announcement {
    display: none !important;
}

/* NAVBAR */

.builder-page .header {

    height: 82px;

    padding: 0 5.2%;

    display: grid;

    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    position: relative;

    z-index: 100;

    background: #f5f5f7;

    border-bottom: 1px solid #e5e5e5;

}

/* LOGO */

.builder-page .header .logo {

    grid-column: 1;
    grid-row: 1;

    justify-self: start;

}

.builder-page .header .logo img {

    display: block;

    width: 78px;
    height: 48px;

    object-fit: contain;

}

/* NAVIGACIJA */

.builder-page .header .nav {

    grid-column: 2;
    grid-row: 1;

    display: flex;

    align-items: center;

    gap: 38px;

}

.builder-page .header .nav a {

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.065em;

    color: #777;

    white-space: nowrap;

    transition: color 0.2s;

}

.builder-page .header .nav a:hover,
.builder-page .header .nav a.active {

    color: #0b0b0b;

}

.builder-page .header .nav a.active {

    border-bottom: 1px solid #111;

    padding-bottom: 8px;

}

/* KORPICA */

.builder-page .header .cart-button {

    grid-column: 3;
    grid-row: 1;

    justify-self: end;

    display: flex;

    position: relative;

    border: 0;

    background: transparent;

    padding: 10px;

    color: #111;

}

.builder-page .header .cart-count {

    position: absolute;

    top: 0;
    right: 0;

    width: 17px;
    height: 17px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #b99238;

    color: white;

    font-size: 10px;

}

/* ==========================================
   RESPONSIVE — TABLET
========================================== */

@media (max-width: 1100px) {

    .builder-page .header .nav {
        gap: 18px;
    }

    .builder-page .header .nav a {
        font-size: 10px;
    }

}

/* ==========================================
   RESPONSIVE — MOBILE
========================================== */

@media (max-width: 800px) {

    .builder-page .header {

        height: 68px;

        padding: 0 22px;

        grid-template-columns: 1fr auto 1fr;

    }

    /* HAMBURGER */

    .builder-page .header .menu-toggle {

        grid-column: 1;
        grid-row: 1;

        display: flex;

        flex-direction: column;

        justify-content: center;

        gap: 6px;

        width: 34px;
        height: 40px;

        padding: 5px;

        border: 0;

        background: transparent;

    }

    .builder-page .header .menu-toggle span {

        width: 23px;
        height: 1.5px;

        background: #111;

    }

    /* LOGO U CENTRU */

    .builder-page .header .logo {

        grid-column: 2;

        justify-self: center;

    }

    .builder-page .header .logo img {

        width: 72px;

    }

    /* KORPA DESNO */

    .builder-page .header .cart-button {

        grid-column: 3;

    }

    /* MOBILNI MENI */

    .builder-page .header .nav {

        display: none;

        position: absolute;

        top: 68px;

        left: 0;
        right: 0;

        padding: 28px 25px;

        background: #f5f5f7;

        box-shadow: 0 15px 25px #0001;

        flex-direction: column;

        align-items: flex-start;

        gap: 25px;

        z-index: 101;

    }

    .builder-page .header .nav.open {

        display: flex;

    }

    .builder-page .header .nav a {

        font-size: 13px;

    }

}
/* =========================================
   LUXXOR — REAL CARD PREVIEW
========================================= */

.builder-card {
    position: relative;
    overflow: hidden;
    background: transparent !important;
    box-shadow: none;
}

.real-card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    inset: 0;
    z-index: 1;
}

.builder-card-logo,
.builder-chip {
    display: none !important;
}

.builder-custom-text {
    position: absolute;
    z-index: 3;
}

.builder-card.showing-back .builder-custom-text {
    display: none;
}

/* PREDNJA / ZADNJA STRANA */

.card-side-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
}

.card-side-button {
    border: 1px solid #d8d4cc;
    background: transparent;
    padding: 11px 18px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    color: #777;
    cursor: pointer;
    transition: all 0.25s ease;
}

.card-side-button:hover {
    border-color: #b9903d;
    color: #111;
}

.card-side-button.active {
    background: #171717;
    color: #fff;
    border-color: #171717;
}

/* MOBILE */

@media (max-width: 768px) {

    .card-side-switch {
        margin-top: 18px;
        gap: 6px;
    }

    .card-side-button {
        padding: 10px 12px;
        font-size: 9px;
        letter-spacing: 0.8px;
    }

}

/* LUXXOR — VELIKI, FIKSIRANI PRIKAZ KARTICE */
.builder-page .builder-preview .preview-inner { padding: 22px !important; }
.builder-page .builder-preview .card-stage { width: 100%; gap: 22px; }
.builder-page .builder-preview .builder-card {
    width: min(100%, 660px) !important;
    max-width: 660px !important;
    aspect-ratio: 1.586 !important;
    height: auto !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    transform: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.builder-page .builder-preview .builder-card .real-card-image {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: scale(2.35) !important;
    transform-origin: center center !important;
    transition: opacity .18s ease !important;
}
@media (max-width: 1100px) and (min-width: 801px) {
    .builder-page .builder-preview .builder-card { width: 100% !important; }
}
@media (max-width: 800px) {
    .builder-page .builder-preview .preview-inner { padding: 0 !important; }
    .builder-page .builder-preview .builder-card { width: min(100%, 540px) !important; max-width: 540px !important; }
}
.footer-bottom a {
    color: inherit;
    text-decoration: none;
    font: inherit;
    letter-spacing: inherit;
    transition: color 0.3s ease;
}

.footer-bottom a:hover {
    color: #c5a04a;
}
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.footer-privacy {
    color: #777;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.footer-privacy:hover {
    color: #c5a04a;
}
/* LXR — FOOTER FINAL FIX */

.footer-main {
    width: 100%;
}

.footer-bottom {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.footer-bottom .footer-privacy {
    color: #777;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-decoration: none;
    white-space: nowrap;
}

.footer-bottom .footer-privacy:hover {
    color: #b99238;
}

@media (max-width: 600px) {
    .footer-bottom {
        flex-wrap: wrap;
        gap: 12px;
    }
}
/* LUXXOR — FOOTER LEGAL LINKS */

.footer-legal-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
}

.footer-legal-links a {
    color: #777;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 1px;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.footer-legal-links a:hover {
    color: #bd9847;
}

@media (max-width: 600px) {
    .footer-legal-links {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 12px;
    }
}
/* LUXXOR — ZAMENA REDOSLEDA FAQ I RECENZIJA */

main {
    display: flex;
    flex-direction: column;
}

main > .hero {
    order: 1;
}

main > .statement {
    order: 2;
}

main > .lxr-process {
    order: 3;
}

/* Recenzije sada idu prve */
main > .reviews {
    order: 4;
}

/* Česta pitanja idu posle recenzija */
main > .faq {
    order: 5;
}

main > .final-cta {
    order: 6;
}
/* LUXXOR — FAQ NASLOV */

.faq-intro h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(48px, 5.5vw, 82px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.045em;
    color: #111111;
}

.faq-intro h2 span {
    display: inline-block;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 400;
    color: #bd9435;
    letter-spacing: -0.045em;
}

/* TELEFON */

@media (max-width: 768px) {
    .faq-intro h2 {
        font-size: clamp(42px, 9vw, 62px);
        line-height: 1.1;
    }
}
.faq-intro h2 span {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 400;
    font-size: 0.82em;
    color: #bd9435;
    letter-spacing: -0.045em;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .faq-intro h2 span {
        font-size: clamp(30px, 7vw, 48px);
    }
}
/* LUXXOR — FAQ BALANSIRAN RASPORED */

.faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 70px;
    align-items: center;
}

.faq-intro {
    align-self: center;
}

@media (max-width: 768px) {
    .faq-grid {
        grid-template-columns: 1fr;
        gap: 45px;
        align-items: start;
    }

    .faq-intro {
        align-self: auto;
    }
}
/* LUXXOR — KAKO FUNKCIONIŠE NASLOV */

.lxr-process-heading h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(48px, 5.5vw, 82px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.045em;
    color: #111111;
}

.lxr-process-heading h2 span {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.95em;
    font-style: italic;
    font-weight: 400;
    color: #bd9435;
    letter-spacing: -0.045em;
    white-space: nowrap;
}

/* TELEFON */

@media (max-width: 768px) {
    .lxr-process-heading h2 {
        font-size: clamp(42px, 9vw, 62px);
    }

    .lxr-process-heading h2 span {
        font-size: 0.9em;
    }
}
/* LUXXOR — VEĆE KARTICE U PRVOM KRUGU */

.lxr-card-slider {
    position: relative;
    overflow: hidden;
}

.lxr-card-slider .lxr-slide {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transform: translate(-50%, -50%);
}
/* LUXXOR — POVECANJE METALNIH KARTICA U PRVOM KRUGU */

.lxr-card-slider .lxr-slide {
    width: 150% !important;
    height: 150% !important;
    max-width: none !important;
    max-height: none !important;

    object-fit: contain !important;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}
/* =========================================
   LUXXOR — O NAMA REDIZAJN
========================================= */

.statement {
    padding-top: 75px !important;
    padding-bottom: 90px !important;
    background: #f8f7f3;
}

.statement .section-index {
    margin-bottom: 65px !important;
}

.statement-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(45px, 7vw, 110px);
    align-items: center;
}

.statement h2 {
    font-family: "Instrument Serif", Georgia, serif;
    font-size: clamp(52px, 5.5vw, 85px) !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.045em !important;
    margin: 0 !important;
}

.statement h2 em {
    display: block;
    font-family: "Instrument Serif", Georgia, serif;
    font-style: italic !important;
    font-weight: 400 !important;
    color: #bd9435 !important;
}

.statement-right {
    padding-top: 0 !important;
    max-width: 480px;
}

.statement-right .statement-lead {
    font-size: clamp(22px, 2vw, 29px);
    line-height: 1.3;
    margin-bottom: 25px;
}

.statement-right p {
    font-size: 14px;
    line-height: 1.85;
}

.statement-right .underlined-link {
    margin-top: 25px;
}

/* UKLANJAMO DONJE TRI STAVKE */

.statement .spec-strip {
    display: none !important;
}

/* MOBILNA VERZIJA */

@media (max-width: 800px) {

    .statement {
        padding: 65px 25px 75px !important;
    }

    .statement .section-index {
        margin-bottom: 45px !important;
    }

    .statement-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .statement h2 {
        font-size: clamp(49px, 9vw, 72px) !important;
    }

    .statement-right {
        max-width: 100%;
    }

    .statement-right .statement-lead {
        font-size: 23px;
    }
}
/* =========================================
   LXR — O NAMA / VISE PROSTORA
========================================= */

@media (min-width: 801px) {

    .statement {
        min-height: 850px !important;
        padding-top: 90px !important;
        padding-bottom: 110px !important;
    }

    .statement .section-index {
        margin-bottom: 115px !important;
    }

    .statement-grid {
        align-items: center !important;
    }

}

/* TELEFON */

@media (max-width: 800px) {

    .statement {
        min-height: auto !important;
        padding-top: 80px !important;
        padding-bottom: 100px !important;
    }

    .statement .section-index {
        margin-bottom: 65px !important;
    }

}
/* =========================================
   LUXXOR — HERO REDIZAJN
========================================= */

/* NASLOV */

.hero h1 {
    font-family: "Instrument Serif", Georgia, serif !important;
    font-size: clamp(58px, 5.8vw, 90px) !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.045em !important;
    color: #111111 !important;
}

/* DRUGI RED — ZLATNI KURZIV */

.hero h1 span,
.hero h1 em {
    font-family: "Instrument Serif", Georgia, serif !important;
    font-size: 0.95em !important;
    font-style: italic !important;
    font-weight: 400 !important;
    color: #bd9435 !important;
}

/* SMANJUJEMO PRAZAN PROSTOR IZNAD */

@media (min-width: 801px) {

    .hero {
        min-height: 680px !important;
        height: auto !important;
        padding-top: 75px !important;
        padding-bottom: 70px !important;
    }

    .hero-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

}

/* TELEFON */

@media (max-width: 800px) {

    .hero {
        min-height: auto !important;
        height: auto !important;
        padding-top: 65px !important;
        padding-bottom: 65px !important;
    }

    .hero h1 {
        font-size: clamp(48px, 10vw, 70px) !important;
    }

    .hero h1 span,
    .hero h1 em {
        font-size: 0.9em !important;
    }

}
/* LUXXOR — KORPICA NA KARTICAMA */

.product-card a svg,
.product-card button svg {
    width: 22px;
    height: 22px;
    display: block;
    color: #ffffff;
}
/* =========================================
   LUXXOR — KOMPAKTNIJI HERO
   UKLANJANJE PRAZNOG PROSTORA
========================================= */

@media (min-width: 801px) {

    .hero {
        min-height: 0 !important;
        height: auto !important;

        padding-top: 25px !important;
        padding-bottom: 45px !important;

        align-items: center !important;
    }

    .hero-copy {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        margin-top: 0 !important;
    }

    .hero-product {
        height: auto !important;
        align-self: center !important;
    }
}

/* TELEFON */

@media (max-width: 800px) {

    .hero {
        min-height: 0 !important;
        padding-top: 20px !important;
        padding-bottom: 45px !important;
    }

    .hero-copy {
        margin-top: 0 !important;
    }
}
/* =========================================
   LUXXOR — HERO ODMAH ISPOD NAVBARA
========================================= */

@media (min-width: 801px) {

    main > .hero {
        min-height: 0 !important;
        height: 520px !important;
        padding: 0 5.4% !important;

        display: grid !important;
        grid-template-columns: 52% 48% !important;
        align-items: center !important;
    }

    .hero-copy {
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
    }

    .hero-product {
        height: 100% !important;
        min-height: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .hero-product img {
        width: 115% !important;
        max-width: none !important;
        height: auto !important;
    }
}

/* TELEFON */

@media (max-width: 800px) {

    main > .hero {
        min-height: 0 !important;
        height: auto !important;
        padding: 25px 0 55px !important;
    }
}
/* =========================================
   LUXXOR — OVERSIZED HERO CARD
========================================= */

@media (min-width: 801px) {

    /* HERO sekcija */
    .hero {
        position: relative !important;
        overflow: hidden !important;
        isolation: isolate;
    }

    /* Prostor za karticu */
    .hero-product {
        position: relative !important;
        overflow: visible !important;
        z-index: 1 !important;
    }

    /* Velika kartica */
    .hero-product img {
        width: 850px !important;
        max-width: none !important;
        height: auto !important;

        position: relative !important;
        left: 100px !important;

        transform: scale(1.15) !important;
        transform-origin: center center !important;

        filter: drop-shadow(
            0 35px 35px rgba(0, 0, 0, 0.18)
        ) !important;

        animation: none !important;
    }

    /* Tekst ostaje ispred */
    .hero-copy {
        position: relative !important;
        z-index: 3 !important;
    }
}

/* TABLET */

@media (min-width: 801px) and (max-width: 1200px) {

    .hero-product img {
        width: 700px !important;
        left: 50px !important;
        transform: scale(1.05) !important;
    }
}

/* TELEFON */

@media (max-width: 800px) {

    .hero {
        overflow: hidden !important;
    }

    .hero-product {
        overflow: visible !important;
    }

    .hero-product img {
        width: 125% !important;
        max-width: none !important;
        height: auto !important;

        position: relative !important;
        left: 10% !important;

        transform: none !important;
        animation: none !important;

        filter: drop-shadow(
            0 20px 25px rgba(0, 0, 0, 0.15)
        ) !important;
    }
}
/* =========================================
   LUXXOR — VELIKA NAGNUTA HERO KARTICA
========================================= */

@media (min-width: 801px) {

    .hero {
        overflow: hidden !important;
    }

    .hero-product {
        overflow: visible !important;
    }

    .hero-product img {
        width: 850px !important;
        max-width: none !important;
        height: auto !important;

        position: relative !important;

        left: 120px !important;

        /* UVEĆANJE + NAGIB */
        transform: rotate(-13deg) scale(1.15) !important;

        transform-origin: center center !important;

        filter: drop-shadow(
            0 35px 40px rgba(0, 0, 0, 0.20)
        ) !important;

        animation: none !important;
    }
}

/* TABLET */

@media (min-width: 801px) and (max-width: 1200px) {

    .hero-product img {
        width: 700px !important;
        left: 70px !important;

        transform: rotate(-13deg) scale(1.1) !important;
    }
}

/* TELEFON */

@media (max-width: 800px) {

    .hero-product img {
        width: 125% !important;
        max-width: none !important;

        transform: rotate(-10deg) !important;

        transform-origin: center center !important;
    }
}
/* =========================================
   LUXXOR — JOŠ VEĆA HERO KARTICA
========================================= */

@media (min-width: 1201px) {

    .hero-product img {
        width: 900px !important;
        max-width: none !important;
        height: auto !important;

        left: 20px !important;

        transform: rotate(-13deg) scale(1.15) !important;
        transform-origin: center center !important;

        animation: none !important;

        filter: drop-shadow(
            0 35px 40px rgba(0, 0, 0, 0.18)
        ) !important;
    }

    .hero-copy {
        position: relative !important;
        z-index: 5 !important;
    }
}
/* =========================================
   LUXXOR — PREMIUM CARD SHADOW
========================================= */

@media (min-width: 801px) {

    .hero-product img {
        filter:
            drop-shadow(0 12px 10px rgba(0, 0, 0, 0.08))
            drop-shadow(0 28px 24px rgba(0, 0, 0, 0.14))
            drop-shadow(0 55px 45px rgba(0, 0, 0, 0.12))
            !important;
    }
}

/* TELEFON */

@media (max-width: 800px) {

    .hero-product img {
        filter:
            drop-shadow(0 10px 12px rgba(0, 0, 0, 0.10))
            drop-shadow(0 25px 30px rgba(0, 0, 0, 0.12))
            !important;
    }
}
/* =========================================
   LUXXOR — SOFT SHADOW FIX
========================================= */

@media (min-width: 801px) {

    /* Sprečava odsecanje senke */
    .hero-product {
        overflow: visible !important;
        clip-path: none !important;
        mask-image: none !important;
        -webkit-mask-image: none !important;
    }

    /* Prirodnija senka kartice */
    .hero-product img {
        filter:
            drop-shadow(4px 8px 8px rgba(0, 0, 0, 0.07))
            drop-shadow(12px 22px 22px rgba(0, 0, 0, 0.11))
            drop-shadow(20px 38px 42px rgba(0, 0, 0, 0.09))
            !important;
    }
}
/* LUXXOR — ZLATNI LINK POGLEDAJ PONUDU */

.hero .lxr-gold-link,
.hero .lxr-gold-link span,
.hero .lxr-gold-link svg {
    color: #C9A646 !important;
    stroke: #C9A646 !important;
}

.hero .lxr-gold-link {
    border-bottom-color: #C9A646 !important;
}

.hero .lxr-gold-link::before,
.hero .lxr-gold-link::after {
    background-color: #C9A646 !important;
}
/* LXR — ZLATNO DUGME POGLEDAJ PONUDU */

.hero .hero-cta a.text-cta {
    color: #DFBD4D !important;
    border-bottom: 1px solid #DFBD4D !important;
}

.hero .hero-cta a.text-cta span {
    color: #DFBD4D !important;
}
/* LXR — OBA HERO DUGMETA ISTOG DIZAJNA */

.hero .hero-cta a.text-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 55px !important;
    padding: 0 29px !important;

    background: #0b0b0b !important;
    color: #ffffff !important;

    border: none !important;
    border-radius: 6px !important;

    font-size: 11px !important;
    font-weight: 750 !important;
    letter-spacing: 0.08em !important;

    text-decoration: none !important;
    transition: transform 0.25s, background 0.25s !important;
}

.hero .hero-cta a.text-cta span {
    color: #ffffff !important;
    font-size: 20px !important;
}

.hero .hero-cta a.text-cta:hover {
    background: #303030 !important;
    transform: translateY(-3px);
}
/* LXR — ZLATNO DUGME POGLEDAJ PONUDU */

.hero .hero-cta a.text-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;

    min-height: 55px !important;
    padding: 0 29px !important;

    background: #C9A646 !important;
    color: #ffffff !important;

    border: none !important;
    border-radius: 6px !important;

    font-size: 11px !important;
    font-weight: 750 !important;
    letter-spacing: 0.08em !important;
    text-decoration: none !important;

    transition: background 0.25s ease,
                transform 0.25s ease !important;
}

/* Bela strelica */
.hero .hero-cta a.text-cta span {
    color: #ffffff !important;
}

/* Uklanjanje stare donje linije */
.hero .hero-cta a.text-cta::before,
.hero .hero-cta a.text-cta::after {
    display: none !important;
}

/* Hover efekat */
.hero .hero-cta a.text-cta:hover {
    background: #B18D35 !important;
    transform: translateY(-2px);
}
/* LUXXOR — VEĆI TEKST U SEKCIJI O NAMA */

/* Naslov sa desne strane */
#o-nama .statement-right .statement-lead {
    font-size: 30px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    margin-bottom: 30px !important;
}

/* Dva pasusa ispod naslova */
#o-nama .statement-right p:not(.statement-lead) {
    font-size: 19px !important;
    line-height: 1.85 !important;
}

/* Telefon */
@media (max-width: 768px) {
    #o-nama .statement-right .statement-lead {
        font-size: 25px !important;
    }

    #o-nama .statement-right p:not(.statement-lead) {
        font-size: 16px !important;
        line-height: 1.75 !important;
    }
}
/* LUXXOR — MONOGRAM UMESTO VELIKOG LXR NATPISA */

.cta-watermark {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.cta-watermark .cta-monogram {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.08;
    pointer-events: none;
}
/* =========================================
   LUXXOR — FINAL CTA SVG MONOGRAM
========================================= */

.final-cta .cta-watermark {
    position: absolute !important;

    width: 520px !important;
    height: 520px !important;

    right: -35px !important;
    bottom: -165px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    pointer-events: none !important;
    z-index: 1 !important;
}

.final-cta .cta-watermark img.cta-monogram {
    position: static !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    object-fit: contain !important;

    opacity: 0.10 !important;

    transform: none !important;
    filter: grayscale(1) brightness(2) !important;
}

/* MOBILNA VERZIJA */

@media (max-width: 800px) {

    .final-cta .cta-watermark {
        width: 290px !important;
        height: 290px !important;

        right: -70px !important;
        bottom: -75px !important;
    }

    .final-cta .cta-watermark img.cta-monogram {
        opacity: 0.07 !important;
    }
}
.cta-watermark {
    transform: translateX(-20px);
}
/* LXR — PREMIUM HERO BUTTONS */

.hero .btn,
.hero a[class*="btn"] {
    border-radius: 12px !important;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background-color 0.3s ease !important;
}

/* Efekat kada pređeš mišem */
.hero .btn:hover,
.hero a[class*="btn"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

/* Klik */
.hero .btn:active,
.hero a[class*="btn"]:active {
    transform: translateY(0);
}
/* LXR — OKRUGLA HERO DUGMAD */

.hero .btn,
.hero a[class*="btn"] {
    border-radius: 999px !important;
    transition: all 0.3s ease !important;
}

.hero .btn:hover,
.hero a[class*="btn"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
/* LXR — ZAOBLJENO ZLATNO DUGME */

.hero a {
    border-radius: 999px !important;
}
/* LXR — OBA HERO DUGMETA POTPUNO ZAOBLJENA */

.hero .hero-cta a.btn-black,
.hero .hero-cta a.text-cta {
    border-radius: 999px !important;
}
/* =========================================
   LXR — PREMIUM 3D DEPTH
   HERO KARTICA
========================================= */

.hero-product {
    position: relative;
    isolation: isolate;
}

/* Dublja, prirodnija senka kartice */

.hero-product img {
    filter:
        drop-shadow(0 12px 10px rgba(0, 0, 0, 0.09))
        drop-shadow(0 30px 25px rgba(0, 0, 0, 0.15))
        drop-shadow(0 55px 45px rgba(0, 0, 0, 0.11))
        !important;
}

/* Diskretno osvetljenje iza kartice */

.hero-product::before {
    content: "";

    position: absolute;
    width: 75%;
    height: 70%;

    top: 15%;
    left: 15%;

    background: radial-gradient(
        ellipse,
        rgba(185, 146, 56, 0.09) 0%,
        rgba(185, 146, 56, 0.035) 40%,
        transparent 75%
    );

    filter: blur(45px);

    pointer-events: none;
    z-index: -1;
}

/* Malo izraženija dubina na desktopu */

@media (min-width: 901px) {
    .hero-product img {
        filter:
            drop-shadow(0 15px 12px rgba(0, 0, 0, 0.10))
            drop-shadow(0 35px 30px rgba(0, 0, 0, 0.17))
            drop-shadow(0 65px 55px rgba(0, 0, 0, 0.12))
            !important;
    }
}

/* Nežnije senke na telefonu */

@media (max-width: 900px) {
    .hero-product img {
        filter:
            drop-shadow(0 12px 12px rgba(0, 0, 0, 0.12))
            drop-shadow(0 25px 25px rgba(0, 0, 0, 0.10))
            !important;
    }
}
/* =========================================
   LXR HERO — UKLANJANJE PRESEKA SENKE
========================================= */

/* Dozvoli kartici i njenoj senci da se
   prostiru izvan trenutnog kontejnera */

.hero,
.hero-section,
.hero-container,
.hero-content,
.hero-product,
.hero-visual {
    overflow: visible !important;
}

/* Senka koja se prirodno gubi prema dnu */

.hero-product img {
    filter:
        drop-shadow(0 18px 18px rgba(0, 0, 0, 0.10))
        drop-shadow(0 45px 45px rgba(0, 0, 0, 0.16))
        drop-shadow(0 85px 75px rgba(0, 0, 0, 0.09))
        !important;
}

/* Dodatni prostor ispod kartice */

.hero-product {
    padding-bottom: 90px;
}
/* LXR — PREMIUM HERO TYPOGRAPHY */

.hero h1 {
    letter-spacing: -0.055em;
    line-height: 1.04;
}

.hero p {
    border-left: 2px solid #c9a646;
    padding-left: 20px;
    line-height: 1.85;
    max-width: 570px;
}

.hero .hero-buttons {
    margin-top: 38px;
}
/* ==========================================
   LXR — PREMIUM STICKY GLASS NAVBAR
========================================== */

:root {
    --lxr-navbar-height: 88px;
}

/* Navbar ostaje na vrhu */
.site-header {
    position: sticky !important;
    top: 0 !important;
    left: 0;
    width: 100%;
    z-index: 9999 !important;

    background: rgba(248, 248, 250, 0.72) !important;

    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);

    border-bottom: 1px solid rgba(255, 255, 255, 0.45);

    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.035),
        0 1px 2px rgba(0, 0, 0, 0.025);

    transition:
        background 0.3s ease,
        box-shadow 0.3s ease;
}

/* Jači glass efekat tokom skrolovanja */
.site-header.is-scrolled {
    background: rgba(248, 248, 250, 0.82) !important;

    box-shadow:
        0 8px 35px rgba(0, 0, 0, 0.07),
        0 1px 3px rgba(0, 0, 0, 0.035);
}

/* Sprečava da sadržaj bude sakriven pri navigaciji */
html {
    scroll-padding-top: 100px;
}

/* Telefon */
@media (max-width: 768px) {
    :root {
        --lxr-navbar-height: 72px;
    }

    .site-header {
        -webkit-backdrop-filter: blur(20px) saturate(170%);
        backdrop-filter: blur(20px) saturate(170%);
    }

    html {
        scroll-padding-top: 85px;
    }
}
/* ==========================================
   LXR — FIXED PREMIUM GLASS NAVBAR
========================================== */

/* Prostor za fiksirani navbar */
body {
    padding-top: 82px;
}

/* Navbar je uvek vidljiv */
.header,
.site-header,
.builder-header {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    z-index: 99999 !important;

    background: rgba(248, 247, 243, 0.78) !important;

    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;

    box-shadow:
        0 4px 25px rgba(0, 0, 0, 0.045),
        0 1px 3px rgba(0, 0, 0, 0.025) !important;
}

/* Malo izraženija senka tokom skrolovanja */
.header.is-scrolled,
.site-header.is-scrolled,
.builder-header.is-scrolled {
    background: rgba(248, 247, 243, 0.85) !important;

    box-shadow:
        0 8px 35px rgba(0, 0, 0, 0.075),
        0 1px 3px rgba(0, 0, 0, 0.035) !important;
}

/* Mobilna verzija */
@media (max-width: 800px) {

    body {
        padding-top: 68px;
    }

    .header,
    .site-header,
    .builder-header {
        -webkit-backdrop-filter: blur(20px) saturate(170%) !important;
        backdrop-filter: blur(20px) saturate(170%) !important;
    }
}
/* ==========================================
   LXR — KOMPAKTNIJI NAVBAR
========================================== */

@media (min-width: 801px) {

    .header,
    .site-header,
    .builder-header {
        height: 70px !important;
        min-height: 70px !important;
    }

    body {
        padding-top: 70px !important;
    }

}

/* MOBILNA VERZIJA */

@media (max-width: 800px) {

    .header,
    .site-header,
    .builder-header {
        height: 62px !important;
        min-height: 62px !important;
    }

    body {
        padding-top: 62px !important;
    }

    .nav {
        top: 62px !important;
    }

}
/* LXR — UKLANJANJE ANIMACIJE PODVLAČENJA */

.header .nav a,
.site-header .nav a,
.builder-header .nav a {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Uklanja liniju ispod linkova */
.header .nav a::after,
.header .nav a::before,
.site-header .nav a::after,
.site-header .nav a::before,
.builder-header .nav a::after,
.builder-header .nav a::before {
    display: none !important;
    content: none !important;
}

/* Uklanja animaciju pri prelasku mišem */
.header .nav a,
.site-header .nav a,
.builder-header .nav a {
    transition: none !important;
}
/* ==========================================
   LXR — PREMIUM FROSTED GLASS NAVBAR
========================================== */

.header,
.site-header,
.builder-header {
    background: rgba(245, 244, 240, 0.48) !important;

    -webkit-backdrop-filter: blur(45px) saturate(200%) !important;
    backdrop-filter: blur(45px) saturate(200%) !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.65) !important;

    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;

    transition:
        background 0.3s ease,
        box-shadow 0.3s ease !important;
}

/* Još izraženije staklo tokom skrolovanja */

.header.is-scrolled,
.site-header.is-scrolled,
.builder-header.is-scrolled {
    background: rgba(245, 244, 240, 0.38) !important;

    -webkit-backdrop-filter: blur(55px) saturate(220%) !important;
    backdrop-filter: blur(55px) saturate(220%) !important;

    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
/* LXR — EXTRA TRANSPARENT GLASS NAVBAR */

.header,
.site-header,
.builder-header {
    background: rgba(245, 244, 240, 0.22) !important;

    -webkit-backdrop-filter: blur(50px) saturate(180%) !important;
    backdrop-filter: blur(50px) saturate(180%) !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important;

    box-shadow:
        0 6px 28px rgba(0, 0, 0, 0.045),
        inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

/* Providnost tokom skrolovanja */

.header.is-scrolled,
.site-header.is-scrolled,
.builder-header.is-scrolled {
    background: rgba(245, 244, 240, 0.18) !important;

    -webkit-backdrop-filter: blur(55px) saturate(190%) !important;
    backdrop-filter: blur(55px) saturate(190%) !important;
}
/* LXR — NAVBAR BEZ DONJE LINIJE */

.header,
.site-header,
.builder-header,
.header.is-scrolled,
.site-header.is-scrolled,
.builder-header.is-scrolled {
    border-bottom: none !important;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.025) !important;
}
/* LXR — TANJI GLASS NAVBAR */

@media (min-width: 801px) {
    .header,
    .site-header,
    .builder-header {
        height: 60px !important;
        min-height: 60px !important;
    }

    body {
        padding-top: 60px !important;
    }
}

/* Mobilna verzija */
@media (max-width: 800px) {
    .header,
    .site-header,
    .builder-header {
        height: 56px !important;
        min-height: 56px !important;
    }

    body {
        padding-top: 56px !important;
    }
}
/* LXR — PREMIUM NAVBAR FONT */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

.header .nav a,
.site-header .nav a,
.builder-header .nav a,
.header nav a,
.site-header nav a,
.builder-header nav a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.7px !important;
    text-transform: uppercase !important;
}
/* ==========================================
   LUXXOR — PREMIUM HERO DEPTH
   Warm shadows / Soft vignette / Luxury
========================================== */

/* GLAVNA HERO SEKCIJA */

.hero {
    position: relative;
    isolation: isolate;

    background:
        radial-gradient(
            ellipse 70% 65% at 55% 42%,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(249, 245, 239, 0.75) 45%,
            rgba(224, 211, 199, 0.55) 100%
        ),
        linear-gradient(
            135deg,
            #e7ded6 0%,
            #faf8f4 35%,
            #f8f5f0 65%,
            #d6c7bc 100%
        ) !important;

    overflow: hidden;
}

/* TAMNIJE IVICE — SOFT VIGNETTE */

.hero::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            ellipse at center,
            transparent 35%,
            rgba(74, 54, 42, 0.04) 65%,
            rgba(48, 35, 28, 0.16) 100%
        );

    pointer-events: none;
    z-index: 0;
}

/* TOPLA SENKA IZA KARTICE */

.hero::after {
    content: "";
    position: absolute;

    width: 52%;
    height: 55%;

    right: -3%;
    top: 22%;

    background: radial-gradient(
        ellipse at center,
        rgba(75, 51, 35, 0.24) 0%,
        rgba(95, 70, 49, 0.12) 35%,
        transparent 75%
    );

    filter: blur(55px);

    pointer-events: none;
    z-index: 0;
}

/* SAV SADRŽAJ IZNAD POZADINSKIH SENKI */

.hero > * {
    position: relative;
    z-index: 1;
}

/* KARTICA — DODATNA DUBINA */

.hero img {
    filter:
        drop-shadow(0 25px 20px rgba(45, 32, 23, 0.18))
        drop-shadow(0 55px 45px rgba(45, 32, 23, 0.20))
        drop-shadow(0 90px 70px rgba(45, 32, 23, 0.10));

    transition: filter 0.4s ease;
}

/* NASLOV — MALO VIŠE KONTRASTA */

.hero h1 {
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.035);
}

/* DUGMIĆI — DISKRETNA DUBINA */

.hero .btn,
.hero .hero-btn,
.hero a[class*="btn"] {
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.08),
        0 2px 5px rgba(0, 0, 0, 0.04);
}

/* MOBILNA VERZIJA */

@media (max-width: 768px) {

    .hero::after {
        width: 100%;
        height: 45%;
        right: 0;
        top: 35%;
        filter: blur(40px);
    }

    .hero img {
        filter:
            drop-shadow(0 18px 20px rgba(45, 32, 23, 0.16))
            drop-shadow(0 35px 35px rgba(45, 32, 23, 0.12));
    }
}
/* HERO — PREKO CELOG EKRANA */

.hero {
    min-height: calc(100svh - 70px) !important;
    height: auto !important;

    display: flex;
    align-items: center;

    padding-top: 40px !important;
    padding-bottom: 100px !important;

    box-sizing: border-box;
}

/* MOBILNA VERZIJA */

@media (max-width: 768px) {
    .hero {
        min-height: calc(100svh - 65px) !important;
        padding-top: 50px !important;
        padding-bottom: 70px !important;
    }
}
/* =========================================
   LUXXOR — HERO FULL SCREEN
   DESKTOP
========================================= */

@media (min-width: 801px) {

    main > section.hero {
        height: calc(100svh - 70px) !important;
        min-height: calc(100svh - 70px) !important;

        padding: 0 5.4% !important;

        display: grid !important;
        grid-template-columns: 52% 48% !important;
        align-items: center !important;

        position: relative !important;
        overflow: hidden !important;
    }

    main > section.hero .hero-copy {
        padding: 0 !important;
        margin: 0 !important;
    }

    main > section.hero .hero-product {
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* =========================================
   MOBILE — ZADRŽI PRILAGODLJIVU VISINU
========================================= */

@media (max-width: 800px) {

    main > section.hero {
        height: auto !important;
        min-height: calc(100svh - 65px) !important;
    }
}
/* =========================================
   LUXXOR — HERO PREMIUM DARK DEPTH
========================================= */

@media (min-width: 801px) {

    .hero {
        isolation: isolate;
    }

    /* Tamnija desna strana hero sekcije */
    .hero::before {
        content: "";
        position: absolute;
        inset: 0;

        background: linear-gradient(
            90deg,
            transparent 35%,
            rgba(55, 43, 28, 0.025) 55%,
            rgba(45, 35, 25, 0.09) 78%,
            rgba(35, 27, 20, 0.17) 100%
        );

        pointer-events: none;
        z-index: 1;
    }

    /* Kartica ostaje iznad senke */
    .hero-product {
        position: relative;
        z-index: 2;
    }

    /* Jača, prirodnija senka ispod kartice */
    .hero-product img {
        filter:
            drop-shadow(0 35px 30px rgba(25, 20, 15, 0.24))
            drop-shadow(0 65px 65px rgba(30, 24, 18, 0.13)) !important;
    }
}
/* ============================================
   LUXXOR — PREMIUM HERO REFINEMENT
   Porsche Design × Rolex aesthetic
============================================ */

@media (min-width: 801px) {

    /* 1. HLADNIJA POZADINA SA GRAFITNOM DUBINOM */

    main > section.hero {
        position: relative !important;
        isolation: isolate !important;

        background:
            radial-gradient(
                ellipse at 85% 65%,
                rgba(37, 38, 40, 0.23) 0%,
                rgba(65, 65, 65, 0.12) 28%,
                transparent 65%
            ),
            linear-gradient(
                110deg,
                #f3f2ef 0%,
                #f0efec 40%,
                #e2e1de 72%,
                #c9c8c5 100%
            ) !important;
    }

    /* 2. TAMNIJA DESNA STRANA */

    main > section.hero::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;

        background: linear-gradient(
            90deg,
            transparent 35%,
            rgba(30, 30, 32, 0.025) 55%,
            rgba(30, 30, 32, 0.08) 75%,
            rgba(25, 25, 27, 0.16) 100%
        ) !important;

        pointer-events: none !important;
        z-index: 0 !important;
    }

    /* 3. SADRŽAJ I KARTICA IZNAD SENKI */

    main > section.hero .hero-copy,
    main > section.hero .hero-product {
        position: relative !important;
        z-index: 2 !important;
    }

    /* 4. DUBLJA SENKA ISPOD KARTICE */

    main > section.hero .hero-product img {
        filter:
            drop-shadow(0 24px 22px rgba(15, 15, 17, 0.18))
            drop-shadow(0 55px 45px rgba(15, 15, 17, 0.20))
            drop-shadow(0 85px 75px rgba(15, 15, 17, 0.12)) !important;
    }

    /* 5. NASLOV — JAČI KONTRAST */

    main > section.hero h1 {
        color: #111111 !important;
        line-height: 1.06 !important;
        letter-spacing: -0.035em !important;
    }

    /* 6. ZLATNI DEO NASLOVA */

    main > section.hero h1 em,
    main > section.hero h1 i,
    main > section.hero h1 span {
        color: #a88638 !important;
    }

    /* 7. OPIS — OZBILJNIJA TAMNOSIVA */

    main > section.hero .hero-copy p {
        color: #555555 !important;
    }

    /* 8. DUGMAD — PRECIZNIJI UGLOVI */

    main > section.hero .hero-actions a,
    main > section.hero .hero-buttons a,
    main > section.hero .hero-cta a {
        border-radius: 10px !important;
        transition:
            transform 0.25s ease,
            box-shadow 0.25s ease,
            background 0.25s ease !important;
    }

    /* 9. CRNO DUGME */

    main > section.hero .hero-actions a:first-child,
    main > section.hero .hero-buttons a:first-child,
    main > section.hero .hero-cta a:first-child {
        background: linear-gradient(
            145deg,
            #252525 0%,
            #080808 100%
        ) !important;

        box-shadow:
            0 10px 24px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    }

    /* 10. ZLATNO DUGME — METALIK */

    main > section.hero .hero-actions a:nth-child(2),
    main > section.hero .hero-buttons a:nth-child(2),
    main > section.hero .hero-cta a:nth-child(2) {
        background: linear-gradient(
            135deg,
            #c7a958 0%,
            #b49448 48%,
            #9c7b32 100%
        ) !important;

        box-shadow:
            0 10px 24px rgba(100, 75, 25, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
    }

    /* 11. DISKRETAN HOVER */

    main > section.hero .hero-actions a:hover,
    main > section.hero .hero-buttons a:hover,
    main > section.hero .hero-cta a:hover {
        transform: translateY(-2px) !important;
    }
}

/* ============================================
   MOBILE — HLADNIJA POZADINA
============================================ */

@media (max-width: 800px) {

    main > section.hero {
        background: linear-gradient(
            160deg,
            #f3f2ef 0%,
            #e5e4e1 65%,
            #d5d3cf 100%
        ) !important;
    }

    main > section.hero h1 em,
    main > section.hero h1 i,
    main > section.hero h1 span {
        color: #a88638 !important;
    }

    main > section.hero .hero-actions a,
    main > section.hero .hero-buttons a,
    main > section.hero .hero-cta a {
        border-radius: 10px !important;
    }
}
/* ============================================
   LUXXOR — PREMIUM HERO FINAL
   APPLE × FERRARI LUXURY
============================================ */


/* 1. TAMNIJI, OZBILJNIJI NASLOV */

main > section.hero .hero-copy h1 {
    color: #101010 !important;
    letter-spacing: -0.055em !important;
    line-height: 1.06 !important;

    text-shadow:
        0 2px 18px rgba(0, 0, 0, 0.035);
}


/* 2. ELEGANTNA TAMNOZLATNA BOJA */

main > section.hero .hero-copy h1 span {
    color: #a88638 !important;

    text-shadow:
        0 1px 12px rgba(95, 67, 20, 0.08);
}


/* 3. OZBILJNIJA BOJA OPISA */

main > section.hero .hero-copy > p {
    color: #555555 !important;
}


/* 4. CRNO DUGME — PREMIUM FINISH */

main > section.hero .hero-cta > a.btn.btn-black {
    background: linear-gradient(
        145deg,
        #292929 0%,
        #080808 100%
    ) !important;

    color: #ffffff !important;

    border-radius: 10px !important;

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.17),
        inset 0 1px 0 rgba(255, 255, 255, 0.13) !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease !important;
}


/* 5. ZLATNO DUGME — METALIK GRADIJENT */

main > section.hero .hero-cta > a.text-cta {
    background: linear-gradient(
        135deg,
        #c7a958 0%,
        #b49448 48%,
        #9c7b32 100%
    ) !important;

    color: #ffffff !important;

    border-radius: 10px !important;

    border: none !important;

    box-shadow:
        0 10px 24px rgba(100, 75, 25, 0.17),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease !important;
}


/* 6. DISKRETAN HOVER NA DUGMAD */

main > section.hero .hero-cta > a:hover {
    transform: translateY(-2px) !important;
}


/* 7. KARTICA — DUBLJA REALISTIČNA SENKA */

main > section.hero .hero-product img {
    filter:
        drop-shadow(
            0 24px 22px rgba(15, 15, 17, 0.18)
        )
        drop-shadow(
            0 55px 45px rgba(15, 15, 17, 0.20)
        )
        drop-shadow(
            0 85px 75px rgba(15, 15, 17, 0.12)
        ) !important;
}


/* ============================================
   MOBILNA VERZIJA
============================================ */

@media (max-width: 800px) {

    main > section.hero .hero-cta > a.btn.btn-black,
    main > section.hero .hero-cta > a.text-cta {
        border-radius: 10px !important;
    }

    main > section.hero .hero-product img {
        filter:
            drop-shadow(
                0 16px 16px rgba(15, 15, 17, 0.17)
            )
            drop-shadow(
                0 35px 30px rgba(15, 15, 17, 0.13)
            ) !important;
    }

}
/* Podebljavanje samo prvog reda HERO naslova */

.hero h1 {
    font-weight: 700;
}

.hero h1 em,
.hero h1 i,
.hero h1 span {
    font-weight: 400;
}
/* HERO — podebljaj samo "Vaša kartica." */

.hero h1,
.hero-title,
.hero-heading {
    font-weight: 900 !important;
}
/* LUXXOR — podizanje levog dela hero sekcije */

@media (min-width: 769px) {
    .hero-content {
        transform: translateY(-35px);
    }
}
/* =========================================
   LUXXOR — PODIZANJE LEVOG DELA HERO SEKCIJE
   SAMO DESKTOP
========================================= */

@media (min-width: 801px) {

    main > section.hero .hero-copy {
        transform: translateY(-35px) !important;
    }

}
/* LXR — PODIZANJE LEVOG DELA HERO SEKCIJE */

@media (min-width: 801px) {

    main > section.hero .hero-copy {
        transform: translateY(-70px) !important;
    }

}
/* LUXXOR — LUKSUZNA VERTIKALNA HERO DUGMAD */

@media (min-width: 801px) {

  .hero-buttons,
  .hero-actions,
  .hero-cta {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .hero-buttons a,
  .hero-actions a,
  .hero-cta a {
    width: 270px !important;
    min-height: 58px !important;
    border-radius: 7px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.4px !important;

    transition: all 0.3s ease !important;
  }

  /* PRVO DUGME */

  .hero-buttons a:first-child,
  .hero-actions a:first-child,
  .hero-cta a:first-child {
    background: linear-gradient(
      135deg,
      #262626,
      #080808
    ) !important;

    color: #fff !important;
    border: 1px solid #242424 !important;

    box-shadow: 0 12px 25px rgba(0,0,0,0.16) !important;
  }

  /* DRUGO DUGME */

  .hero-buttons a:last-child,
  .hero-actions a:last-child,
  .hero-cta a:last-child {
    background: rgba(255,255,255,0.08) !important;

    color: #9b792e !important;

    border: 1px solid rgba(166,127,45,0.65) !important;

    box-shadow: none !important;
  }

  /* HOVER */

  .hero-buttons a:hover,
  .hero-actions a:hover,
  .hero-cta a:hover {
    transform: translateY(-2px) !important;
  }
}
/* KONTAKT — MANJI NASLOV I VIŠA POZICIJA */

.contact-page h1 {
    font-size: 64px !important;
    line-height: 1.08 !important;
    letter-spacing: -2px !important;
}

.contact-page main {
    padding-top: 45px !important;
}

@media (max-width: 768px) {
    .contact-page h1 {
        font-size: 42px !important;
        letter-spacing: -1px !important;
    }

    .contact-page main {
        padding-top: 30px !important;
    }
}
/* ==================================
   KONTAKT — PODIZANJE CELOG SADRŽAJA
================================== */

@media (min-width: 769px) {
    .contact-page main {
        transform: translateY(-90px) !important;
        margin-bottom: -90px !important;
    }
}
/* =========================================
   LUXXOR — CONTACT FORM REDESIGN
========================================= */

/* DVE KOLONE */

.contact-page .contact-grid,
.contact-page .contact-content {
    display: grid;
    grid-template-columns: 0.75fr 1.45fr;
    gap: 80px;
    align-items: start;
}

/* LEVA STRANA */

.contact-page .contact-topics,
.contact-page .contact-categories {
    width: 100%;
}

.contact-page .contact-topics button,
.contact-page .contact-categories button {
    min-height: 54px;
    padding: 13px 5px;

    font-size: 14px;
    font-weight: 500;

    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.09);

    background: transparent;
    color: #777;

    transition: color 0.2s ease;
}

.contact-page .contact-topics button:hover,
.contact-page .contact-categories button:hover {
    color: #111;
}

/* DESNA STRANA */

.contact-page form {
    width: 100%;
}

.contact-page form input,
.contact-page form textarea {
    width: 100%;

    padding: 17px 18px;

    background: #efeeeb;
    border: 1px solid transparent;
    border-radius: 4px;

    font-size: 14px;
    color: #111;

    outline: none;
    transition: border-color 0.2s ease;
}

.contact-page form input:focus,
.contact-page form textarea:focus {
    border-color: #b99540;
}

.contact-page form textarea {
    min-height: 150px;
    resize: vertical;
}

/* DUGME */

.contact-page form button[type="submit"] {
    width: 100%;
    min-height: 58px;

    background: #111;
    color: #fff;

    border: none;
    border-radius: 3px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;

    cursor: pointer;
    transition: background 0.2s ease;
}

.contact-page form button[type="submit"]:hover {
    background: #292929;
}

/* TELEFON */

@media (max-width: 768px) {
    .contact-page .contact-grid,
    .contact-page .contact-content {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .contact-page form textarea {
        min-height: 130px;
    }
}
/* ==========================================
   LXR — CONTACT PAGE FINAL REDESIGN
   ========================================== */

@media (min-width: 901px) {

    /* Glavni raspored */

    .contact-page .contact-nav-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr) !important;
        gap: clamp(55px, 7vw, 110px) !important;
        align-items: start !important;
    }

    /* Kompaktnija leva strana */

    .contact-page .contact-category {
        min-height: 57px !important;
        padding: 13px 4px !important;
        font-size: 14px !important;
    }

    .contact-page .contact-category span:last-child {
        font-size: 20px !important;
    }

    /* Forma u dve kolone */

    .contact-page .contact-nav-form {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 22px !important;
        row-gap: 28px !important;
        align-items: start !important;
    }

    /* Ime i email jedan pored drugog */

    .contact-page .contact-nav-field {
        min-width: 0;
    }

    /* Poruka zauzima celu širinu */

    .contact-page .contact-nav-message {
        grid-column: 1 / -1 !important;
    }

    /* Dugme zauzima celu širinu */

    .contact-page .contact-nav-submit {
        grid-column: 1 / -1 !important;
    }

    .contact-page .contact-success {
        grid-column: 1 / -1 !important;
    }
}


/* ==========================================
   POLJA FORME
   ========================================== */

.contact-page .contact-nav-form .contact-nav-field input,
.contact-page .contact-nav-form .contact-nav-field textarea {
    width: 100% !important;

    background: rgba(255, 255, 255, 0.55) !important;

    border: 1px solid #e5e1d9 !important;
    border-radius: 8px !important;

    padding: 16px 18px !important;

    font-size: 14px !important;

    transition:
        border-color 0.25s ease,
        background 0.25s ease !important;
}

.contact-page .contact-nav-form .contact-nav-field input:focus,
.contact-page .contact-nav-form .contact-nav-field textarea:focus {
    background: #fff !important;
    border-color: #b99238 !important;
}

.contact-page .contact-nav-field label {
    font-size: 10px !important;
    letter-spacing: 1.4px !important;
}

.contact-page .contact-nav-form .contact-nav-message textarea {
    min-height: 155px !important;
}


/* ==========================================
   DUGME
   ========================================== */

.contact-page .contact-nav-form .contact-nav-submit {
    min-height: 58px !important;

    margin-top: 0 !important;

    padding: 0 24px !important;

    background: #111 !important;
    color: #fff !important;

    border: none !important;
    border-radius: 7px !important;

    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;

    font-size: 11px !important;
    letter-spacing: 1.5px !important;

    transition: background 0.25s ease !important;
}

.contact-page .contact-nav-submit span:last-child {
    color: #c6a04d !important;
    font-size: 23px !important;
}

.contact-page .contact-nav-form .contact-nav-submit:hover {
    background: #292929 !important;
}


/* ==========================================
   MOBILNA VERZIJA
   ========================================== */

@media (max-width: 900px) {

    .contact-page .contact-nav-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 35px !important;
    }

    .contact-page .contact-category {
        min-height: 52px !important;
        padding: 12px 4px !important;
        font-size: 14px !important;
    }

    .contact-page .contact-nav-form {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }

    .contact-page .contact-nav-message,
    .contact-page .contact-nav-submit,
    .contact-page .contact-success {
        grid-column: 1 / -1 !important;
    }

    .contact-page .contact-nav-form .contact-nav-message textarea {
        min-height: 135px !important;
    }
}
/* ==========================================
   LXR CONTACT — NASLOV IZNAD FORME
========================================== */

@media (min-width: 901px) {

    .contact-page .contact-nav-section {
        display: grid !important;
        grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr) !important;
        column-gap: clamp(55px, 7vw, 110px) !important;
        align-items: start !important;
    }

    /* Naslov prelazi desno */

    .contact-page .contact-nav-heading {
        grid-column: 2 !important;
        grid-row: 1 !important;

        margin: 0 0 38px !important;
        padding: 0 !important;
        transform: none !important;
    }

    .contact-page .contact-nav-heading h1 {
        font-size: clamp(42px, 4.2vw, 64px) !important;
        line-height: 1.08 !important;
        margin: 15px 0 18px !important;
    }

    .contact-page .contact-nav-heading p {
        margin: 0 !important;
    }

    /* Kategorije levo, forma desno */

    .contact-page .contact-nav-grid {
        display: contents !important;
    }

    .contact-page .contact-nav-categories {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
        align-self: start !important;
        margin-top: 0 !important;
    }

    .contact-page .contact-nav-form {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    /* Kontakt informacije ispod */

    .contact-page .contact-nav-info {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
    }
}
/* LXR CONTACT — PORAVNANJE OPCIJA SA FORMOM */

@media (min-width: 901px) {

    .contact-page .contact-nav-categories {
        margin-top: 250px !important;
    }

}
/* ==========================================
   LUXXOR CONTACT — FINAL LAYOUT
   NASLOV LEVO / MONOGRAM DESNO
========================================== */

@media (min-width: 901px) {

    /* Glavni raspored */

    .contact-page .contact-nav-section {
        position: relative !important;

        display: grid !important;
        grid-template-columns: 0.65fr 1.35fr !important;
        column-gap: clamp(55px, 7vw, 110px) !important;

        align-items: start !important;

        padding-top: 45px !important;
        isolation: isolate;
    }

    /* =====================================
       LXR MONOGRAM — DESNO U POZADINI
    ===================================== */

    .contact-page .contact-nav-section::before {
        content: "" !important;

        position: absolute !important;

        top: 40px !important;
        right: 0 !important;

        width: min(34vw, 460px) !important;
        height: 230px !important;

        background-image: url("assets/logo/Symbol Light Transparent.svg") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: contain !important;

        opacity: 0.075 !important;

        pointer-events: none !important;
        z-index: -1 !important;
    }

    /* =====================================
       NASLOV — LEVO
    ===================================== */

    .contact-page .contact-nav-heading {
        grid-column: 1 !important;
        grid-row: 1 !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;

        width: 650px !important;
        max-width: 650px !important;

        position: relative !important;
        z-index: 2 !important;
    }

    .contact-page .contact-nav-heading h1 {
        font-size: clamp(46px, 4.2vw, 64px) !important;
        line-height: 1.08 !important;

        margin: 20px 0 25px !important;
        letter-spacing: -2px !important;
    }

    .contact-page .contact-nav-heading p {
        margin: 0 !important;
        font-size: 16px !important;
    }

    /* =====================================
       KATEGORIJE I FORMA
    ===================================== */

    .contact-page .contact-nav-grid {
        display: contents !important;
    }

    /* Kategorije levo */

    .contact-page .contact-nav-categories {
        grid-column: 1 !important;
        grid-row: 2 !important;

        margin-top: 0 !important;
        padding-top: 0 !important;

        align-self: start !important;
    }

    /* Forma desno */

    .contact-page .contact-nav-form {
        grid-column: 2 !important;
        grid-row: 2 !important;

        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Razmak između gornjeg dela i forme */

    .contact-page .contact-nav-section {
        row-gap: 65px !important;
    }

    /* Ostali sadržaj */

    .contact-page .contact-nav-info {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
    }

}


/* ==========================================
   MOBILE — MONOGRAM I RASPORED
========================================== */

@media (max-width: 900px) {

    .contact-page .contact-nav-section {
        display: flex !important;
        flex-direction: column !important;
        padding-top: 35px !important;
    }

    .contact-page .contact-nav-section::before {
        content: "" !important;

        position: absolute !important;
        top: 30px !important;
        right: -25px !important;

        width: 190px !important;
        height: 130px !important;

        background: url("assets/logo/Symbol Light Transparent.svg")
                    center / contain no-repeat !important;

        opacity: 0.055 !important;
        pointer-events: none !important;
    }

    .contact-page .contact-nav-heading {
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        margin: 0 0 35px !important;
    }

    .contact-page .contact-nav-heading h1 {
        font-size: clamp(38px, 8vw, 52px) !important;
        line-height: 1.1 !important;
    }

    .contact-page .contact-nav-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 35px !important;
        width: 100% !important;
    }

    .contact-page .contact-nav-categories {
        margin-top: 0 !important;
    }
}
/* ==========================================
   LXR MONOGRAM — CONTACT PAGE
========================================== */

.contact-page {
    position: relative;
    isolation: isolate;
}

.contact-monogram {
    position: absolute;

    top: 220px;
    right: 5%;

    width: 420px;
    height: 240px;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0.09;

    pointer-events: none;
    user-select: none;

    z-index: 0;
}

.contact-monogram img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.contact-page .contact-nav-section {
    position: relative;
    z-index: 1;
}

/* Mobilna verzija */

@media (max-width: 900px) {
    .contact-monogram {
        top: 190px;
        right: 0;

        width: 190px;
        height: 120px;

        opacity: 0.05;
    }
}
/* ==========================================
   LXR — CONTACT MONOGRAM FIX
========================================== */

.contact-page .contact-nav-section {
    position: relative !important;
    isolation: isolate;
}

/* Isključujemo stari monogram */

.contact-page .contact-nav-section::before {
    content: none !important;
    display: none !important;
}

/* Novi monogram */

.contact-page .contact-monogram {
    position: absolute !important;

    top: 35px !important;
    right: 6% !important;

    width: 340px !important;
    height: 240px !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    opacity: 0.22 !important;

    pointer-events: none !important;
    z-index: 0 !important;
}

.contact-page .contact-monogram img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
}

/* Naslov ostaje iznad pozadine */

.contact-page .contact-nav-heading {
    position: relative !important;
    z-index: 2 !important;
}

/* Telefon */

@media (max-width: 900px) {

    .contact-page .contact-monogram {
        top: 30px !important;
        right: 0 !important;

        width: 150px !important;
        height: 110px !important;

        opacity: 0.12 !important;
    }

}
/* =========================================
   LXR CONTACT — MONOGRAM KAO SENKA
========================================= */

.contact-page .contact-nav-section {
    position: relative !important;
    isolation: isolate;
    overflow: hidden;
}

.contact-page .contact-monogram {
    position: absolute !important;

    top: 15px !important;
    right: 5% !important;

    width: 380px !important;
    height: 300px !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    opacity: 1 !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.contact-page .contact-monogram img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;

    /* Pretvara svetli SVG u tamnosivu senku */
    filter: brightness(0) !important;

    opacity: 0.13 !important;
}

/* Naslov ostaje iznad monograma */

.contact-page .contact-nav-heading {
    position: relative !important;
    z-index: 2 !important;
}

/* Mobilna verzija */

@media (max-width: 900px) {
    .contact-page .contact-monogram {
        top: 20px !important;
        right: -20px !important;

        width: 200px !important;
        height: 160px !important;
    }

    .contact-page .contact-monogram img {
        opacity: 0.09 !important;
    }
}
/* =========================================
   LXR CONTACT — VRACANJE PROPORCIJA FORME
========================================= */

/* Leva kolona uža, desna šira */
.contact-page .contact-content,
.contact-page .contact-layout,
.contact-page .contact-grid {
    grid-template-columns: 0.85fr 1.75fr !important;
    column-gap: 75px !important;
}

/* Opcije sa leve strane */
.contact-page .contact-topics,
.contact-page .contact-options {
    width: 100% !important;
    max-width: 370px !important;
}

/* Forma sa desne strane */
.contact-page .contact-form {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

/* Ime i email ostaju jedan pored drugog */
.contact-page .form-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
}

/* Polja zauzimaju punu širinu */
.contact-page .contact-form input,
.contact-page .contact-form textarea {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Mobilna verzija */
@media (max-width: 900px) {
    .contact-page .contact-content,
    .contact-page .contact-layout,
    .contact-page .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 35px !important;
    }

    .contact-page .contact-topics,
    .contact-page .contact-options {
        max-width: 100% !important;
    }

    .contact-page .form-row {
        grid-template-columns: 1fr !important;
    }
}
/* ==========================================
   LXR CONTACT — FINALNE PROPORCIJE
   ========================================== */

@media (min-width: 901px) {

    /* Glavna sekcija */
    .contact-page .contact-nav-section {
        display: grid !important;
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.75fr) !important;
        column-gap: 75px !important;
        row-gap: 65px !important;
    }

    /* Naslov ostaje levo */
    .contact-page .contact-nav-heading {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        width: 650px !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* Kategorije i forma koriste glavni grid */
    .contact-page .contact-nav-grid {
        display: contents !important;
    }

    /* LEVA STRANA */
    .contact-page .contact-nav-categories {
        grid-column: 1 !important;
        grid-row: 2 !important;

        width: 100% !important;
        max-width: 370px !important;

        margin: 0 !important;
        padding: 0 !important;

        align-self: start !important;
    }

    .contact-page .contact-category {
        width: 100% !important;
        min-height: 61px !important;
        padding: 15px 4px !important;
    }

    /* DESNA FORMA */
    .contact-page .contact-nav-form {
        grid-column: 2 !important;
        grid-row: 2 !important;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        column-gap: 20px !important;
        row-gap: 28px !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /* Ime i email */
    .contact-page .contact-nav-field {
        width: 100% !important;
        min-width: 0 !important;
    }

    .contact-page .contact-nav-field input {
        width: 100% !important;
        height: 54px !important;
    }

    /* Poruka */
    .contact-page .contact-nav-message {
        grid-column: 1 / -1 !important;
    }

    .contact-page .contact-nav-message textarea {
        width: 100% !important;
        min-height: 165px !important;
    }

    /* Dugme */
    .contact-page .contact-nav-submit {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    .contact-page .contact-success {
        grid-column: 1 / -1 !important;
    }
}

/* ==========================================
   TELEFON
   ========================================== */

@media (max-width: 900px) {

    .contact-page .contact-nav-section {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }

    .contact-page .contact-nav-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 35px !important;
    }

    .contact-page .contact-nav-categories {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .contact-page .contact-nav-form {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .contact-page .contact-nav-field,
    .contact-page .contact-nav-message,
    .contact-page .contact-nav-submit {
        grid-column: 1 / -1 !important;
    }
}
/* ==========================================
   LUXXOR — FOOTER IDENTIČAN POČETNOJ
========================================== */

.footer {
    background: #080808 !important;
    color: #fff !important;
    padding: 65px clamp(25px, 5.4vw, 110px) 25px !important;
}

.footer-main {
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr !important;
    gap: 55px !important;
    padding-bottom: 65px !important;
}

.footer-main > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
}

.footer-logo img {
    display: block;
    width: 78px;
    height: 48px;
    object-fit: contain;
}

.footer-main p {
    max-width: 320px;
    color: #999;
    font-size: 14px;
    line-height: 1.7;
}

.footer-main a:not(.footer-logo) {
    font-size: 13px;
    color: #bbb;
    text-decoration: none;
}

.footer-main a:not(.footer-logo):hover {
    color: #fff;
}

.footer-label {
    font-size: 10px;
    letter-spacing: 0.16em;
    color: #777;
    margin-bottom: 10px;
}

.footer-bottom {
    border-top: 1px solid #333;
    padding-top: 25px;

    display: flex;
    justify-content: space-between;
    gap: 20px;

    color: #777;
    font-size: 10px;
    letter-spacing: 0.08em;
}

.footer-legal-links {
    display: flex;
    gap: 25px;
}

.footer-legal-links a {
    color: #777;
    text-decoration: none;
    font-size: 10px;
}

.footer-legal-links a:hover {
    color: #fff;
}

/* MOBILNA VERZIJA */

@media (max-width: 800px) {
    .footer {
        padding: 50px 25px 25px !important;
    }

    .footer-main {
        grid-template-columns: 1fr 1fr !important;
        gap: 45px !important;
        padding-bottom: 45px !important;
    }

    .footer-main > div:first-child {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        flex-direction: column;
    }

    .footer-legal-links {
        flex-wrap: wrap;
        gap: 15px;
    }
}
/* LXR — RAZMAK IZNAD NATPISA KONTAKT */

.contact-page .contact-nav-eyebrow {
    display: block !important;
    margin-top: 22px !important;
}
/* LXR KONTAKT — SPUSTANJE CELOG NASLOVA */

.contact-page .contact-nav-heading {
    transform: translateY(25px) !important;
}
/* =========================================
   LUXXOR — REALISTIC 3D CARD SHADOW
========================================= */

.hero-product {
    position: relative;
    isolation: isolate;
}

.hero-product img {
    position: relative;
    z-index: 2;

    filter:
        drop-shadow(0px 12px 8px rgba(0, 0, 0, 0.12))
        drop-shadow(0px 28px 22px rgba(0, 0, 0, 0.20))
        drop-shadow(0px 55px 45px rgba(0, 0, 0, 0.22))
        drop-shadow(0px 85px 75px rgba(0, 0, 0, 0.12));

    transition: filter 0.4s ease;
}
/* ==========================================
   LUXXOR — O NAMA / PRODUCT SHOWCASE
========================================== */

/* Naslov i slika */
.statement .statement-grid {
    align-items: start !important;
}

/* Smanjen naslov */
.statement .statement-grid h2 {
    font-size: clamp(42px, 4.5vw, 70px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
    margin: 0 !important;
}

/* Leva strana */
.statement .statement-grid > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Kutija ispod naslova */
.statement-product {
    width: 100%;
    max-width: 660px;
    margin-top: 30px;
    position: relative;
}

/* Slika kutije */
.statement-product img {
    display: block;
    width: 100%;
    height: auto;

    object-fit: contain;

    filter: drop-shadow(
        0 22px 22px rgba(0, 0, 0, 0.12)
    );

    transition: transform 0.5s ease;
}

/* Blago uvecanje na hover */
@media (hover: hover) {
    .statement-product img:hover {
        transform: translateY(-5px);
    }
}

/* Desna strana ostaje poravnata gore */
.statement .statement-right {
    align-self: start !important;
}

/* ==========================================
   TELEFON
========================================== */

@media (max-width: 768px) {

    .statement .statement-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 35px !important;
    }

    .statement .statement-grid h2 {
        font-size: clamp(42px, 9vw, 58px) !important;
        line-height: 1.08 !important;
    }

    .statement-product {
        max-width: 100%;
        margin-top: 20px;
    }

    .statement-product img {
        width: 100%;
    }

    .statement .statement-right {
        width: 100%;
    }
}
/* ==========================================
   LUXXOR — O NAMA / FINO PODESAVANJE
========================================== */

@media (min-width: 769px) {

    /* Prosirujemo desnu kolonu */
    .statement .statement-grid {
        grid-template-columns: 1fr 1.2fr !important;
        gap: 45px !important;
    }

    /* Desni tekst */
    .statement .statement-right {
        width: 100% !important;
        max-width: none !important;
    }

    .statement .statement-right p {
        width: 100% !important;
        max-width: none !important;
        line-height: 1.75 !important;
    }

    /* Kutija — manja i podignuta */
    .statement .statement-product {
        width: 85% !important;
        max-width: 540px !important;
        margin-top: -15px !important;
    }

    .statement .statement-product img {
        width: 100% !important;
        height: auto !important;
    }
}
/* ==========================================
   LUXXOR — O NAMA / NOVI RASPORED
========================================== */

.statement .statement-grid.lxr-about-layout {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: start !important;
    gap: 90px !important;
}

/* LEVA STRANA */

.statement .lxr-about-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    min-width: 0;
}

.statement .lxr-about-left h2 {
    font-size: clamp(42px, 4.3vw, 68px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
    margin: 0 0 38px !important;
}

.statement .lxr-about-left h2 em {
    display: block;
    color: #bc963b;
    font-style: italic;
}

.statement .lxr-about-text {
    font-size: 18px !important;
    line-height: 1.8 !important;
    color: #777 !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* DESNA STRANA */

.statement .lxr-about-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    min-width: 0;
    padding-top: 12px;
}

/* KUTIJA ISPOD DESNOG TEKSTA */

.statement .lxr-about-right .statement-product {
    width: 85% !important;
    max-width: 500px !important;
    margin: 35px auto 0 !important;
}

.statement .lxr-about-right .statement-product img {
    display: block;
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
}

/* DUGME */

.statement .lxr-about-left .underlined-link {
    margin-top: 35px !important;
}

/* ==========================================
   TELEFON
========================================== */

@media (max-width: 768px) {

    .statement .statement-grid.lxr-about-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 28px !important;
    }

    .statement .lxr-about-left h2 {
        font-size: clamp(40px, 9vw, 56px) !important;
        margin-bottom: 25px !important;
    }

    .statement .lxr-about-text {
        font-size: 16px !important;
        line-height: 1.75 !important;
    }

    .statement .lxr-about-right {
        padding-top: 0;
    }

    .statement .lxr-about-right .statement-product {
        width: 100% !important;
        max-width: 450px !important;
        margin-top: 25px !important;
    }
}
/* ==========================================
   LUXXOR — O NAMA / BALANCED 2x2 LAYOUT
========================================== */

@media (min-width: 769px) {

    /* Glavna sekcija — dve jednake kolone */
    .statement .statement-grid.lxr-about-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 60px !important;
        align-items: stretch !important;
    }

    /* Obe kolone iste visine */
    .statement .lxr-about-left,
    .statement .lxr-about-right {
        display: grid !important;
        grid-template-rows: 1fr 1fr !important;
        align-items: start !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
    }

    /* NASLOV — gore levo */
    .statement .lxr-about-left h2 {
        font-size: clamp(42px, 4vw, 62px) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.035em !important;
        margin: 0 !important;
        align-self: start !important;
    }

    /* OBA PASUSA — ista tipografija */
    .statement .lxr-about-left .lxr-about-text,
    .statement .lxr-about-right .lxr-about-text {
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 18px !important;
        font-weight: 400 !important;
        line-height: 1.7 !important;
        letter-spacing: -0.01em !important;
        color: #171717 !important;

        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    /* Kutija — donji desni deo */
    .statement .lxr-about-right .statement-product {
        width: 80% !important;
        max-width: 460px !important;
        margin: 0 auto !important;
        align-self: center !important;
    }

    .statement .lxr-about-right .statement-product img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* Dugme ostaje ispod levog pasusa */
    .statement .lxr-about-left .underlined-link {
        margin-top: 22px !important;
    }
}

/* ==========================================
   TELEFON
========================================== */

@media (max-width: 768px) {

    .statement .statement-grid.lxr-about-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 28px !important;
    }

    .statement .lxr-about-left,
    .statement .lxr-about-right {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .statement .lxr-about-left h2 {
        font-size: clamp(40px, 9vw, 56px) !important;
        margin-bottom: 28px !important;
    }

    .statement .lxr-about-text {
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 16px !important;
        line-height: 1.75 !important;
        color: #171717 !important;
    }

    .statement .lxr-about-right .statement-product {
        width: 100% !important;
        max-width: 420px !important;
        margin: 30px auto 0 !important;
    }
}
/* LUXXOR — O NAMA / COMPACT 2x2 */

@media (min-width: 769px) {

    .statement .statement-grid.lxr-about-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 55px !important;
        align-items: start !important;
    }

    .statement .lxr-about-left,
    .statement .lxr-about-right {
        display: grid !important;
        grid-template-rows: auto auto !important;
        align-content: start !important;
        row-gap: 55px !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .statement .lxr-about-left h2 {
        margin: 0 !important;
        font-size: clamp(42px, 4vw, 62px) !important;
        line-height: 1.08 !important;
    }

    .statement .lxr-about-text {
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 18px !important;
        line-height: 1.75 !important;
        color: #171717 !important;
        margin: 0 !important;
        max-width: none !important;
    }

    .statement .lxr-about-bottom-left .underlined-link {
        display: inline-flex !important;
        margin-top: 30px !important;
    }

    .statement .lxr-about-right .statement-product {
        width: 78% !important;
        max-width: 450px !important;
        margin: 0 auto !important;
    }

    .statement .lxr-about-right .statement-product img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
}
/* =========================================
   LUXXOR — O NAMA
   PREMIUM 2 × 2 GRID
========================================= */

.statement .statement-grid.lxr-about-layout {

    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    grid-template-rows: auto auto !important;

    column-gap: 70px !important;
    row-gap: 55px !important;

    align-items: start !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

}


/* =========================================
   GORE LEVO — NASLOV
========================================= */

.statement .lxr-about-title {

    grid-column: 1 !important;
    grid-row: 1 !important;

    min-width: 0;

    position: static !important;

    transform: none !important;

}

.statement .lxr-about-title h2 {

    font-family: "Instrument Serif", Georgia, serif !important;

    font-size: clamp(48px, 4.7vw, 74px) !important;

    font-weight: 400 !important;

    line-height: 1.05 !important;

    letter-spacing: -0.035em !important;

    color: #111111 !important;

    margin: 0 !important;

    padding: 0 !important;

    transform: none !important;

}

.statement .lxr-about-title h2 em {

    display: block !important;

    font-style: italic !important;

    font-weight: 400 !important;

    color: #BD963B !important;

}


/* =========================================
   GORE DESNO — DRUGI PASUS
========================================= */

.statement .lxr-about-top-right {

    grid-column: 2 !important;
    grid-row: 1 !important;

    min-width: 0;

    margin: 0 !important;
    padding: 0 !important;

    position: static !important;

    transform: none !important;

}


/* =========================================
   DOLE LEVO — PRVI PASUS
========================================= */

.statement .lxr-about-bottom-left {

    grid-column: 1 !important;
    grid-row: 2 !important;

    min-width: 0;

    margin: 0 !important;
    padding: 0 !important;

    position: static !important;

    transform: none !important;

}


/* =========================================
   TEKSTOVI
========================================= */

.statement .lxr-about-layout .lxr-about-text {

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Helvetica Neue",
        Arial,
        sans-serif !important;

    font-size: 18px !important;

    font-weight: 400 !important;

    line-height: 1.75 !important;

    letter-spacing: -0.015em !important;

    color: #171717 !important;

    opacity: 1 !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

}


/* =========================================
   DUGME
========================================= */

.statement .lxr-about-bottom-left .underlined-link {

    display: inline-flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 40px !important;

    margin-top: 32px !important;

    padding-bottom: 12px !important;

    border-bottom: 1px solid #111111 !important;

    font-size: 11px !important;

    font-weight: 750 !important;

    letter-spacing: 0.08em !important;

    color: #111111 !important;

}


/* =========================================
   DOLE DESNO — KUTIJA
========================================= */

.statement .lxr-about-bottom-right {

    grid-column: 2 !important;
    grid-row: 2 !important;

    display: flex !important;

    align-items: flex-start !important;
    justify-content: center !important;

    min-width: 0;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    position: static !important;

    transform: none !important;

}

.statement .lxr-about-bottom-right img {

    display: block !important;

    width: 78% !important;

    max-width: 450px !important;

    height: auto !important;

    object-fit: contain !important;

    margin: 0 auto !important;

    padding: 0 !important;

    position: static !important;

    transform: none !important;

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .statement .statement-grid.lxr-about-layout {

        column-gap: 35px !important;
        row-gap: 40px !important;

    }

    .statement .lxr-about-title h2 {

        font-size: clamp(42px, 5vw, 60px) !important;

    }

    .statement .lxr-about-layout .lxr-about-text {

        font-size: 16px !important;

    }

}


/* =========================================
   MOBILNA VERZIJA
========================================= */

@media (max-width: 768px) {

    .statement .statement-grid.lxr-about-layout {

        display: flex !important;

        flex-direction: column !important;

        gap: 28px !important;

    }

    .statement .lxr-about-title {

        order: 1 !important;

    }

    .statement .lxr-about-top-right {

        order: 3 !important;

    }

    .statement .lxr-about-bottom-left {

        order: 2 !important;

    }

    .statement .lxr-about-bottom-right {

        order: 4 !important;

    }

    .statement .lxr-about-title h2 {

        font-size: clamp(43px, 9vw, 60px) !important;

    }

    .statement .lxr-about-layout .lxr-about-text {

        font-size: 16px !important;

        line-height: 1.7 !important;

    }

    .statement .lxr-about-bottom-right img {

        width: 90% !important;

        max-width: 400px !important;

    }

}
/* LUXXOR — PODIZANJE KUTIJE */

@media (min-width: 769px) {
    .statement .lxr-about-bottom-right img {
        transform: translateY(-140px) !important;
    }
}
/* LUXXOR — UKLANJANJE PRAZNOG PROSTORA */

@media (min-width: 769px) {

    .statement {
        min-height: 0 !important;
        height: auto !important;
        padding-bottom: 40px !important;
    }

    .statement .statement-grid.lxr-about-layout {
        margin-bottom: -130px !important;
    }

}
/* ==========================================
   LUXXOR — GLOBAL CART DESIGN
   SAME CART ON EVERY PAGE
========================================== */

.cart-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9998 !important;
    background: rgba(0, 0, 0, 0.48) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.cart-overlay.open,
.cart-open .cart-overlay {
    opacity: 1 !important;
    visibility: visible !important;
}

.cart-drawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;

    width: min(470px, 100%) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;

    z-index: 9999 !important;

    display: flex !important;
    flex-direction: column !important;

    padding: 0 !important;
    margin: 0 !important;

    background: #f5f5f7 !important;
    color: #111 !important;

    border: none !important;
    border-radius: 0 !important;

    box-sizing: border-box !important;

    transform: translateX(100%) !important;
    transition: transform 0.35s ease !important;
    overflow: hidden !important;
}

.cart-drawer.open,
.cart-open .cart-drawer {
    transform: translateX(0) !important;
}

body.cart-open {
    overflow: hidden !important;
}

/* HEADER */

.cart-drawer .cart-drawer-header {
    position: relative !important;

    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;

    flex: 0 0 auto !important;

    padding: 29px 36px 25px !important;
    margin: 0 !important;

    background: #f5f5f7 !important;
    border: none !important;
}

.cart-drawer .cart-eyebrow {
    display: none !important;
}

.cart-drawer .cart-drawer-header h2 {
    font-family: "Instrument Serif", Georgia, serif !important;
    font-size: 43px !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    letter-spacing: -1.5px !important;

    color: #111 !important;

    margin: 0 !important;
    padding: 0 !important;
}

.cart-drawer .cart-drawer-header h2 em {
    font-weight: 400 !important;
}

.cart-drawer .cart-close {
    position: static !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 34px !important;
    height: 34px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: none !important;
    background: transparent !important;

    color: #333 !important;
    font-family: Arial, sans-serif !important;
    font-size: 27px !important;
    font-weight: 300 !important;

    cursor: pointer !important;
}

/* PRODUCTS AREA */

.cart-drawer .cart-items {
    display: block !important;

    flex: 1 1 auto !important;
    min-height: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    padding: 0 36px !important;
    margin: 0 !important;
}

.cart-drawer .cart-item {
    position: relative !important;

    display: grid !important;
    grid-template-columns: 145px minmax(0, 1fr) !important;
    align-items: center !important;

    gap: 18px !important;

    padding: 32px 0 !important;
    margin: 0 !important;

    border-bottom: 1px solid #dedede !important;
    background: transparent !important;
}

.cart-drawer .cart-item-image {
    display: block !important;

    width: 145px !important;
    height: 105px !important;

    max-width: 100% !important;

    object-fit: contain !important;

    border-radius: 3px !important;
}

.cart-drawer .cart-item-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    min-width: 0 !important;
    gap: 9px !important;
}

.cart-drawer .cart-item-info h3 {
    font-family: "Instrument Serif", Georgia, serif !important;
    font-size: 27px !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;

    margin: 0 !important;
    color: #111 !important;
}

.cart-drawer .cart-item-info p {
    margin: 0 !important;

    font-size: 11px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;

    color: #888 !important;
}

.cart-drawer .cart-item-info strong {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #111 !important;
}

.cart-drawer .cart-quantity {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 105px !important;
    height: 38px !important;

    border: 1px solid #ddd !important;
    border-radius: 5px !important;

    background: #fff !important;
}

.cart-drawer .cart-quantity button {
    width: 33px !important;
    height: 36px !important;

    border: none !important;
    background: transparent !important;

    font-size: 16px !important;
    color: #333 !important;
}

.cart-drawer .cart-quantity span {
    font-size: 13px !important;
    color: #111 !important;
}

.cart-drawer .cart-remove {
    border: none !important;
    background: transparent !important;

    padding: 0 !important;

    font-size: 10px !important;
    letter-spacing: 0.06em !important;

    color: #888 !important;
}

/* EMPTY CART */

.cart-drawer .cart-empty {
    min-height: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
}

.cart-drawer .cart-empty h3 {
    font-family: "Instrument Serif", Georgia, serif !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    color: #111 !important;
}

/* FOOTER */

.cart-drawer .cart-drawer-footer {
    display: flex !important;
    flex-direction: column !important;

    flex: 0 0 auto !important;

    padding: 22px 36px 35px !important;

    background: #f7f6f3 !important;
    border-top: 1px solid #e5e3df !important;
}

.cart-drawer .lxr-promo {
    width: 100% !important;
}

.cart-drawer .lxr-promo-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;

    padding: 8px 0 20px !important;

    border: none !important;
    background: transparent !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;

    color: #777 !important;
}

.cart-drawer .lxr-promo-plus {
    color: #b99238 !important;
    font-size: 20px !important;
}

.cart-drawer .lxr-promo-content {
    display: none;
    padding-bottom: 15px !important;
}

.cart-drawer .lxr-promo-content.open,
.cart-drawer .lxr-promo-content.active {
    display: block !important;
}

.cart-drawer .lxr-promo-form {
    display: flex !important;
    gap: 8px !important;
}

.cart-drawer .lxr-promo-form input {
    min-width: 0 !important;
    flex: 1 !important;

    padding: 12px !important;
    border: 1px solid #ddd !important;
    background: white !important;
}

.cart-drawer .lxr-promo-form button {
    padding: 0 15px !important;

    border: none !important;
    background: #111 !important;

    color: white !important;
    font-size: 10px !important;
}

.cart-drawer .cart-total {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;

    margin-top: 18px !important;
    padding: 12px 0 !important;

    border: none !important;
}

.cart-drawer .cart-total span {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    color: #888 !important;
}

.cart-drawer .cart-total strong {
    font-size: 25px !important;
    font-weight: 700 !important;
    color: #111 !important;
}

.cart-drawer .cart-shipping-note {
    display: none !important;
}

.cart-drawer .cart-checkout {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    min-height: 60px !important;

    margin-top: 10px !important;
    padding: 0 23px !important;

    border: none !important;
    border-radius: 5px !important;

    background: linear-gradient(110deg, #a17b3e, #c6a268) !important;

    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
}

/* MOBILE */

@media (max-width: 600px) {
    .cart-drawer {
        width: min(100%, 430px) !important;
    }

    .cart-drawer .cart-drawer-header {
        padding: 25px 22px 20px !important;
    }

    .cart-drawer .cart-items {
        padding: 0 22px !important;
    }

    .cart-drawer .cart-drawer-footer {
        padding: 20px 22px 28px !important;
    }

    .cart-drawer .cart-item {
        grid-template-columns: 110px minmax(0, 1fr) !important;
        gap: 13px !important;
    }

    .cart-drawer .cart-item-image {
        width: 110px !important;
        height: 85px !important;
    }
}
/* =========================================
   LXR — PREMIUM ABOUT SECTION
   WHITE / GOLD / EDITORIAL
========================================= */

.lxr-about-premium {
    position: relative !important;
    width: 100%;
    padding: 105px 5.2% 115px !important;
    background: #f8f7f3 !important;
    color: #111 !important;
    overflow: hidden;
}

.lxr-about-premium *,
.lxr-about-premium *::before,
.lxr-about-premium *::after {
    box-sizing: border-box;
}

/* MAIN LAYOUT */

.lxr-about-premium-inner {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(55px, 6.5vw, 110px);
}

/* =========================================
   LEFT — PRODUCT
========================================= */

.lxr-about-premium-visual {
    position: relative;
    width: 100%;
    min-width: 0;
    padding: 40px 35px 25px 0;
}

/* SUBTLE GOLD CIRCLE */

.lxr-about-premium-ring {
    position: absolute;

    width: 75%;
    aspect-ratio: 1;

    top: 0;
    right: 0;

    border: 1.5px solid rgba(185, 146, 56, 0.75);
    border-radius: 50%;

    pointer-events: none;
}

/* PRODUCT FRAME */

.lxr-about-premium-image {
    position: relative;
    z-index: 2;

    width: 100%;
    aspect-ratio: 1 / 0.96;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 30px;

    background: #eeebe6;

    border: 1px solid rgba(255,255,255,0.95);

    box-shadow:
        0 25px 65px rgba(58, 42, 21, 0.12),
        0 8px 20px rgba(0,0,0,0.045),
        inset 0 1px 0 rgba(255,255,255,0.9);
}

/* IMAGE */

.lxr-about-premium-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transition: transform 0.6s ease;
}

@media (hover: hover) {
    .lxr-about-premium-image:hover img {
        transform: scale(1.035);
    }
}

/* =========================================
   RIGHT — CONTENT
========================================= */

.lxr-about-premium-content {
    width: 100%;
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* EYEBROW */

.lxr-about-premium-eyebrow {
    display: flex;
    align-items: center;
    gap: 24px;

    margin-bottom: 25px;
}

.lxr-about-premium-eyebrow span {
    font-family: Arial, sans-serif;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.32em;

    color: #777;
    white-space: nowrap;
}

.lxr-about-premium-eyebrow i {
    display: block;

    width: 75px;
    height: 1px;

    background: #b99238;
}

/* TITLE */

.lxr-about-premium .lxr-about-premium-content h2 {
    margin: 0 0 30px !important;

    max-width: 720px;

    font-family: Georgia, "Times New Roman", serif !important;

    font-size: clamp(47px, 5vw, 79px) !important;
    font-weight: 400 !important;

    line-height: 1.03 !important;
    letter-spacing: -0.055em !important;

    color: #111 !important;
}

/* GOLD ITALIC */

.lxr-about-premium .lxr-about-premium-content h2 em {
    display: block;

    margin-top: 5px;

    font-family: Georgia, "Times New Roman", serif !important;

    font-style: italic !important;
    font-weight: 400 !important;

    color: #b99238 !important;
}

/* =========================================
   ORIGINAL TEXT
========================================= */

.lxr-about-premium-lead,
.lxr-about-premium-description {
    width: 100%;
    max-width: 610px;

    font-family: Arial, sans-serif;

    font-size: 15px !important;
    font-weight: 400;

    line-height: 1.85 !important;
    letter-spacing: -0.01em;

    color: #383838 !important;
}

/* FIRST PARAGRAPH */

.lxr-about-premium-lead {
    margin: 0 0 13px !important;
}

/* SECOND PARAGRAPH */

.lxr-about-premium-description {
    margin: 0 0 28px !important;
    color: #666 !important;
}

/* =========================================
   FEATURE CARDS
========================================= */

.lxr-about-premium-features {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 14px;

    margin-bottom: 35px;
}

.lxr-about-feature {
    min-width: 0;
    min-height: 135px;

    padding: 20px 10px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 15px;

    text-align: center;

    border-radius: 20px;

    border: 1px solid rgba(174, 154, 126, 0.3);

    background: rgba(255,255,255,0.28);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.75),
        0 5px 18px rgba(0,0,0,0.025);

    transition:
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.lxr-about-feature svg {
    display: block;

    width: 36px;
    height: 36px;

    color: #b99238;

    flex-shrink: 0;
}

.lxr-about-feature span {
    font-family: Arial, sans-serif;

    font-size: 14px;
    font-weight: 400;

    line-height: 1.4;

    color: #262626;
}

@media (hover: hover) {
    .lxr-about-feature:hover {
        transform: translateY(-4px);

        border-color: rgba(185,146,56,0.55);

        box-shadow:
            0 12px 28px rgba(0,0,0,0.055),
            inset 0 1px 0 #fff;
    }
}

/* =========================================
   GOLD BUTTON
========================================= */

.lxr-about-premium-button {
    width: min(100%, 410px);
    min-height: 65px;

    padding: 0 25px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    border-radius: 14px;

    border: 1px solid rgba(255,220,140,0.5);

    background: linear-gradient(
        110deg,
        #d9b66a 0%,
        #b99238 45%,
        #89651f 100%
    );

    box-shadow:
        0 12px 26px rgba(116,83,27,0.15),
        inset 0 1px 0 rgba(255,255,255,0.4);

    color: #fff !important;
    text-decoration: none !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.lxr-about-premium-button span {
    font-family: Arial, sans-serif;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.16em;
}

.lxr-about-premium-button svg {
    width: 22px;
    height: 22px;

    flex-shrink: 0;
}

@media (hover: hover) {
    .lxr-about-premium-button:hover {
        transform: translateY(-3px);

        box-shadow:
            0 17px 35px rgba(116,83,27,0.22),
            inset 0 1px 0 rgba(255,255,255,0.5);
    }
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .lxr-about-premium {
        padding: 85px 4% !important;
    }

    .lxr-about-premium-inner {
        gap: 40px;
    }

    .lxr-about-premium-visual {
        padding: 25px 15px 15px 0;
    }

    .lxr-about-premium .lxr-about-premium-content h2 {
        font-size: clamp(43px, 5vw, 60px) !important;
    }

    .lxr-about-premium-lead,
    .lxr-about-premium-description {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    .lxr-about-premium-features {
        gap: 9px;
    }

    .lxr-about-feature {
        min-height: 115px;
        padding: 15px 6px;
    }

    .lxr-about-feature span {
        font-size: 12px;
    }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 800px) {

    .lxr-about-premium {
        padding: 75px 22px 85px !important;
    }

    .lxr-about-premium-inner {
        display: flex;
        flex-direction: column;

        gap: 38px;
    }

    .lxr-about-premium-content {
        order: 1;
    }

    .lxr-about-premium-visual {
        order: 2;

        width: 100%;

        padding: 25px 15px 10px 0;
    }

    .lxr-about-premium-eyebrow {
        margin-bottom: 22px;
    }

    .lxr-about-premium-eyebrow span {
        font-size: 10px;
        letter-spacing: 0.23em;
    }

    .lxr-about-premium-eyebrow i {
        width: 50px;
    }

    .lxr-about-premium .lxr-about-premium-content h2 {
        font-size: clamp(43px, 9vw, 65px) !important;

        margin-bottom: 25px !important;
    }

    .lxr-about-premium-lead,
    .lxr-about-premium-description {
        font-size: 14px !important;
        line-height: 1.8 !important;
    }

    .lxr-about-premium-description {
        margin-bottom: 28px !important;
    }

    .lxr-about-premium-features {
        gap: 9px;
        margin-bottom: 30px;
    }

    .lxr-about-feature {
        min-height: 115px;
        border-radius: 14px;
        padding: 13px 5px;
        gap: 12px;
    }

    .lxr-about-feature svg {
        width: 29px;
        height: 29px;
    }

    .lxr-about-feature span {
        font-size: 11px;
    }

    .lxr-about-premium-button {
        width: 100%;
        min-height: 60px;
        border-radius: 12px;
    }

    .lxr-about-premium-image {
        border-radius: 22px;
    }
}

/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 380px) {

    .lxr-about-premium {
        padding-left: 17px !important;
        padding-right: 17px !important;
    }

    .lxr-about-premium .lxr-about-premium-content h2 {
        font-size: 41px !important;
    }

    .lxr-about-feature span {
        font-size: 10px;
    }

    .lxr-about-premium-button span {
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .lxr-about-premium *,
    .lxr-about-premium *::before,
    .lxr-about-premium *::after {
        transition: none !important;
    }
}
/* =========================================
   LXR — PREMIUM DARK HERO
   BLACK / GOLD / LUXURY
========================================= */

/* HERO SECTION */

.lxr-dark-hero {
    position: relative !important;

    width: 100%;
    min-height: 760px !important;

    display: grid !important;
    grid-template-columns: 49% 51% !important;

    align-items: center !important;

    padding: 0 !important;

    background:
        radial-gradient(
            ellipse at 76% 58%,
            rgba(68, 55, 38, 0.25) 0%,
            rgba(20, 18, 16, 0.12) 38%,
            transparent 70%
        ),
        #0b0b0b !important;

    overflow: hidden !important;

    isolation: isolate;
}

/* =========================================
   LEFT — TEXT
========================================= */

.lxr-dark-hero .hero-copy {
    position: relative;
    z-index: 3;

    width: 100%;

    padding:
        75px
        0
        90px
        clamp(40px, 5.8vw, 110px) !important;
}

/* MAIN TITLE */

.lxr-dark-hero .hero-copy h1 {
    margin: 0 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size: clamp(54px, 5.3vw, 92px) !important;

    font-weight: 600 !important;

    line-height: 1.08 !important;

    letter-spacing: -0.055em !important;

    color: #f4f3f0 !important;

    white-space: nowrap;
}

/* GOLD ITALIC TITLE */

.lxr-dark-hero .hero-copy h1 span {
    display: block;

    margin-top: 8px;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size: 0.92em !important;

    font-weight: 400 !important;

    font-style: italic !important;

    letter-spacing: -0.045em !important;

    color: #c8a04c !important;
}

/* DESCRIPTION */

.lxr-dark-hero .hero-copy > p {
    position: relative;

    max-width: 620px;

    margin: 44px 0 0 !important;

    padding: 3px 0 3px 26px;

    border-left: 2px solid #c8a04c;

    font-family:
        Arial,
        sans-serif;

    font-size: 15px !important;

    font-weight: 400;

    line-height: 2 !important;

    letter-spacing: -0.01em;

    color: #bcbcbc !important;
}

/* =========================================
   BUTTONS
========================================= */

.lxr-dark-hero .hero-cta {
    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    gap: 20px !important;

    margin-top: 50px !important;
}

/* BOTH BUTTONS */

.lxr-dark-hero .hero-cta a {
    width: 365px;
    max-width: 100%;

    min-height: 68px;

    display: flex !important;

    align-items: center;
    justify-content: center;

    padding: 0 25px;

    border-radius: 13px;

    font-family:
        Arial,
        sans-serif;

    font-size: 12px !important;

    font-weight: 700 !important;

    letter-spacing: 0.12em !important;

    text-decoration: none !important;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

/* FIRST BUTTON — DARK */

.lxr-dark-hero .hero-cta .btn-black {
    background: linear-gradient(
        135deg,
        #252525 0%,
        #0a0a0a 75%
    ) !important;

    color: #fff !important;

    border: 1px solid rgba(255,255,255,0.4) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 12px 30px rgba(0,0,0,0.2);
}

/* SECOND BUTTON — GOLD */

.lxr-dark-hero .hero-cta .text-cta {
    background: linear-gradient(
        110deg,
        #dbb75f 0%,
        #b58b37 48%,
        #82601f 100%
    ) !important;

    color: #fff !important;

    border: 1px solid rgba(235,196,109,0.45) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.24),
        0 12px 28px rgba(0,0,0,0.18);

    padding-bottom: 0 !important;

    white-space: nowrap;
}

/* BUTTON HOVER */

@media (hover: hover) {

    .lxr-dark-hero .hero-cta a:hover {
        transform: translateY(-3px);
    }

    .lxr-dark-hero .hero-cta .btn-black:hover {
        background: #292929 !important;
        border-color: rgba(255,255,255,0.65) !important;
    }

    .lxr-dark-hero .hero-cta .text-cta:hover {
        box-shadow:
            0 16px 35px rgba(185,146,56,0.23),
            inset 0 1px 0 rgba(255,255,255,0.3);
    }
}

/* =========================================
   RIGHT — GOLD CARD
========================================= */

.lxr-dark-hero .hero-product {
    position: relative !important;

    width: 100%;
    height: 100%;

    min-height: 650px;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    overflow: visible !important;

    perspective: none !important;
}

/* SUBTLE LIGHT BEHIND CARD */

.lxr-hero-product-glow {
    position: absolute;

    width: 85%;
    height: 65%;

    left: 8%;
    top: 26%;

    border-radius: 50%;

    background: radial-gradient(
        ellipse,
        rgba(181,135,64,0.20) 0%,
        rgba(128,93,46,0.09) 38%,
        transparent 72%
    );

    filter: blur(42px);

    pointer-events: none;
}

/* PRODUCT IMAGE */

.lxr-dark-hero .hero-product img {
    position: relative !important;

    z-index: 2;

    display: block;

    width: 112% !important;

    max-width: none !important;

    height: auto !important;

    object-fit: contain !important;

    transform:
        translate(-3%, 0)
        rotate(-9deg) !important;

    transform-origin: center center;

    animation: none !important;

    transition: none !important;

    filter:
        drop-shadow(
            0 35px 30px rgba(0,0,0,0.52)
        )
        drop-shadow(
            0 8px 18px rgba(185,146,56,0.10)
        ) !important;
}

/* =========================================
   DESKTOP HEADER — BLACK
   ONLY ON HOME PAGE
========================================= */

@media (min-width: 801px) {

    body:has(.lxr-dark-hero) .header {
        background: #0b0b0b !important;

        border-bottom:
            1px solid rgba(255,255,255,0.15) !important;
    }

    body:has(.lxr-dark-hero) .header .nav a {
        color: #b8b8b8 !important;
    }

    body:has(.lxr-dark-hero) .header .nav a:hover,
    body:has(.lxr-dark-hero) .header .nav a.active {
        color: #fff !important;
    }

    body:has(.lxr-dark-hero) .header .nav a.active {
        border-bottom-color: #c8a04c !important;
    }

    body:has(.lxr-dark-hero) .header .cart-button {
        color: #fff !important;
    }

}

/* =========================================
   LAPTOP
========================================= */

@media (min-width: 801px) and (max-width: 1250px) {

    .lxr-dark-hero {
        min-height: 650px !important;
        grid-template-columns: 52% 48% !important;
    }

    .lxr-dark-hero .hero-copy {
        padding-left: 5% !important;
    }

    .lxr-dark-hero .hero-copy h1 {
        font-size: clamp(48px, 5vw, 70px) !important;
    }

    .lxr-dark-hero .hero-copy > p {
        font-size: 13px !important;
    }

    .lxr-dark-hero .hero-product {
        min-height: 600px;
    }

    .lxr-dark-hero .hero-product img {
        width: 118% !important;
    }

}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 800px) {

    .lxr-dark-hero {
        display: flex !important;

        flex-direction: column !important;

        min-height: auto !important;

        padding: 65px 0 75px !important;
    }

    /* MOBILE HEADER */

    body:has(.lxr-dark-hero) .header {
        background: #0b0b0b !important;

        border-bottom:
            1px solid rgba(255,255,255,0.13) !important;
    }

    body:has(.lxr-dark-hero) .menu-toggle span {
        background: #fff !important;
    }

    body:has(.lxr-dark-hero) .cart-button {
        color: #fff !important;
    }

    body:has(.lxr-dark-hero) .header .nav {
        background: #111 !important;
    }

    body:has(.lxr-dark-hero) .header .nav a {
        color: #eee !important;
    }

    /* MOBILE CONTENT */

    .lxr-dark-hero .hero-copy {
        width: 100%;

        padding: 0 24px !important;

        order: 1;
    }

    .lxr-dark-hero .hero-copy h1 {
        font-size: clamp(40px, 9vw, 66px) !important;

        line-height: 1.08 !important;

        white-space: normal !important;
    }

    .lxr-dark-hero .hero-copy h1 span {
        margin-top: 5px;
    }

    .lxr-dark-hero .hero-copy > p {
        max-width: 100%;

        margin-top: 30px !important;

        padding-left: 18px;

        font-size: 13px !important;

        line-height: 1.85 !important;
    }

    /* CARD */

    .lxr-dark-hero .hero-product {
        order: 2;

        width: 100%;

        height: 350px !important;
        min-height: 350px !important;

        margin: 25px 0 0;

        overflow: hidden !important;
    }

    .lxr-dark-hero .hero-product img {
        width: 110% !important;

        transform:
            translate(5%, 0)
            rotate(-9deg) !important;
    }

    .lxr-hero-product-glow {
        width: 90%;
        height: 75%;

        top: 15%;
        left: 5%;
    }

    /* BUTTONS */

    .lxr-dark-hero .hero-cta {
        order: 3;

        width: 100%;

        margin-top: 30px !important;

        gap: 13px !important;
    }

    .lxr-dark-hero .hero-cta a {
        width: 100% !important;

        min-height: 60px;

        font-size: 11px !important;
    }

}

/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 380px) {

    .lxr-dark-hero {
        padding-top: 50px !important;
    }

    .lxr-dark-hero .hero-copy {
        padding: 0 18px !important;
    }

    .lxr-dark-hero .hero-copy h1 {
        font-size: 39px !important;
    }

    .lxr-dark-hero .hero-product {
        height: 290px !important;
        min-height: 290px !important;
    }

    .lxr-dark-hero .hero-cta a {
        min-height: 56px;
    }

}

/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .lxr-dark-hero *,
    .lxr-dark-hero *::before,
    .lxr-dark-hero *::after {
        animation: none !important;
        transition: none !important;
    }

}
/* =========================================
   LXR — DARK HERO FIX
   DESKTOP + MOBILE
========================================= */

/* CRNA POZADINA */

html body .hero,
html body .hero.lxr-dark-hero {
    background: #0a0a0a !important;
    background-image:
        radial-gradient(
            ellipse at 76% 65%,
            rgba(116, 82, 39, 0.17) 0%,
            rgba(35, 27, 19, 0.08) 35%,
            transparent 70%
        ) !important;

    color: #fff !important;
    overflow: hidden !important;
}

/* DESKTOP */

@media (min-width: 801px) {

    html body .hero {
        min-height: 760px !important;

        display: grid !important;
        grid-template-columns: 50% 50% !important;

        align-items: center !important;

        padding: 0 !important;
    }

    /* LEVA STRANA */

    html body .hero .hero-copy {
        padding: 65px 0 85px 6vw !important;
        z-index: 5 !important;
    }

    /* NASLOV */

    html body .hero h1 {
        font-family: Georgia, "Times New Roman", serif !important;

        font-size: clamp(58px, 5.5vw, 92px) !important;
        font-weight: 600 !important;

        line-height: 1.08 !important;
        letter-spacing: -0.055em !important;

        color: #f5f4f1 !important;
        white-space: nowrap !important;
    }

    html body .hero h1 span {
        display: block !important;

        margin-top: 8px !important;

        color: #c8a04c !important;

        font-style: italic !important;
        font-weight: 400 !important;
    }

    /* OPIS */

    html body .hero .hero-copy > p {
        color: #c2c2c2 !important;

        font-size: 15px !important;
        line-height: 2 !important;

        max-width: 620px !important;

        margin-top: 42px !important;

        padding-left: 25px !important;

        border-left: 2px solid #c8a04c !important;
    }

    /* DUGMAD */

    html body .hero .hero-cta {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;

        gap: 20px !important;

        margin-top: 50px !important;
    }

    html body .hero .hero-cta a {
        width: 365px !important;
        max-width: 100% !important;

        min-height: 68px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 13px !important;

        font-size: 12px !important;
        letter-spacing: 0.12em !important;
    }

    /* CRNO DUGME */

    html body .hero .btn-black {
        background: linear-gradient(
            135deg,
            #252525,
            #090909
        ) !important;

        color: #fff !important;

        border: 1px solid rgba(255,255,255,0.45) !important;
    }

    /* ZLATNO DUGME */

    html body .hero .text-cta {
        background: linear-gradient(
            110deg,
            #dcb966,
            #b58b37,
            #82601f
        ) !important;

        color: #fff !important;

        border: 1px solid rgba(235,196,109,0.45) !important;

        padding: 0 25px !important;
    }

    /* DESNA STRANA */

    html body .hero .hero-product {
        position: relative !important;

        width: 100% !important;
        height: 100% !important;

        min-height: 650px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        overflow: visible !important;
    }

    /* VELIKA KARTICA */

    html body .hero .hero-product img {
        position: relative !important;

        width: 125% !important;
        max-width: none !important;

        height: auto !important;

        transform:
            translate(-5%, 0)
            rotate(-9deg) !important;

        animation: none !important;

        filter:
            drop-shadow(0 35px 35px rgba(0,0,0,0.6))
            drop-shadow(0 8px 18px rgba(185,146,56,0.12)) !important;
    }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 800px) {

    html body .hero {
        display: flex !important;

        flex-direction: column !important;

        min-height: auto !important;

        padding: 55px 0 70px !important;
    }

    html body .hero .hero-copy {
        display: contents !important;
    }

    html body .hero h1 {
        order: 1;

        align-self: stretch;

        margin: 0 23px !important;

        font-family: Georgia, "Times New Roman", serif !important;

        font-size: clamp(40px, 9vw, 64px) !important;

        line-height: 1.08 !important;

        color: #f5f4f1 !important;

        white-space: normal !important;
    }

    html body .hero h1 span {
        display: block !important;

        margin-top: 5px !important;

        color: #c8a04c !important;

        font-style: italic !important;
        font-weight: 400 !important;
    }

    html body .hero .hero-copy > p {
        order: 2;

        align-self: stretch;

        margin: 30px 23px 0 !important;

        padding-left: 18px !important;

        border-left: 2px solid #c8a04c !important;

        color: #bcbcbc !important;

        font-size: 13px !important;
        line-height: 1.85 !important;
    }

    /* KARTICA */

    html body .hero .hero-product {
        order: 3;

        width: 100% !important;

        height: 340px !important;
        min-height: 340px !important;

        margin-top: 20px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        overflow: hidden !important;
    }

    html body .hero .hero-product img {
        width: 115% !important;
        max-width: none !important;

        transform:
            translate(5%, 0)
            rotate(-9deg) !important;

        animation: none !important;
    }

    /* DUGMAD ISPOD KARTICE */

    html body .hero .hero-cta {
        order: 4;

        width: 100% !important;

        padding: 0 23px !important;

        margin-top: 20px !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 13px !important;
    }

    html body .hero .hero-cta a {
        width: 100% !important;

        min-height: 60px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 12px !important;

        font-size: 11px !important;
        letter-spacing: 0.1em !important;
    }

    html body .hero .btn-black {
        background: #151515 !important;

        color: #fff !important;

        border: 1px solid rgba(255,255,255,0.4) !important;
    }

    html body .hero .text-cta {
        background: linear-gradient(
            110deg,
            #dcb966,
            #b58b37,
            #82601f
        ) !important;

        color: #fff !important;

        border: none !important;
        padding: 0 20px !important;
    }
}
/* ==========================================
   LUXXOR — PREMIUM HERO FINAL
   BLACK STUDIO / GOLD LIGHT / FLOOR
========================================== */


/* ==========================================
   1. HERO — CRNA STUDIO POZADINA
========================================== */

html body .hero {
    position: relative !important;

    isolation: isolate;

    background:
        radial-gradient(
            ellipse 55% 55% at 78% 52%,
            rgba(94, 64, 35, 0.24) 0%,
            rgba(43, 31, 23, 0.13) 42%,
            transparent 85%
        ),
        linear-gradient(
            180deg,
            #090909 0%,
            #0b0b0b 58%,
            #11100f 82%,
            #080808 100%
        ) !important;

    overflow: hidden !important;
}


/* ==========================================
   2. VAŠA KARTICA — BELO
========================================== */

html body .hero .hero-copy h1,
html body .hero .hero-copy h1:not(span) {
    color: #f7f7f5 !important;

    -webkit-text-fill-color: #f7f7f5 !important;

    opacity: 1 !important;

    text-shadow: none !important;
}


/* DRUGI RED — ZLATNO */

html body .hero .hero-copy h1 span {
    color: #c9a04d !important;

    -webkit-text-fill-color: #c9a04d !important;

    font-style: italic !important;
    font-weight: 400 !important;

    opacity: 1 !important;
}


/* ==========================================
   3. TOPLO SVETLO IZA KARTICE
========================================== */

html body .hero .hero-product {
    position: relative !important;

    isolation: isolate;

    overflow: visible !important;
}


/* VELIKI ZLATNI AMBIJENTALNI ODSJAJ */

html body .hero .hero-product::before {
    content: "";

    position: absolute;

    width: 115%;
    height: 105%;

    left: -7%;
    top: 0;

    background:
        radial-gradient(
            ellipse at 52% 48%,
            rgba(175, 121, 56, 0.24) 0%,
            rgba(126, 83, 40, 0.14) 28%,
            rgba(65, 44, 27, 0.07) 50%,
            transparent 75%
        );

    filter: blur(35px);

    z-index: -1;

    pointer-events: none;
}


/* ==========================================
   4. POD ISPOD KARTICE
========================================== */

html body .hero .hero-product::after {
    content: "";

    position: absolute;

    width: 120%;
    height: 42%;

    left: -10%;
    bottom: 0;

    background:
        radial-gradient(
            ellipse at 50% 35%,
            rgba(198, 147, 77, 0.30) 0%,
            rgba(143, 100, 52, 0.19) 23%,
            rgba(76, 54, 36, 0.10) 45%,
            transparent 75%
        );

    filter: blur(22px);

    transform: perspective(650px) rotateX(64deg);

    transform-origin: center bottom;

    z-index: 0;

    pointer-events: none;
}


/* ==========================================
   5. SVETLO ISPOD KARTICE
========================================== */

html body .hero .lxr-hero-product-glow {
    position: absolute !important;

    width: 85% !important;
    height: 18% !important;

    left: 4% !important;
    top: auto !important;
    bottom: 14% !important;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(237, 177, 91, 0.52) 0%,
            rgba(177, 116, 55, 0.26) 28%,
            rgba(102, 70, 38, 0.10) 55%,
            transparent 78%
        ) !important;

    filter: blur(28px) !important;

    transform: scaleY(0.48);

    z-index: 0 !important;

    pointer-events: none;
}


/* ==========================================
   6. KARTICA — VELIČINA I SENKA
========================================== */

@media (min-width: 801px) {

    html body .hero .hero-product img {
        position: relative !important;

        z-index: 3 !important;

        width: 145% !important;
        max-width: none !important;

        height: auto !important;

        object-fit: contain !important;

        transform:
            translate(-7%, -2%)
            rotate(-9deg) !important;

        filter:
            drop-shadow(
                0 48px 28px rgba(0, 0, 0, 0.72)
            )
            drop-shadow(
                0 16px 22px rgba(0, 0, 0, 0.40)
            )
            drop-shadow(
                0 0 20px rgba(204, 152, 73, 0.12)
            ) !important;

        animation: none !important;
    }

}


/* ==========================================
   7. DODATNO OSVETLJENJE HERO POZADINE
========================================== */

html body .hero {
    box-shadow:
        inset 0 90px 110px rgba(0,0,0,0.15),
        inset 0 -100px 130px rgba(0,0,0,0.30);
}


/* ==========================================
   8. TEKST — KONTRAST
========================================== */

html body .hero .hero-copy > p {
    color: #c8c8c8 !important;
}

html body .hero .hero-copy {
    position: relative !important;
    z-index: 5 !important;
}


/* ==========================================
   9. MOBILE
========================================== */

@media (max-width: 800px) {

    html body .hero {
        background:
            radial-gradient(
                ellipse at 50% 65%,
                rgba(109, 75, 40, 0.18),
                transparent 65%
            ),
            #090909 !important;
    }

    html body .hero .hero-product {
        overflow: hidden !important;

        isolation: isolate;

        min-height: 350px !important;
    }

    html body .hero .hero-product img {
        position: relative !important;

        z-index: 3 !important;

        width: 128% !important;

        max-width: none !important;

        transform:
            translate(5%, -2%)
            rotate(-9deg) !important;

        filter:
            drop-shadow(
                0 25px 22px rgba(0,0,0,0.65)
            )
            drop-shadow(
                0 0 15px rgba(190,140,70,0.12)
            ) !important;
    }

    html body .hero .hero-product::before {
        width: 100%;
        height: 100%;

        left: 0;
        top: 0;

        filter: blur(25px);
    }

    html body .hero .hero-product::after {
        width: 110%;
        height: 35%;

        left: -5%;
        bottom: 0;

        filter: blur(20px);
    }

    html body .hero .lxr-hero-product-glow {
        width: 90% !important;
        height: 20% !important;

        left: 5% !important;
        bottom: 12% !important;

        filter: blur(24px) !important;
    }

    html body .hero .hero-copy h1 {
        color: #f7f7f5 !important;
        -webkit-text-fill-color: #f7f7f5 !important;
    }

    html body .hero .hero-copy h1 span {
        color: #c9a04d !important;
        -webkit-text-fill-color: #c9a04d !important;
    }

}


/* ==========================================
   10. NO ANIMATION
========================================== */

html body .hero .hero-product img {
    animation: none !important;
    transition: none !important;
}
/* =========================================
   LXR — REMOVE SECTION DIVIDERS
========================================= */

/* Uklanjanje linija iznad naslova sekcija */

.section-index {
    border-top: none !important;
}

/* Uklanjanje linija između glavnih sekcija */

section.section {
    border-top: none !important;
    border-bottom: none !important;
}

/* Uklanjanje dodatnih separatora */

.statement,
.process,
.faq,
.reviews {
    border-top: none !important;
    border-bottom: none !important;
}

/* Ako su linije napravljene pseudo-elementima */

.section-index::before,
.section-index::after {
    display: none !important;
}

/* Zadržavamo razmake između sekcija */

.section-index {
    padding-top: 0 !important;
}
/* =========================================
   LUXXOR — REMOVE SECTION LABELS
   Uklanjanje brojeva i sitnih natpisa
========================================= */

/* Sakrij ceo red sa brojevima i natpisima */

.section-index {
    display: none !important;
}

/* Ukloni prostor koji je ostao */

.section-index + * {
    margin-top: 0 !important;
}

/* Zadrži uredan raspored sekcija */

.statement,
.process,
.faq,
.reviews {
    border-top: none !important;
}

/* Mobilna verzija */

@media (max-width: 800px) {
    .section-index {
        display: none !important;
    }
}
/* =========================================
   LUXXOR — PREMIUM LIQUID GLASS
   ABOUT SECTION IMAGE CONTAINER
========================================= */

.lxr-about-premium .lxr-about-premium-image {

    position: relative !important;

    /* PROVIDNO STAKLO */
    background: rgba(255, 255, 255, 0.12) !important;

    /* MATIRANO STAKLO */
    -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
    backdrop-filter: blur(28px) saturate(160%) !important;

    /* ZAOBLJENE IVICE */
    border-radius: 30px !important;

    /* STAKLENA IVICA */
    border: 1px solid rgba(255, 255, 255, 0.85) !important;

    /* SUptILNA SENKA */
    box-shadow:
        0 25px 65px rgba(50, 40, 25, 0.09),
        0 8px 25px rgba(0, 0, 0, 0.035),
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(255, 255, 255, 0.30) !important;

    overflow: hidden !important;
}


/* GORNJI STAKLENI ODSJAJ */

.lxr-about-premium .lxr-about-premium-image::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 42%;

    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.30) 0%,
        rgba(255, 255, 255, 0.08) 55%,
        transparent 100%
    );

    pointer-events: none;

    z-index: 2;
}


/* DONJI STAKLENI ODSJAJ */

.lxr-about-premium .lxr-about-premium-image::after {

    content: "";

    position: absolute;

    bottom: 0;
    left: 0;

    width: 100%;
    height: 30%;

    background: linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.16),
        transparent
    );

    pointer-events: none;

    z-index: 2;
}


/* SLIKA OSTAJE JASNA */

.lxr-about-premium .lxr-about-premium-image img {

    position: relative !important;

    z-index: 3 !important;

    filter: none !important;

    opacity: 1 !important;
}


/* DISKRETNA SENKA ISPOD STAKLA */

.lxr-about-premium .lxr-about-premium-visual {

    filter: drop-shadow(
        0 20px 35px rgba(75, 60, 40, 0.045)
    );
}


/* MOBILE */

@media (max-width: 800px) {

    .lxr-about-premium .lxr-about-premium-image {

        border-radius: 24px !important;

        -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
        backdrop-filter: blur(20px) saturate(150%) !important;

        box-shadow:
            0 15px 40px rgba(0, 0, 0, 0.07),
            inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    }

}
/* =========================================
   LXR — SAKRIJ KRUG UNUTAR STAKLA
========================================= */

.lxr-about-premium-visual {
    position: relative !important;
}

/* Zlatni krug ostaje iza kocke */
.lxr-about-premium-ring {
    z-index: 0 !important;
}

/* Staklena kocka prekriva krug */
.lxr-about-premium .lxr-about-premium-image {
    position: relative !important;
    z-index: 2 !important;

    /* Neprovidna podloga ispod staklenog sloja */
    background: #f8f7f3 !important;

    isolation: isolate;
}

/* Blagi stakleni odsjaj */
.lxr-about-premium .lxr-about-premium-image::before {
    background: linear-gradient(
        145deg,
        rgba(255,255,255,0.55),
        rgba(255,255,255,0.08) 55%,
        transparent
    ) !important;
}
/* ==========================================
   LXR — CART OVERLAY / NAVBAR BLUR
   Važi za sve stranice
========================================== */

/* Navbar ostaje ispod overlay-a */
.header,
#siteHeader {
    z-index: 100 !important;
}

/* Zatamnjenje i blur cele stranice */
.cart-overlay {
    position: fixed !important;
    inset: 0 !important;

    z-index: 9998 !important;

    background: rgba(0, 0, 0, 0.42) !important;

    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
}

/* Korpa je iznad zatamnjene pozadine */
.cart-drawer {
    position: fixed !important;

    z-index: 9999 !important;
}
/* =========================================
   LXR — IDENTIČAN NAVBAR NA SVIM STRANICAMA
========================================= */

.header,
#siteHeader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    background: rgba(250, 249, 246, 0.88) !important;

    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;

    border-radius: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.035) !important;

    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.025) !important;

    z-index: 100 !important;
}

/* Crni tekst navigacije */
.header nav a,
#siteHeader nav a,
.header .nav a,
#siteHeader .nav a {
    color: #171717 !important;
    opacity: 1 !important;
}

/* Aktivna stranica */
.header nav a.active,
#siteHeader nav a.active {
    color: #171717 !important;
}

/* Hover */
.header nav a:hover,
#siteHeader nav a:hover {
    color: #b8923d !important;
}

/* Ikonica korpe */
.header .cart-button,
#siteHeader .cart-button {
    color: #171717 !important;
    opacity: 1 !important;
}

/* Kada se otvori korpa, navbar ostaje iza blur sloja */
.cart-overlay {
    z-index: 9998 !important;
}

.cart-drawer {
    z-index: 9999 !important;
}
/* =====================================
   LXR — ULTRA TRANSPARENT GLASS NAVBAR
===================================== */

.header,
#siteHeader {
    background: rgba(255, 255, 255, 0.28) !important;

    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important;

    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.025),
        inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;

    border-radius: 0 !important;
}

/* Navigacija ostaje jasno vidljiva */
.header nav a,
#siteHeader nav a {
    color: #171717 !important;
    opacity: 1 !important;
}

/* Ikonica korpe */
.header .cart-button,
#siteHeader .cart-button {
    color: #171717 !important;
    opacity: 1 !important;
}

/* Navbar iza blur sloja otvorene korpe */
.cart-overlay {
    z-index: 9998 !important;
}

.cart-drawer {
    z-index: 9999 !important;
}
/* LXR — REALISTIČAN KONTAKT KARTICE SA PODLOGOM */

.hero-card {
    position: relative;
    transform-origin: center bottom;
    filter: drop-shadow(0 22px 16px rgba(0, 0, 0, 0.28));
}

/* Mekana kontaktna senka ispod kartice */
.hero-card::after {
    content: "";
    position: absolute;
    left: 15%;
    right: 12%;
    bottom: -8px;
    height: 18px;
    background: rgba(0, 0, 0, 0.38);
    filter: blur(14px);
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
}
/* =========================================
   LXR — GLOBAL CART
   IDENTIČAN IZGLED NA SVIM STRANICAMA
========================================= */

.cart-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9998 !important;
}

.cart-overlay.open,
body.cart-open .cart-overlay {
    opacity: 1 !important;
    visibility: visible !important;
}

.cart-drawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;

    width: min(470px, 100%) !important;
    height: 100dvh !important;

    z-index: 9999 !important;

    display: flex !important;
    flex-direction: column !important;

    transform: translateX(100%) !important;
}

.cart-drawer.open,
body.cart-open .cart-drawer {
    transform: translateX(0) !important;
}

.cart-drawer .cart-items {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

.cart-drawer .cart-drawer-footer {
    flex: 0 0 auto !important;
    margin-top: auto !important;
}

body.cart-open {
    overflow: hidden !important;
}
/* =========================================================
   LUXXOR — FINAL PREMIUM CART 2026
   SAME DESIGN ON EVERY PAGE
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif&display=swap');


/* OVERLAY */

#cartOverlay {
    position: fixed !important;
    inset: 0 !important;

    background: rgba(24, 22, 19, 0.48) !important;

    backdrop-filter: blur(9px) !important;
    -webkit-backdrop-filter: blur(9px) !important;

    opacity: 0 !important;
    visibility: hidden !important;

    z-index: 99998 !important;

    transition:
        opacity .35s ease,
        visibility .35s ease !important;
}

#cartOverlay.open {
    opacity: 1 !important;
    visibility: visible !important;
}


/* MAIN DRAWER */

#cartDrawer {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: min(630px, 100%) !important;
    max-width: 100% !important;

    height: 100dvh !important;

    background: #faf8f5 !important;

    border-radius: 34px 0 0 34px !important;

    box-shadow:
        -20px 0 80px rgba(0, 0, 0, .09) !important;

    z-index: 99999 !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;

    transform: translateX(105%) !important;

    transition:
        transform .55s cubic-bezier(.22, 1, .36, 1) !important;

    font-family: "DM Sans", Arial, sans-serif !important;
}

#cartDrawer.open {
    transform: translateX(0) !important;
}

body.cart-open {
    overflow: hidden !important;
}


/* =========================================================
   HEADER
========================================================= */

#cartDrawer .cart-drawer-header {
    position: relative !important;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;

    flex-shrink: 0 !important;

    min-height: 0 !important;

    padding: 62px 53px 26px !important;

    background: transparent !important;

    border: none !important;
}

#cartDrawer .cart-eyebrow {
    display: none !important;
}

#cartDrawer .cart-drawer-header h2 {
    margin: 0 !important;

    font-family: "Instrument Serif", Georgia, serif !important;

    font-size: 62px !important;
    font-weight: 400 !important;

    line-height: 1 !important;

    letter-spacing: -2px !important;

    color: #111 !important;
}

#cartDrawer .cart-drawer-header h2 em {
    font-family: inherit !important;
    font-style: normal !important;
    font-weight: 400 !important;

    color: #111 !important;
}


/* PRODUCT COUNT */

#cartDrawer .lxr-cart-subtitle {
    display: block !important;

    margin-top: 17px !important;

    font-family: "DM Sans", sans-serif !important;

    font-size: 12px !important;
    font-weight: 600 !important;

    letter-spacing: 2px !important;

    color: #88847e !important;
}


/* CLOSE BUTTON */

#cartDrawer #cartClose {
    position: absolute !important;

    top: 31px !important;
    right: 35px !important;

    width: 43px !important;
    height: 43px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;

    background: #faf8f5 !important;

    border: 1px solid #e8e3dd !important;
    border-radius: 12px !important;

    box-shadow: 0 2px 7px rgba(0,0,0,.04) !important;

    color: #111 !important;

    font-size: 28px !important;
    font-weight: 300 !important;

    line-height: 1 !important;

    cursor: pointer !important;

    transition:
        background .2s ease,
        transform .2s ease !important;
}

#cartDrawer #cartClose:hover {
    background: #f0ece6 !important;
    transform: rotate(90deg) !important;
}


/* =========================================================
   PRODUCT LIST
========================================================= */

#cartDrawer #cartItems {
    flex: 1 1 auto !important;

    min-height: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    padding: 4px 53px 20px !important;

    background: transparent !important;

    scrollbar-width: thin;
    scrollbar-color: #ded9d2 transparent;
}


/* PRODUCT ROW */

#cartDrawer .cart-item {
    position: relative !important;

    display: grid !important;

    grid-template-columns: 150px minmax(0, 1fr) 95px !important;

    align-items: center !important;

    column-gap: 23px !important;

    min-height: 155px !important;

    padding: 20px 0 !important;

    margin: 0 !important;

    border: none !important;
    border-bottom: 1px solid #efebe6 !important;

    background: transparent !important;

    overflow: visible !important;
}

#cartDrawer .cart-item:last-child {
    border-bottom: none !important;
}


/* IMAGE */

#cartDrawer .cart-item-image {
    display: block !important;

    width: 150px !important;
    height: 110px !important;

    max-width: none !important;

    padding: 8px !important;
    margin: 0 !important;

    background: #f0ece8 !important;

    border: none !important;
    border-radius: 12px !important;

    object-fit: contain !important;

    transform: none !important;

    filter: none !important;

    box-shadow: none !important;
}


/* PRODUCT INFORMATION */

#cartDrawer .cart-item-info {
    display: flex !important;

    flex-direction: column !important;
    align-items: flex-start !important;

    min-width: 0 !important;

    padding: 0 !important;

    background: transparent !important;
}

#cartDrawer .cart-item-info h3 {
    margin: 0 0 7px !important;

    font-family: "Instrument Serif", Georgia, serif !important;

    font-size: 23px !important;
    font-weight: 400 !important;

    line-height: 1.1 !important;

    letter-spacing: -.35px !important;

    color: #141414 !important;
}

#cartDrawer .cart-item-info p {
    margin: 0 0 14px !important;

    font-family: "DM Sans", sans-serif !important;

    font-size: 10px !important;
    font-weight: 700 !important;

    line-height: 1.4 !important;

    letter-spacing: 1.5px !important;

    text-transform: uppercase !important;

    color: #8b8783 !important;
}


/* PRICE */

#cartDrawer .cart-item-info strong {
    position: absolute !important;

    top: 50% !important;
    right: 52px !important;

    transform: translateY(-50%) !important;

    margin: 0 !important;

    font-family: "DM Sans", sans-serif !important;

    font-size: 17px !important;
    font-weight: 700 !important;

    letter-spacing: -.4px !important;

    color: #111 !important;

    white-space: nowrap !important;
}


/* =========================================================
   QUANTITY
========================================================= */

#cartDrawer .cart-quantity {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    width: 124px !important;
    height: 42px !important;

    gap: 0 !important;

    margin: 0 !important;

    padding: 3px !important;

    border: 1px solid #e6e0d9 !important;
    border-radius: 100px !important;

    background: transparent !important;

    box-shadow: 0 1px 4px rgba(0,0,0,.025) !important;
}

#cartDrawer .cart-quantity button {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 34px !important;
    height: 34px !important;

    padding: 0 !important;

    border: none !important;
    border-radius: 50% !important;

    background: transparent !important;

    color: #111 !important;

    font-size: 20px !important;
    font-weight: 400 !important;

    cursor: pointer !important;

    transition: background .2s ease !important;
}

#cartDrawer .cart-quantity button:hover {
    background: #ebe5de !important;
}

#cartDrawer .cart-quantity span {
    font-family: "DM Sans", sans-serif !important;

    font-size: 13px !important;
    font-weight: 600 !important;

    color: #111 !important;
}


/* =========================================================
   REMOVE BUTTON
========================================================= */

#cartDrawer .cart-remove {
    position: absolute !important;

    top: 50% !important;
    right: 0 !important;

    transform: translateY(-50%) !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 42px !important;
    height: 42px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;
    border-radius: 12px !important;

    background: #f0ece8 !important;

    color: #171717 !important;

    font-size: 0 !important;

    text-decoration: none !important;

    cursor: pointer !important;

    transition: background .2s ease !important;
}

#cartDrawer .cart-remove:hover {
    background: #e7dfd6 !important;
}

#cartDrawer .cart-remove::before {
    content: "" !important;

    display: block !important;

    width: 19px !important;
    height: 19px !important;

    background-color: #111 !important;

    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2m3 0-1 14H6L5 6m5 4v7m4-7v7'/%3E%3C/svg%3E") center/contain no-repeat !important;

    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2m3 0-1 14H6L5 6m5 4v7m5-7v7'/%3E%3C/svg%3E") center/contain no-repeat !important;
}

#cartDrawer .cart-remove::after {
    display: none !important;
}


/* =========================================================
   FOOTER
========================================================= */

#cartDrawer .cart-drawer-footer {
    flex: 0 0 auto !important;

    margin-top: auto !important;

    padding: 24px 53px 50px !important;

    background: #faf8f5 !important;

    border: none !important;

    box-shadow: none !important;
}


/* =========================================================
   PROMO CODE
========================================================= */

#cartDrawer .lxr-promo {
    position: relative !important;

    display: block !important;

    margin: 0 0 38px !important;

    padding: 0 !important;

    border: none !important;

    background: transparent !important;
}


/* HIDE OLD TOGGLE */

#cartDrawer .lxr-promo-toggle {
    display: none !important;
}


/* ALWAYS SHOW PROMO INPUT */

#cartDrawer .lxr-promo-content {
    display: block !important;

    padding: 0 !important;

    animation: none !important;
}

#cartDrawer .lxr-promo-form {
    position: relative !important;

    display: flex !important;

    align-items: center !important;

    width: 100% !important;
    height: 62px !important;

    padding: 5px !important;

    gap: 0 !important;

    border: 1px solid #e5dfd7 !important;
    border-radius: 22px !important;

    background: transparent !important;

    box-shadow: 0 1px 4px rgba(0,0,0,.02) !important;
}


/* PROMO ICON */

#cartDrawer .lxr-promo-form::before {
    content: "◇" !important;

    position: absolute !important;

    left: 23px !important;

    font-size: 25px !important;

    color: #171717 !important;

    pointer-events: none !important;
}


/* INPUT */

#cartDrawer #lxrPromoInput {
    flex: 1 !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 100% !important;

    padding: 0 15px 0 63px !important;

    border: none !important;
    border-radius: 18px !important;

    outline: none !important;

    background: transparent !important;

    font-family: "DM Sans", sans-serif !important;

    font-size: 13px !important;
    font-weight: 500 !important;

    letter-spacing: 0 !important;

    color: #111 !important;

    box-shadow: none !important;
}

#cartDrawer #lxrPromoInput::placeholder {
    color: #77736f !important;
    opacity: 1 !important;
}


/* APPLY BUTTON */

#cartDrawer #lxrPromoApply {
    flex-shrink: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 54px !important;
    height: 50px !important;

    padding: 0 !important;

    border: none !important;
    border-radius: 15px !important;

    background: #f0eae3 !important;

    color: #98732e !important;

    font-size: 0 !important;

    cursor: pointer !important;

    transition: background .2s ease !important;
}

#cartDrawer #lxrPromoApply::before {
    content: "→" !important;

    font-family: Arial, sans-serif !important;

    font-size: 29px !important;
    font-weight: 300 !important;

    line-height: 1 !important;
}

#cartDrawer #lxrPromoApply:hover {
    background: #e6d8c4 !important;
}

#cartDrawer .lxr-promo-message {
    margin: 8px 0 0 !important;

    font-size: 11px !important;

    min-height: 0 !important;
}


/* DISCOUNT */

#cartDrawer .cart-discount {
    margin-bottom: 16px !important;

    font-family: "DM Sans", sans-serif !important;

    font-size: 12px !important;

    color: #a8864c !important;
}

#cartDrawer .cart-discount[hidden] {
    display: none !important;
}


/* =========================================================
   TOTAL
========================================================= */

#cartDrawer .cart-total {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 15px !important;

    margin: 0 0 39px !important;

    padding: 0 !important;

    border: none !important;

    background: transparent !important;
}

#cartDrawer .cart-total span {
    font-family: "Instrument Serif", Georgia, serif !important;

    font-size: 27px !important;
    font-weight: 400 !important;

    line-height: 1.1 !important;

    letter-spacing: -.3px !important;

    text-transform: none !important;

    color: #111 !important;
}

#cartDrawer .cart-total strong {
    font-family: "DM Sans", sans-serif !important;

    font-size: 33px !important;
    font-weight: 700 !important;

    line-height: 1 !important;

    letter-spacing: -1px !important;

    color: #111 !important;
}


/* HIDE SHIPPING TEXT */

#cartDrawer .cart-shipping-note {
    display: none !important;
}


/* =========================================================
   CHECKOUT BUTTON
========================================================= */

#cartDrawer .cart-checkout {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    position: relative !important;

    width: 100% !important;
    min-height: 72px !important;

    padding: 20px 65px 20px 25px !important;

    border: none !important;
    border-radius: 19px !important;

    background: #24211f !important;

    color: #fff !important;

    font-family: "DM Sans", sans-serif !important;

    font-size: 11px !important;
    font-weight: 700 !important;

    letter-spacing: 3px !important;

    text-decoration: none !important;

    box-shadow: none !important;

    transition:
        background .25s ease,
        transform .25s ease !important;
}

#cartDrawer .cart-checkout:hover {
    background: #111 !important;
    transform: translateY(-2px) !important;
}

#cartDrawer .cart-checkout span {
    position: absolute !important;

    right: 30px !important;

    font-family: Arial, sans-serif !important;

    font-size: 29px !important;
    font-weight: 300 !important;

    line-height: 1 !important;

    color: white !important;
}


/* =========================================================
   EMPTY CART
========================================================= */

#cartDrawer .cart-empty {
    padding: 85px 10px !important;

    text-align: center !important;
}

#cartDrawer .cart-empty h3 {
    font-family: "Instrument Serif", Georgia, serif !important;

    font-size: 35px !important;
    font-weight: 400 !important;

    color: #111 !important;
}

#cartDrawer .cart-empty p {
    font-family: "DM Sans", sans-serif !important;

    font-size: 13px !important;

    color: #888 !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    #cartDrawer {
        width: 100% !important;

        border-radius: 0 !important;
    }

    #cartDrawer .cart-drawer-header {
        padding: 72px 23px 22px !important;
    }

    #cartDrawer .cart-drawer-header h2 {
        font-size: 49px !important;
    }

    #cartDrawer #cartClose {
        top: 22px !important;
        right: 22px !important;

        width: 39px !important;
        height: 39px !important;
    }

    #cartDrawer #cartItems {
        padding: 0 23px 15px !important;
    }

    #cartDrawer .cart-item {
        grid-template-columns: 95px minmax(0, 1fr) 65px !important;

        column-gap: 12px !important;

        min-height: 120px !important;

        padding: 15px 0 !important;
    }

    #cartDrawer .cart-item-image {
        width: 95px !important;
        height: 85px !important;

        padding: 5px !important;
    }

    #cartDrawer .cart-item-info h3 {
        font-size: 19px !important;
    }

    #cartDrawer .cart-item-info p {
        font-size: 9px !important;

        letter-spacing: 1px !important;

        margin-bottom: 10px !important;
    }

    #cartDrawer .cart-item-info strong {
        right: 0 !important;
        top: 31px !important;

        transform: none !important;

        font-size: 13px !important;
    }

    #cartDrawer .cart-quantity {
        width: 104px !important;
        height: 35px !important;
    }

    #cartDrawer .cart-quantity button {
        width: 29px !important;
        height: 29px !important;

        font-size: 17px !important;
    }

    #cartDrawer .cart-remove {
        top: auto !important;
        bottom: 17px !important;
        right: 0 !important;

        transform: none !important;

        width: 34px !important;
        height: 34px !important;
    }

    #cartDrawer .cart-remove::before {
        width: 16px !important;
        height: 16px !important;
    }

    #cartDrawer .cart-drawer-footer {
        padding: 18px 23px 25px !important;
    }

    #cartDrawer .lxr-promo {
        margin-bottom: 27px !important;
    }

    #cartDrawer .lxr-promo-form {
        height: 56px !important;

        border-radius: 17px !important;
    }

    #cartDrawer #lxrPromoApply {
        height: 44px !important;
        width: 48px !important;
    }

    #cartDrawer .cart-total {
        margin-bottom: 26px !important;
    }

    #cartDrawer .cart-total span {
        font-size: 23px !important;
    }

    #cartDrawer .cart-total strong {
        font-size: 27px !important;
    }

    #cartDrawer .cart-checkout {
        min-height: 62px !important;

        font-size: 10px !important;

        letter-spacing: 2px !important;

        border-radius: 15px !important;
    }
}

@media (max-width: 380px) {

    #cartDrawer .cart-item {
        grid-template-columns: 78px minmax(0, 1fr) 55px !important;
        column-gap: 9px !important;
    }

    #cartDrawer .cart-item-image {
        width: 78px !important;
        height: 78px !important;
    }

    #cartDrawer .cart-item-info h3 {
        font-size: 17px !important;
    }

    #cartDrawer .cart-quantity {
        width: 95px !important;
    }
}
/* LUXXOR — UŽA KORPICA */

#cartDrawer {
    width: min(550px, 100%) !important;
}

@media (max-width: 700px) {
    #cartDrawer {
        width: 100% !important;
    }
}
/* ==========================================
   LUXXOR — FINAL GLOBAL TYPOGRAPHY
   INDEX / METAL CARDS / CONTACT / CART
========================================== */

/* ORIGINALNI FONTOVI */

@font-face {
    font-family: "LXR Serif";
    src: url("./InstrumentSerif-Regular(2).ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "LXR Serif";
    src: url("./InstrumentSerif-Italic(2).ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* OSNOVNA TIPOGRAFIJA */

:root {
    --lxr-serif: "LXR Serif", Georgia, serif;
    --lxr-sans: Arial, Helvetica, sans-serif;
}

body {
    font-family: var(--lxr-sans) !important;
}

/* ==========================================
   VELIKI NASLOVI — INSTRUMENT SERIF
========================================== */

.hero h1,
.lxr-about-premium h2,
.lxr-process-heading h2,
.faq-intro h2,
.reviews-heading h2,
.final-cta h2,
.catalog-title h1,
.contact-page .contact-nav-heading h1 {
    font-family: var(--lxr-serif) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-stretch: normal !important;
    font-kerning: normal !important;
}

/* ==========================================
   ZLATNI ITALIC NASLOVI
========================================== */

.lxr-about-premium h2 em,
.lxr-process-heading h2 span,
.faq-intro h2 span,
.reviews-heading h2 span,
.final-cta h2 span,
.catalog-title h1 span,
.collection-description-accent {
    font-family: var(--lxr-serif) !important;
    font-weight: 400 !important;
    font-style: italic !important;
    font-stretch: normal !important;
}

/* ZADRŽAVAMO POSTOJEĆE ZLATNE BOJE */

.lxr-process-heading h2 span,
.faq-intro h2 span,
.reviews-heading h2 span,
.catalog-title h1 span {
    color: #b99238 !important;
}

/* ==========================================
   KAKO FUNKCIONIŠE — ČETIRI KARTICE
========================================== */

.lxr-process .lxr-card-text h3 {
    font-family: var(--lxr-sans) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    font-style: normal !important;
    font-stretch: normal !important;
    letter-spacing: -0.5px !important;
    line-height: 1.3 !important;
    transform: none !important;
}

.lxr-process .lxr-card-text p {
    font-family: var(--lxr-sans) !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
}

/* ==========================================
   METALNE KARTICE — KATALOG
========================================== */

.catalog-title h1 {
    font-family: var(--lxr-serif) !important;
    font-weight: 400 !important;
    font-style: normal !important;
}

.catalog-title h1 span {
    font-family: var(--lxr-serif) !important;
    font-style: italic !important;
    font-weight: 400 !important;
}

.collection-description-main {
    font-family: var(--lxr-sans) !important;
    font-weight: 400 !important;
}

.collection-description-accent {
    font-family: var(--lxr-serif) !important;
    font-style: italic !important;
    font-weight: 400 !important;
}

.products-grid .product-name {
    font-family: var(--lxr-sans) !important;
    font-weight: 600 !important;
    font-style: normal !important;
    font-stretch: normal !important;
    letter-spacing: -0.3px !important;
}

.products-grid .product-price {
    font-family: var(--lxr-sans) !important;
    font-style: normal !important;
}

/* ==========================================
   KONTAKT STRANICA
========================================== */

.contact-page .contact-nav-heading h1 {
    font-family: var(--lxr-serif) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-stretch: normal !important;
}

.contact-page .contact-nav-heading p,
.contact-page .contact-category,
.contact-page .contact-nav-field label,
.contact-page .contact-nav-field input,
.contact-page .contact-nav-field textarea,
.contact-page .contact-submit {
    font-family: var(--lxr-sans) !important;
    font-style: normal !important;
}

/* ==========================================
   RECENZIJE
========================================== */

.reviews-grid .review blockquote {
    font-family: var(--lxr-sans) !important;
    font-weight: 600 !important;
    font-style: normal !important;
    font-stretch: normal !important;
    letter-spacing: -0.4px !important;
}

.reviews-grid .review-bottom,
.reviews-grid .review-top {
    font-family: var(--lxr-sans) !important;
}

/* ==========================================
   FAQ
========================================== */

.faq-list summary {
    font-family: var(--lxr-sans) !important;
    font-weight: 600 !important;
    font-style: normal !important;
}

.faq-list details > p {
    font-family: var(--lxr-sans) !important;
}

/* ==========================================
   NAVIGACIJA
========================================== */

.header .nav a {
    font-family: var(--lxr-sans) !important;
    font-weight: 600 !important;
    font-style: normal !important;
}

/* ==========================================
   KORPA
========================================== */

#cartDrawer .cart-drawer-header h2 {
    font-family: var(--lxr-serif) !important;
    font-weight: 400 !important;
    font-style: normal !important;
}

#cartDrawer .cart-drawer-header h2 em {
    font-family: var(--lxr-serif) !important;
    font-style: italic !important;
}

#cartDrawer .cart-item-info h3,
#cartDrawer .cart-item-info p,
#cartDrawer .cart-total,
#cartDrawer .cart-checkout {
    font-family: var(--lxr-sans) !important;
}

/* ==========================================
   FOOTER
========================================== */

.footer,
.footer a,
.footer p,
.footer span {
    font-family: var(--lxr-sans) !important;
}

/* ==========================================
   MOBILNA VERZIJA
========================================== */

@media (max-width: 800px) {

    .lxr-process .lxr-card-text h3 {
        font-size: 19px !important;
    }

}