/* --- TECROOT PREMIUM CSS --- */

/* 1. Global Styles & Variables */
:root {
    --tecroot-green: #4CAF50;
    --tecroot-pink: #E91E63;
    --dark-text: #333333;
    --light-gray: #f4f4f4;
    --white: #ffffff;
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 15px;
}

.flex-row {
    display: flex;
    align-items: center;
}

/* 2. Top Info Bar */
.top-info-bar {
    background: var(--white);
    border-bottom: 1px solid #eee;
    padding: 8px 0;
    font-size: 12px;
}

.top-info-bar .container {
    justify-content: space-between;
}

.contact-details a, .welcome-text {
    color: #666;
    text-decoration: none;
    margin-right: 15px;
}

.top-utility-links a {
    color: #444;
    text-decoration: none;
    margin-left: 15px;
    font-weight: 500;
}

.top-utility-links i {
    color: var(--tecroot-green);
    margin-right: 5px;
}

/* 3. Main Nav Wrapper (Logo & Search) */
.nav-main-wrapper {
    padding: 15px 0;
    background: var(--white);
}

.nav-main-wrapper .container {
    justify-content: space-between;
    gap: 30px;
}

.site-logo img {
    height: 45px;
    cursor: pointer;
}

/* Advanced Search Bar */
.nav-search-container {
    flex: 1;
    max-width: 600px;
}

.search-input-group {
    display: flex;
    border: 2px solid var(--tecroot-green);
    border-radius: 30px;
    overflow: hidden;
    height: 45px;
}

.search-input-group input {
    flex: 1;
    border: none;
    padding: 0 20px;
    outline: none;
    font-size: 14px;
}

.search-btn {
    background: var(--tecroot-green);
    border: none;
    color: white;
    padding: 0 25px;
    cursor: pointer;
    transition: var(--transition);
}

.search-btn:hover {
    background: #3d8b40;
}

/* Action Icons */
.nav-action-icons {
    gap: 20px;
}

.icon-item {
    position: relative;
    cursor: pointer;
    font-size: 20px;
    color: #444;
    transition: var(--transition);
}

.icon-item:hover {
    color: var(--tecroot-green);
}

.icon-item .badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background: var(--tecroot-green);
    color: white;
    font-size: 10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-btn {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-price {
    font-size: 14px;
    font-weight: 700;
}

/* 4. Category Navigation (Green Bar) */
.category-navigation {
    background: var(--tecroot-green);
}

.cat-list {
    list-style: none;
    display: flex;
    align-items: center;
}

.cat-list li {
    padding: 12px 18px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.3s;
    border-right: 1px solid rgba(255,255,255,0.1);
}

.cat-list li:hover {
    background: rgba(0,0,0,0.1);
}

.cat-list li i {
    font-size: 14px;
}

.small-icon {
    font-size: 10px !important;
}

.lvl-up-link {
    background: var(--tecroot-pink);
    font-weight: 800 !important;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.8; }
    100% { opacity: 1; }
}

/* Responsive Mobile Hide */
.mobile-menu-trigger {
    display: none;
    font-size: 24px;
}

@media (max-width: 992px) {
    .nav-search-container, .top-utility-links, .category-navigation {
        display: none;
    }
    .mobile-menu-trigger {
        display: block;
    }
}

/* --- TRUST BADGES (LABEL BAR) CSS --- */

.trust-bar {
    background: #ffffff;
    padding: 30px 0;
    border-bottom: 1px solid #eeeeee;
}

.trust-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Mobile wala awul yanne nathiganna */
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    justify-content: center;
    padding: 10px;
    border-right: 1px solid #f0f0f0; /* Item deka athara lassan separator ekak */
    transition: var(--transition);
}

/* Anthima item eke border eka ain karamu */
.trust-item:last-child {
    border-right: none;
}

/* Icon Style */
.trust-icon {
    font-size: 32px;
    color: var(--tecroot-green); /* Ape primary green color eka */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Text Style */
.trust-text {
    display: flex;
    flex-direction: column;
}

.trust-text strong {
    font-size: 14px;
    color: #333;
    font-weight: 700;
    line-height: 1.2;
}

.trust-text span {
    font-size: 13px;
    color: #777;
    font-weight: 500;
}

/* Hover Effects - Premium vibe ekak ganna */
.trust-item:hover {
    background-color: #fafafa;
    cursor: default;
}

.trust-item:hover .trust-icon {
    transform: scale(1.1) rotate(-5deg); /* Podi animation ekak mouse eka genichchama */
}

/* Responsive - Mobile wala lassanata penna */
@media (max-width: 992px) {
    .trust-item {
        flex: 0 0 50%; /* Line ekakata items 2k */
        border-right: none;
        border-bottom: 1px solid #f0f0f0;
    }
    .trust-item:nth-child(even) {
        border-left: 1px solid #f0f0f0;
    }
}

@media (max-width: 480px) {
    .trust-item {
        flex: 0 0 100%; /* Mobile ekedi line ekakata ekai */
        border-left: none;
    }
}

/* --- HERO SLIDER PREMIUM CSS --- */

.hero-slider {
    position: relative;
    width: 100%;
    height: 80vh; /* Screen eken 80% k gannawa */
    min-height: 500px;
    overflow: hidden;
    background: #000;
}

.slider-wrapper {
    width: 100%;
    height: 100%;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 1s;
    display: flex;
    align-items: center;
}

.slide.active {
    opacity: 1;
    visibility: visible;
}

/* Background Image Animation */
.slide img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 8s linear; /* Ken Burns Effect */
}

.slide.active img {
    transform: scale(1.1);
}

/* Overlay for Text Readability */
.slide::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 60%);
    z-index: 2;
}

/* Content Animations */
.slide-content {
    position: relative;
    z-index: 3;
    color: #fff;
    max-width: 700px;
}

.slide-content .subtitle {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--tecroot-green);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 15px;
    transform: translateY(30px);
    opacity: 0;
    transition: 0.5s 0.3s;
}

.slide-content h1 {
    font-size: 60px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    transform: translateY(30px);
    opacity: 0;
    transition: 0.5s 0.5s;
}

.slide-content p {
    font-size: 18px;
    margin-bottom: 30px;
    color: #ddd;
    transform: translateY(30px);
    opacity: 0;
    transition: 0.5s 0.7s;
}

.btn-primary {
    display: inline-block;
    padding: 15px 40px;
    background: var(--tecroot-green);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px;
    transform: translateY(30px);
    opacity: 0;
    transition: 0.5s 0.9s;
}

/* Active State Content Reveal */
.slide.active .subtitle,
.slide.active h1,
.slide.active p,
.slide.active .btn-primary {
    transform: translateY(0);
    opacity: 1;
}

/* Slider Controls (Arrows) */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: 0.3s;
}

.slider-arrow:hover {
    background: var(--tecroot-green);
    border-color: var(--tecroot-green);
}

.prev { left: 30px; }
.next { right: 30px; }

/* Dots */
.slider-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 10px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    cursor: pointer;
    transition: 0.3s;
}

.dot.active {
    background: var(--tecroot-green);
    width: 30px;
    border-radius: 10px;
}

/* --- QUICK CATEGORY GRID (FULL UPDATED) --- */

.category-grid-section {
    padding: 60px 0;
    background-color: #fff;
}

.category-row {
    display: grid;
    gap: 20px;
    margin-bottom: 20px;
}

/* Grid Layouts */
.main-grid {
    grid-template-columns: repeat(4, 1fr);
}

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

/* --- THE BOX DESIGN --- */
.cat-box {
    position: relative;
    background: #f6f6f6; /* Premium Light Gray */
    height: 180px;
    border-radius: 12px;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    border: 1px solid transparent;
    
    /* 3D Effect settings */
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* Hover State */
.cat-box:hover {
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border-color: var(--tecroot-green);
}

/* Text Inside Box */
.cat-info {
    transform: translateZ(30px); /* Text eka 3D widiyata issarahata enna */
    z-index: 2;
}

.cat-info h3 {
    font-size: 24px;
    font-weight: 800;
    color: #222;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

/* Image Inside Box */
.cat-img {
    height: 100%;
    width: 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: translateZ(50px); /* Image eka thawa issarahata enna */
}

.cat-img img {
    max-height: 140px;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 15px 20px rgba(0,0,0,0.15));
}

/* Box Hover weddi image eka zoom wenna */
.cat-box:hover .cat-img {
    transform: translateZ(60px) scale(1.1) rotate(5deg);
}

/* --- JS ADDED EFFECTS --- */

/* Ripple Effect Animation */
.ripple-effect {
    position: absolute;
    background: rgba(76, 175, 80, 0.2); /* Soft Green ripple */
    transform: translate(-50%, -50%);
    pointer-events: none;
    border-radius: 50%;
    animation: ripple-animation 0.6s linear;
    z-index: 0;
}

@keyframes ripple-animation {
    from {
        width: 0px;
        height: 0px;
        opacity: 0.5;
    }
    to {
        width: 600px;
        height: 600px;
        opacity: 0;
    }
}

/* Clickable Link Overlay */
.overlay-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .main-grid, .sub-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .main-grid, .sub-grid {
        grid-template-columns: 1fr;
    }
    .cat-box {
        height: 150px;
    }
}

/* --- DEAL OF THE WEEK & PRODUCT GRID CSS --- */

.products-section {
    padding: 60px 0;
}

.product-layout-wrapper {
    display: grid;
    grid-template-columns: 320px 1fr; /* Left side eka fix, Right side eka grow wenawa */
    gap: 30px;
}

/* --- LEFT SIDE: DEAL OF THE WEEK --- */
.deal-of-the-week {
    background: #ffffff;
    border: 1px solid #eee;
    border-radius: 15px;
    padding: 20px;
    position: relative;
    /* Screenshot 3 eke thiyena green glow/border vibe eka */
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.05);
}

.deal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.deal-header h2 {
    font-size: 18px;
    font-weight: 800;
}

.save-badge {
    background: var(--tecroot-green);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.deal-card {
    border: 2px solid #e1f5e1; /* Light green border */
    border-radius: 12px;
    padding: 15px;
    transition: var(--transition);
}

.deal-img {
    position: relative;
    text-align: center;
    margin-bottom: 15px;
}

.deal-img img {
    max-width: 100%;
    border-radius: 8px;
}

.discount-label {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #e91e63;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
}

.deal-details h3 {
    font-size: 15px;
    margin-bottom: 15px;
    line-height: 1.4;
}

.price-row {
    margin-bottom: 15px;
}

.new-price {
    font-size: 22px;
    font-weight: 800;
    color: var(--tecroot-pink);
}

.old-price {
    text-decoration: line-through;
    color: #999;
    font-size: 14px;
    margin-left: 10px;
}

/* Stock Bar Styling */
.stock-status {
    margin-top: 15px;
}

.status-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 8px;
    color: #666;
}

.stock-bar {
    height: 8px;
    background: #eee;
    border-radius: 10px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: var(--tecroot-green);
    border-radius: 10px;
}

/* --- RIGHT SIDE: PRODUCT TABS --- */
.tabs-header {
    border-bottom: 1px solid #eee;
    margin-bottom: 30px;
}

.tab-list {
    list-style: none;
    display: flex;
    gap: 30px;
}

.tab-item {
    padding: 10px 0;
    font-size: 14px;
    font-weight: 700;
    color: #888;
    cursor: pointer;
    position: relative;
    transition: var(--transition);
}

.tab-item.active {
    color: var(--tecroot-green);
}

.tab-item.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--tecroot-green);
}

/* Product Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.product-card {
    background: #fff;
    padding: 15px;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: var(--transition);
    position: relative;
}

.product-card:hover {
    border-color: #eee;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.p-img {
    position: relative;
    text-align: center;
    margin-bottom: 15px;
    background: #f9f9f9;
    border-radius: 8px;
    padding: 20px;
}

.p-img img {
    max-height: 150px;
    transition: var(--transition);
}

.product-card:hover .p-img img {
    transform: scale(1.05);
}

/* Add to Cart Floating Button */
.add-to-cart {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: #fff;
    border: 1px solid #eee;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: var(--transition);
}

.product-card:hover .add-to-cart {
    opacity: 1;
    background: var(--tecroot-green);
    color: white;
    border-color: var(--tecroot-green);
}

.p-info .brand {
    font-size: 11px;
    color: #aaa;
    text-transform: uppercase;
}

.p-info h4 {
    font-size: 14px;
    margin: 5px 0;
    height: 40px; /* Two lines limit */
    overflow: hidden;
}

.p-info .price {
    font-weight: 800;
    color: #333;
}

/* Out of Stock Styling */
.out-of-stock {
    opacity: 0.7;
}

.stock-tag {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 5px 10px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
}

/* Responsive */
@media (max-width: 1024px) {
    .product-layout-wrapper {
        grid-template-columns: 1fr;
    }
    .deal-of-the-week {
        max-width: 400px;
        margin: 0 auto 30px;
    }
}

/* --- FLASH DISCOUNTS & COUNTDOWN SECTION CSS --- */

.discounts-section {
    padding: 80px 0;
    background-color: #ffffff;
}

.discount-wrapper {
    display: flex;
    align-items: center;
    gap: 50px;
    background: #fcfcfc;
    padding: 40px;
    border-radius: 20px;
    border: 1px solid #f0f0f0;
}

/* --- LEFT SIDE: COUNTDOWN --- */
.countdown-container {
    flex: 0 0 300px;
    text-align: left;
}

.discount-label span {
    font-size: 18px;
    color: #666;
    font-weight: 500;
}

.discount-label h1 {
    font-size: 80px;
    font-weight: 900;
    line-height: 1;
    color: #333;
    margin-bottom: 20px;
}

.timer-box p {
    font-size: 14px;
    color: #888;
    margin-bottom: 15px;
}

#countdown-timer {
    display: flex;
    gap: 15px;
}

.time-block {
    background: #fff;
    border: 1px solid #eee;
    padding: 10px;
    min-width: 70px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

.time-block span {
    display: block;
    font-size: 24px;
    font-weight: 800;
    color: var(--tecroot-green);
}

.time-block small {
    font-size: 10px;
    font-weight: 700;
    color: #aaa;
    text-transform: uppercase;
}

/* --- RIGHT SIDE: SLIDER --- */
.discount-slider-container {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.slider-controls {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    z-index: 5;
    pointer-events: none;
}

.slider-controls button {
    background: #fff;
    border: 1px solid #eee;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    transition: var(--transition);
    box-shadow: 0 5px 10px rgba(0,0,0,0.05);
}

.slider-controls button:hover {
    background: var(--tecroot-green);
    color: #fff;
    border-color: var(--tecroot-green);
}

.discount-items-wrapper {
    display: flex;
    gap: 20px;
    transition: transform 0.5s ease;
}

.discount-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 15px;
    min-width: 240px;
    position: relative;
    transition: var(--transition);
}

.discount-card:hover {
    border-color: #ddd;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.badge-pink {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--tecroot-pink);
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
}

.d-img {
    text-align: center;
    padding: 15px;
}

.d-img img {
    max-height: 160px;
    object-fit: contain;
}

.d-info .brand {
    font-size: 11px;
    color: #aaa;
    text-transform: uppercase;
}

.d-info h4 {
    font-size: 14px;
    margin: 8px 0;
    height: 38px;
    overflow: hidden;
}

.d-price .new {
    color: var(--tecroot-pink);
    font-weight: 800;
    font-size: 16px;
}

.d-price .old {
    text-decoration: line-through;
    color: #999;
    font-size: 13px;
    margin-left: 8px;
}

/* Responsive */
@media (max-width: 992px) {
    .discount-wrapper {
        flex-direction: column;
        padding: 30px;
    }
    .countdown-container {
        flex: auto;
        text-align: center;
        margin-bottom: 40px;
    }
    #countdown-timer {
        justify-content: center;
    }
}

/* --- VIDEO GAMES SECTION CSS --- */

.video-games-section {
    padding: 60px 0;
}

.games-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

/* 1. LEFT SIDE BANNER (Mario Banner) */
.games-banner {
    flex: 0 0 300px;
    background: #f8f8f8;
    border-radius: 20px;
    padding: 40px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    height: 600px; /* Thadi vertical banner ekak */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.banner-text h3 {
    font-size: 14px;
    font-weight: 800;
    color: #444;
    letter-spacing: 2px;
}

.banner-text h1 {
    font-size: 32px;
    font-weight: 900;
    color: var(--tecroot-pink);
    line-height: 1.1;
    margin-top: 10px;
}

.banner-img img {
    width: 110%;
    margin-left: -5%;
    /* Floating Animation */
    animation: floatCharacter 4s ease-in-out infinite;
}

@keyframes floatCharacter {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* 2. RIGHT SIDE CONTENT */
.games-content {
    flex: 1;
}

.games-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.games-header h2 {
    font-size: 22px;
    font-weight: 800;
}

.game-filters {
    display: flex;
    gap: 15px;
}

.filter-btn {
    font-size: 13px;
    font-weight: 700;
    color: #888;
    cursor: pointer;
    transition: var(--transition);
}

.filter-btn:hover, .filter-btn.active {
    color: var(--tecroot-green);
}

/* Games Grid */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.game-card {
    background: #fff;
    transition: var(--transition);
}

.g-img {
    position: relative;
    background: #f9f9f9;
    border-radius: 10px;
    padding: 15px;
    overflow: hidden;
    text-align: center;
}

.g-img img {
    max-height: 180px;
    border-radius: 5px;
    transition: var(--transition);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.game-card:hover .g-img img {
    transform: scale(1.05) translateY(-5px);
}

/* Out of Stock Label (SS 6 Style) */
.out-stock-label {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    background: rgba(76, 175, 80, 0.9); /* TecRoot Green with transparency */
    color: #fff;
    padding: 8px 0;
    font-size: 11px;
    font-weight: 800;
    transform: translateY(-50%);
    z-index: 2;
}

.g-info {
    padding-top: 15px;
}

.platform {
    font-size: 11px;
    color: #aaa;
    font-weight: 600;
}

.g-info h4 {
    font-size: 14px;
    margin: 5px 0;
    font-weight: 700;
    height: 40px;
    overflow: hidden;
}

.g-price {
    font-weight: 800;
    color: #333;
    display: block;
}

/* Responsive Mobile */
@media (max-width: 992px) {
    .games-layout {
        flex-direction: column;
    }
    .games-banner {
        flex: auto;
        height: auto;
        width: 100%;
        padding: 30px;
    }
    .banner-img img {
        max-width: 250px;
        margin: 20px auto 0;
    }
}

/* --- REVIEWS SECTION CSS --- */

.reviews-section {
    padding: 80px 0;
    background-color: #fff;
}

.reviews-wrapper {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* Left Rating Box */
.overall-rating {
    flex: 0 0 250px;
    text-align: center;
    padding: 20px;
    border-right: 1px solid #eee;
}

.google-logo img {
    width: 100px;
    margin-bottom: 15px;
}

.rating-info h2 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 10px;
}

.stars-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 5px;
}

.score {
    font-size: 24px;
    font-weight: 900;
    color: #333;
}

.stars i {
    color: #fbbc05; /* Google Star Color */
    font-size: 14px;
}

.rating-info p {
    font-size: 12px;
    color: #888;
    margin-bottom: 20px;
}

.review-btn {
    background: #4285f4; /* Google Blue */
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

.review-btn:hover {
    background: #357abd;
}

/* Right Carousel/Grid Area */
.reviews-carousel {
    flex: 1;
    display: flex;
    gap: 20px;
    overflow-x: auto; /* Mobile friendly horizontal scroll */
    padding-bottom: 20px;
}

.review-card {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 25px;
    min-width: 320px;
    border: 1px solid #f0f0f0;
    transition: 0.3s;
}

.review-card:hover {
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-color: #eee;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
}

.user-meta h4 {
    font-size: 14px;
    font-weight: 700;
}

.user-meta span {
    font-size: 11px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 5px;
}

.google-icon {
    color: #4285f4;
}

.user-rating {
    margin-bottom: 12px;
}

.user-rating i {
    color: #fbbc05;
    font-size: 12px;
}

.review-text {
    font-size: 13px;
    line-height: 1.6;
    color: #444;
    font-style: italic;
}

/* Responsive */
@media (max-width: 992px) {
    .reviews-wrapper {
        flex-direction: column;
    }
    .overall-rating {
        border-right: none;
        border-bottom: 1px solid #eee;
        width: 100%;
        flex: auto;
    }
}


/* --- FOOTER CSS START --- */

.site-footer {
    background: #ffffff;
    border-top: 1px solid #eee;
}

/* Newsletter Strip */
.newsletter-strip {
    background: #4CAF50; /* TecRoot Green */
    padding: 20px 0;
    color: white;
}

.newsletter-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.n-text {
    display: flex;
    align-items: center;
    gap: 15px;
}

.n-text i { font-size: 30px; }
.n-text h3 { font-size: 18px; font-weight: 800; }
.n-text p { font-size: 13px; opacity: 0.9; }

.n-form {
    display: flex;
    background: white;
    padding: 5px;
    border-radius: 5px;
    width: 400px;
}

.n-form input {
    flex: 1;
    border: none;
    padding: 10px;
    outline: none;
}

.n-form button {
    background: #000;
    color: white;
    border: none;
    padding: 0 20px;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 700;
}

/* Main Footer Content */
.footer-main {
    padding: 60px 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
}

.footer-col h3 {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 25px;
    color: #333;
    position: relative;
}

.footer-col h3::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--tecroot-green);
}

.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 12px; }
.footer-col ul li a {
    text-decoration: none;
    color: #666;
    font-size: 13px;
    transition: 0.3s;
}

.footer-col ul li a:hover {
    color: var(--tecroot-green);
    padding-left: 5px;
}

/* Brand Col Styles */
.footer-logo { height: 40px; margin-bottom: 20px; }
.footer-desc { font-size: 13px; color: #777; line-height: 1.6; margin-bottom: 25px; }

.contact-box {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.contact-box i { font-size: 35px; color: var(--tecroot-green); }
.contact-box span { font-size: 11px; display: block; color: #999; }
.contact-box strong { font-size: 18px; color: #333; }

.social-links {
    display: flex;
    gap: 10px;
    margin-top: 25px;
}

.social-links a {
    width: 35px;
    height: 35px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #333;
    transition: 0.3s;
}

.social-links a:hover {
    background: var(--tecroot-green);
    color: white;
}

/* Bottom Bar */
.footer-bottom {
    background: #f9f9f9;
    padding: 20px 0;
    border-top: 1px solid #eee;
}

.footer-bottom .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #777;
}

.payment-logos {
    display: flex;
    gap: 15px;
    align-items: center;
}

.payment-logos img { height: 20px; opacity: 0.7; }

/* Responsive */
@media (max-width: 992px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .newsletter-content { flex-direction: column; gap: 20px; text-align: center; }
}

@media (max-width: 600px) {
    .footer-grid { grid-template-columns: 1fr; }
    .n-form { width: 100%; }
}

/* --- MOBILE APP UPGRADE OVERRIDES --- */
html { scroll-behavior: smooth; }
body {
    background: #f6f8f7;
    color: #1f2937;
    overflow-x: hidden;
}
body.mobile-menu-open {
    overflow: hidden;
}
img {
    max-width: 100%;
    display: block;
}
.nav-main-wrapper.sticky-active {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1200;
    box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}
.mobile-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1390;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease;
}
.mobile-drawer-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: min(86vw, 360px);
    height: 100vh;
    background: #ffffff;
    z-index: 1400;
    transform: translateX(-102%);
    transition: transform 0.34s ease;
    box-shadow: 20px 0 45px rgba(15, 23, 42, 0.15);
    display: flex;
    flex-direction: column;
}
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eef0ef;
}
.drawer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
.drawer-brand strong {
    display: block;
    font-size: 16px;
    color: #111827;
}
.drawer-brand span {
    display: block;
    font-size: 12px;
    color: #6b7280;
}
.drawer-logo-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, #4CAF50, #3d8b40);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
}
.drawer-close {
    border: none;
    background: #f3f4f6;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    cursor: pointer;
    color: #374151;
}
.mobile-drawer-search {
    padding: 18px 20px 8px;
}
.drawer-search-box {
    border-radius: 18px;
    height: 48px;
}
.mobile-drawer-links {
    padding: 12px 14px;
    display: grid;
    gap: 8px;
}
.mobile-drawer-links a,
.mobile-drawer-contact a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #111827;
}
.mobile-drawer-links a {
    padding: 14px 14px;
    border-radius: 16px;
    background: #f8faf9;
    border: 1px solid #eef2ef;
    font-weight: 600;
}
.mobile-drawer-links a i {
    color: var(--tecroot-green);
    width: 18px;
}
.mobile-drawer-contact {
    margin-top: auto;
    padding: 18px 20px 28px;
    display: grid;
    gap: 14px;
    border-top: 1px solid #eef0ef;
}
.mobile-quick-slider {
    display: none;
    padding: 14px 0 0;
}
.mobile-quick-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 0 15px 6px;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.mobile-quick-track::-webkit-scrollbar,
.discount-items-wrapper::-webkit-scrollbar,
.reviews-carousel::-webkit-scrollbar,
.tab-list::-webkit-scrollbar,
.game-filters::-webkit-scrollbar { display: none; }
.mobile-quick-card {
    min-width: 92px;
    background: #fff;
    border-radius: 20px;
    padding: 14px 10px;
    text-align: center;
    text-decoration: none;
    color: #111827;
    border: 1px solid #e9eeea;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    scroll-snap-align: start;
}
.mobile-quick-card i {
    display: block;
    font-size: 18px;
    color: var(--tecroot-green);
    margin-bottom: 8px;
}
.mobile-quick-card span {
    font-size: 12px;
    font-weight: 700;
}
.mobile-app-bar {
    display: none;
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: 12px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(76, 175, 80, 0.16);
    border-radius: 26px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.12);
    z-index: 1300;
    padding: 8px 6px;
    justify-content: space-between;
    gap: 4px;
}
.mobile-app-link {
    flex: 1;
    border: none;
    background: transparent;
    text-decoration: none;
    color: #6b7280;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 9px 4px;
    border-radius: 18px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}
.mobile-app-link i { font-size: 16px; }
.mobile-app-link.active {
    color: var(--tecroot-green);
    background: rgba(76, 175, 80, 0.1);
}
.mobile-cart-badge {
    position: absolute;
    top: 8px;
    right: 20px;
}
.discount-items-wrapper,
.reviews-carousel,
.tab-list,
.game-filters {
    scroll-behavior: smooth;
}
.discount-items-wrapper {
    overflow-x: auto;
    display: flex;
    gap: 16px;
    padding-bottom: 4px;
}
.discount-card { min-width: 250px; }
.reviews-carousel { scroll-snap-type: x proximity; }
.review-card { scroll-snap-align: start; }
.search-input-group input.error-shake {
    animation: inputShake 0.35s linear;
}
@keyframes inputShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    50% { transform: translateX(6px); }
    75% { transform: translateX(-3px); }
}
.address-box p {
    color: #777;
    font-size: 13px;
    line-height: 1.7;
}
.google-badge img,
.fb-badge img,
.payment-logos img {
    background: #fff;
    border-radius: 10px;
}

@media (max-width: 992px) {
    body { padding-bottom: 92px; }
    .mobile-app-bar,
    .mobile-quick-slider { display: block; }
    .mobile-app-bar { display: flex; }
    .top-info-bar { padding: 6px 0; }
    .top-info-bar .container { justify-content: center; }
    .contact-details { display: flex; justify-content: center; }
    .contact-details a { display: none; }
    .welcome-text { margin-right: 0; font-size: 11px; text-align: center; }
    .nav-main-wrapper {
        padding: 12px 0;
        position: sticky;
        top: 0;
        z-index: 1000;
        box-shadow: 0 10px 24px rgba(0,0,0,0.06);
    }
    .nav-main-wrapper .container {
        gap: 14px;
        display: grid;
        grid-template-columns: 34px 1fr auto;
        align-items: center;
    }
    .mobile-menu-trigger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: #f1f5f1;
        color: #111827;
    }
    .site-logo { justify-self: center; }
    .site-logo img { height: 34px; }
    .nav-action-icons {
        gap: 8px;
        justify-self: end;
    }
    .icon-item {
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f8faf8;
        border-radius: 10px;
        font-size: 16px;
    }
    .compare-btn,
    .wishlist-btn,
    .user-btn { display: none; }
    .cart-btn {
        width: auto;
        padding: 0 10px;
        gap: 0;
    }
    .cart-info { gap: 0; }
    .cart-price { display: none; }
    .trust-bar {
        padding: 18px 0;
        background: transparent;
        border-bottom: none;
    }
    .trust-bar .container {
        gap: 10px;
        justify-content: center;
    }
    .trust-item {
        flex: 0 0 calc(50% - 5px);
        background: #fff;
        border: 1px solid #eaf0ea !important;
        border-radius: 18px;
        justify-content: flex-start;
        padding: 14px 12px;
        box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04);
    }
    .hero-slider {
        height: 66vh;
        min-height: 430px;
        border-radius: 0 0 30px 30px;
    }
    .slide::after {
        background: linear-gradient(180deg, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.72) 100%);
    }
    .slide-content {
        max-width: 100%;
        padding: 0 6px;
    }
    .slide-content h1 {
        font-size: clamp(34px, 8vw, 52px);
        line-height: 1;
        margin-bottom: 14px;
    }
    .slide-content p {
        font-size: 14px;
        max-width: 90%;
        margin-bottom: 20px;
    }
    .btn-primary {
        padding: 13px 24px;
        border-radius: 14px;
        font-size: 13px;
    }
    .slider-arrow {
        width: 42px;
        height: 42px;
        top: auto;
        bottom: 65px;
        transform: none;
    }
    .prev { left: 14px; }
    .next { right: 14px; }
    .slider-dots { bottom: 20px; }
    .category-grid-section,
    .products-section,
    .discounts-section,
    .video-games-section,
    .reviews-section {
        padding-top: 28px;
        padding-bottom: 28px;
    }
    .main-grid,
    .sub-grid,
    .products-grid,
    .games-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .category-row { gap: 14px; }
    .cat-box {
        min-height: 166px;
        height: auto;
        padding: 18px 16px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        text-align: center;
        border-radius: 22px;
        box-shadow: 0 16px 30px rgba(0,0,0,0.04);
    }
    .cat-info h3 { font-size: 15px; }
    .cat-img img {
        max-height: 88px;
        margin: 0 auto;
    }
    .product-layout-wrapper,
    .discount-wrapper,
    .games-layout,
    .reviews-wrapper,
    .newsletter-content,
    .footer-bottom .container {
        flex-direction: column;
    }
    .deal-of-the-week,
    .product-tabs-container,
    .countdown-container,
    .discount-slider-container,
    .games-content,
    .overall-rating {
        width: 100%;
        flex: 1 1 auto;
    }
    .deal-of-the-week,
    .product-tabs-container,
    .countdown-container,
    .games-banner,
    .overall-rating,
    .review-card,
    .footer-col,
    .cat-box,
    .product-card,
    .discount-card,
    .game-card {
        border-radius: 22px;
    }
    .product-layout-wrapper,
    .discount-wrapper,
    .games-layout,
    .reviews-wrapper {
        gap: 18px;
    }
    .tabs-header {
        margin-bottom: 16px;
        overflow: hidden;
        border-bottom: none;
    }
    .tab-list,
    .game-filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        gap: 10px;
        padding-bottom: 2px;
    }
    .tab-item,
    .filter-btn {
        white-space: nowrap;
        border-radius: 999px;
        border: 1px solid #ebefec;
        background: #fff;
        padding: 10px 14px;
    }
    .tab-item.active,
    .filter-btn.active {
        background: rgba(76, 175, 80, 0.11);
        color: var(--tecroot-green);
        border-color: rgba(76, 175, 80, 0.18);
    }
    .products-grid,
    .games-grid { gap: 14px; }
    .product-card,
    .game-card,
    .deal-of-the-week,
    .countdown-container,
    .overall-rating {
        background: #fff;
        box-shadow: 0 16px 35px rgba(15, 23, 42, 0.05);
        padding: 0;
    }
    .deal-of-the-week,
    .countdown-container,
    .overall-rating { padding: 18px; }
    .p-img,
    .g-img {
        border-radius: 18px;
        margin: 10px;
    }
    .p-info,
    .g-info { padding: 0 12px 14px; }
    .discount-wrapper { padding: 22px 16px; border-radius: 24px; }
    .discount-slider-container { width: 100%; }
    .slider-controls { margin-bottom: 12px; justify-content: flex-end; }
    .discount-card {
        min-width: calc(50vw - 22px);
        background: #fff;
        border-radius: 20px;
        border: 1px solid #eef2ef;
        box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05);
    }
    .games-banner {
        padding: 22px 18px;
        text-align: left;
        height: auto;
    }
    .banner-text h1 { font-size: 28px; }
    .games-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 18px;
    }
    .overall-rating {
        text-align: left;
        border: none;
    }
    .stars-row { justify-content: flex-start; }
    .reviews-carousel { width: 100%; }
    .review-card {
        min-width: 84%;
        background: #fff;
        box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
    }
    .newsletter-strip,
    .site-footer {
        border-radius: 30px 30px 0 0;
    }
    .newsletter-strip { margin-top: 6px; }
    .n-text { flex-direction: column; text-align: center; }
    .footer-main { padding: 36px 0 18px; }
    .footer-grid { grid-template-columns: 1fr; gap: 26px; }
    .footer-bottom .container { gap: 12px; text-align: center; }
}

@media (max-width: 640px) {
    .container { padding: 0 14px; }
    .hero-slider {
        height: 70vh;
        min-height: 470px;
    }
    .slide-content .subtitle {
        letter-spacing: 2px;
        font-size: 12px;
        margin-bottom: 10px;
    }
    .slide-content h1 {
        font-size: clamp(29px, 9vw, 40px);
    }
    .slide-content p {
        font-size: 13px;
        line-height: 1.6;
        max-width: 100%;
    }
    .trust-item {
        flex: 0 0 calc(50% - 5px);
        min-height: 78px;
    }
    .trust-icon { font-size: 24px; }
    .trust-text strong { font-size: 12px; }
    .trust-text span { font-size: 11px; }
    .main-grid,
    .sub-grid,
    .products-grid,
    .games-grid { gap: 12px; }
    .cat-box {
        min-height: 150px;
        padding: 16px 12px;
    }
    .cat-info h3 {
        font-size: 14px;
        line-height: 1.35;
    }
    .cat-img img { max-height: 78px; }
    .product-card h4,
    .d-info h4,
    .g-info h4 {
        font-size: 13px;
        line-height: 1.45;
        height: auto;
        min-height: 38px;
    }
    .discount-card {
        min-width: 68vw;
    }
    .review-card {
        min-width: 88%;
        padding: 20px;
    }
    .newsletter-strip { padding: 22px 0; }
    .n-form {
        width: 100%;
        flex-direction: column;
        gap: 8px;
        background: transparent;
        padding: 0;
    }
    .n-form input,
    .n-form button {
        height: 48px;
        border-radius: 14px;
    }
    .n-form button { padding: 0 18px; }
}


/* --- FINAL MOBILE REFINEMENT OVERRIDES --- */
:root {
    --tecroot-green: #8b5cf6;
    --tecroot-pink: #ef4444;
    --mobile-header-height: 56px;
}
html,
body {
    max-width: 100%;
    overflow-x: hidden;
    background: #ffffff;
}
body {
    color: #111111;
}
.nav-main-wrapper,
.mobile-drawer,
.mobile-app-bar,
.trust-item,
.product-card,
.game-card,
.cat-box,
.discount-card,
.review-card {
    box-sizing: border-box;
}
.mobile-quick-slider {
    display: none !important;
}
@media (max-width: 768px) {
    body {
        padding-bottom: 86px;
        background:
            radial-gradient(circle at top right, rgba(139, 92, 246, 0.08), transparent 26%),
            #ffffff;
    }

    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 14px;
        padding-right: 14px;
    }

    .top-info-bar,
    .category-navigation {
        display: none !important;
    }

    .nav-main-wrapper {
        position: sticky;
        top: 0;
        z-index: 1200;
        padding: 10px 0;
        background: #0c0b14;
        box-shadow: 0 12px 26px rgba(7, 7, 12, 0.26);
    }

    .nav-main-wrapper .container {
        display: grid;
        grid-template-columns: 44px 1fr 44px;
        align-items: center;
        gap: 12px;
    }

    .mobile-menu-trigger {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 14px;
        background: #171624;
        color: #ffffff;
        border: 1px solid rgba(139, 92, 246, 0.28);
    }

    .site-logo {
        justify-self: center;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .site-logo img {
        max-width: 140px;
        height: 32px;
        object-fit: contain;
    }

    .nav-search-container,
    .compare-btn,
    .wishlist-btn,
    .user-btn {
        display: none !important;
    }

    .nav-action-icons {
        gap: 0;
        justify-self: end;
    }

    .icon-item {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        background: #171624;
        color: #ffffff;
        border: 1px solid rgba(139, 92, 246, 0.24);
        border-radius: 14px;
        box-shadow: none;
    }

    .cart-btn {
        padding: 0;
    }

    .cart-info {
        gap: 0;
    }

    .cart-price {
        display: none;
    }

    .icon-item .badge {
        background: linear-gradient(135deg, #8b5cf6, #ef4444);
    }

    .mobile-drawer-overlay {
        background: rgba(8, 8, 14, 0.56);
    }

    .mobile-drawer {
        width: min(88vw, 360px);
        background: #0d0c16;
        color: #ffffff;
        box-shadow: 22px 0 40px rgba(0, 0, 0, 0.36);
    }

    .mobile-drawer-head,
    .mobile-drawer-contact {
        border-color: rgba(255, 255, 255, 0.08);
    }

    .drawer-logo-mark {
        background: linear-gradient(135deg, #8b5cf6, #ef4444);
    }

    .drawer-brand strong,
    .mobile-drawer-links a,
    .mobile-drawer-contact a {
        color: #ffffff;
    }

    .drawer-brand span {
        color: rgba(255, 255, 255, 0.68);
    }

    .drawer-close {
        background: #1a1826;
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .mobile-drawer-links a {
        background: #151424;
        border: 1px solid rgba(139, 92, 246, 0.16);
    }

    .mobile-drawer-links a i,
    .mobile-drawer-contact a i {
        color: #9f7aea;
    }

    .drawer-search-box {
        border-color: #8b5cf6;
        background: #ffffff;
    }

    .search-btn {
        background: linear-gradient(135deg, #8b5cf6, #ef4444);
    }

    .hero-slider {
        width: auto;
        margin: 12px 14px 16px;
        height: clamp(420px, 72vh, 560px);
        min-height: 420px;
        border-radius: 24px;
        overflow: hidden;
        background: #060509;
    }

    .slider-wrapper,
    .slide,
    .slide img {
        height: 100%;
    }

    .slide {
        align-items: flex-end;
    }

    .slide::after {
        background: linear-gradient(180deg, rgba(6, 5, 9, 0.18) 0%, rgba(6, 5, 9, 0.74) 72%, rgba(6, 5, 9, 0.96) 100%);
    }

    .slide-content.container {
        width: 100%;
        max-width: 100%;
        padding: 0 18px 56px;
    }

    .slide-content .subtitle {
        font-size: 12px;
        letter-spacing: 2px;
        color: #c4b5fd;
        margin-bottom: 10px;
    }

    .slide-content h1 {
        font-size: clamp(30px, 8.8vw, 40px);
        line-height: 1.03;
        margin-bottom: 14px;
        max-width: 11ch;
    }

    .slide-content p {
        max-width: 100%;
        font-size: 13px;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.86);
        margin-bottom: 20px;
    }

    .btn-primary {
        padding: 13px 24px;
        border-radius: 14px;
        background: linear-gradient(135deg, #8b5cf6, #ef4444);
        box-shadow: 0 12px 26px rgba(139, 92, 246, 0.28);
    }

    .slider-arrow {
        display: none;
    }

    .slider-dots {
        bottom: 18px;
    }

    .dot.active {
        background: #8b5cf6;
    }

    .trust-bar {
        padding: 0 14px 24px !important;
        background: transparent !important;
        border: none !important;
    }

    .trust-bar .container {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        align-items: stretch;
        justify-content: initial;
    }

    .trust-item {
        min-width: 0;
        width: 100%;
        flex: none !important;
        justify-content: flex-start;
        gap: 12px;
        padding: 14px 12px;
        border: 1px solid rgba(139, 92, 246, 0.14) !important;
        border-radius: 18px;
        background: #ffffff;
        box-shadow: 0 12px 28px rgba(10, 10, 16, 0.06);
    }

    .trust-item:nth-child(even),
    .trust-item:nth-child(odd) {
        border-left: none !important;
        border-right: 1px solid rgba(139, 92, 246, 0.14) !important;
        border-bottom: 1px solid rgba(139, 92, 246, 0.14) !important;
    }

    .trust-item:last-child {
        grid-column: 1 / -1;
        max-width: calc(50% - 6px);
        justify-self: center;
    }

    .trust-icon {
        font-size: 24px;
        color: #8b5cf6;
    }

    .trust-text strong {
        font-size: 12px;
        line-height: 1.25;
    }

    .trust-text span {
        font-size: 11px;
    }

    .category-grid-section,
    .products-section,
    .discounts-section,
    .video-games-section,
    .reviews-section {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .main-grid,
    .sub-grid,
    .products-grid,
    .games-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
    }

    .category-row {
        gap: 12px;
        margin-bottom: 12px;
    }

    .cat-box,
    .product-card,
    .game-card {
        min-width: 0;
        border-radius: 18px;
    }

    .cat-box {
        min-height: 150px;
        height: auto;
        padding: 14px 10px;
        gap: 10px;
        border: 1px solid #ece7ff;
        box-shadow: none;
        transform: none !important;
    }

    .cat-box:hover,
    .cat-box:hover .cat-img {
        transform: none !important;
        box-shadow: none !important;
    }

    .cat-info h3 {
        font-size: 13px;
        line-height: 1.35;
    }

    .cat-img {
        width: 100%;
    }

    .cat-img img {
        max-height: 76px;
    }

    .product-layout-wrapper,
    .discount-wrapper,
    .games-layout,
    .reviews-wrapper,
    .newsletter-content,
    .footer-bottom .container {
        flex-direction: column;
        gap: 18px;
    }

    .deal-of-the-week,
    .product-tabs-container,
    .countdown-container,
    .discount-slider-container,
    .games-content,
    .overall-rating {
        width: 100%;
        max-width: 100%;
    }

    .tabs-header,
    .games-header {
        margin-bottom: 14px;
        overflow: hidden;
    }

    .games-header {
        align-items: flex-start;
    }

    .tab-list,
    .game-filters,
    .discount-items-wrapper,
    .reviews-carousel {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .tab-list::-webkit-scrollbar,
    .game-filters::-webkit-scrollbar,
    .discount-items-wrapper::-webkit-scrollbar,
    .reviews-carousel::-webkit-scrollbar {
        display: none;
    }

    .tab-item,
    .filter-btn {
        background: #ffffff;
        border: 1px solid rgba(139, 92, 246, 0.14);
        border-radius: 999px;
    }

    .tab-item.active,
    .filter-btn.active {
        background: rgba(139, 92, 246, 0.11);
        color: #6d28d9;
        border-color: rgba(139, 92, 246, 0.24);
    }

    .product-card,
    .game-card,
    .deal-of-the-week,
    .countdown-container,
    .overall-rating {
        box-shadow: none;
        border: 1px solid #efecf7;
        background: #ffffff;
    }

    .deal-of-the-week,
    .countdown-container,
    .overall-rating {
        padding: 16px;
    }

    .p-img,
    .g-img {
        margin: 0;
        border-radius: 18px 18px 0 0;
        padding: 14px;
        background: #faf9ff;
    }

    .p-img img,
    .g-img img {
        width: 100%;
        max-width: 100%;
        height: 120px;
        object-fit: contain;
    }

    .p-info,
    .g-info {
        padding: 12px;
    }

    .p-info h4,
    .g-info h4,
    .d-info h4 {
        height: auto;
        min-height: 36px;
        font-size: 13px;
        line-height: 1.4;
    }

    .discount-wrapper {
        padding: 16px 14px;
        border-radius: 22px;
    }

    .time-block span {
        color: #8b5cf6;
    }

    .discount-card {
        min-width: calc(50vw - 22px);
        max-width: calc(50vw - 22px);
        border-radius: 18px;
        box-shadow: none;
        border: 1px solid #efecf7;
    }

    .badge-pink,
    .discount-label,
    .save-badge {
        background: #ef4444;
    }

    .new-price,
    .d-price .new {
        color: #ef4444;
    }

    .games-banner {
        padding: 20px 16px;
        height: auto;
        border-radius: 22px;
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(239, 68, 68, 0.08));
    }

    .banner-text h1 {
        color: #8b5cf6;
        font-size: 26px;
    }

    .review-card {
        min-width: 88%;
        border: 1px solid #efecf7;
        box-shadow: none;
        background: #ffffff;
    }

    .newsletter-strip {
        background: linear-gradient(135deg, #8b5cf6, #ef4444);
    }

    .mobile-app-bar {
        display: flex !important;
        left: 10px;
        right: 10px;
        bottom: 10px;
        padding: 8px 6px;
        border-radius: 22px;
        background: #0d0c16;
        border: 1px solid rgba(139, 92, 246, 0.2);
        box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
    }

    .mobile-app-link {
        color: #b7aedc;
    }

    .mobile-app-link.active {
        color: #ffffff;
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.26), rgba(239, 68, 68, 0.16));
    }
}

@media (max-width: 480px) {
    .hero-slider {
        height: clamp(400px, 70vh, 500px);
        min-height: 400px;
    }

    .slide-content.container {
        padding: 0 16px 54px;
    }

    .trust-item:last-child {
        max-width: 100%;
    }

    .discount-card {
        min-width: 72vw;
        max-width: 72vw;
    }

    .review-card {
        min-width: 92%;
    }
}


/* Final mobile hero polish */
@media (max-width: 768px) {
    .hero-slider {
        margin: 10px 14px 18px;
        height: clamp(430px, 74vh, 560px);
        min-height: 430px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 22px 54px rgba(9, 8, 16, 0.22);
    }

    .slide {
        align-items: stretch;
    }

    .slide::after {
        background: linear-gradient(180deg, rgba(6, 5, 9, 0.12) 0%, rgba(6, 5, 9, 0.62) 58%, rgba(6, 5, 9, 0.94) 100%);
    }

    .slide-content.container {
        min-height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 34px 18px 84px;
        transform: translateY(-10px);
    }

    .slide-content h1 {
        max-width: 9ch;
        margin-bottom: 12px;
    }

    .slide-content p {
        max-width: 92%;
        margin-bottom: 18px;
    }

    .slider-dots {
        left: 50%;
        transform: translateX(-50%);
        bottom: 18px;
        width: max-content;
        padding: 8px 12px;
        border-radius: 999px;
        background: rgba(7, 6, 14, 0.45);
        backdrop-filter: blur(8px);
    }

    .mobile-app-bar {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 9px 7px;
        border-radius: 24px;
        background: rgba(13, 12, 22, 0.92);
        backdrop-filter: blur(14px);
        box-shadow: 0 20px 44px rgba(0, 0, 0, 0.32);
    }

    .mobile-app-link {
        border-radius: 16px;
    }

    .mobile-app-link.active {
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
    }
}

@media (max-width: 480px) {
    .hero-slider {
        height: clamp(420px, 73vh, 520px);
        min-height: 420px;
    }

    .slide-content.container {
        padding: 30px 16px 80px;
        transform: translateY(-12px);
    }

    .slide-content h1 {
        font-size: clamp(31px, 9.2vw, 40px);
        max-width: 8.6ch;
    }

    .slide-content p {
        max-width: 94%;
    }
}


/* --- PRODUCT DETAILS PAGE ADDON --- */
.site-logo a { display: inline-flex; align-items: center; text-decoration: none; }
.product-clickable { cursor: pointer; }
.view-details-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    color: var(--tecroot-green);
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.view-details-link:hover { color: #2f7f33; }
.deal-card .view-details-link { margin-top: 16px; }

.product-detail-page {
    background: linear-gradient(180deg, #f6f8f7 0%, #ffffff 38%, #ffffff 100%);
    padding-bottom: 40px;
}
.detail-breadcrumb-wrap {
    background: #ffffff;
    border-top: 1px solid #edf0ee;
    border-bottom: 1px solid #edf0ee;
}
.detail-breadcrumb {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #7b7f86;
}
.detail-breadcrumb a {
    color: #4b5563;
    text-decoration: none;
    font-weight: 700;
}
.detail-breadcrumb a:hover { color: var(--tecroot-green); }
.detail-breadcrumb strong {
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.product-detail-shell {
    display: grid;
    grid-template-columns: minmax(320px, 0.92fr) minmax(340px, 1.08fr);
    gap: 34px;
    padding-top: 38px;
    padding-bottom: 38px;
}
.detail-gallery-card,
.detail-info-card,
.detail-panel {
    background: #ffffff;
    border: 1px solid #eef0ef;
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.06);
}
.detail-gallery-card { padding: 22px; }
.detail-main-image-wrap {
    position: relative;
    min-height: 500px;
    border-radius: 20px;
    background: radial-gradient(circle at 50% 35%, #ffffff 0%, #f3f6f4 55%, #e9efeb 100%);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.detail-main-image-wrap::after {
    content: '';
    position: absolute;
    width: 60%;
    height: 16px;
    left: 20%;
    bottom: 58px;
    background: rgba(15, 23, 42, 0.12);
    filter: blur(18px);
    border-radius: 50%;
}
.detail-main-image-wrap img {
    width: min(72%, 420px);
    max-height: 420px;
    object-fit: contain;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 24px 28px rgba(15, 23, 42, 0.18));
    transition: transform .35s ease;
}
.detail-gallery-card:hover .detail-main-image-wrap img { transform: scale(1.03); }
.detail-sale-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 3;
    background: var(--tecroot-pink);
    color: #fff;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}
.detail-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 14px;
}
.detail-thumb {
    border: 1px solid #e7ebe8;
    background: #f8faf9;
    border-radius: 16px;
    height: 96px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: .25s ease;
    padding: 8px;
}
.detail-thumb img { max-height: 74px; object-fit: contain; }
.detail-thumb.active,
.detail-thumb:hover {
    border-color: var(--tecroot-green);
    box-shadow: 0 10px 24px rgba(76, 175, 80, 0.13);
    background: #ffffff;
}
.detail-info-card { padding: 34px; }
.detail-brand {
    display: inline-flex;
    color: var(--tecroot-green);
    background: rgba(76, 175, 80, .09);
    border: 1px solid rgba(76, 175, 80, .18);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}
.detail-info-card h1 {
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.05;
    letter-spacing: -1.8px;
    color: #111827;
    margin-bottom: 16px;
}
.detail-rating-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    color: #6b7280;
    font-size: 13px;
    margin-bottom: 22px;
}
.detail-stars { color: #fbbc05; display: flex; gap: 3px; }
.detail-dot { width: 4px; height: 4px; border-radius: 50%; background: #d1d5db; }
.detail-price-row {
    display: flex;
    align-items: end;
    gap: 14px;
    margin-bottom: 18px;
}
.detail-price-row strong {
    font-size: 34px;
    color: var(--tecroot-pink);
    font-weight: 900;
    letter-spacing: -1px;
}
.detail-price-row span {
    color: #9ca3af;
    text-decoration: line-through;
    font-weight: 700;
    margin-bottom: 5px;
}
.detail-short-desc {
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 680px;
}
.detail-status-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
.detail-status-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: 18px;
    background: #f8faf9;
    border: 1px solid #edf1ee;
}
.detail-status-item i { color: var(--tecroot-green); font-size: 20px; }
.detail-status-item small { display: block; color: #8b919b; font-size: 11px; margin-bottom: 3px; }
.detail-status-item strong { color: #111827; font-size: 13px; }
.detail-actions-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.qty-control {
    display: inline-flex;
    height: 52px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}
.qty-btn {
    width: 48px;
    border: none;
    background: #f8faf9;
    cursor: pointer;
    font-size: 18px;
    font-weight: 900;
    color: #111827;
}
.qty-btn:hover { color: var(--tecroot-green); }
#detail-qty {
    width: 52px;
    border: none;
    text-align: center;
    font-weight: 900;
    outline: none;
}
.detail-add-cart {
    height: 52px;
    border: none;
    border-radius: 999px;
    padding: 0 30px;
    background: linear-gradient(135deg, var(--tecroot-green), #2f7f33);
    color: #fff;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 16px 28px rgba(76, 175, 80, .22);
    transition: .25s ease;
}
.detail-add-cart:hover { transform: translateY(-2px); box-shadow: 0 20px 36px rgba(76, 175, 80, .28); }
.detail-add-cart:disabled { background: #9ca3af; box-shadow: none; cursor: not-allowed; transform: none; }
.detail-wishlist {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
    color: #111827;
    font-size: 18px;
}
.detail-wishlist:hover { color: var(--tecroot-pink); border-color: rgba(233, 30, 99, .35); }
.detail-meta {
    border-top: 1px solid #edf0ee;
    padding-top: 18px;
    display: grid;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
}
.detail-meta strong { color: #111827; }
.detail-extra-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 52px;
}
.detail-panel { padding: 28px; }
.detail-panel h2,
.related-products-section h2 {
    font-size: 24px;
    font-weight: 900;
    color: #111827;
    letter-spacing: -0.7px;
    margin-bottom: 18px;
}
.detail-panel ul {
    list-style: none;
    display: grid;
    gap: 12px;
}
.detail-panel li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #4b5563;
    line-height: 1.6;
}
.detail-panel li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--tecroot-green);
    margin-top: 2px;
}
.detail-spec-list { display: grid; gap: 10px; }
.detail-spec-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid #eef0ef;
    color: #4b5563;
}
.detail-spec-row:last-child { border-bottom: none; }
.detail-spec-row strong { color: #111827; }
.related-products-section { padding-bottom: 72px; }
.section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin-bottom: 22px;
}
.eyebrow {
    color: var(--tecroot-green);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.section-title-row a {
    color: var(--tecroot-green);
    text-decoration: none;
    font-weight: 900;
    font-size: 13px;
}
.related-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.related-card {
    background: #fff;
    border: 1px solid #eef0ef;
    border-radius: 18px;
    padding: 16px;
    text-decoration: none;
    color: #111827;
    transition: .25s ease;
}
.related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 42px rgba(15, 23, 42, .08);
    border-color: rgba(76, 175, 80, .35);
}
.related-card-img {
    height: 170px;
    border-radius: 15px;
    background: #f8faf9;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
}
.related-card-img img { max-height: 135px; object-fit: contain; }
.related-card span { color: #9ca3af; font-size: 11px; text-transform: uppercase; font-weight: 800; }
.related-card h3 { font-size: 14px; margin: 7px 0 10px; line-height: 1.4; min-height: 39px; }
.related-card strong { color: var(--tecroot-pink); font-size: 15px; }

@media (max-width: 1100px) {
    .product-detail-shell { grid-template-columns: 1fr; }
    .detail-main-image-wrap { min-height: 420px; }
    .related-products-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .product-detail-shell { padding-top: 18px; gap: 18px; }
    .detail-gallery-card, .detail-info-card, .detail-panel { border-radius: 18px; }
    .detail-info-card, .detail-panel { padding: 22px; }
    .detail-main-image-wrap { min-height: 330px; }
    .detail-main-image-wrap img { width: min(78%, 320px); }
    .detail-thumbs { grid-template-columns: repeat(4, minmax(68px, 1fr)); gap: 8px; }
    .detail-thumb { height: 76px; border-radius: 13px; }
    .detail-status-grid, .detail-extra-grid { grid-template-columns: 1fr; }
    .detail-add-cart { flex: 1; justify-content: center; padding: 0 18px; }
    .detail-price-row strong { font-size: 28px; }
    .section-title-row { align-items: flex-start; flex-direction: column; }
    .related-products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .detail-breadcrumb { font-size: 12px; overflow: hidden; }
    .detail-info-card h1 { font-size: 28px; letter-spacing: -1px; }
    .detail-actions-row { align-items: stretch; }
    .qty-control { width: 100%; justify-content: space-between; }
    #detail-qty { flex: 1; }
    .detail-wishlist { width: 52px; }
    .related-products-grid { grid-template-columns: 1fr; }
    .related-card-img { height: 150px; }
}

/* --- Admin to storefront sync styles --- */
.frontend-admin-sync-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ecfdf3;
    border: 1px solid rgba(76, 175, 80, 0.22);
    color: #256029;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    margin: 0 0 18px;
}
.product-card .view-details-link,
.game-card .view-details-link,
.deal-card .view-details-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: var(--tecroot-green);
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
}
.product-card .view-details-link:hover,
.game-card .view-details-link:hover,
.deal-card .view-details-link:hover { text-decoration: underline; }
.products-grid .product-card .p-img {
    min-height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.products-grid .product-card .p-img img {
    max-width: 100%;
    max-height: 150px;
    object-fit: contain;
}
@media (max-width: 768px) {
    .frontend-admin-sync-note {
        border-radius: 14px;
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* --- Variable product selector styles --- */
.detail-variation-options {
    display: grid;
    gap: 16px;
    margin: 4px 0 24px;
    padding: 18px;
    border: 1px solid #edf1ee;
    background: #fbfcfb;
    border-radius: 22px;
}
.detail-option-group { display: grid; gap: 10px; }
.detail-option-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #111827;
}
.detail-option-title span { color: var(--tecroot-green); font-weight: 900; }
.detail-option-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.detail-option-btn {
    min-width: 74px;
    height: 46px;
    padding: 0 16px;
    border-radius: 10px;
    border: 2px solid #d6dbe0;
    background: #ffffff;
    color: #111827;
    font-weight: 800;
    cursor: pointer;
    transition: .22s ease;
}
.detail-option-btn:hover,
.detail-option-btn.active {
    border-color: #111827;
    box-shadow: 0 10px 20px rgba(17, 24, 39, .08);
    transform: translateY(-1px);
}
.detail-color-option {
    min-width: auto;
    width: 68px;
    height: 64px;
    padding: 6px;
    flex-direction: column;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 4px;
}
.detail-color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 2px;
    border: 1px solid rgba(17, 24, 39, .18);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}
.detail-color-option span:last-child {
    font-size: 10px;
    line-height: 1;
}
.detail-selected-variation {
    font-size: 13px;
    color: #4b5563;
    padding-top: 4px;
}
.detail-selected-variation strong { color: #111827; }
@media (max-width: 520px) {
    .detail-variation-options { padding: 14px; border-radius: 18px; }
    .detail-option-btn { flex: 1; min-width: 78px; }
    .detail-color-option { flex: 0 0 62px; }
}
.choose-options-mini {
    display: grid;
    place-items: center;
    text-decoration: none;
}
.detail-variation-options:empty { display: none; }

/* --- MOBILE HOME & APP THEME FIXES 2026-04-24 --- */
:root {
    --app-primary: #8b5cf6;
    --app-primary-dark: #6d28d9;
    --app-danger: #ef4444;
    --app-ink: #111827;
    --app-soft: #faf9ff;
    --app-border: #eee9ff;
    --tecroot-green: var(--app-primary);
    --tecroot-pink: var(--app-danger);
}

/* Use the same soft mobile-app theme on desktop too */
.btn-primary,
.search-btn,
.newsletter-strip,
.drawer-logo-mark,
.detail-add-cart {
    background: linear-gradient(135deg, var(--app-primary), var(--app-danger)) !important;
}
.tab-item.active,
.filter-btn.active,
.view-details-link,
.product-card .view-details-link,
.game-card .view-details-link,
.deal-card .view-details-link,
.detail-brand,
.eyebrow,
.section-title-row a {
    color: var(--app-primary-dark) !important;
}
.tab-item.active::after,
.bar-fill,
.dot.active {
    background: var(--app-primary) !important;
}

.products-section.container,
.category-grid-section.container,
.video-games-section.container,
.reviews-section.container {
    overflow: hidden;
}
.product-layout-wrapper {
    min-width: 0;
}
.deal-of-the-week,
.product-tabs-container,
.products-grid,
.product-card,
.deal-card,
.deal-img,
.p-img {
    min-width: 0;
}

/* Deal card image wrap fix: keep every product image inside the box */
.deal-of-the-week {
    max-width: 100% !important;
    overflow: hidden;
    border-color: var(--app-border) !important;
}
.deal-card {
    overflow: hidden;
    border-color: rgba(139, 92, 246, 0.20) !important;
    background: #fff;
}
.deal-img {
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 0.78;
    min-height: 190px;
    overflow: hidden;
    border-radius: 18px;
    background: radial-gradient(circle at 72% 18%, rgba(139, 92, 246, .12), transparent 34%), #faf9ff;
    margin-bottom: 16px;
}
.deal-img img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: none;
    object-fit: contain;
    object-position: center;
    border-radius: 14px;
    margin: 0 auto;
}

/* Home product card image fit/center fix */
.products-grid {
    width: 100%;
    align-items: stretch;
}
.product-card {
    overflow: hidden;
    border-color: var(--app-border) !important;
    background: #ffffff;
}
.product-card .p-img {
    display: grid !important;
    place-items: center !important;
    width: 100%;
    aspect-ratio: 1 / 0.92;
    min-height: 152px !important;
    overflow: hidden;
    background: radial-gradient(circle at 72% 14%, rgba(139, 92, 246, .10), transparent 34%), #faf9ff !important;
}
.product-card .p-img img {
    display: block;
    width: 88% !important;
    height: 88% !important;
    max-width: 88% !important;
    max-height: 88% !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: auto !important;
}
.product-card .p-info {
    display: grid;
    align-content: start;
    gap: 4px;
}
.product-card .p-info .price {
    color: var(--app-ink);
    line-height: 1.35;
}
.choose-options-mini,
.add-to-cart {
    background: #ffffff !important;
    color: var(--app-primary-dark) !important;
    border-color: rgba(139, 92, 246, .20) !important;
}
.product-card:hover .add-to-cart,
.product-card:hover .choose-options-mini {
    background: linear-gradient(135deg, var(--app-primary), var(--app-danger)) !important;
    color: #fff !important;
    border-color: transparent !important;
}

@media (min-width: 769px) {
    body {
        background:
            radial-gradient(circle at top right, rgba(139, 92, 246, .055), transparent 28%),
            #ffffff;
    }
    .product-card,
    .deal-of-the-week,
    .cat-box,
    .game-card,
    .review-card,
    .overall-rating {
        border-color: var(--app-border) !important;
    }
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
    .deal-img {
        min-height: 250px;
    }
}

@media (max-width: 768px) {
    .products-section.container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .product-layout-wrapper {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
        width: 100%;
        max-width: 100%;
    }
    .deal-of-the-week {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 16px !important;
        border-radius: 24px !important;
        box-shadow: 0 14px 34px rgba(17, 24, 39, .055) !important;
    }
    .deal-header {
        margin-bottom: 14px !important;
    }
    .deal-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px !important;
        border-radius: 20px !important;
    }
    .deal-img {
        min-height: 206px !important;
        aspect-ratio: 1 / .72 !important;
        border-radius: 18px !important;
    }
    .deal-img img {
        width: 94% !important;
        height: 94% !important;
    }
    .deal-details h3 {
        font-size: 15px !important;
        line-height: 1.35 !important;
    }
    .price-row {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 8px;
    }
    .old-price {
        margin-left: 0 !important;
    }
    .tab-list {
        gap: 10px !important;
        padding: 0 2px 3px !important;
    }
    .tab-item {
        padding: 10px 14px !important;
        box-shadow: 0 8px 18px rgba(17, 24, 39, .035);
    }
    .products-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .product-card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 18px !important;
        box-shadow: 0 10px 26px rgba(17, 24, 39, .045) !important;
    }
    .product-card .p-img {
        margin: 0 !important;
        min-height: 136px !important;
        aspect-ratio: 1 / .88 !important;
        padding: 10px !important;
        border-radius: 18px 18px 0 0 !important;
    }
    .product-card .p-img img {
        width: 92% !important;
        height: 92% !important;
        max-width: 92% !important;
        max-height: 92% !important;
    }
    .product-card .p-info {
        padding: 12px !important;
    }
    .p-info h4 {
        min-height: 38px !important;
        font-size: 13px !important;
        line-height: 1.38 !important;
    }
    .p-info .price {
        font-size: 13px !important;
        font-weight: 900 !important;
    }
    .product-card .view-details-link,
    .deal-card .view-details-link {
        margin-top: 2px !important;
        font-size: 11px !important;
    }
    .save-badge,
    .discount-label {
        background: var(--app-danger) !important;
    }
    .stock-bar {
        background: #ede9fe !important;
    }
    .bar-fill {
        background: linear-gradient(90deg, var(--app-primary), var(--app-danger)) !important;
    }
}

@media (max-width: 420px) {
    .deal-img {
        min-height: 185px !important;
    }
    .product-card .p-img {
        min-height: 126px !important;
    }
    .product-card .p-info {
        padding: 10px 11px 12px !important;
    }
    .product-card .p-info .brand {
        font-size: 10px !important;
    }
}

@media (max-width: 350px) {
    .products-grid {
        grid-template-columns: 1fr !important;
    }
    .product-card .p-img {
        min-height: 170px !important;
    }
}

/* --- FINAL HOME MOBILE V2: image wrap + app-card polish --- */
@media (max-width: 768px) {
    .products-section,
    .product-layout-wrapper,
    .deal-of-the-week,
    .deal-card,
    .product-tabs-container,
    .products-grid,
    .product-card,
    .p-img,
    .deal-img {
        overflow: hidden !important;
        max-width: 100% !important;
    }

    .products-section.container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .deal-of-the-week {
        border-radius: 24px !important;
        padding: 16px !important;
        background: #ffffff !important;
        border: 1px solid rgba(139, 92, 246, .18) !important;
    }

    .deal-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 14px !important;
        border-radius: 22px !important;
    }

    .deal-img {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 1 / .82 !important;
        padding: 14px !important;
        display: grid !important;
        place-items: center !important;
        background: radial-gradient(circle at 82% 12%, rgba(139,92,246,.16), transparent 32%), #faf9ff !important;
    }

    .deal-img img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 220px !important;
        object-fit: contain !important;
        object-position: center !important;
        margin: auto !important;
        transform: none !important;
    }

    .deal-details {
        min-width: 0 !important;
    }

    .deal-details h3 {
        overflow-wrap: anywhere;
    }

    .product-tabs-container {
        border-radius: 24px !important;
    }

    .tabs-header {
        margin-bottom: 12px !important;
        overflow: visible !important;
    }

    .tab-list {
        display: flex !important;
        gap: 10px !important;
        overflow-x: auto !important;
        padding: 0 2px 4px !important;
        scroll-snap-type: x mandatory;
    }

    .tab-item {
        flex: 0 0 auto !important;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        justify-content: center !important;
    }

    .products-grid .product-card:only-child {
        grid-column: 1 / -1 !important;
    }

    .product-card {
        padding: 0 !important;
        min-width: 0 !important;
        border-radius: 20px !important;
        border: 1px solid rgba(139, 92, 246, .16) !important;
        background: #ffffff !important;
    }

    .product-card .p-img {
        height: 158px !important;
        min-height: 158px !important;
        aspect-ratio: auto !important;
        padding: 12px !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 20px 20px 0 0 !important;
        background: radial-gradient(circle at 78% 12%, rgba(139,92,246,.13), transparent 34%), #fbfaff !important;
    }

    .product-card .p-img img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 138px !important;
        object-fit: contain !important;
        object-position: center !important;
        margin: auto !important;
    }

    .products-grid .product-card:only-child .p-img {
        height: 204px !important;
        min-height: 204px !important;
    }

    .products-grid .product-card:only-child .p-img img {
        max-height: 180px !important;
    }

    .product-card .p-info {
        padding: 12px !important;
    }

    .product-card .p-info .brand {
        font-size: 10px !important;
        letter-spacing: .25px;
    }

    .product-card .p-info h4 {
        min-height: 38px !important;
        max-height: 42px !important;
        overflow: hidden !important;
    }

    .frontend-admin-sync-note {
        margin-bottom: 12px !important;
        border-radius: 16px !important;
        font-size: 11px !important;
        line-height: 1.45 !important;
    }
}

@media (max-width: 420px) {
    .product-card .p-img {
        height: 146px !important;
        min-height: 146px !important;
    }
    .product-card .p-img img {
        max-height: 128px !important;
    }
    .deal-img img {
        max-height: 195px !important;
    }
}


/* --- CATEGORY EXTRA CARD FIX: Fast Chargers card + balanced mobile rows --- */
.main-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.fast-chargers-card .cat-img img {
    max-height: 118px;
    width: auto;
    object-fit: contain;
}
.fast-chargers-card .cat-info h3 {
    white-space: nowrap;
}
@media (max-width: 992px) {
    .main-grid,
    .sub-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 768px) {
    .category-grid-section.container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .fast-chargers-card .cat-img img {
        max-height: 82px !important;
        transform: scale(1.05);
    }
    .fast-chargers-card .cat-info h3 {
        font-size: 12.5px !important;
        letter-spacing: -0.25px;
    }
}
@media (max-width: 350px) {
    .fast-chargers-card .cat-info h3 {
        white-space: normal;
    }
}

/* --- PRODUCT SECTION GRID FINAL: hide admin note + 5x2 product rows + 4x2 video games --- */
.frontend-admin-sync-note {
    display: none !important;
}

@media (min-width: 1200px) {
    .products-section .product-layout-wrapper {
        grid-template-columns: 320px minmax(0, 1fr) !important;
        gap: 30px !important;
        align-items: start !important;
    }

    .products-section .products-grid {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 18px !important;
        align-items: stretch !important;
    }

    .products-section .product-card {
        min-height: 318px;
    }

    .products-section .product-card .p-img {
        height: 178px !important;
        min-height: 178px !important;
    }

    .video-games-section .games-layout {
        display: grid !important;
        grid-template-columns: 300px minmax(0, 1fr) !important;
        gap: 30px !important;
    }

    .video-games-section .games-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }

    .video-games-section .game-card {
        min-width: 0 !important;
    }

    .video-games-section .g-img {
        height: 200px !important;
        display: grid !important;
        place-items: center !important;
        background: radial-gradient(circle at 78% 14%, rgba(139, 92, 246, .10), transparent 34%), #fbfaff !important;
    }

    .video-games-section .g-img img {
        width: 100% !important;
        height: 100% !important;
        max-height: 180px !important;
        object-fit: contain !important;
        object-position: center !important;
    }
}

@media (min-width: 769px) and (max-width: 1199px) {
    .products-section .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .video-games-section .games-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .products-section .products-grid,
    .video-games-section .games-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .video-games-section .games-banner {
        display: none !important;
    }

    .video-games-section.container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .video-games-section .games-header {
        display: grid !important;
        gap: 12px !important;
        align-items: start !important;
    }

    .video-games-section .game-filters {
        overflow-x: auto !important;
        white-space: nowrap !important;
        padding-bottom: 5px !important;
    }

    .video-games-section .game-card {
        padding: 0 !important;
        border: 1px solid rgba(139, 92, 246, .16) !important;
        border-radius: 20px !important;
        background: #ffffff !important;
        overflow: hidden !important;
    }

    .video-games-section .g-img {
        height: 158px !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 20px 20px 0 0 !important;
        background: radial-gradient(circle at 78% 12%, rgba(139,92,246,.13), transparent 34%), #fbfaff !important;
    }

    .video-games-section .g-img img {
        width: 100% !important;
        height: 100% !important;
        max-height: 138px !important;
        object-fit: contain !important;
        object-position: center !important;
        box-shadow: none !important;
    }

    .video-games-section .g-info {
        padding: 12px !important;
    }

    .video-games-section .g-info h4 {
        min-height: 38px !important;
        max-height: 42px !important;
        overflow: hidden !important;
        font-size: 13px !important;
        line-height: 1.38 !important;
    }

    .video-games-section .g-price {
        font-size: 13px !important;
    }
}

/* --- TECROOT CART DRAWER + CHECKOUT FINAL ADDON --- */
body.cart-drawer-open { overflow: hidden; }
.tecroot-floating-cart {
    position: fixed;
    right: 18px;
    bottom: 96px;
    z-index: 1320;
    border: 0;
    min-width: 132px;
    padding: 10px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #7c3cff, #ff3b5f);
    color: #fff;
    box-shadow: 0 18px 45px rgba(124,60,255,.28);
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease;
}
.tecroot-floating-cart:hover { transform: translateY(-3px); box-shadow: 0 22px 50px rgba(124,60,255,.36); }
.tecroot-floating-cart-icon { position: relative; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.16); display: grid; place-items: center; flex: 0 0 auto; }
.tecroot-floating-cart-count { position: absolute; top: -6px; right: -7px; min-width: 20px; height: 20px; border-radius: 999px; background: #111827; color: #fff; font-size: 11px; display: grid; place-items: center; border: 2px solid #fff; }
.tecroot-floating-cart-text { font-size: 12px; font-weight: 800; line-height: 1; }
.tecroot-floating-cart-total { font-size: 12px; white-space: nowrap; }
.tecroot-cart-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 14, 28, .42);
    opacity: 0;
    pointer-events: none;
    z-index: 1450;
    transition: .25s ease;
}
.tecroot-cart-backdrop.active { opacity: 1; pointer-events: auto; }
.tecroot-cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(92vw, 430px);
    height: 100vh;
    background: #fff;
    z-index: 1460;
    transform: translateX(104%);
    transition: transform .32s cubic-bezier(.2,.8,.2,1);
    box-shadow: -24px 0 60px rgba(15,23,42,.18);
    display: flex;
    flex-direction: column;
}
.tecroot-cart-drawer.open { transform: translateX(0); }
.tecroot-cart-head { padding: 22px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #efeafe; background: linear-gradient(180deg, #fff, #fbf8ff); }
.tecroot-cart-head span { color: #7c3cff; text-transform: uppercase; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.tecroot-cart-head h3 { margin: 3px 0 0; font-size: 22px; color: #111827; }
.tecroot-cart-close { width: 42px; height: 42px; border: 0; border-radius: 14px; background: #f4f0ff; color: #7c3cff; cursor: pointer; }
.tecroot-cart-items { padding: 18px; overflow-y: auto; display: grid; gap: 14px; flex: 1; }
.tecroot-cart-empty { text-align: center; padding: 44px 24px; color: #6b7280; }
.tecroot-cart-empty i { width: 68px; height: 68px; display: grid; place-items: center; margin: 0 auto 14px; border-radius: 24px; background: #f5f1ff; color: #7c3cff; font-size: 26px; }
.tecroot-cart-empty h4 { color: #111827; margin: 0 0 6px; }
.tecroot-cart-line { display: grid; grid-template-columns: 86px 1fr; gap: 13px; padding: 12px; border: 1px solid #eee7ff; border-radius: 20px; background: #fff; box-shadow: 0 12px 28px rgba(124,60,255,.05); }
.tecroot-cart-line-img { height: 86px; background: linear-gradient(135deg, #faf8ff, #f3f7ff); border-radius: 16px; display: grid; place-items: center; overflow: hidden; }
.tecroot-cart-line-img img { max-width: 80%; max-height: 80%; object-fit: contain; }
.tecroot-cart-line-info h4 { font-size: 14px; line-height: 1.25; margin: 0 0 4px; color: #111827; }
.tecroot-cart-line-info p { font-size: 11px; color: #7c3cff; margin: 0 0 6px; font-weight: 700; }
.tecroot-cart-line-info strong { font-size: 14px; color: #ff3b5f; }
.tecroot-cart-qty-row { display: flex; align-items: center; gap: 7px; margin-top: 9px; }
.tecroot-cart-qty-row button { width: 28px; height: 28px; border-radius: 10px; border: 1px solid #e7ddff; background: #fff; color: #7c3cff; font-weight: 900; cursor: pointer; }
.tecroot-cart-qty-row span { min-width: 20px; text-align: center; font-weight: 800; }
.tecroot-cart-remove { margin-left: auto; color: #ff3b5f !important; }
.tecroot-cart-footer { padding: 18px 22px 22px; border-top: 1px solid #efeafe; background: #fff; }
.tecroot-mini-total-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; color: #6b7280; font-size: 14px; }
.tecroot-mini-total-row strong { color: #111827; }
.tecroot-mini-total-row.grand { padding-top: 13px; margin-top: 10px; border-top: 1px dashed #e5e7eb; font-size: 17px; color: #111827; }
.tecroot-mini-total-row.grand strong { color: #7c3cff; font-size: 20px; }
.tecroot-cart-checkout { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none; height: 52px; border-radius: 17px; background: linear-gradient(135deg, #7c3cff, #ff3b5f); color: #fff; font-weight: 900; box-shadow: 0 16px 34px rgba(124,60,255,.22); }
.tecroot-cart-checkout.disabled { opacity: .45; pointer-events: none; }
.tecroot-cart-continue { display: block; margin-top: 13px; text-align: center; color: #6b7280; font-weight: 800; text-decoration: none; font-size: 13px; }
.checkout-page { background: #f7f5fb; padding-bottom: 80px; }
.checkout-hero { padding: 54px 15px 26px; display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; }
.checkout-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #7c3cff; background: #f1ebff; border: 1px solid #e4d8ff; border-radius: 999px; padding: 8px 13px; font-weight: 900; font-size: 12px; margin-bottom: 15px; }
.checkout-hero h1 { font-size: clamp(32px, 5vw, 58px); margin: 0; letter-spacing: -1.6px; color: #111827; }
.checkout-hero p { max-width: 650px; color: #6b7280; line-height: 1.7; margin: 12px 0 0; }
.checkout-steps { display: flex; gap: 8px; background: #fff; border: 1px solid #eee7ff; border-radius: 999px; padding: 8px; box-shadow: 0 12px 30px rgba(124,60,255,.06); }
.checkout-steps span { padding: 10px 14px; border-radius: 999px; font-size: 12px; font-weight: 900; color: #6b7280; white-space: nowrap; }
.checkout-steps .done, .checkout-steps .active { background: linear-gradient(135deg, #7c3cff, #ff3b5f); color: #fff; }
.checkout-shell { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.checkout-form { display: grid; gap: 18px; }
.checkout-card, .checkout-summary-card { background: rgba(255,255,255,.92); border: 1px solid #eee7ff; border-radius: 26px; box-shadow: 0 18px 45px rgba(15,23,42,.05); }
.checkout-card { padding: 24px; }
.checkout-section-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.checkout-section-head > span { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 14px; display: grid; place-items: center; background: #111827; color: #fff; font-size: 12px; font-weight: 900; }
.checkout-section-head h2 { margin: 0; font-size: 20px; color: #111827; }
.checkout-section-head p { margin: 4px 0 0; color: #6b7280; font-size: 13px; }
.checkout-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.checkout-form-grid label { display: grid; gap: 8px; font-size: 12px; font-weight: 800; color: #374151; }
.checkout-form-grid .wide { grid-column: 1 / -1; }
.checkout-form-grid input, .checkout-form-grid textarea, .coupon-box input { width: 100%; border: 1px solid #e2def0; background: #fff; border-radius: 13px; min-height: 48px; padding: 0 14px; outline: none; transition: .2s; }
.checkout-form-grid textarea { min-height: 96px; padding: 13px 14px; resize: vertical; }
.checkout-form-grid input:focus, .checkout-form-grid textarea:focus, .coupon-box input:focus { border-color: #7c3cff; box-shadow: 0 0 0 4px rgba(124,60,255,.1); }
.shipping-methods, .payment-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ship-option, .payment-option { position: relative; display: flex; align-items: center; gap: 13px; border: 1px solid #e5defc; border-radius: 18px; padding: 15px; cursor: pointer; background: #fff; transition: .2s; }
.ship-option input, .payment-option input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ship-option:has(input:checked), .payment-option:has(input:checked) { border-color: #7c3cff; box-shadow: 0 10px 28px rgba(124,60,255,.12); background: linear-gradient(180deg, #fff, #fbf8ff); }
.ship-option i, .payment-icon { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 15px; display: grid; place-items: center; background: #f4f0ff; color: #7c3cff; font-size: 17px; }
.cod-icon { background: #e8fff2; color: #12a150; }
.ship-option span, .payment-option > span:nth-of-type(2) { display: grid; gap: 3px; flex: 1; }
.ship-option strong, .payment-option strong { color: #111827; font-size: 14px; }
.ship-option small, .payment-option small { color: #6b7280; font-size: 11px; line-height: 1.4; }
.ship-option b { color: #111827; white-space: nowrap; }
.mini-card-logos { display: flex; gap: 7px; align-items: center; }
.mini-card-logos img { width: 30px; height: 20px; object-fit: contain; background: #fff; border-radius: 5px; border: 1px solid #eee; padding: 2px; }
.payhere-note { display: flex; gap: 9px; margin-top: 14px; padding: 13px 14px; background: #f8fafc; border: 1px dashed #d9d3ec; border-radius: 16px; color: #6b7280; font-size: 12px; line-height: 1.5; }
.checkout-place-order { width: 100%; border: 0; height: 56px; border-radius: 18px; background: linear-gradient(135deg, #7c3cff, #ff3b5f); color: #fff; font-size: 15px; font-weight: 900; cursor: pointer; box-shadow: 0 18px 38px rgba(124,60,255,.22); display: flex; align-items: center; justify-content: center; gap: 10px; }
.checkout-place-order:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.checkout-summary-card { position: sticky; top: 96px; padding: 22px; }
.summary-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.summary-top span { color: #7c3cff; font-size: 12px; text-transform: uppercase; font-weight: 900; letter-spacing: .08em; }
.summary-top h2 { margin: 4px 0 0; font-size: 24px; }
.summary-top a { color: #7c3cff; font-weight: 900; text-decoration: none; }
.checkout-summary-items { display: grid; gap: 12px; max-height: 390px; overflow-y: auto; padding-right: 4px; }
.checkout-line { display: grid; grid-template-columns: 62px 1fr auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid #f0eafd; border-radius: 18px; background: #fff; }
.checkout-line img { width: 62px; height: 62px; object-fit: contain; border-radius: 14px; background: #f7f4ff; }
.checkout-line h4 { margin: 0; font-size: 13px; line-height: 1.25; }
.checkout-line p { margin: 4px 0; color: #7c3cff; font-size: 11px; font-weight: 800; }
.checkout-line span { color: #6b7280; font-size: 11px; }
.checkout-line strong { font-size: 13px; color: #111827; white-space: nowrap; }
.coupon-box { margin: 17px 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; border: 1px dashed #ded5fb; border-radius: 18px; padding: 8px 9px; background: #fbfaff; }
.coupon-box i { color: #7c3cff; }
.coupon-box input { border: 0; background: transparent; min-height: 38px; padding: 0; }
.coupon-box button { border: 0; background: #111827; color: #fff; border-radius: 12px; height: 38px; padding: 0 16px; font-weight: 900; cursor: pointer; }
.checkout-totals { display: grid; gap: 10px; padding-top: 15px; border-top: 1px solid #eee7ff; }
.checkout-totals div { display: flex; justify-content: space-between; color: #6b7280; font-size: 14px; }
.checkout-totals strong { color: #111827; }
.checkout-totals .grand { margin-top: 8px; padding-top: 15px; border-top: 1px dashed #d8d1ec; color: #111827; font-size: 18px; font-weight: 900; }
.checkout-totals .grand strong { color: #7c3cff; font-size: 24px; }
.checkout-support-box { margin-top: 17px; display: flex; gap: 12px; align-items: center; padding: 14px; background: #f8fafc; border-radius: 18px; color: #6b7280; }
.checkout-support-box i { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: #e8fff2; color: #12a150; }
.checkout-support-box strong, .checkout-support-box span { display: block; }
.checkout-support-box strong { color: #111827; }
.checkout-empty { text-align: center; padding: 34px 12px; color: #6b7280; }
.checkout-empty i { font-size: 28px; color: #7c3cff; }
.checkout-empty h3 { color: #111827; margin: 10px 0 5px; }
.checkout-empty a { display: inline-flex; margin-top: 10px; color: #fff; background: #7c3cff; padding: 10px 14px; border-radius: 13px; text-decoration: none; font-weight: 900; }
@media (max-width: 992px) {
    .tecroot-floating-cart { bottom: 86px; right: 12px; min-width: auto; padding: 9px 10px; }
    .tecroot-floating-cart-text, .tecroot-floating-cart-total { display: none; }
    .checkout-hero { align-items: flex-start; flex-direction: column; padding-top: 34px; }
    .checkout-steps { width: 100%; overflow-x: auto; border-radius: 18px; }
    .checkout-shell { grid-template-columns: 1fr; }
    .checkout-summary-card { position: relative; top: auto; order: -1; }
    .shipping-methods, .payment-methods { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .checkout-page { padding-bottom: 110px; }
    .checkout-card, .checkout-summary-card { border-radius: 22px; padding: 17px; }
    .checkout-form-grid { grid-template-columns: 1fr; }
    .checkout-hero h1 { font-size: 34px; }
    .checkout-hero p { font-size: 14px; }
    .checkout-steps span { padding: 9px 11px; }
    .checkout-line { grid-template-columns: 56px 1fr; }
    .checkout-line strong { grid-column: 2; }
    .payment-option { align-items: flex-start; }
    .mini-card-logos { margin-left: auto; }
    .tecroot-cart-drawer { width: 94vw; }
}
.detail-buy-now {
    border: none;
    border-radius: 16px;
    padding: 0 22px;
    min-height: 54px;
    background: #111827;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: .25s ease;
}
.detail-buy-now:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(17,24,39,.18); }
@media (max-width: 620px) { .detail-buy-now { width: 100%; } }

/* --- ORDER SUCCESS ANIMATION PAGE --- */
.order-success-page {
    min-height: calc(100vh - 150px);
    background:
        radial-gradient(circle at 8% 6%, rgba(124, 60, 255, .12), transparent 28%),
        radial-gradient(circle at 88% 15%, rgba(255, 59, 95, .12), transparent 26%),
        linear-gradient(180deg, #fbf9ff 0%, #ffffff 100%);
    padding: 54px 0 74px;
}
.success-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: 28px;
    align-items: stretch;
}
.success-card,
.success-summary-panel {
    position: relative;
    background: rgba(255,255,255,.94);
    border: 1px solid #eee7ff;
    border-radius: 32px;
    box-shadow: 0 28px 80px rgba(20, 18, 34, .08);
    overflow: hidden;
}
.success-card {
    min-height: 580px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 46px 38px;
}
.success-bg-orb {
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    filter: blur(2px);
    opacity: .62;
    pointer-events: none;
}
.success-bg-orb.one {
    left: -96px;
    top: -90px;
    background: radial-gradient(circle, rgba(124,60,255,.16), rgba(124,60,255,0));
}
.success-bg-orb.two {
    right: -100px;
    bottom: -100px;
    background: radial-gradient(circle, rgba(255,59,95,.15), rgba(255,59,95,0));
}
.success-confetti span {
    position: absolute;
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 4px;
    background: #7c3cff;
    animation: successConfetti 2.6s ease-in-out infinite;
}
.success-confetti span:nth-child(1) { left: 20%; top: 20%; background: #ff3b5f; animation-delay: .05s; }
.success-confetti span:nth-child(2) { right: 23%; top: 18%; background: #ffd166; animation-delay: .25s; transform: rotate(45deg); }
.success-confetti span:nth-child(3) { left: 15%; bottom: 27%; background: #12a150; animation-delay: .45s; }
.success-confetti span:nth-child(4) { right: 16%; bottom: 29%; background: #7c3cff; animation-delay: .7s; transform: rotate(45deg); }
.success-confetti span:nth-child(5) { left: 32%; top: 12%; width: 8px; height: 8px; background: #111827; animation-delay: .9s; }
.success-confetti span:nth-child(6) { right: 34%; bottom: 14%; width: 8px; height: 8px; background: #ff3b5f; animation-delay: 1.1s; }
@keyframes successConfetti {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(.9); opacity: .45; }
    50% { transform: translateY(-18px) rotate(28deg) scale(1.16); opacity: 1; }
}
.success-icon-wrap {
    position: relative;
    width: 168px;
    height: 168px;
    display: grid;
    place-items: center;
    margin-bottom: 24px;
}
.success-icon-wrap::before,
.success-icon-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(124,60,255,.13);
    animation: successPulse 2.1s ease-out infinite;
}
.success-icon-wrap::after { animation-delay: .7s; }
@keyframes successPulse {
    0% { transform: scale(.68); opacity: .72; }
    100% { transform: scale(1.34); opacity: 0; }
}
.success-badge {
    position: relative;
    z-index: 1;
    width: 140px;
    height: 140px;
    border-radius: 42px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #7c3cff, #ff3b5f);
    box-shadow: 0 24px 54px rgba(124,60,255,.28);
    animation: successPop .72s cubic-bezier(.2, .9, .25, 1.25) both;
}
.success-badge::before {
    content: '';
    position: absolute;
    inset: 14px;
    border-radius: 32px;
    background: rgba(255,255,255,.14);
}
.success-check {
    width: 92px;
    height: 92px;
    position: relative;
    z-index: 2;
}
.success-ring,
.success-tick {
    fill: none;
    stroke: #fff;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.success-ring {
    stroke-dasharray: 205;
    stroke-dashoffset: 205;
    animation: drawSuccessRing .85s .28s ease forwards;
    opacity: .98;
}
.success-tick {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: drawSuccessTick .58s .88s ease forwards;
}
@keyframes successPop {
    0% { transform: scale(.36) rotate(-14deg); opacity: 0; }
    74% { transform: scale(1.05) rotate(3deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); }
}
@keyframes drawSuccessRing { to { stroke-dashoffset: 0; } }
@keyframes drawSuccessTick { to { stroke-dashoffset: 0; } }
.success-mini-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 16px;
    border-radius: 999px;
    background: #f2edff;
    color: #7c3cff;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.success-card h1 {
    margin: 0;
    font-size: clamp(34px, 5vw, 64px);
    line-height: .98;
    letter-spacing: -2.5px;
    color: #111827;
}
.success-card p {
    max-width: 620px;
    margin: 18px auto 0;
    color: #6b7280;
    font-size: 16px;
    line-height: 1.7;
}
.success-order-number {
    margin: 28px 0 0;
    display: inline-grid;
    gap: 5px;
    min-width: min(340px, 100%);
    padding: 15px 22px;
    border-radius: 18px;
    background: #fbfaff;
    border: 1px dashed #dcd2ff;
}
.success-order-number span {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 900;
    color: #7c3cff;
    letter-spacing: .09em;
}
.success-order-number strong {
    color: #111827;
    font-size: 22px;
}
.success-actions {
    margin-top: 28px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}
.success-primary,
.success-secondary {
    min-height: 54px;
    padding: 0 22px;
    border-radius: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    font-weight: 900;
}
.success-primary {
    background: linear-gradient(135deg, #7c3cff, #ff3b5f);
    color: #fff;
    box-shadow: 0 16px 34px rgba(124,60,255,.24);
}
.success-secondary {
    background: #fff;
    color: #111827;
    border: 1px solid #eee7ff;
}
.success-summary-panel {
    padding: 24px;
}
.success-summary-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eee7ff;
}
.success-summary-head span,
.success-delivery-card span {
    display: block;
    color: #7c3cff;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 900;
}
.success-summary-head h2 {
    margin: 4px 0 0;
    color: #111827;
    font-size: 24px;
}
.success-summary-head > strong {
    color: #ff3b5f;
    font-size: 22px;
    white-space: nowrap;
}
.success-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}
.success-meta-grid div {
    padding: 13px;
    border-radius: 16px;
    background: #fbfaff;
    border: 1px solid #f0eafd;
}
.success-meta-grid span {
    display: block;
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 5px;
}
.success-meta-grid strong {
    display: block;
    color: #111827;
    font-size: 13px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.success-items {
    display: grid;
    gap: 10px;
    max-height: 265px;
    overflow-y: auto;
    padding-right: 3px;
}
.success-item {
    display: grid;
    grid-template-columns: 58px 1fr auto;
    gap: 11px;
    align-items: center;
    padding: 10px;
    border: 1px solid #f0eafd;
    border-radius: 18px;
    background: #fff;
}
.success-item img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    border-radius: 14px;
    background: #faf8ff;
}
.success-item h4 {
    margin: 0 0 3px;
    font-size: 13px;
    color: #111827;
    line-height: 1.25;
}
.success-item p {
    margin: 0 0 4px;
    color: #7c3cff;
    font-size: 11px;
    font-weight: 800;
}
.success-item span {
    color: #6b7280;
    font-size: 11px;
}
.success-item strong {
    color: #111827;
    font-size: 13px;
    white-space: nowrap;
}
.success-item-empty {
    padding: 18px;
    text-align: center;
    color: #6b7280;
    border: 1px dashed #ddd2ff;
    border-radius: 18px;
}
.success-delivery-card {
    margin-top: 17px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 15px;
    border-radius: 20px;
    background: linear-gradient(135deg, #f6f1ff, #fff7fa);
    border: 1px solid #eee7ff;
}
.success-delivery-card i {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #fff;
    color: #7c3cff;
}
.success-delivery-card p {
    margin: 5px 0 0;
    color: #374151;
    line-height: 1.55;
    font-size: 13px;
}
.success-timeline {
    margin-top: 18px;
    display: grid;
    gap: 10px;
}
.timeline-step {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #6b7280;
    font-weight: 800;
    font-size: 13px;
}
.timeline-step i {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #f3f4f6;
    color: #6b7280;
}
.timeline-step.done i,
.timeline-step.active i {
    background: linear-gradient(135deg, #7c3cff, #ff3b5f);
    color: #fff;
}
.timeline-step.active span { color: #111827; }
.success-cod-mode .success-badge,
.success-cod-mode .timeline-step.done i,
.success-cod-mode .timeline-step.active i,
.success-cod-mode .success-primary {
    background: linear-gradient(135deg, #12a150, #7c3cff);
}
.success-cod-mode .success-icon-wrap::before,
.success-cod-mode .success-icon-wrap::after { background: rgba(18,161,80,.14); }
.success-cod-mode .success-mini-label,
.success-cod-mode .success-summary-head span,
.success-cod-mode .success-delivery-card span,
.success-cod-mode .success-order-number span { color: #12a150; }
.success-cod-mode .success-summary-head > strong { color: #12a150; }
.success-footer .footer-bottom { border-top: 1px solid #eee7ff; }
.checkout-form.is-processing-payment { pointer-events: none; opacity: .78; }
.checkout-form.is-processing-payment .checkout-place-order { background: #111827; }
@media (max-width: 992px) {
    .order-success-page { padding: 26px 0 110px; }
    .success-stage { grid-template-columns: 1fr; gap: 16px; }
    .success-card { min-height: 520px; border-radius: 28px; padding: 34px 18px; }
    .success-summary-panel { border-radius: 28px; padding: 18px; }
}
@media (max-width: 600px) {
    .success-icon-wrap { width: 136px; height: 136px; margin-bottom: 18px; }
    .success-badge { width: 114px; height: 114px; border-radius: 34px; }
    .success-check { width: 76px; height: 76px; }
    .success-card h1 { font-size: 36px; letter-spacing: -1.5px; }
    .success-card p { font-size: 14px; line-height: 1.62; }
    .success-actions { display: grid; width: 100%; }
    .success-primary, .success-secondary { width: 100%; }
    .success-meta-grid { grid-template-columns: 1fr; }
    .success-summary-head { align-items: flex-start; }
    .success-summary-head h2 { font-size: 21px; }
    .success-summary-head > strong { font-size: 18px; }
    .success-item { grid-template-columns: 52px 1fr; }
    .success-item strong { grid-column: 2; }
}

/* --- USER ACCOUNT / LOGIN / PROFILE / TRACKING ADDON --- */
.account-bg,
.auth-page,
.user-profile-page,
.order-tracking-page {
    background: radial-gradient(circle at top left, rgba(124,60,255,.10), transparent 32%), radial-gradient(circle at 95% 20%, rgba(255,59,95,.08), transparent 28%), #fbfaff;
    min-height: 70vh;
    padding: 52px 0 96px;
}
.account-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    background: #f4efff;
    color: #7c3cff;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 14px;
}
.auth-shell {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 24px;
    align-items: stretch;
}
.auth-shell.single-auth { grid-template-columns: .95fr .85fr; max-width: 1120px; }
.auth-card {
    background: rgba(255,255,255,.92);
    border: 1px solid #eee7ff;
    border-radius: 28px;
    box-shadow: 0 20px 50px rgba(31,41,55,.06);
    padding: 28px;
}
.auth-copy-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(135deg, #ffffff, #f8f4ff 55%, #fff5f7);
    overflow: hidden;
    position: relative;
}
.auth-copy-card::after {
    content: '';
    position: absolute;
    right: -70px;
    bottom: -80px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(124,60,255,.16), rgba(255,59,95,.12));
}
.auth-copy-card h1,
.account-hero h1 {
    font-size: clamp(34px, 4vw, 58px);
    line-height: .95;
    letter-spacing: -2px;
    margin: 0 0 16px;
    color: #111827;
    max-width: 560px;
}
.auth-copy-card p,
.account-hero p,
.auth-form p,
.profile-edit-form p,
.account-lock-card p,
.tracking-count-card p {
    color: #6b7280;
    line-height: 1.65;
    margin: 0;
}
.auth-mini-list {
    display: grid;
    gap: 10px;
    margin-top: 26px;
    max-width: 420px;
}
.auth-mini-list span {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #eee7ff;
    background: #fff;
    border-radius: 18px;
    color: #111827;
    font-weight: 800;
    font-size: 13px;
}
.auth-mini-list i { color: #7c3cff; }
.auth-form h2,
.profile-edit-form h2,
.auth-card h2 {
    margin: 0 0 8px;
    font-size: 24px;
    color: #111827;
    letter-spacing: -.5px;
}
.auth-form label,
.profile-edit-form label {
    display: grid;
    gap: 8px;
    color: #374151;
    font-size: 12px;
    font-weight: 900;
    margin-top: 15px;
}
.auth-form input,
.profile-edit-form input,
.auth-form textarea,
.profile-edit-form textarea {
    width: 100%;
    border: 1px solid #e6defa;
    background: #fff;
    border-radius: 14px;
    padding: 14px 15px;
    outline: none;
    font: inherit;
    transition: .22s ease;
}
.auth-form input:focus,
.profile-edit-form input:focus,
.auth-form textarea:focus,
.profile-edit-form textarea:focus {
    border-color: #7c3cff;
    box-shadow: 0 0 0 4px rgba(124,60,255,.10);
}
.account-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
}
.account-form-grid .wide { grid-column: 1 / -1; }
.auth-submit,
.account-primary,
.account-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 13px 20px;
    border-radius: 16px;
    border: none;
    text-decoration: none;
    font-weight: 900;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.auth-submit,
.account-primary {
    width: 100%;
    margin-top: 20px;
    color: #fff;
    background: linear-gradient(135deg, #7c3cff, #ff3b5f);
    box-shadow: 0 16px 34px rgba(124,60,255,.20);
}
.account-secondary {
    background: #fff;
    color: #7c3cff;
    border: 1px solid #e6defa;
}
.auth-submit:hover,
.account-primary:hover,
.account-secondary:hover { transform: translateY(-2px); }
.auth-switch {
    margin-top: 18px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}
.auth-switch a { color: #7c3cff; font-weight: 900; text-decoration: none; }
.account-hero { padding-bottom: 28px; }
.account-auth-required { padding-top: 8px; }
.account-lock-card {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}
.account-lock-card > i,
.tracking-locked-card > i {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    margin: 0 auto 17px;
    color: #fff;
    background: linear-gradient(135deg, #7c3cff, #ff3b5f);
    font-size: 30px;
}
.account-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 22px;
}
.account-actions .account-primary,
.account-actions .account-secondary { width: auto; margin-top: 0; }
.profile-dashboard {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
    align-items: start;
}
.profile-summary-card,
.tracking-count-card,
.tracking-detail-card,
.tracking-locked-card {
    background: rgba(255,255,255,.94);
    border: 1px solid #eee7ff;
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 20px 50px rgba(31,41,55,.06);
}
.profile-summary-card { text-align: center; position: sticky; top: 96px; }
.profile-avatar {
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    border-radius: 30px;
    color: #fff;
    background: linear-gradient(135deg, #7c3cff, #ff3b5f);
    font-size: 34px;
}
.profile-summary-card h2 { margin: 0 0 4px; color: #111827; }
.profile-summary-card p { color: #6b7280; margin: 0 0 17px; overflow-wrap: anywhere; }
.profile-stat {
    margin: 18px 0;
    padding: 16px;
    border-radius: 20px;
    background: #fbfaff;
    border: 1px solid #eee7ff;
}
.profile-stat span { display: block; color: #6b7280; font-size: 12px; font-weight: 800; }
.profile-stat strong { display: block; color: #111827; font-size: 34px; margin-top: 5px; }
.account-primary.full,
.account-secondary.full { width: 100%; margin-top: 11px; }
.profile-main-grid { display: grid; gap: 24px; }
.account-order-list { display: grid; gap: 10px; margin-top: 16px; }
.account-order-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid #eee7ff;
    text-decoration: none;
    color: inherit;
    background: #fff;
}
.account-order-row b { display: block; color: #111827; }
.account-order-row small { display: block; color: #6b7280; margin-top: 4px; }
.account-order-row strong { color: #ff3b5f; }
.account-order-row em {
    font-style: normal;
    color: #12a150;
    background: #eaf9f0;
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 900;
}
.account-empty-state {
    text-align: center;
    border: 1px dashed #d9cdfa;
    border-radius: 22px;
    padding: 24px;
    color: #6b7280;
    background: #fbfaff;
}
.account-empty-state i { font-size: 28px; color: #7c3cff; margin-bottom: 10px; }
.account-empty-state a { color: #7c3cff; font-weight: 900; text-decoration: none; }
.tracking-dashboard {
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: 24px;
    align-items: start;
}
.tracking-count-card span {
    color: #7c3cff;
    font-weight: 900;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.tracking-count-card strong {
    display: block;
    font-size: 46px;
    color: #111827;
    margin: 5px 0;
}
.tracking-list { display: grid; gap: 10px; margin-top: 14px; }
.tracking-order-pill {
    display: grid;
    gap: 4px;
    padding: 15px;
    border-radius: 20px;
    border: 1px solid #eee7ff;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: .22s ease;
}
.tracking-order-pill.active,
.tracking-order-pill:hover {
    border-color: #7c3cff;
    box-shadow: 0 12px 28px rgba(124,60,255,.10);
}
.tracking-order-pill span { color: #111827; font-weight: 900; }
.tracking-order-pill small { color: #6b7280; }
.tracking-order-pill b { color: #ff3b5f; }
.tracking-detail-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    padding-bottom: 18px;
    border-bottom: 1px solid #eee7ff;
}
.tracking-detail-head span,
.tracking-info-box span {
    color: #7c3cff;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.tracking-detail-head h2 { margin: 5px 0; color: #111827; font-size: 28px; }
.tracking-detail-head p { margin: 0; color: #12a150; font-weight: 900; }
.tracking-detail-head > strong { color: #ff3b5f; font-size: 24px; white-space: nowrap; }
.tracking-progress-line {
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 10px;
    margin: 22px 0;
}
.tracking-step {
    min-height: 108px;
    border: 1px solid #eee7ff;
    border-radius: 20px;
    background: #fbfaff;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 12px 8px;
    color: #9ca3af;
    font-size: 12px;
    font-weight: 900;
}
.tracking-step i {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #fff;
    color: #9ca3af;
}
.tracking-step.done {
    color: #111827;
    background: linear-gradient(135deg, #f5f0ff, #fff6f8);
}
.tracking-step.done i {
    color: #fff;
    background: linear-gradient(135deg, #7c3cff, #ff3b5f);
}
.tracking-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.tracking-info-box {
    padding: 16px;
    border-radius: 20px;
    background: #fbfaff;
    border: 1px solid #eee7ff;
}
.tracking-info-box strong { display: block; color: #111827; margin: 6px 0; line-height: 1.35; }
.tracking-info-box p { color: #6b7280; margin: 0; }
.tracking-items { display: grid; gap: 10px; }
.tracking-locked-card { text-align: center; min-height: 360px; display: grid; align-content: center; }
.checkout-account-note {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 14px 16px;
    margin-bottom: 18px;
    border: 1px solid #eee7ff;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8f4ff, #fff8fa);
    color: #374151;
    font-size: 13px;
    font-weight: 700;
}
.checkout-account-note i { color: #7c3cff; }
.checkout-account-note strong { color: #111827; }
[data-auth-required][hidden], [data-profile-dashboard][hidden], [data-tracker-dashboard][hidden] { display: none !important; }
@media (max-width: 992px) {
    .account-bg, .auth-page, .user-profile-page, .order-tracking-page { padding: 28px 0 116px; }
    .auth-shell, .auth-shell.single-auth, .profile-dashboard, .tracking-dashboard { grid-template-columns: 1fr; }
    .profile-summary-card { position: static; }
    .tracking-progress-line { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px) {
    .auth-card, .profile-summary-card, .tracking-count-card, .tracking-detail-card, .tracking-locked-card { border-radius: 24px; padding: 20px; }
    .auth-copy-card h1, .account-hero h1 { font-size: 38px; letter-spacing: -1.5px; }
    .account-form-grid, .tracking-two-col { grid-template-columns: 1fr; }
    .tracking-progress-line { grid-template-columns: 1fr; }
    .tracking-step { min-height: auto; grid-template-columns: 38px 1fr; text-align: left; justify-items: start; }
    .tracking-detail-head { display: grid; }
    .tracking-detail-head > strong { font-size: 20px; }
    .account-actions { display: grid; }
    .account-actions .account-primary, .account-actions .account-secondary { width: 100%; }
    .account-order-row { grid-template-columns: 1fr; }
}


.profile-form-section{margin-top:18px;padding:18px;border:1px solid #eee7ff;background:#fbfaff;border-radius:22px}
.profile-form-section:first-of-type{margin-top:18px}
.profile-form-section h3{margin:0 0 12px;display:flex;align-items:center;gap:9px;color:#111827;font-size:16px;letter-spacing:-.2px}
.profile-form-section h3 i{color:#7c3cff}
.shipping-form-section{background:linear-gradient(135deg,#fff,#fbfaff)}
.profile-edit-form textarea{min-height:96px;resize:vertical}
.profile-save-toast{margin-top:14px;padding:12px 14px;border:1px solid #bdf0d0;background:#ecfff4;color:#0f7a3c;border-radius:16px;font-weight:800;font-size:13px}


/* --- SHOP PAGE FINAL --- */
.shop-page{background:#f8f7fb;padding-bottom:90px;min-height:70vh}
.shop-hero-section{padding:48px 0 28px;background:radial-gradient(circle at 10% 10%,rgba(125,74,255,.16),transparent 32%),linear-gradient(135deg,#fff,#fbfaff 55%,#fff2f4)}
.shop-hero-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:center}
.shop-hero-copy span{display:inline-flex;padding:8px 12px;border-radius:999px;background:#efe8ff;color:#6d2dff;font-size:12px;font-weight:900;letter-spacing:.12em}
.shop-hero-copy h1{font-size:48px;line-height:1.02;margin:16px 0 12px;color:#17111f;letter-spacing:-1.5px}
.shop-hero-copy p{color:#6b6475;font-size:16px;line-height:1.7;max-width:520px}
.shop-hero-search-card{background:rgba(255,255,255,.88);border:1px solid #eadfff;border-radius:28px;padding:20px;box-shadow:0 22px 60px rgba(64,40,120,.1);backdrop-filter:blur(14px)}
.shop-hero-search-card label{display:block;font-weight:900;margin-bottom:10px;color:#21172f}
.shop-search-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;background:#fff;border:2px solid #7b3cff;border-radius:22px;padding:8px 10px 8px 16px;box-shadow:0 12px 26px rgba(123,60,255,.12)}
.shop-search-bar i{color:#7b3cff}
.shop-search-bar input{height:46px;border:none;outline:none;font-size:15px;background:transparent;min-width:0}
.shop-search-bar button{height:46px;border:none;border-radius:16px;background:linear-gradient(135deg,#7b3cff,#ff3f6c);color:#fff;font-weight:900;padding:0 22px;cursor:pointer}
.shop-quick-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.shop-quick-links button,.shop-filter-chip{border:1px solid #e9ddff;background:#fff;color:#5c5368;border-radius:999px;padding:10px 14px;font-weight:800;cursor:pointer;transition:.2s ease}
.shop-quick-links button:hover,.shop-filter-chip:hover,.shop-filter-chip.active{background:#7b3cff;color:#fff;border-color:#7b3cff;transform:translateY(-1px)}
.shop-layout-section{padding:34px 15px 70px}
.shop-toolbar-card{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:#fff;border:1px solid #eadfff;border-radius:24px;padding:18px 20px;margin-bottom:16px;box-shadow:0 18px 40px rgba(64,40,120,.06)}
.shop-toolbar-card h2{margin:0;font-size:24px;color:#17111f}
.shop-toolbar-card p{margin:5px 0 0;color:#7c7486;font-weight:700}
.shop-toolbar-actions{display:flex;gap:10px;flex-wrap:wrap}
.shop-toolbar-actions select,.shop-toolbar-actions button{height:44px;border-radius:14px;border:1px solid #eadfff;background:#fff;padding:0 14px;font-weight:800;color:#4d425f;cursor:pointer}
.shop-toolbar-actions button{background:#fff2f5;color:#ff3f6c;border-color:#ffd4df}
.shop-filter-row{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 20px}
.shop-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.shop-product-card{background:#fff;border:1px solid #eadfff;border-radius:22px;overflow:hidden;cursor:pointer;transition:.24s ease;box-shadow:0 12px 32px rgba(64,40,120,.05)}
.shop-product-card:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(64,40,120,.1);border-color:#d9c6ff}
.shop-product-img{position:relative;aspect-ratio:1/1;background:linear-gradient(145deg,#f8f5ff,#fff);display:grid;place-items:center;margin:14px;border-radius:18px;overflow:hidden}
.shop-product-img img{width:82%;height:82%;object-fit:contain;transition:.26s ease}
.shop-product-card:hover .shop-product-img img{transform:scale(1.05)}
.shop-badge{position:absolute;top:12px;left:12px;background:#ff3f6c;color:#fff;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:900}
.shop-stock-tag{position:absolute;inset:auto 12px 12px;background:rgba(17,17,17,.75);color:#fff;border-radius:12px;padding:8px 10px;text-align:center;font-size:11px;font-weight:900}
.shop-product-info{padding:0 16px 16px}
.shop-product-meta{display:flex;justify-content:space-between;gap:8px;color:#9b93a7;font-size:11px;text-transform:uppercase;font-weight:800;margin-bottom:9px}
.shop-product-info h3{font-size:15px;line-height:1.35;min-height:42px;margin:0 0 10px;color:#17111f}
.shop-rating{display:flex;align-items:center;gap:8px;margin-bottom:10px;color:#f5b301;font-size:12px}
.shop-rating small{color:#8b8395;font-weight:800}
.shop-price-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.shop-price-row strong{font-size:17px;color:#17111f}
.shop-price-row em{font-style:normal;color:#a19aaa;text-decoration:line-through;font-size:13px}
.shop-card-actions{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.shop-details-btn,.shop-cart-btn{display:flex;align-items:center;justify-content:center;min-height:40px;border-radius:14px;text-decoration:none;font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.02em}
.shop-details-btn{background:#f4efff;color:#6d2dff;padding:0 12px}
.shop-cart-btn{border:none;background:linear-gradient(135deg,#7b3cff,#ff3f6c);color:#fff;padding:0 14px;cursor:pointer}
.shop-cart-btn.disabled{background:#ddd;color:#777}
.shop-empty{display:none;place-items:center;text-align:center;padding:60px 20px;background:#fff;border:1px dashed #d9c6ff;border-radius:24px;color:#6b6475}
.shop-empty i{font-size:34px;color:#7b3cff;margin-bottom:12px}
.shop-empty h3{margin:0 0 8px;color:#17111f}
@media (max-width:1200px){.shop-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.shop-hero-wrap{grid-template-columns:1fr}}
@media (max-width:900px){.shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.shop-hero-copy h1{font-size:38px}.shop-hero-section{padding-top:28px}.shop-toolbar-card{align-items:flex-start}.shop-toolbar-actions{width:100%}.shop-toolbar-actions select,.shop-toolbar-actions button{flex:1}}
@media (max-width:640px){.shop-page{padding-bottom:86px}.shop-hero-section{padding:20px 0}.shop-hero-copy h1{font-size:30px}.shop-hero-copy p{font-size:14px}.shop-hero-search-card{padding:14px;border-radius:22px}.shop-search-bar{grid-template-columns:auto 1fr;padding:8px 12px;border-radius:18px}.shop-search-bar button{grid-column:1/-1;width:100%}.shop-quick-links{overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px}.shop-quick-links button{white-space:nowrap}.shop-layout-section{padding-top:18px}.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.shop-product-img{margin:10px;border-radius:16px}.shop-product-info{padding:0 11px 12px}.shop-product-meta{font-size:9px}.shop-product-info h3{font-size:13px;min-height:38px}.shop-price-row strong{font-size:14px}.shop-card-actions{grid-template-columns:1fr}.shop-cart-btn,.shop-details-btn{min-height:38px}.shop-filter-row{overflow-x:auto;flex-wrap:nowrap;padding-bottom:5px}.shop-filter-chip{white-space:nowrap}.shop-toolbar-card{border-radius:20px;padding:14px}.shop-toolbar-card h2{font-size:20px}}


/* --- COMPLETE CATEGORY DROPDOWN NAV + CATEGORY PAGES --- */
.enhanced-cat-list{position:relative;gap:0;flex-wrap:nowrap}
.enhanced-cat-list .cat-nav-item{position:relative;padding:0;border-right:1px solid rgba(255,255,255,.12)}
.enhanced-cat-list .cat-nav-item>a{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;padding:13px 15px;font-size:13px;font-weight:800;white-space:nowrap;transition:.22s ease}
.enhanced-cat-list .cat-nav-item:hover>a{background:rgba(0,0,0,.12)}
.enhanced-cat-list .lvl-up-link>a{background:var(--tecroot-pink);font-weight:900}
.category-dropdown{position:absolute;left:0;top:100%;width:285px;background:#fff;color:#16111f;border:1px solid #e8defb;border-radius:0 0 22px 22px;box-shadow:0 26px 60px rgba(28,18,46,.16);padding:12px;z-index:1300;opacity:0;visibility:hidden;transform:translateY(12px);transition:.24s ease;display:grid;gap:6px}
.cat-nav-item:hover .category-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.category-dropdown a{display:flex;flex-direction:column;gap:3px;padding:12px 13px;border-radius:14px;text-decoration:none;color:#1d1627;background:#fff;transition:.2s ease;border:1px solid transparent}
.category-dropdown a:hover{background:#f7f1ff;border-color:#eadfff;transform:translateX(3px)}
.category-dropdown span{font-size:14px;font-weight:900}.category-dropdown small{font-size:12px;color:#776c86;font-weight:600}.link-chip{text-decoration:none;display:inline-flex;align-items:center}
.category-static-page{background:#f8f7fb;min-height:70vh;padding-bottom:90px}.category-hero{padding:54px 0 30px;background:radial-gradient(circle at 12% 8%,rgba(123,60,255,.16),transparent 34%),linear-gradient(135deg,#fff,#fbfaff 58%,#fff1f4)}
.category-hero-card{background:rgba(255,255,255,.88);border:1px solid #eadfff;border-radius:30px;padding:32px;box-shadow:0 22px 60px rgba(64,40,120,.1);display:grid;grid-template-columns:1.2fr .8fr;gap:26px;align-items:center;overflow:hidden}
.category-hero-copy span{display:inline-flex;padding:8px 12px;border-radius:999px;background:#efe8ff;color:#6d2dff;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.category-hero-copy h1{font-size:46px;line-height:1.04;margin:16px 0 12px;color:#17111f;letter-spacing:-1.2px}.category-hero-copy p{color:#6b6475;font-size:16px;line-height:1.75;max-width:640px}.category-hero-art{min-height:220px;border-radius:26px;background:linear-gradient(135deg,#7b3cff,#ff3f6c);display:grid;place-items:center;position:relative;overflow:hidden}.category-hero-art i{font-size:82px;color:#fff;filter:drop-shadow(0 18px 30px rgba(0,0,0,.22))}.category-hero-art::before{content:'';position:absolute;width:210px;height:210px;border-radius:50%;background:rgba(255,255,255,.17);top:-80px;right:-60px}.category-hero-art::after{content:'';position:absolute;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.13);bottom:-44px;left:24px}
.category-info-section{padding:34px 15px 76px}.category-info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.category-info-card{background:#fff;border:1px solid #eadfff;border-radius:24px;padding:24px;box-shadow:0 18px 40px rgba(64,40,120,.06);transition:.22s ease}.category-info-card:hover{transform:translateY(-4px);box-shadow:0 26px 58px rgba(64,40,120,.1)}.category-info-card i{width:52px;height:52px;border-radius:18px;background:linear-gradient(135deg,#7b3cff,#ff3f6c);color:#fff;display:grid;place-items:center;font-size:22px;margin-bottom:16px}.category-info-card h3{margin:0 0 9px;color:#17111f}.category-info-card p{margin:0;color:#6b6475;line-height:1.65}.category-cta-card{margin-top:20px;background:#17111f;color:#fff;border-radius:28px;padding:24px;display:flex;justify-content:space-between;gap:18px;align-items:center;flex-wrap:wrap}.category-cta-card h2{margin:0 0 5px}.category-cta-card p{margin:0;color:rgba(255,255,255,.7)}.category-cta-card a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;border-radius:16px;padding:0 20px;background:linear-gradient(135deg,#7b3cff,#ff3f6c);color:#fff;text-decoration:none;font-weight:900}
@media (max-width:1200px){.enhanced-cat-list{overflow-x:auto}.enhanced-cat-list::-webkit-scrollbar{display:none}.category-dropdown{display:none}}
@media (max-width:992px){.category-navigation{display:none!important}.category-hero-card{grid-template-columns:1fr}.category-hero-copy h1{font-size:36px}.category-info-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.category-static-page{padding-bottom:86px}.category-hero{padding:20px 0}.category-hero-card{border-radius:24px;padding:20px}.category-hero-copy h1{font-size:30px}.category-hero-copy p{font-size:14px}.category-hero-art{min-height:160px}.category-hero-art i{font-size:54px}.category-info-section{padding-top:18px}.category-info-grid{grid-template-columns:1fr}.category-info-card{border-radius:20px;padding:18px}.category-cta-card{border-radius:22px;padding:20px}}


/* --- REAL URL IMAGE POLISH + VIDEO GAME BANNER FIX --- */
.slide img,
.cat-img img,
.p-img img,
.g-img img,
.detail-main-image img,
.related-card-img img,
.shop-product-image img {
    object-position: center !important;
}
.cat-img,
.p-img,
.g-img {
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
}
.cat-img img,
.p-img img,
.g-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: inherit;
}
.cat-img img {
    max-height: none !important;
}
.category-grid-section .cat-box {
    min-height: 190px;
}
.video-games-section .games-banner {
    background: radial-gradient(circle at 80% 64%, rgba(139, 92, 246, .12), transparent 34%), #f8f8f8 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 26px !important;
    padding: 42px 22px 28px !important;
    overflow: hidden !important;
}
.video-games-section .banner-text {
    width: 100%;
    position: relative;
    z-index: 3;
}
.video-games-section .banner-img.game-banner-stack {
    width: 100%;
    min-height: 350px;
    flex: 1;
    position: relative;
    display: grid !important;
    place-items: center !important;
    margin: 0 auto !important;
}
.video-games-section .banner-img.game-banner-stack img {
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
    animation: none !important;
}
.video-games-section .game-main-img {
    width: min(82%, 250px) !important;
    height: 330px !important;
    border-radius: 28px !important;
    box-shadow: 0 26px 54px rgba(15, 23, 42, .16) !important;
}
.video-games-section .game-side-img {
    position: absolute !important;
    width: min(58%, 175px) !important;
    height: 175px !important;
    right: 0 !important;
    bottom: 10px !important;
    border: 7px solid #fff !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 44px rgba(15, 23, 42, .18) !important;
}
.video-games-section .games-banner::after {
    content: '';
    position: absolute;
    width: 170px;
    height: 170px;
    right: -55px;
    top: 42%;
    border-radius: 999px;
    background: rgba(239, 68, 68, .10);
    pointer-events: none;
}
.video-games-section .g-img img,
.products-section .p-img img {
    object-fit: cover !important;
    max-height: none !important;
}
.payment-logos img,
.checkout-payment-icons img,
.payment-icon-img {
    object-fit: contain !important;
    background: #fff;
    border-radius: 6px;
    padding: 2px;
}
@media (max-width: 992px) {
    .video-games-section .games-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
    .video-games-section .games-banner {
        width: 100% !important;
        height: auto !important;
        min-height: 560px !important;
    }
    .video-games-section .banner-img.game-banner-stack {
        min-height: 360px !important;
    }
}
@media (max-width: 768px) {
    .video-games-section .games-banner {
        display: flex !important;
        min-height: 520px !important;
        border-radius: 28px !important;
        margin-bottom: 22px !important;
        padding: 36px 16px 24px !important;
    }
    .video-games-section .banner-img.game-banner-stack {
        min-height: 320px !important;
    }
    .video-games-section .game-main-img {
        width: min(78%, 230px) !important;
        height: 300px !important;
    }
    .video-games-section .game-side-img {
        width: 150px !important;
        height: 150px !important;
        right: 8px !important;
        bottom: 6px !important;
    }
}
@media (max-width: 480px) {
    .video-games-section .games-banner {
        min-height: 500px !important;
    }
    .video-games-section .game-main-img {
        width: 74% !important;
        height: 285px !important;
    }
    .video-games-section .game-side-img {
        width: 136px !important;
        height: 136px !important;
    }
}


/* --- NEXGEN GRADIENT BRAND LOGO --- */
.text-logo{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:146px;
    height:46px;
    padding:0 8px;
    border-radius:0;
    background:linear-gradient(135deg,#6f3cff 8%,#9b4dff 35%,#cb33d1 58%,#ff6b4a 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    font-weight:1000;
    letter-spacing:.18em;
    font-size:22px;
    line-height:1;
    text-transform:uppercase;
    text-shadow:0 8px 28px rgba(147,51,234,.18);
}
.footer-logo-text{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:160px;
    padding:0;
    border-radius:0;
    background:linear-gradient(135deg,#6f3cff 8%,#9b4dff 35%,#cb33d1 58%,#ff6b4a 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    font-weight:1000;
    letter-spacing:.18em;
    font-size:22px;
    margin-bottom:20px;
    text-transform:uppercase;
}
.site-logo a{display:inline-flex;align-items:center;text-decoration:none;}
.site-logo{display:flex;align-items:center;}


/* --- FULL MOBILE AUDIT FIXES: ALL PAGES --- */
html, body { max-width: 100%; overflow-x: hidden; }
body { -webkit-text-size-adjust: 100%; }
input, select, textarea, button { max-width: 100%; }
@media (max-width: 992px) {
  body { padding-bottom: 88px; }
  .container { width: 100%; max-width: 100%; padding-left: 15px; padding-right: 15px; }
  .top-info-bar { display: none !important; }
  .nav-main-wrapper { position: sticky; top: 0; z-index: 1200; padding: 10px 0; box-shadow: 0 12px 34px rgba(20,16,35,.08); }
  .nav-main-wrapper .container { gap: 12px !important; justify-content: space-between; }
  .mobile-menu-trigger { display: grid !important; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: #f5f1ff; color: #7c3cff; }
  .site-logo { flex: 1; display: flex; justify-content: center; min-width: 0; }
  .text-logo { min-width: 112px; height: auto; padding: 0; font-size: 18px; border-radius: 0; }
  .nav-action-icons { gap: 8px !important; flex: 0 0 auto; }
  .nav-action-icons .compare-btn,
  .nav-action-icons .wishlist-btn,
  .nav-action-icons .user-btn { display: none !important; }
  .cart-btn .cart-price { display: none !important; }
  .cart-btn { width: 42px; height: 42px; display: grid !important; place-items: center; border-radius: 14px; background: #fff4f7; color: #ff3b5f; }
  .cart-info { display: grid !important; place-items: center; }
  .category-navigation { display: none !important; }
  .mobile-drawer { width: min(88vw, 370px) !important; max-width: 370px; }
  .mobile-drawer-links { max-height: 50vh; overflow-y: auto; }
  .mobile-drawer-links a { min-height: 48px; }
  .mobile-quick-slider { display: block !important; background: #fff; padding-top: 12px; }
  .trust-bar { padding: 16px 0 !important; }
  .trust-bar .container { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .trust-item { flex: none !important; min-width: 0; border: 1px solid #f0edf7 !important; border-radius: 18px; justify-content: flex-start !important; background: #fff; padding: 12px !important; }
  .trust-icon { font-size: 22px !important; }
  .trust-text strong { font-size: 12px !important; }
  .trust-text span { font-size: 11px !important; }
}
@media (max-width: 640px) {
  .container { padding-left: 12px; padding-right: 12px; }
  .nav-main-wrapper .container { gap: 8px !important; }
  .text-logo { min-width: 104px; letter-spacing: .14em; font-size: 16px; }
  .mobile-drawer { width: 92vw !important; }
}

@media (max-width: 768px) {
  .hero-slider { height: 62vh !important; min-height: 470px !important; border-radius: 0 0 28px 28px; }
  .slide::after { background: linear-gradient(180deg, rgba(0,0,0,.58), rgba(0,0,0,.22) 44%, rgba(0,0,0,.70)); }
  .slide-content { padding: 0 22px !important; max-width: 100% !important; text-align: left; }
  .slide-content .subtitle { font-size: 11px !important; letter-spacing: 2px !important; }
  .slide-content h1 { font-size: clamp(34px, 10vw, 46px) !important; line-height: 1.04 !important; }
  .slide-content p { font-size: 14px !important; line-height: 1.55; max-width: 340px; }
  .btn-primary { padding: 13px 24px !important; border-radius: 16px !important; }
  .slider-arrow { width: 40px !important; height: 40px !important; top: auto !important; bottom: 22px !important; transform: none !important; }
  .prev { left: 16px !important; }
  .next { right: 16px !important; }
  .slider-dots { bottom: 31px !important; }
}

@media (max-width: 900px) {
  .category-grid-section { padding: 24px 12px !important; }
  .category-row { gap: 12px !important; margin-bottom: 12px !important; }
  .main-grid, .sub-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .cat-box { height: auto !important; min-height: 150px !important; padding: 16px 12px !important; border-radius: 22px !important; display: grid !important; grid-template-rows: auto 1fr; gap: 8px; text-align: center; }
  .cat-info { transform: none !important; }
  .cat-info h3 { font-size: 13px !important; letter-spacing: .02em !important; line-height: 1.25; }
  .cat-img { width: 100% !important; height: 110px !important; transform: none !important; }
  .cat-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
}
@media (max-width: 370px) {
  .main-grid, .sub-grid, .trust-bar .container { grid-template-columns: 1fr !important; }
}

@media (max-width: 1024px) {
  .products-section { padding: 28px 12px !important; }
  .product-layout-wrapper { grid-template-columns: 1fr !important; gap: 18px !important; }
  .deal-of-the-week { width: 100% !important; max-width: 100% !important; margin: 0 !important; border-radius: 24px !important; }
  .deal-card { border-radius: 20px !important; }
  .deal-img { min-height: 260px; display: grid; place-items: center; overflow: hidden; background: #faf7ff; border-radius: 18px; }
  .deal-img img { width: 100% !important; height: 260px !important; object-fit: cover !important; }
  .tabs-header { overflow: hidden; }
  .tab-list { overflow-x: auto; flex-wrap: nowrap !important; gap: 18px !important; padding-bottom: 8px; scrollbar-width: none; }
  .tab-list::-webkit-scrollbar { display: none; }
  .tab-item { white-space: nowrap; flex: 0 0 auto; }
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .product-card { border: 1px solid #eee7ff !important; border-radius: 20px !important; padding: 10px !important; }
  .p-img { margin-bottom: 10px !important; padding: 0 !important; height: auto !important; aspect-ratio: 1/1 !important; overflow: hidden !important; }
  .p-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; max-height: none !important; }
  .p-info h4 { font-size: 13px !important; min-height: 38px !important; height: auto !important; }
  .p-info .price { font-size: 14px !important; }
}

@media (max-width: 992px) {
  .video-games-section { padding: 28px 12px !important; }
  .games-layout { gap: 18px !important; }
  .games-header { display: grid !important; gap: 12px; align-items: start; }
  .game-filters { overflow-x: auto; flex-wrap: nowrap !important; padding-bottom: 5px; scrollbar-width: none; }
  .game-filters::-webkit-scrollbar { display: none; }
  .filter-btn { white-space: nowrap; flex: 0 0 auto; }
  .games-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px !important; }
  .game-card { border: 1px solid #eee7ff; border-radius: 20px; overflow: hidden; background: #fff; }
  .g-img { aspect-ratio: 1/1 !important; padding: 0 !important; border-radius: 18px !important; }
  .g-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; max-height: none !important; }
  .g-info { padding: 12px !important; }
  .g-info h4 { font-size: 13px !important; height: auto !important; min-height: 38px; }
}

@media (max-width: 768px) {
  .footer-main { padding: 34px 0 26px !important; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .newsletter-content { display: grid !important; gap: 16px; }
  .n-text { align-items: flex-start !important; text-align: left !important; }
  .n-form { width: 100% !important; display: grid !important; grid-template-columns: 1fr auto; }
  .footer-bottom .container { display: grid !important; gap: 12px; text-align: center; justify-items: center; }
  .payment-logos { justify-content: center; flex-wrap: wrap; }
}

@media (max-width: 992px) {
  .product-detail-page { padding-bottom: 110px !important; }
  .detail-breadcrumb-wrap { padding: 12px 0 !important; }
  .product-detail-shell { grid-template-columns: 1fr !important; gap: 16px !important; padding-top: 14px !important; }
  .detail-gallery-card, .detail-info-card, .detail-panel { border-radius: 24px !important; }
  .detail-gallery-card { padding: 14px !important; }
  .detail-info-card, .detail-panel { padding: 20px !important; }
  .detail-main-image-wrap { min-height: 320px !important; border-radius: 20px !important; }
  .detail-main-image-wrap img { width: 100% !important; height: 100% !important; object-fit: cover !important; max-width: none !important; }
  .detail-thumbs { grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 8px !important; overflow-x: auto; }
  .detail-thumb { height: 72px !important; min-width: 72px; }
  .detail-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .detail-info-card h1 { font-size: clamp(26px, 7vw, 36px) !important; }
  .detail-status-grid, .detail-extra-grid { grid-template-columns: 1fr !important; }
  .detail-option-buttons { gap: 8px !important; }
  .detail-option-btn { flex: 1 1 calc(50% - 8px) !important; min-width: 0 !important; }
  .detail-color-option { flex: 1 1 calc(33.333% - 8px) !important; min-width: 82px; }
  .detail-actions-row { display: grid !important; grid-template-columns: auto 1fr auto; gap: 10px; }
  .detail-buy-now { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 520px) {
  .detail-actions-row { grid-template-columns: 1fr !important; }
  #detail-qty, .detail-add-cart, .detail-wishlist, .detail-buy-now { width: 100% !important; justify-content: center !important; }
  .detail-color-option { flex-basis: calc(50% - 8px) !important; }
}

@media (max-width: 992px) {
  .checkout-page { padding-bottom: 115px !important; }
  .checkout-hero { display: grid !important; gap: 16px !important; align-items: start !important; padding: 28px 12px 18px !important; }
  .checkout-steps { width: 100%; overflow-x: auto; justify-content: flex-start; border-radius: 18px !important; }
  .checkout-shell { grid-template-columns: 1fr !important; gap: 16px !important; padding-left: 12px; padding-right: 12px; }
  .checkout-summary-card { position: static !important; order: -1; top: auto !important; }
  .checkout-card, .checkout-summary-card { padding: 18px !important; border-radius: 24px !important; }
  .checkout-form-grid { grid-template-columns: 1fr !important; }
  .payment-method-grid, .shipping-method-grid { grid-template-columns: 1fr !important; }
  .checkout-line { grid-template-columns: 58px 1fr !important; }
  .checkout-line strong { grid-column: 2; justify-self: start; }
  .coupon-box { display: grid !important; grid-template-columns: 1fr auto; }
}

@media (max-width: 992px) {
  .tecroot-floating-cart { right: 12px !important; bottom: 88px !important; padding: 10px !important; border-radius: 18px !important; min-width: 0 !important; }
  .tecroot-floating-cart-icon { width: 42px !important; height: 42px !important; }
  .tecroot-floating-cart-text, .tecroot-floating-cart-total { display: none !important; }
  .tecroot-cart-drawer { width: min(94vw, 430px) !important; max-width: 94vw !important; }
  .tecroot-cart-line { grid-template-columns: 74px 1fr !important; border-radius: 18px !important; }
  .tecroot-cart-line-img { height: 74px !important; }
  .tecroot-cart-line-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; max-width: none !important; max-height: none !important; }
}

@media (max-width: 768px) {
  .account-bg, .auth-page, .user-profile-page, .order-tracking-page, .order-success-page { padding-bottom: 112px !important; }
  .auth-shell, .auth-shell.single-auth, .profile-dashboard, .tracking-dashboard, .profile-main-grid, .success-stage { grid-template-columns: 1fr !important; gap: 16px !important; }
  .auth-card, .auth-copy-card, .profile-summary-card, .tracking-count-card, .tracking-detail-card, .tracking-locked-card, .success-card, .success-summary-panel { border-radius: 24px !important; padding: 20px !important; }
  .auth-copy-card h1, .account-hero h1, .success-card h1 { font-size: clamp(32px, 10vw, 42px) !important; line-height: 1.03 !important; }
  .account-form-grid, .tracking-two-col, .success-meta-grid { grid-template-columns: 1fr !important; }
  .account-actions, .success-actions { display: grid !important; width: 100%; }
  .account-primary, .account-secondary, .success-primary, .success-secondary, .auth-submit { width: 100% !important; }
  .account-order-row, .success-item { grid-template-columns: 1fr !important; gap: 10px !important; }
  .success-item img { width: 62px !important; height: 62px !important; }
}

@media (max-width: 768px) {
  .shop-hero-wrap, .category-hero-card { grid-template-columns: 1fr !important; }
  .shop-hero-section, .category-hero { padding: 22px 0 16px !important; }
  .shop-hero-copy h1, .category-hero-copy h1 { font-size: clamp(30px, 9vw, 40px) !important; }
  .shop-toolbar-card { display: grid !important; gap: 12px; padding: 16px !important; border-radius: 22px !important; }
  .shop-toolbar-actions { display: grid !important; grid-template-columns: 1fr; width: 100%; }
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .shop-product-img { margin: 10px !important; border-radius: 16px !important; }
  .shop-product-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .shop-card-actions { grid-template-columns: 1fr !important; }
  .category-info-grid { grid-template-columns: 1fr !important; }
  .category-hero-art { min-height: 150px !important; }
  .category-cta-card { display: grid !important; }
  .category-cta-card a { width: 100%; }
}
@media (max-width: 360px) { .shop-grid, .products-grid, .games-grid { grid-template-columns: 1fr !important; } }

@media (max-width: 768px) {
  .reviews-section { padding: 36px 12px !important; }
  .reviews-wrapper { gap: 18px !important; }
  .overall-rating { padding: 18px !important; border-radius: 22px; background: #fff; border: 1px solid #eee7ff !important; }
  .reviews-carousel { width: 100%; gap: 12px !important; scroll-snap-type: x mandatory; }
  .review-card { min-width: 86vw !important; scroll-snap-align: start; border-radius: 20px !important; }
}

/* --- SOCIAL ICON SIZE FIX + GOOGLE AUTH BUTTONS --- */
.footer-col .social-links,
.social-pill-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin-top: 16px !important;
  max-width: 220px;
}
.footer-col .social-links a,
.social-pill-list a {
  width: 100% !important;
  height: 42px !important;
  border-radius: 14px !important;
  background: #f7f5fb !important;
  border: 1px solid #eee7ff !important;
  color: #171321 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}
.footer-col .social-links a i,
.social-pill-list a i {
  width: 24px !important;
  height: 24px !important;
  border-radius: 9px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 13px !important;
  color: #fff !important;
  flex: 0 0 auto !important;
}
.social-pill-list a[aria-label="Facebook"] i { background: #1877f2 !important; }
.social-pill-list a[aria-label="Instagram"] i { background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af) !important; }
.social-pill-list a[aria-label="WhatsApp"] i { background: #25d366 !important; }
.social-pill-list a[aria-label="YouTube"] i { background: #ff0000 !important; }
.social-pill-list a[aria-label="TikTok"] i { background: #111 !important; }
.footer-col .social-links a:hover,
.social-pill-list a:hover {
  transform: translateX(3px) !important;
  background: #fff !important;
  border-color: #d8c9ff !important;
  color: #6d35ff !important;
}
.social-follow-list {
  display: grid;
  gap: 10px;
  max-width: 230px;
  margin-top: 14px;
}
.follow-row {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid #eee7ff;
  background: #f7f5fb;
  color: #171321;
  transition: .22s ease;
}
.follow-row:hover { transform: translateX(3px); background: #fff; border-color: #d8c9ff; }
.follow-row img,
.follow-row i {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  min-width: 28px !important;
  object-fit: contain !important;
  display: grid !important;
  place-items: center !important;
  font-size: 15px !important;
  border-radius: 10px !important;
  padding: 0 !important;
  background: transparent !important;
}
.follow-row i { color: #fff !important; }
.follow-row.facebook-row i { background: #1877f2 !important; }
.follow-row.instagram-row i { background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af) !important; }
.follow-row span { display: grid; gap: 1px; }
.follow-row strong { font-size: 13px; line-height: 1.1; }
.follow-row small { font-size: 11px; color: #7b7284; }
.google-badge img,
.fb-badge img { width: 28px !important; height: 28px !important; max-width: 28px !important; }
.payment-logos img { width: auto !important; height: 20px !important; max-width: 58px !important; object-fit: contain !important; }

.google-auth-btn {
  width: 100%;
  height: 52px;
  border-radius: 16px;
  border: 1px solid #e7e1f5;
  background: #fff;
  color: #171321;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(50, 35, 90, .07);
  margin: 14px 0 14px;
  transition: .22s ease;
}
.google-auth-btn:hover { transform: translateY(-1px); border-color: #cfc0ff; box-shadow: 0 16px 32px rgba(109,53,255,.12); }
.google-auth-btn img { width: 22px !important; height: 22px !important; max-width: 22px !important; max-height: 22px !important; background: transparent !important; }
.auth-divider { display: flex; align-items: center; gap: 12px; color: #8a8293; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin: 10px 0 16px; }
.auth-divider::before,
.auth-divider::after { content: ''; height: 1px; background: #eee7ff; flex: 1; }

@media (max-width: 768px) {
  .footer-col .social-links,
  .social-pill-list,
  .social-follow-list { max-width: 100% !important; }
  .footer-col .social-links,
  .social-pill-list { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .footer-col .social-links a,
  .social-pill-list a { height: 44px !important; padding: 0 10px !important; font-size: 12px !important; }
  .follow-row { min-height: 48px; }
}

/* --- NEXGEN FOOTER LOGO UPDATE --- */
.footer-logo-card{
    width:min(230px,100%);
    min-height:132px;
    padding:14px 16px;
    margin:0 0 18px;
    border-radius:22px;
    background:#050505;
    border:1px solid rgba(124,60,255,.28);
    box-shadow:0 18px 36px rgba(17,24,39,.10), inset 0 0 0 1px rgba(255,255,255,.04);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.footer-brand-logo-img{
    width:100%;
    height:auto;
    max-height:150px;
    object-fit:contain;
    border-radius:16px;
    display:block;
}
.brand-col .footer-desc{max-width:320px;}
@media (max-width: 992px){
  .footer-logo-card{width:210px;min-height:118px;margin-left:auto;margin-right:auto;}
  .footer-brand-logo-img{max-height:130px;}
}
@media (max-width: 600px){
  .footer-logo-card{width:190px;min-height:108px;border-radius:20px;padding:12px;}
  .brand-col{text-align:center;}
  .brand-col .contact-box{justify-content:center;}
}


/* --- FINAL DETAIL CARDS + MOBILE APP POLISH --- */
.detail-extra-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:stretch;
}
.detail-extra-grid .detail-panel{
    height:100%;
    display:flex;
    flex-direction:column;
}
.detail-description-content{
    color:#4b5563;
    line-height:1.75;
    display:grid;
    gap:14px;
    font-size:14px;
}
.detail-description-content p{margin:0;}
.detail-mini-points{
    display:grid;
    gap:9px;
    padding:14px;
    border-radius:18px;
    background:linear-gradient(135deg,#f8f5ff,#fff2f6);
    border:1px solid #efe4ff;
}
.detail-mini-points span{
    display:flex;
    align-items:center;
    gap:9px;
    font-weight:800;
    color:#221733;
    font-size:13px;
}
.detail-mini-points i{color:#7b3cff;width:18px;text-align:center;}
@media (max-width:1100px){
  .detail-extra-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .detail-description-panel{grid-column:1 / -1;}
}
@media (max-width:768px){
  .detail-extra-grid{grid-template-columns:1fr;gap:14px;margin-bottom:34px;}
  .detail-description-panel{grid-column:auto;}
}

@media (max-width:768px){
  html,body{max-width:100%;overflow-x:hidden;}
  body{background:#f7f5fb;}
  .container{width:100%;max-width:100%;padding-left:14px!important;padding-right:14px!important;}
  section{max-width:100vw;}
  img{max-width:100%;}

  .top-info-bar{display:none!important;}
  .nav-main-wrapper{padding:10px 0!important;position:sticky;top:0;z-index:1200;box-shadow:0 12px 34px rgba(15,23,42,.08);}
  .nav-main-wrapper .container{gap:10px!important;}
  .site-logo img{height:34px!important;}
  .nav-action-icons{gap:8px!important;}
  .icon-item{font-size:18px!important;}
  .cart-price{display:none!important;}
  .mobile-drawer{width:min(88vw,340px)!important;}

  .mobile-quick-slider{display:block!important;}
  .trust-bar{padding:14px 0!important;}
  .trust-item{flex:0 0 50%!important;justify-content:flex-start!important;padding:12px 10px!important;border:none!important;}
  .trust-icon{font-size:22px!important;}
  .trust-text strong{font-size:12px!important;}
  .trust-text span{font-size:11px!important;}

  .hero-slider{height:58vh!important;min-height:420px!important;border-radius:0 0 30px 30px;}
  .slide-content{padding:0 22px!important;max-width:100%!important;}
  .slide-content h1{font-size:34px!important;line-height:1.05!important;}
  .slide-content p{font-size:14px!important;max-width:320px!important;}
  .slider-arrow{width:40px!important;height:40px!important;}
  .prev{left:12px!important}.next{right:12px!important;}

  .category-grid-section,.products-section,.video-games-section,.reviews-section{padding-top:24px!important;padding-bottom:24px!important;}
  .category-row{gap:12px!important;margin-bottom:12px!important;}
  .main-grid,.sub-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .cat-box{height:150px!important;border-radius:20px!important;padding:16px!important;background:#fff!important;border-color:#eee7ff!important;box-shadow:0 12px 32px rgba(64,40,120,.06)!important;}
  .cat-info h3{font-size:13px!important;letter-spacing:-.2px!important;text-align:center;}
  .cat-img{width:100%!important;height:90px!important;position:absolute!important;left:0;right:0;bottom:12px;margin:auto;opacity:.95;}
  .cat-img img{max-height:80px!important;}

  .product-layout-wrapper,.games-layout,.reviews-wrapper{grid-template-columns:1fr!important;display:grid!important;gap:16px!important;}
  .deal-of-the-week,.product-tabs-container,.games-banner,.games-content,.overall-rating{max-width:100%!important;width:100%!important;border-radius:24px!important;}
  .tabs-header{overflow-x:auto!important;padding-bottom:3px;}
  .tab-list{gap:10px!important;overflow-x:auto!important;white-space:nowrap!important;padding-bottom:4px;}
  .tab-item{padding:12px 16px!important;border:1px solid #eee7ff;border-radius:999px;background:#fff;font-size:13px!important;}
  .products-grid,.games-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;}
  .product-card,.game-card{border:1px solid #eee7ff!important;border-radius:22px!important;overflow:hidden;background:#fff!important;box-shadow:0 12px 32px rgba(64,40,120,.05)!important;}
  .p-img,.g-img{padding:12px!important;margin:0!important;border-radius:18px!important;background:linear-gradient(145deg,#faf7ff,#fff)!important;}
  .p-img img,.g-img img{width:100%!important;height:128px!important;max-height:128px!important;object-fit:contain!important;}
  .p-info,.g-info{padding:12px!important;}
  .p-info h4,.g-info h4{font-size:12px!important;min-height:35px!important;height:auto!important;}
  .p-info .price,.g-price{font-size:13px!important;}
  .game-filters{overflow-x:auto!important;white-space:nowrap!important;padding-bottom:6px;}

  .games-banner{height:auto!important;min-height:420px!important;padding:26px 16px!important;}
  .game-banner-media{min-height:250px!important;display:flex!important;align-items:center!important;justify-content:center!important;}
  .game-main-img{width:min(78%,220px)!important;}
  .game-side-img{width:min(48%,150px)!important;right:12px!important;bottom:10px!important;}

  .footer-main{padding:34px 0!important;}
  .footer-grid{grid-template-columns:1fr!important;text-align:center!important;gap:22px!important;}
  .footer-col h3::after{left:50%!important;transform:translateX(-50%)!important;}
  .contact-box{justify-content:center!important;}
  .footer-bottom .container{display:grid!important;gap:10px!important;text-align:center!important;justify-items:center!important;}
  .newsletter-content{display:grid!important;gap:16px!important;text-align:center!important;}
  .n-text{justify-content:center!important;}
  .n-form{width:100%!important;}

  .product-detail-page{background:#f7f5fb!important;padding-bottom:110px!important;}
  .detail-breadcrumb-wrap{background:transparent!important;}
  .product-detail-shell{grid-template-columns:1fr!important;gap:14px!important;padding-top:12px!important;padding-bottom:18px!important;}
  .detail-gallery-card,.detail-info-card,.detail-panel{border-radius:24px!important;border-color:#eee7ff!important;box-shadow:0 14px 36px rgba(64,40,120,.06)!important;}
  .detail-gallery-card{padding:14px!important;}
  .detail-main-image-wrap{min-height:290px!important;border-radius:20px!important;background:linear-gradient(145deg,#fbf8ff,#fff)!important;}
  .detail-main-image-wrap img{width:min(78%,280px)!important;max-height:260px!important;object-fit:contain!important;}
  .detail-thumbs{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;}
  .detail-thumb{height:70px!important;border-radius:14px!important;}
  .detail-info-card{padding:18px!important;}
  .detail-info-card h1{font-size:28px!important;line-height:1.08!important;}
  .detail-price-row strong{font-size:25px!important;}
  .detail-short-desc{font-size:14px!important;line-height:1.65!important;margin-bottom:16px!important;}
  .detail-status-grid{grid-template-columns:1fr!important;gap:8px!important;}
  .detail-status-item{border-radius:16px!important;padding:12px!important;}
  .detail-actions-row{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;}
  .qty-control,.detail-add-cart,.detail-buy-now{width:100%!important;justify-content:center!important;}
  .detail-wishlist{width:100%!important;border-radius:18px!important;}
  .detail-meta{font-size:12px!important;}
  .detail-panel{padding:18px!important;}
  .detail-panel h2,.related-products-section h2{font-size:20px!important;}
  .detail-spec-row{display:grid!important;grid-template-columns:1fr!important;gap:4px!important;padding:11px 0!important;}
  .related-products-section{padding-bottom:40px!important;}
  .related-products-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;}
  .related-card{border-radius:20px!important;padding:12px!important;}
  .related-card-img{height:120px!important;border-radius:16px!important;}
  .related-card-img img{max-height:95px!important;object-fit:contain!important;}
  .related-card h3{font-size:12px!important;min-height:36px!important;}

  .shop-layout-section,.category-info-section{padding-left:0!important;padding-right:0!important;}
  .shop-hero-section,.category-hero{border-radius:0 0 28px 28px!important;}
  .shop-hero-search-card,.shop-toolbar-card,.category-hero-card,.category-info-card,.category-cta-card{border-radius:24px!important;box-shadow:0 14px 36px rgba(64,40,120,.06)!important;}
  .shop-product-card{border-radius:22px!important;}
  .shop-product-img img{object-fit:contain!important;}

  .checkout-shell,.account-shell,.profile-shell,.tracking-shell,.auth-shell{max-width:100%!important;}
  .checkout-card,.checkout-summary-card,.profile-card,.tracking-card,.auth-card,.success-card{border-radius:24px!important;}
  .auth-page,.user-profile-page,.order-tracking-page,.order-success-page,.checkout-page{padding-bottom:112px!important;}
  .auth-card,.profile-card,.tracking-card{box-shadow:0 14px 36px rgba(64,40,120,.06)!important;}

  .tecroot-floating-cart{right:14px!important;bottom:82px!important;}
  .tecroot-cart-drawer{width:min(92vw,380px)!important;}
}
@media (max-width:420px){
  .products-grid,.games-grid,.shop-grid,.related-products-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  .main-grid,.sub-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .cat-box{height:138px!important;padding:12px!important;}
  .cat-img{height:78px!important;}
  .cat-img img{max-height:70px!important;}
  .product-card,.game-card,.shop-product-card{border-radius:18px!important;}
  .p-img img,.g-img img{height:112px!important;max-height:112px!important;}
  .shop-product-info h3,.p-info h4,.g-info h4{font-size:11px!important;}
  .shop-price-row strong,.p-info .price,.g-price{font-size:12px!important;}
}

/* --- FINAL FOLLOW US CLEAN BAR UPDATE --- */
.footer-col .social-pill-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin-top: 14px !important;
  max-width: 220px !important;
}
.footer-col .social-pill-list a {
  width: 100% !important;
  min-height: 42px !important;
  border-radius: 14px !important;
  background: #f7f5fb !important;
  border: 1px solid #eee7ff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  color: #111827 !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
.footer-col .social-pill-list a i {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  border-radius: 9px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 13px !important;
  color: #fff !important;
  line-height: 1 !important;
  padding: 0 !important;
}
.footer-col .social-pill-list a[aria-label="Facebook"] i { background: #1877f2 !important; }
.footer-col .social-pill-list a[aria-label="Instagram"] i { background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af) !important; }
.footer-col .social-pill-list a[aria-label="TikTok"] i { background: #050505 !important; }
.footer-col .social-pill-list a[aria-label="WhatsApp"] i { background: #25d366 !important; }
.footer-col .social-pill-list a[aria-label="YouTube"] i { background: #ff0000 !important; }
.footer-col .social-pill-list a:hover {
  transform: translateX(3px) !important;
  background: #fff !important;
  border-color: #d8c9ff !important;
  color: #6d35ff !important;
}
.footer-col.brand-col .social-links,
.footer-col.brand-col .social-pill-list,
.footer-col.brand-col .social-follow-list { display: none !important; }
@media (max-width: 768px) {
  .footer-col .social-pill-list {
    grid-template-columns: 1fr !important;
    max-width: 240px !important;
    margin-inline: auto !important;
  }
  .footer-col .social-pill-list a {
    height: 42px !important;
    min-height: 42px !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
  }
}

/* --- FINAL BLACK FOOTER THEME UPDATE --- */
.site-footer{
  background:#05060a !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  color:#f8fafc !important;
}
.site-footer .newsletter-strip{
  background:linear-gradient(135deg,#0b0d14 0%,#111827 55%,#0b0d14 100%) !important;
  color:#ffffff !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
.site-footer .newsletter-content{
  gap:18px !important;
}
.site-footer .n-text i{
  color:#8b5cf6 !important;
}
.site-footer .n-text h3,
.site-footer .n-text p{
  color:#ffffff !important;
}
.site-footer .n-text p{
  opacity:.72 !important;
}
.site-footer .n-form{
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:none !important;
}
.site-footer .n-form input{
  background:transparent !important;
  color:#ffffff !important;
}
.site-footer .n-form input::placeholder{
  color:rgba(255,255,255,.55) !important;
}
.site-footer .n-form button{
  background:linear-gradient(135deg,#7c3aed,#ef4444) !important;
  color:#ffffff !important;
}
.site-footer .footer-main{
  background:#05060a !important;
  color:#f8fafc !important;
}
.site-footer .footer-grid{
  align-items:start !important;
}
.site-footer .footer-col h3{
  color:#ffffff !important;
}
.site-footer .footer-col h3::after{
  background:linear-gradient(90deg,#8b5cf6,#ef4444) !important;
}
.site-footer .footer-desc,
.site-footer .address-box p,
.site-footer .contact-box span,
.site-footer .footer-col ul li a{
  color:rgba(255,255,255,.68) !important;
}
.site-footer .address-box strong,
.site-footer .contact-box strong,
.site-footer .footer-bottom strong{
  color:#ffffff !important;
}
.site-footer .footer-col ul li a:hover{
  color:#ffffff !important;
  padding-left:5px !important;
}
.site-footer .contact-box i{
  color:#a78bfa !important;
}
.site-footer .footer-logo-card{
  background:linear-gradient(145deg,#0b0d14,#111827) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 18px 45px rgba(0,0,0,.35) !important;
}
.site-footer .footer-brand-logo-img{
  filter:none !important;
}
.site-footer .social-pill-list a,
.site-footer .footer-col .social-pill-list a{
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color:#ffffff !important;
  box-shadow:none !important;
}
.site-footer .social-pill-list a span,
.site-footer .footer-col .social-pill-list a span{
  color:#ffffff !important;
}
.site-footer .social-pill-list a:hover,
.site-footer .footer-col .social-pill-list a:hover{
  background:rgba(255,255,255,.12) !important;
  border-color:rgba(167,139,250,.6) !important;
  color:#ffffff !important;
  transform:translateX(3px) !important;
}
.site-footer .footer-bottom{
  background:#02030a !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  color:rgba(255,255,255,.72) !important;
}
.site-footer .footer-bottom p{
  color:rgba(255,255,255,.72) !important;
}
.site-footer .payment-logos{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  border-radius:16px !important;
  padding:8px 10px !important;
}
.site-footer .payment-logos img{
  opacity:.95 !important;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.08)) !important;
}
@media (max-width:768px){
  .site-footer .newsletter-strip{
    padding:24px 0 !important;
  }
  .site-footer .newsletter-content{
    text-align:center !important;
  }
  .site-footer .n-text{
    justify-content:center !important;
  }
  .site-footer .footer-grid{
    gap:26px !important;
  }
  .site-footer .footer-col h3,
  .site-footer .footer-desc,
  .site-footer .address-box p,
  .site-footer .contact-box{
    text-align:center !important;
  }
  .site-footer .footer-col h3::after{
    left:50% !important;
    transform:translateX(-50%) !important;
  }
  .site-footer .contact-box,
  .site-footer .c-item{
    justify-content:center !important;
  }
  .site-footer .footer-logo-card{
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .site-footer .payment-logos{
    justify-content:center !important;
  }
}


/* --- NEXGEN BRAND POLISH --- */
.site-logo a:hover .text-logo{filter:brightness(1.05);transform:translateY(-1px);}
.footer-bottom p strong:first-child,
.brand-col .address-box strong,
.brand-col .contact-box strong{color:#ffffff;}
.nav-main-wrapper .site-logo{min-width:max-content;}


/* --- FINAL NEXGEN FOOTER GRADIENT + BIGGER BOTTOM BAR --- */
.site-footer{
  background:
    radial-gradient(circle at 12% 0%, rgba(111,60,255,.22), transparent 34%),
    radial-gradient(circle at 86% 12%, rgba(255,107,74,.16), transparent 30%),
    linear-gradient(180deg,#050507 0%,#080710 45%,#050506 100%) !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
}
.site-footer .newsletter-strip{
  background:
    linear-gradient(135deg,rgba(111,60,255,.24),rgba(203,51,209,.18),rgba(255,107,74,.12)) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
.site-footer .footer-main{
  background:transparent !important;
}
.site-footer .footer-logo-card{
  background:
    radial-gradient(circle at 50% 22%, rgba(155,77,255,.24), transparent 35%),
    linear-gradient(145deg,#060608,#0c0b14 62%,#120b16) !important;
  border:1px solid rgba(155,77,255,.24) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.site-footer .footer-bottom{
  background:
    linear-gradient(90deg,rgba(111,60,255,.12),rgba(203,51,209,.08),rgba(255,107,74,.10)),
    rgba(4,4,7,.92) !important;
  border-top:1px solid rgba(255,255,255,.12) !important;
  padding:26px 0 !important;
}
.site-footer .footer-bottom .container{
  font-size:15px !important;
  line-height:1.4 !important;
  color:#e8e4ff !important;
}
.site-footer .footer-bottom p{
  margin:0 !important;
  font-size:15px !important;
  letter-spacing:.01em !important;
}
.site-footer .footer-bottom strong{
  color:#ffffff !important;
  font-weight:900 !important;
}
.site-footer .footer-bottom p strong:first-child{
  background:linear-gradient(135deg,#8b5cf6,#c026d3,#fb6b4b);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
}
.site-footer .payment-logos{
  padding:12px 16px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.075) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 16px 35px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08) !important;
  gap:12px !important;
}
.site-footer .payment-logos img{
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  object-fit:contain !important;
  padding:5px !important;
  border-radius:9px !important;
  background:#ffffff !important;
  opacity:1 !important;
}
@media (max-width: 760px){
  .site-footer .footer-bottom{padding:24px 0 28px !important;}
  .site-footer .footer-bottom p{font-size:14px !important;}
  .site-footer .payment-logos{padding:10px 12px !important; gap:9px !important;}
  .site-footer .payment-logos img{width:26px !important;height:26px !important;min-width:26px !important;}
}