/**

 * PhoneShopAlbania E-Commerce - Main Stylesheet

 * Dizajn modern, responsiv dhe i pastër

 */



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

   RESET & BASE

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

*, *::before, *::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

    -webkit-tap-highlight-color: transparent; /* Largon kutinë gri të klikimit në celular */

}



html {

    font-size: var(--font-size-base);

    scroll-behavior: smooth;

    -webkit-text-size-adjust: 100%;

    overscroll-behavior-y: contain;

    -webkit-tap-highlight-color: transparent;

    /* Vetëm html scrollon vertikalisht — clip nuk krijon scroll container + shmang 2 scrollbar */
    overflow-x: clip !important;

    overflow-y: auto !important;

    height: auto !important;

}



body {

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

    color: var(--color-text);

    background-color: var(--color-bg);

    line-height: 1.6;

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    /* MOS përdor overflow-x:hidden këtu — në CSS ajo e detyron overflow-y:auto → 2 scrollbar */
    overflow-x: clip !important;

    overflow-y: visible !important;

    -webkit-tap-highlight-color: transparent;

    

    /* Ndalon selektimin e tekstit për t'u ndjerë si aplikacion native */

    -webkit-user-select: none;

    user-select: none;

    

    scrollbar-width: none !important;

}



/* Lejon selektimin e tekstit vetëm në fushat ku shkruhet */

input, textarea, [contenteditable="true"] {

    -webkit-user-select: text;

    user-select: text;

}



/* WebKit (Chrome, Safari, Edge) - NJE scrollbar i hollë në nivel HTML */

html::-webkit-scrollbar {

    width: 4px;

}

html::-webkit-scrollbar-track {

    background: transparent;

}

html::-webkit-scrollbar-thumb {

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

    border-radius: 2px;

}



/* Sigurohu qe body nuk ka scrollbar te tijin */

body::-webkit-scrollbar {

    display: none !important;

    width: 0 !important;

}



@keyframes appFadeIn {

    from { opacity: 0; }

    to { opacity: 1; }

}

/* Zbutja dhe blur-i i tranzicionit të ngarkimit vetëm për përmbajtjen (jo për bottom-nav që të mos prishë pozicionimin) */
.topbar, header, .main-content, footer {
    filter: blur(12px);
    opacity: 0;
    will-change: filter, opacity;
    transform: translate3d(0, 0, 0);
    transition: filter 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

body.loaded .topbar,
body.loaded header,
body.loaded .main-content,
body.loaded footer {
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
}



/* Feedback taktil (taptic active state) për butonat dhe menunë e poshtme */

.btn:active, .bottom-nav-item:active, .back-btn:active, .cart-btn:active, .favorite-btn:active, .profile-btn:active {

    transform: scale(0.96) !important;

    opacity: 0.9;

    transition: transform 0.08s ease;

}



a {

    color: inherit;

    text-decoration: none;

    transition: color 0.2s ease;

}



a:hover {

    color: var(--color-primary);

}



img {

    max-width: 100%;

    height: auto;

    display: block;

}



ul, ol {

    list-style: none;

}



button, input, select, textarea {

    font-family: inherit;

    font-size: inherit;

    border: none;

    outline: none;

    background: none;

}



button {

    cursor: pointer;

}



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

   UTILITIES

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

.container {

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

    margin: 0 auto;

    padding: 0 var(--container-padding);

}



.text-center { text-align: center; }

.text-left { text-align: left; }

.text-right { text-align: right; }



.mt-1 { margin-top: 0.5rem; }

.mt-2 { margin-top: 1rem; }

.mt-3 { margin-top: 1.5rem; }

.mt-4 { margin-top: 2rem; }

.mb-1 { margin-bottom: 0.5rem; }

.mb-2 { margin-bottom: 1rem; }

.mb-3 { margin-bottom: 1.5rem; }

.mb-4 { margin-bottom: 2rem; }



.hidden { display: none !important; }

.sr-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

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

    border: 0;

}



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

   BUTTONS

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

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

    padding: var(--btn-padding);

    border-radius: var(--btn-radius);

    font-weight: 600;

    text-align: center;

    transition: all 0.25s ease;

    cursor: pointer;

    box-shadow: var(--btn-shadow);

}



.btn:hover {

    transform: translateY(-2px);

    box-shadow: var(--btn-shadow-hover);

}



.btn:active {

    transform: translateY(0);

}



.btn-primary {

    background: var(--color-primary);

    color: #fff;

}



.btn-primary:hover {

    background: var(--color-primary-hover);

    color: #fff;

}



.btn-accent {

    background: var(--color-accent);

    color: #fff;

}



.btn-accent:hover {

    background: var(--color-accent-hover);

    color: #fff;

}



.btn-outline {

    background: transparent;

    border: 2px solid var(--color-primary);

    color: var(--color-primary);

}



.btn-outline:hover {

    background: var(--color-primary);

    color: #fff;

}



.btn-white {

    background: #fff;

    color: var(--color-text);

}



.btn-white:hover {

    background: var(--color-bg-alt);

    color: var(--color-text);

}



.btn-sm {

    padding: 8px 16px;

    font-size: 0.875rem;

}



.btn-lg {

    padding: 16px 32px;

    font-size: 1.1rem;

}



.btn-block {

    width: 100%;

}



.btn-icon {

    padding: 10px;

    border-radius: 50%;

}



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

   FORMS

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

.form-group {

    margin-bottom: 1.25rem;

}



.form-label {

    display: block;

    margin-bottom: 0.5rem;

    font-weight: 500;

    color: var(--color-text);

}



.form-control {

    width: 100%;

    padding: 12px 16px;

    border: 2px solid #e5e7eb;

    border-radius: var(--btn-radius);

    background: #fff;

    transition: border-color 0.2s ease, box-shadow 0.2s ease;

}



.form-control:focus {

    border-color: var(--color-primary);

    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);

}



.form-control::placeholder {

    color: var(--color-text-light);

}



.form-control.error {

    border-color: var(--color-error);

}



.form-error {

    color: var(--color-error);

    font-size: 0.875rem;

    margin-top: 0.25rem;

}



.form-hint {

    color: var(--color-text-light);

    font-size: 0.875rem;

    margin-top: 0.25rem;

}



textarea.form-control {

    resize: vertical;

    min-height: 120px;

}



select.form-control {

    cursor: pointer;

    appearance: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right 12px center;

    padding-right: 40px;

}



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

   FLASH MESSAGES

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

.flash-message {

    position: fixed;

    top: 80px;

    right: 20px;

    padding: 16px 48px 16px 20px;

    border-radius: var(--btn-radius);

    font-weight: 500;

    z-index: 200000 !important;

    animation: slideIn 0.3s ease;

    max-width: 400px;

    box-shadow: 0 10px 25px rgba(0,0,0,0.15);

}



@keyframes slideIn {

    from {

        transform: translateX(100%);

        opacity: 0;

    }

    to {

        transform: translateX(0);

        opacity: 1;

    }

}



.flash-success {

    background: var(--color-success);

    color: #fff;

}



.flash-error {

    background: var(--color-error);

    color: #fff;

}



.flash-warning {

    background: var(--color-warning);

    color: #fff;

}



.flash-close {

    position: absolute;

    right: 12px;

    top: 50%;

    transform: translateY(-50%);

    background: transparent;

    color: inherit;

    font-size: 1.5rem;

    line-height: 1;

    opacity: 0.7;

}



.flash-close:hover {

    opacity: 1;

}



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

   TOP BAR

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

.topbar {

    background: var(--color-topbar-bg);

    color: var(--color-topbar-text);

    padding: 8px 0;

    font-size: 0.85rem;

}



.topbar-inner {

    display: flex;

    justify-content: flex-end;

    align-items: center;

}



.topbar-links {

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.topbar-link {

    color: var(--color-topbar-text);

    padding: 4px 12px;

    transition: opacity 0.2s ease;

    white-space: nowrap;

}



.topbar-link:hover {

    opacity: 0.8;

    color: var(--color-topbar-text);

}



@media (max-width: 768px) {

    .topbar {

        display: none;

    }

}



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

   HEADER

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

.header {

    background: #fff;

    position: relative;

    z-index: 1000;

    box-shadow: 0 2px 10px rgba(0,0,0,0.05);

    padding-top: env(safe-area-inset-top, 0px);

}



.header.sticky {

    position: sticky;

    top: 0;

}



/* Header Main */

.header-main {

    background: #fff;

    border-bottom: 1px solid #eee;

}



.header-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1.5rem;

    height: 80px;

}



/* Logo */

.logo {

    display: flex;

    align-items: center;

    flex-shrink: 0;

}



.logo img {

    height: 40px;

    width: auto;

    max-width: 150px;

    object-fit: contain;

}



/* Desktop Logo Size */

@media (min-width: 992px) {

    .header-inner {

        height: 80px;

    }

    

    .logo img {

        width: 180px;

        height: 50px;

        max-width: 180px;

        object-fit: contain;

    }

}



.logo-text {

    font-size: 1.8rem;

    font-weight: 800;

    color: var(--color-primary);

    letter-spacing: -0.5px;

}



/* Search Wrapper - New Style */

.search-wrapper {

    flex: 1;

    max-width: 700px; margin: 0 auto;

    display: none;

}



@media (min-width: 768px) {

    .search-wrapper {

        display: block;

    }

}



.search-form {

    display: flex;

    align-items: center;

    background: #f5f5f5;

    border: 1px solid #e0e0e0;

    border-radius: 50px;

    overflow: hidden;

}



.search-input {

    flex: 1;

    padding: 12px 16px;

    background: transparent;

    color: var(--color-text);

    border: none;

    font-size: 0.9rem;

}



.search-input::placeholder {

    color: var(--color-text-light);

}



.search-btn {

    padding: 12px 16px;

    color: var(--color-text-light);

    display: flex;

    align-items: center;

    background: transparent;

    border-left: 1px solid #e0e0e0;

}



.search-btn:hover {

    color: var(--color-primary);

    background: #eee;

}



/* Navigation Bar */

.nav-bar {

    background: #fff;

    border-bottom: 1px solid #eee;

    display: none;

}



@media (min-width: 992px) {

    .nav-bar {

        display: block;

    }

}



.nav-menu {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0;

}



.nav-item {

    position: relative;

}



.nav-link {

    display: flex;

    align-items: center;

    gap: 4px;

    padding: 14px 16px;

    color: var(--color-text);

    font-weight: 500;

    font-size: 0.9rem;

    transition: background 0.2s ease, color 0.2s ease;

    white-space: nowrap;

    text-transform: uppercase;

}



.nav-link:hover {

    background: #fff3e6;

    color: #ff6600;

}



.nav-link svg {

    opacity: 0.5;

}



/* Dropdown */

.has-dropdown {

    position: relative;

}



.dropdown-menu {

    position: absolute;

    top: 100%;

    left: 0;

    min-width: 220px;

    background: #171717;

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

    border-radius: 8px;

    box-shadow: 0 10px 40px rgba(0,0,0,0.3);

    opacity: 0;

    visibility: hidden;

    transform: translateY(5px);

    transition: all 0.25s ease;

    padding: 8px;

    z-index: 100;

}



.has-dropdown:hover .dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



.dropdown-item {

    display: block;

    padding: 10px 16px;

    color: var(--color-text);

    border-radius: 50px;

    transition: background 0.2s ease, color 0.2s ease;

    font-size: 0.9rem;

    text-transform: uppercase;

}



.dropdown-item:hover {

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

    color: var(--primary);

}



/* Header Actions */

.header-actions {

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



/* Language Switcher */

.lang-switcher {

    display: none;

    gap: 2px;

    margin-right: 10px;

}



@media (min-width: 992px) {

    .lang-switcher {

        display: flex;

    }

}



.lang-btn {

    padding: 6px 10px;

    font-size: 0.75rem;

    font-weight: 600;

    color: var(--color-text-light);

    border-radius: 50px;

    transition: all 0.2s ease;

}



.lang-btn:hover,

.lang-btn.active {

    background: var(--color-primary) !important;

    color: #fff !important;

}



/* Icon Buttons */

.icon-btn,

.cart-btn {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    color: var(--color-text);

    border-radius: 50%;

    transition: background 0.2s ease;

}



.icon-btn:hover,

.cart-btn:hover {

    background: #f5f5f5;

    color: var(--color-primary);

}



.cart-count {

    position: absolute;

    top: 2px;

    right: 2px;

    min-width: 18px;

    height: 18px;

    padding: 0 5px;

    background: var(--color-accent);

    color: #fff;

    font-size: 0.7rem;

    font-weight: 700;

    border-radius: 100px;

    display: flex;

    align-items: center;

    justify-content: center;

}



/* Hamburger */

.hamburger {

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 5px;

    width: 44px;

    height: 44px;

    padding: 10px;

    cursor: pointer;

}



@media (min-width: 992px) {

    .hamburger {

        display: none;

    }

}



.hamburger span {

    display: block;

    width: 100%;

    height: 2px;

    background: var(--color-text);

    border-radius: 2px;

    transition: all 0.3s ease;

}



.hamburger.active span:nth-child(1) {

    transform: rotate(45deg) translate(5px, 5px);

}



.hamburger.active span:nth-child(2) {

    opacity: 0;

}



.hamburger.active span:nth-child(3) {

    transform: rotate(-45deg) translate(5px, -5px);

}



/* Mobile Navigation */

.nav-mobile {

    position: fixed;

    top: 60px;

    left: 0;

    right: 0;

    bottom: 0;

    background: var(--color-header-bg);

    z-index: 9999;

    transform: translateX(-100%);

    transition: transform 0.3s ease;

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;

}



.nav-mobile.active {

    transform: translateX(0);

    box-shadow: 0 0 50px rgba(0,0,0,0.3);

}



.mobile-nav-inner {

    padding: 20px;

}



.mobile-search {

    display: flex;

    gap: 10px;

    margin-bottom: 20px;

}



.mobile-search input {

    flex: 1;

    padding: 12px 16px;

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

    color: #fff;

    border-radius: var(--btn-radius);

}



.mobile-search input::placeholder {

    color: rgba(255,255,255,0.6);

}



.mobile-search button {

    padding: 12px 20px;

    background: var(--color-primary);

    color: #fff;

    border-radius: var(--btn-radius);

    font-weight: 600;

}



.mobile-menu li a {

    display: block;

    padding: 14px 0;

    color: #fff;

    font-weight: 500;

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

}



.mobile-menu-divider {

    height: 1px;

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

    margin: 10px 0;

}



.mobile-lang {

    display: flex;

    gap: 10px;

    margin-top: 20px;

    padding-top: 20px;

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

}



.mobile-lang a {

    flex: 1;

    padding: 12px;

    text-align: center;

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

    color: #fff;

    border-radius: var(--btn-radius);

    font-weight: 500;

}



.mobile-lang a.active {

    background: var(--color-primary);

}



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

   MAIN CONTENT

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

.main-content {

    flex: 1;

}



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

   HERO SLIDER

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

.hero-slider {

    position: relative;

    overflow: hidden;

    background: var(--color-bg-alt);

}



.slider-track {

    display: flex;

    transition: transform 0.5s ease;

}



.slide {

    flex: 0 0 100%;

    min-height: 400px;

    position: relative;

    display: flex;

    align-items: center;

}



.slide .slide-image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

}



@media (min-width: 768px) {

    .slide {

        min-height: 500px;

    }

}



.slide-overlay {

    position: absolute;

    inset: 0;

    background: transparent;

    /* Larguar efektet - foto shfaqet pa ndryshime */

}



.slide-content {

    position: relative;

    z-index: 2;

    max-width: 600px;

    padding: 40px var(--container-padding);

    color: #fff;

}



.slide-content h1 {

    font-size: 2rem;

    font-weight: 800;

    line-height: 1.2;

    margin-bottom: 1rem;

}



@media (min-width: 768px) {

    .slide-content h1 {

        font-size: 3rem;

    }

}



.slide-content p {

    font-size: 1.1rem;

    margin-bottom: 1.5rem;

    opacity: 0.9;

}



/* Slider Controls */

.slider-controls {

    position: absolute;

    bottom: 20px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    gap: 10px;

    z-index: 10;

}



.slider-dot {

    width: 12px;

    height: 12px;

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

    border-radius: 50%;

    cursor: pointer;

    transition: all 0.3s ease;

}



.slider-dot.active {

    background: #fff;

    transform: scale(1.2);

}



.slider-arrows {

    position: absolute;

    top: 50%;

    left: 0;

    right: 0;

    transform: translateY(-50%);

    display: flex;

    justify-content: space-between;

    padding: 0 20px;

    pointer-events: none;

    z-index: 10;

}



.slider-arrow {

    width: 50px;

    height: 50px;

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

    backdrop-filter: blur(10px);

    color: #fff;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    pointer-events: all;

    transition: all 0.3s ease;

}



.slider-arrow:hover {

    background: var(--color-primary);

}



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

   SECTIONS

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

.section {

    padding: 60px 0;

}



.section-alt {

    background: var(--color-bg-alt);

}



.section-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 30px;

    flex-wrap: wrap;

    gap: 1rem;

}



.section-title {

    font-size: 1.75rem;

    font-weight: 700;

    color: var(--color-text);

}



.section-link {

    color: var(--color-primary);

    font-weight: 600;

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.section-link:hover {

    text-decoration: underline;

}



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

   PRODUCT GRID

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

.products-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: var(--grid-gap);

    position: relative;

    z-index: 1;

}



@media (min-width: 576px) {

    .products-grid {

        grid-template-columns: repeat(3, 1fr);

    }

}



@media (min-width: 768px) {

    .products-grid {

        grid-template-columns: repeat(4, 1fr);

    }

}



@media (min-width: 1200px) {

    .products-grid {

        grid-template-columns: repeat(5, 1fr);

    }

}



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

   PRODUCT CARD

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

.product-card {

    background: #fff;

    border-radius: var(--card-radius);

    overflow: hidden;

    box-shadow: 0 4px 15px var(--color-card-shadow, rgba(37, 99, 235, 0.1));

    transition: all 0.3s ease;

    display: flex;

    flex-direction: column;

    border: 1px solid var(--color-card-shadow, rgba(37, 99, 235, 0.08));

    position: relative;

    z-index: 1;

    transform: translateZ(0);

    -webkit-transform: translateZ(0);

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

}



.product-card:hover {

    transform: translateY(-5px) translateZ(0);

    -webkit-transform: translateY(-5px) translateZ(0);

    box-shadow: 0 12px 30px var(--color-card-shadow, rgba(37, 99, 235, 0.2));

    z-index: 2;

}



.product-image {

    position: relative;

    aspect-ratio: 1;

    overflow: hidden;

    background: #fff;

}



.product-image img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    padding: 15px;

    transition: transform 0.3s ease;

}



.product-card:hover .product-image img {

    transform: scale(1.05);

}



/* Product Badges */

.product-badges {

    display: flex;

    gap: 6px;

    margin-bottom: 10px;

    flex-wrap: wrap;

}



.badge {

    padding: 4px 10px;

    font-size: 0.7rem;

    font-weight: 700;

    text-transform: uppercase;

    border-radius: 50px;

    color: #fff;

    display: inline-block;

}



.badge-new {

    background: var(--color-primary);

}



.badge-sale {

    background: var(--color-error);

}



.badge-bestseller {

    background: var(--color-accent);

}



/* Product Quick Actions */

.product-actions {

    position: absolute;

    bottom: 10px;

    left: 10px;

    right: 10px;

    display: flex;

    justify-content: center;

    gap: 10px;

    opacity: 0;

    transform: translateY(10px);

    transition: all 0.3s ease;

}



.product-card:hover .product-actions {

    opacity: 1;

    transform: translateY(0);

}



.action-btn {

    width: 40px;

    height: 40px;

    background: #fff;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 2px 8px rgba(0,0,0,0.15);

    color: var(--color-text);

    transition: all 0.2s ease;

}



.action-btn:hover {

    background: var(--color-primary);

    color: #fff;

}



/* Product Info */

.product-info {

    padding: 15px;

    flex: 1;

    display: flex;

    flex-direction: column;

}



.product-category {

    font-size: 0.75rem;

    color: var(--color-text-light);

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin-bottom: 5px;

}



.product-name {

    font-size: 0.95rem;

    font-weight: 600;

    color: var(--color-text);

    margin-bottom: 10px;

    line-height: 1.4;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.product-name a:hover {

    color: var(--color-primary);

}



.product-price {

    margin-top: auto;

    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;

}



.price-current {

    font-size: 1.15rem;

    font-weight: 700;

    color: var(--color-price, var(--color-primary));

}



.price-old {

    font-size: 0.9rem;

    color: var(--color-text-light);

    text-decoration: line-through;

}



.price-discount {

    background: var(--color-error);

    color: #fff;

    padding: 2px 8px;

    border-radius: 50px;

    font-size: 0.75rem;

    font-weight: 700;

}



/* Add to cart button in card */

.product-card .add-to-cart {

    margin-top: 15px;

    width: 100%;

    padding: 10px;

    background: var(--color-bg-alt);

    color: var(--color-text);

    border-radius: var(--btn-radius);

    font-weight: 600;

    transition: all 0.2s ease;

}



.product-card .add-to-cart:hover {

    background: var(--color-primary);

    color: #fff;

}



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

   CATEGORIES GRID

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

.categories-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: var(--grid-gap);

}



@media (min-width: 576px) {

    .categories-grid {

        grid-template-columns: repeat(3, 1fr);

    }

}



@media (min-width: 992px) {

    .categories-grid {

        grid-template-columns: repeat(4, 1fr);

    }

}



@media (min-width: 1200px) {

    .categories-grid {

        grid-template-columns: repeat(6, 1fr);

    }

}



.category-card {

    background: #fff;

    border-radius: var(--card-radius);

    padding: 25px;

    text-align: center;

    box-shadow: var(--card-shadow);

    transition: all 0.3s ease;

}



.category-card:hover {

    transform: translateY(-5px);

    box-shadow: var(--card-shadow-hover);

}



.category-icon {

    width: 110px;

    height: 110px;

    margin: 0 auto 15px;

    background: #fff;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s ease;

    box-shadow: 0 0 0 3px rgba(255, 147, 0, 0.25), 0 4px 15px rgba(255, 147, 0, 0.15);

}



.category-card:hover .category-icon {

    background: #fff;

    color: #fff;

    box-shadow: 0 0 0 4px rgba(255, 147, 0, 0.35), 0 6px 20px rgba(255, 147, 0, 0.25);

}



.category-icon img {

    max-width: 60%;

    max-height: 60%;

    object-fit: contain;

}



.category-card h3 {

    font-size: 1rem;

    font-weight: 600;

    color: var(--color-text);

}



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

   SINGLE PRODUCT PAGE

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

.product-page {

    padding: 40px 0;

}



.product-layout {

    display: grid;

    gap: 40px;

}



@media (min-width: 992px) {

    .product-layout {

        grid-template-columns: 1fr 1fr;

    }

}



/* Product Gallery */

.product-gallery {

    position: relative;

    z-index: 1;

}



@media (min-width: 992px) {

    .product-gallery {

        position: sticky;

        top: 100px;

    }

}



.gallery-main {

    aspect-ratio: 1;

    background: transparent;

    border-radius: var(--card-radius);

    overflow: hidden;

    margin-bottom: 15px;

    box-shadow: 0 4px 15px var(--color-card-shadow, rgba(37, 99, 235, 0.1));

    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));

}



.gallery-main img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    padding: 30px;

}



.gallery-thumbs {

    display: flex;

    gap: 10px;

    overflow-x: auto;

    padding-bottom: 10px;

    position: relative;

    z-index: 1;

}



.gallery-thumb {

    flex: 0 0 80px;

    height: 80px;

    background: var(--color-bg-alt);

    border-radius: 8px;

    overflow: hidden;

    cursor: pointer;

    border: 2px solid var(--color-border, rgba(255, 255, 255, 0.1));

    transition: all 0.2s ease;

    box-shadow: 0 2px 8px var(--color-card-shadow, rgba(37, 99, 235, 0.08));

    position: relative;

    z-index: 1;

}



.gallery-thumb.active,

.gallery-thumb:hover {

    border-color: var(--color-primary);

}



.gallery-thumb img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    padding: 10px;

}



/* Product Details */

.product-details {

    padding: 20px 0;

}



.product-details .product-category {

    font-size: 0.875rem;

    margin-bottom: 10px;

}



.product-details h1 {

    font-size: 1.75rem;

    font-weight: 700;

    margin-bottom: 20px;

    line-height: 1.3;

}



@media (min-width: 768px) {

    .product-details h1 {

        font-size: 2.25rem;

    }

}



.product-details .product-price {

    margin-bottom: 25px;

}



.product-details .price-current {

    font-size: 2rem;

}



.product-details .price-old {

    font-size: 1.25rem;

}



.product-stock {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 25px;

    font-weight: 500;

}



.stock-indicator {

    width: 10px;

    height: 10px;

    border-radius: 50%;

}



.stock-indicator.in-stock {

    background: var(--color-success);

}



.stock-indicator.low-stock {

    background: var(--color-warning);

}



.stock-indicator.out-of-stock {

    background: var(--color-error);

}



.product-short-desc {

    color: var(--color-text-light);

    margin-bottom: 25px;

    line-height: 1.7;

}



/* Quantity Selector */

.quantity-selector {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 25px;

}



.quantity-label {

    font-weight: 500;

}



.quantity-input {

    display: flex;

    align-items: center;

    border: 2px solid #e5e7eb;

    border-radius: var(--btn-radius);

    overflow: hidden;

}



.quantity-btn {

    width: 44px;

    height: 44px;

    background: var(--color-bg-alt);

    font-size: 1.25rem;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: background 0.2s ease;

}



.quantity-btn:hover {

    background: var(--color-primary);

    color: #fff;

}



.quantity-input input {

    width: 60px;

    height: 44px;

    text-align: center;

    font-weight: 600;

    border: none;

    background: #fff;

}



/* Product Actions */

.product-detail-actions {

    display: flex;

    gap: 15px;

    flex-wrap: wrap;

    margin-bottom: 30px;

}



.product-detail-actions .btn {

    flex: 1;

    min-width: 200px;

}



/* Product Specs */

.product-specs {

    background: var(--color-bg-alt);

    border-radius: var(--card-radius);

    padding: 25px;

    margin-bottom: 25px;

}



.product-specs h3 {

    font-size: 1.1rem;

    font-weight: 600;

    margin-bottom: 15px;

}



.specs-table {

    display: grid;

    gap: 10px;

}



.spec-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

    padding: 10px 0;

    border-bottom: 1px solid rgba(0,0,0,0.05);

}



.spec-row:last-child {

    border-bottom: none;

}



.spec-label {

    color: var(--color-text-light);

    font-weight: 500;

}



.spec-value {

    font-weight: 600;

}



/* Product Warranty & Delivery */

.product-warranty {

    padding: 12px 16px;

    background: var(--color-bg-alt);

    border-radius: 8px;

    margin-bottom: 12px;

    font-size: 0.9rem;

}



.product-delivery {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px 16px;

    background: #e8f5e9;

    border-radius: 8px;

    color: #2e7d32;

    font-weight: 500;

    font-size: 0.9rem;

}



.product-delivery svg {

    flex-shrink: 0;

}



/* Product Colors */

.product-colors {

    margin-bottom: 25px;

}



.product-colors h4 {

    font-size: 0.95rem;

    font-weight: 600;

    margin-bottom: 12px;

}



.color-options {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}



.color-option {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px 16px;

    border: 2px solid #e5e7eb;

    border-radius: var(--btn-radius);

    font-size: 0.875rem;

    cursor: pointer;

    transition: all 0.2s ease;

    background: #fff;

}



.color-option input[type="radio"] {

    display: none;

}



.color-option .color-swatch {

    width: 20px;

    height: 20px;

    border-radius: 50%;

    flex-shrink: 0;

}



.color-option .color-name {

    font-weight: 500;

}



.color-option:hover,

.color-option.active {

    border-color: var(--color-primary);

    background: rgba(37, 99, 235, 0.05);

}



.color-option.active {

    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);

}



/* Product Condition Selector */

.product-condition-selector {

    margin-bottom: 25px;

}



.product-condition-selector h4 {

    font-size: 0.95rem;

    font-weight: 600;

    margin-bottom: 12px;

}



.condition-options {

    display: flex;

    gap: 15px;

    flex-wrap: wrap;

}



.product-condition-selector .condition-option {

    flex: 1;

    min-width: 150px;

    cursor: pointer;

}



.product-condition-selector .condition-option input[type="radio"] {

    display: none;

}



.product-condition-selector .condition-label {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 5px;

    padding: 15px 20px;

    border: 2px solid #e5e7eb;

    border-radius: var(--btn-radius);

    transition: all 0.2s ease;

    text-align: center;

    background: #fff;

}



.product-condition-selector .condition-option:hover .condition-label,

.product-condition-selector .condition-option.active .condition-label {

    border-color: var(--color-primary);

    background: rgba(37, 99, 235, 0.05);

}



.product-condition-selector .condition-option.active .condition-label {

    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);

}



.product-condition-selector .condition-name {

    font-weight: 600;

    color: var(--color-text);

}



.product-condition-selector .condition-price {

    font-size: 1.1rem;

    font-weight: 700;

    color: var(--color-primary);

}



/* Condition Badge */

.product-condition-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 16px;

    border-radius: var(--btn-radius);

    font-size: 0.875rem;

    font-weight: 600;

    margin-bottom: 20px;

}



.product-condition-badge.used {

    background: #fef3c7;

    color: #92400e;

}



.product-condition-badge.new {

    background: #d1fae5;

    color: #065f46;

}



.color-badge {

    display: inline-block;

    padding: 6px 14px;

    background: var(--color-bg-alt);

    border: 1px solid #e5e7eb;

    border-radius: 20px;

    font-size: 0.85rem;

    color: var(--color-text);

}



/* Product Description */

.product-description {

    margin-top: 40px;

    padding-top: 30px;

    border-top: 1px solid #e5e7eb;

}



.product-description h3 {

    font-size: 1.25rem;

    font-weight: 600;

    margin-bottom: 15px;

}



.product-description p {

    color: var(--color-text-light);

    line-height: 1.8;

}



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

   CART PAGE

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

.cart-page {

    padding: 40px 0;

}



.cart-empty {

    text-align: center;

    padding: 80px 20px;

}



.cart-empty svg {

    width: 80px;

    height: 80px;

    color: var(--color-text-light);

    margin-bottom: 20px;

}



.cart-empty h2 {

    font-size: 1.5rem;

    margin-bottom: 15px;

}



.cart-empty p {

    color: var(--color-text-light);

    margin-bottom: 25px;

}



.cart-layout {

    display: grid;

    gap: 40px;

}



@media (min-width: 992px) {

    .cart-layout {

        grid-template-columns: 1fr 380px;

    }

}



/* Cart Items */

.cart-items {

    background: #fff;

    border-radius: var(--card-radius);

    box-shadow: var(--card-shadow);

    overflow: hidden;

}



.cart-header {

    display: none;

    padding: 15px 20px;

    background: var(--color-bg-alt);

    font-weight: 600;

    font-size: 0.875rem;

    color: var(--color-text-light);

}



@media (min-width: 768px) {

    .cart-header {

        display: grid;

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

        gap: 20px;

        align-items: center;

    }

}



.cart-item {

    display: grid;

    gap: 15px;

    padding: 20px;

    border-bottom: 1px solid #e5e7eb;

    align-items: center;

}



@media (min-width: 768px) {

    .cart-item {

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

        gap: 20px;

    }

}



.cart-item:last-child {

    border-bottom: none;

}



.cart-product {

    display: flex;

    gap: 15px;

    align-items: center;

}



.cart-product-image {

    width: 80px;

    height: 80px;

    background: var(--color-bg-alt);

    border-radius: 8px;

    flex-shrink: 0;

}



.cart-product-image img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    padding: 10px;

}



.cart-product-info h3 {

    font-size: 1rem;

    font-weight: 600;

    margin-bottom: 5px;

}



.cart-product-info h3 a:hover {

    color: var(--color-primary);

}



.cart-product-sku {

    font-size: 0.8rem;

    color: var(--color-text-light);

}



.cart-product-option {

    font-size: 0.8rem;

    color: var(--color-text);

    margin-top: 4px;

}



.cart-product-condition.used {

    color: #92400e;

}



.cart-quantity {

    display: flex;

    align-items: center;

    justify-content: center;

}



.cart-quantity .quantity-input {

    transform: scale(0.85);

}



.cart-price,

.cart-subtotal {

    text-align: center;

    font-weight: 600;

}



.cart-price .mobile-label,

.cart-subtotal .mobile-label {

    display: block;

    font-size: 0.75rem;

    color: var(--color-text-light);

    font-weight: 400;

    margin-bottom: 3px;

}



@media (min-width: 768px) {

    .cart-price .mobile-label,

    .cart-subtotal .mobile-label {

        display: none;

    }

}



.cart-subtotal {

    color: var(--color-primary);

}



.cart-remove {

    display: flex;

    justify-content: center;

}



.cart-remove button {

    width: 40px;

    height: 40px;

    background: #fee2e2;

    color: var(--color-error);

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.2s ease;

}



.cart-remove button:hover {

    background: var(--color-error);

    color: #fff;

}



/* Cart Summary */

.cart-summary {

    background: #fff;

    border-radius: var(--card-radius);

    box-shadow: var(--card-shadow);

    padding: 25px;

    height: fit-content;

    position: sticky;

    top: 90px;

}



.cart-summary h2 {

    font-size: 1.25rem;

    font-weight: 600;

    margin-bottom: 20px;

    padding-bottom: 15px;

    border-bottom: 1px solid #e5e7eb;

}



.summary-row {

    display: flex;

    justify-content: space-between;

    padding: 10px 0;

}



.summary-row.total {

    border-top: 2px solid #e5e7eb;

    margin-top: 15px;

    padding-top: 20px;

    font-size: 1.25rem;

    font-weight: 700;

}



.summary-row.total span:last-child {

    color: var(--color-primary);

}



.cart-summary .btn {

    margin-top: 20px;

}



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

   CHECKOUT PAGE

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

.checkout-page {

    padding: 40px 0;

}



.checkout-layout {

    display: grid;

    gap: 40px;

}



@media (min-width: 992px) {

    .checkout-layout {

        grid-template-columns: 1fr 400px;

    }

}



.checkout-form {

    background: #fff;

    border-radius: var(--card-radius);

    box-shadow: var(--card-shadow);

    padding: 30px;

}



.checkout-form h2 {

    font-size: 1.25rem;

    font-weight: 600;

    margin-bottom: 25px;

}



.form-row {

    display: grid;

    gap: 20px;

}



@media (min-width: 576px) {

    .form-row {

        grid-template-columns: 1fr 1fr;

    }

}



.order-summary {

    background: #fff;

    border-radius: var(--card-radius);

    box-shadow: var(--card-shadow);

    padding: 25px;

    height: fit-content;

    position: sticky;

    top: 90px;

}



.order-summary h2 {

    font-size: 1.25rem;

    font-weight: 600;

    margin-bottom: 20px;

}



.order-items {

    max-height: 300px;

    overflow-y: auto;

    margin-bottom: 20px;

    padding-right: 10px;

}



.order-item {

    display: flex;

    gap: 15px;

    padding: 15px 0;

    border-bottom: 1px solid #e5e7eb;

}



.order-item:last-child {

    border-bottom: none;

}



.order-item-image {

    width: 60px;

    height: 60px;

    background: var(--color-bg-alt);

    border-radius: 8px;

    flex-shrink: 0;

}



.order-item-image img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    padding: 5px;

}



.order-item-info {

    flex: 1;

}



.order-item-name {

    font-weight: 600;

    font-size: 0.9rem;

    margin-bottom: 5px;

}



.order-item-qty {

    font-size: 0.8rem;

    color: var(--color-text-light);

}



.order-item-price {

    font-weight: 600;

    color: var(--color-primary);

}



.whatsapp-btn {

    background: #25D366;

    width: 100%;

    padding: 16px;

    font-size: 1rem;

}



.whatsapp-btn:hover {

    background: #128C7E;

}



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

   AUTH PAGES

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

.auth-page {

    min-height: 80vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 40px 20px;

}



.auth-box {

    width: 100%;

    max-width: 440px;

    background: #fff;

    border-radius: var(--card-radius);

    box-shadow: var(--card-shadow);

    padding: 40px;

}



.auth-box h1 {

    font-size: 1.5rem;

    font-weight: 700;

    text-align: center;

    margin-bottom: 30px;

}



.auth-divider {

    display: flex;

    align-items: center;

    gap: 15px;

    margin: 25px 0;

    color: var(--color-text-light);

    font-size: 0.875rem;

}



.auth-divider::before,

.auth-divider::after {

    content: '';

    flex: 1;

    height: 1px;

    background: #e5e7eb;

}



.auth-footer {

    text-align: center;

    margin-top: 25px;

    color: var(--color-text-light);

}



.auth-footer a {

    color: var(--color-primary);

    font-weight: 600;

}



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

   PROFILE PAGE

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

.profile-page {

    padding: 40px 0;

}



.profile-layout {

    display: grid;

    gap: 30px;

}



@media (min-width: 768px) {

    .profile-layout {

        grid-template-columns: 250px 1fr;

    }

}



.profile-sidebar {

    background: #fff;

    border-radius: var(--card-radius);

    box-shadow: var(--card-shadow);

    padding: 25px;

    height: fit-content;

}



.profile-user {

    text-align: center;

    padding-bottom: 20px;

    border-bottom: 1px solid #e5e7eb;

    margin-bottom: 20px;

}



.profile-avatar {

    width: 80px;

    height: 80px;

    background: var(--color-primary);

    color: #fff;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2rem;

    font-weight: 700;

    margin: 0 auto 15px;

}



.profile-name {

    font-weight: 600;

    font-size: 1.1rem;

}



.profile-nav a {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px 15px;

    border-radius: 8px;

    color: var(--color-text);

    transition: all 0.2s ease;

}



.profile-nav a:hover,

.profile-nav a.active {

    background: var(--color-bg-alt);

    color: var(--color-primary);

}



.profile-content {

    background: #fff;

    border-radius: var(--card-radius);

    box-shadow: var(--card-shadow);

    padding: 30px;

}



.profile-content h2 {

    font-size: 1.25rem;

    font-weight: 600;

    margin-bottom: 25px;

}



/* Orders List */

.orders-list {

    display: flex;

    flex-direction: column;

    gap: 15px;

}



.order-card {

    border: 1px solid #e5e7eb;

    border-radius: var(--btn-radius);

    padding: 20px;

}



.order-header {

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 15px;

    padding-bottom: 15px;

    border-bottom: 1px solid #e5e7eb;

}



.order-id {

    font-weight: 600;

}



.order-date {

    color: var(--color-text-light);

    font-size: 0.875rem;

}



.order-status {

    padding: 4px 12px;

    border-radius: 100px;

    font-size: 0.75rem;

    font-weight: 600;

    text-transform: uppercase;

}



.order-status.pending {

    background: #fef3c7;

    color: #92400e;

}



.order-status.completed {

    background: #d1fae5;

    color: #065f46;

}



.order-status.cancelled {

    background: #fee2e2;

    color: #991b1b;

}



.order-total {

    font-weight: 700;

    color: var(--color-primary);

}



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

   BRANDS SECTION

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

.brands-section {

    background: #fff;

    padding: 50px 0;

    border-top: 1px solid #e5e7eb;

}



.brands-title {

    font-size: 1.5rem;

    font-weight: 600;

    color: var(--color-text);

    margin-bottom: 30px;

}



.brands-grid {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 15px;

}



.brand-item {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 120px;

    height: 70px;

    background: #fff;

    border: 1px solid #e5e7eb;

    border-radius: 8px;

    padding: 10px;

    transition: all 0.3s ease;

}



.brand-item:hover {

    border-color: var(--color-primary);

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

    transform: translateY(-2px);

}



.brand-item img {

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

    filter: grayscale(100%);

    opacity: 0.7;

    transition: all 0.3s ease;

}



.brand-item:hover img {

    filter: grayscale(0%);

    opacity: 1;

}



.brand-item span {

    font-weight: 600;

    font-size: 0.9rem;

    color: var(--color-text-light);

}



@media (max-width: 768px) {

    .brands-grid {

        gap: 10px;

    }

    

    .brand-item {

        width: 100px;

        height: 60px;

    }

}



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

   FOOTER

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

.footer {

    background: var(--color-footer-bg);

    color: var(--color-footer-text);

    padding-top: 60px;

    padding-bottom: env(safe-area-inset-bottom, 0px);

}



.footer-grid {

    display: grid;

    gap: 40px;

    padding-bottom: 40px;

}



@media (min-width: 576px) {

    .footer-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (min-width: 992px) {

    .footer-grid {

        grid-template-columns: 1.5fr 1fr 1fr 1.2fr;

    }

}



.footer-col h4 {

    color: #fff;

    font-size: 1.1rem;

    font-weight: 600;

    margin-bottom: 20px;

}



.footer-logo {

    margin-bottom: 20px;

}



.footer-logo img {

    height: 40px;

}



.footer-logo span {

    font-size: 1.5rem;

    font-weight: 800;

    color: #fff;

}



.footer-about {

    line-height: 1.7;

    margin-bottom: 20px;

}



.footer-social {

    display: flex;

    gap: 12px;

}



.social-link {

    width: 40px;

    height: 40px;

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

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    transition: all 0.2s ease;

}



.social-link:hover {

    background: var(--color-primary);

    transform: translateY(-3px);

}



.footer-links li {

    margin-bottom: 12px;

}



.footer-links a {

    color: var(--color-footer-text);

    transition: color 0.2s ease, padding-left 0.2s ease;

}



.footer-links a:hover {

    color: #fff;

    padding-left: 5px;

}



.footer-contact li {

    display: flex;

    gap: 12px;

    margin-bottom: 15px;

    align-items: flex-start;

}



.footer-contact svg {

    flex-shrink: 0;

    margin-top: 2px;

}



.footer-contact a {

    color: var(--color-footer-text);

}



.footer-contact a:hover {

    color: #fff;

}



.whatsapp-contact a {

    color: #25D366;

}



/* Newsletter */

.footer-newsletter {

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

    padding: 40px 0;

    text-align: center;

}



.footer-newsletter h4 {

    color: #fff;

    font-size: 1.25rem;

    margin-bottom: 10px;

}



.footer-newsletter p {

    margin-bottom: 20px;

}



.newsletter-form {

    display: flex;

    max-width: 700px; margin: 0 auto;

    margin: 0 auto;

    gap: 10px;

}



.newsletter-form input {

    flex: 1;

    padding: 14px 20px;

    border-radius: 100px;

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

    color: #fff;

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

}



.newsletter-form input::placeholder {

    color: rgba(255,255,255,0.5);

}



.newsletter-form button {

    padding: 14px 30px;

    background: var(--color-primary);

    color: #fff;

    border-radius: 100px;

    font-weight: 600;

    transition: background 0.2s ease;

}



.newsletter-form button:hover {

    background: var(--color-primary-hover);

}



/* Footer Bottom */

.footer-bottom {

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

    padding: 25px 0;

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 15px;

}

@media (max-width: 991px) {
    .footer-bottom,
    .payment-icons,
    #footer-payment-icons {
        display: none !important;
    }
}

.footer-bottom p {

    font-size: 0.875rem;

}



.payment-icons {

    display: flex;

    gap: 10px;

}



.payment-icon {

    font-size: 1.5rem;

}



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

   BREADCRUMB

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

.breadcrumb {

    padding: 15px 0;

    background: var(--color-bg-alt);

}



.breadcrumb-list {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;

    font-size: 0.875rem;

}



.breadcrumb-list li {

    display: flex;

    align-items: center;

    gap: 10px;

}



.breadcrumb-list li:not(:last-child)::after {

    content: '/';

    color: var(--color-text-light);

}



.breadcrumb-list a {

    color: var(--color-text-light);

}



.breadcrumb-list a:hover {

    color: var(--color-primary);

}



.breadcrumb-list li:last-child {

    color: var(--color-text);

    font-weight: 500;

}



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

   PAGINATION

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

.pagination {

    display: flex;

    justify-content: center;

    gap: 8px;

    margin-top: 40px;

}



.pagination a,

.pagination span {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

    font-weight: 500;

    transition: all 0.2s ease;

}



.pagination a {

    background: #fff;

    color: var(--color-text);

    box-shadow: var(--card-shadow);

}



.pagination a:hover {

    background: var(--color-primary);

    color: #fff;

}



.pagination span.current {

    background: var(--color-primary);

    color: #fff;

}



.pagination span.dots {

    background: transparent;

    box-shadow: none;

}



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

   LOADING SPINNER

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

.spinner {

    width: 40px;

    height: 40px;

    border: 3px solid var(--color-bg-alt);

    border-top-color: var(--color-primary);

    border-radius: 50%;

    animation: spin 1s linear infinite;

}



@keyframes spin {

    to {

        transform: rotate(360deg);

    }

}



.loading-overlay {

    position: fixed;

    inset: 0;

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

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 10000;

}



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

   CATEGORY PAGE FILTERS

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

.category-page {

    padding: 40px 0;

}



.category-header {

    margin-bottom: 30px;

}



.category-header h1 {

    font-size: 2rem;

    font-weight: 700;

    margin-bottom: 10px;

}



.category-header p {

    color: var(--color-text-light);

}



.category-layout {

    display: flex;

    flex-direction: column;

    gap: 30px;

}



@media (min-width: 992px) {

    .category-layout {

        display: grid;

        grid-template-columns: 260px 1fr;

    }

}



/* Filters Sidebar */

.filters-sidebar {

    background: #fff;

    border-radius: var(--card-radius);

    box-shadow: var(--card-shadow);

    padding: 25px;

    height: fit-content;

    position: relative;

    z-index: 1;

}



@media (min-width: 992px) {

    .filters-sidebar {

        position: sticky;

        top: 100px;

    }

}



/* Category Content */

.category-content {

    position: relative;

    z-index: 1;

}



.filters-sidebar h3 {

    font-size: 1.1rem;

    font-weight: 600;

    margin-bottom: 20px;

    padding-bottom: 15px;

    border-bottom: 1px solid #e5e7eb;

}



.filter-group {

    margin-bottom: 25px;

}



.filter-group h4 {

    font-size: 0.95rem;

    font-weight: 600;

    margin-bottom: 12px;

}



.filter-list {

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.filter-item {

    display: flex;

    align-items: center;

    gap: 10px;

    cursor: pointer;

}



.filter-item input[type="checkbox"] {

    width: 18px;

    height: 18px;

    accent-color: var(--color-primary);

    cursor: pointer;

}



/* Category Content */

.category-content {

    min-height: 400px;

}



.category-toolbar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

    flex-wrap: wrap;

    gap: 15px;

}



.results-count {

    color: var(--color-text-light);

    font-size: 0.9rem;

}



.sort-select {

    padding: 10px 40px 10px 15px;

    border: 1px solid #e5e7eb;

    border-radius: var(--btn-radius);

    background: #fff;

    cursor: pointer;

}



/* No Results */

.no-results {

    text-align: center;

    padding: 60px 20px;

    background: #fff;

    border-radius: var(--card-radius);

}



.no-results svg {

    width: 60px;

    height: 60px;

    color: var(--color-text-light);

    margin-bottom: 20px;

}



.no-results h3 {

    font-size: 1.25rem;

    margin-bottom: 10px;

}



.no-results p {

    color: var(--color-text-light);

}



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

   RESPONSIVE ADJUSTMENTS

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

@media (max-width: 575px) {

    .section {

        padding: 40px 0;

    }

    

    .section-title {

        font-size: 1.4rem;

    }

    

    .slide-content h1 {

        font-size: 1.5rem;

    }

    

    .product-details h1 {

        font-size: 1.5rem;

    }

    

    .cart-summary,

    .order-summary {

        position: static;

    }

    

    /* Mobile product grid fixes */

    .products-grid {

        gap: 10px;

    }

    

    .product-card {

        overflow: visible;

    }

    

    .product-card:hover {

        transform: none;

        z-index: 1;

    }

    

    .product-image {

        aspect-ratio: 1;

    }

    

    .product-image img {

        padding: 10px;

    }

    

    .product-info {

        padding: 10px;

    }

    

    .product-name {

        font-size: 0.85rem;

        -webkit-line-clamp: 2;

        line-height: 1.3;

    }

    

    .product-price {

        flex-direction: column;

        align-items: flex-start;

        gap: 3px;

    }

    

    .price-current {

        font-size: 1rem;

    }

    

    .price-old {

        font-size: 0.8rem;

    }

    

    .product-badges {

        margin-bottom: 5px;

    }

    

    .badge {

        font-size: 0.6rem;

        padding: 2px 6px;

    }

    

    .product-card .add-to-cart {

        padding: 8px;

        font-size: 0.8rem;

        margin-top: 10px;

    }

    

    .product-actions {

        display: none;

    }

    

    /* Color options mobile */

    .color-options {

        gap: 8px;

    }

    

    .color-option {

        padding: 8px 12px;

        font-size: 0.8rem;

    }

    

    .color-option .color-swatch {

        width: 16px;

        height: 16px;

    }

    

    /* Condition selector mobile */

    .condition-options {

        flex-direction: column;

        gap: 10px;

    }

    

    .product-condition-selector .condition-option {

        min-width: 100%;

    }

    

    /* Product page mobile fixes */

    .product-gallery {

        position: relative;

        z-index: 1;

    }

    

    .gallery-thumbs {

        position: relative;

        z-index: 1;

        margin-bottom: 20px;

    }

    

    .gallery-thumb {

        flex: 0 0 60px;

        height: 60px;

    }

    

    .product-details {

        position: relative;

        z-index: 2;

        background: var(--color-bg);

        padding-top: 10px;

    }

    

    /* Category page mobile */

    .category-layout {

        display: flex;

        flex-direction: column;

    }

    

    .filters-sidebar {

        position: relative;

        z-index: 1;

        margin-bottom: 20px;

    }

    

    .category-content {

        position: relative;

        z-index: 1;

    }

}



/* Bottom Navigation (Fshehur në Desktop/Tablet) */

/* Bottom nav: fshihet vetëm ne desktop - ne mobile/tablet eshte gjithmon visible */

@media (min-width: 992px) {

    .bottom-nav {

        display: none !important;

    }

}



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

   MOBILE RESPONSIVE DESIGN (< 768px)

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

@media (max-width: 767px) {

    /* Safe Area & Body Padding */

    :root {

        --safe-top: env(safe-area-inset-top, 0px);

        --safe-bottom: env(safe-area-inset-bottom, 0px);

    }

    

    body {

        padding-top: calc(146px + var(--safe-top)) !important;

        padding-bottom: calc(75px + var(--safe-bottom)) !important;

    }



    /* 1. Header (Sticky, Red bg, centered logo, actions on right, search on second row) */

    .header.sticky {

        position: fixed !important;

        top: 0 !important;

        left: 0 !important;

        right: 0 !important;

        background: var(--color-header-bg) !important; /* Red background */

        padding-top: var(--safe-top) !important;

        height: auto !important;

        z-index: 9999 !important;

        box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;

        border-bottom: none !important;

        display: block !important;

    }

    

    .header-main {

        background: transparent !important;

        padding: 0 !important;

        border-bottom: none !important;

    }

    

    .header-inner {

        display: flex !important;

        flex-wrap: wrap !important;

        align-items: center !important;

        justify-content: space-between !important;

        padding: 10px 16px !important;

        height: auto !important;

        gap: 8px 12px !important;

        box-sizing: border-box !important;

        position: relative !important;

    }

    

    /* Hamburger menu toggle on the LEFT */

    #hamburgerBtn {

        display: flex !important;

        order: 1 !important;

        background: transparent !important;

        border: none !important;

        color: white !important;

        width: 24px !important;

        height: 24px !important;

        align-items: center !important;

        justify-content: center !important;

        margin: 0 !important;

        padding: 0 !important;

        flex-shrink: 0 !important;

        position: relative !important;

    }

    

    #hamburgerBtn span {

        background: white !important;

    }



    /* Logo in the center */

    .header-inner .logo {

        order: 2 !important;

        position: absolute !important;

        left: 50% !important;

        transform: translateX(-50%) !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        margin: 0 !important;

        height: 42px !important;

        z-index: 10 !important;

    }

    

    .header-inner .logo img {

        height: 42px !important; /* 40-45px height */

        width: auto !important;

        max-height: 42px !important;

        filter: brightness(0) invert(1) !important; /* Force logo white */

        object-fit: contain !important;

    }

    

    .header-inner .logo .logo-text {

        color: white !important;

        font-size: 1.25rem !important;

        font-weight: 800 !important;

        margin: 0 !important;

    }



    /* Icons on the RIGHT: ❤️ 🔔 👤 */

    .header-actions {

        order: 3 !important;

        display: flex !important;

        align-items: center !important;

        gap: 3px !important;

        margin: 0 !important;

        padding: 0 !important;

    }



    .mobile-only-header-actions {

        display: flex !important;

        gap: 3px !important;

        align-items: center !important;

        flex-shrink: 0 !important;

        margin: 0 !important;

    }

    

    .header-action-btn {

        color: white !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 24px !important;

        height: 24px !important; /* Touch area 44x44px */

        background: transparent !important;

        border-radius: 50% !important;

        padding: 0 !important;

        box-sizing: border-box !important;

        text-decoration: none !important;

    }

    

    .header-action-btn svg {

        width: 23px !important; /* Icon size 22-24px */

        height: 23px !important;

    }



    /* Search bar container takes full width on the SECOND row */

    .search-bars-container {

        order: 4 !important;

        width: 100% !important;

        flex: none !important;

        max-width: none !important;

        margin: 0 !important;

        padding: 4px 0 10px 0 !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 8px !important;

    }

    

    .search-wrapper {

        width: 100% !important;

        display: flex !important;

    }

    

    .search-form {

        position: relative !important;

        width: 100% !important;

        background: white !important;

        border-radius: 50px !important;

        border: none !important;

        height: 52px !important; /* height around 50-56px */

        overflow: hidden !important;

        display: flex !important;

        align-items: center !important;

        box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important; /* very light shadow */

        padding: 0 6px !important;

    }

    

    .search-input {

        width: 100% !important;

        height: 100% !important;

        padding: 0 22px 0 56px !important; /* large padding to prevent left icon overlap */

        border: none !important;

        font-size: 14px !important;

        background: transparent !important;

        color: #1f2937 !important;

        box-sizing: border-box !important;

    }

    

    .search-btn {

        position: absolute !important;

        right: 6px !important;

        top: 6px !important;

        width: 40px !important;

        height: 40px !important;

        border-radius: 50% !important; /* circular search button */

        background: var(--color-primary) !important;

        color: white !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        box-shadow: none !important;

        padding: 0 !important;

        border: none !important;

    }

    

    .search-btn svg {

        width: 20px !important;

        height: 20px !important;

    }



    /* Hide language switcher, desktop navigation, old hamburger location, default cart button */

    #header-lang-switcher,

    .header-actions > #hamburgerBtn,

    .nav-bar,

    .header-actions > .cart-btn {

        display: none !important;

    }



    /* 5. Orange topbar navigation (HIDDEN) */
    .topbar {
        display: none !important;
        background: transparent !important;
        padding: 8px 0 !important;
        box-sizing: border-box !important;
    }

    

    .topbar-inner {

        display: flex !important;

        justify-content: flex-start !important;

        padding: 0 16px !important;

        width: 100% !important;

        box-sizing: border-box !important;

    }

    

    .topbar-links {

        display: flex !important;

        flex-direction: row !important;

        flex-wrap: nowrap !important;

        overflow-x: auto !important;

        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch !important;

        scroll-behavior: smooth !important;

        gap: 12px !important;

        width: 100% !important;

        align-items: center !important;

    }

    

    .topbar-links::-webkit-scrollbar {

        display: none !important;

    }

    

    .topbar-link {

        color: white !important;

        font-size: 13px !important;

        font-weight: 600 !important;

        padding: 6px 12px !important;

        border-radius: 20px !important;

        background: rgba(255, 255, 255, 0.2) !important;

        display: inline-block !important;

        white-space: nowrap !important;

    }



    /* 2. Categories Horizontal Scroll */

    .categories-grid,

    #categories-grid-container,

    #subcategories-grid-container {

        display: flex !important;

        flex-direction: row !important;

        flex-wrap: nowrap !important;

        overflow-x: auto !important;

        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch !important;

        scroll-behavior: smooth !important;

        gap: 10px !important;

        padding: 10px 14px !important;

        margin: 0 -14px !important;

        width: calc(100% + 28px) !important;

        box-sizing: border-box !important;

    }

    

    .categories-grid::-webkit-scrollbar,

    #categories-grid-container::-webkit-scrollbar,

    #subcategories-grid-container::-webkit-scrollbar {

        display: none !important;

    }



    .category-card,

    .categories-grid a,

    #categories-grid-container a,

    #subcategories-grid-container a {

        flex: 0 0 76px !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        padding: 10px 6px !important;

        background: #ffffff !important;

        border-radius: 14px !important;

        text-align: center !important;

        box-sizing: border-box !important;

        border: 1px solid #f3f4f6 !important;

    }

    

    .category-card:hover {

        transform: none !important;

    }



    .category-icon,

    .category-card .category-icon {

        width: 48px !important;

        height: 48px !important;

        margin: 0 0 6px 0 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        flex-shrink: 0 !important;

    }

    

    .category-icon img,

    .category-card .category-icon img {

        width: 100% !important;

        height: 100% !important;

        object-fit: contain !important;

    }

    

    .category-card h3,

    .categories-grid h3,

    #categories-grid-container h3,

    #subcategories-grid-container h3 {

        font-size: 11px !important;

        line-height: 1.2 !important;

        font-weight: 500 !important;

        color: #374151 !important;

        margin: 0 !important;

        word-break: break-word !important;

    }



    /* 3. Products Grid (2 per row, gap 10px, border-radius 14px, custom ordering) */

    .products-grid,

    #featured-products-grid,

    #special-offers-grid,

    #bestsellers-grid,

    #category-products-grid {

        display: grid !important;

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

        gap: 10px !important;

        padding: 0 14px !important;

        margin: 0 !important;

        width: 100% !important;

        box-sizing: border-box !important;

    }

    

    .product-card {

        background: #ffffff !important;

        border-radius: 14px !important;

        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;

        border: 1px solid #f3f4f6 !important;

        display: flex !important;

        flex-direction: column !important;

        padding: 10px !important;

        margin: 0 !important;

        position: relative !important;

        overflow: hidden !important;

        height: 100% !important;

        box-sizing: border-box !important;

    }

    

    .product-image {

        position: relative !important;

        width: 100% !important;

        aspect-ratio: 1 !important;

        margin-bottom: 8px !important;

        background: #f9fafb !important;

        border-radius: 8px !important;

        overflow: hidden !important;

    }

    

    .product-image img {

        width: 100% !important;

        height: 100% !important;

        object-fit: contain !important;

        padding: 4px !important;

    }



    /* Badges placement on mobile card */

    .product-badges {

        position: absolute !important;

        top: 6px !important;

        left: 6px !important;

        z-index: 2 !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 3px !important;

    }

    

    .badge {

        font-size: 9px !important;

        padding: 2px 5px !important;

        border-radius: 4px !important;

        font-weight: 700 !important;

    }

    

    .badge-sale {

        background: var(--color-primary) !important;

        color: white !important;

    }



    /* Product Info positioning & custom lines ordering */

    .product-info {

        display: flex !important;

        flex-direction: column !important;

        flex: 1 !important;

        padding: 0 !important;

    }

    

    .product-info::before {

        display: none !important;

    }

    

    /* Transport Falas Badge */

    .product-info::after {

        content: "🟢 Transport Falas" !important;

        font-size: 10px !important;

        color: #10b981 !important; /* green */

        font-weight: 600 !important;

        margin-bottom: 4px !important;

        order: 0 !important; /* At the top, right below the image */

    }



    .product-category {

        display: none !important;

    }

    

    .product-name {

        font-size: 12px !important;

        font-weight: 500 !important;

        color: #1f2937 !important;

        margin-bottom: 6px !important;

        height: 32px !important; /* Exactly 2 lines */

        overflow: hidden !important;

        display: -webkit-box !important;

        -webkit-line-clamp: 2 !important;

        -webkit-box-orient: vertical !important;

        line-height: 1.3 !important;

        order: 2 !important;

    }

    

    .product-price {

        display: flex !important;

        flex-direction: row !important;

        align-items: baseline !important;

        gap: 6px !important;

        margin-bottom: 10px !important;

        order: 3 !important;

    }

    

    .price-current {

        font-size: 14px !important;

        color: var(--color-price) !important; /* current price red */

        font-weight: 700 !important;

    }

    

    .price-old {

        font-size: 11px !important;

        color: #9ca3af !important;

        text-decoration: line-through !important;

    }

    

    .price-mkd {

        font-size: 10px !important;

        color: #6b7280 !important;

    }



    /* Product card bottom action row: Buy button and Cart icon */

    .product-card .add-to-cart {

        display: none !important;

    }

    

    .product-actions {

        display: flex !important;

        position: static !important;

        opacity: 1 !important;

        background: transparent !important;

        width: 100% !important;

        padding: 0 !important;

        justify-content: space-between !important;

        align-items: center !important;

        gap: 8px !important;

        order: 4 !important;

        margin-top: auto !important;

    }

    

    /* View details button turned into red pill "Blej tani" */

    .product-actions a.action-btn {

        flex: 1 !important;

        background: var(--color-primary) !important;

        color: white !important;

        height: 38px !important;

        border-radius: 30px !important;

        font-size: 12px !important;

        font-weight: 600 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        text-decoration: none !important;

        box-shadow: none !important;

    }

    

    .product-actions a.action-btn::after {

        content: "Blej tani" !important;

    }

    

    .product-actions a.action-btn svg {

        display: none !important;

    }

    

    /* Quick add button turned into small gray cart icon button */

    .product-actions button.quick-add-btn {

        width: 38px !important;

        height: 38px !important;

        border-radius: 50% !important;

        background: #f3f4f6 !important;

        color: #1f2937 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        flex-shrink: 0 !important;

        box-shadow: none !important;

        border: none !important;

        padding: 0 !important;

    }

    .product-actions button.quick-add-btn svg {

        width: 18px !important;

        height: 18px !important;

    }



    /* 4. Fixed Bottom Navigation Bar */

    .bottom-nav {

        position: fixed !important;

        bottom: 0 !important;

        left: 0 !important;

        right: 0 !important;

        height: calc(56px + var(--safe-bottom)) !important;

        background: #ffffff !important;

        border-top: 1px solid #e5e7eb !important;

        display: flex !important;

        align-items: center !important;

        justify-content: space-around !important;

        padding-bottom: var(--safe-bottom) !important;

        z-index: 1000 !important;

        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05) !important;

        box-sizing: border-box !important;

    }

    

    .bottom-nav-item {

        flex: 1 !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        text-decoration: none !important;

        color: #9ca3af !important; /* Inactive color */

        height: 56px !important;

        font-size: 10px !important;

        font-weight: 500 !important;

        transition: color 0.2s !important;

    }

    

    .bottom-nav-item svg {

        margin-bottom: 2px !important;

        width: 22px !important;

        height: 22px !important;

    }

    

    .bottom-nav-item.active-nav {

        color: var(--color-primary) !important;

    }

    

    /* Circular, Floating Middle Cart Item Overlay */

    .bottom-nav-item-cart-wrapper {

        position: relative !important;

        width: 58px !important;

        height: 58px !important;

        margin-top: -24px !important; /* float up slightly */

        flex-shrink: 0 !important;

        z-index: 1002 !important;

    }

    

    .bottom-nav-cart {

        position: absolute !important;

        top: 0 !important;

        left: 0 !important;

        right: 0 !important;

        bottom: 0 !important;

        border-radius: 50% !important;

        background: #ffffff !important;

        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12) !important;

        border: 1px solid #e5e7eb !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        color: #9ca3af !important;

        box-sizing: border-box !important;

    }

    

    .bottom-nav-cart.active-nav {

        background: var(--color-primary) !important;

        color: #ffffff !important;

        border-color: var(--color-primary) !important;

    }



    /* Style the transparent actual cart button to overlap the floating middle tab */

    #cart-icon-btn {

        position: fixed !important;

        bottom: calc(var(--safe-bottom) + 16px) !important;

        left: 50% !important;

        transform: translateX(-50%) !important;

        width: 58px !important;

        height: 58px !important;

        border-radius: 50% !important;

        z-index: 1003 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        background: transparent !important;

        border: none !important;

        box-shadow: none !important;

        padding: 0 !important;

        cursor: pointer !important;

    }

    #cart-icon-btn svg {

        display: none !important; /* hide default SVG since floating nav provides it */

    }

    #cart-icon-btn .cart-count {

        position: absolute !important;

        top: -4px !important;

        right: -4px !important;

        background: var(--color-primary) !important;

        color: white !important;

        border: 2px solid white !important;

        border-radius: 50% !important;

        min-width: 18px !important;

        height: 18px !important;

        font-size: 10px !important;

        font-weight: 700 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        padding: 0 3px !important;

    }



    /* Mobile responsive layouts for layout pages (index, category, cart, profile, checkout) */

    .hero-slider-section {

        margin-top: 10px !important;

        margin-bottom: 20px !important;

    }

    .hero-slider {

        border-radius: 12px !important;

        height: 180px !important;

    }

    .slide-content h1 {

        font-size: 1.25rem !important;

    }



    /* Cart and checkout pages on mobile */

    .cart-layout, .checkout-layout, .profile-layout {

        grid-template-columns: 1fr !important;

        gap: 20px !important;

        padding: 0 14px !important;

    }

    

    .cart-summary, .order-summary, .profile-sidebar {

        position: static !important;

        width: 100% !important;

        box-sizing: border-box !important;

    }

}



/* Print Styles */

@media print {

    .header,

    .footer,

    .flash-message,

    .hamburger,

    .cart-btn,

    .bottom-nav {

        display: none !important;

    }

    

    body {

        background: #fff;

    }

    

    .main-content {

        padding: 0;

    }

}



#hamburgerBtn { z-index: 10001 !important; cursor: pointer !important; pointer-events: auto !important; }







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

   STYLED PRODUCT DETAILS (SCREENSHOT STYLE)

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

.product-info-grid-styled {

    display: flex;

    flex-direction: column;

    width: 100%;

    margin-bottom: 20px;

    border-top: 1px solid #e5e7eb;

    border-bottom: 1px solid #e5e7eb;

    padding: 10px 0;

}



.info-grid-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px 0;

    border-bottom: 1px solid #f3f4f6;

    font-size: 14px;

}



.info-grid-row:last-child {

    border-bottom: none;

}



.info-label {

    color: #4b5563;

    font-weight: 500;

    display: flex;

    align-items: center;

}



.info-value {

    font-weight: 600;

    color: #111827;

}



/* Installment Row Specifics */

.installment-row {

    flex-direction: column;

    align-items: flex-start;

    gap: 8px;

}



.installment-title {

    font-weight: 700;

    color: #1f2937;

    font-size: 14px;

}



.installment-details {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

}



.card-icons {

    display: flex;

    gap: 6px;

}



.card-icon {

    font-size: 9px;

    font-weight: 800;

    padding: 2px 6px;

    border-radius: 4px;

    letter-spacing: 0.5px;

    font-family: sans-serif;

}



.card-icon.visa {

    background: #1a1f71;

    color: #f7b614;

}



.card-icon.mc {

    background: #f79e1b;

    color: #fff;

    font-style: italic;

}



.installment-desc {

    font-size: 13px;

    color: #4b5563;

}



/* Quantity & Buy Inline Row */

.quantity-buy-row {

    display: flex;

    align-items: center;

    gap: 15px;

    margin: 24px 0;

    width: 100%;

}



.quantity-buy-row .quantity-selector {

    margin: 0 !important;

    flex-shrink: 0;

}



.btn-add-to-cart-styled {

    flex: 1;

    background: #ff5f00 !important; /* Orange background exactly like screenshot */

    color: #ffffff !important;

    border: none !important;

    border-radius: 12px !important;

    padding: 14px 24px !important;

    font-size: 16px !important;

    font-weight: 600 !important;

    cursor: pointer !important;

    transition: all 0.2s ease !important;

    box-shadow: 0 4px 12px rgba(255, 95, 0, 0.2) !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    height: 48px !important;

}



.btn-add-to-cart-styled:hover {

    background: #e05400 !important;

    transform: translateY(-1px) !important;

}



/* Stock Status Badges */

.stock-status-badge {

    padding: 4px 12px;

    border-radius: 20px;

    font-size: 13px;

    font-weight: 600;

}



.stock-status-badge.in-stock {

    background: #def7ec;

    color: #03543f;

}



.stock-status-badge.out-of-stock {

    background: #fde8e8;

    color: #9b1c1c;

}



/* Trust Badges (USP List) */

.trust-badges-list {

    display: flex;

    flex-direction: column;

    gap: 12px;

    border-top: 1px solid #e5e7eb;

    padding-top: 18px;

    margin-top: 10px;

}



.trust-badge-item {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 13.5px;

    color: #374151;

    font-weight: 500;

}



.trust-icon {

    color: #ff5f00; /* Matching theme orange */

    flex-shrink: 0;

}







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

   MOBILE HEADER DESIGN MATCHING SCREENSHOT

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

@media (max-width: 767px) {

    /* Main header background to White */

    .header.sticky {

        background: #ffffff !important;

        border-bottom: 1px solid #e5e7eb !important;

        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;

    }

    

    /* Hamburger menu lines to Dark Gray */

    #hamburgerBtn span {

        background: #1f2937 !important;

    }

    

    /* Center Logo */

    .header-inner .logo {

        position: absolute !important;

        left: 50% !important;

        transform: translateX(-50%) !important;

        order: 2 !important;

        margin: 0 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        height: 44px !important;

        z-index: 10 !important;

    }

    

    /* Disable Logo White filter, keep original colors */

    .header-inner .logo img {

        height: 38px !important;

        max-height: 38px !important;

        width: auto !important;

        filter: none !important;

        object-fit: contain !important;

    }

    

    .header-inner .logo .logo-text {

        color: #1f2937 !important;

        font-size: 1.2rem !important;

        font-weight: 700 !important;

        margin: 0 !important;

    }



    /* Hide extra actions in top header */

    .mobile-only-header-actions {

        display: none !important;

    }

    #header-lang-switcher {

        display: none !important;

    }



    /* Cart button on the far right in header */

    .header-actions {

        order: 3 !important;

        margin-left: auto !important;

        display: flex !important;

        align-items: center !important;

        padding: 0 !important;

    }



    .header-actions > .cart-btn {

        display: flex !important; /* Restore cart button display in header */

    }



    #cart-icon-btn {

        position: relative !important;

        bottom: auto !important;

        left: auto !important;

        transform: none !important;

        width: 44px !important;

        height: 44px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        background: transparent !important;

        color: #1f2937 !important;

        border: none !important;

        box-shadow: none !important;

        padding: 0 !important;

        z-index: 10 !important;

    }



    #cart-icon-btn svg {

        display: block !important; /* Show SVG cart icon */

        width: 24px !important;

        height: 24px !important;

        color: #1f2937 !important;

    }



    #cart-icon-btn .cart-count {

        position: absolute !important;

        top: 2px !important;

        right: 2px !important;

        background: #ef4444 !important; /* Red badge */

        color: white !important;

        border: 2px solid white !important;

        border-radius: 50% !important;

        min-width: 18px !important;

        height: 18px !important;

        font-size: 9px !important;

        font-weight: 700 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        padding: 0 3px !important;

    }



    /* Hide Bottom Fixed Navigation Bar */

    .bottom-nav {

        display: none !important;

    }

    

    body {

        padding-bottom: 0 !important; /* Remove bottom spacing since bottom-nav is hidden */

    }



    /* Search Bar Layout (Second Row) - White & Soft Rounded Corners */

    .search-bars-container {

        order: 4 !important;

        width: 100% !important;

        flex: none !important;

        max-width: none !important;

        margin: 0 !important;

        padding: 8px 16px 14px 16px !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 8px !important;

        box-sizing: border-box !important;

    }



    .search-wrapper {

        width: 100% !important;

        display: flex !important;

    }



    .search-form {

        position: relative !important;

        width: 100% !important;

        background: #f9fafb !important; /* soft white/gray background */

        border: 1px solid var(--border) !important; /* light gray border */

        border-radius: 12px !important; /* soft rounded corners like photo */

        height: 48px !important;

        overflow: hidden !important;

        display: flex !important;

        align-items: center !important;

        box-shadow: none !important;

        padding: 0 !important;

        box-sizing: border-box !important;

    }



    .search-input {

        width: 100% !important;

        height: 100% !important;

        padding: 0 16px 0 56px !important; /* text starts after left icon */

        border: none !important;

        font-size: 14.5px !important;

        background: transparent !important;

        color: #1f2937 !important;

        box-sizing: border-box !important;

    }



    .search-input::placeholder {

        color: #9ca3af !important;

        font-weight: 400 !important;

    }



    .search-btn {

        position: absolute !important;

        left: 12px !important; /* Position icon on the left */

        right: auto !important;

        top: 50% !important;

        transform: translateY(-50%) !important;

        background: transparent !important;

        color: #9ca3af !important; /* gray icon */

        box-shadow: none !important;

        border: none !important;

        pointer-events: none !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 24px !important;

        height: 24px !important;

        padding: 0 !important;

    }



    .search-btn svg {

        width: 20px !important;

        height: 20px !important;

        color: #9ca3af !important;

    }

}







/* Fix logo vertical alignment, hide search when menu is open */

@media (max-width: 767px) {

    .header-inner {

        position: relative !important; /* Ensure absolute positioning context */

    }

    

    .header-inner .logo {

        position: absolute !important;

        top: 10px !important; /* Vertically center in the first row */

        left: 50% !important;

        transform: translateX(-50%) !important;

        height: 44px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

    }



    /* Hide search input inside the hamburger menu panel */

    .mobile-search {

        display: none !important;

    }



    /* Hide main header search bar when hamburger menu is open */

    body.menu-open .search-bars-container {

        display: none !important;

    }

}







/* Dynamic colors for Hamburger icon and text */

#hamburgerBtn span {

    background: var(--color-hamburger, #1f2937) !important;

}

.nav-mobile a, .nav-mobile span, .nav-mobile button, .nav-mobile .mobile-menu-title {

    color: var(--color-hamburger-text, #1f2937) !important;

}







/* E-Commerce Premium Mobile Responsive Cart Item Layout */

@media (max-width: 767px) {

    .cart-item {

        display: grid !important;

        grid-template-areas: 

            "product product"

            "price qty"

            "total remove" !important;

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

        gap: 14px 10px !important;

        padding: 16px !important;

        align-items: center !important;

        border-bottom: 1px solid #f3f4f6 !important;

    }

    

    .cart-product {

        grid-area: product !important;

        display: flex !important;

        align-items: flex-start !important;

        text-align: left !important;

        gap: 12px !important;

    }

    

    .cart-product-image {

        width: 75px !important;

        height: 75px !important;

        background: #f9fafb !important;

        border: 1px solid #f3f4f6 !important;

        border-radius: 8px !important;

    }

    

    .cart-product-info {

        text-align: left !important;

    }

    

    .cart-product-info h3 {

        font-size: 0.95rem !important;

        font-weight: 600 !important;

        margin-bottom: 4px !important;

        line-height: 1.3 !important;

    }

    

    .cart-price {

        grid-area: price !important;

        text-align: left !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;

    }

    

    .cart-price .mobile-label {

        font-size: 11px !important;

        color: #9ca3af !important;

        margin-bottom: 2px !important;

        display: block !important;

    }

    

    .cart-quantity {

        grid-area: qty !important;

        display: flex !important;

        justify-content: flex-end !important;

        align-items: center !important;

    }

    

    .cart-subtotal {

        grid-area: total !important;

        text-align: left !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;

    }

    

    .cart-subtotal .mobile-label {

        font-size: 11px !important;

        color: #9ca3af !important;

        margin-bottom: 2px !important;

        display: block !important;

    }

    

    .cart-remove {

        grid-area: remove !important;

        display: flex !important;

        justify-content: flex-end !important;

        align-items: center !important;

    }

    

    .cart-remove button {

        width: 36px !important;

        height: 36px !important;

        border-radius: 8px !important;

    }

}







/* Restore Bottom Navigation and style bottom cart badge */

@media (max-width: 767px) {

    .bottom-nav {

        display: flex !important; /* Restore bottom nav bar */

    }

    

    body {

        padding-bottom: calc(75px + var(--safe-bottom)) !important; /* Restore body spacing */

    }

    

    #bottom-nav-cart {

        position: relative !important;

        cursor: pointer !important;

    }



    #bottom-nav-cart .cart-count {

        position: absolute !important;

        top: -4px !important;

        right: -4px !important;

        background: #ef4444 !important; /* Red badge */

        color: white !important;

        border: 2px solid white !important;

        border-radius: 50% !important;

        min-width: 18px !important;

        height: 18px !important;

        font-size: 10px !important;

        font-weight: 700 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        padding: 0 3px !important;

        z-index: 10 !important;

    }

}







/* Premium Swipeable Horizontal Filter Badges for Mobile */

@media (max-width: 991px) {

    .filters-sidebar {

        background: transparent !important;

        box-shadow: none !important;

        padding: 0 16px !important;

        margin-top: 10px !important;

        margin-bottom: 15px !important;

    }

    

    .filters-sidebar h3,

    .filters-sidebar h4,

    .filter-group h4 {

        display: none !important; /* Hide big headers to save space */

    }



    .filter-group {

        margin-bottom: 10px !important;

    }



    #sidebar-categories-tree {

        display: flex !important;

        flex-direction: row !important;

        flex-wrap: nowrap !important;

        gap: 8px !important;

        overflow-x: auto !important;

        padding: 4px 16px 12px 16px !important;

        margin: 0 -16px !important;

        -webkit-overflow-scrolling: touch !important;

        scrollbar-width: none !important; /* Hide scrollbar Firefox */

        touch-action: pan-x !important; /* Lejo swipe horizontal */

    }



    #sidebar-categories-tree::-webkit-scrollbar {

        display: none !important; /* Hide scrollbar Chrome/Safari */

    }



    #sidebar-categories-tree > div,

    #sidebar-categories-tree .app-category-accordion,

    #sidebar-categories-tree .app-category-header {

        display: inline-block !important;

        border: none !important;

        margin: 0 !important;

        padding: 0 !important;

        flex-shrink: 0 !important;

    }



    /* Hide subcategories levels / toggle buttons in horizontal scroll list to keep it 1-level clean */

    #sidebar-categories-tree .accordion-toggle,

    #sidebar-categories-tree .app-category-content {

        display: none !important;

    }



    #sidebar-categories-tree .filter-item {

        display: inline-block !important;

        background: #f3f4f6 !important; /* Light gray badge background */

        color: #374151 !important; /* Dark text */

        border: 1px solid #e5e7eb !important;

        border-radius: 20px !important;

        padding: 8px 16px !important;

        font-size: 13.5px !important;

        font-weight: 500 !important;

        white-space: nowrap !important;

        margin: 0 !important;

        text-align: center !important;

        height: auto !important;

        width: auto !important;

    }



    #sidebar-categories-tree .filter-item.active {

        background: var(--color-primary) !important; /* Primary color */

        color: white !important;

        border-color: var(--color-primary) !important;

    }



    /* Filters list (New, Offers, Bestseller) - horizontal list */

    #sidebar-filters-list {

        display: flex !important;

        flex-direction: row !important;

        flex-wrap: nowrap !important;

        gap: 8px !important;

        overflow-x: auto !important;

        padding: 4px 16px 12px 16px !important;

        margin: 0 -16px 10px -16px !important;

        -webkit-overflow-scrolling: touch !important;

        scrollbar-width: none !important;

    }

    

    #sidebar-filters-list::-webkit-scrollbar {

        display: none !important;

    }



    #sidebar-filters-list .filter-item {

        display: inline-block !important;

        background: #f3f4f6 !important;

        color: #374151 !important;

        border: 1px solid #e5e7eb !important;

        border-radius: 20px !important;

        padding: 8px 16px !important;

        font-size: 13.5px !important;

        font-weight: 500 !important;

        white-space: nowrap !important;

        margin: 0 !important;

        text-align: center !important;

    }



    #sidebar-filters-list .filter-item.active {

        background: var(--color-primary) !important;

        color: white !important;

        border-color: var(--color-primary) !important;

    }

}







/* Desktop fallback: hide icons on categories sidebar */

@media (min-width: 992px) {

    .filter-item-icon-wrapper {

        display: none !important;

    }

}







/* Desktop fallback: hide icons on categories sidebar */

@media (min-width: 992px) {

    .sidebar-category-icon {

        display: none !important;

    }

    .sidebar-category-card {

        display: block !important;

        padding: 14px 15px !important;

        font-size: 1.1rem !important;

        font-weight: 500 !important;

        color: var(--color-text) !important;

        text-decoration: none !important;

        transition: all 0.3s ease !important;

    }

    .sidebar-category-card.active {

        color: var(--color-primary) !important;

        font-weight: 600 !important;

    }

    .sidebar-category-wrapper {

        border-bottom: 1px solid #f0f0f0 !important;

    }

}



/* Mobile: layout matching homepage featured categories cards */

@media (max-width: 991px) {

    .filters-sidebar {

        background: transparent !important;

        box-shadow: none !important;

        padding: 0 16px !important;

        margin-top: 10px !important;

        margin-bottom: 15px !important;

    }

    

    .filters-sidebar h3,

    .filters-sidebar h4,

    .filter-group h4 {

        display: none !important;

    }



    .filter-group {

        margin-bottom: 10px !important;

    }



    #sidebar-categories-tree {

        display: flex !important;

        flex-direction: row !important;

        flex-wrap: nowrap !important;

        overflow-x: auto !important;

        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch !important;

        scroll-behavior: smooth !important;

        gap: 10px !important;

        padding: 10px 14px !important;

        margin: 0 -14px !important;

        width: calc(100% + 28px) !important;

        box-sizing: border-box !important;

        scrollbar-width: none !important;

    }



    #sidebar-categories-tree::-webkit-scrollbar {

        display: none !important;

    }



    .sidebar-category-wrapper {

        display: inline-block !important;

        border: none !important;

        margin: 0 !important;

        padding: 0 !important;

        flex-shrink: 0 !important;

    }



    /* Hide accordion toggles on mobile */

    #sidebar-categories-tree .accordion-toggle,

    #sidebar-categories-tree .app-category-content {

        display: none !important;

    }



    /* The main category card */

    .sidebar-category-card {

        flex: 0 0 85px !important; /* matching size */

        width: 85px !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        padding: 10px 6px !important;

        background: #ffffff !important;

        border-radius: 14px !important;

        text-align: center !important;

        box-sizing: border-box !important;

        border: 1px solid #f3f4f6 !important;

        text-decoration: none !important;

        transition: all 0.2s ease !important;

        box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important;

    }



    /* Circle wrapper for the icon with dynamic/golden ring shadow */

    .sidebar-category-icon {

        width: 48px !important;

        height: 48px !important;

        margin: 0 0 6px 0 !important;

        background: #fff !important;

        border-radius: 50% !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        flex-shrink: 0 !important;

        box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(255, 147, 0, 0.25), 0 4px 15px rgba(255, 147, 0, 0.15) !important; /* Golden/orange ring */

        transition: all 0.2s ease !important;

    }



    .sidebar-category-icon img {

        width: 100% !important;

        height: 100% !important;

        object-fit: contain !important;

        padding: 6px !important;

    }



    .sidebar-category-icon svg {

        width: 20px !important;

        height: 20px !important;

        color: #4b5563 !important;

    }



    /* Category text name */

    .sidebar-category-name {

        font-size: 11px !important;

        line-height: 1.2 !important;

        font-weight: 500 !important;

        color: #374151 !important;

        margin: 0 !important;

        word-break: break-word !important;

        display: block !important;

    }



    /* Active State (Selected Category) */

    .sidebar-category-card.active {

        border-color: var(--color-primary) !important;

        box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;

    }



    .sidebar-category-card.active .sidebar-category-icon {

        box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--color-primary), 0 4px 15px rgba(0, 0, 0, 0.1) !important;

    }



    .sidebar-category-card.active .sidebar-category-name {

        color: var(--color-primary) !important;

        font-weight: 600 !important;

    }



    /* Hide the second row completely */

    #sidebar-filters-list {

        display: none !important;

    }

}



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

   PREMIUM MOBILE CATEGORY PAGE REDESIGN (320px - 480px)

   Apple Store / Amazon App / Samsung Store aesthetic

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

@media (max-width: 767px) {



    /* -----------------------------------------------------------------------

       1. PAGE CONTAINER - Remove large top padding

    ----------------------------------------------------------------------- */

    .category-page {

        padding: 8px 0 16px !important;

    }



    /* Hide category page H1 title on mobile - saves vertical space */

    .category-header {

        display: none !important;

    }





    /* -----------------------------------------------------------------------

       2. LAYOUT: Column flex, no gap

    ----------------------------------------------------------------------- */

    .category-layout {

        display: flex !important;

        flex-direction: column !important;

        gap: 0 !important;

    }



    /* -----------------------------------------------------------------------

       3. FILTERS SIDEBAR - Transparent compact chip container

    ----------------------------------------------------------------------- */

    .filters-sidebar {

        background: transparent !important;

        box-shadow: none !important;

        padding: 0 !important;

        margin: 0 0 4px 0 !important;

        border-radius: 0 !important;

    }



    .filters-sidebar h3,

    .filters-sidebar h4,

    .filter-group h4,

    #sidebar-categories-title,

    #sidebar-filter-title {

        display: none !important;

    }



    .filter-group {

        margin-bottom: 0 !important;

    }



    /* -----------------------------------------------------------------------

       4. CATEGORY CHIPS - Compact 44px horizontal scroll row

    ----------------------------------------------------------------------- */

    #sidebar-categories-tree {

        display: flex !important;

        flex-direction: row !important;

        flex-wrap: nowrap !important;

        overflow-x: auto !important;

        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch !important;

        scroll-behavior: smooth !important;

        gap: 8px !important;

        padding: 8px 16px 10px 16px !important;

        margin: 0 !important;

        width: 100% !important;

        box-sizing: border-box !important;

        scrollbar-width: none !important;

        align-items: center !important;

        touch-action: pan-x !important; /* Lejo swipe horizontal të kategorive */

    }



    #sidebar-categories-tree::-webkit-scrollbar {

        display: none !important;

    }



    .sidebar-category-wrapper {

        display: flex !important;

        flex-shrink: 0 !important;

        border: none !important;

        margin: 0 !important;

        padding: 0 !important;

    }



    #sidebar-categories-tree .accordion-toggle,

    #sidebar-categories-tree .app-category-content,

    #sidebar-categories-tree .app-category-header {

        display: none !important;

    }



    /* The chip itself */

    .sidebar-category-card {

        display: inline-flex !important;

        flex-direction: row !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 6px !important;

        height: 44px !important;

        padding: 0 14px !important;

        border-radius: 14px !important;

        border: 1.5px solid #e5e7eb !important;

        background: #ffffff !important;

        font-size: 13px !important;

        font-weight: 600 !important;

        color: #374151 !important;

        text-decoration: none !important;

        white-space: nowrap !important;

        transition: all 0.2s ease !important;

        box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;

        box-sizing: border-box !important;

        flex-shrink: 0 !important;

        width: auto !important;

    }



    /* Icon inside chip - small inline */

    .sidebar-category-icon {

        width: 20px !important;

        height: 20px !important;

        border-radius: 0 !important;

        background: transparent !important;

        box-shadow: none !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        flex-shrink: 0 !important;

        margin: 0 !important;

    }



    .sidebar-category-icon img {

        width: 20px !important;

        height: 20px !important;

        object-fit: contain !important;

        padding: 0 !important;

        border-radius: 0 !important;

    }



    .sidebar-category-icon svg {

        width: 18px !important;

        height: 18px !important;

        color: #6b7280 !important;

    }



    .sidebar-category-name {

        font-size: 13px !important;

        font-weight: 600 !important;

        color: #374151 !important;

        line-height: 1 !important;

        margin: 0 !important;

        white-space: nowrap !important;

        display: inline !important;

    }



    /* ACTIVE / SELECTED chip - Blue background */

    .sidebar-category-card.active {

        background: #2563eb !important;

        border-color: #2563eb !important;

        color: #ffffff !important;

        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;

    }



    .sidebar-category-card.active .sidebar-category-icon {

        box-shadow: none !important;

    }



    .sidebar-category-card.active .sidebar-category-icon svg {

        color: #ffffff !important;

    }



    .sidebar-category-card.active .sidebar-category-name {

        color: #ffffff !important;

    }



    /* -----------------------------------------------------------------------

       5. FILTER CHIPS ROW (Rejat / Ofertat / Bestseller)

    ----------------------------------------------------------------------- */

    #sidebar-filters-list {

        display: flex !important;

        flex-direction: row !important;

        flex-wrap: nowrap !important;

        overflow-x: auto !important;

        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch !important;

        scroll-behavior: smooth !important;

        gap: 8px !important;

        padding: 0 16px 10px 16px !important;

        margin: 0 !important;

        width: 100% !important;

        box-sizing: border-box !important;

        scrollbar-width: none !important;

        align-items: center !important;

    }



    #sidebar-filters-list::-webkit-scrollbar {

        display: none !important;

    }



    #sidebar-filters-list .filter-item {

        display: inline-flex !important;

        align-items: center !important;

        height: 36px !important;

        padding: 0 14px !important;

        border-radius: 20px !important;

        border: 1.5px solid #e5e7eb !important;

        background: #f9fafb !important;

        font-size: 12.5px !important;

        font-weight: 600 !important;

        color: #374151 !important;

        text-decoration: none !important;

        white-space: nowrap !important;

        flex-shrink: 0 !important;

        transition: all 0.2s ease !important;

        cursor: pointer !important;

        box-sizing: border-box !important;

    }



    #sidebar-filters-list .filter-item.active {

        background: #2563eb !important;

        border-color: #2563eb !important;

        color: #ffffff !important;

    }



    /* -----------------------------------------------------------------------

       6. SUBCATEGORIES GRID - on mobile JS renders as flex chip row

       NOTE: JS sets inline styles for display/flex/overflow/gap/padding

    ----------------------------------------------------------------------- */

    #subcategories-grid-container {

        scrollbar-width: none !important;

        -webkit-overflow-scrolling: touch !important;

    }



    #subcategories-grid-container::-webkit-scrollbar {

        display: none !important;

    }



    /* Old desktop category-card style — hidden on mobile, JS won't render them */

    #subcategories-grid-container a.category-card {

        display: none !important;

    }







    /* -----------------------------------------------------------------------

       7. TOOLBAR - Count + Sort on ONE row, compact

    ----------------------------------------------------------------------- */

    .category-toolbar {

        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;

        justify-content: space-between !important;

        padding: 0 16px 10px 16px !important;

        margin: 0 !important;

        gap: 8px !important;

        flex-wrap: nowrap !important;

    }



    .results-count {

        font-size: 12px !important;

        font-weight: 600 !important;

        color: #6b7280 !important;

        white-space: nowrap !important;

        flex-shrink: 0 !important;

    }



    .sort-select {

        font-size: 12px !important;

        font-weight: 600 !important;

        color: #374151 !important;

        background: #f9fafb !important;

        border: 1.5px solid #e5e7eb !important;

        border-radius: 10px !important;

        padding: 7px 10px 7px 12px !important;

        height: 36px !important;

        cursor: pointer !important;

        flex-shrink: 0 !important;

        max-width: 170px !important;

        box-sizing: border-box !important;

    }



    /* -----------------------------------------------------------------------

       8. PRODUCTS GRID - Start immediately, no extra space

    ----------------------------------------------------------------------- */

    .category-content {

        min-height: auto !important;

        padding: 0 !important;

    }



    #category-products-grid {

        display: grid !important;

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

        gap: 10px !important;

        padding: 0 12px 12px 12px !important;

        margin: 0 !important;

        width: 100% !important;

        box-sizing: border-box !important;

    }



    /* -----------------------------------------------------------------------

       9. PRODUCT CARDS - Modern premium cards

    ----------------------------------------------------------------------- */

    .product-card {

        background: #ffffff !important;

        border-radius: 14px !important;

        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;

        border: 1px solid #f3f4f6 !important;

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

    }



    .product-card:active {

        transform: scale(0.98) !important;

    }



    /* -----------------------------------------------------------------------

       10. BREADCRUMB - Compact

    ----------------------------------------------------------------------- */

    .breadcrumb {

        padding: 4px 0 !important;

    }



    .breadcrumb-list {

        font-size: 11px !important;

        padding: 0 16px !important;

        gap: 4px !important;

    }



    /* -----------------------------------------------------------------------

       11. NO RESULTS - Compact

    ----------------------------------------------------------------------- */

    .no-results {

        padding: 36px 20px !important;

    }



    .no-results svg {

        width: 44px !important;

        height: 44px !important;

        margin-bottom: 10px !important;

    }



    /* -----------------------------------------------------------------------

       12. TAP HIGHLIGHT REMOVAL

    ----------------------------------------------------------------------- */

    .sidebar-category-card,

    #sidebar-filters-list .filter-item,

    .product-card,

    #subcategories-grid-container a {

        -webkit-tap-highlight-color: transparent !important;

    }

}



/* Extra small screens 320-375px */

@media (max-width: 375px) {

    #sidebar-categories-tree {

        gap: 6px !important;

        padding: 8px 12px 10px 12px !important;

    }



    .sidebar-category-card {

        font-size: 12px !important;

        height: 40px !important;

        padding: 0 11px !important;

        border-radius: 12px !important;

        gap: 5px !important;

    }



    .sidebar-category-icon {

        width: 16px !important;

        height: 16px !important;

    }



    .sidebar-category-icon img {

        width: 16px !important;

        height: 16px !important;

    }



    .sidebar-category-icon svg {

        width: 15px !important;

        height: 15px !important;

    }



    .sidebar-category-name {

        font-size: 12px !important;

    }



    #category-products-grid {

        gap: 8px !important;

        padding: 0 10px 10px 10px !important;

    }



    .category-toolbar {

        padding: 0 12px 8px 12px !important;

    }

}



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

   MOB-CAT-CHIP — Clean mobile category chips (generated by JS on mobile)

   Uses brand-new class names with zero conflicts

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



/* The container #sidebar-categories-tree on mobile becomes a flex scrollable row */

@media (max-width: 767px) {

    #sidebar-categories-tree {

        display: flex !important;

        flex-direction: row !important;

        flex-wrap: nowrap !important;

        overflow-x: auto !important;

        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch !important;

        scroll-behavior: smooth !important;

        gap: 8px !important;

        padding: 10px 16px 12px 16px !important;

        margin: 0 !important;

        width: 100% !important;

        box-sizing: border-box !important;

        scrollbar-width: none !important;

        align-items: center !important;

        background: transparent !important;

        border: none !important;

        box-shadow: none !important;

    }



    #sidebar-categories-tree::-webkit-scrollbar {

        display: none !important;

    }



    /* Wrapper around each chip — flex inline */

    .mob-chip-wrapper {

        display: inline-flex !important;

        flex-shrink: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        border: none !important;

        background: none !important;

    }



    /* The chip link itself */

    .mob-cat-chip {

        display: inline-flex !important;

        flex-direction: row !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 6px !important;

        height: 42px !important;

        padding: 0 14px !important;

        border-radius: 22px !important;

        border: 1.5px solid #e2e8f0 !important;

        background: #ffffff !important;

        font-size: 13px !important;

        font-weight: 600 !important;

        color: #374151 !important;

        text-decoration: none !important;

        white-space: nowrap !important;

        transition: all 0.18s ease !important;

        box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;

        box-sizing: border-box !important;

        flex-shrink: 0 !important;

        cursor: pointer !important;

        -webkit-tap-highlight-color: transparent !important;

        /* Reset all inherited junk */

        width: auto !important;

        min-width: 0 !important;

        max-width: none !important;

        position: static !important;

        transform: none !important;

    }



    /* Icon span */

    .mob-cat-chip__icon {

        display: inline-flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 18px !important;

        height: 18px !important;

        flex-shrink: 0 !important;

        line-height: 1 !important;

    }



    .mob-cat-chip__icon svg {

        width: 16px !important;

        height: 16px !important;

        display: block !important;

        color: #6b7280 !important;

        flex-shrink: 0 !important;

    }



    /* Category image inside chip */

    .mob-cat-chip__img {

        width: 18px !important;

        height: 18px !important;

        object-fit: contain !important;

        display: block !important;

        border-radius: 3px !important;

    }



    /* Text label */

    .mob-cat-chip__text {

        font-size: 13px !important;

        font-weight: 600 !important;

        color: inherit !important;

        white-space: nowrap !important;

        line-height: 1 !important;

    }



    /* ACTIVE state — Blue pill */

    .mob-cat-chip--active {

        background: #2563eb !important;

        border-color: #2563eb !important;

        color: #ffffff !important;

        box-shadow: 0 4px 14px rgba(37, 99, 235, 0.32) !important;

    }



    .mob-cat-chip--active .mob-cat-chip__icon svg {

        color: #ffffff !important;

    }



    .mob-cat-chip--active .mob-cat-chip__img {

        filter: brightness(0) invert(1) !important;

    }



    /* Tap feedback */

    .mob-cat-chip:active {

        transform: scale(0.96) !important;

        opacity: 0.9 !important;

    }

}



/* Very small screens 320-375px */

@media (max-width: 375px) {

    .mob-cat-chip {

        height: 38px !important;

        padding: 0 11px !important;

        border-radius: 19px !important;

        font-size: 12px !important;

        gap: 5px !important;

    }



    .mob-cat-chip__icon {

        width: 15px !important;

        height: 15px !important;

    }



    .mob-cat-chip__icon svg {

        width: 14px !important;

        height: 14px !important;

    }



    .mob-cat-chip__img {

        width: 15px !important;

        height: 15px !important;

    }



    .mob-cat-chip__text {

        font-size: 12px !important;

    }

}

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

   PREMIUM REDESIGN - BLACK EDITION (APPLE / SAMSUNG / NIKE APP INSPIRED)

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



:root {

  /* Premium Palette */

  --primary: #E30613;

  --primary-hover: #b3050f;

  --bg: #0D0D0D;

  --surface: #171717;

  --card: #1E1E1E;

  --border: #2A2A2A;

  --text: #ffffff;

  --muted: #B3B3B3;

  --radius: 20px;

  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);



  /* Mapping to existing codebase variables for compatibility */

  --color-primary: var(--primary) !important;

  --color-primary-hover: var(--primary-hover) !important;

  --color-accent: #F59E0B !important;

  --color-accent-hover: #d97706 !important;

  --color-text: var(--text) !important;

  --color-text-light: var(--muted) !important;

  --color-bg: var(--bg) !important;

  --color-bg-alt: var(--surface) !important;

  --color-header-bg: #000000 !important;

  --color-header-text: var(--text) !important;

  --color-footer-bg: var(--surface) !important;

  --color-footer-text: var(--muted) !important;

  --color-success: #22C55E !important;

  --color-error: var(--primary) !important;

  --color-warning: #F59E0B !important;

  --color-price: var(--primary) !important;

  --color-card-shadow: var(--shadow) !important;

  

  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;

  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;

  

  --btn-radius: 999px !important;

  --card-radius: var(--radius) !important;

}



/* Global resets for Black Edition */

body {

  background-color: var(--bg) !important;

  color: var(--text) !important;

  font-family: var(--font-primary) !important;

  font-size: 14px !important;

}



h1, h2, h3, h4, h5, h6 {

  color: var(--text) !important;

}



p, span, label, li, a, td, th {

  color: var(--text);

}



/* Secondary/Muted Elements (Sub-texts) */

.text-muted, 

.price-old, 

.product-category, 

.breadcrumb-item, 

.footer-about,

.footer-links a,

.lang-btn {

  color: var(--muted) !important;

}



/* Header Redesign */

.header, .header.sticky, #main-header {

  background: rgba(13, 13, 13, 0.75) !important;

  backdrop-filter: blur(20px) !important;

  -webkit-backdrop-filter: blur(20px) !important;

  border-bottom: 1px solid var(--border) !important;

  z-index: 100000 !important;

  overflow: visible !important;

}



.header-main {

  background: transparent !important;

  border: none !important;

}



/* Clean Hamburger lines for Dark Mode */

#hamburgerBtn span {

  background: var(--text) !important;

}



.hamburger {

  z-index: 100002 !important;

  pointer-events: auto !important;

}



.nav-mobile, #mobileNav {

  z-index: 9999999 !important;

  background: #121212 !important;

}



/* Fix mobile menu panel backdrop-filter containing block bug */

.header:has(#mobileNav.active),

.header:has(#hamburgerBtn.active) {

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

  background: #000000 !important;

}



/* Center Logo on mobile and style header actions */

@media (max-width: 767px) {

  .header-inner {

    display: flex !important;

    flex-wrap: wrap !important;

    align-items: center !important;

    justify-content: space-between !important;

    padding: 12px 16px !important;

    height: auto !important;

    gap: 8px 12px !important;

  }

  

  #hamburgerBtn {

    order: 1 !important;

    margin: 0 !important;

    display: flex !important;

  }

  

  .header-inner .logo {

    order: 2 !important;

    flex: 1 !important;

    display: flex !important;

    justify-content: center !important;

    margin: 0 !important;

  }

  

  .logo img {

    height: 38px !important;

    max-height: 38px !important;

    object-fit: contain !important;

  }

  

  .header-actions {

    order: 3 !important;

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

  }

  

  /* Hide unnecessary items in header actions on mobile */

  .mobile-only-header-actions {

    display: none !important;

  }

  

  /* Lang switcher - DJATHTAS ne header mobile */
  #header-lang-switcher {

    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    order: 3 !important;  /* Djathtas */
    margin-left: 0 !important;

  }

  /* Cart - MAJTAS ne header mobile */
  #cart-icon-btn {
    order: 1 !important;  /* Majtas */
  }

  /* Header actions container */
  .header-actions {
    order: 3 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-direction: row !important;
  }

  /* Cart button styling in header */

  .header-actions #cart-icon-btn {

    position: relative !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 40px !important;

    height: 40px !important;

    border-radius: 50% !important;

    background: var(--surface) !important;

    border: 1px solid var(--border) !important;

    color: var(--text) !important;

    box-shadow: none !important;

    inset: auto !important;

    transform: none !important;

  }

  

  .header-actions #cart-icon-btn svg {

    display: block !important;

    width: 20px !important;

    height: 20px !important;

    stroke: var(--text) !important;

  }

  

  .header-actions #cart-icon-btn .cart-count, 

  .cart-btn .cart-count {

    position: absolute !important;

    top: -4px !important;

    right: -4px !important;

    background: var(--primary) !important;

    color: #fff !important;

    border: 2px solid var(--bg) !important;

    border-radius: 50% !important;

    font-size: 10px !important;

    font-weight: 700 !important;

    min-width: 18px !important;

    height: 18px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    padding: 0 4px !important;

  }

}



/* Search Bar Redesign */

.search-bars-container {

  padding: 12px var(--container-padding) !important;

  background: transparent !important;

}



.search-wrapper {

  position: relative !important;

  flex: 1 !important;

}



.search-form {

  position: relative !important;

  width: 100% !important;

  height: 56px !important;

  border-radius: 18px !important;

  background: var(--surface) !important;

  border: 1px solid var(--border) !important;

  overflow: hidden !important;

  display: flex !important;

  align-items: center !important;

  transition: border-color 0.25s ease !important;

}



/* Fix overlay/overlapping of dynamically hidden inputs */

.search-wrapper[style*="display: none"],

.search-form[style*="display: none"] {

  display: none !important;

}



.search-wrapper:focus-within, .search-form:focus-within {

  border-color: var(--primary) !important;

}



/* Search input field */

.search-input, 

#search-input-field,

#mobile-search-input-field {

  width: 100% !important;

  height: 100% !important;

  background: transparent !important;

  border: none !important;

  padding: 0 54px !important;

  color: var(--text) !important;

  font-size: 15px !important;

}



.search-input::placeholder {

  color: var(--muted) !important;

}



/* Search Icon Left */

.search-btn, 

.search-form button[type="submit"] {

  position: absolute !important;

  left: 16px !important;

  top: 50% !important;

  transform: translateY(-50%) !important;

  background: transparent !important;

  border: none !important;

  color: var(--primary) !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  padding: 0 !important;

  width: auto !important;

  height: auto !important;

  cursor: pointer !important;

  z-index: 2 !important;

}



.search-btn svg,

.search-form button[type="submit"] svg {

  width: 20px !important;

  height: 20px !important;

  stroke: var(--primary) !important;

}



/* Scan / QR Icon Right (Mobile only) */

@media (max-width: 767px) {

  .search-wrapper::after,

  .search-form::after {

    display: none !important;

  }

}



/* Desktop Search spacing and layout */

@media (min-width: 768px) {

  .search-bars-container {

    display: flex !important;

    gap: 16px !important;

    max-width: 700px !important;

    padding: 0 !important;

    background: transparent !important;

  }

  .search-input, 

  #search-input-field,

  #mobile-search-input-field {

    padding: 0 16px 0 56px !important;

  }

}



/* Desktop Menu styling (high contrast) */

.nav-bar {

  background: var(--surface) !important;

  border-bottom: 1px solid var(--border) !important;

}



.nav-link {

  color: #FFFFFF !important;

  font-weight: 600 !important;

}



.nav-link:hover {

  background: rgba(255, 255, 255, 0.05) !important;

  color: var(--primary) !important;

}



.nav-link svg {

  stroke: var(--text) !important;

}



/* Hero Banner Redesign */

.hero-slider, #homepage-slider {

  height: 210px !important;

  border-radius: 22px !important;

  margin: 16px var(--container-padding) !important;

  overflow: hidden !important;

  position: relative !important;

  background: var(--surface) !important;

  border: 1px solid var(--border) !important;

}



.slider-track, .slide {

  height: 100% !important;

  min-height: 210px !important;

}



.slide-image {

  border-radius: 22px !important;

  object-fit: cover !important;

  width: 100% !important;

  height: 100% !important;

}



.slide-overlay {

  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.85) 100%) !important;

  border-radius: 22px !important;

}



.slide-content {

  position: absolute !important;

  bottom: 0 !important;

  left: 0 !important;

  width: 100% !important;

  padding: 16px 20px !important;

  box-sizing: border-box !important;

  z-index: 3 !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: flex-start !important;

}



.slide-content h1 {

  font-size: 20px !important;

  font-weight: 800 !important;

  margin-bottom: 4px !important;

  color: #fff !important;

  line-height: 1.2 !important;

  text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;

}



.slide-content p {

  font-size: 12px !important;

  color: var(--muted) !important;

  margin-bottom: 8px !important;

  line-height: 1.3 !important;

}



/* CTA red button in banner */

.slide-content .btn,

.slide-content a.btn-primary {

  background: var(--primary) !important;

  color: #fff !important;

  border-radius: 999px !important;

  padding: 6px 16px !important;

  font-size: 11px !important;

  font-weight: 700 !important;

  text-transform: uppercase !important;

  border: none !important;

  box-shadow: 0 4px 12px rgba(227, 6, 19, 0.3) !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

}



.slide-content .btn:hover,

.slide-content a.btn-primary:hover {

  background: var(--primary-hover) !important;

  transform: translateY(-1px) !important;

}



/* Red dots navigation for slider */

.slider-controls, #slider-dots-container {

  display: flex !important;

  justify-content: center !important;

  gap: 6px !important;

  bottom: 12px !important;

  position: absolute !important;

  width: 100% !important;

  z-index: 4 !important;

}



.slider-controls button,

#slider-dots-container .slider-dot {

  width: 6px !important;

  height: 6px !important;

  border-radius: 50% !important;

  background: rgba(255, 255, 255, 0.4) !important;

  border: none !important;

  padding: 0 !important;

  transition: all 0.25s ease !important;

}



.slider-controls button.active,

#slider-dots-container .slider-dot.active {

  background: var(--primary) !important;

  width: 18px !important;

  border-radius: 3px !important;

}



/* Categories Section Redesign (homepage horizontal scroll) */

@media (max-width: 768px) {
  .categories-grid, #featured-categories-grid {
    width: 100% !important;
    max-width: 100vw !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 16px !important;
    padding: 12px var(--container-padding) !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  
  .categories-grid::-webkit-scrollbar,
  #featured-categories-grid::-webkit-scrollbar {
    display: none !important;
  }
}



/* Category cards 88x88 */

.category-card {

  flex: 0 0 88px !important;

  width: 88px !important;

  height: 88px !important;

  border-radius: 18px !important;

  background: var(--surface) !important;

  border: 1px solid var(--border) !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  padding: 8px !important;

  box-sizing: border-box !important;

  transition: all 0.25s ease !important;

  cursor: pointer !important;

  text-decoration: none !important;

}



.category-card:active {

  transform: scale(0.95) !important;

}



.category-icon {

  width: 32px !important;

  height: 32px !important;

  margin-bottom: 6px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  background: transparent !important;

}



.category-icon img {

  width: 100% !important;

  height: 100% !important;

  object-fit: contain !important;

}



.category-icon svg {

  width: 24px !important;

  height: 24px !important;

  stroke: var(--text) !important;

}



.category-card h3 {

  font-size: 11px !important;

  font-weight: 600 !important;

  color: var(--text) !important;

  margin: 0 !important;

  text-align: center !important;

  white-space: nowrap !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

  width: 100% !important;

}



/* Selected state = red border + red icon */

.category-card.active,

.category-card.selected {

  border-color: var(--primary) !important;

  background: rgba(227, 6, 19, 0.05) !important;

}



.category-card.active h3,

.category-card.selected h3 {

  color: var(--primary) !important;

  font-weight: 700 !important;

}



.category-card.active svg,

.category-card.selected svg {

  stroke: var(--primary) !important;

}



/* Mobile Category Chips (subcategories page horizontal scroll) overrides */

.mob-cat-chip {

  background: var(--surface) !important;

  border: 1px solid var(--border) !important;

  color: var(--muted) !important;

  box-shadow: none !important;

}



.mob-cat-chip__icon svg {

  color: var(--muted) !important;

}



.mob-cat-chip--active {

  background: var(--primary) !important;

  border-color: var(--primary) !important;

  color: #ffffff !important;

  box-shadow: 0 4px 12px rgba(227, 6, 19, 0.4) !important;

}



.mob-cat-chip--active .mob-cat-chip__icon svg {

  color: #ffffff !important;

}



.mob-cat-chip--active .mob-cat-chip__img {

  filter: brightness(0) invert(1) !important;

}



/* Mobile Sidebar Category Cards (swipe row) */

@media (max-width: 991px) {

  .sidebar-category-card {

    flex: 0 0 88px !important;

    width: 88px !important;

    height: 88px !important;

    border-radius: 18px !important;

    background: var(--surface) !important;

    border: 1px solid var(--border) !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    padding: 8px !important;

    box-sizing: border-box !important;

    transition: all 0.25s ease !important;

    cursor: pointer !important;

    text-decoration: none !important;

  }

  

  .sidebar-category-card:active {

    transform: scale(0.95) !important;

  }

  

  .sidebar-category-icon {

    width: 32px !important;

    height: 32px !important;

    margin-bottom: 6px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    background: transparent !important;

  }

  

  .sidebar-category-icon img {

    width: 100% !important;

    height: 100% !important;

    object-fit: contain !important;

  }

  

  .sidebar-category-icon svg {

    width: 24px !important;

    height: 24px !important;

    stroke: var(--text) !important;

  }

  

  .sidebar-category-card .category-name {

    font-size: 11px !important;

    font-weight: 500 !important;

    color: var(--muted) !important;

    margin: 0 !important;

    text-align: center !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    width: 100% !important;

  }

  

  .sidebar-category-card.active,

  .sidebar-category-card.selected,

  .mob-cat-chip--active {

    border-color: var(--primary) !important;

    background: rgba(227, 6, 19, 0.05) !important;

  }

  

  .sidebar-category-card.active .category-name,

  .sidebar-category-card.selected .category-name,

  .mob-cat-chip--active .category-name {

    color: var(--primary) !important;

    font-weight: 700 !important;

  }

  

  .sidebar-category-card.active svg,

  .sidebar-category-card.selected svg,

  .mob-cat-chip--active svg {

    stroke: var(--primary) !important;

  }

}



/* Desktop Sidebar Category Cards (gorgeous row layout) */

@media (min-width: 992px) {

  #sidebar-categories-tree {

    display: flex !important;

    flex-direction: column !important;

    gap: 8px !important;

  }

  

  .sidebar-category-wrapper {

    border-bottom: 1px solid var(--border) !important;

    padding-bottom: 8px !important;

    margin-bottom: 8px !important;

  }

  

  .sidebar-category-card {

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    gap: 12px !important;

    padding: 10px 14px !important;

    background: var(--card) !important;

    border: 1px solid var(--border) !important;

    border-radius: 12px !important;

    width: 100% !important;

    height: auto !important;

    text-decoration: none !important;

    box-sizing: border-box !important;

    transition: all 0.25s ease !important;

  }

  

  .sidebar-category-card:hover,

  .sidebar-category-card.active {

    border-color: var(--primary) !important;

    background: rgba(227, 6, 19, 0.05) !important;

  }

  

  .sidebar-category-icon {

    width: 20px !important;

    height: 20px !important;

    margin: 0 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

  }

  

  .sidebar-category-icon svg {

    width: 16px !important;

    height: 16px !important;

    stroke: var(--text) !important;

  }

  

  .sidebar-category-card.active svg {

    stroke: var(--primary) !important;

  }

  

  .sidebar-category-card .category-name {

    font-size: 13.5px !important;

    font-weight: 600 !important;

    color: var(--text) !important;

    text-align: left !important;

    white-space: normal !important;

  }

  

  .sidebar-category-card.active .category-name {

    color: var(--primary) !important;

  }

  

  #sidebar-categories-tree .accordion-toggle {

    display: none !important;

  }

}



/* Filter Chips Redesign */

.filters-sidebar,

.filter-group {

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

  padding: 0 !important;

}



#sidebar-filters-list {

  display: flex !important;

  flex-direction: row !important;

  flex-wrap: nowrap !important;

  overflow-x: auto !important;

  gap: 10px !important;

  padding: 8px var(--container-padding) !important;

  margin: 0 !important;

  -webkit-overflow-scrolling: touch !important;

  scrollbar-width: none !important;

}



#sidebar-filters-list::-webkit-scrollbar {

  display: none !important;

}



/* Pill filter buttons, Height 40px */

#sidebar-filters-list .filter-item,

.filter-chip {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  height: 40px !important;

  padding: 0 20px !important;

  border-radius: 999px !important;

  background: var(--surface) !important;

  border: 1px solid var(--border) !important;

  color: var(--text) !important;

  font-size: 13px !important;

  font-weight: 600 !important;

  white-space: nowrap !important;

  transition: all 0.25s ease !important;

  text-decoration: none !important;

  box-sizing: border-box !important;

  cursor: pointer !important;

}



#sidebar-filters-list .filter-item:active,

.filter-chip:active {

  transform: scale(0.95) !important;

}



/* Active filter state = Red */

#sidebar-filters-list .filter-item.active,

.filter-chip.active,

.filter-chip.selected {

  background: var(--primary) !important;

  border-color: var(--primary) !important;

  color: #FFFFFF !important;

  box-shadow: 0 4px 12px rgba(227, 6, 19, 0.3) !important;

}



/* Product Grid and Product Cards Redesign */

.products-grid, 

#new-arrivals-grid, 

#best-sellers-grid, 

#special-offers-grid,

#category-products-grid {

  display: grid !important;

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

  gap: 16px !important;

  padding: 16px var(--container-padding) !important;

  width: 100% !important;

  max-width: 100% !important;

  box-sizing: border-box !important;

  margin: 0 auto !important;

}



@media (min-width: 992px) {

  .products-grid, 

  #new-arrivals-grid, 

  #best-sellers-grid, 

  #special-offers-grid,

  #category-products-grid {

    grid-template-columns: repeat(4, 1fr) !important;

  }

}



/* Product Card Wrapper */

.product-card {

  position: relative !important;

  background: var(--card) !important;

  border: 1px solid var(--border) !important;

  border-radius: 22px !important;

  padding: 12px !important;

  display: flex !important;

  flex-direction: column !important;

  height: 100% !important;

  box-sizing: border-box !important;

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

  overflow: visible !important;

}



.product-card:hover {

  transform: translateY(-4px) !important;

  box-shadow: var(--shadow) !important;

}



/* Product Image area — fixed height so all cards align regardless of portrait/landscape photos */

.product-image {

  position: relative !important;

  width: 100% !important;

  height: 200px !important;

  flex-shrink: 0 !important;

  background: transparent !important;

  border-radius: 14px !important;

  overflow: hidden !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  margin-bottom: 12px !important;

}



.product-image img {

  width: 100% !important;

  height: 100% !important;

  object-fit: contain !important;

  transition: transform 0.3s ease !important;

  border-radius: 0 !important;

}



.product-card:hover .product-image img {

  transform: scale(1.05) !important;

}



/* Favorite heart top-right (over the image) */

.product-image::before {

  content: "" !important;

  position: absolute !important;

  top: 8px !important;

  right: 8px !important;

  width: 32px !important;

  height: 32px !important;

  border-radius: 50% !important;

  background: rgba(13, 13, 13, 0.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") no-repeat center/16px !important;

  z-index: 5 !important;

  cursor: pointer !important;

  transition: all 0.2s ease !important;

}



.product-image:hover::before {

  background-color: rgba(13, 13, 13, 0.8) !important;

}



.product-image::before:active {

  transform: scale(1.3) !important;

}



.product-image:hover::before {

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E30613' stroke='%23E30613' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") !important;

}



/* Badges wrapper: Absolute Positioned on top-left of image */

.product-badges {

  position: absolute !important;

  top: 8px !important;

  left: 8px !important;

  z-index: 5 !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 4px !important;

}



.badge {

  display: inline-block !important;

  padding: 4px 8px !important;

  border-radius: 6px !important;

  font-size: 10px !important;

  font-weight: 800 !important;

  text-transform: uppercase !important;

  letter-spacing: 0.5px !important;

  line-height: 1 !important;

  color: #ffffff !important;

}



.badge-new {

  background: var(--primary) !important;

}



.badge-sale {

  background: #F59E0B !important;

}



.product-badges::after {

  content: "NË STOK" !important;

  display: inline-block !important;

  padding: 4px 8px !important;

  border-radius: 6px !important;

  font-size: 10px !important;

  font-weight: 800 !important;

  text-transform: uppercase !important;

  letter-spacing: 0.5px !important;

  line-height: 1 !important;

  color: #ffffff !important;

  background: #22C55E !important;

}



/* Product footer: price + cart button always at bottom */

.product-footer {

  display: flex !important;

  flex-direction: row !important;

  align-items: center !important;

  justify-content: space-between !important;

  margin-top: auto !important;

  padding-top: 8px !important;

  gap: 8px !important;

}



/* Cart button is a real DOM element, no absolute positioning */

.product-actions {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  flex-shrink: 0 !important;

  width: 42px !important;

  height: 42px !important;

  border-radius: 50% !important;

  background: var(--primary) !important;

  box-shadow: 0 4px 12px rgba(227, 6, 19, 0.4) !important;

  cursor: pointer !important;

  transition: all 0.2s ease !important;

  border: none !important;

  padding: 0 !important;

  color: #fff !important;

  position: static !important;

}



.product-actions:active {

  transform: scale(0.9) !important;

}



.product-actions:hover {

  background-color: var(--primary-hover) !important;

}



.product-actions svg {

  display: block !important;

  pointer-events: none !important;

}



.product-info {

  display: flex !important;

  flex-direction: column !important;

  padding: 0 !important;

  flex: 1 !important;

}



.product-category {

  display: none !important;

}



.product-name {

  font-size: 15px !important;

  font-weight: 600 !important;

  color: var(--text) !important;

  margin: 0 0 6px 0 !important;

  line-height: 1.4 !important;

  min-height: 44px !important;

  order: 2 !important;

  display: flex !important;

  flex-direction: column !important;

}



.product-name a {

  color: var(--text) !important;

  text-decoration: none !important;

  display: -webkit-box !important;

  -webkit-line-clamp: 2 !important;

  -webkit-box-orient: vertical !important;

  overflow: hidden !important;

  min-height: 42px !important;

  height: auto !important;

  line-height: 1.4 !important;

}



.product-name::before {

  font-family: inherit !important;

  font-weight: bold !important;

  font-size: 11px !important;

  color: var(--primary) !important;

  margin-bottom: 6px !important;

  order: 1 !important;

  display: block !important;

}



/* Fake ratings — vetëm jashtë homepage-premium (premium përdor API) */
:not(.homepage-premium) .product-card:nth-child(odd) .product-name::before {

  content: "★★★★★  (125)" !important;

}



:not(.homepage-premium) .product-card:nth-child(even) .product-name::before {

  content: "★★★★☆  (94)" !important;

}



:not(.homepage-premium) .product-info::after {

  content: "● Transport Falas" !important;

  font-size: 11px !important;

  font-weight: 500 !important;

  color: #22C55E !important;

  margin-bottom: 8px !important;

  order: 3 !important;

  display: block !important;

}



.product-price {

  display: flex !important;

  flex-direction: column !important;

  flex-wrap: nowrap !important;

  align-items: flex-start !important;

  gap: 2px !important;

}

.price-row {

  display: flex !important;

  flex-direction: column !important;

  flex-wrap: nowrap !important;

  align-items: flex-start !important;

  gap: 2px !important;

}



.price-current {

  font-size: 20px !important;

  font-weight: 800 !important;

  color: var(--primary) !important;

  line-height: 1.1 !important;

  display: inline !important;

  white-space: nowrap !important;

  word-break: keep-all !important;

}



.price-old {

  font-size: 13px !important;

  font-weight: 500 !important;

  color: var(--muted) !important;

  text-decoration: line-through !important;

  white-space: nowrap !important;

}



.price-mkd {

  font-size: 11px !important;

  color: var(--muted) !important;

  display: block !important;

}



.product-detail-price .price-current,

.product-info-styled .price-current {

  font-size: 28px !important;

}



.product-card .add-to-cart {

  display: none !important;

}



.product-card::after {

  display: none !important;

}



/* Bottom Navigation Redesign */

.bottom-nav, #mobile-bottom-nav {

  position: fixed !important;

  bottom: 0 !important;

  left: 0 !important;

  right: 0 !important;

  height: calc(64px + var(--safe-bottom)) !important;

  background: rgba(23, 23, 23, 0.75) !important;

  backdrop-filter: blur(24px) !important;

  -webkit-backdrop-filter: blur(24px) !important;

  border-top: 1px solid var(--border) !important;

  display: flex !important;

  align-items: center !important;

  justify-content: space-around !important;

  padding-bottom: var(--safe-bottom) !important;

  z-index: 9999 !important;

  box-shadow: 0 -10px 30px rgba(0,0,0,0.5) !important;

  box-sizing: border-box !important;

}



.bottom-nav-item {

  flex: 1 !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  text-decoration: none !important;

  color: var(--muted) !important;

  height: 60px !important;

  font-size: 10px !important;

  font-weight: 600 !important;

  transition: all 0.2s ease !important;

}



.bottom-nav-item svg {

  margin-bottom: 3px !important;

  width: 22px !important;

  height: 22px !important;

  stroke: var(--muted) !important;

}



.bottom-nav-item.active-nav,

.bottom-nav-item.active-nav svg {

  color: var(--primary) !important;

  stroke: var(--primary) !important;

}



/* Rearrange using Flexbox Order */

#bottom-nav-home { order: 1 !important; }

#bottom-nav-search { order: 2 !important; }

#bottom-nav-categories { order: 3 !important; }

.bottom-nav-item-cart-wrapper { order: 4 !important; }

#bottom-nav-profile { order: 5 !important; }



/* Categories Tab: Center Floating Action Circle */

#bottom-nav-categories {

  flex: 0 0 56px !important;

  width: 56px !important;

  height: 56px !important;

  border-radius: 50% !important;

  background: var(--primary) !important;

  color: #ffffff !important;

  margin-top: -28px !important;

  box-shadow: 0 8px 24px rgba(227, 6, 19, 0.4) !important;

  z-index: 10000 !important;

}



#bottom-nav-categories.active-nav {

  background: var(--primary) !important;

  box-shadow: 0 8px 24px rgba(227, 6, 19, 0.6) !important;

}



#bottom-nav-categories svg {

  display: none !important;

}



#bottom-nav-categories::before {

  content: "" !important;

  width: 24px !important;

  height: 24px !important;

  display: block !important;

  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'%3E%3C/rect%3E%3Crect x='14' y='3' width='7' height='7'%3E%3C/rect%3E%3Crect x='14' y='14' width='7' height='7'%3E%3C/rect%3E%3Crect x='3' y='14' width='7' height='7'%3E%3C/rect%3E%3C/svg%3E") no-repeat center !important;

  background-size: contain !important;

}



#bottom-nav-categories .bottom-nav-text {

  display: none !important;

}



/* Cart Button on Bottom Navigation */

.bottom-nav-item-cart-wrapper {

  position: relative !important;

  width: auto !important;

  height: auto !important;

  margin-top: 0 !important;

  z-index: 9999 !important;

  flex: 1 !important;

  display: flex !important;

  justify-content: center !important;

  align-items: center !important;

}



.bottom-nav-cart {

  position: static !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  border: none !important;

  color: var(--muted) !important;

  height: 60px !important;

  width: 100% !important;

}



.bottom-nav-cart .cart-floating-icon svg {

  stroke: var(--muted) !important;

}



.bottom-nav-cart.active-nav,

.bottom-nav-cart.active-nav .cart-floating-icon svg {

  color: var(--primary) !important;

  stroke: var(--primary) !important;

}



/* FIX FOR SOLID RED TAB BACKGROUND ON ACTIVE CART TAB */

.bottom-nav-cart.active-nav {

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

}



.bottom-nav-cart::after {

  content: "Shporta" !important;

  font-size: 10px !important;

  font-weight: 600 !important;

  margin-top: 3px !important;

  display: block !important;

}



/* Crucial Fix: Limit absolute cart overlay to bottom nav wrapper only */

.bottom-nav-item-cart-wrapper #cart-icon-btn {

  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;

  height: 100% !important;

  background: transparent !important;

  border: none !important;

  z-index: 10001 !important;

  cursor: pointer !important;

}



.bottom-nav-item-cart-wrapper #cart-icon-btn svg, 

.bottom-nav-item-cart-wrapper #cart-icon-btn span {

  display: none !important;

}



.bottom-nav-cart::before {

  display: none !important;

}



/* Contrast & Details Layout overrides */

.info-label {

  color: var(--muted) !important;

  font-weight: 500 !important;

}



.info-value {

  color: #FFFFFF !important;

  font-weight: 600 !important;

}



.info-grid-row {

  border-bottom: 1px solid var(--border) !important;

}



.product-info-grid-styled {

  border-top: 1px solid var(--border) !important;

  border-bottom: 1px solid var(--border) !important;

}



.trust-badges-list {

  border-top: 1px solid var(--border) !important;

  background: transparent !important;

}



.trust-badge-item {

  color: var(--muted) !important;

  font-weight: 500 !important;

}



.trust-icon {

  color: var(--primary) !important;

}



/* Quantity Control pill styling */

.quantity-input {

  border: 1px solid var(--border) !important;

  background: var(--surface) !important;

  border-radius: 30px !important;

  overflow: hidden !important;

  display: flex !important;

  align-items: center !important;

  height: 44px !important;

}



.quantity-btn {

  background: var(--surface) !important;

  color: #FFFFFF !important;

  width: 44px !important;

  height: 44px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  font-size: 1.25rem !important;

  border: none !important;

  cursor: pointer !important;

  transition: background 0.2s ease !important;

}



.quantity-btn:hover {

  background: var(--border) !important;

}



.quantity-input input,

.quantity-input .qty-input,

.quantity-input #quantity-input-field {

  background: var(--surface) !important;

  color: #FFFFFF !important;

  border: none !important;

  text-align: center !important;

  font-weight: 700 !important;

  width: 50px !important;

  height: 44px !important;

  font-size: 16px !important;

}



/* Logo Contrast Overrides */

.logo-text, 

.logo-text a, 

.header-inner .logo-text, 

.logo-text span {

  color: #FFFFFF !important;

}



.logo img, 

.header-inner .logo img {

  filter: brightness(0) invert(1) !important;

}



.bottom-nav-item.active-nav span {

  color: var(--primary) !important;

}



/* Color Option selector pills styling */

.color-options {

  display: flex !important;

  flex-wrap: wrap !important;

  gap: 10px !important;

}



.color-option {

  display: inline-flex !important;

  align-items: center !important;

  gap: 8px !important;

  padding: 10px 16px !important;

  border: 1px solid var(--border) !important;

  border-radius: var(--btn-radius) !important;

  font-size: 14px !important;

  cursor: pointer !important;

  transition: all 0.25s ease !important;

  background: var(--surface) !important;

  color: #FFFFFF !important;

  box-shadow: none !important;

  height: auto !important;

  width: auto !important;

  box-sizing: border-box !important;

}



.color-option .color-name {

  color: #FFFFFF !important;

  font-weight: 500 !important;

  display: inline !important;

}



.color-option .color-swatch {

  width: 18px !important;

  height: 18px !important;

  border-radius: 50% !important;

  flex-shrink: 0 !important;

  border: 1px solid rgba(255, 255, 255, 0.2) !important;

  display: block !important;

}



.color-option:hover,

.color-option.active {

  border-color: var(--primary) !important;

  background: rgba(227, 6, 19, 0.08) !important;

}



.color-option.active {

  box-shadow: 0 0 0 2px rgba(227, 6, 19, 0.2) !important;

}



/* Auth Cards & Layouts overrides */

.auth-box {

  background: var(--card) !important;

  border: 1px solid var(--border) !important;

  border-radius: var(--radius) !important;

  box-shadow: var(--shadow) !important;

}



.auth-box h1,

#login-main-title,

#register-main-title,

.auth-box .auth-title {

  color: #FFFFFF !important;

  font-size: 26px !important;

  font-weight: 800 !important;

  margin-bottom: 24px !important;

  text-align: center !important;

}



.form-label,

label {

  color: var(--text) !important;

  font-weight: 600 !important;

  font-size: 13.5px !important;

  margin-bottom: 6px !important;

  display: block !important;

}



.form-control,

input[type="text"],

input[type="email"],

input[type="password"],

input[type="tel"],

input[type="number"],

textarea,

select {

  background-color: var(--surface) !important;

  border: 1px solid var(--border) !important;

  color: #FFFFFF !important;

  border-radius: 12px !important;

  padding: 12px 16px !important;

  height: auto !important;

  font-size: 14px !important;

  transition: all 0.25s ease !important;

  box-sizing: border-box !important;

}



.form-control::placeholder,

input::placeholder,

textarea::placeholder {

  color: var(--muted) !important;

}



.form-control:focus,

input[type="text"]:focus,

input[type="email"]:focus,

input[type="password"]:focus,

input[type="tel"]:focus,

input[type="number"]:focus,

textarea:focus,

select:focus {

  border-color: var(--primary) !important;

  box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.15) !important;

  outline: none !important;

}



.auth-footer,

#login-footer-text,

#register-footer-text {

  color: var(--muted) !important;

  margin-top: 24px !important;

  text-align: center !important;

  font-size: 13.5px !important;

}



.auth-footer a,

#login-footer-text a,

#register-footer-text a {

  color: var(--primary) !important;

  font-weight: 700 !important;

  text-decoration: none !important;

}



.auth-footer a:hover,

#login-footer-text a:hover,

#register-footer-text a:hover {

  text-decoration: underline !important;

}



/* Secondary Panels Contrast (Cart, Checkout, Profile) */

.cart-summary,

.order-summary,

.profile-sidebar,

.profile-content,

.checkout-form,

.cart-items,

.checkout-billing,

.profile-card,

.card,

.panel {

  background: var(--card) !important;

  border: 1px solid var(--border) !important;

  border-radius: var(--radius) !important;

  box-shadow: var(--shadow) !important;

  color: var(--text) !important;

  padding: 24px !important;

}



.cart-header {

  background: var(--surface) !important;

  color: #FFFFFF !important;

  border-bottom: 1px solid var(--border) !important;

}



.cart-item {

  border-bottom: 1px solid var(--border) !important;

  color: var(--text) !important;

}



/* Transitions */

.btn, 

.action-btn, 

.add-to-cart, 

.quick-add-btn, 

.category-card, 

.sidebar-category-card,

.bottom-nav-item,

.filter-item {

  transition: all 250ms ease !important;

}



.btn:active, 

.action-btn:active, 

.quick-add-btn:active {

  transform: scale(0.92) !important;

}



@keyframes cartBounce {

  0%, 100% { transform: scale(1); }

  50% { transform: scale(1.25); }

}



.cart-bounce-anim {

  animation: cartBounce 0.3s ease !important;

}



/* Fix quantity selector number visibility */

.quantity-input input[type="number"] {

  padding: 0 !important;

  height: 44px !important;

  width: 50px !important;

  text-align: center !important;

  background: transparent !important;

  border: none !important;

  color: #FFFFFF !important;

  font-size: 16px !important;

  font-weight: 700 !important;

  box-shadow: none !important;

  -moz-appearance: textfield !important; /* Firefox */

}

.quantity-input input[type="number"]::-webkit-outer-spin-button,

.quantity-input input[type="number"]::-webkit-inner-spin-button {

  -webkit-appearance: none !important; /* Chrome/Safari */

  margin: 0 !important;

}



/* Fix pagination buttons for Black Edition */

.pagination a {

  background: var(--surface) !important;

  color: #FFFFFF !important;

  border: 1px solid var(--border) !important;

}

.pagination a:hover {

  background: var(--primary) !important;

  color: #FFFFFF !important;

  border-color: var(--primary) !important;

}

.pagination span.current {

  background: var(--primary) !important;

  color: #FFFFFF !important;

}

.pagination span.dots {

  color: var(--muted) !important;

}



/* Fix subcategories list on desktop */

@media (min-width: 768px) {

  #subcategories-grid-container,

  .category-content .categories-grid {

    display: grid !important;

    grid-template-columns: repeat(auto-fill, 88px) !important;

    gap: 16px !important;

    overflow-x: visible !important;

    width: 100% !important;

    margin: 0 0 30px 0 !important;

    padding: 0 !important;

    justify-content: start !important;

  }

}



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

   FEATURED CATEGORIES REDESIGN (Inspired by Apple, Samsung, Nothing)

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

#featured-categories-section {

  background-color: var(--bg) !important;

  padding: clamp(2.5rem, 6vw, 4.5rem) 0 !important;

  position: relative !important;

}



#featured-categories-section .section-title {

  color: #ffffff !important;

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;

  font-weight: 700 !important;

  font-size: clamp(1.5rem, 4vw, 2.2rem) !important;

  letter-spacing: -0.03em !important;

  margin-bottom: clamp(1.5rem, 4vw, 2.5rem) !important;

}



#featured-categories-grid {
  display: grid;
  gap: clamp(1rem, 3vw, 2rem) !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}



/* Tablet view */

@media (min-width: 600px) {

  #featured-categories-grid,

  #subcategories-grid-container {

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

  }

}



/* Desktop view */

@media (min-width: 992px) {

  #featured-categories-grid,

  #subcategories-grid-container {

    grid-template-columns: repeat(4, 1fr) !important;

  }

}



/* Category Card styling */

#featured-categories-grid .category-card,

#subcategories-grid-container .category-card {

  width: 100% !important;

  height: auto !important;

  aspect-ratio: 1 / 1.15 !important;

  flex: none !important;

  background: var(--card) !important; /* Apple-style dark surface card */

  border: 1px solid rgba(255, 255, 255, 0.05) !important;

  border-radius: 18px !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  padding: clamp(1.2rem, 3vw, 2rem) !important;

  box-sizing: border-box !important;

  text-decoration: none !important;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;

  transition: all 300ms cubic-bezier(0.25, 0.8, 0.25, 1) !important;

}



/* Hover effects */

#featured-categories-grid .category-card:hover,

#subcategories-grid-container .category-card:hover {

  transform: translateY(-6px) !important;

  border-color: rgba(255, 59, 48, 0.4) !important; /* Soft red border glow */

  box-shadow: 0 12px 30px rgba(255, 59, 48, 0.15), 0 8px 24px rgba(0, 0, 0, 0.4) !important; /* Elegant shadow increase + soft red glow */

}



/* Icon Container */

#featured-categories-grid .category-card .category-icon,

#subcategories-grid-container .category-card .category-icon {

  width: 64px !important;

  height: 64px !important;

  margin-bottom: clamp(1rem, 2vw, 1.5rem) !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  background: #2c2c2e !important; /* Circular dark background */

  border-radius: 50% !important;

  transition: all 300ms ease !important;

  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.05) !important;

  overflow: hidden !important;

}



@media (min-width: 992px) {

  #featured-categories-grid .category-card .category-icon,

  #subcategories-grid-container .category-card .category-icon {

    width: 80px !important;

    height: 80px !important;

  }

}



/* Hover scales the icon wrapper slightly */

#featured-categories-grid .category-card:hover .category-icon,

#subcategories-grid-container .category-card:hover .category-icon {

  background: #ff3b30 !important; /* Subtle red accent background on hover */

  box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3) !important;

}



/* Icon (SVG / Image) size & colors */

#featured-categories-grid .category-card .category-icon img,

#subcategories-grid-container .category-card .category-icon img {

  width: clamp(42px, 5vw, 58px) !important;

  height: clamp(42px, 5vw, 58px) !important;

  object-fit: contain !important;

  transition: transform 300ms cubic-bezier(0.25, 0.8, 0.25, 1) !important;

}



#featured-categories-grid .category-card .category-icon svg,

#subcategories-grid-container .category-card .category-icon svg {

  width: clamp(30px, 3.5vw, 38px) !important;

  height: clamp(30px, 3.5vw, 38px) !important;

  object-fit: contain !important;

  transition: transform 300ms cubic-bezier(0.25, 0.8, 0.25, 1) !important;

  stroke: #ffffff !important; /* White icons */

}



#featured-categories-grid .category-card:hover .category-icon img,

#featured-categories-grid .category-card:hover .category-icon svg,

#subcategories-grid-container .category-card:hover .category-icon img,

#subcategories-grid-container .category-card:hover .category-icon svg {

  transform: scale(1.08) !important;

}



/* Typography styles */

#featured-categories-grid .category-card h3,

#subcategories-grid-container .category-card h3 {

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;

  font-size: clamp(0.85rem, 1.8vw, 1rem) !important;

  font-weight: 500 !important;

  color: #e5e5ea !important; /* White titles */

  margin: 0 !important;

  text-align: center !important;

  white-space: normal !important;

  overflow: visible !important;

  text-overflow: clip !important;

  line-height: 1.3 !important;

  letter-spacing: -0.01em !important;

  transition: all 300ms ease !important;

  opacity: 0.85 !important;

}



#featured-categories-grid .category-card:hover h3,

#subcategories-grid-container .category-card:hover h3 {

  color: #ffffff !important;

  opacity: 1 !important;

}



/* Optional Gray product count styling if render adds it */

#featured-categories-grid .category-card .product-count,

#featured-categories-grid .category-card span.count,

#subcategories-grid-container .category-card .product-count,

#subcategories-grid-container .category-card span.count {

  font-family: 'Inter', sans-serif !important;

  font-size: clamp(0.75rem, 1.8vw, 0.85rem) !important;

  color: #8e8e93 !important; /* Gray count */

  margin-top: 6px !important;

  font-weight: 500 !important;

}



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

   MOBILE & DESKTOP CATEGORY PAGE REDESIGN (Inspired by Apple Store)

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



/* Global Dark Theme Background */

body,

.main-content,

.category-page {

  background-color: var(--bg) !important;

}



/* --- MOBILE CATEGORY CAROUSEL (Top scroll row) --- */

@media (max-width: 767px) {

  #sidebar-categories-tree {

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: nowrap !important;

    overflow-x: auto !important;

    gap: 12px !important;

    padding: 12px var(--container-padding) !important;

    scrollbar-width: none !important;

    -webkit-overflow-scrolling: touch !important;

    width: 100% !important;

    max-width: 100% !important;

    margin-left: 0 !important;

    box-sizing: border-box !important;

    touch-action: pan-x pan-y !important;

  }

  

  #sidebar-categories-tree::-webkit-scrollbar {

    display: none !important;

  }



  #sidebar-categories-tree .mob-chip-wrapper {

    flex: 0 0 100px !important;

    width: 100px !important;

    display: flex !important;

    justify-content: center !important;

  }

  

  #sidebar-categories-tree .mob-cat-chip {

    display: flex !important;

    flex-direction: column !important; /* Stack icon and title vertically */

    align-items: center !important;

    justify-content: space-between !important;

    background: #181818 !important; /* Inactive category: dark gray */

    border: 1px solid rgba(255, 255, 255, 0.05) !important;

    border-radius: 20px !important; /* Rounded corners 18-24px */

    width: 100px !important;

    height: 125px !important;

    padding: 12px 8px !important;

    gap: 8px !important;

    box-sizing: border-box !important;

    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) !important;

    transition: all 0.30s cubic-bezier(0.25, 0.8, 0.25, 1) !important;

    backdrop-filter: blur(10px) !important;

    -webkit-backdrop-filter: blur(10px) !important;

  }

  

  /* Icon Container mobile (64px) */

  #sidebar-categories-tree .mob-cat-chip__icon {

    width: 64px !important;

    height: 64px !important;

    border-radius: 50% !important; /* Circular dark icon background */

    background: #2a2a2a !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    overflow: hidden !important;

    margin: 0 !important;

    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.05) !important;

    transition: transform 300ms ease !important;

  }

  

  /* Image size inside circle (fills 90% of container) */

  #sidebar-categories-tree .mob-cat-chip__img {

    width: 90% !important;

    height: 90% !important;

    object-fit: contain !important;

  }

  

  #sidebar-categories-tree .mob-cat-chip__icon svg {

    width: 60% !important;

    height: 60% !important;

    stroke: #ffffff !important;

  }

  

  #sidebar-categories-tree .mob-cat-chip__text {

    font-family: 'Inter', sans-serif !important;

    font-size: 11px !important;

    font-weight: 600 !important;

    color: #b3b3b3 !important; /* Gray text for inactive */

    text-align: center !important;

    width: 100% !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    transition: color 300ms ease !important;

  }

  

  /* Active Category has a red glowing border and subtle bounce animation */

  #sidebar-categories-tree .mob-cat-chip.mob-cat-chip--active {

    background: rgba(255, 0, 51, 0.12) !important;

    border-color: #ff0033 !important; /* Accent red border */

    box-shadow: 0 0 16px rgba(255, 0, 51, 0.35) !important; /* Glow */

    transform: translateY(-4px) !important; /* Bounce up */

  }

  

  #sidebar-categories-tree .mob-cat-chip.mob-cat-chip--active .mob-cat-chip__icon {

    background: #ff0033 !important;

    box-shadow: 0 4px 12px rgba(255, 0, 51, 0.4) !important;

  }

  

  #sidebar-categories-tree .mob-cat-chip.mob-cat-chip--active .mob-cat-chip__text {

    color: #ffffff !important; /* White typography */

    font-weight: 700 !important;

  }

}



/* --- DESKTOP SIDEBAR REDESIGN --- */

@media (min-width: 768px) {

  .filters-sidebar {

    background: #181818 !important; /* Cards dark gray */

    border: 1px solid rgba(255, 255, 255, 0.05) !important;

    border-radius: 18px !important;

    padding: 24px !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 24px !important;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important;

  }

  

  #sidebar-categories-title {

    font-family: 'Inter', sans-serif !important;

    font-weight: 700 !important;

    font-size: 16px !important;

    letter-spacing: -0.02em !important;

    color: #ffffff !important;

    margin-bottom: 12px !important;

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

    padding-bottom: 8px !important;

  }

  

  #sidebar-categories-tree {

    display: flex !important;

    flex-direction: column !important;

    gap: 8px !important;

  }

  

  .sidebar-category-card {

    display: flex !important;

    align-items: center !important;

    flex-direction: row !important;

    padding: 12px 16px !important;

    background: transparent !important;

    border: 1px solid transparent !important;

    border-radius: 12px !important;

    text-decoration: none !important;

    color: #b3b3b3 !important; /* Gray text for inactive */

    gap: 12px !important;

    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;

    cursor: pointer !important;

    width: 100% !important;

    box-sizing: border-box !important;

  }

  

  /* Icon inside sidebar */

  .sidebar-category-icon {

    width: 24px !important;

    height: 24px !important;

    min-width: 24px !important;

    object-fit: contain !important;

    filter: brightness(0.9) !important;

    transition: all 0.25s ease !important;

  }

  

  .sidebar-category-card svg.sidebar-category-icon {

    stroke: #b3b3b3 !important;

    stroke-width: 2px !important;

  }

  

  .sidebar-category-card .category-name {

    font-family: 'Inter', sans-serif !important;

    font-size: 14px !important;

    font-weight: 500 !important;

    color: #b3b3b3 !important;

    transition: all 0.25s ease !important;

  }

  

  /* Hover effects */

  .sidebar-category-card:hover {

    background: rgba(255, 255, 255, 0.03) !important;

    color: #ffffff !important;

  }

  

  .sidebar-category-card:hover .category-name {

    color: #ffffff !important;

  }

  

  .sidebar-category-card:hover .sidebar-category-icon {

    filter: brightness(1) !important;

    transform: scale(1.08) !important;

  }

  

  .sidebar-category-card:hover svg.sidebar-category-icon {

    stroke: #ffffff !important;

  }

  

  /* Selected / Active category highlighted with red accent */

  .sidebar-category-card.active,

  .sidebar-category-card.selected {

    background: rgba(255, 0, 51, 0.1) !important;

    border-color: rgba(255, 0, 51, 0.2) !important;

    color: #ffffff !important;

  }

  

  .sidebar-category-card.active .category-name,

  .sidebar-category-card.selected .category-name {

    color: #ff0033 !important; /* Selected category text highlighted in red */

    font-weight: 700 !important;

  }

  

  .sidebar-category-card.active .sidebar-category-icon,

  .sidebar-category-card.selected .sidebar-category-icon {

    filter: drop-shadow(0 0 4px rgba(255, 0, 51, 0.6)) !important;

  }

  

  .sidebar-category-card.active svg.sidebar-category-icon,

  .sidebar-category-card.selected svg.sidebar-category-icon {

    stroke: #ff0033 !important;

  }

}



/* --- SUBCATEGORIES PILL NAVIGATION --- */

#subcategories-grid-container {

  width: 100% !important;

  max-width: 100vw !important;

  display: flex !important;

  flex-direction: row !important;

  flex-wrap: nowrap !important;

  gap: 12px !important;

  padding: 10px 0 !important;

  margin-bottom: 25px !important;

  width: 100% !important;

  overflow-x: auto !important;

  scrollbar-width: none !important;

}



#subcategories-grid-container::-webkit-scrollbar {

  display: none !important;

}



/* Base style for subcategory pill on mobile (class="mob-cat-chip") */

#subcategories-grid-container .mob-cat-chip,

.mob-cat-chip {

  display: inline-flex !important;

  align-items: center !important;

  flex-direction: row !important;

  background: #181818 !important; /* Cards dark gray */

  border: 1px solid rgba(255, 255, 255, 0.05) !important;

  border-radius: 50px !important; /* Rounded pill design */

  padding: 8px 16px 8px 8px !important;

  gap: 10px !important;

  cursor: pointer !important;

  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;

  text-decoration: none !important;

  width: auto !important;

  height: auto !important;

  aspect-ratio: auto !important;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;

  flex: none !important;

}



/* Icon / image thumbnail within the pill */

#subcategories-grid-container .mob-cat-chip__icon,

.mob-cat-chip__icon {

  width: 32px !important;

  height: 32px !important;

  min-width: 32px !important;

  border-radius: 50% !important; /* Circular icon container */

  background: #2a2a2a !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  overflow: hidden !important;

  margin: 0 !important;

}



#subcategories-grid-container .mob-cat-chip__img,

.mob-cat-chip__img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important; /* Thumbnails fill container */

}



#subcategories-grid-container .mob-cat-chip__icon svg,

.mob-cat-chip__icon svg {

  width: 16px !important;

  height: 16px !important;

  stroke: #ffffff !important;

}



/* Text name */

#subcategories-grid-container .mob-cat-chip__text,

.mob-cat-chip__text {

  font-family: 'Inter', sans-serif !important;

  font-size: 13.5px !important;

  font-weight: 600 !important;

  color: #e5e5ea !important;

  margin: 0 !important;

  text-align: left !important;

  white-space: nowrap !important;

}



/* Hover effect */

#subcategories-grid-container .mob-cat-chip:hover,

.mob-cat-chip:hover {

  background: #252525 !important;

  border-color: rgba(255, 0, 51, 0.3) !important;

}



/* Active subcategory highlighted with red accent */

#subcategories-grid-container .mob-cat-chip--active,

.mob-cat-chip--active {

  background: rgba(255, 0, 51, 0.15) !important;

  border-color: #ff0033 !important; /* Accent red border */

  box-shadow: 0 0 12px rgba(255, 0, 51, 0.25) !important;

}



#subcategories-grid-container .mob-cat-chip--active .mob-cat-chip__text,

.mob-cat-chip--active .mob-cat-chip__text {

  color: #ffffff !important;

  font-weight: 700 !important;

}



#subcategories-grid-container .mob-cat-chip--active .mob-cat-chip__icon,

.mob-cat-chip--active .mob-cat-chip__icon {

  background: #ff0033 !important;

}



/* --- PREMIUM FILTER CHIPS --- */

#sidebar-filters-list {

  display: flex !important;

  flex-wrap: wrap !important;

  gap: 8px !important;

  margin-top: 10px !important;

  width: 100% !important;

}



@media (max-width: 767px) {

  #sidebar-filters-list {

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: nowrap !important;

    overflow-x: auto !important;

    scrollbar-width: none !important;

    padding: 4px var(--container-padding) !important;

    margin-left: calc(-1 * var(--container-padding)) !important;

    width: 100vw !important;

    box-sizing: border-box !important;

  }

  #sidebar-filters-list::-webkit-scrollbar {

    display: none !important;

  }

}



.filter-item,

.filter-chip {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  padding: 10px 18px !important;

  background: #181818 !important; /* Cards dark gray */

  border: 1px solid rgba(255, 255, 255, 0.05) !important;

  border-radius: 50px !important; /* Rounded pill design */

  font-family: 'Inter', sans-serif !important;

  font-size: 13px !important;

  font-weight: 600 !important;

  color: #b3b3b3 !important; /* Gray text for inactive */

  text-decoration: none !important;

  cursor: pointer !important;

  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;

  white-space: nowrap !important;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;

  height: auto !important;

  width: auto !important;

  flex: none !important;

}



.filter-item:hover,

.filter-chip:hover {

  background: #252525 !important;

  color: #ffffff !important;

  border-color: rgba(255, 0, 51, 0.3) !important;

}



/* Active filter chip highlighted with red accent */

.filter-item.active,

.filter-chip.active,

.filter-chip.selected {

  background: #ff0033 !important; /* Accent red */

  color: #ffffff !important; /* White typography */

  border-color: #ff0033 !important;

  box-shadow: 0 4px 12px rgba(255, 0, 51, 0.35) !important;

}



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

   LOGO STYLING AND SIZE OVERRIDES (Restore Details & Fixed Size)

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

.logo img, 

.header-inner .logo img,

.footer-logo img {

  filter: none !important; /* Disable forcing solid white to show full details of uploaded logo */

  height: auto !important;  

  max-height: 60px !important; /* Maximum 60px height for desktop (fits within 80px header) */

  width: auto !important;

  max-width: 200px !important;

  object-fit: contain !important;

  display: block !important;

  transition: all 0.25s ease !important;

}



@media (max-width: 767px) {

  .logo img, 

  .header-inner .logo img {

    height: auto !important;

    max-height: 48px !important; /* Automatically reduces to 40px-48px on mobile */

    max-width: 140px !important;

  }



  /* Shift header down when topbar is active on mobile */

  body:has(#topbar-section:not([style*="display: none"])) .header.sticky {

    top: 34px !important;

  }

  

  body:has(#topbar-section:not([style*="display: none"])) {

    padding-top: calc(126px + 34px + var(--safe-top)) !important;

  }

  

  body:has(#topbar-section:not([style*="display: none"])) .topbar {

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    right: 0 !important;

    z-index: 10000 !important;

    height: 34px !important;

    display: flex !important;

    align-items: center !important;

  }

}



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

   PREMIUM MOBILE HAMBURGER MENU REDESIGN

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

.nav-mobile,

#mobileNav {

  background: #121212 !important; /* 100% solid background color */

  z-index: 9999999 !important; /* Very high z-index */

  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;

  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;

}



body:has(#topbar-section:not([style*="display: none"])) .nav-mobile {

  top: calc(126px + 34px + var(--safe-top)) !important;

}



body:not(:has(#topbar-section:not([style*="display: none"]))) .nav-mobile {

  top: calc(126px + var(--safe-top)) !important;

}



/* Override color styles */

.nav-mobile a, 

.nav-mobile span, 

.nav-mobile button, 

.nav-mobile .mobile-menu-title {

  color: #ffffff !important;

}



/* Premium links style */

.mobile-menu li a {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  padding: 16px 12px !important;

  color: #ffffff !important; /* White color to stand out on dark background */

  font-family: 'Inter', sans-serif !important;

  font-size: 15px !important;

  font-weight: 500 !important;

  text-transform: uppercase !important; /* Uppercase categories and links in hamburger menu */

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

  text-decoration: none !important;

  transition: all 250ms ease !important;

}



.mobile-menu li a:hover,

.mobile-menu li a:active {

  color: #ff0033 !important; /* Red hover accent */

  background: rgba(255, 0, 51, 0.05) !important;

  padding-left: 20px !important; /* Subtle slide in animation */

}



/* Show chevron on right of links */

.mobile-menu li a::after {

  content: "→" !important;

  font-size: 16px !important;

  color: rgba(255, 255, 255, 0.3) !important;

  transition: all 250ms ease !important;

}



.mobile-menu li a:hover::after,

.mobile-menu li a:active::after {

  color: #ff0033 !important;

  transform: translateX(4px) !important;

}



/* Mobile language switcher inside menu */

.mobile-lang {

  margin-top: 24px !important;

  padding: 16px 12px !important;

  display: flex !important;

  gap: 12px !important;

  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;

}



.mobile-lang a {

  flex: 1 !important;

  text-align: center !important;

  padding: 10px 16px !important;

  background: #252525 !important;

  color: #ffffff !important;

  border-radius: 30px !important;

  font-weight: 600 !important;

  font-size: 13.5px !important;

  text-decoration: none !important;

  border: 1px solid rgba(255, 255, 255, 0.05) !important;

  transition: all 0.2s ease !important;

}



.mobile-lang a:active,

.mobile-lang a:hover {

  background: #ff0033 !important;

  border-color: #ff0033 !important;

}



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

   OPTIMIZIMET E LOGOS DHE HERO SLIDER-IT (RESPONSIVE & PERFORMANCE)

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



/* 1. Dimensionet dhe optimizimi i logos në Desktop dhe Mobile */

.logo img, 

.header-inner .logo img, 

.logo-container img {

    height: 45px !important; /* Lartësia e optimizuar për mobile (40px-50px) */

    max-height: 50px !important;

    width: auto !important;

    object-fit: contain !important;

}



.footer-logo img {

    height: 45px !important;

    max-height: 50px !important;

    width: auto !important;

    object-fit: contain !important;

}



@media (min-width: 992px) {

    .logo img, 

    .header-inner .logo img, 

    .logo-container img {

        height: 55px !important; /* Mbron logon që të mos dalë jashtë header-it prej 80px */

        max-height: 55px !important;

    }

}



/* 2. Fshehja e Bottom Navigation Bar në Desktop */

@media (min-width: 992px) {

    .bottom-nav, 

    #mobile-bottom-nav {

        display: none !important; /* Largo shiritin e poshtëm në desktop */

    }

    body {

        padding-bottom: 0 !important; /* Largo padding-bottom e tepërt në desktop */

    }

}



/* 3. Optimizimi i Slider (Banners) dhe strategjia Responsive Images */

.slide .slide-image,

.slide-image {

    object-fit: cover !important; /* Siguron që imazhet të mos deformohen */

    width: 100% !important;

    height: 100% !important;

    object-position: center !important;

}



/* Lartësitë responsive për slider-in në mënyrë që të përshtatet me bannerat 1920x600 dhe 800x900 */

@media (min-width: 768px) {

    .hero-slider, #homepage-slider {

        height: 320px !important;

    }

    .slider-track, .slide {

        min-height: 320px !important;

    }

}



@media (min-width: 992px) {

    .hero-slider, #homepage-slider {

        height: 420px !important; /* Pamje premium për desktop */

    }

    .slider-track, .slide {

        min-height: 420px !important;

    }

}



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

   OPTIMIZIMET E KARTAVE TË KATEGORIVE (ZVOGËLUAR 20% & FOTO BRENDA RRITUR 50%)

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



/* Zvogëlimi i kartës së kategorisë me rreth 20% të tjera në gjerësi dhe lartësi */
#featured-categories-grid .category-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    aspect-ratio: 1 / 1.02 !important; /* Ruajmë formën kompakte */
    padding: clamp(0.5rem, 1.5vw, 0.9rem) !important;
}



/* Rritja e rrethit të ikonës / imazhit me 50% më shumë */

#featured-categories-grid .category-card .category-icon {

    width: 100px !important;

    height: 100px !important;

    margin-bottom: 0.6rem !important;

    background: var(--surface) !important;

}



@media (min-width: 992px) {
    #featured-categories-grid .category-card .category-icon {
        width: 80px !important;
        height: 80px !important;
    }
}



/* Rritja e imazheve dhe SVGs brenda rrethit që të mbulojnë pothuajse të gjithë rrethin */

#featured-categories-grid .category-card .category-icon img {

    width: 92% !important;

    height: 92% !important;

    max-width: 92% !important;

    max-height: 92% !important;

    object-fit: contain !important;

}



#featured-categories-grid .category-card .category-icon svg {

    width: 65% !important;

    height: 65% !important;

    max-width: 65% !important;

    max-height: 65% !important;

    object-fit: contain !important;

}







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

   KORRIGJIMI I RESPONSIVITETIT DHE OVERFLOW-X PËR PRODUKTET NË CELULAR

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

@media (max-width: 767px) {

    /* 1. Ndalimi i çdo overflow-x në strukturën kryesore dhe rregullimi i gjerësisë */

    html, body {

        overflow-x: hidden !important;

    }



    .main-content, 

    .category-page, 

    .category-layout, 

    .category-content {

        width: 100% !important;

        max-width: 100% !important;

        box-sizing: border-box !important;

        margin-left: 0 !important;

        margin-right: 0 !important;

        padding-left: 0 !important;

        padding-right: 0 !important;

    }

    

    /* 2. Përshtatja e padding-ut të container-it kryesor */

    .container {

        width: 100% !important;

        max-width: 100% !important;

        padding-left: 12px !important;

        padding-right: 12px !important;

        box-sizing: border-box !important;

    }



    /* 3. Sigurimi që grid-i i produkteve të mos dalë jashtë ekranit */

    .products-grid, 

    #new-arrivals-grid, 

    #best-sellers-grid, 

    #special-offers-grid,

    #category-products-grid {

        display: grid !important;

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

        gap: 12px !important;

        padding: 12px !important;

        width: 100% !important;

        max-width: 100% !important;

        box-sizing: border-box !important;

        margin: 0 auto !important;

        overflow: hidden !important;

    }



    /* 4. Optimizimi i kartës së produktit (zgjatur me 10%) */

    .product-card {

        width: 100% !important;

        max-width: 100% !important;

        box-sizing: border-box !important;

        margin: 0 !important;

        padding: 12px !important;

        min-height: 300px !important; /* Zgjatet karta për 10% për pamje më elegante */

        overflow: hidden !important; /* Parandalon daljen e elementeve jashtë kartës */

    }



    /* 5. Optimizimi i fotove të produkteve (rritur me 10% në lartësi) */

    .product-image {

        height: 154px !important; /* Zgjatet për 10% */

        margin-bottom: 10px !important;

    }



    /* 6. Optimizimi i çmimeve dhe butonit të shportës në footer */

    .product-footer {

        display: flex !important;

        flex-direction: row !important;

        align-items: flex-end !important;

        justify-content: space-between !important;

        gap: 4px !important;

        width: 100% !important;

        box-sizing: border-box !important;

    }



    .product-price {

        display: flex !important;

        flex-direction: column !important; /* Stack çmimet vertikalisht në celular */

        align-items: flex-start !important;

        gap: 2px !important;

        min-width: 0 !important;

        flex: 1 !important;

    }



    /* Rregullimi i madhësisë së çmimeve */

    .price-current {

        font-size: 14px !important;

        font-weight: 800 !important;

        white-space: nowrap !important;

    }



    .price-mkd {

        font-size: 10px !important;

        white-space: nowrap !important;

    }



    .price-old {

        font-size: 10px !important;

        white-space: nowrap !important;

    }



    /* Zvogëlimi i butonit të kuq të shportës në mobile për të mos shtyrë çmimet */

    .product-actions, 

    .quick-add-btn {

        width: 32px !important;

        height: 32px !important;

        min-width: 32px !important;

        border-radius: 50% !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        flex-shrink: 0 !important;

    }



    .product-actions svg {

        width: 16px !important;

        height: 16px !important;

    }

}



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

   HAMBURGER MENU & SLIDER Z-INDEX OVERRIDES

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

.nav-mobile, #mobileNav {

    background-color: #111111 !important; /* Force a solid dark background, NO transparency */

    z-index: 99999 !important; /* Force it on top of EVERYTHING */

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    width: 100% !important;

    height: 100vh !important;

}



#hamburgerBtn {

    z-index: 100000 !important; /* Keep hamburger button above the solid menu backdrop */

}



/* Lower slider elements z-index so they don't pierce through the menu */

.slider-arrows, 

.slider-controls, 

#slider-dots-container, 

.slider-arrow, 

.slider-dot {

    z-index: 10 !important;

}



/* Sigurohemi që shiriti i poshtëm (bottom-nav) të jetë gjithmonë i dukshëm dhe të ketë padding në të gjitha pajisjet mobile dhe tablet (nën 992px) */

@media (max-width: 991px) {

    .bottom-nav, 

    #mobile-bottom-nav {

        display: flex !important;

    }

    body {

        padding-bottom: calc(75px + var(--safe-bottom, 0px)) !important;

    }

}



/* Sigurohemi që input-et e kërkimit të mos kenë asnjë border apo outline të brendshëm dhe të ndajnë të njëjtin font */

.search-input, 

#service-tracking-input, 

#search-input-field,

#mobile-search-input-field {

    border: none !important;

    outline: none !important;

    box-shadow: none !important;

    background: transparent !important;

    padding-left: 56px !important;

    font-size: 15px !important;

    font-family: inherit !important;

}



/* Efekti i Zgjerimit të Butë (Smooth Search Bar Transition) në Celular/Tablet */

@media (max-width: 991px) {

    .search-bars-container {

        display: flex !important;

        flex-direction: row !important; /* Vendos fushën e kërkimit dhe servisit në një rresht */

        gap: 8px !important;

        align-items: center !important;

    }



    .search-wrapper {

        width: auto !important;

        flex: 1 !important; /* Ndajnë hapësirën në mënyrë të barabartë (50/50) */

        transition: flex 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;

    }



    /* Kur njëra fushë merr fokusin (klikohet), ajo zgjerohet */

    .search-bars-container .search-wrapper:focus-within {

        flex: 3.5 !important; /* Zgjerohet në rreth 78% të rreshtit */

    }



    /* Fushë tjetër që nuk është aktive zvogëlohet dhe i fshehim përkohësisht tekstin placeholder për pastërti vizuale */

    .search-bars-container:has(.search-wrapper:focus-within) .search-wrapper:not(:focus-within) {

        flex: 1 !important; /* Zvogëlohet në rreth 22% të rreshtit */

    }



    .search-bars-container:has(.search-wrapper:focus-within) .search-wrapper:not(:focus-within) .search-input::placeholder {

        color: transparent !important; /* Fsheh tekstin e placeholder-it për fushat e zvogëluara */

    }

}



/* Zvogëlimi me 20% i komplet faqes së produktit (Look & Feel nga screenshot) */

.product-layout {

    max-width: 1080px !important;

    margin: 0 auto !important;

    gap: 32px !important; /* 40px * 0.8 = 32px */

}



/* 1. Gallery / Foto e produktit */

.gallery-main {

    max-width: 440px !important;

    margin-left: auto !important;

    margin-right: auto !important;

    border-radius: 16px !important; /* 20px * 0.8 = 16px */

}

.gallery-main img {

    padding: 24px !important; /* 30px * 0.8 = 24px */

}

.gallery-thumb {

    flex: 0 0 64px !important; /* 80px * 0.8 = 64px */

    height: 64px !important;

}



/* 2. Tekstet dhe titujt */

.product-details h1 {

    font-size: 1.8rem !important; /* 2.25rem * 0.8 = 1.8rem */

    margin-bottom: 16px !important; /* 20px * 0.8 = 16px */

}

@media (max-width: 767px) {

    .product-details h1 {

        font-size: 1.4rem !important; /* 1.75rem * 0.8 = 1.4rem */

    }

}

.product-details .price-current {

    font-size: 1.6rem !important; /* 2rem * 0.8 = 1.6rem */

}

.product-details .price-old {

    font-size: 1rem !important; /* 1.25rem * 0.8 = 1rem */

}

.product-details .product-price {

    margin-bottom: 20px !important; /* 25px * 0.8 = 20px */

}

.product-stock {

    margin-bottom: 20px !important; /* 25px * 0.8 = 20px */

    font-size: 0.9rem !important;

}



/* 3. Zgjedhësit (ngjyrat, etj) */

.product-colors h4,

.product-condition-selector h4 {

    font-size: 0.9rem !important;

    margin-bottom: 10px !important;

}

.color-option,

.condition-option {

    padding: 6px 12px !important;

    font-size: 0.85rem !important;

}



/* 4. Tabela / Grid i informacionit */

.product-info-grid-styled {

    margin-bottom: 16px !important;

    padding: 8px 0 !important;

}

.info-grid-row {

    padding: 9.6px 0 !important; /* 12px * 0.8 = 9.6px */

    font-size: 11.5px !important; /* 14px * 0.8 = 11.2px */

}



/* 5. Butoni Shto në Shportë dhe Sasia */

.quantity-buy-row {

    margin: 20px 0 !important; /* 24px * 0.8 = 19.2px */

    gap: 12px !important; /* 15px * 0.8 = 12px */

}

.quantity-input {

    height: 36px !important; /* 44px * 0.8 = 35.2px */

}

.quantity-btn {

    width: 36px !important;

    height: 36px !important;

    font-size: 1rem !important;

}

.quantity-input input {

    height: 36px !important;

    width: 36px !important;

    font-size: 0.9rem !important;

}

.btn-add-to-cart-styled {

    height: 36px !important; /* 48px * 0.8 = 38.4px (rumbullakosur në 36px për t'u përputhur me sasinë) */

    font-size: 13.5px !important; /* 16px * 0.8 = 12.8px */

    padding: 8px 16px !important;

    border-radius: 10px !important; /* 12px * 0.8 = 9.6px */

}



/* 6. Ikona e besimit (Trust Badges) */

.trust-badges-list {

    padding-top: 16px !important;

}

.trust-badge-item {

    font-size: 0.85rem !important;

    margin-bottom: 8px !important;

}

.trust-icon {

    width: 16px !important; /* 20px * 0.8 = 16px */

    height: 16px !important;

}



/* Butoni i Shpërndarjes (Share Button) te Produkti */

.product-title-share-row {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 16px !important;

    margin-bottom: 20px !important;

    width: 100% !important;

}

.product-title-share-row h1 {

    margin-bottom: 0 !important;

    flex: 1 !important;

}

.btn-share-product {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 36px !important;

    height: 36px !important;

    border-radius: 50% !important;

    background: var(--surface) !important;

    border: 1px solid var(--border) !important;

    color: var(--text) !important;

    cursor: pointer !important;

    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;

    flex-shrink: 0 !important;

}

.btn-share-product:hover {

    background: var(--primary) !important;

    border-color: var(--primary) !important;

    color: #fff !important;

    transform: scale(1.08) !important;

}



/* Përmirësimi i leximit të kushtit të produktit (New/Used Selector) në Dark Mode */

.product-condition-selector .condition-label {

    background: var(--surface) !important;

    border: 1px solid var(--border) !important;

    color: var(--text) !important;

}



.product-condition-selector .condition-option:hover .condition-label,

.product-condition-selector .condition-option.active .condition-label {

    border-color: var(--primary) !important;

    background: rgba(227, 6, 19, 0.1) !important;

    box-shadow: 0 0 0 2px rgba(227, 6, 19, 0.2) !important;

}



.product-condition-selector .condition-name {

    color: var(--text) !important;

}



.product-condition-selector .condition-price {

    color: var(--primary) !important;

}



/* Badges e gjendjes (Used/New Badge) sipër përshkrimit */

.product-condition-badge.used {

    background: rgba(245, 158, 11, 0.15) !important; /* Orange/amber transparent */

    color: #F59E0B !important;

    border: 1px solid rgba(245, 158, 11, 0.3) !important;

}



.product-condition-badge.new {

    background: rgba(34, 197, 94, 0.15) !important; /* Green transparent */

    color: #22C55E !important;

    border: 1px solid rgba(34, 197, 94, 0.3) !important;

}



/* Zbutja e tranzicionit gjatë ngarkimit të faqes (Parandalimi i layout flash/shift) - hequr nga globalisht që të jetë e menjëhershme */

body {

    opacity: 1 !important;

}





/* Shfaqja e përzgjedhësit të gjuhës (Language Switcher) në header për pamjen celular */

#main-header #header-lang-switcher {

    display: none;

    align-items: center !important;

    gap: 4px !important;

    margin-right: 8px !important;

}

#main-header #header-lang-switcher .lang-btn {

    padding: 4px 8px !important;

    font-size: 0.7rem !important;

    border-radius: 20px !important;

    line-height: 1.2 !important;

}



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

   ✅ CONSOLIDATED MOBILE APP LAYOUT & BOTTOM NAVIGATION FIX

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



/* Desktop (992px+): Hide bottom nav */

@media (min-width: 992px) {

    .bottom-nav,

    #mobile-bottom-nav {

        display: none !important;

    }

}



/* Mobile & Tablet (up to 991px): Bottom nav fixed & scrolling rules */

@media (max-width: 991px) {

    /* 1. Ensure body has bottom padding to prevent bottom nav from overlapping footer content */

    body {

        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;

    }



    /* 2. Remove any nested scroll constraints from main content containers to ensure natural page scrolling */

    .main-content,

    main,

    .container,

    #root,

    #app {

        overflow: visible !important;

        height: auto !important;

        max-height: none !important;

    }



    /* 3. Bottom Nav container - FIXED to viewport bottom, floating above everything */

    .bottom-nav,

    #mobile-bottom-nav {

        display: flex !important;

        position: fixed !important;

        bottom: 0 !important;

        left: 0 !important;

        right: 0 !important;

        top: auto !important;

        width: 100% !important;

        height: calc(62px + env(safe-area-inset-bottom, 0px)) !important;

        min-height: 62px !important;

        max-height: none !important;

        z-index: 2147483647 !important; /* Ensure it is above ALL elements, hamburger backdrops, etc. */

        

        flex-direction: row !important;

        align-items: center !important;

        justify-content: space-around !important;

        padding-bottom: env(safe-area-inset-bottom, 0px) !important;

        padding-top: 0 !important;

        padding-left: 0 !important;

        padding-right: 0 !important;

        

        /* Modern Glassmorphism Look */

        background: rgba(12, 12, 12, 0.96) !important;

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

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

        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;

        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.6) !important;

        

        /* Box and layout containment settings */

        box-sizing: border-box !important;

        margin: 0 !important;

        visibility: visible !important;

        opacity: 1 !important;

        pointer-events: auto !important;

        transform: translateZ(0) !important; /* Hardware accelerated */

        will-change: transform !important;

        -webkit-transform: translateZ(0) !important;

    }



    /* Standard Navigation Items (Ballina, Kërko, Shporta, Llogaria) */

    .bottom-nav-item,

    #mobile-bottom-nav .bottom-nav-item {

        flex: 1 !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 3px !important;

        height: 62px !important;

        color: var(--color-text-light) !important;

        opacity: 0.6 !important;

        background: transparent !important; /* Force transparent background for standard tabs */

        border: none !important;

        border-radius: 0 !important;

        box-shadow: none !important;

        text-decoration: none !important;

        font-size: 10px !important;

        font-weight: 600 !important;

        padding: 6px 2px !important;

        box-sizing: border-box !important;

        transition: color 0.15s ease, transform 0.1s ease !important;

        cursor: pointer !important;

        -webkit-tap-highlight-color: transparent !important;

        white-space: nowrap !important;

    }



    .bottom-nav-item:active {

        transform: scale(0.9) !important;

    }



    /* SVG Icons for standard items */

    .bottom-nav-item svg,

    #mobile-bottom-nav .bottom-nav-item svg {

        width: 22px !important;

        height: 22px !important;

        flex-shrink: 0 !important;

        margin: 0 !important;

        color: var(--color-text-light) !important;

        stroke: var(--color-text-light) !important;

    }



    /* Text labels */

    .bottom-nav-text,

    .bottom-nav-item span:not(.cart-count) {

        font-size: 10px !important;

        font-weight: 600 !important;

        line-height: 1 !important;

        white-space: nowrap !important;

        display: block !important;

    }



    /* Active State for standard items */

    .bottom-nav-item.active-nav,

    .bottom-nav-item.active-nav svg,

    #mobile-bottom-nav .bottom-nav-item.active-nav,

    #mobile-bottom-nav .bottom-nav-item.active-nav svg {

        color: var(--color-primary, #e53935) !important;

        stroke: var(--color-primary, #e53935) !important;

        opacity: 1 !important;

        background: transparent !important; /* Force transparent background for active normal tabs */

    }



    /* Categories Tab - Floating Action Button (FAB) in the center */

    #bottom-nav-categories,

    #mobile-bottom-nav #bottom-nav-categories {

        flex: 0 0 52px !important; /* DO NOT GROW OR SHRINK, keep it perfectly circular */

        width: 52px !important;

        height: 52px !important;

        border-radius: 50% !important; /* Perfect circle */

        background: var(--color-primary, #e53935) !important;

        color: #ffffff !important;

        box-shadow: 0 4px 16px rgba(229, 57, 53, 0.55) !important;

        position: relative !important;

        top: -12px !important; /* Float up */

        margin: 0 auto !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        z-index: 1000000 !important;

        transform: translateZ(0) !important;

    }



    #bottom-nav-categories:active {

        transform: scale(0.9) !important;

    }



    /* Categories Tab Icon */

    #bottom-nav-categories svg,

    #mobile-bottom-nav #bottom-nav-categories svg {

        display: none !important; /* Hide default SVG icon if we use custom content */

    }



    /* Custom categories grid icon using before pseudo element */

    #bottom-nav-categories::before,

    #mobile-bottom-nav #bottom-nav-categories::before {

        content: "" !important;

        width: 22px !important;

        height: 22px !important;

        display: block !important;

        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'%3E%3C/rect%3E%3Crect x='14' y='3' width='7' height='7'%3E%3C/rect%3E%3Crect x='14' y='14' width='7' height='7'%3E%3C/rect%3E%3Crect x='3' y='14' width='7' height='7'%3E%3C/rect%3E%3C/svg%3E") no-repeat center !important;

        background-size: contain !important;

    }



    /* Hide text for floating Categories FAB to look clean */

    #bottom-nav-categories .bottom-nav-text,

    #mobile-bottom-nav #bottom-nav-categories .bottom-nav-text {

        display: none !important;

    }



    /* Cart Wrapper - Normal item slot containing the cart tab */

    .bottom-nav-item-cart-wrapper,

    #mobile-bottom-nav .bottom-nav-item-cart-wrapper {

        flex: 1 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        position: relative !important;

        height: 62px !important;

        background: transparent !important;

    }



    /* Cart tab is transparent and acts like a normal item */

    .bottom-nav-cart,

    #bottom-nav-cart {

        background: transparent !important; /* Force transparent, NO red circle background */

        box-shadow: none !important;

        border: none !important;

        border-radius: 0 !important;

        position: static !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        height: 62px !important;

        width: 100% !important;

        top: 0 !important;

        margin: 0 !important;

    }



    .bottom-nav-cart svg,

    #bottom-nav-cart svg {

        color: var(--color-text-light) !important;

        stroke: var(--color-text-light) !important;

        width: 22px !important;

        height: 22px !important;

    }



    /* Active Cart Icon color */

    .bottom-nav-cart.active-nav svg,

    #bottom-nav-cart.active-nav svg {

        color: var(--color-primary, #e53935) !important;

        stroke: var(--color-primary, #e53935) !important;

        opacity: 1 !important;

    }



    /* Badge Count on Cart Icon - placed nicely in the top-right corner of the icon */

    .cart-count,

    .bottom-nav-cart .cart-count,

    #bottom-nav-cart .cart-count {

        position: absolute !important;

        top: 8px !important;

        right: calc(50% - 18px) !important; /* Position next to cart icon */

        background: var(--color-primary, #e53935) !important;

        color: #ffffff !important;

        font-size: 9px !important;

        font-weight: 800 !important;

        min-width: 16px !important;

        height: 16px !important;

        border-radius: 8px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        padding: 0 3px !important;

        border: 2px solid rgba(12, 12, 12, 0.96) !important;

        line-height: 1 !important;

        z-index: 10 !important;

    }

}







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

   📦 KARTAT E NËNKATEGORIVE NË FAQEN E KATEGORISË (category.html)

   Zvogëlimi i kartave të mëdha Samsung / iPhone në pamjen celular

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

@media (max-width: 991px) {

    /* 3 kolona për nënkategoritë në celular që të rrinë krah për krah */

    .category-content #featured-categories-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y !important;
        overscroll-behavior-x: contain !important;
        gap: 10px !important;
        padding: 0 10px !important;
        margin-bottom: 20px !important;
        width: 100% !important;
    }
    
    .category-content #featured-categories-grid::-webkit-scrollbar {
        display: none !important;
    }

    #sidebar-categories-tree,
    .category-content #subcategories-grid-container {
        touch-action: pan-x pan-y !important;
        overscroll-behavior-x: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }



    /* Zvogëlimi i kartës për nënkategoritë */

    .category-content #featured-categories-grid .category-card {

        flex: 0 0 76px !important;

        width: 76px !important;

        max-width: 76px !important;

        aspect-ratio: 1 / 1.05 !important;

        padding: 8px 4px !important;

        border-radius: 12px !important;

        margin: 0 !important;

        background: #1c1c1e !important;

    }



    /* Zvogëlimi i rrethit të ikonës nga 100px në 76px - Kthyer në transparente (pa rreth) */

    .category-content #featured-categories-grid .category-card .category-icon {

        width: 76px !important;

        height: 76px !important;

        margin-bottom: 8px !important;

        background: transparent !important;

        border-radius: 0 !important;

        box-shadow: none !important;

        border: none !important;

    }



    /* Rritja e logos brenda rrethit */

    .category-content #featured-categories-grid .category-card .category-icon img {

        width: 100% !important;

        height: 100% !important;

        max-width: 100% !important;

        max-height: 100% !important;

        object-fit: contain !important;

    }



    /* Zvogëlimi i fontit të titullit të nënkategorisë (Samsung, iPhone) */

    .category-content #featured-categories-grid .category-card h3 {

        font-size: 11px !important;

        font-weight: 600 !important;

        line-height: 1.2 !important;

        color: var(--text) !important;

        text-align: center !important;

    }



    /* Fshih detaje shtesë si numri i produkteve nën emër për thjeshtësi */

    .category-content #featured-categories-grid .category-card .product-count,

    .category-content #featured-categories-grid .category-card span.count {

        display: none !important;

    }

}



/* Ndalimi i Zoom-it aksidental dhe zmadhimeve gjatë fokusimit të inputeve në celular */
/* touch-action: manipulation bllokon double-tap zoom por lejon pan normale */
@media (max-width: 991px) {

    html, body {

        touch-action: manipulation !important; /* Çaktivizon zmadhimin me klikime të dyfishta (double-tap zoom) */

    }

    /* Kontejneri i kategorive duhet pan-x që swipe-i horizontal të funksionojë */
    #sidebar-categories-tree {
        touch-action: pan-x pan-y !important;
    }

    

    /* Input-et duhet të kenë font-size minimalisht 16px në celular që iOS Safari të mos bëjë auto-zoom */

    input, select, textarea {

        font-size: 16px !important;

    }

}



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

   🎠 HOMEPAGE CATEGORIES HORIZONTAL CAROUSEL (index.html)

   Ekrani kryesor - 2 kategori të plota dhe e treta që duket pak (peeking)

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

@media (max-width: 991px) {

    #featured-categories-section #featured-categories-grid {

        display: flex !important;

        flex-direction: row !important;

        flex-wrap: nowrap !important;

        overflow-x: auto !important;

        overflow-y: hidden !important;

        gap: 12px !important;

        padding: 12px 16px !important;

        -webkit-overflow-scrolling: touch !important;

        scrollbar-width: none !important;

    }



    #featured-categories-section #featured-categories-grid::-webkit-scrollbar {

        display: none !important;

    }



    #featured-categories-section #featured-categories-grid .category-card {

        flex: 0 0 42vw !important; /* Gjerësia që lejon 2 të plota + 3-ta peeking */

        width: 42vw !important;

        height: auto !important;

        aspect-ratio: 1 / 1.25 !important; /* Zgjatet karta vertikalisht që të nxërë rrethin e madh */

        box-sizing: border-box !important;

        background: #1c1c1e !important;

        border: 1px solid rgba(255, 255, 255, 0.05) !important;

        border-radius: 16px !important;

        padding: 12px 8px !important;

        margin: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

    }



    #featured-categories-section #featured-categories-grid .category-card .category-icon {

        width: 36vw !important; /* Rritur edhe 50% (responzive, 36% e ekranit) - Kthyer ne transparente (pa rreth) */

        height: 36vw !important;

        max-width: 140px !important;

        max-height: 140px !important;

        margin-bottom: 10px !important;

        background: transparent !important;

        border-radius: 0 !important;

        box-shadow: none !important;

        border: none !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

    }



    #featured-categories-section #featured-categories-grid .category-card .category-icon img {

        width: 100% !important;

        height: 100% !important;

        max-width: 100% !important;

        max-height: 100% !important;

        object-fit: contain !important;

    }



    #featured-categories-section #featured-categories-grid .category-card h3 {

        font-size: 12px !important;

        font-weight: 600 !important;

        color: var(--text) !important;

        margin: 0 !important;

        text-align: center !important;

        line-height: 1.2 !important;

    }



    /* Fshih detajet shtesë në homepage për pastërti vizuale */

    #featured-categories-section #featured-categories-grid .category-card .product-count,

    #featured-categories-section #featured-categories-grid .category-card span.count {

        display: none !important;

    }

}



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

   🧼 GLOBAL MOBILE CATEGORIES ICON CLEANUP (No circles, borders or shadows)

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

@media (max-width: 991px) {

    .category-icon,

    .category-card .category-icon,

    #featured-categories-grid .category-card .category-icon,

    #subcategories-grid-container .category-card .category-icon {

        background: transparent !important;

        border-radius: 0 !important;

        box-shadow: none !important;

        border: none !important;

        outline: none !important;

    }



    .category-icon img,

    .category-card .category-icon img,

    #featured-categories-grid .category-card .category-icon img,

    #subcategories-grid-container .category-card .category-icon img {

        width: 100% !important;

        height: 100% !important;

        max-width: 100% !important;

        max-height: 100% !important;

        object-fit: contain !important;

    }

}





















/* --- PERFORMANCE OPTIMIZATIONS FOR CAPACITOR --- */



/* Natively removes the 300ms tap delay in mobile WebViews */

a, button, input, select, textarea, [role="button"], [onclick],

.quantity-btn, .quantity-minus, .quantity-plus, .accordion-toggle, 

.thumb, .option, .lang-btn, .dot, .prev, .next, .hamburger {

    touch-action: manipulation;

}



/* GPU hardware acceleration for slideshows */

.slider-track {

    will-change: transform;

}



/* GPU hardware acceleration and transitions for category AJAX loadings */

.ajax-loading-element {

    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    will-change: opacity, transform;

}

.ajax-loading-element.loading {

    opacity: 0.35;

    transform: translateY(8px);

}



/* GPU hardware acceleration and transitions for custom Toast notifications */

.custom-toast-notification {

    position: fixed;

    top: 100px;

    left: 50%;

    transform: translateX(-50%) translateY(-20px);

    opacity: 0;

    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    z-index: 100000;

    will-change: transform, opacity;

}

.custom-toast-notification.show {

    transform: translateX(-50%) translateY(0);

    opacity: 1;

}





/* Custom Header Updates - Logo on left, search bars inline, font sizes reduced */

.header-inner {

    flex-wrap: nowrap !important;

    justify-content: flex-start !important;

}



.header-inner .logo {

    position: relative !important;

    left: 0 !important;

    transform: none !important;

    margin-right: 10px !important;

    justify-content: flex-start !important;

    order: 1 !important;

    flex: 0 0 auto !important;

}



.header-inner .logo img {

    height: 52px !important;

    max-height: 52px !important;

}



.search-bars-container {

    order: 2 !important;

    flex: 1 1 auto !important;

    width: auto !important;

    margin: 0 !important;

    display: flex !important;

    flex-direction: row !important;

    gap: 6px !important;

}



.header-actions {

    order: 3 !important;

    flex: 0 0 auto !important;

}



.search-input, 

#service-tracking-input, 

#search-input-field,

#mobile-search-input-field {

    font-size: 13px !important;

}





/* FOUC Prevention for Footer */

.footer {

    opacity: 0 !important;

    pointer-events: none !important;

    transition: opacity 0.5s ease !important;

}

.footer.loaded {

    opacity: 1 !important;

    pointer-events: auto !important;

}



/* Mobile Header - Logo centered, search bars inline on the second row below the logo */

@media (max-width: 768px) {

    .header-inner {

        flex-wrap: wrap !important;

        justify-content: space-between !important;

        align-items: center !important;

        padding: 8px 6px !important; /* Reduced horizontal padding to stretch inputs to screen edges */

        position: relative !important; /* Context for absolute centering */

    }

    

    .header-inner .logo {

        position: absolute !important;

        left: 50% !important;

        transform: translateX(-50%) !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        order: 1 !important;

        height: 44px !important;

        z-index: 10 !important;

        margin: 0 !important;

    }



    .header-inner .logo img {

        height: 44px !important;

        max-height: 44px !important;

        width: auto !important;

    }



    .search-bars-container {

        order: 3 !important;

        flex: 1 1 100% !important;

        width: 100% !important;

        margin: 52px 0 0 0 !important;

        display: flex !important;

        flex-direction: row !important;

        gap: 4px !important; /* Tighter gap between search inputs */

    }



    .header-actions {

        order: 2 !important;

        flex: 0 0 auto !important;

        margin-left: auto !important; /* Push to the right */

        z-index: 11 !important;

    }



    .search-form {

        height: 35px !important; /* Increased by 10% from 32px */

        border-radius: 8px !important;

        flex: 1 !important; /* distribute equally */

    }

    

    .search-input, 

    #service-tracking-input, 

    #search-input-field,

    #mobile-search-input-field {

        padding: 0 8px 0 26px !important; /* Adjusted padding for taller input */

        font-size: 12px !important; /* Increased font-size to 12px */

    }

    

    .search-form button[type="submit"] {

        left: 8px !important;

    }

    

    .search-form button[type="submit"] svg {

        width: 14px !important;

        height: 14px !important;

    }

}







/* Portrait Product Cards and Expanded Grid */

@media (min-width: 992px) {

    .products-grid, 

    #new-arrivals-grid, 

    #best-sellers-grid, 

    #special-offers-grid,

    #category-products-grid {

        grid-template-columns: repeat(5, 1fr) !important;

        gap: 16px !important;

    }

}



@media (min-width: 1200px) {

    .products-grid, 

    #new-arrivals-grid, 

    #best-sellers-grid, 

    #special-offers-grid,

    #category-products-grid {

        grid-template-columns: repeat(6, 1fr) !important;

        gap: 18px !important;

    }

}



/* Make product image wrapper portrait aspect-ratio (3:4) */

.product-image {

    aspect-ratio: 3/4 !important;

    height: auto !important;

    background: #f9fafb !important; /* soft background to define the image frame */

    border-radius: 14px !important;

}



/* Ensure the image contains nicely inside the frame with padding */

.product-image img {

    object-fit: contain !important;

    padding: 8px !important;

}



/* Adjust card layout to align items vertically and unset fixed mobile min-heights */

.product-card {

    min-height: unset !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: space-between !important;

}





/* Minimalist Badge Styles and Card Shadow Override */

.product-badges::after {

    display: none !important;

    content: none !important;

}



/* Light Red Premium Shadow for Product Cards */

.product-card {

    box-shadow: 0 4px 16px rgba(227, 6, 19, 0.07) !important; /* Soft branding red shadow */

    border: 1px solid rgba(227, 6, 19, 0.05) !important;

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

}



.product-card:hover {

    box-shadow: 0 8px 24px rgba(227, 6, 19, 0.14) !important;

    transform: translateY(-4px) !important;

}





/* Fix for transparent PNG product images showing white/gray background */

.product-image {

    background: transparent !important;

}





/* Hide scrollbars visually on mobile while keeping native scroll functionality */

@media (max-width: 768px) {

    ::-webkit-scrollbar {

        display: none !important;

        width: 0 !important;

        height: 0 !important;

    }

    

    * {

        -ms-overflow-style: none !important;  /* IE and Edge */

        scrollbar-width: none !important;  /* Firefox */

    }

}





/* Completely hide newsletter section in footer */

.footer-newsletter, #footer-newsletter-section {

    display: none !important;

}





/* Hide footer columns on mobile for a clean native app-like look */

@media (max-width: 768px) {

    .footer-grid {

        display: none !important;

    }

    

    .footer {

        padding: 20px 0 !important;

    }

}





/* Brands Section & Footer Theme Compatibility & Separator Lines */

.brands-section {

    background: var(--bg) !important;

    border-top: 1px solid var(--border) !important;

    border-bottom: 1px solid var(--border) !important;

}



.brands-title {

    color: var(--text) !important;

}



.brand-item {

    background: var(--card) !important;

    border: 1px solid var(--border) !important;

}



.footer {

    border-top: 1px solid var(--border) !important;

}



/* ==========================================================================
   ⚡ PERFORMANCE ACCELERATION (GPU RENDERING & SCROLLING)
   ========================================================================== */
.product-card,
.slide,
.mobile-nav-inner,
.category-card {
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

/* Enable smooth inertia scrolling on iOS devices */
.main-content,
.category-layout,
.products-grid,
.gallery-thumbs,
.mobile-menu {
    -webkit-overflow-scrolling: touch;
}


/* ==========================================================================
   💥 MOBILE UI/UX FIXES (LAYOUT SPACING & ACTIVE CATEGORY CARDS)
   ========================================================================== */

@media (max-width: 991px) {
    /* 1. Header, Search & Breadcrumb Layout Spacing Adjustments */
    body {
        padding-top: calc(165px + var(--safe-top, env(safe-area-inset-top, 0px))) !important;
    }
    
    body:has(#topbar-section:not([style*="display: none"])) {
        padding-top: calc(165px + 34px + var(--safe-top, env(safe-area-inset-top, 0px))) !important;
    }

    .main-content {
        padding-top: 12px !important;
    }

    .breadcrumb {
        padding: 12px 0 8px 0 !important;
        margin-top: 6px !important;
        margin-bottom: 8px !important;
        overflow: visible !important;
    }

    .breadcrumb-list {
        padding: 0 16px !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    #sidebar-categories-tree {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        margin-top: 16px !important;
        margin-bottom: 16px !important;
        padding: 4px 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
        touch-action: pan-x pan-y !important;
        overscroll-behavior-x: contain !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        scrollbar-width: none !important;
    }

    #sidebar-categories-tree::-webkit-scrollbar {
        display: none !important;
    }

    .filters-sidebar,
    .filter-group,
    .category-content {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    #sidebar-categories-tree .mob-cat-chip,
    #sidebar-categories-tree .mob-chip-wrapper,
    .category-content #featured-categories-grid .category-card {
        touch-action: pan-x pan-y !important;
    }

    /* 2. Premium Category Card Active State Overrides */
    #sidebar-categories-tree .mob-cat-chip.mob-cat-chip--active,
    .mob-cat-chip--active {
        background: rgba(227, 6, 19, 0.08) !important; /* Soft dark red tint */
        border-color: #ff0033 !important; /* Premium red border */
        box-shadow: 0 0 16px rgba(227, 6, 19, 0.45) !important; /* Red glow around border */
        transform: scale(1.03) translateY(-2px) !important; /* Subtle scale up */
        transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1) !important; /* Smooth transition */
    }

    #sidebar-categories-tree .mob-cat-chip.mob-cat-chip--active .mob-cat-chip__icon,
    .mob-cat-chip--active .mob-cat-chip__icon {
        background: #1f1f1f !important; /* Keep icon container dark so image is visible */
        border: 1px solid rgba(227, 6, 19, 0.3) !important;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    }

    #sidebar-categories-tree .mob-cat-chip.mob-cat-chip--active .mob-cat-chip__img,
    .mob-cat-chip--active .mob-cat-chip__img {
        filter: none !important; /* REMOVE white filter overlay */
        opacity: 1 !important; /* Keep image fully visible */
        transform: scale(1.05) !important; /* Slight zoom on active */
        transition: transform 280ms ease !important;
    }

    #sidebar-categories-tree .mob-cat-chip.mob-cat-chip--active .mob-cat-chip__text,
    .mob-cat-chip--active .mob-cat-chip__text {
        color: #ff0033 !important; /* Text matches theme red */
        font-weight: 700 !important;
    }
}


/* ==========================================================================
   ⚡ MOBILE HEADER VERTICAL COMPACTNESS & SPACING ADJUSTMENTS
   ========================================================================== */

@media (max-width: 991px) {
    /* Reduce body padding-top to match the new compact header height */
    body {
        padding-top: calc(142px + var(--safe-top, env(safe-area-inset-top, 0px))) !important;
    }
    
    body:has(#topbar-section:not([style*="display: none"])) {
        padding-top: calc(142px + 34px + var(--safe-top, env(safe-area-inset-top, 0px))) !important;
    }

    /* Make the header elements sit closer together vertically */
    .header-inner {
        padding: 8px 16px 2px 16px !important; /* Shrunk bottom padding */
        gap: 4px 12px !important; /* Shrunk vertical row gap */
    }

    .header-inner .logo {
        top: 8px !important; /* Position logo slightly higher */
    }

    .search-bars-container {
        padding: 2px 16px 8px 16px !important; /* Shrunk top padding */
    }
}


/* ==========================================================================
   🎯 HERO SLIDER PREV/NEXT BUTTONS COMPACT DESIGN & POSITIONING
   ========================================================================== */

.slider-arrows {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
    padding: 0 10px !important; /* Move containers closer to the edge */
}

.slider-arrow {
    width: 34px !important; /* Shrunk from 50px-60px to 34px */
    height: 34px !important;
    background: rgba(255, 255, 255, 0.15) !important; /* Lighter white transparency */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    border-radius: 50% !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.slider-arrow svg {
    width: 16px !important; /* Shrunk icon to 16px */
    height: 16px !important;
}

.slider-arrow:hover {
    background: #ff0033 !important; /* Red hover accent */
    border-color: #ff0033 !important;
    box-shadow: 0 0 12px rgba(255, 0, 51, 0.5) !important;
    transform: scale(1.08) !important;
}

/* Offset buttons outwards slightly on desktop only */
.slider-prev {
    transform: none !important;
}

.slider-next {
    transform: none !important;
}

.slider-prev:hover {
    transform: scale(1.08) !important;
}

.slider-next:hover {
    transform: scale(1.08) !important;
}

/* Mobile & Tablet Specific overrides (Even smaller on mobile) */
@media (max-width: 767px) {
    .slider-arrows {
        padding: 0 8px !important;
    }

    .slider-arrow {
        width: 28px !important; /* Even smaller 28px on mobile */
        height: 28px !important;
        background: rgba(255, 255, 255, 0.18) !important;
    }

    .slider-arrow svg {
        width: 12px !important; /* 12px icon size */
        height: 12px !important;
    }

    .slider-prev {
        transform: none !important; /* Pa translateX ne mobile */
    }

    .slider-next {
        transform: none !important;
    }
    
    .slider-prev:hover {
        transform: scale(1.05) !important;
    }

    .slider-next:hover {
        transform: scale(1.05) !important;
    }
}







/* ==========================================================
   MOBILE HEADER REDESIGN - FINAL
   Layout: [SQ EN] | Logo | [Cart]
   Below:  [Kerko produkte] | [Kodi i servisit]
   ========================================================== */

@media (max-width: 767px) {
  /* Grid Layout for Header Inner using Class Selector to override earlier classes */
  .header-inner {
    display: grid !important;
    grid-template-columns: 85px 1fr 85px !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 8px 6px !important;
    padding: 8px 12px !important;
    flex-wrap: unset !important;
    height: auto !important;
    min-height: unset !important;
  }

  /* Make header actions act as display: contents so its children act as direct grid items */
  .header-inner .header-actions {
    display: contents !important;
  }

  /* Logo -> Center Column - OVERRIDING absolute positioning from other rules */
  .header-inner .logo {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    flex: unset !important;
  }

  /* Logo image size adjustments for centered mobile layout */
  .header-inner .logo img {
    height: 32px !important;
    max-height: 32px !important;
    object-fit: contain !important;
    width: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Language Switcher -> Left Column */
  .header-inner #header-lang-switcher {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .header-inner #header-lang-switcher .lang-btn {
    padding: 2px 6px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    min-width: 30px !important;
    height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .header-inner #header-lang-switcher .lang-btn.active {
    background: var(--color-primary, var(--primary, #e30613)) !important;
    color: #fff !important;
    border-color: var(--color-primary, var(--primary, #e30613)) !important;
  }

  /* Hamburger removed */
  .header-inner #hamburgerBtn,
  #hamburgerBtn,
  .hamburger,
  .nav-mobile,
  #mobileNav {
    display: none !important;
  }

  /* Cart Button -> Right Column (same size as index / premium) */
  .header-inner #cart-icon-btn {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0 0 auto !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  .header-inner #cart-icon-btn svg {
    width: 22px !important;
    height: 22px !important;
    stroke: #fff !important;
    display: block !important;
  }

  /* Cart Badge styling */
  .header-inner #cart-icon-btn .cart-count {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    background: var(--color-primary, var(--primary, #e30613)) !important;
    color: #fff !important;
    border: 2px solid #121212 !important;
    border-radius: 50% !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    min-width: 16px !important;
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  /* Hide only mobile extra actions (hamburger mbetet visible) */
  .mobile-only-header-actions {
    display: none !important;
  }

  /* Search Bars Container -> Row 2, span all columns */
  .header-inner .search-bars-container {
    grid-column: 1 / span 3 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 4px 0 0 0 !important;
    box-sizing: border-box !important;
  }

  /* Each search bar wrapper takes exactly 50% / flex-grow */
  .header-inner .search-bars-container .search-wrapper {
    flex: 1 !important;
    min-width: 0 !important;
    display: block !important;
  }

  /* Search input layout optimization */
  .header-inner .search-input {
    height: 36px !important;
    font-size: 0.75rem !important;
    padding: 6px 12px 6px 38px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    color: #fff !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .header-inner .search-input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
  }

  .header-inner .search-btn {
    width: 30px !important;
    height: 30px !important;
    left: 6px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center;
  }

  .header-inner .search-btn svg {
    width: 16px !important;
    height: 16px !important;
    stroke: rgba(255, 255, 255, 0.7) !important;
  }
}

/* --- CATEGORY.HTML SLIDING FIX ON MOBILE --- */
@media (max-width: 991px) {
    /* Target ONLY the category grid inside .category-content (so it only affects category.html) */
    .category-content #featured-categories-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
        touch-action: pan-x pan-y !important;
        overscroll-behavior-x: contain !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 12px !important;
        padding: 12px 16px !important;
        margin-bottom: 20px !important;
        box-sizing: border-box !important;
        scrollbar-width: none !important;
    }

    .category-content #featured-categories-grid::-webkit-scrollbar {
        display: none !important;
    }

    /* Force the cards to stay flex and slide on mobile without wrapping */
    .category-content #featured-categories-grid .category-card {
        flex: 0 0 auto !important;
        min-width: 110px !important;
        width: 110px !important;
        max-width: 110px !important;
        height: auto !important;
        aspect-ratio: 1 / 1.05 !important;
        padding: 10px 6px !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        touch-action: pan-x pan-y !important;
    }
}

/* Remove circular and square boxes, and increase size of images by 100% on category.html */
.category-content #featured-categories-grid .category-card .category-icon,
#subcategories-grid-container .category-card .category-icon {
    width: 100% !important;
    height: 65px !important; /* Mobile height */
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    margin-top: 5px !important;
    margin-bottom: 10px !important;
    transition: all 300ms ease !important;
}

.category-content #featured-categories-grid .category-card:hover .category-icon,
#subcategories-grid-container .category-card:hover .category-icon {
    background: transparent !important;
    box-shadow: none !important;
}

.category-content #featured-categories-grid .category-card .category-icon img,
.category-content #featured-categories-grid .category-card .category-icon svg,
#subcategories-grid-container .category-card .category-icon img,
#subcategories-grid-container .category-card .category-icon svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    transition: transform 300ms ease !important;
}

.category-content #featured-categories-grid .category-card h3,
#subcategories-grid-container .category-card h3 {
    font-size: 0.75rem !important;
    margin: 0 !important;
    text-align: center !important;
    width: 100% !important;
}

@media (min-width: 992px) {
    .category-content #featured-categories-grid .category-card .category-icon,
    #subcategories-grid-container .category-card .category-icon {
        height: 140px !important; /* Much larger image height on desktop */
        margin-top: 10px !important;
        margin-bottom: 15px !important;
    }
    
    .category-content #featured-categories-grid .category-card h3,
    #subcategories-grid-container .category-card h3 {
        font-size: 0.95rem !important;
    }
}

/* Hover effect to scale the image slightly */
.category-content #featured-categories-grid .category-card:hover .category-icon img,
.category-content #featured-categories-grid .category-card:hover .category-icon svg,
#subcategories-grid-container .category-card:hover .category-icon img,
#subcategories-grid-container .category-card:hover .category-icon svg {
    transform: scale(1.08) !important;
}
/* --- END CATEGORY.HTML SLIDING FIX ON MOBILE --- */

/* ==========================================================================
   PRODUCT BADGES — Premium labels (E Re, Zbritje, Më i Shituri)
   ========================================================================== */
.product-image {
    position: relative !important;
}

.product-badges {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    right: auto !important;
    z-index: 5 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

.product-badges .badge,
.product-badges .badge-pro {
    pointer-events: none !important;
}

.badge-pro {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 10px 5px 6px !important;
    border-radius: 10px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    max-width: calc(100% - 4px) !important;
}

.badge-pro__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.2) !important;
    flex-shrink: 0 !important;
}

.badge-pro__icon svg {
    display: block !important;
}

.badge-pro__content {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1px !important;
    min-width: 0 !important;
}

.badge-pro__label {
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
}

.badge-pro__value {
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
    line-height: 1 !important;
}

/* Zbritje / Oferta */
.badge-sale.badge-pro {
    background: linear-gradient(135deg, #c40010 0%, #ff2d3d 55%, #ff6b4a 100%) !important;
    border-color: rgba(255, 120, 120, 0.45) !important;
}

/* E Re */
.badge-new.badge-pro {
    background: linear-gradient(135deg, #0284c7 0%, #2563eb 55%, #38bdf8 100%) !important;
    border-color: rgba(147, 197, 253, 0.45) !important;
}

/* Më i Shituri */
.badge-bestseller.badge-pro {
    background: linear-gradient(135deg, #b45309 0%, #f59e0b 55%, #fcd34d 100%) !important;
    border-color: rgba(253, 224, 71, 0.45) !important;
    color: #1f1300 !important;
}

.badge-bestseller.badge-pro .badge-pro__icon {
    background: rgba(0, 0, 0, 0.12) !important;
    color: #1f1300 !important;
}

.badge-bestseller.badge-pro .badge-pro__label {
    color: #1f1300 !important;
}

@media (max-width: 767px) {
    .product-badges {
        top: 6px !important;
        left: 6px !important;
        gap: 5px !important;
    }

    .badge-pro {
        padding: 4px 8px 4px 5px !important;
        border-radius: 8px !important;
        gap: 5px !important;
    }

    .badge-pro__icon {
        width: 16px !important;
        height: 16px !important;
    }

    .badge-pro__label {
        font-size: 8px !important;
    }

    .badge-pro__value {
        font-size: 10px !important;
    }
}



/* ==========================================================================
   UNIFIED PRODUCT "Shto ne Shporte" BUTTON (same as index everywhere)
   ========================================================================== */

.product-actions.quick-add-btn {
  position: static !important;
  opacity: 1 !important;
  transform: none !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 40px !important;
  background: #E30613 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 12px rgba(227, 6, 19, 0.25) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.product-actions.quick-add-btn:hover {
  background: #b3050f !important;
  transform: translateY(-2px) !important;
}

.product-actions.quick-add-btn:active {
  transform: scale(0.98) !important;
}

.product-actions.quick-add-btn svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  flex-shrink: 0 !important;
  pointer-events: none !important;
  stroke: #fff !important;
}

.product-actions.quick-add-btn .add-cart-label {
  display: inline !important;
  color: #fff !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

@media (max-width: 991px) {
  .product-footer {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .product-actions.quick-add-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}


/* ==========================================================================
   UNIFIED HEADER CART ICON (same size as index on all pages)
   ========================================================================== */

#main-header .cart-btn,
#main-header #cart-icon-btn,
.header .cart-btn,
.header #cart-icon-btn {
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

#main-header .cart-btn svg,
#main-header #cart-icon-btn svg,
.header .cart-btn svg,
.header #cart-icon-btn svg {
  width: 22px !important;
  height: 22px !important;
}

/* Desktop login / profile icon (SQ/EN → user → cart) */
#main-header .desktop-account-btn,
#main-header #desktop-account-btn,
.header .desktop-account-btn,
.header #desktop-account-btn {
  display: none;
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  background: var(--hp-surface, #1A1A1A) !important;
  border: 1px solid var(--hp-border, rgba(255,255,255,0.08)) !important;
  color: var(--hp-text, #fff) !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

#main-header .desktop-account-btn svg,
#main-header #desktop-account-btn svg,
.header .desktop-account-btn svg,
.header #desktop-account-btn svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  stroke: currentColor !important;
}

@media (min-width: 992px) {
  #main-header .desktop-account-btn,
  #main-header #desktop-account-btn,
  .header .desktop-account-btn,
  .header #desktop-account-btn {
    display: inline-flex !important;
  }

  #main-header #header-lang-switcher,
  .header #header-lang-switcher {
    display: flex !important;
    align-items: center !important;
  }

  /* Single page scrollbar on desktop */
  html {
    overflow-x: clip !important;
    overflow-y: auto !important;
    height: auto !important;
    max-height: none !important;
  }

  body {
    overflow-x: clip !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
    scrollbar-width: none !important;
  }

  body::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .main-content,
  main,
  .homepage-premium {
    overflow-x: clip !important;
    overflow-y: visible !important;
    max-height: none !important;
  }

  /* Hero / slide: pa scrollbar të brendshëm */
  #homepage-slider,
  .hero-slider,
  .hero-slider-wrap,
  .hero-premium .hero-slider-wrap {
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  #homepage-slider::-webkit-scrollbar,
  .hero-slider::-webkit-scrollbar,
  .hero-slider-wrap::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
  }
}

@media (max-width: 991px) {
  #main-header .desktop-account-btn,
  #main-header #desktop-account-btn,
  .header .desktop-account-btn,
  .header #desktop-account-btn,
  .desktop-account-btn {
    display: none !important;
  }
}