/* ===================================
   ROOT VARIABLES
=================================== */

:root{

    --void:#0b0a09;
    --void-soft:#15110f;

    --oxblood:#3d0f16;
    --oxblood-soft:#2a0a0f;

    --halka-red:#b31b1b;
    --halka-green:#1f8b4c;

    --gold-bright:#e8d5a3;

    --bone:#ece6d6;
    --dust:#9c8455;

    --font-display:'Cinzel', serif;
    --font-body:'Inter', sans-serif;
    --font-mono:'JetBrains Mono', monospace;

    --radius:6px;
    --max-width:1180px;

}


/* ===================================
   RESET
=================================== */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--void);
    color:var(--bone);

    font-family:var(--font-body);

    line-height:1.6;

    -webkit-font-smoothing:antialiased;

}

img{

    max-width:100%;
    display:block;

}

a{

    color:inherit;
    text-decoration:none;

}

ul,
ol{

    list-style:none;

}

button{

    font-family:inherit;
    cursor:pointer;

}

input,
button,
textarea{

    outline:none;

}


/* ===================================
   ACCESSIBILITY
=================================== */

.sr-only{

    position:absolute;

    width:1px;
    height:1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

}


/* ===================================
   FOCUS
=================================== */

:focus-visible{

    outline:2px solid var(--halka-green);

    outline-offset:3px;

}


/* ===================================
   SCROLLBAR
=================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--void);

}

::-webkit-scrollbar-thumb{

    background:var(--dust);

    border-radius:20px;

}


/* ===================================
   CONTAINER
=================================== */

.wrap{

    max-width:var(--max-width);

    margin:auto;

    padding:0 24px;

}


/* ===================================
   REVEAL ANIMATION
=================================== */

.reveal{

    opacity:0;

    transform:translateY(30px);

    transition:
        opacity .7s ease,
        transform .7s ease;

}

.reveal.in-view{

    opacity:1;

    transform:translateY(0);

}


/* ===================================
   BUTTONS
=================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:14px 28px;

    border-radius:var(--radius);

    font-weight:600;

    transition:.3s;

}

.btn-gold{

    background:var(--halka-red);

    color:white;

    border:1px solid var(--halka-red);

}

.btn-gold:hover{

    background:var(--halka-green);

    border-color:var(--halka-green);

}

.btn-ghost{

    border:1px solid rgba(255,255,255,.2);

}

.btn-ghost:hover{

    border-color:var(--halka-red);

    color:var(--gold-bright);

}


/* ===================================
   PARTICLE CANVAS
=================================== */

#particles-canvas{

    position:fixed;

    inset:0;

    width:100%;
    height:100%;

    z-index:0;

    pointer-events:none;

    opacity:.18;

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

.site-header{

    position:fixed;

    top:0;
    left:0;
    right:0;

    z-index:999;

    background:linear-gradient(
        180deg,
        rgba(11,10,9,.95),
        rgba(11,10,9,.75)
    );

    backdrop-filter:blur(6px);

    border-bottom:1px solid rgba(179,27,27,.25);

    transition:.3s;

}

/* Header after scroll */

.site-header.scrolled{

    background:rgba(11,10,9,.97);

    border-color:rgba(31,139,76,.5);

    box-shadow:0 12px 30px rgba(0,0,0,.4);

}

/*====================*/

.header-inner{

    max-width:1180px;

    margin:auto;

    padding:14px 24px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

}

/*====================*/

.brand{

    display:flex;

    align-items:center;

    gap:12px;

    flex-shrink:0;

}

.brand-crest{

    width:42px;

    height:42px;

    border-radius:50%;

    object-fit:cover;

}

.brand-word{

    font-family:var(--font-display);

    color:var(--gold-bright);

    font-size:1rem;

    letter-spacing:.12em;

    font-weight:600;

}

/*====================*/

.site-nav{

    display:flex;

    align-items:center;

    gap:28px;

}

/*====================*/

.site-nav a{

    position:relative;

    font-size:.85rem;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:var(--dust);

    transition:.25s;

}

/* underline */

.site-nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-5px;

    width:0;

    height:2px;

    background:var(--halka-green);

    transition:.3s;

}

.site-nav a:hover{

    color:var(--gold-bright);

}

.site-nav a:hover::after{

    width:100%;

}

.site-nav a.active{

    color:var(--gold-bright);

}

.site-nav a.active::after{

    width:100%;

}

/*====================*/

.header-right{

    display:flex;

    align-items:center;

    gap:15px;

}

/*====================*/

.lang-select{

    display:flex;

    align-items:center;

    gap:8px;

}

.lang-btn{

    background:transparent;

    border:none;

    font-size:20px;

    cursor:pointer;

    transition:.25s;

    opacity:.6;

}

.lang-btn:hover{

    transform:scale(1.15);

    opacity:1;

}

.lang-btn[aria-pressed="true"]{

    opacity:1;

}

/*====================*/

.header-cta{

    padding:10px 18px;

    border-radius:6px;

    border:1px solid var(--halka-red);

    color:var(--gold-bright);

    font-size:.82rem;

    transition:.3s;

}

.header-cta:hover{

    background:var(--halka-red);

    color:white;

}

/*====================*/

.nav-toggle{

    display:none;

    width:42px;

    height:42px;

    border:none;

    background:transparent;

    color:white;

    font-size:24px;

    cursor:pointer;

}

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

@media(max-width:768px){

.site-nav{

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    background:var(--void-soft);

    display:none;

    flex-direction:column;

    align-items:flex-start;

    padding:25px;

    gap:20px;

    border-top:1px solid rgba(255,255,255,.05);

}

.site-nav.active{

    display:flex;

}

.nav-toggle{

    display:block;

}

.header-right{

    gap:8px;

}

.header-cta{

    display:none;

}

.brand-word{

    font-size:.85rem;

}

}/*===================================
            HERO SECTION
===================================*/

.hero{

    position:relative;

    min-height:100vh;
    min-height:100svh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:
        radial-gradient(
            ellipse 70% 55% at 80% 15%,
            rgba(179,27,27,.35),
            transparent 60%
        ),

        radial-gradient(
            ellipse 60% 50% at 15% 85%,
            rgba(31,139,76,.30),
            transparent 60%
        ),

        var(--void);

}

.hero .wrap{

    position:relative;

    width:100%;

    z-index:2;

    padding-top:140px;

    padding-bottom:90px;

}

/*============================*/

.hero-content{

    max-width:640px;

}

/*============================*/

.eyebrow{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:24px;

    font-family:var(--font-mono);

    font-size:.78rem;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:var(--dust);

}

.eyebrow::before{

    content:"";

    width:28px;

    height:1px;

    background:var(--halka-red);

}

/*============================*/

.hero-title{

    font-family:var(--font-display);

    font-size:clamp(2.7rem,5vw,4.8rem);

    line-height:1.05;

    font-weight:700;

    margin-bottom:25px;

    background:linear-gradient(

        180deg,

        var(--gold-bright) 0%,

        var(--halka-red) 55%,

        var(--halka-green) 100%

    );

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

}

/*============================*/

.hero-sub{

    max-width:520px;

    margin-bottom:35px;

    font-size:1rem;

    color:var(--bone);

    opacity:.85;

    line-height:1.7;

}

/*============================*/

.hero-actions{

    display:flex;

    align-items:center;

    gap:16px;

    flex-wrap:wrap;

}

/*  
/* ================================
   ORBIT ANIMATION
================================ */

@keyframes orbit {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes orbit-reverse {
    0% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* Outer ring */

.orbit-container {
    animation: orbit 12s linear infinite;
}

/* Outer icons straight রাখবে */

.orbit-icon {
    animation: orbit-reverse 12s linear infinite;
}

/* Inner ring উল্টো দিকে ঘুরবে */

.orbit-container-inner {
    animation: orbit-reverse 8s linear infinite;
}

/* Inner icons straight রাখবে */

.orbit-icon-inner {
    animation: orbit 8s linear infinite;
}

.orbit-container {
    animation: orbit 6s linear infinite;
}

.orbit-icon {
    animation: orbit-reverse 6s linear infinite;
}

.orbit-container-inner {
    animation: orbit-reverse 4s linear infinite;
}

.orbit-icon-inner {
    animation: orbit 4s linear infinite;
}

*/
/* ================================
   ORBIT LAYOUT
================================ */

.orbit-area {
    position: relative;

    width: 480px;
    height: 480px;

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


/* Center logo */

.orbit-center {
    position: absolute;
    z-index: 10;

    width: 130px;
    height: 130px;

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

    background: #15110f;

    border: 1px solid rgba(232, 213, 163, 0.35);
    border-radius: 28px;

    box-shadow:
        0 0 35px rgba(179, 27, 27, 0.28),
        0 0 50px rgba(31, 139, 76, 0.16);
}

.orbit-center img {
    width: 105px;
    height: 105px;

    object-fit: contain;
    border-radius: 50%;
}


/* Outer circle */

.orbit-ring {
    position: absolute;

    width: 440px;
    height: 440px;

    border: 1px solid rgba(232, 213, 163, 0.16);
    border-radius: 50%;
}


/* Outer items */

.orbit-item {
    position: absolute;

    width: 54px;
    height: 54px;

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

    background: #15110f;

    border: 1px solid rgba(232, 213, 163, 0.2);
    border-radius: 14px;

    font-size: 25px;

    box-shadow: 0 0 18px rgba(0, 0, 0, 0.5);
}

.orbit-item-1 {
    top: -27px;
    left: calc(50% - 27px);
}

.orbit-item-2 {
    top: 15%;
    right: 2%;
}

.orbit-item-3 {
    top: 65%;
    right: -2%;
}

.orbit-item-4 {
    bottom: -27px;
    left: calc(50% - 27px);
}

.orbit-item-5 {
    top: 65%;
    left: -2%;
}

.orbit-item-6 {
    top: 15%;
    left: 2%;
}

.orbit-item-7 {
    top: calc(50% - 27px);
    left: -27px;
}


/* Inner circle */

.orbit-inner-ring {
    position: absolute;

    width: 280px;
    height: 280px;

    border: 1px dashed rgba(31, 139, 76, 0.35);
    border-radius: 50%;
}


/* Inner items */

.inner-orbit-item {
    position: absolute;

    width: 38px;
    height: 38px;

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

    background: #1b1b1b;

    border: 1px solid rgba(236, 230, 214, 0.2);
    border-radius: 10px;

    font-size: 17px;
}

.inner-item-1 {
    top: 8%;
    right: 8%;
}

.inner-item-2 {
    right: 8%;
    bottom: 8%;
}

.inner-item-3 {
    left: 8%;
    bottom: 8%;
}

.inner-item-4 {
    top: 8%;
    left: 8%;
}


/* Responsive */

@media (max-width: 900px) {
    .orbit-area {
        width: 400px;
        height: 400px;
    }

    .orbit-ring {
        width: 370px;
        height: 370px;
    }

    .orbit-inner-ring {
        width: 240px;
        height: 240px;
    }
}

@media (max-width: 560px) {
    .orbit-area {
        width: 320px;
        height: 320px;
    }

    .orbit-ring {
        width: 290px;
        height: 290px;
    }

    .orbit-inner-ring {
        width: 190px;
        height: 190px;
    }

    .orbit-center {
        width: 100px;
        height: 100px;
    }

    .orbit-center img {
        width: 82px;
        height: 82px;
    }

    .orbit-item {
        width: 44px;
        height: 44px;

        font-size: 20px;
    }
}

/* oo */

/* =================================
   FIX ORBIT POSITION IN HERO
================================= */

.hero {
    position: relative;
}

.hero .wrap {
    position: relative;
}

/* Orbit stays on the right side of hero */

.orbit-area {
    position: absolute;

    top: 50%;
    right: 2%;

    width: 480px;
    height: 480px;

    transform: translateY(-50%);

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

    z-index: 3;

    margin: 0;
    pointer-events: none;
}

/* Keep text above background but below orbit if needed */

.hero-content {
    position: relative;
    z-index: 4;
    max-width: 640px;
}

/* Tablet */

@media (max-width: 1100px) {
    .orbit-area {
        width: 400px;
        height: 400px;
        right: 0;
    }

    .orbit-ring {
        width: 370px;
        height: 370px;
    }

    .orbit-inner-ring {
        width: 235px;
        height: 235px;
    }
}

/* Mobile */

@media (max-width: 760px) {
    .hero .wrap {
        display: flex;
        flex-direction: column;
    }

    .orbit-area {
        position: relative;

        top: auto;
        right: auto;

        width: 330px;
        height: 330px;

        margin: 45px auto 0;

        transform: none;
    }

    .orbit-ring {
        width: 300px;
        height: 300px;
    }

    .orbit-inner-ring {
        width: 195px;
        height: 195px;
    }
}




/* oo */


/*===================================
        FILTER BUTTONS
===================================*/

.filter-bar{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:40px;

}

.filter-btn{

    padding:10px 18px;

    border-radius:999px;

    border:1px solid rgba(156,132,85,.4);

    background:transparent;

    color:var(--dust);

    transition:.3s;

}

.filter-btn:hover{

    border-color:var(--halka-red);

    color:var(--gold-bright);

}

.filter-btn.active{

    background:var(--halka-red);

    border-color:var(--halka-red);

    color:#fff;

}

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

.card-grid{

    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(280px,1fr));

    gap:22px;

}

/*===================================
        PRODUCT CARD
===================================*/

.card{

    position:relative;

    display:flex;

    flex-direction:column;

    background:linear-gradient(

        160deg,

        var(--oxblood-soft),

        var(--void-soft)

    );

    border:1px solid rgba(31,139,76,.25);

    border-radius:var(--radius);

    padding:24px;

    transition:.35s;

}

.card:hover{

    transform:translateY(-6px);

    border-color:var(--halka-red);

    box-shadow:

        0 15px 35px

        rgba(179,27,27,.35);

}

/*===================================
        RIBBON
===================================*/

.ribbon{

    position:absolute;

    top:14px;

    right:-1px;

    background:var(--halka-green);

    color:white;

    font-size:.68rem;

    font-weight:700;

    padding:5px 14px;

    border-radius:4px 0 0 4px;

}

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

.card-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.card-icon{

    width:28px;

    height:28px;

    color:var(--halka-red);

}

.card-id{

    font-family:var(--font-mono);

    font-size:.72rem;

    color:var(--dust);

}

/*===================================
        TITLE
===================================*/

.card-title{

    font-size:1.1rem;

    font-weight:600;

    margin-bottom:10px;

    color:var(--bone);

}

/*===================================
        TAG
===================================*/

.card-tag{

    font-family:var(--font-mono);

    color:var(--gold-bright);

    text-transform:uppercase;

    font-size:.72rem;

    letter-spacing:.06em;

    margin-bottom:14px;

}

/*===================================
        DESCRIPTION
===================================*/

.card-blurb{

    flex:1;

    color:var(--dust);

    line-height:1.7;

    font-size:.9rem;

    margin-bottom:25px;

}

/*===================================
        CARD BUTTON
===================================*/

.card-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    align-self:flex-start;

    color:var(--gold-bright);

    font-weight:600;

    border-bottom:1px solid transparent;

    transition:.3s;

}

.card-link:hover{

    color:white;

    border-color:var(--halka-green);

}

/*===================================
        RESPONSIVE
===================================*/

@media(max-width:768px){

.catalog{

    padding:80px 0 60px;

}

.card-grid{

    grid-template-columns:1fr;

}

.catalog-head{

    align-items:flex-start;

}

.filter-bar{

    justify-content:flex-start;

}

}

@media(max-width:480px){

.card{

    padding:20px;

}

.card-title{

    font-size:1rem;

}

.card-blurb{

    font-size:.85rem;

}

.filter-btn{

    font-size:.78rem;

    padding:8px 14px;

}

}/*===================================
        REVIEWS SECTION
===================================*/

.reviews{

    padding:80px 0 50px;

}

.reviews-head{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    flex-wrap:wrap;

    gap:24px;

    margin-bottom:35px;

    padding-bottom:25px;

    border-bottom:1px solid rgba(179,27,27,.25);

}

.reviews-head h2{

    font-family:var(--font-display);

    font-size:clamp(1.8rem,2vw,2.4rem);

    color:var(--gold-bright);

    margin-bottom:8px;

}

.reviews-head p{

    font-family:var(--font-mono);

    color:var(--dust);

    font-size:.82rem;

}

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

.review-grid{

    display:flex;

    gap:20px;

    overflow-x:auto;

    overflow-y:hidden;

    scroll-snap-type:x mandatory;

    padding-bottom:12px;

    -webkit-overflow-scrolling:touch;

}

.review-grid::-webkit-scrollbar{

    height:10px;

}

.review-grid::-webkit-scrollbar-thumb{

    background:rgba(31,139,76,.35);

    border-radius:999px;

}

/*===================================
        REVIEW CARD
===================================*/

.review-card{

    position:relative;

    min-width:320px;

    flex:0 0 320px;

    scroll-snap-align:start;

    display:flex;

    flex-direction:column;

    gap:18px;

    padding:30px 24px;

    border-radius:var(--radius);

    border:1px solid rgba(179,27,27,.25);

    background:linear-gradient(

        160deg,

        rgba(61,15,22,.95),

        rgba(11,10,9,.98)

    );

    transition:.35s;

}

.review-card:hover{

    transform:translateY(-6px);

    border-color:var(--halka-red);

    box-shadow:

        0 15px 35px

        rgba(179,27,27,.35);

}

/*===================================
        PURCHASE BADGE
===================================*/

.review-badge{

    position:absolute;

    top:12px;

    right:12px;

    padding:5px 10px;

    border-radius:8px;

    background:rgba(255,255,255,.08);

    color:var(--gold-bright);

    font-family:var(--font-mono);

    font-size:.72rem;

    border:1px solid rgba(255,255,255,.12);

}

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

.review-top{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.review-item-link{

    color:var(--gold-bright);

    font-weight:700;

    line-height:1.4;

    transition:.3s;

}

.review-item-link:hover{

    color:#fff;

}

.review-metrics{

    font-family:var(--font-mono);

    color:var(--dust);

    font-size:.72rem;

    line-height:1.5;

}

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

.review-text{

    color:var(--bone);

    line-height:1.7;

    flex:1;

}

/*===================================
        USER INFO
===================================*/

.review-user{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:auto;

}

.review-avatar-img{

    width:42px;

    height:42px;

    border-radius:50%;

    object-fit:cover;

}

.review-user-info{

    display:flex;

    flex-direction:column;

    gap:3px;

}

.review-name{

    font-weight:700;

    color:var(--bone);

}

.review-date{

    font-family:var(--font-mono);

    color:var(--dust);

    font-size:.75rem;

}

/*===================================
        RESPONSIVE
===================================*/

@media(max-width:768px){

.review-card{

    min-width:280px;

    flex:0 0 280px;

    padding:24px 18px;

}

}

@media(max-width:480px){

.review-card{

    min-width:240px;

    flex:0 0 240px;

    padding:20px 15px;

}

.review-item-link{

    font-size:.9rem;

}

.review-metrics{

    display:none;

}

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

.site-footer{

    margin-top:100px;

    background:linear-gradient(
        180deg,
        rgba(11,10,9,.95),
        rgba(6,6,6,1)
    );

    border-top:1px solid rgba(179,27,27,.25);

}

.site-footer .wrap{

    padding:50px 24px 25px;

}

/*===============================*/

.footer-inner{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    flex-wrap:wrap;

}

/*===============================*/

.footer-brand{

    display:flex;

    align-items:center;

    gap:18px;

}

/*===============================*/

.footer-crest{

    width:60px;

    height:60px;

    border-radius:50%;

    object-fit:cover;

}

/*===============================*/

.footer-word{

    font-family:var(--font-display);

    font-size:1.25rem;

    color:var(--gold-bright);

    letter-spacing:.12em;

    margin-bottom:6px;

}

.footer-note{

    color:var(--dust);

    max-width:460px;

    font-size:.9rem;

    line-height:1.7;

}

/*===============================*/

.footer-link{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 22px;

    border:1px solid var(--halka-red);

    border-radius:var(--radius);

    color:var(--gold-bright);

    transition:.3s;

}

.footer-link:hover{

    background:var(--halka-red);

    color:#fff;

}

/*===============================*/

.footer-copy{

    margin-top:35px;

    padding-top:20px;

    text-align:center;

    color:var(--dust);

    font-size:.85rem;

    border-top:1px solid rgba(255,255,255,.08);

}

/*==============================
AUTH BUTTONS
==============================*/

.auth-buttons{
    display:flex;
    align-items:center;
    gap:10px;
    margin-right:15px;
}

.login-btn,
.register-btn{
    text-decoration:none;
    padding:10px 18px;
    border-radius:8px;
    font-weight:600;
    transition:.3s;
}

.login-btn{
    border:1px solid #e8d5a3;
    color:#e8d5a3;
}

.login-btn:hover{
    background:#e8d5a3;
    color:#111;
}

.register-btn{
    background:#b31b1b;
    color:white;
}

.register-btn:hover{
    background:#8f1414;
}

.user-menu{
    display:flex;
    align-items:center;
    gap:12px;
    margin-right:15px;
}

#userName{
    color:#e8d5a3;
    font-weight:700;
}

#logoutBtn{
    background:#b31b1b;
    color:#fff;
    border:none;
    padding:8px 15px;
    border-radius:6px;
    cursor:pointer;
}

#logoutBtn:hover{
    background:#8f1414;
}
/* ==============================
   LANGUAGE SELECTOR
============================== */

.lang-select {
    display: flex;
    align-items: center;
    gap: 7px;
}

.lang-btn {
    width: 38px;
    height: 34px;

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

    padding: 0;

    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(236, 230, 214, 0.15);
    border-radius: 7px;

    font-size: 19px;
    line-height: 1;

    cursor: pointer;

    opacity: 0.65;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.lang-btn:hover {
    opacity: 1;
    transform: translateY(-2px);
    border-color: var(--halka-red);
}

.lang-btn.active,
.lang-btn[aria-pressed="true"] {
    opacity: 1;
    background: rgba(31, 139, 76, 0.16);
    border-color: var(--halka-green);
    box-shadow: 0 0 0 2px rgba(31, 139, 76, 0.1);
}

@media (max-width: 480px) {
    .lang-select {
        gap: 4px;
    }

    .lang-btn {
        width: 33px;
        height: 31px;
        font-size: 17px;
    }
}.lang-select {
    display: flex;
    align-items: center;
    gap: 7px;
}

.lang-btn {
    width: 38px;
    height: 34px;

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

    padding: 0;

    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(236, 230, 214, 0.16);
    border-radius: 7px;

    font-size: 19px;
    line-height: 1;

    opacity: 0.65;
    cursor: pointer;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.lang-btn:hover {
    opacity: 1;
    transform: translateY(-2px);
    border-color: var(--halka-red);
}

.lang-btn.active,
.lang-btn[aria-pressed="true"] {
    opacity: 1;
    background: rgba(31, 139, 76, 0.18);
    border-color: var(--halka-green);
}
.review-card{

    background:#171717;

    border:1px solid rgba(255,255,255,.08);

    border-radius:16px;

    padding:20px;

    transition:.3s;

}

.review-card:hover{

    transform:translateY(-5px);

    border-color:#b31b1b;

}

.review-top{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:15px;

}

.review-avatar{

    width:55px;

    height:55px;

    border-radius:50%;

    background:#b31b1b;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:22px;

    font-weight:bold;

}

.review-stars{

    color:#FFD700;

    margin-bottom:12px;

    font-size:20px;

}

.review-card p{

    color:#ddd;

    line-height:1.7;

}

.empty-review{

    text-align:center;

    color:#888;

    padding:40px;

}

/* =================================
   PRODUCT WISHLIST BUTTON
================================= */

.card {
    position: relative;
}

.wishlist-btn {
    position: absolute;
    top: 16px;
    right: 16px;

    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    padding: 0;

    color: #e8d5a3;
    background: rgba(11, 10, 9, 0.82);

    border: 1px solid rgba(232, 213, 163, 0.22);
    border-radius: 50%;

    font-size: 1.45rem;
    line-height: 1;

    cursor: pointer;
    z-index: 5;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.wishlist-btn:hover {
    color: #ff416c;
    background: rgba(255, 65, 108, 0.12);
    border-color: rgba(255, 65, 108, 0.55);
    transform: scale(1.08);
}

.wishlist-btn.active {
    color: #ff416c;
    background: rgba(255, 65, 108, 0.16);
    border-color: rgba(255, 65, 108, 0.6);
}

.wishlist-btn:disabled {
    opacity: 0.55;
    cursor: wait;
    transform: none;
}

/* Bestseller ribbon থাকলে overlap আটকাবে */

.card:has(.ribbon) .wishlist-btn {
    top: 50px;
}

@media (max-width: 480px) {
    .wishlist-btn {
        width: 36px;
        height: 36px;
        font-size: 1.25rem;
    }
}

.card-price {
    margin: 18px 0 14px;

    color: #e8d5a3;

    font-size: 1.35rem;
    font-weight: 700;
}

.card-actions {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 15px;
}

.order-now-btn {
    padding: 11px 16px;

    color: #ffffff;
    background: #b31b1b;

    border: 0;
    border-radius: 8px;

    font-weight: 700;
    cursor: pointer;
}

.order-now-btn:hover {
    background: #1f8b4c;
}


/* Order modal */

.order-modal {
    position: fixed;
    inset: 0;

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

    padding: 20px;

    z-index: 2000;
}

.order-modal.open {
    display: flex;
}

.order-modal-overlay {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(7px);
}

.order-modal-card {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 530px;
    max-height: 90vh;

    overflow-y: auto;

    padding: 32px;

    background: #171310;
    color: #ece6d6;

    border: 1px solid rgba(179, 27, 27, 0.7);
    border-radius: 17px;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.7);
}

.order-modal-card h2 {
    margin-bottom: 22px;

    color: #e8d5a3;
    font-family: "Cinzel", serif;
}

.order-label {
    margin-bottom: 7px;

    color: #9c8455;

    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.15em;
}

.order-modal-close {
    position: absolute;
    top: 15px;
    right: 16px;

    width: 38px;
    height: 38px;

    color: #ffffff;
    background: transparent;

    border: 1px solid #444;
    border-radius: 50%;

    font-size: 1.4rem;
}

#orderForm {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#orderForm label {
    margin-top: 5px;

    color: #e8d5a3;
    font-size: 0.85rem;
    font-weight: 700;
}

#orderForm input,
#orderForm select,
#orderForm textarea {
    width: 100%;

    padding: 13px 14px;

    color: #ece6d6;
    background: #0f0e0d;

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

    font: inherit;
    outline: none;
}

#orderForm input:focus,
#orderForm select:focus,
#orderForm textarea:focus {
    border-color: #b31b1b;

    box-shadow:
        0 0 0 3px rgba(179, 27, 27, 0.13);
}

#orderForm select option {
    color: #ffffff;
    background: #171310;
}

.order-summary {
    display: flex;
    justify-content: space-between;

    margin-top: 12px;
    padding: 16px;

    color: #e8d5a3;
    background: rgba(232, 213, 163, 0.06);

    border: 1px solid rgba(232, 213, 163, 0.15);
    border-radius: 9px;
}

.place-order-btn {
    margin-top: 10px;
    padding: 14px;

    color: #ffffff;
    background: #b31b1b;

    border: 0;
    border-radius: 8px;

    font-weight: 700;
}

.place-order-btn:hover {
    background: #1f8b4c;
}

.order-message {
    display: none;

    margin-bottom: 15px;
    padding: 11px 13px;

    border-radius: 8px;
}

.order-message:not(:empty) {
    display: block;
}

.order-message.success {
    color: #d8ffe7;
    background: rgba(31, 139, 76, 0.17);
    border: 1px solid rgba(31, 139, 76, 0.5);
}

.order-message.error {
    color: #ffd6d6;
    background: rgba(179, 27, 27, 0.17);
    border: 1px solid rgba(179, 27, 27, 0.5);
}

.order-message.info {
    color: #e8d5a3;
    background: rgba(232, 213, 163, 0.08);
    border: 1px solid rgba(232, 213, 163, 0.22);
}


.order-card{

background:#161616;

border:1px solid #333;

padding:20px;

margin-bottom:15px;

border-radius:12px;

}

.order-card button{

padding:10px 20px;

margin-right:10px;

border:none;

cursor:pointer;

border-radius:8px;

}

.order-card button:first-child{

background:#22c55e;

color:white;

}

.order-card button:last-child{

background:#ef4444;

color:white;

}

/* ==================================================
   FINAL FIREBASE PRODUCT CARD DESIGN
   Put this at the END of css/style.css
================================================== */

/* Product grid */

#card-grid.card-grid {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: repeat(
        3,
        minmax(0, 1fr)
    ) !important;

    gap: 22px !important;

    align-items: stretch !important;

    margin-top: 32px !important;
}


/* Main product card */

#card-grid .firebase-product-card {
    position: relative !important;

    min-width: 0 !important;
    min-height: 430px !important;

    display: flex !important;
    flex-direction: column !important;

    padding: 24px 24px 22px !important;

    overflow: hidden !important;

    color: #f7f1e4 !important;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(201, 31, 37, 0.13),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #310b10 0%,
            #220d11 52%,
            #151012 100%
        ) !important;

    border: 1px solid
        rgba(72, 117, 65, 0.55) !important;

    border-radius: 6px !important;

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;

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


#card-grid .firebase-product-card:hover {
    transform: translateY(-6px) !important;

    border-color:
        rgba(217, 181, 102, 0.65) !important;

    box-shadow:
        0 25px 55px rgba(0, 0, 0, 0.42),
        0 0 24px rgba(201, 31, 37, 0.08) !important;
}


/* Decorative light */

#card-grid .firebase-product-card::before {
    content: "";

    position: absolute;
    top: -80px;
    left: -80px;

    width: 190px;
    height: 190px;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(201, 31, 37, 0.12),
            transparent 68%
        );
}


/* Bestseller badge */

#card-grid .firebase-best-badge {
    position: absolute !important;

    top: 14px !important;
    right: 14px !important;

    z-index: 10 !important;

    padding: 7px 14px !important;

    color: #ffffff !important;
    background:
        linear-gradient(
            135deg,
            #15964f,
            #0b7a3b
        ) !important;

    border: 1px solid
        rgba(95, 255, 156, 0.18) !important;

    border-radius: 4px !important;

    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;

    box-shadow:
        0 8px 20px rgba(21, 150, 79, 0.22) !important;
}


/* Product top */

#card-grid .firebase-product-top {
    position: relative !important;

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

    margin-bottom: 20px !important;
}


/* Icon / image wrapper */

#card-grid .firebase-product-media {
    width: 50px !important;
    height: 50px !important;

    display: grid !important;
    place-items: center !important;

    overflow: hidden !important;

    color: #d61f27 !important;
    background:
        rgba(0, 0, 0, 0.16) !important;

    border: 1px solid
        rgba(216, 38, 45, 0.18) !important;

    border-radius: 10px !important;
}


#card-grid .firebase-product-icon {
    display: block !important;

    font-size: 23px !important;
    line-height: 1 !important;
}


#card-grid .firebase-product-image {
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    object-fit: cover !important;
}


/* Product content */

#card-grid .firebase-product-content {
    flex: 1 !important;

    display: flex !important;
    flex-direction: column !important;
}


#card-grid .firebase-product-content h3 {
    margin: 0 0 12px !important;

    color: #f6f0e6 !important;

    font-family: "Inter", sans-serif !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}


#card-grid .firebase-product-category {
    margin: 0 0 18px !important;

    color: #d5b270 !important;

    font-family:
        "JetBrains Mono",
        monospace !important;

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

    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
}


#card-grid .firebase-product-description {
    margin: 0 !important;

    color: #b29465 !important;

    font-size: 15px !important;
    line-height: 1.65 !important;
}


/* Product bottom */

#card-grid .firebase-product-bottom {
    margin-top: auto !important;
    padding-top: 28px !important;
    padding-bottom: 57px !important;
}


/* Price */

#card-grid .firebase-product-price {
    display: block !important;

    margin-bottom: 24px !important;

    color: #f3dda6 !important;

    font-size: 23px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}


/* Buttons wrapper */

#card-grid .firebase-product-actions {
    width: 100% !important;

    display: grid !important;
    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 11px !important;

    margin: 0 !important;
}


/* Order Now + View Product same design */

#card-grid .firebase-order-btn,
#card-grid .firebase-view-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;

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

    padding: 10px 12px !important;

    color: #ffffff !important;
    background:
        linear-gradient(
            135deg,
            #cf2027,
            #b8161d
        ) !important;

    border: 1px solid #d42a31 !important;
    border-radius: 8px !important;

    font-family: "Inter", sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;

    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    cursor: pointer !important;

    box-shadow:
        0 9px 20px rgba(207, 32, 39, 0.16) !important;

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


#card-grid .firebase-order-btn:hover,
#card-grid .firebase-view-btn:hover {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #ee343b,
            #ca1e25
        ) !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 13px 27px rgba(207, 32, 39, 0.28) !important;
}


/* Wishlist bottom-right */

#card-grid .firebase-product-card
.firebase-wishlist-btn,

#card-grid .firebase-product-card
.wishlist-btn {
    position: absolute !important;

    top: auto !important;
    left: auto !important;
    right: 20px !important;
    bottom: 18px !important;

    width: 44px !important;
    height: 44px !important;

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

    margin: 0 !important;
    padding: 0 !important;

    color: #f2d995 !important;
    background:
        linear-gradient(
            145deg,
            #191512,
            #0e0d0d
        ) !important;

    border: 1px solid
        rgba(242, 217, 149, 0.38) !important;

    border-radius: 50% !important;

    font-size: 23px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    cursor: pointer !important;

    z-index: 20 !important;

    box-shadow:
        0 9px 22px rgba(0, 0, 0, 0.33) !important;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease !important;
}


#card-grid .firebase-product-card
.firebase-wishlist-btn:hover,

#card-grid .firebase-product-card
.wishlist-btn:hover {
    color: #ffffff !important;
    background: #cf2027 !important;
    border-color: #ef3b42 !important;

    transform: scale(1.08) !important;
}


#card-grid .firebase-product-card
.firebase-wishlist-btn.active,

#card-grid .firebase-product-card
.wishlist-btn.active {
    color: #ffffff !important;
    background: #cf2027 !important;
    border-color: #ef3b42 !important;
}


#card-grid .firebase-wishlist-btn:disabled,
#card-grid .wishlist-btn:disabled {
    opacity: 0.5 !important;
    cursor: wait !important;
}


/* Loading and empty message */

#card-grid .products-loading-state,
#card-grid .products-empty-state {
    grid-column: 1 / -1 !important;

    min-height: 230px !important;

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

    gap: 10px !important;

    padding: 30px !important;

    color: #b79b6d !important;
    background:
        rgba(30, 14, 17, 0.88) !important;

    border: 1px dashed
        rgba(216, 179, 102, 0.28) !important;

    border-radius: 10px !important;

    text-align: center !important;
}


#card-grid .products-empty-state h3 {
    color: #f1dba6 !important;
}


/* Tablet */

@media (max-width: 1050px) {
    #card-grid.card-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr))
            !important;
    }
}


/* Mobile */

@media (max-width: 650px) {
    #card-grid.card-grid {
        grid-template-columns:
            1fr !important;

        gap: 17px !important;
    }

    #card-grid .firebase-product-card {
        min-height: 410px !important;
    }

    #card-grid .firebase-product-actions {
        grid-template-columns:
            1fr !important;
    }

    #card-grid .firebase-product-bottom {
        padding-bottom: 58px !important;
    }
}


/* =================================
   GTANEX CATEGORY PAGE
================================= */

.category-page-hero {
    position: relative;

    min-height: 460px;

    display: flex;
    align-items: center;

    padding: 145px 0 80px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(197, 25, 32, 0.15),
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(29, 111, 65, 0.12),
            transparent 34%
        );
}

.category-page-hero .wrap {
    width: 100%;

    display: grid;
    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(280px, 0.7fr);

    align-items: center;

    gap: 50px;
}

.category-hero-content h1 {
    max-width: 760px;

    margin: 13px 0 19px;

    color: #f5dfae;

    font-family: "Cinzel", serif;
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.02;
}

.category-hero-description {
    max-width: 620px;

    color: #b79b70;

    font-size: 17px;
    line-height: 1.75;
}

.category-hero-icon {
    position: relative;

    width: 280px;
    height: 280px;

    display: grid;
    place-items: center;

    justify-self: center;
}

.category-icon-glow {
    position: absolute;
    inset: 20px;

    background:
        radial-gradient(
            circle,
            rgba(205, 31, 39, 0.24),
            transparent 68%
        );

    border-radius: 50%;

    filter: blur(8px);
}

.category-main-icon {
    position: relative;
    z-index: 2;

    width: 155px;
    height: 155px;

    display: grid;
    place-items: center;

    color: #f5dfae;
    background:
        linear-gradient(
            145deg,
            #301015,
            #130d0f
        );

    border: 1px solid
        rgba(232, 213, 163, 0.32);

    border-radius: 50%;

    font-size: 65px;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.42);
}

.category-floating-icon {
    position: absolute;
    z-index: 3;

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    background: #171113;

    border: 1px solid
        rgba(232, 213, 163, 0.25);

    border-radius: 50%;

    font-size: 21px;

    animation:
        categoryFloat 3s ease-in-out infinite;
}

.category-floating-1 {
    top: 12px;
    left: 45px;
}

.category-floating-2 {
    top: 70px;
    right: 4px;

    animation-delay: -1s;
}

.category-floating-3 {
    bottom: 16px;
    left: 50px;

    animation-delay: -2s;
}

@keyframes categoryFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.category-products-section {
    min-height: 600px;

    padding-top: 75px;
    padding-bottom: 100px;
}

.catalog-eyebrow {
    margin-bottom: 7px;

    color: #bd2027 !important;

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 11px !important;
    font-weight: 800;

    letter-spacing: 0.15em;
}

.category-switcher {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;
}

.category-switch-link {
    min-height: 41px;

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

    padding: 9px 14px;

    color: #c6ad80;
    background: rgba(255, 255, 255, 0.025);

    border: 1px solid
        rgba(232, 213, 163, 0.18);

    border-radius: 8px;

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

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}

.category-switch-link:hover,
.category-switch-link.active {
    color: #ffffff;
    background: #c91f25;
    border-color: #e33138;
}

.site-nav a.active {
    color: #ffffff;
}

.product-loading-spinner {
    width: 30px;
    height: 30px;

    display: block;

    margin-bottom: 12px;

    border: 3px solid
        rgba(232, 213, 163, 0.18);

    border-top-color: #d1b271;

    border-radius: 50%;

    animation:
        productLoadingSpin 0.8s linear infinite;
}

@keyframes productLoadingSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 850px) {
    .category-page-hero .wrap {
        grid-template-columns: 1fr;
    }

    .category-hero-icon {
        display: none;
    }

    .category-page-hero {
        min-height: 390px;
        padding-top: 125px;
    }

    .catalog-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .category-hero-content h1 {
        font-size: 41px;
    }

    .category-page-hero {
        min-height: 350px;
        padding-top: 110px;
        padding-bottom: 60px;
    }

    .category-switcher {
        width: 100%;
    }

    .category-switch-link {
        flex: 1;
    }
}

/* =================================
   WISHLIST ICON BOTTOM-RIGHT FIX
================================= */

#card-grid .firebase-product-card {
    position: relative !important;
    padding-bottom: 82px !important;
}


/* Wishlist icon */

#card-grid .firebase-product-card .firebase-wishlist-btn,
#card-grid .firebase-product-card .wishlist-btn {
    position: absolute !important;

    top: auto !important;
    left: auto !important;

    right: 20px !important;
    bottom: 18px !important;

    width: 44px !important;
    height: 44px !important;

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

    margin: 0 !important;
    padding: 0 !important;

    color: #f2d99b !important;
    background: #121011 !important;

    border: 1px solid rgba(242, 217, 155, 0.4) !important;
    border-radius: 50% !important;

    font-size: 23px !important;
    line-height: 1 !important;

    cursor: pointer !important;
    z-index: 30 !important;

    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35) !important;

    transition:
        transform 0.2s ease,
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease !important;
}


/* Hover */

#card-grid .firebase-product-card .firebase-wishlist-btn:hover,
#card-grid .firebase-product-card .wishlist-btn:hover {
    color: #ffffff !important;
    background: #c91f25 !important;
    border-color: #ed3037 !important;

    transform: scale(1.08) !important;
}


/* Saved state */

#card-grid .firebase-product-card .firebase-wishlist-btn.active,
#card-grid .firebase-product-card .wishlist-btn.active {
    color: #ffffff !important;
    background: #c91f25 !important;
    border-color: #ed3037 !important;
}


/* Button area-এর নিচে জায়গা রাখবে */

#card-grid .firebase-product-bottom {
    padding-bottom: 0 !important;
}

#card-grid .firebase-product-actions {
    margin-bottom: 0 !important;
}


/* Mobile */

@media (max-width: 600px) {
    #card-grid .firebase-product-card {
        padding-bottom: 80px !important;
    }

    #card-grid .firebase-product-card .firebase-wishlist-btn,
    #card-grid .firebase-product-card .wishlist-btn {
        right: 16px !important;
        bottom: 16px !important;
    }
}

/* =================================
   WISHLIST BOTTOM-RIGHT
================================= */

#card-grid .firebase-product-card {
    position: relative !important;
    padding-bottom: 82px !important;
}

#card-grid .firebase-wishlist-btn {
    position: absolute !important;

    top: auto !important;
    left: auto !important;
    right: 20px !important;
    bottom: 18px !important;

    width: 44px !important;
    height: 44px !important;

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

    margin: 0 !important;
    padding: 0 !important;

    color: #f2d99b !important;
    background: #121011 !important;

    border: 1px solid rgba(242, 217, 155, 0.4) !important;
    border-radius: 50% !important;

    font-size: 23px !important;
    line-height: 1 !important;

    cursor: pointer !important;
    z-index: 30 !important;

    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35) !important;
}

#card-grid .firebase-wishlist-btn:hover,
#card-grid .firebase-wishlist-btn.active {
    color: #ffffff !important;
    background: #c91f25 !important;
    border-color: #ed3037 !important;
    transform: scale(1.08) !important;
}

#card-grid .firebase-wishlist-btn:disabled {
    opacity: 0.55 !important;
    cursor: wait !important;
}

@media (max-width: 600px) {
    #card-grid .firebase-product-card {
        padding-bottom: 78px !important;
    }

    #card-grid .firebase-wishlist-btn {
        right: 16px !important;
        bottom: 16px !important;
    }
}



 
        :root {
            --sx-bg: #08090d;
            --sx-panel: rgba(19, 20, 27, 0.92);
            --sx-panel-soft: rgba(24, 25, 34, 0.78);
            --sx-line: rgba(207, 174, 114, 0.22);
            --sx-line-strong: rgba(207, 174, 114, 0.5);
            --sx-gold: #cfae72;
            --sx-gold-light: #f2d59e;
            --sx-text: #f6f1e7;
            --sx-muted: #a6a4a0;
            --sx-green: #47d18c;
            --sx-yellow: #f4bf4f;
            --sx-red: #ef6a6a;
        }

        html { scroll-behavior: smooth; }

        .sx-hidden { display: none !important; }

        .sx-offer-banner {
            position: relative;
            z-index: 1001;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-height: 38px;
            padding: 8px 52px 8px 18px;
            color: #12100c;
            background: linear-gradient(90deg, #ac8448, #f0d394, #b98e4c);
            font: 700 12px/1.4 Inter, sans-serif;
            letter-spacing: .04em;
            text-align: center;
        }

        .sx-offer-banner strong { font-weight: 800; }
        .sx-offer-banner a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

        .sx-offer-close {
            position: absolute;
            right: 18px;
            top: 50%;
            transform: translateY(-50%);
            width: 28px;
            height: 28px;
            border: 0;
            border-radius: 50%;
            color: #1b160e;
            background: rgba(255, 255, 255, .28);
            cursor: pointer;
        }

        .sx-inline-tools {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .sx-currency {
            min-width: 76px;
            padding: 9px 10px;
            border: 1px solid var(--sx-line);
            border-radius: 10px;
            color: var(--sx-text);
            background: rgba(255, 255, 255, .04);
            font: 600 12px Inter, sans-serif;
            outline: none;
        }

        .sx-currency option { color: #111; }

        .sx-section {
            position: relative;
            z-index: 2;
            padding: 78px 0;
        }

        .sx-section.sx-compact { padding: 42px 0; }

        .sx-section-head {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 24px;
            margin-bottom: 30px;
        }

        .sx-kicker {
            margin: 0 0 9px;
            color: var(--sx-gold);
            font: 700 11px/1.3 "JetBrains Mono", monospace;
            letter-spacing: .14em;
            text-transform: uppercase;
        }

        .sx-title {
            margin: 0;
            color: var(--sx-text);
            font: 700 clamp(27px, 4vw, 42px)/1.08 Cinzel, serif;
            letter-spacing: .01em;
        }

        .sx-description {
            max-width: 650px;
            margin: 11px 0 0;
            color: var(--sx-muted);
            font: 400 15px/1.75 Inter, sans-serif;
        }

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

        .sx-category-card,
        .sx-feature-card,
        .sx-payment-card,
        .sx-community-card,
        .sx-stat-card {
            position: relative;
            overflow: hidden;
            border: 1px solid var(--sx-line);
            border-radius: 18px;
            background: linear-gradient(145deg, rgba(26, 27, 35, .94), rgba(12, 13, 18, .92));
            box-shadow: 0 22px 60px rgba(0, 0, 0, .22);
        }

        .sx-category-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 166px;
            padding: 24px 18px;
            color: var(--sx-text);
            text-align: center;
            text-decoration: none;
            transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
        }

        .sx-category-card:hover {
            transform: translateY(-6px);
            border-color: var(--sx-line-strong);
            box-shadow: 0 25px 65px rgba(207, 174, 114, .10);
        }

        .sx-category-icon {
            display: grid;
            place-items: center;
            width: 58px;
            height: 58px;
            margin-bottom: 14px;
            border: 1px solid var(--sx-line);
            border-radius: 16px;
            color: var(--sx-gold-light);
            background: rgba(207, 174, 114, .08);
            font-size: 22px;
        }

        .sx-category-card strong { font: 700 15px/1.3 Inter, sans-serif; }
        .sx-category-card span { margin-top: 7px; color: var(--sx-muted); font: 400 12px/1.5 Inter, sans-serif; }

        .sx-order-status {
            border-top: 1px solid rgba(207, 174, 114, .12);
            border-bottom: 1px solid rgba(207, 174, 114, .12);
            background:
                radial-gradient(circle at 15% 30%, rgba(207, 174, 114, .10), transparent 32%),
                rgba(10, 11, 16, .72);
        }

        .sx-order-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.45fr) minmax(290px, .75fr);
            gap: 22px;
            align-items: stretch;
        }

        .sx-order-panel {
            padding: 28px;
            border: 1px solid var(--sx-line);
            border-radius: 22px;
            background: var(--sx-panel);
            box-shadow: 0 25px 70px rgba(0, 0, 0, .25);
        }

        .sx-order-panel-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            margin-bottom: 22px;
        }

        .sx-live-pill {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 7px 10px;
            border: 1px solid rgba(71, 209, 140, .25);
            border-radius: 999px;
            color: var(--sx-green);
            background: rgba(71, 209, 140, .07);
            font: 700 10px Inter, sans-serif;
            letter-spacing: .08em;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .sx-live-pill::before {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: currentColor;
            box-shadow: 0 0 0 5px rgba(71, 209, 140, .08);
            content: "";
        }

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

        .sx-stat-card { padding: 18px; }
        .sx-stat-card::after {
            position: absolute;
            right: -22px;
            bottom: -28px;
            width: 72px;
            height: 72px;
            border-radius: 50%;
            background: currentColor;
            opacity: .055;
            content: "";
        }

        .sx-stat-card i { margin-bottom: 16px; color: var(--sx-gold); font-size: 18px; }
        .sx-stat-card.sx-completed i { color: var(--sx-green); }
        .sx-stat-card.sx-pending i { color: var(--sx-yellow); }
        .sx-stat-card.sx-cancelled i { color: var(--sx-red); }

        .sx-stat-value {
            display: block;
            color: var(--sx-text);
            font: 700 29px/1 Cinzel, serif;
        }

        .sx-stat-label {
            display: block;
            margin-top: 8px;
            color: var(--sx-muted);
            font: 600 11px/1.3 Inter, sans-serif;
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .sx-order-note {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-top: 18px;
            padding: 14px 16px;
            border: 1px dashed var(--sx-line);
            border-radius: 14px;
            color: var(--sx-muted);
            background: rgba(207, 174, 114, .035);
            font: 400 12px/1.65 Inter, sans-serif;
        }

        .sx-order-note i { margin-top: 3px; color: var(--sx-gold); }
        .sx-order-note a { color: var(--sx-gold-light); }

        .sx-recent-orders {
            display: flex;
            flex-direction: column;
            min-height: 100%;
            padding: 28px;
            border: 1px solid var(--sx-line);
            border-radius: 22px;
            background: linear-gradient(145deg, rgba(27, 28, 37, .96), rgba(12, 13, 18, .94));
        }

        .sx-recent-orders h3 {
            margin: 0 0 16px;
            color: var(--sx-text);
            font: 700 18px/1.2 Cinzel, serif;
        }

        .sx-recent-list { display: grid; gap: 10px; }

        .sx-recent-item {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 10px;
            padding: 12px 13px;
            border: 1px solid rgba(207, 174, 114, .12);
            border-radius: 12px;
            background: rgba(255, 255, 255, .025);
        }

        .sx-recent-item strong {
            overflow: hidden;
            color: var(--sx-text);
            font: 600 12px Inter, sans-serif;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .sx-recent-item small { display: block; margin-top: 5px; color: var(--sx-muted); font: 400 10px Inter, sans-serif; }

        .sx-status-badge {
            align-self: start;
            padding: 5px 8px;
            border-radius: 999px;
            color: var(--sx-yellow);
            background: rgba(244, 191, 79, .09);
            font: 700 9px Inter, sans-serif;
            letter-spacing: .04em;
            text-transform: uppercase;
        }

        .sx-status-badge.completed { color: var(--sx-green); background: rgba(71, 209, 140, .09); }
        .sx-status-badge.cancelled { color: var(--sx-red); background: rgba(239, 106, 106, .09); }

        .sx-empty-state {
            display: grid;
            place-items: center;
            min-height: 170px;
            padding: 22px;
            border: 1px dashed var(--sx-line);
            border-radius: 14px;
            color: var(--sx-muted);
            font: 400 12px/1.6 Inter, sans-serif;
            text-align: center;
        }

        .sx-empty-state i { display: block; margin-bottom: 11px; color: var(--sx-gold); font-size: 24px; }

        .sx-product-shell {
            min-height: 250px;
            padding: 22px;
            border: 1px solid var(--sx-line);
            border-radius: 22px;
            background: rgba(15, 16, 22, .74);
        }

        #productGrid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 20px;
        }

        .sx-product-loading {
            grid-column: 1 / -1;
            display: grid;
            place-items: center;
            min-height: 190px;
            color: var(--sx-muted);
            font: 500 13px Inter, sans-serif;
        }

        .sx-features {
            border-top: 1px solid rgba(207, 174, 114, .12);
            border-bottom: 1px solid rgba(207, 174, 114, .12);
            background: rgba(7, 8, 12, .52);
        }

        .sx-feature-card { padding: 25px; }
        .sx-feature-card i { color: var(--sx-gold); font-size: 24px; }
        .sx-feature-card h3 { margin: 18px 0 9px; color: var(--sx-text); font: 700 16px/1.3 Cinzel, serif; }
        .sx-feature-card p { margin: 0; color: var(--sx-muted); font: 400 12px/1.7 Inter, sans-serif; }

        .sx-refund-card {
            position: relative;
            overflow: hidden;
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 24px;
            padding: 34px;
            border: 1px solid var(--sx-line-strong);
            border-radius: 25px;
            background:
                radial-gradient(circle at 12% 30%, rgba(207, 174, 114, .16), transparent 31%),
                linear-gradient(135deg, rgba(30, 27, 21, .95), rgba(14, 15, 20, .96));
            box-shadow: 0 25px 80px rgba(0, 0, 0, .25);
        }

        .sx-refund-icon {
            display: grid;
            place-items: center;
            width: 72px;
            height: 72px;
            border: 1px solid var(--sx-line-strong);
            border-radius: 20px;
            color: var(--sx-gold-light);
            background: rgba(207, 174, 114, .09);
            font-size: 28px;
        }

        .sx-refund-card h2 { margin: 0 0 8px; color: var(--sx-text); font: 700 25px Cinzel, serif; }
        .sx-refund-card p { margin: 0; color: var(--sx-muted); font: 400 13px/1.7 Inter, sans-serif; }

        .sx-link-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 44px;
            padding: 0 18px;
            border: 1px solid var(--sx-line-strong);
            border-radius: 12px;
            color: #15110a;
            background: linear-gradient(135deg, #c49c5b, #f0d396);
            font: 800 11px Inter, sans-serif;
            letter-spacing: .04em;
            text-decoration: none;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .sx-faq-list { display: grid; gap: 12px; }

        .sx-faq-item {
            border: 1px solid var(--sx-line);
            border-radius: 16px;
            background: var(--sx-panel-soft);
        }

        .sx-faq-item summary {
            position: relative;
            padding: 20px 54px 20px 20px;
            color: var(--sx-text);
            font: 600 14px/1.5 Inter, sans-serif;
            cursor: pointer;
            list-style: none;
        }

        .sx-faq-item summary::-webkit-details-marker { display: none; }
        .sx-faq-item summary::after {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--sx-gold);
            font-size: 20px;
            content: "+";
            transition: transform .2s ease;
        }

        .sx-faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
        .sx-faq-answer { padding: 0 20px 20px; color: var(--sx-muted); font: 400 12px/1.75 Inter, sans-serif; }

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

        .sx-community-card {
            display: flex;
            align-items: center;
            gap: 17px;
            padding: 22px;
            color: var(--sx-text);
            text-decoration: none;
            transition: transform .2s ease, border-color .2s ease;
        }

        .sx-community-card:hover { transform: translateY(-4px); border-color: var(--sx-line-strong); }
        .sx-community-card i { width: 35px; color: var(--sx-gold); font-size: 28px; text-align: center; }
        .sx-community-card strong { display: block; font: 700 14px Inter, sans-serif; }
        .sx-community-card span { display: block; margin-top: 5px; color: var(--sx-muted); font: 400 11px Inter, sans-serif; }

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

        .sx-payment-card {
            display: grid;
            place-items: center;
            min-height: 78px;
            padding: 12px;
            color: var(--sx-text);
            font: 800 13px Inter, sans-serif;
            text-align: center;
        }

        .sx-payment-card i { margin-right: 7px; color: var(--sx-gold); font-size: 20px; }

        .sx-footer-links {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 17px;
            margin: 22px 0 0;
        }

        .sx-footer-links a { color: var(--sx-muted); font: 500 11px Inter, sans-serif; text-decoration: none; }
        .sx-footer-links a:hover { color: var(--sx-gold-light); }



        /* Reference-style hero trust points and animated stacked pricelist. */
        .sx-hero-points {
            display: grid;
            gap: 9px;
            margin: 24px 0 26px;
            padding: 0;
            list-style: none;
            color: var(--sx-muted);
            font: 600 12px/1.5 Inter, sans-serif;
        }

        .sx-hero-points li {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .sx-hero-points i {
            display: grid;
            place-items: center;
            width: 20px;
            height: 20px;
            border: 1px solid var(--sx-line);
            border-radius: 50%;
            color: var(--sx-gold-light);
            background: rgba(207, 174, 114, .08);
            font-size: 9px;
        }

        @keyframes sx-stack-slide-4 {
            0%, 20% { transform: translateX(0); }
            25%, 45% { transform: translateX(-25%); }
            50%, 70% { transform: translateX(-50%); }
            75%, 95% { transform: translateX(-75%); }
            100% { transform: translateX(0); }
        }

        @keyframes sx-float-one {
            0%, 100% { transform: translateY(0) rotate(-4deg); }
            50% { transform: translateY(-9px) rotate(-4deg); }
        }

        @keyframes sx-float-two {
            0%, 100% { transform: translateY(0) rotate(3deg); }
            50% { transform: translateY(-7px) rotate(3deg); }
        }

        .sx-price-showcase {
            overflow: hidden;
            border-top: 1px solid rgba(207, 174, 114, .12);
            border-bottom: 1px solid rgba(207, 174, 114, .12);
            background:
                radial-gradient(circle at 78% 45%, rgba(207, 174, 114, .14), transparent 29%),
                radial-gradient(circle at 18% 15%, rgba(207, 174, 114, .07), transparent 24%),
                rgba(10, 11, 16, .76);
        }

        .sx-price-layout {
            display: grid;
            grid-template-columns: minmax(0, .85fr) minmax(420px, 1.15fr);
            align-items: center;
            gap: clamp(42px, 7vw, 90px);
        }

        .sx-price-copy .sx-title { font-size: clamp(41px, 6vw, 68px); }
        .sx-price-copy .sx-description { max-width: 470px; }

        .sx-price-benefits {
            display: grid;
            gap: 11px;
            margin: 27px 0 30px;
        }

        .sx-price-benefit {
            display: flex;
            align-items: center;
            gap: 11px;
            color: var(--sx-muted);
            font: 600 12px/1.5 Inter, sans-serif;
        }

        .sx-price-benefit i { color: var(--sx-gold-light); }

        .sx-price-stage {
            position: relative;
            display: grid;
            place-items: center;
            min-height: 630px;
        }

        .sx-price-stack {
            position: relative;
            width: min(370px, 84vw);
            height: 535px;
        }

        .sx-stack-shadow {
            position: absolute;
            inset: 0;
            border: 1px solid var(--sx-line);
            border-radius: 30px;
            background: linear-gradient(150deg, rgba(207, 174, 114, .18), rgba(255, 255, 255, .035));
            box-shadow: 0 30px 70px rgba(0, 0, 0, .38);
        }

        .sx-stack-shadow.one { transform: translate(-42px, 18px) rotate(-7deg) scale(.88); opacity: .52; }
        .sx-stack-shadow.two { transform: translate(42px, 18px) rotate(7deg) scale(.88); opacity: .52; }
        .sx-stack-shadow.three { transform: translate(-21px, 9px) rotate(-3.5deg) scale(.94); opacity: .77; }
        .sx-stack-shadow.four { transform: translate(21px, 9px) rotate(3.5deg) scale(.94); opacity: .77; }

        .sx-stack-window {
            position: absolute;
            inset: 0;
            z-index: 5;
            overflow: hidden;
            border: 1px solid rgba(207, 174, 114, .38);
            border-radius: 30px;
            background: #f4efe5;
            box-shadow: 0 38px 90px rgba(0, 0, 0, .58);
        }

        .sx-stack-track {
            display: flex;
            width: 400%;
            height: 100%;
            animation: sx-stack-slide-4 20s infinite cubic-bezier(.4, 0, .2, 1);
        }

        .sx-stack-window:hover .sx-stack-track { animation-play-state: paused; }

        .sx-stack-card {
            display: flex;
            flex: 0 0 25%;
            flex-direction: column;
            min-width: 0;
            padding: 37px 34px 31px;
            color: #17140e;
        }

        .sx-stack-card-icon {
            display: grid;
            place-items: center;
            width: 66px;
            height: 66px;
            margin-bottom: 22px;
            border: 1px solid rgba(148, 111, 52, .22);
            border-radius: 18px;
            color: #fff;
            background: linear-gradient(145deg, #8b652f, #c59a55);
            box-shadow: inset 0 0 20px rgba(255, 255, 255, .16), 0 14px 30px rgba(94, 64, 19, .18);
            font-size: 24px;
        }

        .sx-stack-card h3 {
            margin: 0 0 10px;
            color: #17140e;
            font: 700 25px/1.1 Cinzel, serif;
        }

        .sx-stack-label {
            display: flex;
            align-items: center;
            gap: 7px;
            margin: 0 0 18px;
            color: #635b50;
            font: 700 11px/1.4 Inter, sans-serif;
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .sx-stack-features {
            display: grid;
            gap: 13px;
            margin: 0;
            padding: 0;
            list-style: none;
            color: #665f55;
            font: 600 12px/1.45 Inter, sans-serif;
        }

        .sx-stack-features li { display: flex; align-items: flex-start; gap: 10px; }
        .sx-stack-features i { width: 16px; margin-top: 2px; color: #9b7134; text-align: center; }

        .sx-stack-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            margin-top: auto;
            padding-top: 21px;
            border-top: 1px solid rgba(93, 72, 38, .16);
        }

        .sx-stack-price {
            display: flex;
            align-items: baseline;
            color: #17140e;
            font: 800 28px/1 Inter, sans-serif;
            letter-spacing: -.04em;
        }

        .sx-stack-price small {
            margin-left: 5px;
            color: #857c70;
            font: 700 10px/1 Inter, sans-serif;
            letter-spacing: 0;
        }

        .sx-stack-buy {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 44px;
            padding: 0 17px;
            border-radius: 11px;
            color: #fff;
            background: linear-gradient(135deg, #775323, #b18748);
            box-shadow: 0 11px 24px rgba(91, 58, 14, .24);
            font: 800 11px/1 Inter, sans-serif;
            text-decoration: none;
            white-space: nowrap;
        }

        .sx-stack-buy:hover { filter: brightness(1.08); transform: translateY(-1px); }

        .sx-floating-badge {
            position: absolute;
            z-index: 9;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 9px 13px;
            border: 1px solid rgba(207, 174, 114, .32);
            border-radius: 999px;
            color: #efe4d0;
            background: rgba(17, 17, 22, .92);
            box-shadow: 0 15px 35px rgba(0, 0, 0, .4);
            backdrop-filter: blur(14px);
            font: 800 10px/1 Inter, sans-serif;
            white-space: nowrap;
        }

        .sx-floating-badge i { color: var(--sx-gold-light); }
        .sx-floating-badge.badge-one { top: 100px; left: max(0px, calc(50% - 250px)); animation: sx-float-one 4s ease-in-out infinite; }
        .sx-floating-badge.badge-two { top: 56px; right: max(0px, calc(50% - 250px)); animation: sx-float-two 5s ease-in-out infinite .8s; }
        .sx-floating-badge.badge-three { bottom: 120px; left: max(5px, calc(50% - 245px)); animation: sx-float-one 4.6s ease-in-out infinite 1.4s; }

        .sx-stack-dots {
            position: absolute;
            bottom: 21px;
            left: 50%;
            z-index: 10;
            display: flex;
            align-items: center;
            gap: 7px;
            transform: translateX(-50%);
        }

        .sx-stack-dot {
            width: 7px;
            height: 7px;
            border: 0;
            border-radius: 999px;
            background: rgba(207, 174, 114, .32);
            transition: width .25s ease, background .25s ease;
        }

        .sx-stack-dot.active {
            width: 25px;
            background: var(--sx-gold);
            box-shadow: 0 0 13px rgba(207, 174, 114, .45);
        }

        @media (max-width: 980px) {
            .sx-price-layout { grid-template-columns: 1fr; }
            .sx-price-copy { text-align: center; }
            .sx-price-copy .sx-description { margin-right: auto; margin-left: auto; }
            .sx-price-benefits { justify-content: center; max-width: 410px; margin-right: auto; margin-left: auto; text-align: left; }
        }

        @media (max-width: 580px) {
            .sx-price-stage { min-height: 590px; }
            .sx-price-stack { height: 505px; }
            .sx-stack-card { padding: 30px 25px 27px; }
            .sx-stack-card h3 { font-size: 22px; }
            .sx-stack-features { gap: 11px; font-size: 11px; }
            .sx-floating-badge { display: none; }
        }


        @media (max-width: 980px) {
            .sx-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .sx-order-layout { grid-template-columns: 1fr; }
            .sx-payment-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
            #productGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .sx-refund-card { grid-template-columns: auto 1fr; }
            .sx-refund-card .sx-link-btn { grid-column: 1 / -1; }
        }

        @media (max-width: 760px) {
            .sx-offer-banner { padding-left: 12px; font-size: 10px; }
            .sx-inline-tools { display: none; }
            .sx-section { padding: 58px 0; }
            .sx-section-head { align-items: flex-start; flex-direction: column; }
            .sx-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .sx-community-grid { grid-template-columns: 1fr; }
        }

        @media (max-width: 560px) {
            .sx-grid-4, #productGrid { grid-template-columns: 1fr; }
            .sx-payment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .sx-order-panel, .sx-recent-orders { padding: 20px; }
            .sx-order-panel-head { align-items: flex-start; flex-direction: column; }
            .sx-refund-card { grid-template-columns: 1fr; text-align: center; }
            .sx-refund-icon { margin: 0 auto; }
            .sx-link-btn { width: 100%; }
        }