/* --- Reset & Variables --- */

:root {

    --primary-bg: #FFFFFF;

    --secondary-bg: #F9FAFB;

    --header-bg: rgba(255, 255, 255, 0.9);

    --text-main: #111827;

    --text-secondary: #6B7280;

    --text-light: #FFFFFF;

    --accent-color: #2563EB;

    --accent-hover: #1D4ED8;

    --border-color: #E5E7EB;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    --font-main: 'Inter', system-ui, -apple-system, sans-serif;

    --container-width: 1200px;

}



body {

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

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

    color: var(--text-main);

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    overflow-x: hidden;

}



*,

*::before,

*::after {

    box-sizing: inherit;

}



a {

    text-decoration: none;

    color: inherit;

    transition: color 0.2s;

}



button {

    font-family: inherit;

    cursor: pointer;

    border: none;

    background: none;

}



img {

    max-width: 100%;

    display: block;

}



/* --- Layout --- */

.container {

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

    margin: 0 auto;

    padding: 0 0.21rem;

}



section {

    padding: 4rem 0;

}



/* --- Header --- */

#main-header {

    background-color: #ffffff;

    position: sticky;

    top: 0;

    z-index: 100;

    border-bottom: 1px solid var(--border-color);

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

}



.top-bar {

    background-color: #374151;

    /* Dark grey for top bar */

    color: #e5e7eb;

    font-size: 0.75rem;

    padding: 0.5rem 0;

}



.top-bar-content {

    display: flex;

    justify-content: center;

    gap: 1.5rem;

}



.top-bar a:hover {

    color: white;

}



.header-main {

    padding: 0.8rem 0;

    background: white;

}



.header-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



/* Search */

.search-wrapper {

    position: relative;

    width: 100%;

}







.search-icon {

    position: absolute;

    right: 10px;

    top: 50%;

    transform: translateY(-50%);

    width: 18px;

    height: 18px;

    color: #9ca3af;

}



/* Logo */

.logo-box {

    border: 2px solid #8B5CF6;

    /* Purple border */

    padding: 0.25rem 1rem;

    text-transform: uppercase;

    font-weight: 800;

    font-size: 1.5rem;

    color: #8B5CF6;

    letter-spacing: 0.05em;

}



.logo-text {

    font-family: sans-serif;

}



/* Actions */

.header-actions {

    display: flex;

    gap: 1rem;

    align-items: center;

}



.icon-btn {

    color: #374151;

    display: flex;

    align-items: center;

    gap: 0.25rem;

    font-weight: 500;

}



/* Mobile Parts */

.header-mobile-left {

    display: none;

    gap: 0.5rem;

    align-items: center;

}



.mobile-search-btn {

    display: none;

}



.cart-label {

    display: none;

    /* Hidden by default, as per instruction to remove its logic */

}



@media (min-width: 768px) {

    .cart-label {

        display: block;

        font-size: 0.9rem;

    }



    .desktop-only {

        display: block;

    }



    .mobile-hidden {

        display: flex;

    }



    /* Desktop Search Styles */

    .search-wrapper {

        display: block !important;

        flex: 1;

        max-width: 240px;

        margin: 0 2rem;

    }


    /* Desktop Layout Fix: Logo first */
    .header__logo {
        order: -1;
    }


    .search-form {

        display: flex;

        gap: 0.5rem;

        align-items: center;

        background: #f3f4f6;

        padding: 0.25rem 0.25rem 0.25rem 1rem;

        border-radius: 9999px;

        border: 1px solid transparent;

        transition: all 0.2s;

    }



    .search-form:focus-within {

        background: white;

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

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

    }



    .search-input {

        flex: 1;

        border: none !important;

        box-shadow: none !important;

        background: transparent;

        outline: none;

        font-size: 0.95rem;

        color: var(--text-main);

        width: 210px;

    }



    .search-submit {

        display: flex;

        background: none;

        border: none;

        padding: 0.5rem;

        color: var(--text-secondary);

        cursor: pointer;

        border-radius: 50%;

        width: auto;

        height: auto;

    }



    .search-submit:hover {

        color: var(--accent-color);

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

    }



    .search-submit svg {

        width: 20px;

        height: 20px;

    }

}



/* Mobile Header Adaptation */

@media (max-width: 768px) {

    .top-bar {

        display: none;

    }



    .desktop-only {

        display: none !important;

    }



    .mobile-hidden {

        display: none !important;

    }



    .header-container {

        display: grid;

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

        align-items: center;

        padding: 0.5rem 1rem;

        gap: 0.5rem;

    }



    .header-mobile-left {

        display: flex;

        align-items: center;

        gap: 0.5rem;

    }



    .mobile-search-btn {

        display: flex;

    }



    .logo-box {

        /* Centered by grid */

        border: 2px solid #8B5CF6;

        padding: 0.25rem 0.5rem;

        font-size: 1rem;

        /* Smaller on mobile */

        white-space: nowrap;

        display: flex;

        justify-content: center;

    }



    .header-actions {

        justify-content: flex-end;

    }



    /* Ensure icons are sized correctly */

    .icon-btn svg {

        width: 24px;

        height: 24px;

    }



    /* Fix Purple Nav on Mobile */

    .purple-nav-section {

        display: none;

        /* User requested removal on mobile */

    }



    /* Mobile Search Wrapper (Overrides Desktop) */

    .search-wrapper {

        display: none;

        /* Hidden by default, toggled via JS */

        position: absolute;

        top: 100%;

        left: 0;

        right: 0;

        width: 100%;

        background: white;

        padding: 0.75rem 1rem;

        border-bottom: 1px solid var(--border-color);

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

        z-index: 99;

    }



    .search-form {

        display: flex;

        gap: 0.5rem;

        align-items: center;

    }



    .search-input {

        flex: 1;

        padding: 0.625rem 1rem;

        border: 1px solid #d1d5db;

        border-radius: 9999px;

        font-size: 1rem;

        outline: none;

        width: 100%;

    }



    .search-input:focus {

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

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

    }



    .search-submit {

        display: flex;

        align-items: center;

        justify-content: center;

        width: 40px;

        height: 40px;

        background: var(--accent-color);

        color: white;

        border: none;

        border-radius: 50%;

        cursor: pointer;

    }



    /* Reduce header height on mobile */

    .header-main {

        padding: 0.35rem 0 0;

    }



    .header-container {

        padding: 0.25rem 0.75rem;

    }



    .header__logo img,

    .header__logo svg {

        max-height: 50px;

    }

}



/* --- Mobile Menu Drawer --- */

.mobile-menu-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

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

    z-index: 1000;

    visibility: hidden;

    opacity: 0;

    transition: opacity 0.3s;

}



.mobile-menu-overlay.open {

    visibility: visible;

    opacity: 1;

}



.mobile-menu-content {

    position: absolute;

    top: 0;

    left: 0;

    width: 85%;

    max-width: 350px;

    height: 100%;

    background: white;

    transform: translateX(-100%);

    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    display: flex;

    flex-direction: column;

    overflow-y: auto;

}



.mobile-menu-overlay.open .mobile-menu-content {

    transform: translateX(0);

}



.mm-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1rem;

    border-bottom: 1px solid #eee;

}



.mm-title {

    font-weight: 700;

    font-size: 1.1rem;

}



.mm-body {

    padding: 1rem;

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.mm-nav,

.mm-utility,

.mm-actions,

.mm-contacts {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.mm-nav a {

    font-size: 1.05rem;

    color: #333;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.mm-utility a,

.mm-actions a {

    font-size: 1rem;

    color: #4b5563;

}



.mm-actions a {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    font-weight: 500;

}



.mm-contacts .mm-phone {

    font-size: 1.25rem;

    font-weight: 600;

    color: #333;

}



.mm-social-link {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    font-weight: 500;

}



.btn-callback {

    padding: 0.75rem;

    border: 1px solid #ddd;

    background: white;

    border-radius: 9999px;

    width: 100%;

    font-weight: 600;

    margin-top: 0.5rem;

}



.mm-hours {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    color: #4b5563;

}



.mm-divider {

    border: 0;

    border-top: 1px solid #eee;

    margin: 0.5rem 0;

}



.mm-socials-footer {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

    font-weight: 600;

    font-size: 0.9rem;

    color: #9ca3af;

}



/* Purple Nav */

.purple-nav-section {

    padding: 1.5rem 1rem 0.5rem;

    /* Reduced bottom padding */

}



.purple-nav {

    background-color: #5B50A0;

    /* Match screenshot purple roughly */

    border-radius: 9999px;

    padding: 0.75rem 2rem;

    display: flex;

    justify-content: space-between;

    overflow-x: auto;

    white-space: nowrap;

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

}



.purple-nav a {

    color: white;

    font-weight: 600;

    font-size: 0.95rem;

    text-transform: uppercase;

}



.purple-nav a:hover {

    color: #E0E7FF;

}



/* --- Hero Banners --- */

.hero-section {

    padding-top: 2rem !important;

    /* Override section padding */

}



.banners-grid {

    display: grid;

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

    gap: 0.5rem;

}



@media (min-width: 768px) {

    .banners-grid {

        gap: 1.5rem;

    }

}



.banner-item {

    border-radius: 0.5rem;

    overflow: hidden;

    cursor: pointer;

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

    transition: transform 0.2s;

    aspect-ratio: 1;

    /* Square banners based on screenshot */

}



.banner-item:hover {

    transform: translateY(-5px);

}



.banner-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

}



.banner-item:hover .banner-img {

    transform: scale(1.05);

}





/* --- Categories --- */

.section-header {

    margin-bottom: 2rem;

    text-align: center;

}



.section-header h2 {

    font-size: 2.5rem;

    font-weight: 800;

    margin-bottom: 0.5rem;

    position: relative;

    display: inline-block;

    background: linear-gradient(120deg, var(--text-main), var(--accent-color));

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

}



.section-header h2::after {

    content: '';

    display: block;

    width: 60px;

    height: 4px;

    background: var(--accent-color);

    margin: 10px auto 0;

    border-radius: 2px;

}



.categories-grid {

    display: grid;

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

    gap: 1.5rem;

}



@media (min-width: 768px) {

    .categories-grid {

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

    }

}



.category-card {

    position: relative;

    border-radius: 1rem;

    overflow: hidden;

    aspect-ratio: 1;

    cursor: pointer;

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

    transition: transform 0.3s, box-shadow 0.3s;

}



.category-card:hover {

    transform: translateY(-5px);

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

}



.category-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s;

}



.category-card:hover img {

    transform: scale(1.1);

}



.category-info {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 60%, transparent 100%);

    padding: 2rem 1.5rem;

    color: white;

    backdrop-filter: blur(2px);

    transition: padding-bottom 0.3s;

}



.category-card:hover .category-info {

    padding-bottom: 2.5rem;

}



.category-info h3 {

    margin: 0;

    font-size: 1.5rem;

    font-weight: 700;

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

    letter-spacing: 0.02em;

}



/* --- Products & Tabs --- */

.center {

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.tabs-nav {

    display: flex;

    gap: 1rem;

    margin-top: 1rem;

}



.tab-btn {

    padding: 0.75rem 2rem;

    font-weight: 600;

    font-size: 1rem;

    color: var(--text-secondary);

    border: none;

    background: #F3F4F6;

    border-radius: 9999px;

    transition: all 0.3s ease;

}



.tab-btn:hover {

    color: var(--text-main);

    background: #E5E7EB;

    transform: translateY(-1px);

}



.tab-btn.active {

    color: white;

    background: var(--accent-color);

    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3);

}



/* Mobile styles for tab buttons */

@media (max-width: 480px) {

    .tabs-nav {

        gap: 0.5rem;

    }



    .tab-btn {

        padding: 0.5rem 1rem;

        font-size: 0.85rem;

    }

}



.products-grid {

    display: grid;

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

    gap: 1rem;

    margin-top: 0;

}



@media (min-width: 640px) {

    .products-grid {

        gap: 1.25rem;

    }

}



/* --- New Product Page Layout --- */

.product-layout-wrapper {

    display: grid;

    grid-template-columns: 1fr;

    gap: 2rem;

    align-items: start;

    margin-top: 1rem;

}



@media (min-width: 1024px) {

    .product-layout-wrapper {

        grid-template-columns: 1fr 340px;

    }

}



.product-main-column {

    display: flex;

    flex-direction: column;

    gap: 2rem;

    min-width: 0;

    /* Prevent flex overflow */

}



.sticky-tabs-bar {

    position: sticky;

    top: 75px;

    /* Mobile header height */

    z-index: 90;

    grid-column: 1 / -1;

    /* Spans full width of the wrapper */

    background: white;

    border-bottom: 1px solid var(--border-color);

    padding: 1rem 0;

    display: flex;

    gap: 1.5rem;

    overflow-x: auto;

    margin-bottom: 2rem;

}



@media (min-width: 768px) {

    .sticky-tabs-bar {

        top: 110px;

        /* Desktop header height (Top bar + Main) */

    }

}



.product-overview-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 2rem;

    margin-bottom: 2rem;

}



@media (min-width: 768px) {

    .product-overview-grid {

        grid-template-columns: 0.8fr 1.2fr;

        /* Gallery smaller than info */

    }

}



.sticky-tab-btn {

    background: none;

    border: none;

    font-size: 1rem;

    font-weight: 500;

    color: var(--text-secondary);

    cursor: pointer;

    padding-bottom: 0.5rem;

    border-bottom: 2px solid transparent;

    white-space: nowrap;

}



.sticky-tab-btn.active {

    color: var(--text-main);

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

}



.product-sidebar {

    position: sticky;

    top: 5rem;

    /* Offset for header + tabs */

}



@media (min-width: 1024px) {

    .products-grid {

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

        gap: 0.5rem;

    }

}



/* --- Product Card Layout Fixed --- */

.product-card {

    background: white;

    border-radius: 1rem;

    border: 1px solid var(--border-color);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

    display: flex;

    flex-direction: column;

    height: 100%;

}



.product-card:hover {

    border-color: rgba(37, 99, 235, 0.3);

    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    transform: translateY(-5px);

}



.product-image-wrapper {

    position: relative;

    aspect-ratio: 1 !important;

    background: white;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border-radius: 1rem;

}



.product-image-wrapper img {

    width: 100%;

    height: 100%;

    object-fit: contain !important;

    mix-blend-mode: normal !important;

    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);

}



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

    transform: scale(1.08);

    /* Restore zoom effect */

}



/* Badges */

/* Badges */

/* Badges */

.product-badges {

    position: absolute;

    top: 1rem;

    left: 1rem;

    display: flex;

    flex-direction: row !important;

    /* Force row layout */

    align-items: center;

    gap: 0.5rem;

    z-index: 10;

}



.badge {

    position: static;

    display: flex;

    align-items: center;

    justify-content: center;

    height: 1.5rem;

    /* Fixed height for uniformity */

    min-width: 2.5rem;

    /* Minimum width */

    padding: 0 0.5rem;

    border-radius: 4px;

    font-size: 0.75rem;

    font-weight: 700;

    text-transform: uppercase;

    color: white;

    line-height: 1;

    white-space: nowrap;

}



.badge.discount-badge {

    background: #EF4444;

}



.badge.top-badge {

    background: #10B981;

}





.product-info {

    padding: 1.25rem;

    display: flex;

    flex-direction: column;

    flex-grow: 1;

}



@media (min-width: 1024px) {

    .product-info {

        padding: 0.8rem;

    }

}



.product-category {

    font-size: 0.875rem;

    color: var(--text-secondary);

    margin-bottom: 0.25rem;

}



.product-title {

    margin: 0 0 0.75rem 0;

    font-size: 0.95rem;

    font-weight: 600;

    line-height: 1.4;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

    height: 2.66em;

    /* 0.95rem * 1.4 * 2 lines */

}



@media (min-width: 1024px) {

    .product-title {

        font-size: 13px;

        height: 4.2em;

        /* 1rem * 1.4 * 2 lines */

    }

}



/* Wrapper for bottom elements */

.product-bottom-details {

    margin-top: auto;

    display: flex;

    flex-direction: column;

    gap: 0.625rem;

}



.product-price {

    font-size: 1.125rem;

    font-weight: 700;

    color: var(--text-main);

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 0.25rem;

    margin: 0;

    line-height: 1.2;

}



@media (min-width: 1024px) {

    .product-price {

        font-size: 1.25rem;

    }

}



.product-price .current-price {

    font-size: inherit;

    font-weight: inherit;

    color: inherit;

}



.old-price {

    text-decoration: line-through;

    color: var(--text-secondary);

    font-size: 0.875rem;

    font-weight: 400;

    line-height: 1.2;

}



.availability-status {

    font-size: 0.813rem;

    font-weight: 500;

    line-height: 1.2;

}



.availability-status.in-stock {

    color: #10B981;

}



.availability-status.out-of-stock {

    color: #EF4444;

}



.btn-add-cart {

    width: 100%;

    padding: 0.625rem 0.75rem;

    background: var(--text-main);

    color: white;

    border: none;

    border-radius: 0.5rem;

    font-weight: 600;

    font-size: 0.875rem;

    transition: all 0.3s;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

    cursor: pointer;

    line-height: 1.2;

    margin-top: 0;

}



@media (min-width: 1024px) {

    .btn-add-cart {

        font-size: 0.95rem;

    }

}



.btn-add-cart:hover {

    background: var(--accent-color);

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

    transform: translateY(-1px);

}



.btn-add-cart.added {

    background-color: #10B981;

}



/* --- Footer --- */

#main-footer {

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

    padding: 4rem 1rem 1rem;

    margin-top: 4rem;

    border-top: 1px solid var(--border-color);

}



.footer-content {

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

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr;

    gap: 2rem;

}



@media (min-width: 768px) {

    .footer-content {

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

    }

}



.footer-col h3,

.footer-col h4 {

    margin-top: 0;

    margin-bottom: 1rem;

}



.footer-col a {

    display: block;

    margin-bottom: 0.5rem;

    color: var(--text-secondary);

}



.footer-col a:hover {

    color: var(--text-main);

}



.newsletter-form {

    display: flex;

    gap: 0.5rem;

}



.newsletter-form input {

    padding: 0.5rem;

    border: 1px solid var(--border-color);

    border-radius: 0.25rem;

    flex: 1;

}



.newsletter-form button {

    padding: 0.5rem 1rem;

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

    color: white;

    border-radius: 0.25rem;

    font-weight: 600;

}



.footer-bottom {

    text-align: center;

    margin-top: 3rem;

    padding-top: 1rem;

    border-top: 1px solid var(--border-color);

    color: var(--text-secondary);

    font-size: 0.875rem;

}



/* Animations */

@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(20px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* --- New Pages Styles / Prom Style --- */



.page-container {

    padding-top: 2rem;

    padding-bottom: 4rem;

    min-height: 60vh;

}



.product-page-container {

    padding-bottom: 4rem;

    min-height: 60vh;

}



.breadcrumbs {

    color: var(--text-secondary);

    margin-bottom: 1.5rem;

    font-size: 0.813rem;

    line-height: 1.6;

}



.breadcrumbs a {

    color: var(--text-secondary);

    text-decoration: none;

    transition: color 0.2s ease;

}



.breadcrumbs a:hover {

    color: var(--accent-color);

}



@media (max-width: 640px) {

    .breadcrumbs {

        font-size: 0.75rem;

        margin-bottom: 1rem;

    }

}



/* Prom Layout */

.product-layout {

    display: grid;

    grid-template-columns: 1fr;

    gap: 2rem;

    margin-bottom: 3rem;

}



@media (min-width: 1024px) {

    .product-layout {

        grid-template-columns: 400px 1fr 300px;

        /* 3 Columns */

    }

}



/* 1. Gallery */

.product-gallery {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.main-image {

    position: relative;

    border-radius: 8px;

    overflow: hidden;

    background: white;

    border: 1px solid var(--border-color);

}



.main-image img {

    width: 100%;

    height: auto;

    object-fit: contain;

}



.thumbs {

    display: flex;

    gap: 0.5rem;

}



.thumb {

    width: 60px;

    height: 60px;

    border: 1px solid var(--border-color);

    border-radius: 4px;

    cursor: pointer;

    padding: 2px;

}



.thumb.active {

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

}



.thumb img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}



/* 2. Main Info */

.product-main-info {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.product-h1 {

    font-size: 1.5rem;

    font-weight: 400;

    margin: 0;

    line-height: 1.3;

}



.product-meta-row {

    display: flex;

    align-items: center;

    gap: 1.5rem;

    font-size: 0.9rem;

    color: var(--text-secondary);

}



.rating-block {

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.stars {

    color: #F59E0B;

    letter-spacing: 2px;

}



.reviews-count {

    text-decoration: underline;

    cursor: pointer;

}



.availability {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    color: #10B981;

    font-weight: 500;

    font-size: 0.9rem;

}



.check-icon {

    font-weight: bold;

}



.short-specs h3 {

    font-size: 1rem;

    margin-bottom: 0.5rem;

}



.specs-preview,

.specs-full {

    list-style: none;

    padding: 0;

}



.specs-preview li,

.specs-full li {

    display: flex;

    justify-content: space-between;

    margin-bottom: 0.5rem;

    font-size: 0.9rem;

}



.spec-label {

    color: var(--text-secondary);

    background: #fff;

    padding-right: 5px;

    z-index: 1;

}



.spec-dots {

    flex: 1;

    border-bottom: 1px dotted #ccc;

    margin: 0 5px;

    transform: translateY(-5px);

}



.spec-value {

    background: #fff;

    padding-left: 5px;

    z-index: 1;

    color: var(--text-main);

}



.seller-info {

    display: flex;

    gap: 1rem;

    padding: 1rem;

    border: 1px solid var(--border-color);

    border-radius: 8px;

    margin-top: 1rem;

    align-items: center;

}



.seller-logo {

    width: 60px;

    height: 60px;

    border-radius: 50%;

}



/* 3. Buy Box */

.product-buy-box {

    border: 1px solid var(--border-color);

    border-radius: 8px;

    padding: 1.5rem;

    background: white;

    height: fit-content;

    position: sticky;

    top: 180px;

    /* Increased to clear sticky tabs (110px + ~70px) */

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

}



@media (max-width: 1023px) {

    .product-sidebar {

        position: static;

        top: auto;

        margin-top: 1rem;

    }



    .product-buy-box {

        position: static;

        top: auto;

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

        margin-top: 0.5rem;

    }

}



.price-block {

    margin-bottom: 1.5rem;

}



.old-price-lg {

    text-decoration: line-through;

    color: var(--text-secondary);

    font-size: 1rem;

}



.current-price-lg {

    font-size: 2rem;

    font-weight: 700;

    color: var(--text-main);

}



.price-status {

    color: #10B981;

    font-size: 0.8rem;

    margin-top: 0.25rem;

}



.btn-buy {

    width: 100%;

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

    color: white;

    padding: 0.75rem;

    border-radius: 4px;

    font-weight: 600;

    font-size: 1.1rem;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

    transition: background 0.2s;

    margin-bottom: 0.5rem;

}



.btn-buy svg {

    width: 24px;

    height: 24px;

}



.btn-buy:hover {

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

}



.btn-quick-order {

    width: 100%;

    background: white;

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

    color: var(--accent-color);

    padding: 0.75rem;

    border-radius: 4px;

    font-weight: 600;

    margin-bottom: 1.5rem;

    transition: all 0.2s;

}



.btn-quick-order:hover {

    background: var(--secondary-bg);

}



.delivery-info h4 {

    margin: 0 0 0.5rem;

    font-size: 0.95rem;

}



.delivery-info ul {

    list-style: none;

    padding: 0;

}



.delivery-info li {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    margin-bottom: 0.5rem;

    font-size: 0.9rem;

    color: var(--text-main);

}



.payment-info {

    margin-top: 1rem;

    padding-top: 1rem;

    border-top: 1px solid var(--border-color);

}



.payment-info h4 {

    margin: 0 0 0.5rem;

    font-size: 0.95rem;

}



.payment-info ul {

    list-style: none;

    padding: 0;

}



.payment-info li {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    margin-bottom: 0.5rem;

    font-size: 0.9rem;

    color: var(--text-main);

}



/* Tabs Section */

.product-tabs-section {

    margin-top: 3rem;

}



.tabs-header {

    border-bottom: 1px solid var(--border-color);

    display: flex;

    gap: 2rem;

    margin-bottom: 2rem;

}



.pt-tab {

    padding: 1rem 0;

    font-size: 1.1rem;

    color: var(--text-secondary);

    border-bottom: 3px solid transparent;

    cursor: pointer;

}



.pt-tab.active {

    color: var(--text-main);

    border-bottom-color: var(--accent-color);

    font-weight: 600;

}



.tab-content {

    display: none;

}



.tab-content.active {

    display: block;

    animation: fadeInUp 0.3s;

}



.full-desc {

    line-height: 1.8;

    color: var(--text-main);

}



.review-item {

    border-bottom: 1px solid var(--border-color);

    padding: 1rem 0;

}



.content-section {

    background: #ffffff;

    border-radius: 8px;

    border: 1px solid var(--border-color);

    padding: 1.5rem;

    margin-bottom: 1.5rem;

}



.content-section h2 {

    margin-top: 0;

    margin-bottom: 1rem;

    font-size: 1.25rem;

}





/* Stock Status on Product Card */

.availability-status {

    font-size: 0.85rem;

    font-weight: 600;

    margin-bottom: 1rem;

    display: flex;

    align-items: center;

    gap: 0.25rem;

}



.availability-status.in-stock {

    color: #10B981;

}



.availability-status.out-of-stock {

    color: #EF4444;

}



/* Fix Mobile Menu Icons */

.mobile-menu-content svg {

    width: 24px;

    height: 24px;

    flex-shrink: 0;

}



.mobile-menu-content .size-4 {

    width: 16px;

    height: 16px;

}



.mobile-menu-content .size-6 {

    width: 24px;

    height: 24px;

}



/* Ensure global icons are sized if utility is missing */

.size-6 {

    width: 24px;

    height: 24px;

}



.size-4 {

    width: 16px;

    height: 16px;

}



/* --- Category Page Filters & Layout --- */



.category-title {

    margin: 1rem 0 1.5rem 0;

    font-size: 2rem;

    font-weight: 700;

    line-height: 1.2;

}



@media (max-width: 640px) {

    .category-title {

        font-size: 1.5rem;

        margin: 0.75rem 0 1.25rem 0;

    }

}



.category-layout {

    display: flex;

    flex-direction: column;

    gap: 2rem;

}



/* Sidebar */

.category-sidebar {

    background: white;

    padding: 1.5rem;

    height: fit-content;



    /* Mobile Drawer Styles */

    position: fixed;

    bottom: 0;

    left: 0;

    width: 100%;

    z-index: 1000;

    border-top-left-radius: 1rem;

    border-top-right-radius: 1rem;

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

    transform: translateY(100%);

    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    max-height: 85vh;

    overflow-y: auto;

}



.category-sidebar.open {

    transform: translateY(0);

}



.sidebar-header-mobile {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 1.5rem;

    padding-bottom: 1rem;

    border-bottom: 1px solid var(--border-color);

}



.sidebar-header-mobile h3 {

    font-size: 1.25rem;

    margin: 0;

}



/* Backdrop */

.filter-backdrop {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

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

    z-index: 999;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.3s;

}



.filter-backdrop.open {

    opacity: 1;

    pointer-events: auto;

}



.filter-group {

    margin-bottom: 1.5rem;

    padding-bottom: 1.5rem;

    border-bottom: 1px solid var(--border-color);

}



.filter-group:last-of-type {

    border-bottom: none;

}



.filter-group h3 {

    font-size: 1rem;

    margin: 0 0 1rem;

}



.price-inputs {

    display: flex;

    gap: 0.5rem;

}



.price-inputs input {

    width: 100%;

    padding: 0.5rem;

    border: 1px solid var(--border-color);

    border-radius: 4px;

    font-size: 0.9rem;

}



.checkbox-label {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    cursor: pointer;

    font-size: 0.95rem;

}



.checkbox-label input {

    width: 16px;

    height: 16px;

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

}



.full-width {

    width: 100%;

}



.btn-primary {

    background: var(--accent-color);

    color: white;

    padding: 0.75rem;

    border-radius: 4px;

    font-weight: 600;

}



.btn-primary:hover {

    background: var(--accent-hover);

}



.btn-secondary {

    background: white;

    border: 1px solid var(--border-color);

    color: var(--text-main);

    padding: 0.75rem;

    border-radius: 4px;

}



.btn-secondary:hover {

    background: var(--secondary-bg);

}



.mt-2 {

    margin-top: 0.5rem;

}



/* Main Content Controls */

.category-main {

    flex: 1;

}



.category-controls {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 1rem;

    margin-bottom: 1.5rem;

    padding-bottom: 1rem;

    border-bottom: 1px solid var(--border-color);

}



.btn-filter-mobile {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    background: white;

    border: 1px solid var(--border-color);

    padding: 0.625rem 1rem;

    border-radius: 8px;

    font-weight: 500;

    color: var(--text-main);

    flex: 1;

    justify-content: center;

    cursor: pointer;

    transition: all 0.2s ease;

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

}



.btn-filter-mobile:hover {

    background: #f9fafb;

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

}



.btn-filter-mobile svg {

    width: 20px;

    height: 20px;

}



.sort-select {

    padding: 0.625rem 2.5rem 0.625rem 0.875rem;

    border: 1px solid var(--border-color);

    border-radius: 8px;

    font-size: 0.875rem;

    min-width: 0;

    flex: 1;

    background: white;

    color: var(--text-main);

    cursor: pointer;

    transition: all 0.2s ease;

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

    appearance: none;

    background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="%23666"%3e%3cpath stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"%3e%3c/path%3e%3c/svg%3e');

    background-repeat: no-repeat;

    background-position: right 0.75rem center;

    background-size: 16px 16px;

}



.sort-select:hover {

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

}



.sort-select:focus {

    outline: none;

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

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

}



.desktop-only-inline {

    display: none;

}



/* Desktop Layout */

@media (min-width: 1024px) {

    .category-layout {

        display: grid;

        grid-template-columns: 280px 1fr;

        gap: 3rem;

    }



    .category-sidebar {

        /* Reset Mobile Styles */

        position: sticky;

        top: 130px;

        transform: none;

        width: auto;

        border-radius: 8px;

        box-shadow: none;

        border: 1px solid var(--border-color);

        z-index: 10;

        bottom: auto;

        left: auto;

    }



    .sidebar-header-mobile {

        display: none;

    }



    .btn-filter-mobile {

        display: none;

    }



    .desktop-only-inline {

        display: inline;

    }



    .sort-select {

        flex: 0 0 200px;

    }



    .filter-backdrop {

        display: none;

    }

}



.all-specs-link {

    margin-top: 0;

    color: var(--accent-color);

    cursor: pointer;

    font-size: 0.9rem;

    display: inline-block;

    transition: color 0.2s;

}



.all-specs-link:hover {

    color: var(--accent-hover);

    text-decoration: underline;

}



/* 

 ================================================

   NEW PROM-STYLE PRODUCT PAGE 

 ================================================

*/



.product-layout-prom {

    display: grid;

    grid-template-columns: 1fr;

    gap: 2rem;

    margin-top: 1.5rem;

}



@media (min-width: 1024px) {

    .product-layout-prom {

        grid-template-columns: 1fr 360px;

    }

}



/* Mobile: Sidebar appears after header, before tabs */

@media (max-width: 1023px) {

    .product-layout-prom {

        display: flex;

        flex-direction: column;

    }



    /* Remove wrapper to make children direct flex items */

    .product-main-area {

        display: contents !important;

    }



    /* Order: 1. Header, 2. Sidebar, 3. Tabs, 4. Tab contents */

    .product-header-grid {

        order: 1;

    }



    /* Sidebar appears immediately after header */

    .product-sidebar-prom {

        order: 2;

    }



    .product-tabs-nav {

        order: 3;

    }



    /* All tab contents appear after tabs */

    .product-tab-content {

        order: 4;

    }

}



/* Main Content Area */

.product-main-area {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



/* Product Header Grid (Gallery + Title Info) */

.product-header-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

@media (max-width: 767px) {
    .product-header-grid {
        padding: 1rem;
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .product-header-grid {
        padding: 0.75rem;
        gap: 1.25rem;
    }
}



@media (min-width: 768px) {

    .product-header-grid {

        grid-template-columns: 0.9fr 1.1fr;

    }

}



/* Gallery with Vertical Thumbnails */

.product-gallery-prom {

    display: flex;

    gap: 1rem;

}



.gallery-thumbs-vertical {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

    order: 1;

}



.gallery-main-image {

    position: relative;

    flex: 1;

    background: #f9fafb;

    border-radius: 8px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 300px;

    order: 2;

}



/* NEW: Vertical Gallery (Main photo on top, thumbnails below) */

.product-gallery-vertical {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}



.gallery-main-image-large {

    position: relative;

    background: #f9fafb;

    border-radius: 8px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    aspect-ratio: 1 / 1;

    width: 100%;

    user-select: none;

    touch-action: pan-y;

}



.gallery-main-image-large img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    pointer-events: none;

}



.gallery-thumbs-horizontal {

    display: flex;

    gap: 0.75rem;

    overflow-x: auto;

    padding: 0.25rem 0;

    margin-top: 1rem;

    /* Add scrollbar styling for better UX */

    scrollbar-width: thin;

    scrollbar-color: var(--accent-color) #f3f4f6;

}



.gallery-thumbs-horizontal::-webkit-scrollbar {

    height: 6px;

}



.gallery-thumbs-horizontal::-webkit-scrollbar-track {

    background: #f3f4f6;

    border-radius: 3px;

}



.gallery-thumbs-horizontal::-webkit-scrollbar-thumb {

    background: var(--accent-color);

    border-radius: 3px;

}



.thumb-horizontal {

    width: 80px;

    height: 80px;

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

    border-radius: 6px;

    cursor: pointer;

    overflow: hidden;

    transition: all 0.2s;

    flex-shrink: 0;

}



.thumb-horizontal:hover {

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

}



.thumb-horizontal.active {

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

    box-shadow: 0 0 0 1px var(--accent-color);

}



.thumb-horizontal img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



@media (max-width: 767px) {

    .product-gallery-prom {

        flex-direction: column-reverse;

    }



    .gallery-thumbs-vertical {

        flex-direction: row;

        overflow-x: auto;

    }



    .gallery-main-image {

        min-height: 250px;

    }

}



.gallery-main-image img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    max-height: 400px;

}



.thumb-vertical {

    width: 80px;

    height: 80px;

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

    border-radius: 6px;

    cursor: pointer;

    overflow: hidden;

    transition: all 0.2s;

    flex-shrink: 0;

}



.thumb-vertical:hover {

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

}



.thumb-vertical.active {

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

    box-shadow: 0 0 0 1px var(--accent-color);

}



.thumb-vertical img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}







/* Gallery Navigation Arrows */

.gallery-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 44px;

    height: 44px;

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

    border: 2px solid rgba(0, 0, 0, 0.1);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.3s;

    z-index: 10;

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

}



.gallery-arrow:hover {

    background: white;

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

    transform: translateY(-50%) scale(1.1);

}



.gallery-arrow svg {

    width: 24px;

    height: 24px;

    stroke: var(--text-main);

}



.gallery-arrow-left {

    left: 1rem;

}



.gallery-arrow-right {

    right: 1rem;

}



@media (max-width: 767px) {

    .gallery-arrow {

        width: 36px;

        height: 36px;

    }



    .gallery-arrow svg {

        width: 20px;

        height: 20px;

    }



    .gallery-arrow-left {

        left: 0.5rem;

    }



    .gallery-arrow-right {

        right: 0.5rem;

    }

}



/* Product Title Area */

.product-title-area {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0; /* Allow flex children to shrink */
}



.product-actions-row {

    display: flex;

    gap: 0.5rem;

    justify-content: flex-end;

}



.action-icon-btn {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid var(--border-color);

    border-radius: 50%;

    background: white;

    cursor: pointer;

    transition: all 0.2s;

}



.action-icon-btn svg {

    width: 20px;

    height: 20px;

    stroke: var(--text-secondary);

}



.action-icon-btn:hover {

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

    background: var(--secondary-bg);

}



.action-icon-btn:hover svg {

    stroke: var(--accent-color);

}



.product-title-h1 {

    font-size: 1.5rem;

    font-weight: 500;

    margin: 0;

    line-height: 1.3;

    color: var(--text-main);

}



@media (min-width: 768px) {

    .product-title-h1 {

        font-size: 1.75rem;

    }

}



.product-meta-info {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 1.5rem;

    font-size: 0.9rem;

    color: var(--text-secondary);

}



.rating-stars {

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.stars-display {

    color: #F59E0B;

    letter-spacing: 2px;

    font-size: 1rem;

    display: flex;

    gap: 2px;

}



.stars-display.stars-clickable {

    cursor: pointer;

}



.stars-display .star {

    transition: transform 0.2s, color 0.2s;

    display: inline-block;

}



.stars-display.stars-clickable .star:hover {

    transform: scale(1.2);

    color: #FBBF24;

}



.reviews-link {

    color: var(--accent-color);

    text-decoration: underline;

    cursor: pointer;

    transition: color 0.2s;

}



.reviews-link:hover {

    color: #1e40af;

}



.product-code {

    color: var(--text-secondary);

    font-size: 0.9rem;

}



.availability-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.95rem;
}

@media (max-width: 480px) {
    .availability-indicator {
        font-size: 0.85rem;
        padding: 0.4rem 0.75rem;
    }
}



.availability-indicator.in-stock {

    color: #059669;

    background: #D1FAE5;

}



.check-svg {

    width: 20px;

    height: 20px;

}



/* Short Specs List Below Availability */

.short-specs-list {

    padding: 1rem;

    background: var(--secondary-bg);

    border-radius: 8px;

    border: 1px solid var(--border-color);

}



.short-specs-list h4 {

    margin: 0 0 0.75rem;

    font-size: 0.95rem;

    font-weight: 600;

    color: var(--text-main);

}



.specs-compact {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 0.25rem;

}



.specs-compact li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Changed from center to handle wrapped text better */
    font-size: 0.875rem;
    padding: 4px 0;
    margin: 0;
    gap: 10px;
    min-width: 0;
}



.spec-key {

    color: var(--text-secondary);

    font-weight: 300;

}



.spec-value-short {
    color: var(--text-main);
    font-weight: 600;
    text-align: right;
    word-break: break-word; /* Ensure long values wrap */
    min-width: 0;
}



.view-all-specs-link {

    display: inline-block;

    margin-top: 0.75rem;

    color: var(--accent-color);

    font-weight: 600;

    font-size: 0.9rem;

    cursor: pointer;

    background: none;

    border: none;

    padding: 0;

    text-decoration: none;

    transition: color 0.2s;

}



.view-all-specs-link:hover {

    color: #1e40af;

    text-decoration: underline;

}



/* Out of Stock Styles */

.availability-indicator.out-of-stock {

    color: #dc2626;

    background: #fee2e2;

}



/* Tabs Navigation */

.product-tabs-nav {

    display: flex;

    gap: 0;

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

    overflow-x: auto;

    background: white;

    position: sticky;

    top: 75px;

    z-index: 50;

    padding: 0 1rem;

}



@media (min-width: 768px) {

    .product-tabs-nav {

        top: 80px;

    }

}



.product-tab-btn {

    padding: 1rem 1.5rem;

    background: none;

    border: none;

    border-bottom: 3px solid transparent;

    font-size: 1rem;

    font-weight: 500;

    color: var(--text-secondary);

    cursor: pointer;

    white-space: nowrap;

    transition: all 0.2s;

}



.product-tab-btn:hover {

    color: var(--text-main);

}



.product-tab-btn.active {

    color: var(--accent-color);

    border-bottom-color: var(--accent-color);

}



/* Tab Content */

.product-tab-content {

    display: none;

    background: white;

    padding: 2rem;

    border-radius: 8px;

    border: 1px solid var(--border-color);

}



.product-tab-content.active {

    display: block;

    animation: fadeIn 0.3s;

}



@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(10px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.product-tab-content h2 {

    margin-top: 0;

    margin-bottom: 1.5rem;

    font-size: 1.5rem;

    font-weight: 600;

}



.product-tab-content p {

    line-height: 1.7;

    color: var(--text-main);

}



/* Specs Table */

.specs-table {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

}



.spec-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    padding: 0.75rem;

    background: var(--secondary-bg);

    border-radius: 6px;

    gap: 1rem;

}



.spec-name {

    color: var(--text-secondary);

    font-weight: 500;

}



.spec-val {

    color: var(--text-main);

    font-weight: 600;

    text-align: right;

}



/* Review Cards */

.review-card {

    padding: 1.5rem;

    border: 1px solid var(--border-color);

    border-radius: 8px;

    margin-bottom: 1rem;

}



.review-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 1rem;

}



.review-card p {

    margin: 0;

    color: var(--text-main);

    line-height: 1.6;

}



/* Right Sidebar - Buy Box */

.product-sidebar-prom {

    position: sticky;

    top: 90px;

    height: fit-content;

}



@media (max-width: 1023px) {

    .product-sidebar-prom {

        position: static;

        top: auto;

    }

}



.buy-box-sticky {

    background: white;

    border: 1px solid var(--border-color);

    border-radius: 8px;

    padding: 1.5rem;

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

}



/* Price Section */

.price-section {

    margin-bottom: 1.5rem;

    padding-bottom: 0;

    border-bottom: none;

    position: relative;

}



/* Discount Badge Large */

.discount-badge-large {

    position: absolute;

    top: -10px;

    right: -10px;

    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);

    color: white;

    font-size: 1.5rem;

    font-weight: 700;

    padding: 0.75rem 1rem;

    border-radius: 50%;

    width: 70px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);

    animation: pulse-discount 2s infinite;

}



@keyframes pulse-discount {



    0%,

    100% {

        transform: scale(1);

    }



    50% {

        transform: scale(1.05);

    }

}



/* Price Block */

.price-block {

    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);

    padding: 1.25rem;

    border-radius: 8px;

    margin-bottom: 1rem;

    border: 2px solid #e2e8f0;

}



.price-label {

    font-size: 0.85rem;

    color: var(--text-secondary);

    margin-bottom: 0.25rem;

    font-weight: 500;

}



.price-label-main {

    font-size: 0.9rem;

    color: var(--accent-color);

    margin-top: 0.75rem;

    margin-bottom: 0.25rem;

    font-weight: 600;

}



.price-old {

    text-decoration: line-through;

    color: var(--text-secondary);

    font-size: 1.1rem;

    margin-bottom: 0.5rem;

}



.price-current {

    font-size: 2.25rem;

    font-weight: 700;

    color: var(--accent-color);

    background: linear-gradient(135deg, var(--accent-color) 0%, #1d4ed8 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.price-current-single {

    font-size: 2.25rem;

    font-weight: 700;

    color: var(--text-main);

    margin-bottom: 1rem;

}



/* Savings Banner */

.savings-banner {

    background: linear-gradient(135deg, #10b981 0%, #059669 100%);

    color: white;

    padding: 1rem 1.25rem;

    border-radius: 8px;

    display: flex;

    align-items: center;

    gap: 1rem;

    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);

    animation: shine 3s infinite;

    margin-bottom: 1.5rem;

}



@keyframes shine {



    0%,

    100% {

        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);

    }



    50% {

        box-shadow: 0 6px 16px rgba(16, 185, 129, 0.5);

    }

}



.savings-banner svg {

    width: 32px;

    height: 32px;

    flex-shrink: 0;

    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));

}



.savings-text {

    display: flex;

    flex-direction: column;

    gap: 0.25rem;

}



.savings-text strong {

    font-size: 1.1rem;

    font-weight: 700;

}



.savings-text span {

    font-size: 0.875rem;

    opacity: 0.9;

}



/* Buy Buttons */

.btn-buy-primary {

    width: 100%;

    background: var(--accent-color);

    color: white;

    padding: 1rem;

    border-radius: 8px;

    font-weight: 600;

    font-size: 1rem;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

    border: none;

    cursor: pointer;

    transition: all 0.2s;

    margin-bottom: 0.75rem;

}



.btn-buy-primary svg {

    width: 22px;

    height: 22px;

}



.btn-buy-primary:hover {

    background: var(--accent-hover);

    transform: translateY(-2px);

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

}



.btn-buy-primary.disabled,

.btn-buy-primary:disabled {

    background: #9ca3af;

    cursor: not-allowed;

    opacity: 0.6;

}



.btn-buy-primary.disabled:hover,

.btn-buy-primary:disabled:hover {

    transform: none;

    box-shadow: none;

    background: #9ca3af;

}



.btn-buy-secondary {

    width: 100%;

    background: white;

    color: var(--accent-color);

    padding: 0.9rem;

    border-radius: 8px;

    font-weight: 600;

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

    cursor: pointer;

    transition: all 0.2s;

    margin-bottom: 1.5rem;

}



.btn-buy-secondary:hover {

    background: #f0f2f5;

}



.btn-buy-secondary.disabled,

.btn-buy-secondary:disabled {

    background: #f3f4f6;

    color: #9ca3af;

    cursor: not-allowed;

}



.btn-buy-secondary.disabled:hover,

.btn-buy-secondary:disabled:hover {

    background: #f3f4f6;

}



/* Info Sections */

.info-section {

    margin-top: 1.5rem;

}



.info-section h4 {

    margin: 0 0 1rem;

    font-size: 1rem;

    font-weight: 600;

    color: var(--text-main);

}



.info-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.info-list li {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    padding: 0.6rem 0;

    color: var(--text-main);

    font-size: 0.9rem;

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

}



.info-list li:last-child {

    border-bottom: none;

}



.info-list li svg {

    width: 20px;

    height: 20px;

    color: var(--text-secondary);

    flex-shrink: 0;

}



/* Similar Products Section */

.similar-products-section {

    margin-top: 3rem;

}



.section-title {

    font-size: 1.75rem;

    font-weight: 700;

    margin-bottom: 1.5rem;

}



/* Mobile Optimizations */

@media (max-width: 767px) {

    .product-header-grid {

        padding: 1rem;

    }



    .product-title-h1 {

        font-size: 1.25rem;

    }



    .product-meta-info {

        flex-direction: column;

        align-items: flex-start;

        gap: 0.75rem;

    }



    .product-tabs-nav {

        padding: 0 0.5rem;

    }



    .product-tab-btn {

        padding: 0.75rem 1rem;

        font-size: 0.9rem;

    }



    .product-tab-content {

        padding: 1rem;

    }



    .price-current {

        font-size: 1.75rem;

    }



    .buy-box-sticky {

        padding: 1rem;

    }



    .spec-row {

        grid-template-columns: 1fr;

        gap: 0.5rem;

    }



    .spec-val {

        text-align: left;

    }

}



/* Cart count badge */

.cart-count {

    position: absolute;

    top: -8px;

    right: -8px;

    background: #EF4444;

    color: white;

    border-radius: 50%;

    width: 20px;

    height: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.75rem;

    font-weight: 600;

}



.cart-btn {

    position: relative;

}



/* Prom Banners Section */

.prom-banners-section {

    margin-bottom: 25px;

    margin-top: 15px;

}



.prom-banners-section .banner-box {

    display: block;

    overflow: hidden;

    border-radius: 8px;

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

    transition: transform 0.3s ease;

}



.prom-banners-section .banner-box:hover {

    transform: translateY(-3px);

}



/* Utility Classes */

.hidden {

    display: none !important;

}



/* --- Catalog Page --- */

.page-container {

    padding-top: 10px;

    padding-bottom: 2rem;

}



.breadcrumbs {

    margin-bottom: 1.5rem;

    color: var(--text-secondary);

    font-size: 0.9rem;

}



.breadcrumbs a:hover {

    color: var(--accent-color);

}



.category-title {

    font-size: 2rem;

    font-weight: 700;

    margin-bottom: 2rem;

}



.category-layout {

    display: grid;

    grid-template-columns: 1fr;

    gap: 2rem;

}



@media (min-width: 1024px) {

    .category-layout {

        grid-template-columns: 280px 1fr;

    }



    .category-sidebar {

        display: block !important;

        position: sticky;

        top: 80px;

        align-self: start;

        max-height: calc(100vh - 100px);

        overflow-y: auto;

    }

}



.category-main {

    min-width: 0;

}



.category-controls {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 1.5rem;

    flex-wrap: wrap;

    gap: 1rem;

}



.sort-select {

    padding: 0.5rem 2rem 0.5rem 1rem;

    border: 1px solid var(--border-color);

    border-radius: 9999px;

    background-color: white;

    cursor: pointer;

    font-size: 0.9rem;

}



.btn-filter-mobile {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.5rem 1rem;

    border: 1px solid var(--border-color);

    border-radius: 9999px;

    background: white;

    margin-right: auto;

}



@media (min-width: 1024px) {

    .btn-filter-mobile {

        display: none;

    }

}



/* --- Sidebar Filters Styling (Adapting features.tpl classes) --- */

.sidebar__boxed {

    margin-bottom: 2rem;

    border-bottom: 1px solid var(--border-color);

    padding-bottom: 1.5rem;

}



.filter__name {

    font-weight: 600;

    margin-bottom: 1rem;

    cursor: pointer;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.filter__group {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

}



.filter__item {

    font-size: 0.95rem;

}



.filter__link {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    cursor: pointer;

    color: var(--text-secondary);

    transition: color 0.2s;

    width: 100%;

    text-align: left;

}



.filter__link:hover {

    color: var(--text-main);

}



.filter__link.checked {

    color: var(--accent-color);

    font-weight: 500;

}



.filter__checkbox {

    width: 18px;

    height: 18px;

    border: 1px solid #d1d5db;

    border-radius: 4px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: white;

    transition: all 0.2s;

}



.filter__link.checked .filter__checkbox {

    background: var(--accent-color);

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

}



.checkmark {

    width: 12px;

    height: 12px;

    stroke: white;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

    fill: none;

    opacity: 0;

    transition: opacity 0.2s;

}



.filter__link.checked .checkmark {

    opacity: 1;

}



/* Price Range Slider */

.price_range {

    display: flex;

    gap: 0.5rem;

    margin-bottom: 1rem;

}



.price_label input {

    width: 80px;

    padding: 0.25rem 0.5rem;

    border: 1px solid var(--border-color);

    border-radius: 4px;

    font-size: 0.9rem;

}



/* Filter Backdrop */

.filter-backdrop {

    display: none;

    position: fixed;

    inset: 0;

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

    z-index: 999;

    opacity: 0;

    transition: opacity 0.3s ease;

}



body.filters-open .filter-backdrop {

    display: block;

    opacity: 1;

}



/* Mobile Sidebar Drawer */

@media (max-width: 1023px) {

    .category-sidebar {

        position: fixed;

        top: 0;

        left: 0;

        width: 300px;

        height: 100%;

        background: white;

        z-index: 1000;

        padding: 1.5rem;

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

        transform: translateX(-100%);

        transition: transform 0.3s;

        overflow-y: auto;

    }



    body.filters-open .category-sidebar {

        transform: translateX(0);

    }



    .filter-backdrop {

        position: fixed;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

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

        z-index: 999;

        display: none;

    }



    body.filters-open .filter-backdrop {

        display: block;

    }

}



/* Pagination */

.pagination {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 0.5rem;

    margin-top: 3rem;

    margin-bottom: 2rem;

}



.page-link {

    min-width: 40px;

    height: 40px;

    padding: 0 0.75rem;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid var(--border-color);

    border-radius: 8px;

    color: var(--text-main);

    font-weight: 500;

    text-decoration: none;

    transition: all 0.2s ease;

    background: white;

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

}



.page-link:hover {

    background: #f9fafb;

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

    transform: translateY(-1px);

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

}



.page-link.active {

    background: var(--accent-color);

    color: white;

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

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

}



.page-link.prev,

.page-link.next {

    font-weight: 700;

    font-size: 1.25rem;

}



.page-link.active {

    background: var(--accent-color);

    color: white;

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

}



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

   PRODUCT GALLERY THUMBNAILS NAVIGATION

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



.gallery-thumbs-container {

    position: relative;

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 16px;

    width: 100%;

}



.gallery-thumbs-horizontal {

    display: flex;

    gap: 8px;

    overflow-x: auto;

    scroll-behavior: smooth;

    scrollbar-width: none;

    /* Firefox */

    -ms-overflow-style: none;

    /* IE/Edge */

    flex: 1;

    padding: 4px 0;

    max-width: 344px;

    /* 4 items * 80px + 3 gaps * 8px = 344px */

}





.gallery-thumbs-horizontal::-webkit-scrollbar {

    display: none;

    /* Chrome/Safari */

}



.thumb-horizontal {

    flex: 0 0 auto;

    width: 80px;

    height: 80px;

    border: 2px solid #e5e7eb;

    border-radius: 8px;

    overflow: hidden;

    cursor: pointer;

    transition: all 0.3s ease;

    background: white;

}



.thumb-horizontal:hover {

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

    transform: translateY(-2px);

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

}



.thumb-horizontal.active {

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

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

}



.thumb-horizontal img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



.thumb-nav {

    flex: 0 0 auto;

    width: 40px;

    height: 40px;

    border: 2px solid #e5e7eb;

    border-radius: 50%;

    background: white;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.3s ease;

    padding: 0;

    z-index: 2;

}



.thumb-nav:hover {

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

    background: var(--accent-color);

    color: white;

    transform: scale(1.1);

}



.thumb-nav:active {

    transform: scale(0.95);

}



.thumb-nav svg {

    width: 20px;

    height: 20px;

}



.thumb-nav:disabled {

    opacity: 0.3;

    cursor: not-allowed;

    pointer-events: none;

}



/* Mobile responsiveness */

@media (max-width: 768px) {

    .gallery-thumbs-horizontal {

        max-width: 304px;

        /* 4 items * 70px + 3 gaps * 8px = 304px */

        gap: 8px;

    }



    .thumb-horizontal {

        width: 70px;

        height: 70px;

    }



    .thumb-nav {

        width: 36px;

        height: 36px;

    }



    .thumb-nav svg {

        width: 18px;

        height: 18px;

    }

}



@media (max-width: 480px) {

    .gallery-thumbs-container {

        gap: 6px;

    }



    .gallery-thumbs-horizontal {

        max-width: 258px;

        /* 4 items * 60px + 3 gaps * 6px = 258px */

        gap: 6px;

    }



    .thumb-horizontal {

        width: 60px;

        height: 60px;

    }

}



/* Payment & Delivery Redesign */

.info-section-group {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.payment-section h4,

.delivery-section h4 {

    margin-bottom: 12px;

    font-size: 1.1rem;

    color: var(--text-main);

}



.payment-methods-grid {

    display: flex;

    flex-direction: column;

    gap: 8px;

}



/* Row of small badges (MC, Visa, Apple, Google) */

.payment-badges-row {

    display: flex;

    gap: 8px;

    margin-bottom: 4px;

}



.payment-method-card {

    transition: all 0.2s ease-in-out;

}



.payment-method-card:hover {

    transform: translateY(-2px);

    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    border-color: #b0b0b0 !important;

}



.payment-badge:hover {

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

}



/* Detailed rows (P24, Pay on Delivery, Cashless) */

.payment-detailed-row {

    display: flex;

    gap: 8px;

}



.badge-p24 {

    width: auto;

    padding: 0 8px;

    font-weight: 600;

    font-size: 0.85rem;

    min-width: 70px;

}



.p24-text {

    display: flex;

    align-items: center;

    gap: 4px;

    color: #333;

}



.p24-text .green {

    color: #fff;

    background: #51a905;

    border-radius: 50%;

    width: 20px;

    height: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.75rem;

}



.payment-option-card,

.delivery-option-card {

    border: 1px solid #e5e7eb;

    border-radius: 8px;

    padding: 10px 12px;

    display: flex;

    align-items: center;

    gap: 10px;

    background: #fff;

    font-size: 0.9rem;

    color: var(--text-main);

    transition: all 0.2s;

    flex: 1;

}



.payment-option-card.full-width {

    width: 100%;

}



.payment-option-card:hover,

.delivery-option-card:hover {

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

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

}



.delivery-methods-list {

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.delivery-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 24px;

    height: 24px;

    flex-shrink: 0;

}



.icon-np svg {

    fill: #D92D2D;

    /* Nova Poshta red */

}



.icon-courier svg {

    stroke: #2563eb;

    /* Courier blue */

}



/* Mobile responsiveness adjustments */

@media (max-width: 480px) {

    .payment-detailed-row {

        flex-direction: column;

    }



    .badge-p24 {

        width: 100%;

        justify-content: flex-start;

        padding: 10px 12px;

        height: auto;

    }

}



/* --- New Footer Styles --- */

#main-footer {

    background-color: #f9fafb;

    border-top: 1px solid var(--border-color);

    padding: 4rem 0 2rem;

    margin-top: 4rem;

    font-size: 0.95rem;

}



.footer-content {

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

    margin: 0 auto;

    padding: 0 1rem;

    display: grid;

    grid-template-columns: 1fr;

    gap: 3rem;

}



@media (min-width: 768px) {

    .footer-content {

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

    }

}



.footer-col h4 {

    font-size: 1rem;

    font-weight: 700;

    margin-top: 0;

    margin-bottom: 1.5rem;

    color: var(--text-main);

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.footer__menu_item {

    margin-bottom: 0.75rem;

}



.footer__menu_link {

    color: var(--text-secondary);

    text-decoration: none;

    transition: color 0.2s;

}



.footer__menu_link:hover {

    color: var(--accent-color);

}



.footer-bottom {

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

    margin: 3rem auto 0;

    padding-top: 2rem;

    border-top: 1px solid #e5e7eb;

    text-align: center;

    color: #9ca3af;

    font-size: 0.9rem;

}



/* Social Icons */

.social-links-footer {

    display: flex;

    gap: 1rem;

    align-items: center;

}



.social-link {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: white;

    border: 1px solid #e5e7eb;

    color: #4b5563;

    transition: all 0.2s ease;

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

}



.social-link:hover {

    background: var(--accent-color);

    color: white;

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

    transform: translateY(-2px);

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

}



.social-link svg {

    width: 20px;

    height: 20px;

}



/* Cart Informer Modernization */

.header_informers__link.icon-btn {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    /* Match other header icons if they have explicit size */

    height: 40px;

    border-radius: 50%;

    background: transparent;

    color: #374151;

    padding: 0;

}



.header_informers__link.icon-btn:hover {

    background-color: #f3f4f6;

    color: var(--accent-color);

}



/* Counter badge on top of cart icon */

.header_informers__link .cart_counter {

    position: absolute;

    top: -2px;

    /* Adjusted position */

    right: -2px;

    background-color: #EF4444;

    /* Red badge */

    color: white;

    border-radius: 50%;

    width: 18px;

    height: 18px;

    font-size: 10px;

    font-weight: 700;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid white;

    line-height: 1;

}



/* Newsletter Form */

.newsletter-form {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

    width: 100%;

}



.newsletter-form input {

    width: 100%;

    padding: 0.75rem 1rem;

    border: 1px solid #d1d5db;

    border-radius: 6px;

    font-family: inherit;

    box-sizing: border-box;

}



.newsletter-form button {

    width: 100%;

    padding: 0.75rem;

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

    color: white;

    border-radius: 6px;

    font-weight: 600;

    transition: background-color 0.2s;

    cursor: pointer;

    border: none;

}



.newsletter-form button:hover {

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

}



/* --- Mobile Footer Fixes --- */

@media (max-width: 768px) {

    #main-footer {

        padding: 2rem 0 1.5rem;

        margin-top: 0rem;

    }



    .footer-content {

        gap: 0;

        padding: 0 1rem;

    }



    .footer-col {

        border-bottom: 1px solid var(--border-color);

        padding: 0;

    }



    .footer-col:first-child {

        padding-bottom: 1rem;

        margin-bottom: 0;

        display: flex;

        justify-content: center;

        width: 100%;

    }



    .footer-col:first-child .header__logo {

        margin: 0 auto;

    }



    .footer-col h4 {

        margin: 0;

        padding: 1rem 0;

        display: flex;

        justify-content: space-between;

        align-items: center;

        cursor: pointer;

        font-size: 0.95rem;

    }



    .footer-col h4::after {

        content: '';

        width: 8px;

        height: 8px;

        border-right: 2px solid #6b7280;

        border-bottom: 2px solid #6b7280;

        transform: rotate(45deg);

        transition: transform 0.2s;

    }



    .footer-col.open h4::after {

        transform: rotate(-135deg);

    }



    /* Override footer__hidden for mobile display */

    .footer-col .footer__content,

    .footer-col .footer__menu,

    .footer-col .footer__hidden {

        display: none !important;

        padding: 0 0 1rem;

    }



    .footer-col.open .footer__content,

    .footer-col.open .footer__menu,

    .footer-col.open .footer__hidden {

        display: block !important;

    }



    /* Newsletter column always visible */

    .footer-col:last-child .newsletter-form {

        display: flex;

        flex-direction: column;

    }



    .footer-col:last-child h4::after {

        display: none;

    }



    .footer-col:last-child {

        border-bottom: none;

        padding-top: 1rem;

    }



    .footer-bottom {

        margin-top: 1.5rem;

        padding-top: 1rem;

    }



    .footer__menu_item {

        padding: 0.5rem 0;

    }

}



/* Free Delivery Progress Bar */

.delivery-progress-wrapper {

    padding: 1.5rem 1rem;

    background: #F9FAFB;

    border-radius: 12px;

    margin: 1rem 0;

    border: 1px solid #E5E7EB;

}



.delivery-progress-wrapper.success {

    background: #ECFDF5;

    border-color: #D1FAE5;

}



.delivery-progress-text {

    font-size: 1rem;

    font-weight: 600;

    margin-bottom: 0.75rem;

    color: #374151;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.delivery-amount {

    font-size: 1.1rem;

    font-weight: 800;

    color: var(--accent-color);

}



.delivery-progress-wrapper.success .delivery-progress-text {

    color: #059669;

    justify-content: center;

}



.delivery-progress-bar-bg {

    height: 12px;

    background: #E5E7EB;

    border-radius: 999px;

    position: relative;

    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);

}



.delivery-progress-bar-fill {

    height: 100%;

    background: linear-gradient(90deg, #10B981, #34D399);

    border-radius: 999px;

    position: relative;

    transition: width 0.5s ease-out;

    min-width: 5%;

    /* Ensure icon is visible even at low % */

}



.delivery-truck-icon {

    position: absolute;

    right: -12px;

    top: 50%;

    transform: translateY(-50%);

    background: #fff;

    border-radius: 50%;

    width: 28px;

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    color: #10B981;

    border: 2px solid #fff;

    z-index: 2;

}



.delivery-truck-icon svg {

    width: 16px;

    height: 16px;

}



/* Success state for bar */

.delivery-progress-wrapper.success .delivery-progress-bar-fill {

    background: linear-gradient(90deg, #059669, #10B981);

}



.delivery-progress-wrapper.success .delivery-truck-icon {

    color: #059669;

    right: 0;

}



/* === Free Delivery Progress Bar (Popup Cart) === */
.delivery-progress-wrapper {
    margin: 20px 0;
    padding: 15px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.delivery-progress-wrapper.success {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.delivery-progress-text {
    font-size: 15px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 10px;
    text-align: center;
}

.delivery-amount {
    color: #2563eb;
    font-weight: 700;
}

.delivery-progress-bar-bg {
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 999px;
    position: relative;
    overflow: visible;
}

.delivery-progress-bar-fill {
    height: 100%;
    background: #10b981;
    border-radius: 999px;
    position: relative;
    transition: width 0.5s ease;
    min-width: 20px;
    /* Ensure truck has space */
}

.delivery-truck-icon {
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    z-index: 2;
    color: #10b981;
}

.delivery-truck-icon svg {
    width: 16px;
    height: 16px;
}

/* =====================================================
   Responsive YouTube / iframe videos in product description
   ===================================================== */

/* Wrap any iframe inside description in a responsive container */
#section-desc iframe,
.product-tab-content iframe,
.block iframe,
.description iframe {
    max-width: 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    display: block;
    border: none;
    border-radius: 8px;
    margin: 1rem 0;
}

/* Fallback for older browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 16/9) {
    .video-responsive {
        position: relative;
        width: 100%;
        padding-top: 56.25%; /* 16:9 ratio */
        height: 0;
        overflow: hidden;
        border-radius: 8px;
        margin: 1rem 0;
    }
    .video-responsive iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        margin: 0;
    }
}

/* Extra safety: prevent any fixed-width iframes from overflowing */
.product-tab-content,
#section-desc {
    overflow-x: hidden;
}

@media (max-width: 768px) {
    #section-desc iframe,
    .product-tab-content iframe,
    .block iframe,
    .description iframe {
        border-radius: 4px;
    }
}