/* ==========================================================================
   TheCpuHub Custom Styles
   Styles matching React app design
   Version: #v018
   Last Updated: 2026-01-25
   ========================================================================== */

/* ==========================================================================
   Skip to Content (Accessibility)
   ========================================================================== */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    padding: 0.75rem 1.5rem;
    background: var(--color-pink, #dc4f91);
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
}

.skip-to-content:focus {
    left: 0;
}

/* ==========================================================================
   Global Mobile Overflow Fix
   ========================================================================== */
@media (max-width: 767px) {
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    body {
        position: relative;
    }

    /* Ensure all containers respect viewport */
    .container,
    .site,
    .site-content,
    .woocommerce-wrapper,
    main,
    article {
        max-width: 100% !important;
        overflow-x: hidden;
    }
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--color-bg-dark, #101010);
    backdrop-filter: blur(8px);
    border-bottom: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
}

.site-branding .site-logo {
    text-decoration: none;
}

.site-title {
    font-size: 1.5rem;
    font-weight: 700;
    /* Match production: cyan → pink → orange gradient */
    background: linear-gradient(to right, #22d3ee, #ec4899, #fb923c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: #22d3ee; /* fallback */
}

@media (min-width: 768px) {
    .site-title {
        font-size: 1.875rem;
    }
}

/* Navigation */
.main-navigation {
    display: none;
}

@media (min-width: 768px) {
    .main-navigation {
        display: flex;
    }
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.nav-menu a:hover {
    color: var(--color-primary);
}

/* Header Quiz CTA */
.header-quiz-cta {
    display: none;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: var(--gradient-button);
    color: white;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity var(--transition-fast);
}

.header-quiz-cta:hover {
    opacity: 0.9;
    color: white;
}

.header-quiz-cta svg,
.header-quiz-cta i {
    width: 0.875rem;
    height: 0.875rem;
}

@media (min-width: 768px) {
    .header-quiz-cta {
        display: inline-flex;
    }
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

/* Inline icon after button text (e.g. "More details →") */
.btn-icon-right {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.btn:hover .btn-icon-right {
    transform: translateX(3px);
}

.btn-icon:hover {
    color: var(--color-primary);
    background: rgba(220, 79, 145, 0.1);
}

.header-cart {
    position: relative;
}

.header-cart:hover {
    color: var(--color-pink);
    background: rgba(236, 72, 153, 0.1);
}

.cart-count {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--color-pink);
    color: white;
    border-radius: var(--radius-full);
}

.cart-count.hidden {
    display: none;
}

.mobile-menu-toggle {
    display: flex;
}

@media (min-width: 768px) {
    .mobile-menu-toggle {
        display: none;
    }
}

/* Mobile Navigation */
.mobile-navigation {
    display: none;
    padding: 1rem 0;
    border-top: 1px solid var(--color-border);
}

.mobile-navigation.active {
    display: block;
}

.mobile-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu li {
    border-bottom: 1px solid var(--color-border);
}

.mobile-menu a {
    display: block;
    padding: 1rem 0;
    color: var(--color-text-secondary);
}

/* ==========================================================================
   Desktop Dropdown / Submenu
   ========================================================================== */

/* Parent item positioning */
.nav-menu > .menu-item-has-children {
    position: relative;
}

/* Dropdown arrow indicator */
.dropdown-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    vertical-align: middle;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform 0.2s ease;
}

.menu-item-has-children:hover > a .dropdown-arrow,
.menu-item-has-children:focus-within > a .dropdown-arrow {
    transform: rotate(180deg);
}

/* Desktop submenu dropdown */
.nav-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    min-width: 220px;
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
    background: #1a1a1a;
    border: 1px solid #333;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Show on hover and focus-within */
.nav-menu > .menu-item-has-children:hover > .sub-menu,
.nav-menu > .menu-item-has-children:focus-within > .sub-menu {
    display: block;
}

/* Submenu items */
.nav-menu .sub-menu li {
    margin: 0;
}

.nav-menu .sub-menu a {
    display: block;
    padding: 0.6rem 1.25rem;
    color: #ccc;
    font-size: 0.875rem;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-menu .sub-menu a:hover,
.nav-menu .sub-menu a:focus {
    background: rgba(220, 79, 145, 0.15);
    color: #fff;
}

/* ==========================================================================
   Mobile Dropdown / Submenu
   ========================================================================== */

/* Hide submenu by default on mobile */
.mobile-menu .sub-menu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0 0 0 1rem;
    border-left: 3px solid var(--color-pink, #dc4f91);
}

.mobile-menu .sub-menu.open {
    display: block;
}

.mobile-menu .sub-menu a {
    padding: 0.75rem 0;
    font-size: 0.9rem;
}

/* Mobile submenu toggle button */
.mobile-menu .menu-item-has-children {
    position: relative;
}

.mobile-menu .submenu-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-text-secondary, #b0b0b0);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0;
    transition: transform 0.2s ease;
}

.mobile-menu .submenu-toggle[aria-expanded="true"] {
    transform: rotate(180deg);
}

/* Search Overlay */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(2, 6, 23, 0.95);
    z-index: 100;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 20vh;
}

.search-overlay.active {
    display: flex;
}

.search-form {
    display: flex;
    gap: 1rem;
    width: 100%;
    max-width: 600px;
}

.search-input {
    flex: 1;
}

.search-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero-section {
    position: relative;
    overflow: hidden;
    padding: 5rem 0;
}

@media (min-width: 768px) {
    .hero-section {
        padding: 8rem 0;
    }
}

/* Hero Split Layout */
.hero-section--split {
    padding: 0;
}

.hero-split {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.hero-split__content {
    position: relative;
    z-index: 2;
    padding: 2rem 0;
}

.hero-split__image {
    position: relative;
    order: -1;
    height: 250px;
    overflow: hidden;
}

.hero-split__image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 75% center;
    mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%);
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%);
}

@media (min-width: 768px) {
    .hero-section--split {
        padding: 0;
    }

    .hero-split {
        display: grid;
        grid-template-columns: 42% 58%;
        align-items: stretch;
        gap: 0;
    }

    .hero-split__content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 5rem 2rem 5rem 0;
    }

    .hero-split__image {
        overflow: hidden;
        height: auto;
        order: 0;
    }

    .hero-split__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center right;
        mask-image: linear-gradient(to left, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 95%);
        -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 95%);
    }
}

@media (min-width: 1200px) {
    .hero-split__content {
        padding: 6rem 2rem 6rem 0;
    }
}

.hero-bg {
    position: absolute;
    inset: 0;
    background: var(--gradient-hero-bg);
}

.hero-grid {
    display: grid;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 768px) {
    .hero-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.hero-content {
    position: relative;
    z-index: 10;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

@media (min-width: 768px) {
    .hero-title {
        font-size: 3.75rem;
    }
}

.hero-title .text-gradient {
    display: block;
}

.hero-description {
    font-size: 1.25rem;
    color: var(--color-text-secondary);
    margin-bottom: 2rem;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.hero-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 3rem;
}

.hero-feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.hero-image {
    position: relative;
}

.hero-image-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(220, 79, 145, 0.15), rgba(236, 72, 153, 0.2));
    filter: blur(60px);
}

.hero-image img {
    position: relative;
    z-index: 10;
    border-radius: var(--radius-lg);
    width: 100%;
    height: auto;
}

/* ==========================================================================
   Product Cards
   ========================================================================== */

.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    cursor: pointer;
    transition: border-color var(--transition-normal);
}

.product-card:hover {
    border-color: rgba(220, 79, 145, 0.4);
}

.product-image {
    position: relative;
    overflow: hidden;
    background: var(--color-bg-secondary);
    aspect-ratio: 1;
}

.stock-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 10;
}

.product-image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.product-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1rem;
    transition: transform var(--transition-slow);
}

.product-card:hover .product-thumbnail {
    transform: scale(1.1);
}

.product-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 1rem;
    background: linear-gradient(to top, var(--color-bg-secondary), transparent);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.product-card:hover .product-overlay {
    opacity: 1;
}

.product-content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5rem;
}

.product-title a {
    color: inherit;
    text-decoration: none;
}

.product-title a:hover {
    color: var(--color-primary);
}

.product-summary {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-price-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    margin-top: auto;
}

.current-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-pink);
}

.product-buttons {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.btn-details {
    flex: 1;
}

/* ==========================================================================
   WooCommerce Shop Page
   ========================================================================== */

.woocommerce-wrapper {
    padding: 3rem 0;
}

.woocommerce-page-header {
    margin-bottom: 2rem;
}

.woocommerce-page-header h1 {
    font-size: 2rem;
}

.woocommerce-result-count,
.woocommerce-ordering {
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}

.woocommerce-ordering select {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
}

ul.products {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 640px) {
    ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280px) {
    ul.products {
        grid-template-columns: repeat(4, 1fr);
    }
}

ul.products li.product {
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    background: var(--color-bg-primary);
    border-top: 1px solid var(--color-border-dark);
    padding: 3rem 0;
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .footer-columns {
        grid-template-columns: repeat(4, 1fr);
    }
}

.footer-title {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--color-text-primary);
}

.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-nav a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-nav a:hover {
    color: var(--color-primary);
}

.social-links {
    display: flex;
    gap: 0.5rem;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.social-facebook {
    background: #1877f2;
    color: white;
}

.social-facebook:hover {
    background: #166fe5;
    color: white;
}

.social-instagram {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: white;
}

.social-instagram:hover {
    background: linear-gradient(45deg, #e08323, #d6582c, #cc1733, #bc1356, #ac0878);
    color: white;
}

.contact-info {
    color: var(--color-text-muted);
}

.contact-info p {
    margin-bottom: 0.5rem;
}

.contact-phone strong,
.contact-email strong {
    color: var(--color-text-primary);
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid var(--color-border-dark);
    padding-top: 2rem;
}

.footer-bottom-inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .footer-bottom-inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.copyright {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin: 0;
}

.company-info {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* Payment Methods */
.payment-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.payment-icon {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 700;
}

.payment-visa {
    background: white;
    color: #1a1f71;
}

.payment-mastercard {
    background: white;
    color: #eb001b;
}

.payment-maestro {
    background: white;
    color: #cc0000;
}

.payment-klarna {
    background: #ffb3c7;
    color: #0a0a0a;
}

.payment-paypal {
    background: #003087;
    color: white;
}

.payment-paypal-credit {
    background: white;
    color: #003087;
    border: 1px solid #ddd;
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.breadcrumbs {
    padding: 1rem 0;
    font-size: 0.875rem;
}

.breadcrumb-item {
    color: var(--color-text-muted);
}

.breadcrumb-item a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: var(--color-primary);
}

.breadcrumb-separator {
    margin: 0 0.5rem;
    color: var(--color-border);
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.6s ease forwards;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 767px) {
    .hero-features {
        grid-template-columns: 1fr;
    }

    .hero-feature {
        justify-content: center;
    }
}

/* ==========================================================================
   WooCommerce Product Card (content-product.php)
   ========================================================================== */

.product-card-wrapper {
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-card-wrapper .product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-card-wrapper .product-badge {
    position: absolute;
    z-index: 10;
}

.product-card-wrapper .product-image {
    position: relative;
    aspect-ratio: 1;
    background: rgba(15, 23, 42, 0.5);
    overflow: hidden;
}

.product-card-wrapper .product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1rem;
    transition: transform 0.5s ease;
}

.product-card-wrapper .product-card:hover .product-image img {
    transform: scale(1.1);
}

.product-card-wrapper .product-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--color-bg-secondary), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 1rem;
    gap: 0.5rem;
}

.product-card-wrapper .product-card:hover .product-overlay {
    opacity: 1;
}

.product-card-wrapper .product-details {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-card-wrapper .product-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
    min-height: 40px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-wrapper .product-summary {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
    min-height: 48px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-wrapper .product-price {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    margin-top: auto;
}

.product-card-wrapper .product-price .price {
    font-size: 1.5rem;
    font-weight: 700;
}

.product-card-wrapper .product-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Line clamp utilities */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   Shop Product Cards - Horizontal Layout (React ShopProductCard Style)
   ========================================================================== */

/* Products List Container - Single Column Layout */
.products-list,
ul.products-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
}

/* Override default grid for shop product list */
.products-list {
    grid-template-columns: 1fr !important;
}

/* Ensure shop product cards fill width */
.shop-product-card,
.products-list > li {
    width: 100%;
    max-width: 100%;
}

/* Shop Product Card - List Item */
.shop-product-card {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Horizontal Product Card */
.product-card-horizontal {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.product-card-horizontal:hover {
    border-color: rgba(220, 79, 145, 0.4);
    background: rgba(30, 41, 59, 0.7);
}

/* Desktop: Horizontal Layout */
@media (min-width: 768px) {
    .product-card-horizontal {
        flex-direction: row;
        padding: 1.5rem;
    }
}

/* Image Section */
.product-image-section {
    position: relative;
    width: 100%;
    height: 200px;
    flex-shrink: 0;
    background: rgba(15, 23, 42, 0.5);
    border-radius: var(--radius-md);
    overflow: hidden;
}

@media (min-width: 768px) {
    .product-image-section {
        width: 200px;
        height: 200px;
    }
}

.product-image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.product-image-section .product-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1rem;
    transition: transform 0.5s ease;
}

.product-card-horizontal:hover .product-image-section .product-image {
    transform: scale(1.1);
}

/* Stock Badge */
.product-stock-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 10;
}

.badge-success {
    background: var(--color-success);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-danger {
    background: #ef4444;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Details Section */
.product-details-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

/* Brand */
.product-details-section .product-brand {
    font-size: 0.75rem;
    color: var(--color-primary);
    margin-bottom: 0.25rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Title */
.product-details-section .product-title {
    margin: 0 0 0.5rem 0;
}

.product-details-section .product-title a {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--transition-fast);
}

.product-details-section .product-title a:hover {
    color: var(--color-primary);
}

/* Summary */
.product-details-section .product-summary {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Specs (CPU/GPU) */
.product-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.spec-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.spec-icon {
    width: 1rem;
    height: 1rem;
    color: var(--color-primary);
}

/* Price */
.product-details-section .product-price {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-top: auto;
}

.product-details-section .price-current {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-pink);
}

.product-details-section .price-current .woocommerce-Price-amount {
    color: var(--color-pink);
}

.product-details-section .price-original {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    text-decoration: line-through;
}

/* Actions Section */
.product-actions-section {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .product-actions-section {
        flex-direction: column;
        width: 160px;
    }
}

.btn-full {
    width: 100%;
    justify-content: center;
    text-align: center;
}

.product-actions-section .btn {
    white-space: nowrap;
}

.product-actions-section .btn-icon,
.product-actions-section .btn-icon-right {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
}

/* ==========================================================================
   WooCommerce Single Product Page
   ========================================================================== */

.single-product-page {
    padding-top: 0;
}

.single-product-page .back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.single-product-page .back-link:hover {
    color: var(--color-text-primary);
}

.single-product-page .product-gallery {
    position: relative;
}

.single-product-page .main-image {
    aspect-ratio: 1;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 1rem;
}

.single-product-page .main-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 0.3s ease;
}

.single-product-page .thumbnail-gallery {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
}

.single-product-page .thumbnail-btn {
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s ease;
    background: none;
    padding: 0;
}

.single-product-page .thumbnail-btn:hover {
    border-color: var(--color-border);
}

.single-product-page .thumbnail-btn.border-cyan-400 {
    border-color: var(--color-primary);
}

.single-product-page .thumbnail-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.single-product-page .product-brand {
    font-size: 0.875rem;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.single-product-page .product-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
    .single-product-page .product-title {
        font-size: 2.5rem;
    }
}

.single-product-page .product-sku {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}

.single-product-page .product-price {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.single-product-page .product-summary {
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

/* Quantity Input */
.single-product-page .quantity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.single-product-page .quantity .qty {
    width: 80px;
    text-align: center;
    padding: 0.75rem;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: 1rem;
}

.single-product-page .stock-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    margin-top: 0.75rem;
}

/* Specifications Grid */
.single-product-page .product-specifications {
    margin-top: 4rem;
}

.single-product-page .specs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 56rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .single-product-page .specs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .single-product-page .specs-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.single-product-page .spec-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
}

.single-product-page .spec-icon {
    color: var(--color-orange);
    margin-top: 0.25rem;
}

.single-product-page .spec-item p:first-of-type {
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: 0.25rem;
}

.single-product-page .spec-item p:last-of-type {
    color: var(--color-text-muted);
    margin: 0;
}

/* Description */
.single-product-page .product-description {
    margin-top: 4rem;
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
}

.single-product-page .description-content {
    color: var(--color-text-secondary);
    line-height: 1.8;
}

.single-product-page .description-content p {
    margin-bottom: 1rem;
}

.single-product-page .description-content h2,
.single-product-page .description-content h3,
.single-product-page .description-content h4 {
    color: var(--color-text-primary);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.single-product-page .description-content ul,
.single-product-page .description-content ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.single-product-page .description-content li {
    margin-bottom: 0.5rem;
}

/* Related Products */
.single-product-page .related-products {
    margin-top: 4rem;
}

/* ==========================================================================
   WooCommerce Shop Page Enhancements
   ========================================================================== */

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

.shop-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .shop-header h1 {
        font-size: 3rem;
    }
}

.shop-products {
    flex: 1;
}

/* Sidebar close button - hidden on desktop, shown in mobile off-canvas */
.sidebar-close {
    display: none;
}

/* Mobile Filter Toggle */
.mobile-filter-toggle {
    display: block;
    margin-bottom: 1rem;
}

@media (min-width: 1024px) {
    .mobile-filter-toggle {
        display: none;
    }
}

/* Mobile Sidebar (Off-canvas) */
@media (max-width: 1023px) {
    .shop-sidebar {
        display: block; /* Always in DOM, hidden visually by transform */
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 300px;
        max-width: 85vw;
        height: 100%;
        height: 100vh;
        height: -webkit-fill-available; /* iOS Safari fallback */
        background: rgba(2, 6, 23, 0.98);
        -webkit-backdrop-filter: blur(12px); /* Safari prefix */
        backdrop-filter: blur(12px);
        z-index: 1000;
        padding: 2rem 1.5rem;
        padding-bottom: 120px; /* Extra space for scroll */
        overflow-y: auto !important;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch; /* Smooth iOS scrolling */
        -ms-overflow-style: -ms-autohiding-scrollbar; /* Edge scrollbar */
        overscroll-behavior-y: contain; /* Prevent page scroll when at bounds */
        touch-action: pan-y; /* Allow vertical touch scrolling */
        -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        transform: translateX(-100%);
        -webkit-transition: transform 0.3s ease-in-out;
        -ms-transition: transform 0.3s ease-in-out;
        transition: transform 0.3s ease-in-out;
        border-right: 1px solid var(--color-border);
        box-shadow: 10px 0 25px rgba(0, 0, 0, 0.5);
    }

    .shop-sidebar.active {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    /* Ensure sidebar content is interactive and scrollable */
    .shop-sidebar * {
        pointer-events: auto;
    }

    /* Sidebar inner content wrapper for proper scrolling */
    .shop-sidebar > * {
        touch-action: pan-y;
    }

    /* Sidebar sections spacing */
    .shop-sidebar .sidebar-section {
        margin-bottom: 1rem;
    }

    /* Filter checkboxes - ensure clickable */
    .shop-sidebar .filter-checkbox {
        display: flex;
        align-items: center;
        padding: 0.5rem 0;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(236, 72, 153, 0.2);
    }

    .shop-sidebar .filter-checkbox input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin-right: 0.5rem;
        cursor: pointer;
        pointer-events: auto;
    }

    /* Overlay when sidebar is active */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        pointer-events: none;
    }

    .sidebar-overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Close button for mobile sidebar (hidden on desktop via base rule) */
    .sidebar-close {
        display: block;
        position: absolute;
        top: 1rem;
        right: 1rem;
        background: transparent;
        border: none;
        color: var(--color-text-muted);
        cursor: pointer;
        padding: 0.5rem;
        z-index: 10;
    }

    .sidebar-close:hover {
        color: var(--color-text-primary);
    }
}

/* Mobile Layout Fixes */
@media (max-width: 767px) {
    /* Header Search - Hide full form, show icon only (handled by JS toggle) */
    .header-search-form {
        display: none;
    }

    /* Hero Section */
    .hero-section {
        padding: 3rem 0;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-description {
        font-size: 1rem;
    }

    /* Shop Page */
    .shop-header h1 {
        font-size: 2rem;
    }
    
    .shop-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .toolbar-left, .toolbar-center, .toolbar-right {
        width: 100%;
        justify-content: space-between;
        display: flex;
    }
    
    .woocommerce-result-count {
        text-align: center;
        width: 100%;
    }
}

.filter-section {
    margin-bottom: 1.5rem;
}

.filter-section h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.filter-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.filter-section li {
    margin-bottom: 0.25rem;
}

.filter-section a {
    display: block;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: all 0.15s ease;
}

.filter-section a:hover {
    background: var(--color-bg-secondary);
}

.filter-section a.active {
    background: rgba(236, 72, 153, 0.2);
    color: var(--color-pink);
}

/* ==========================================================================
   Product Filters Panel (React Style)
   ========================================================================== */

.product-filters-panel {
    padding: 1.5rem;
    background: rgba(30, 41, 59, 0.5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

.filters-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    align-items: start;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.filter-group-wide {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.filter-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Category filter buttons - outline style by default, solid when active */
.filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 0.375rem);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.filter-btn:hover {
    background: rgba(236, 72, 153, 0.1);
    border-color: var(--color-pink);
    color: var(--color-pink);
}

.filter-btn.active {
    background: var(--color-pink);
    border-color: var(--color-pink);
    color: white;
}

/* Apply button - pink gradient */
.filter-btn-apply {
    background: var(--gradient-button, linear-gradient(to right, #ec4899, #db2777));
    border: none;
    color: white;
    padding: 0.5rem 1.5rem;
    margin-top: 0.5rem;
    align-self: flex-start;
}

.filter-btn-apply:hover {
    background: var(--gradient-button-hover, linear-gradient(to right, #db2777, #be185d));
    color: white;
}

/* Price Slider */
.price-slider-container {
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
}

.price-slider {
    position: absolute;
    width: 100%;
    height: 6px;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.price-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--color-pink);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.price-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--color-pink);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.price-slider-track {
    position: absolute;
    width: 100%;
    height: 6px;
    background: var(--color-border);
    border-radius: 3px;
    pointer-events: none;
}

/* Responsive */
@media (max-width: 768px) {
    .filters-grid {
        grid-template-columns: 1fr;
    }

    .filter-group-wide {
        width: 100%;
    }
}

.result-count {
    color: var(--color-text-muted);
}

.ordering select {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.ordering select:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* No Products */
.no-products {
    text-align: center;
    padding: 5rem 0;
}

.no-products h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.no-products p {
    color: var(--color-text-muted);
    margin-bottom: 2rem;
}

/* Pagination */
.shop-pagination {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
}

.shop-pagination .nav-links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.shop-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: all 0.15s ease;
}

.shop-pagination .page-numbers:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.shop-pagination .page-numbers.current {
    background: var(--gradient-button);
    border-color: transparent;
    color: white;
}

/* WooCommerce Messages */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    padding: 1rem 1.5rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
}

.woocommerce-message {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid var(--color-green);
    color: var(--color-green);
}

.woocommerce-info {
    background: rgba(220, 79, 145, 0.1);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

.woocommerce-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid #ef4444;
    color: #ef4444;
}

/* ==========================================================================
   WooCommerce Price HTML Override
   ========================================================================== */

.woocommerce .price del {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.woocommerce .price ins {
    text-decoration: none;
    color: var(--color-pink);
}

.woocommerce .price .amount {
    color: var(--color-pink);
}

/* ==========================================================================
   Utility Classes for Templates
   ========================================================================== */

.w-full { width: 100%; }
.h-full { height: 100%; }
.max-w-2xl { max-width: 42rem; }
.max-w-4xl { max-width: 56rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-auto { margin-top: auto; }

.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }

.transition-colors { transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
.transition-transform { transition: transform 0.3s ease; }
.transition-opacity { transition: opacity 0.3s ease; }
.transition-all { transition: all 0.3s ease; }

.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-100 { opacity: 1; }

.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group:hover .group-hover\:scale-110 { transform: scale(1.1); }

.hidden { display: none; }

@media (min-width: 1024px) {
    .lg\:block { display: block; }
    .lg\:gap-12 { gap: 3rem; }
}

.rounded-lg { border-radius: var(--radius-lg); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-full { border-radius: var(--radius-full); }

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

.blur-3xl { filter: blur(64px); }

.aspect-square { aspect-ratio: 1; }

.z-10 { z-index: 10; }
.z-50 { z-index: 50; }

.absolute { position: absolute; }
.relative { position: relative; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }

/* Border Colors */
.border-transparent { border-color: transparent; }
.border-cyan-400 { border-color: var(--color-primary); }
.border-slate-600 { border-color: #475569; }

/* Text Colors */
.text-white { color: white; }
.text-gray-200 { color: #e5e7eb; }
.text-gray-300 { color: #d1d5db; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-cyan-400 { color: var(--color-primary); }
.text-pink-400 { color: var(--color-pink); }
.text-pink-500 { color: var(--color-pink); }
.text-green-400 { color: #4ade80; }
.text-green-500 { color: var(--color-green); }
.text-red-400 { color: #f87171; }
.text-orange-400 { color: var(--color-orange); }

/* Background Colors */
.bg-slate-800\/30 { background: rgba(30, 41, 59, 0.3); }
.bg-slate-800\/50 { background: rgba(30, 41, 59, 0.5); }
.bg-slate-900\/50 { background: rgba(15, 23, 42, 0.5); }
.bg-pink-500\/20 { background: rgba(236, 72, 153, 0.2); }
.bg-cyan-400\/10 { background: rgba(220, 79, 145, 0.1); }

/* Font Utilities */
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }

.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }

@media (min-width: 768px) {
    .md\:text-4xl { font-size: 2.25rem; }
    .md\:text-5xl { font-size: 3rem; }
    .md\:text-6xl { font-size: 3.75rem; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
}

/* Spacing */
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }
.mr-2 { margin-right: 0.5rem; }
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }

.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }

.leading-tight { line-height: 1.25; }

/* Width/Height */
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-20 { width: 5rem; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-20 { height: 5rem; }

/* Button Sizes */
.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn[disabled],
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* ==========================================================================
   Page Template Styles
   Add these to the end of custom.css
   ========================================================================== */

/* Page Wrapper */
.page-wrapper {
    padding: 3rem 0;
    min-height: 60vh;
}

.page-content {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
}

.page-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.page-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}

.entry-content {
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    color: var(--color-text-primary);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.entry-content p {
    margin-bottom: 1rem;
}

.entry-content a {
    color: var(--color-primary);
    text-decoration: none;
}

.entry-content a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

/* WooCommerce Cart & Checkout Blocks */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
    color: var(--color-text-primary);
}

/* Fix checkout form labels - dark text on white input backgrounds (ALL screen sizes) */
.wc-block-components-text-input label,
.wc-block-components-address-form label,
.wc-block-checkout__contact-fields label,
.wc-block-checkout__shipping-fields label,
.wc-block-checkout__billing-fields label,
.wc-block-components-combobox label,
.wc-block-components-select-control label {
    color: #4b5563 !important;  /* gray-600 - darker for better contrast */
}

/* When input is focused, make label even darker */
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input:focus-within label {
    color: #1f2937 !important;  /* gray-800 - very dark for focused state */
}

/* Hide duplicate price in checkout order summary */
.wc-block-components-checkout-order-summary__title-price {
    display: none !important;
}

/* Clean up order summary item - hide duplicate individual price, keep total */
.wc-block-components-order-summary-item__individual-prices {
    display: none !important;
}

.wc-block-cart__main,
.wc-block-checkout__main {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

/* Product specs table caption - brighter for readability */
.woocommerce-Tabs-panel table caption,
.woocommerce-Tabs-panel .spec-table caption,
.product-specifications table caption {
    color: var(--color-text-primary) !important;
    font-weight: 700;
    background-color: transparent !important;
}

/* Product specs table column headers (thead) - muted for subtle distinction */
.woocommerce-Tabs-panel table thead th,
.woocommerce-Tabs-panel .spec-table thead th,
.product-specifications table thead th {
    color: var(--color-text-muted) !important;
    font-weight: 600;
    background-color: rgba(15, 23, 42, 0.9) !important;
    border-color: var(--color-border) !important;
}

/* Product specs table row headers (tbody th) - bright white */
.woocommerce-Tabs-panel table tbody th,
.woocommerce-Tabs-panel .spec-table tbody th,
.product-specifications table tbody th {
    color: var(--color-text-primary) !important;
    font-weight: 500;
    background-color: transparent !important;
    border-color: var(--color-border) !important;
}

/* Product specs table data cells */
.woocommerce-Tabs-panel table tbody td,
.woocommerce-Tabs-panel .spec-table tbody td,
.product-specifications table tbody td {
    color: var(--color-text-secondary) !important;
    background-color: transparent !important;
    border-color: var(--color-border) !important;
}

/* Additional Information table - make plain text values match link color */
.woocommerce-product-attributes-item__value,
.woocommerce-product-attributes-item__value p {
    color: var(--color-primary) !important;
}

.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    min-width: 380px !important;
    flex: 0 0 380px !important;
}

/* Checkout layout - give more space to sidebar */
.wp-block-woocommerce-checkout .wc-block-checkout {
    display: flex;
    gap: 2rem;
}

.wc-block-checkout__main {
    flex: 1;
    min-width: 0;
}

/* Order summary item text formatting */
.wc-block-components-order-summary-item__description {
    min-width: 200px;
}

.wc-block-components-order-summary-item__product-name {
    white-space: normal;
    word-wrap: break-word;
}

/* ==========================================================================
   Cart Page - Mobile-First Clean Design
   Shows: Image, Title, SKU, Quantity, Price (no frames)
   ========================================================================== */

/* Remove cart wrapper borders/backgrounds on mobile */
@media (max-width: 768px) {
    .wc-block-cart__main {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
    }

    .wc-block-cart__sidebar {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin-top: 1.5rem;
    }
}

/* Cart items container */
.wc-block-cart-items {
    border: none !important;
}

/* Individual cart item row - clean card style on mobile */
/* Fix: Ensure cart table tbody has proper width */
table.wc-block-cart-items tbody {
    display: block !important;
    width: 100% !important;
}

.wc-block-cart-items__row {
    display: flex;
    flex-wrap: nowrap !important;
    width: 100% !important;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border);
}

.wc-block-cart-items__row:last-child {
    border-bottom: none;
}

/* Product image */
.wc-block-cart-item__image {
    width: 80px !important;
    height: 80px !important;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.3);
}

.wc-block-cart-item__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Product info wrapper */
.wc-block-cart-item__product {
    flex: 1;
    min-width: 200px !important;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Product name */
.wc-block-cart-item__product-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.3;
    margin: 0;
}

.wc-block-cart-item__product-name a {
    color: var(--color-text-primary);
    text-decoration: none;
}

.wc-block-cart-item__product-name a:hover {
    color: var(--color-primary);
}

/* Hide duplicate unit price - keep only total */
.wc-block-cart-item__prices {
    display: none !important;
}

/* Product metadata (SKU display) */
.wc-block-cart-item__product-metadata,
.wc-block-components-product-metadata {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

/* Total price wrapper - position on right */
.wc-block-cart-item__total-price-and-sale-badge-wrapper {
    position: absolute;
    right: 0;
    top: 1rem;
}

/* Price styling */
.wc-block-cart-item__total-price-and-sale-badge-wrapper .wc-block-components-product-price {
    color: var(--color-pink);
    font-size: 1.1rem;
    font-weight: 700;
}

/* Quantity controls */
.wc-block-cart-item__quantity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.wc-block-components-quantity-selector {
    display: inline-flex;
    align-items: center;
    background: var(--color-bg-dark);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
}

.wc-block-components-quantity-selector__button {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wc-block-components-quantity-selector__button:hover {
    background: rgba(220, 79, 145, 0.1);
    color: var(--color-primary);
}

.wc-block-components-quantity-selector__input {
    width: 40px;
    height: 32px;
    text-align: center;
    background: transparent;
    border: none;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    color: var(--color-text-primary);
    font-weight: 600;
}

/* Remove item link */
.wc-block-cart-item__remove-link {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-decoration: underline;
    margin-left: 0.5rem;
}

.wc-block-cart-item__remove-link:hover {
    color: var(--color-pink);
}

/* ==========================================================================
   Mobile Cart & Checkout - Clean Frameless Layout
   ========================================================================== */
@media (max-width: 768px) {
    /* Remove outer page frame on cart/checkout pages, keep horizontal padding */
    .woocommerce-cart .page-content,
    .woocommerce-checkout .page-content {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 0.75rem !important;
        margin: 0 !important;
        max-width: 100% !important;
    }

    /* Remove ALL frames/borders from cart containers */
    .wc-block-cart,
    .wc-block-cart__main,
    .wp-block-woocommerce-cart,
    .wc-block-cart__main > *,
    .wc-block-components-sidebar-layout {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Ensure cart items don't overflow */
    .wc-block-cart-items {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Fix: Ensure cart table tbody has proper width */
    table.wc-block-cart-items tbody {
        display: block !important;
        width: 100% !important;
    }

    /* Remove ALL frames from checkout containers */
    .wc-block-checkout,
    .wc-block-checkout__main,
    .wp-block-woocommerce-checkout,
    .wc-block-checkout__main > *,
    .wc-block-components-main,
    .wc-block-checkout__form {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Remove frames from checkout form sections */
    .wc-block-components-checkout-step,
    .wc-block-checkout__contact-fields,
    .wc-block-checkout__billing-fields,
    .wc-block-checkout__shipping-fields,
    .wp-block-woocommerce-checkout-contact-information-block,
    .wp-block-woocommerce-checkout-billing-address-block,
    .wp-block-woocommerce-checkout-shipping-address-block {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 0 1rem 0 !important;
        margin: 0 !important;
    }

    /* Section titles in checkout */
    .wc-block-components-checkout-step__heading,
    .wc-block-checkout h2,
    .wc-block-components-title {
        font-size: 1.1rem !important;
        font-weight: 600;
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid rgba(51, 65, 85, 0.3);
    }

    /* Bigger input fields on mobile */
    .wc-block-components-text-input input,
    .wc-block-components-text-input textarea,
    .wc-block-components-select select,
    .wc-block-components-combobox input {
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: 0.875rem 1rem !important;
        min-height: 50px !important;
        border-radius: 8px !important;
    }

    /* Input labels - dark text on white input backgrounds */
    .wc-block-components-text-input label,
    .wc-block-components-address-form label,
    .wc-block-checkout__contact-fields label,
    .wc-block-checkout__shipping-fields label,
    .wc-block-checkout__billing-fields label {
        font-size: 0.85rem;
        color: rgba(55, 65, 81, 0.8) !important;
    }

    /* When input is focused, keep label readable */
    .wc-block-components-text-input.is-active label,
    .wc-block-components-text-input:focus-within label {
        color: rgba(55, 65, 81, 0.9) !important;
    }

    /* Also fix select/dropdown labels */
    .wc-block-components-combobox label,
    .wc-block-components-select-control label {
        color: rgba(55, 65, 81, 0.8) !important;
    }

    /* Order summary panel - collapsible, no frame */
    .wc-block-components-order-summary {
        background: transparent !important;
        border: none !important;
    }

    .wc-block-components-order-summary .wc-block-components-panel {
        background: rgba(15, 23, 42, 0.3) !important;
        border: 1px solid rgba(51, 65, 85, 0.3) !important;
        border-radius: 8px;
    }

    /* Cart title styling */
    .wc-block-cart .wp-block-heading,
    .wc-block-cart h2 {
        font-size: 1.25rem;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--color-border);
    }

    /* Cart table - convert to block display on mobile */
    table.wc-block-cart-items .wc-block-cart-items__row {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        gap: 0.5rem;
        padding: 0.75rem 0;
        border-bottom: 1px solid rgba(51, 65, 85, 0.3);
        align-items: flex-start;
    }

    .wc-block-cart-items__row:last-child {
        border-bottom: none;
    }

    /* Image cell */
    .wc-block-cart-item__image {
        flex: 0 0 50px;
        width: 50px !important;
        height: 50px !important;
        border-radius: 6px;
        background: transparent !important;
        box-shadow: none !important;
        display: block !important;
    }

    /* Product cell - takes remaining space */
    table.wc-block-cart-items .wc-block-cart-item__product {
        flex: 1 1 0;
        min-width: 200px !important;
        display: block !important;
    }

    /* Product wrap inside */
    table.wc-block-cart-items .wc-block-cart-item__wrap {
        display: flex;
        width: 100% !important;
        flex-direction: column;
        gap: 0.25rem;
    }

    /* Product name */
    .wc-block-cart-item__product .wc-block-components-product-name {
        font-size: 0.8rem;
        font-weight: 500;
        line-height: 1.3;
        display: block;
        color: var(--color-primary);
    }

    /* Price inside product cell - show it */
    .wc-block-cart-item__prices {
        display: block !important;
    }

    .wc-block-cart-item__prices .wc-block-components-product-price {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--color-pink);
    }

    /* Hide metadata on small screens */
    .wc-block-cart-item__product .wc-block-components-product-metadata {
        display: none;
    }

    /* Quantity row */
    .wc-block-cart-item__quantity {
        display: flex !important;
        align-items: center;
        gap: 0.5rem;
        margin-top: 0.25rem;
    }

    /* Hide the total column (third td) - price is shown in product cell */
    .wc-block-cart-item__total {
        display: none !important;
    }

    /* Compact quantity selector - ensure visible and centered */
    .wc-block-components-quantity-selector {
        display: inline-flex !important;
        align-items: center !important;
        border-radius: 4px;
        flex-shrink: 0;
        min-width: 90px;
    }

    .wc-block-components-quantity-selector__button {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 1.1rem;
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .wc-block-components-quantity-selector__input {
        width: 34px;
        min-width: 34px;
        height: 28px;
        font-size: 0.9rem;
        text-align: center !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        -moz-appearance: textfield;
    }

    /* Hide number input spinners */
    .wc-block-components-quantity-selector__input::-webkit-outer-spin-button,
    .wc-block-components-quantity-selector__input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Remove link */
    .wc-block-cart-item__remove-link {
        font-size: 0.7rem;
        color: var(--color-text-muted);
    }

    /* Cart sidebar/totals */
    .wc-block-cart__sidebar {
        background: transparent !important;
        border: none !important;
        padding: 1rem 0 !important;
        margin-top: 1rem;
        border-top: 1px solid var(--color-border);
        padding-bottom: 100px !important; /* Space for sticky button */
    }

    /* ==========================================================================
       Sticky Bottom Buttons - Cart & Checkout
       ========================================================================== */

    /* Cart: Sticky Proceed to Checkout button */
    .wc-block-cart__submit-container {
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        background: linear-gradient(to top, rgba(2, 6, 23, 0.98) 80%, transparent);
        padding: 1rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }

    .wc-block-cart__submit-button {
        width: 100%;
        padding: 1rem 2rem !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        border-radius: 12px !important;
    }

    /* Checkout: Sticky Place Order button */
    .wc-block-checkout__actions {
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        background: linear-gradient(to top, rgba(2, 6, 23, 0.98) 80%, transparent);
        padding: 1rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }

    /* Hide extra order summary inside actions container */
    .wc-block-checkout__actions .checkout-order-summary-block-fill-wrapper,
    .wc-block-checkout__actions .e19lxcc00 {
        display: none !important;
    }

    /* Make actions row full width and button full width */
    .wc-block-checkout__actions_row {
        width: 100% !important;
        display: block !important;
    }

    .wc-block-components-checkout-place-order-button {
        width: 100% !important;
        padding: 1rem 2rem !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        border-radius: 12px !important;
    }

    /* Add bottom padding to checkout form to prevent content hiding behind sticky button */
    .wc-block-checkout__form {
        padding-bottom: 100px !important;
    }

    /* Hide return to cart link on mobile - takes space */
    .wc-block-components-checkout-return-to-cart-button {
        display: none;
    }
}

/* Form Inputs */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-select select {
    background: var(--color-bg-dark);
    border-color: var(--color-border);
    color: var(--color-text-primary);
    border-radius: var(--radius-md);
}

.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(220, 79, 145, 0.15);
}

/* Checkout Button */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.contained {
    background: linear-gradient(135deg, var(--color-pink) 0%, var(--color-orange) 100%) !important;
    border: none !important;
    color: white !important;
    font-weight: 600;
    padding: 1rem 2rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

/* Force white text on checkout/cart buttons */
.wc-block-cart__submit-button .wc-block-components-button__text,
.wc-block-components-checkout-place-order-button .wc-block-components-button__text,
.wc-block-components-button.contained .wc-block-components-button__text {
    color: white !important;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button.contained:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4);
    color: white !important;
}

.wc-block-cart__submit-button:hover .wc-block-components-button__text,
.wc-block-components-checkout-place-order-button:hover .wc-block-components-button__text,
.wc-block-components-button.contained:hover .wc-block-components-button__text {
    color: white !important;
}

/* Totals */
.wc-block-components-totals-item {
    border-color: var(--color-border);
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
    color: var(--color-text-primary);
}

/* Empty Cart */
.wc-block-cart--is-empty {
    text-align: center;
    padding: 4rem 2rem;
}

.wc-block-cart--is-empty .wc-block-cart__empty-cart__title {
    color: var(--color-text-primary);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/* ==========================================================================
   Page Content Styles - Matching Old Site Design
   Smaller fonts, cleaner layout
   ========================================================================== */

/* Page wrapper - content pages (dark bg via body.static-page) */
.page-wrapper {
    padding: 2rem 0 3rem;
    min-height: 50vh;
}

.page-content {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(51, 65, 85, 0.5);
    border-radius: 0;
    padding: 2rem 2.5rem;
    max-width: 900px;
    margin: 0 auto;
}

/* Page header - smaller, cleaner */
.page-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(51, 65, 85, 0.5);
}

.page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

/* Entry content - readable body text */
.entry-content {
    color: var(--color-text-secondary);
    line-height: 1.7;
    font-size: 0.938rem;
}

.entry-content h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 2rem 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(51, 65, 85, 0.3);
}

.entry-content h2:first-child {
    margin-top: 0;
}

.entry-content h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 1.75rem 0 0.5rem 0;
}

.entry-content h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 1.5rem 0 0.5rem 0;
}

.entry-content p {
    margin-bottom: 1rem;
    color: rgba(203, 213, 225, 0.9);
}

.entry-content p:last-child {
    margin-bottom: 0;
}

.entry-content a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s;
}

.entry-content a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

.entry-content ul,
.entry-content ol {
    margin: 1rem 0;
    padding-left: 1.5rem;
    color: rgba(203, 213, 225, 0.9);
}

.entry-content li {
    margin-bottom: 0.5rem;
}

.entry-content strong {
    color: var(--color-text-primary);
    font-weight: 600;
}

/* Contact info styling */
.entry-content .contact-info,
.entry-content p:has(a[href^="tel:"]),
.entry-content p:has(a[href^="mailto:"]) {
    background: rgba(220, 79, 145, 0.05);
    border: 1px solid rgba(220, 79, 145, 0.2);
    border-radius: 0;
    padding: 1rem;
    margin: 1rem 0;
}

/* Warranty-specific styles */
.page-content h3 + p,
.entry-content h3 + p {
    margin-top: 0.5rem;
}

/* ==========================================================================
   Single Product Page - Storefront-Style Layout
   Clean two-column layout matching WooCommerce Storefront theme
   ========================================================================== */

/* Product page wrapper */
.single-product .woocommerce-wrapper {
    padding: 2rem 0 4rem;
}

/* Main product layout - two columns */
.single-product .product {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
    width: 100%;
    max-width: 100%;
}

@media (min-width: 768px) {
    .single-product .product {
        grid-template-columns: 350px 1fr;
        gap: 2rem;
    }
}

@media (min-width: 1200px) {
    .single-product .product {
        grid-template-columns: 400px 1fr;
        gap: 3rem;
    }
}

/* Product Trust Strip — below Add to Cart */
.product-trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin-top: 1rem;
    padding: 0.875rem 0;
    border-top: 1px solid #333;
}

.product-trust-strip .trust-badge {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #b0b0b0;
    font-size: 0.8rem;
    white-space: nowrap;
}

.product-trust-strip .trust-badge svg {
    width: 16px;
    height: 16px;
    color: var(--color-pink, #dc4f91);
    flex-shrink: 0;
}

/* Delivery Estimate */
.product-delivery-estimate {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(220, 79, 145, 0.08);
    border-left: 3px solid var(--color-pink, #dc4f91);
    color: #ccc;
    font-size: 0.85rem;
    line-height: 1.4;
}

.product-delivery-estimate i,
.product-delivery-estimate svg {
    width: 20px;
    height: 20px;
    color: var(--color-pink, #dc4f91);
    flex-shrink: 0;
}

.product-delivery-estimate strong {
    color: #fff;
}

/* Continue Shopping Link (Cart Page) */
.continue-shopping-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--color-pink, #dc4f91);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.continue-shopping-link:hover {
    text-decoration: underline;
}

@media (max-width: 767px) {
    .product-trust-strip {
        gap: 0.5rem 1rem;
    }

    .product-trust-strip .trust-badge {
        font-size: 0.75rem;
    }
}

/* Product Gallery - Left Column */
.woocommerce-product-gallery {
    opacity: 1 !important;
    width: 100% !important;
    float: none !important;
    max-width: 100%;
}

.woocommerce-product-gallery__wrapper {
    background: rgba(15, 23, 42, 0.5);
    border-radius: 8px;
    /* Don't set width/max-width - FlexSlider needs its inline width to function */
}

.woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
    display: block;
}

.woocommerce-product-gallery__image a {
    display: block;
}

/* Thumbnails */
.flex-control-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0;
    list-style: none;
    max-width: 100%;
    overflow: hidden;
}

.flex-control-thumbs li {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.flex-control-thumbs li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s;
}

.flex-control-thumbs li img:hover,
.flex-control-thumbs li img.flex-active {
    border-color: var(--color-primary);
}

/* Product Summary - Right Column */
.single-product .summary.entry-summary {
    width: 100% !important;
    float: none !important;
    padding: 0;
}

/* Product Title */
.single-product .product_title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

@media (min-width: 768px) {
    .single-product .product_title {
        font-size: 1.75rem;
    }
}

/* Mobile single product adjustments - Dynamic sizing */
@media (max-width: 767px) {
    /* Prevent horizontal overflow on body */
    .single-product {
        overflow-x: hidden;
        width: 100%;
    }

    /* Container uses viewport-relative padding */
    .single-product .woocommerce-wrapper {
        padding: clamp(0.5rem, 3vw, 2rem) 0;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .single-product .product {
        padding: 0 1rem;
        gap: clamp(1rem, 4vw, 2rem);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Ensure container class doesn't overflow */
    .single-product .container {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }

    /* Gallery - constrain to viewport width */
    .woocommerce-product-gallery {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto;
        overflow: hidden !important;
    }

    .woocommerce-product-gallery .flex-viewport {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Don't constrain wrapper width - FlexSlider needs its inline width */
    /* .woocommerce-product-gallery__wrapper width is set by FlexSlider JS */

    /* Don't override FlexSlider's inline width on slides */
    /* .woocommerce-product-gallery__image width is set by FlexSlider JS */

    .woocommerce-product-gallery__image a {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    .woocommerce-product-gallery__image img {
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: contain;
        display: block;
    }

    /* Hide zoom image on mobile - causes overflow */
    .woocommerce-product-gallery .zoomImg {
        display: none !important;
    }

    /* Ensure zoom/lightbox trigger works */
    .woocommerce-product-gallery__trigger {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        z-index: 10;
    }

    /* Thumbnails - constrained width with fixed columns */
    .woocommerce-product-gallery .flex-control-thumbs {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 0.35rem !important;
        width: auto !important;
        max-width: none !important;
        margin: 0.5rem 1rem 0 1rem !important;
        padding: 0 !important;
        overflow: hidden !important;
        list-style: none !important;
        box-sizing: border-box !important;
    }

    .woocommerce-product-gallery .flex-control-thumbs li {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border-radius: 4px;
    }

    .woocommerce-product-gallery .flex-control-thumbs li img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        border-radius: 4px;
    }

    /* Summary section - force viewport width constraint */
    .single-product .summary.entry-summary {
        padding: 0 1rem !important;
        width: calc(100vw - 2rem) !important;
        max-width: calc(100vw - 2rem) !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* Title - fluid typography */
    .single-product .product_title {
        font-size: clamp(1rem, 4.5vw, 1.5rem);
        line-height: 1.3;
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
        max-width: 100%;
    }

    /* Price - fluid sizing */
    .single-product .price {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
    }

    /* Short description */
    .woocommerce-product-details__short-description {
        font-size: clamp(0.813rem, 3.5vw, 0.938rem);
        padding-bottom: clamp(0.75rem, 3vw, 1.5rem);
        margin-bottom: clamp(0.75rem, 3vw, 1.5rem);
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
        max-width: 100%;
    }

    /* All text elements inside summary */
    .single-product .summary.entry-summary * {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Add to cart button */
    .single-product .single_add_to_cart_button {
        width: 100%;
        padding: clamp(0.75rem, 3vw, 1rem) clamp(1rem, 4vw, 1.5rem);
        font-size: clamp(0.875rem, 3.5vw, 1rem);
    }

    /* Quantity input */
    .single-product .quantity {
        width: clamp(80px, 25vw, 120px);
    }

    .single-product .quantity .qty {
        width: 100%;
        padding: clamp(0.5rem, 2vw, 0.75rem);
        font-size: clamp(0.875rem, 3.5vw, 1rem);
    }

    /* Cart form - stack on very small screens */
    .single-product form.cart {
        display: flex;
        flex-wrap: wrap;
        gap: clamp(0.5rem, 2vw, 1rem);
        align-items: stretch;
    }

    /* Product meta */
    .single-product .product_meta {
        font-size: clamp(0.75rem, 3vw, 0.875rem);
    }
}

/* Extra small screens (< 360px) */
@media (max-width: 359px) {
    .single-product .product {
        padding: 0 0.25rem;
    }

    .single-product .product_title {
        font-size: 0.95rem;
    }

    .flex-control-thumbs {
        grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));
    }
}

/* Price */
.single-product .price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-pink);
    margin-bottom: 1rem;
}

.single-product .price del {
    color: var(--color-text-muted);
    font-size: 1rem;
    font-weight: 400;
    margin-right: 0.5rem;
}

.single-product .price ins {
    text-decoration: none;
}

/* Short Description */
.woocommerce-product-details__short-description {
    color: var(--color-text-secondary);
    font-size: 0.938rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.woocommerce-product-details__short-description p {
    margin: 0;
}

/* Stock Status */
.single-product .stock {
    font-size: 0.875rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.single-product .stock.in-stock {
    color: #22c55e;
}

.single-product .stock.in-stock::before {
    content: "";
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
}

.single-product .stock.out-of-stock {
    color: #ef4444;
}

/* Add to Cart Form */
.single-product form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

/* Quantity Input */
.single-product .quantity {
    display: flex;
    align-items: center;
}

.single-product .quantity .qty {
    width: 70px;
    height: 48px;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    background: var(--color-bg-dark);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    -moz-appearance: textfield;
}

.single-product .quantity .qty::-webkit-outer-spin-button,
.single-product .quantity .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.single-product .quantity .qty:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Add to Cart Button */
.single-product .single_add_to_cart_button {
    flex: 0 0 auto;
    min-width: 200px;
    max-width: 300px;
    height: 48px;
    padding: 0 2rem;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, var(--color-pink) 0%, var(--color-orange) 100%);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.single-product .single_add_to_cart_button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4);
}

.single-product .single_add_to_cart_button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Product Meta */
.single-product .product_meta {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.single-product .product_meta > span {
    display: block;
    margin-bottom: 0.5rem;
}

.single-product .product_meta a {
    color: var(--color-primary);
    text-decoration: none;
}

.single-product .product_meta a:hover {
    text-decoration: underline;
}

/* PayPal Pay in 3 Messaging - Brighten text for dark theme */
.ppcp-messages,
.ppcp-messages *,
.single-product .ppcp-messages {
    color: var(--color-text-secondary) !important;
}

/* Target PayPal message container */
[data-pp-message] {
    color: var(--color-text-secondary) !important;
}

/* ==========================================================================
   Product Tabs - Storefront Style
   ========================================================================== */

.woocommerce-tabs {
    grid-column: 1 / -1;
    margin-top: 2rem;
    clear: both;
}

.woocommerce-tabs .tabs.wc-tabs {
    display: flex;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 2px solid var(--color-border);
}

.woocommerce-tabs .tabs.wc-tabs li {
    margin: 0;
}

.woocommerce-tabs .tabs.wc-tabs li a {
    display: block;
    padding: 1rem 1.5rem;
    font-size: 0.938rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}

.woocommerce-tabs .tabs.wc-tabs li a:hover {
    color: var(--color-text-primary);
}

.woocommerce-tabs .tabs.wc-tabs li.active a {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Tab Panels */
.woocommerce-tabs .woocommerce-Tabs-panel {
    padding: 2rem 0;
    color: var(--color-text-secondary);
    font-size: 0.938rem;
    line-height: 1.7;
}

.woocommerce-tabs .woocommerce-Tabs-panel h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
}

/* Additional Information Table */
.woocommerce-product-attributes {
    width: 100%;
    border-collapse: collapse;
}

.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.woocommerce-product-attributes th {
    font-weight: 600;
    color: var(--color-text-primary);
    width: 30%;
}

.woocommerce-product-attributes td p {
    margin: 0;
}

/* Reviews */
.woocommerce-Reviews #comments {
    margin-bottom: 2rem;
}

.woocommerce-Reviews .woocommerce-Reviews-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

/* Review Form */
#review_form_wrapper {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.5rem;
}

.comment-form label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea,
.comment-form select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.938rem;
    color: var(--color-text-primary);
    background: var(--color-bg-dark);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    margin-bottom: 1rem;
}

.comment-form input:focus,
.comment-form textarea:focus,
.comment-form select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.comment-form .submit {
    padding: 0.75rem 2rem;
    font-size: 0.938rem;
    font-weight: 600;
    color: white;
    background: var(--gradient-button);
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.2s;
}

.comment-form .submit:hover {
    background: var(--color-pink);
}

/* Rating Select */
.comment-form-rating select {
    width: auto;
    padding: 0.5rem 1rem;
}

/* ==========================================================================
   Related Products
   ========================================================================== */

.single-product .related.products {
    grid-column: 1 / -1;
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1px solid var(--color-border);
}

.single-product .related.products > h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 1.5rem;
}

.single-product .related.products .products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .single-product .related.products .products {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Related Products - Card Layout Fixes */
.single-product .related.products .product-card-horizontal {
    flex-direction: column;
    padding: 0;
}

.single-product .related.products .product-image-section {
    width: 100%;
    aspect-ratio: 1;
}

.single-product .related.products .product-details-section {
    padding: 1rem;
}

.single-product .related.products .product-details-section .product-brand {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(15, 23, 42, 0.9);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    z-index: 5;
}

.single-product .related.products .product-actions-section {
    flex-direction: row;
    width: 100%;
    padding: 0 1rem 1rem 1rem;
    gap: 0.5rem;
}

.single-product .related.products .product-actions-section .btn {
    flex: 1;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
}

.single-product .related.products .product-actions-section .btn-icon {
    width: 0.875rem;
    height: 0.875rem;
    margin-right: 0.25rem;
}

/* ========================================
   STICKY ADD TO CART BAR (Mobile)
   ======================================== */

.sticky-atc {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--color-bg-dark, #101010);
    border-top: 1px solid var(--color-border-dark, #333);
    padding: 0.75rem 1rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    display: none;
}

.sticky-atc--visible {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .sticky-atc {
        display: block;
    }
}

.sticky-atc__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: var(--container-max-width, 1400px);
    margin: 0 auto;
}

.sticky-atc__info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.sticky-atc__price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary, #dc4f91);
}

.sticky-atc__price del {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-text-muted-light, #b0b0b0);
}

.sticky-atc__price ins {
    text-decoration: none;
}

.sticky-atc__stock {
    font-size: 0.75rem;
    color: var(--color-success, #22c55e);
    font-weight: 500;
}

.sticky-atc__btn {
    flex-shrink: 0;
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    gap: 0.5rem;
}

.sticky-atc__btn svg,
.sticky-atc__btn i {
    width: 1.125rem;
    height: 1.125rem;
}

/* ========================================
   SEARCH BUTTON STYLING
   ======================================== */

/* Search input field */
.wp-block-search__input,
.widget_search input[type="search"],
.search-field {
    background: rgba(30, 41, 59, 0.8) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    color: var(--color-text-primary) !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
    transition: all var(--transition-normal) !important;
}

.wp-block-search__input:focus,
.widget_search input[type="search"]:focus,
.search-field:focus {
    outline: none !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.2) !important;
}

.wp-block-search__input::placeholder,
.widget_search input[type="search"]::placeholder,
.search-field::placeholder {
    color: var(--color-text-muted) !important;
}

/* Search button */
.wp-block-search__button,
.wp-block-search__button.wp-element-button,
.widget_search button[type="submit"],
.search-submit,
button.wp-element-button[type="submit"] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;
    background-color: var(--color-primary) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    color: white !important;
    padding: 0.75rem 1.25rem !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    cursor: pointer !important;
    transition: all var(--transition-normal) !important;
    text-transform: none !important;
}

.wp-block-search__button:hover,
.wp-block-search__button.wp-element-button:hover,
.widget_search button[type="submit"]:hover,
.search-submit:hover,
button.wp-element-button[type="submit"]:hover {
    background: linear-gradient(135deg, var(--color-secondary), var(--color-primary)) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3) !important;
}

.wp-block-search__button:active,
.wp-block-search__button.wp-element-button:active,
.widget_search button[type="submit"]:active,
.search-submit:active,
button.wp-element-button[type="submit"]:active {
    transform: translateY(0) !important;
}

/* Search form container */
.wp-block-search {
    display: flex !important;
    gap: 0.5rem !important;
}

.wp-block-search__inside-wrapper {
    display: flex !important;
    gap: 0.5rem !important;
    width: 100% !important;
}

/* ========================================
   SHOP SEARCH FORM (Above Results)
   ======================================== */

.shop-search-form {
    padding: 0 1rem;
}

.shop-search-form .search-form {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
}

.shop-search-form .search-input {
    flex: 1;
    padding: 0.875rem 1.25rem;
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid #475569;
    border-radius: 0.5rem;
    color: #f8fafc;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.shop-search-form .search-input:focus {
    outline: none;
    border-color: #ec4899;
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.2);
}

.shop-search-form .search-input::placeholder {
    color: #94a3b8;
}

.shop-search-form .search-btn {
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, #ec4899, #db2777);
    border: none;
    border-radius: 0.5rem;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.shop-search-form .search-btn:hover {
    background: linear-gradient(135deg, #db2777, #ec4899);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

.shop-search-form .search-btn:active {
    transform: translateY(0);
}

/* ========================================
   HEADER SEARCH FORM (Always Visible)
   ======================================== */

.header-search-form {
    display: flex;
    align-items: center;
}

.header-search-wrapper {
    display: flex;
    align-items: center;
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid #475569;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: all 0.2s ease;
}

.header-search-wrapper:focus-within {
    border-color: #ec4899;
    box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.2);
}

.header-search-input {
    width: 180px;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: none;
    color: #f8fafc;
    font-size: 0.875rem;
    outline: none;
}

.header-search-input::placeholder {
    color: #94a3b8;
}

.header-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, #ec4899, #db2777);
    border: none;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.header-search-btn:hover {
    background: linear-gradient(135deg, #db2777, #ec4899);
}

.header-search-btn svg,
.header-search-btn i {
    width: 18px;
    height: 18px;
}

/* Responsive - hide on smaller screens, show icon only */
@media (max-width: 1024px) {
    .header-search-input {
        width: 140px;
    }
}

@media (max-width: 768px) {
    .header-search-form {
        display: none;
    }
}

/* Mobile Search Toggle Button */
.mobile-search-toggle {
    display: none;
}

@media (max-width: 768px) {
    .mobile-search-toggle {
        display: flex;
    }
}

/* Mobile Search Overlay */
.mobile-search-overlay {
    display: none;
    background: #1a1a1a;
    border-top: 1px solid #333;
    padding: 0.75rem 0;
}

.mobile-search-overlay.active {
    display: block;
}

.mobile-search-form {
    display: flex;
    gap: 0.5rem;
}

.mobile-search-input {
    flex: 1;
    background: #0d0d0d;
    border: 1px solid #333;
    color: #fff;
    padding: 0.625rem 1rem;
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
}

.mobile-search-input:focus {
    border-color: var(--color-pink, #dc4f91);
}

.mobile-search-input::placeholder {
    color: #666;
}

.mobile-search-submit {
    background: var(--color-pink, #dc4f91);
    border: none;
    color: #fff;
    padding: 0.625rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-search-submit svg,
.mobile-search-submit i {
    width: 18px;
    height: 18px;
}

.mobile-search-submit:hover {
    background: #c44080;
}

/* ========================================
   PRODUCT CAROUSEL
   ======================================== */

.product-carousel-container {
    position: relative;
    padding: 0 50px;
}

.product-carousel {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 1rem 0;
}

.product-carousel::-webkit-scrollbar {
    display: none;
}

.carousel-item {
    flex: 0 0 280px;
    scroll-snap-align: start;
}

.carousel-product-card {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.carousel-product-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary);
    box-shadow: 0 12px 40px rgba(236, 72, 153, 0.15);
}

.carousel-product-image {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.5);
}

.carousel-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

.carousel-product-image .stock-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    background: rgba(34, 197, 94, 0.9);
    color: white;
}

.carousel-product-info {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.carousel-product-brand {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.carousel-product-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.carousel-product-title a {
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.carousel-product-title a:hover {
    color: var(--color-primary);
}

.carousel-product-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 1rem;
    margin-top: auto;
}

.carousel-product-price del {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-weight: 400;
}

.carousel-product-price ins {
    text-decoration: none;
}

/* Carousel Navigation Buttons */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(30, 41, 59, 0.9);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.carousel-btn:hover {
    background: linear-gradient(135deg, #ec4899, #db2777);
    border-color: transparent;
}

.carousel-btn-prev {
    left: 0;
}

.carousel-btn-next {
    right: 0;
}

.carousel-btn svg,
.carousel-btn i {
    width: 24px;
    height: 24px;
}

/* Responsive */
@media (max-width: 768px) {
    .product-carousel-container {
        padding: 0 40px;
    }

    .carousel-item {
        flex: 0 0 240px;
    }

    .carousel-btn {
        width: 44px;
        height: 44px;
    }

    .carousel-btn svg,
    .carousel-btn i {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 480px) {
    .product-carousel-container {
        padding: 0;
    }

    .carousel-item {
        flex: 0 0 85%;
    }

    .carousel-btn {
        display: none;
    }
}

/* ==========================================================================
   CHECKOUT PAGE - Custom Layout
   ========================================================================== */

/* Override parent constraints on checkout page */
.woocommerce-checkout .page-content,
.woocommerce-checkout article.page-content,
body.woocommerce-checkout .page-content {
    max-width: 1400px !important;
    width: 100% !important;
}

.woocommerce-checkout .entry-content {
    max-width: 100% !important;
    width: 100% !important;
}

/* Remove max-width constraint on checkout wrapper - 20% wider */
.wp-block-woocommerce-checkout {
    max-width: 1400px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
}

/* Force side-by-side layout on desktop */
.wc-block-checkout {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 1.5rem !important;
    align-items: flex-start !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Main checkout form - fixed width, centered content */
.wc-block-checkout__main {
    flex: 0 0 605px !important;
    width: 605px !important;
    min-width: 605px !important;
    max-width: 605px !important;
    padding: 1.5rem !important;
    margin-top: 0 !important;
}

/* Checkout steps - centered padding */
.wc-block-components-checkout-step {
    padding: 0.5rem 1rem !important;
}

/* Reduce spacing above contact info */
.wc-block-checkout__main > .wc-block-components-checkout-step:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Inner form containers - full width */
.wc-block-checkout__main > *,
.wc-block-checkout__main .wc-block-checkout__form,
.wc-block-checkout__main .wc-block-components-form {
    width: 100% !important;
    max-width: 100% !important;
}

/* Order summary sidebar - expands to fill remaining space, aligned top */
.wc-block-checkout__sidebar {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 400px !important;
    max-width: none !important;
    position: sticky !important;
    top: 100px !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ==========================================================================
   ADD A NOTE CHECKBOX - Styled
   ========================================================================== */

/* Checkbox container */
.wc-block-components-checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    cursor: pointer !important;
}

/* Custom checkbox styling */
.wc-block-components-checkbox__input {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid var(--color-border, #4b5563) !important;
    border-radius: 4px !important;
    background: transparent !important;
    cursor: pointer !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

.wc-block-components-checkbox__input:checked {
    background: var(--color-pink, #ec4899) !important;
    border-color: var(--color-pink, #ec4899) !important;
}

/* Hide any default/WooCommerce checkmark icons */
.wc-block-components-checkbox__input:checked::before,
.wc-block-components-checkbox__mark,
.wc-block-components-checkbox svg,
.wc-block-components-checkbox__input + svg,
.wc-block-components-checkbox__input ~ svg {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Custom single checkmark */
.wc-block-components-checkbox__input:checked::after {
    content: '✓' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: bold !important;
    line-height: 1 !important;
}

.wc-block-components-checkbox__input:hover {
    border-color: var(--color-pink, #ec4899) !important;
}

/* Checkbox label */
.wc-block-components-checkbox__label {
    color: var(--color-text-secondary, #9ca3af) !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
}

/* Contact information - full width email field */
.wc-block-checkout__contact-fields,
.wc-block-checkout__contact-fields .wc-block-components-text-input,
.wc-block-checkout__contact-fields input:not([type="checkbox"]) {
    width: 100% !important;
    max-width: 100% !important;
}

/* Billing address form - full width */
.wc-block-checkout__billing-fields,
.wc-block-checkout__billing-fields .wc-block-components-address-form {
    width: 100% !important;
    max-width: 100% !important;
}

/* Address form flex layout - one field per row except names */
.wc-block-components-address-form {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    width: 100% !important;
}

/* All address fields full width by default */
.wc-block-components-address-form > div {
    width: 100% !important;
    flex: 0 0 100% !important;
}

/* Name fields side by side */
.wc-block-components-address-form > div[class*="first_name"],
.wc-block-components-address-form > div[class*="last_name"] {
    width: calc(50% - 0.5rem) !important;
    flex: 0 0 calc(50% - 0.5rem) !important;
}

/* Mobile/tablet - stack vertically, full width */
@media (max-width: 1024px) {
    /* Remove excessive padding from checkout container */
    .wp-block-woocommerce-checkout {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .wc-block-checkout {
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }

    .wc-block-checkout__main,
    .wc-block-components-main {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        padding: 0.5rem !important;
    }

    .wc-block-checkout__sidebar {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        top: auto !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
    }

    /* Hide the TOP order summary (in main form area) - keep only sidebar one */
    .checkout-order-summary-block-fill-wrapper,
    .checkout-order-summary-block-fill {
        display: none !important;
    }

    /* Show order summary always expanded on mobile - no collapsible panel */
    /* Hide the collapsible title/button */
    .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title {
        display: none !important;
    }

    /* Show content always - override WooCommerce JS hiding */
    .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__content {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Add a title for order summary section */
    .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block::before {
        content: "Order Summary";
        display: block;
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--color-text-primary);
        padding-bottom: 0.75rem;
        margin-bottom: 0.75rem;
        border-bottom: 1px solid var(--color-border);
    }

    /* Order summary container - full width on mobile */
    .wc-block-components-order-summary {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .wc-block-components-order-summary__content {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Order summary wrapper blocks - full width */
    .wp-block-woocommerce-checkout-order-summary-block,
    .checkout-order-summary-block-fill,
    .wp-block-woocommerce-checkout-order-summary-cart-items-block {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Checkout form - reduce padding */
    .wc-block-checkout__form {
        padding: 0 !important;
    }

    /* Mobile: SHOW order summary items with cart-like styling */
    .wc-block-components-order-summary-item {
        display: grid !important;
        grid-template-columns: 60px 1fr 75px !important;
        gap: 0.5rem 0.75rem !important;
        padding: 0.75rem 0 !important;
        border-bottom: 1px solid rgba(51, 65, 85, 0.3) !important;
        width: 100% !important;
        align-items: start !important;
    }

    .wc-block-components-order-summary-item:last-child {
        border-bottom: none !important;
    }

    /* Order summary image - same as cart, no shadow */
    .wc-block-components-order-summary-item__image {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 60px !important;
        height: 60px !important;
        border-radius: 6px;
        overflow: hidden;
        background: transparent !important;
        box-shadow: none !important;
    }

    .wc-block-components-order-summary-item__image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
        box-shadow: none !important;
        filter: none !important;
    }

    /* Hide quantity badge on image */
    .wc-block-components-order-summary-item__quantity {
        display: none !important;
    }

    /* Product description - title area - takes middle column */
    .wc-block-components-order-summary-item__description {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        width: 100% !important;
        padding: 0 !important;
        display: block !important;
    }

    /* Product name styling - match cart (cyan color like cart titles) */
    .wc-block-components-order-summary-item__description h3,
    .wc-block-components-order-summary-item__description .wc-block-components-product-name,
    .wc-block-components-order-summary-item .wc-block-components-product-name {
        font-size: 0.8rem !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin: 0 !important;
        color: var(--color-primary) !important;
        max-width: 100% !important;
    }

    /* Total price - right side */
    .wc-block-components-order-summary-item__total-price {
        grid-column: 3 !important;
        grid-row: 1 !important;
        text-align: right !important;
        margin: 0 !important;
        white-space: nowrap;
    }

    .wc-block-components-order-summary-item__total-price .wc-block-components-product-price,
    .wc-block-components-order-summary-item__total-price .wc-block-formatted-money-amount {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        color: var(--color-pink) !important;
    }

    /* Hide individual prices and metadata */
    .wc-block-components-order-summary-item__individual-prices,
    .wc-block-components-order-summary-item .wc-block-components-product-metadata {
        display: none !important;
    }

    /* Hide screen reader text from layout */
    .wc-block-components-order-summary-item > .screen-reader-text {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0,0,0,0) !important;
    }

    /* Show order summary content */
    .wc-block-components-order-summary__content {
        display: block !important;
    }

    /* Keep totals visible on mobile */
    .wc-block-components-totals-wrapper,
    .wc-block-components-totals-footer-item {
        display: block !important;
    }
}

/* ==========================================================================
   ORDER SUMMARY - Clean Display (Name, SKU, Price, Image only)
   ========================================================================== */

/* Order summary item layout - tight spacing between image and title */
.wc-block-components-order-summary-item {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
}

.wc-block-components-order-summary-item:last-child {
    border-bottom: none;
}

/* Product image in order summary */
.wc-block-components-order-summary-item__image {
    flex-shrink: 0;
    width: 80px !important;
    height: 80px !important;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.5);
}

.wc-block-components-order-summary-item__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Product description area - wider for product titles (DESKTOP ONLY) */
@media (min-width: 769px) {
    .wc-block-components-order-summary-item__description {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 100px) !important;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
}

/* Product name - clean display, better wrapping */
.wc-block-components-order-summary-item__product-name,
.wc-block-components-product-name {
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.4;
    margin: 0;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Hide quantity badge on image */
.wc-block-components-order-summary-item__quantity {
    display: none !important;
}

/* Hide individual prices (we show total price) */
.wc-block-components-order-summary-item__individual-prices {
    display: none !important;
}

/* Hide duplicate title price */
.wc-block-components-checkout-order-summary__title-price {
    display: none !important;
}

/* Hide product metadata/description (specs text) - keep only name, SKU, price, image */
.wc-block-components-product-metadata,
.wc-block-components-order-summary-item__product-metadata {
    display: none !important;
}

/* Show SKU in order summary */
.wc-block-components-order-summary-item__description::after {
    content: attr(data-sku);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* Product total price */
.wc-block-components-order-summary-item__total-price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-pink);
    margin-top: 0.5rem;
}

.wc-block-components-order-summary-item__total-price .wc-block-components-product-price {
    color: var(--color-pink);
}

/* Order summary header */
.wc-block-components-order-summary .wc-block-components-panel__button {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    padding: 1rem 0;
}

/* Order summary totals section */
.wc-block-components-totals-wrapper {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.wc-block-components-totals-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
}

.wc-block-components-totals-item__label {
    color: var(--color-text-secondary);
}

.wc-block-components-totals-item__value {
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Grand total styling */
.wc-block-components-totals-footer-item {
    padding: 1rem 0;
    margin-top: 0.5rem;
    border-top: 2px solid var(--color-border);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-pink);
}

/* ==========================================================================
   Shop Page - Old Design Layout (Sidebar + Main Content)
   ========================================================================== */

/* Main shop container */
.shop-main {
    padding-top: 6rem;
}

/* Breadcrumb */
.shop-breadcrumb {
    padding: 1rem 0;
    background: transparent;
}

.shop-breadcrumb .woocommerce-breadcrumb {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.shop-breadcrumb .woocommerce-breadcrumb a {
    color: var(--color-text-secondary);
    text-decoration: none;
}

.shop-breadcrumb .woocommerce-breadcrumb a:hover {
    color: var(--color-pink);
}

/* Shop Layout - Sidebar + Main */
.shop-content {
    padding: 1rem 0 4rem;
    background: rgba(15, 23, 42, 0.5);
}

.shop-layout {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

/* Sidebar - Desktop styles (mobile handled by off-canvas styles earlier) */
.shop-sidebar {
    width: 280px;
    flex-shrink: 0;
    background: rgba(30, 41, 59, 0.6);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

@media (min-width: 1024px) {
    .shop-sidebar {
        display: block;
    }
}

@media (max-width: 1023px) {
    .shop-layout {
        flex-direction: column;
    }
}

/* Sidebar Sections */
.sidebar-section {
    padding: 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.sidebar-section:last-child {
    border-bottom: none;
}

.sidebar-title {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 1rem 0;
}

/* Category List in Sidebar */
.category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-item {
    margin-bottom: 0.25rem;
}

.category-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.75rem;
    color: var(--color-pink);
    text-decoration: none;
    font-size: 0.9rem;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
}

.category-item a:hover {
    background: rgba(236, 72, 153, 0.1);
}

.category-item.active a {
    color: var(--color-pink);
    font-weight: 500;
}

.category-arrow {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    transition: transform 0.15s ease;
}

.category-item a:hover .category-arrow {
    transform: translateX(3px);
    color: var(--color-pink);
}

/* Filter Blocks */
.filter-block {
    margin-bottom: 1.25rem;
}

.filter-block:last-of-type {
    margin-bottom: 0;
}

.filter-title {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0 0 0.75rem 0;
}

/* Price Filter in Sidebar */
.price-filter {
    padding: 0.5rem 0;
}

.price-slider-wrapper {
    position: relative;
    height: 40px;
    margin-bottom: 0.5rem;
}

/* Track background - gray base */
.price-slider-wrapper::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--color-border);
    border-radius: 3px;
    transform: translateY(-50%);
    pointer-events: none;
}

.price-range-input {
    position: absolute;
    width: 100%;
    height: 6px;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    border: none !important;
    outline: none !important;
}

/* Hide the track completely - we use ::before for track */
.price-range-input::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent;
    border-radius: 3px;
}

/* Both thumbs identical styling */
.price-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--color-pink);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    border: 3px solid white;
    margin-top: -7px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.price-range-input::-moz-range-track {
    height: 6px;
    background: transparent;
    border-radius: 3px;
}

.price-range-input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--color-pink);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.price-values {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-top: 0.25rem;
}

/* Filter Checkbox List */
.filter-checkbox-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.filter-checkbox-list li {
    margin-bottom: 0.5rem;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--color-text-primary);
    min-height: 44px;
    padding: 0.5rem 0;
}

.filter-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    accent-color: var(--color-pink);
}

.filter-checkbox .count {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    margin-left: auto;
}

.filter-note {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-style: italic;
}

/* Collapsible Filter Sections */
.filter-block-collapsible {
    border-top: 1px solid var(--color-border);
    padding-top: 0.75rem;
    margin-top: 0.75rem;
}

.filter-title-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.filter-title-toggle:hover {
    color: var(--color-pink);
}

.toggle-icon {
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--color-text-muted);
    transition: color 0.15s ease;
}

.filter-title-toggle:hover .toggle-icon {
    color: var(--color-pink);
}

.filter-list-collapsible {
    margin-top: 0.75rem;
    max-height: 300px;
    overflow-y: auto;
}

/* Scrollbar styling for filter lists */
.filter-list-collapsible::-webkit-scrollbar {
    width: 6px;
}

.filter-list-collapsible::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
    border-radius: 3px;
}

.filter-list-collapsible::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}

.filter-list-collapsible::-webkit-scrollbar-thumb:hover {
    background: var(--color-pink);
}

/* Apply Filters Button */
.apply-filters-btn {
    width: 100%;
    padding: 0.75rem 1.5rem;
    margin-top: 1rem;
    background: var(--gradient-button, linear-gradient(to right, #ec4899, #db2777));
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.apply-filters-btn:hover {
    background: var(--gradient-button-hover, linear-gradient(to right, #db2777, #be185d));
    transform: translateY(-1px);
}

/* Filters Header with Clear Link */
.filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.filters-header .sidebar-title {
    margin: 0;
}

.clear-filters-link {
    font-size: 0.8rem;
    color: var(--color-pink);
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
}

.clear-filters-link:hover {
    background: rgba(236, 72, 153, 0.15);
    text-decoration: underline;
}

/* Disabled Filter Checkbox */
.filter-checkbox.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.filter-checkbox.disabled input[type="checkbox"] {
    cursor: not-allowed;
}

.filter-checkbox.disabled .checkmark {
    background: var(--color-border);
}

/* Loading State */
body.filters-loading {
    cursor: wait;
}

/* Keep sidebar fully visible during loading - only dim products */
body.filters-loading .shop-sidebar {
    opacity: 1;
    pointer-events: auto;
}

body.filters-loading .shop-products-main {
    opacity: 0.5;
}

/* Main Products Area */
.shop-products-main {
    flex: 1;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.shop-page-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 1.5rem 0;
}

/* Horizontal Category Buttons Row */
.category-buttons-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.category-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-primary);
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all 0.2s ease;
}

.category-btn:hover {
    background: rgba(236, 72, 153, 0.15);
    border-color: var(--color-pink);
    color: var(--color-pink);
}

.category-btn.active {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

/* Shop Toolbar */
.shop-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    background: rgba(30, 41, 59, 0.5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sort-label {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.toolbar-center {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.view-label {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-right: 0.25rem;
}

.view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.view-btn:hover {
    border-color: var(--color-pink);
    color: var(--color-pink);
}

.view-btn.active {
    background: var(--color-pink);
    border-color: var(--color-pink);
    color: white;
}

/* WooCommerce ordering dropdown in toolbar */
.shop-toolbar .woocommerce-ordering {
    margin: 0;
}

.shop-toolbar .woocommerce-ordering select,
.shop-toolbar select.orderby {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}

.shop-toolbar .woocommerce-ordering select:focus,
.shop-toolbar select.orderby:focus {
    outline: none;
    border-color: var(--color-pink);
}

/* Products List View (default) */
.products-list-view {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Products Grid View */
.products-list.products-grid-view {
    display: grid !important;
    flex-direction: unset !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    width: 100%;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .shop-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-left,
    .toolbar-center,
    .toolbar-right {
        justify-content: center;
    }

    .category-buttons-row {
        justify-content: center;
    }

    .shop-page-title {
        text-align: center;
    }

    /* Product cards mobile - full width */
    .product-card-horizontal {
        padding: 0.75rem;
    }

    .product-image-section {
        width: 100%;
        height: 180px;
    }

    /* Grid view mobile - 2 columns on tablets, 1 on phones */
    .products-list.products-grid-view {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 0.75rem;
    }
}

/* Extra small screens */
@media (max-width: 400px) {
    .products-list.products-grid-view {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Single Product Mobile Fixes - Version #v015
   ========================================================================== */

@media (max-width: 767px) {
    /* Gallery centering */
    .single-product .woocommerce-product-gallery {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto;
    }

    .single-product .woocommerce-product-gallery .flex-viewport {
        width: 100% !important;
        max-width: calc(100vw - 2rem) !important;
        margin: 0 auto;
    }

    /* Don't constrain wrapper width - FlexSlider sets it via JS for slide animation */

    /* Don't override FlexSlider's inline styles on gallery slides */
    /* FlexSlider sets width, float, display on each slide via JS */

    .single-product .woocommerce-product-gallery__image img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Thumbnails centering */
    .single-product .woocommerce-product-gallery .flex-control-thumbs {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        margin: 0.75rem auto 0 !important;
        padding: 0 1rem !important;
        width: 100% !important;
        max-width: calc(100vw - 2rem) !important;
    }

    .single-product .woocommerce-product-gallery .flex-control-thumbs li {
        flex: 0 0 auto !important;
        width: 50px !important;
        height: 50px !important;
        margin: 0 !important;
    }

    /* Tabs - horizontal scroll if needed, or wrap */
    .woocommerce-tabs .tabs.wc-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 2px;
    }

    .woocommerce-tabs .tabs.wc-tabs::-webkit-scrollbar {
        display: none;
    }

    .woocommerce-tabs .tabs.wc-tabs li {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .woocommerce-tabs .tabs.wc-tabs li a {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }

    /* Tab panels - constrain width */
    .woocommerce-tabs .woocommerce-Tabs-panel {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem 0;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    /* Specs table - responsive table layout */
    .woocommerce-Tabs-panel .spec-table,
    .woocommerce-Tabs-panel .product-specifications table,
    .woocommerce-Tabs-panel table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse;
        margin: 1rem 0 !important;
    }

    .woocommerce-Tabs-panel .spec-table th,
    .woocommerce-Tabs-panel .spec-table td,
    .woocommerce-Tabs-panel table th,
    .woocommerce-Tabs-panel table td {
        padding: 0.5rem !important;
        font-size: 0.813rem !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }

    /* Two column layout - 40% / 60% */
    .woocommerce-Tabs-panel .spec-table th[scope="row"],
    .woocommerce-Tabs-panel table th:first-child {
        width: 35% !important;
    }

    .woocommerce-Tabs-panel .spec-table td,
    .woocommerce-Tabs-panel table td:last-child {
        width: 65% !important;
    }

    /* Description text wrapping */
    .woocommerce-Tabs-panel p,
    .woocommerce-Tabs-panel li,
    .woocommerce-Tabs-panel span {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        max-width: 100% !important;
    }

    .woocommerce-Tabs-panel h2 {
        font-size: 1.125rem !important;
        word-wrap: break-word;
    }

    /* Product specifications div */
    .product-specifications {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Additional information table */
    .woocommerce-product-attributes {
        width: 100% !important;
        table-layout: fixed !important;
    }

    .woocommerce-product-attributes th,
    .woocommerce-product-attributes td {
        padding: 0.5rem !important;
        font-size: 0.813rem !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .woocommerce-product-attributes th {
        width: 35% !important;
    }

    /* Caption styling */
    .woocommerce-Tabs-panel caption,
    .spec-table caption {
        font-size: 0.938rem !important;
        padding: 0.5rem 0 !important;
        text-align: left !important;
    }

    /* Main product container - full width */
    .single-product .product {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        padding: 0 1rem;
        box-sizing: border-box;
    }

    /* Woocommerce tabs full width */
    .woocommerce-tabs {
        width: 100% !important;
        max-width: calc(100vw - 2rem) !important;
        margin-left: auto;
        margin-right: auto;
        padding: 0;
        box-sizing: border-box;
    }

    /* Related products */
    .single-product .related.products {
        width: 100% !important;
        max-width: calc(100vw - 2rem) !important;
        padding: 0;
    }

    .single-product .related.products .products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
}

/* Extra small screens - single product */
@media (max-width: 400px) {
    /* Stack specs table if needed */
    .woocommerce-Tabs-panel .spec-table,
    .woocommerce-Tabs-panel table {
        font-size: 0.75rem !important;
    }

    .woocommerce-Tabs-panel .spec-table th,
    .woocommerce-Tabs-panel .spec-table td,
    .woocommerce-Tabs-panel table th,
    .woocommerce-Tabs-panel table td {
        padding: 0.375rem !important;
        font-size: 0.75rem !important;
    }

    /* Thumbnails smaller */
    .single-product .woocommerce-product-gallery .flex-control-thumbs li {
        width: 40px !important;
        height: 40px !important;
    }

    /* Related products - single column */
    .single-product .related.products .products {
        grid-template-columns: 1fr !important;
    }
}

/* Trustpilot Link Styles */
.trustpilot-link:hover {
    background: rgba(0, 182, 122, 0.2) !important;
    border-color: rgba(0, 182, 122, 0.5) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 182, 122, 0.2);
}

@media (max-width: 767px) {
    .trustpilot-link {
        flex-direction: column;
        gap: 0.5rem !important;
        padding: 1rem 1.5rem !important;
    }
}

/* ============================================
   Cart Item Title Formatting Fix - 2026-01-11
   Ensures product titles display horizontally
   Using !important to override existing rules
   ============================================ */
table.wc-block-cart-items tbody {
    display: block !important;
    width: 100% !important;
}

.wc-block-cart-items__row {
    display: flex !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
}

.wc-block-cart-item__image {
    flex: 0 0 80px !important;
    width: 80px !important;
}

.wc-block-cart-item__product {
    flex: 1 1 auto !important;
    min-width: 200px !important;
}

.wc-block-cart-item__wrap {
    width: 100% !important;
}

.wc-block-components-product-name {
    width: 100% !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

/* ============================================
   Checkout Checkbox & Radio Button Fix - 2026-01-11
   Standardizes styling for form controls on checkout
   ============================================ */

/* Fix checkout checkboxes - newsletter and account creation */
.wc-block-components-checkbox label {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
}

.wc-block-components-checkbox .wc-block-components-checkbox__input {
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    border-radius: 4px !important;
    border: 2px solid #4b5563 !important;
    background: transparent !important;
    cursor: pointer !important;
    position: relative !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.wc-block-components-checkbox .wc-block-components-checkbox__input:checked {
    background: #ec4899 !important;
    border-color: #ec4899 !important;
}

.wc-block-components-checkbox .wc-block-components-checkbox__input:checked::after {
    content: '✓' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: bold !important;
}

.wc-block-components-checkbox .wc-block-components-checkbox__input:hover {
    border-color: #ec4899 !important;
}

.wc-block-components-checkbox .wc-block-components-checkbox__label {
    flex: 1 1 auto !important;
    color: #9ca3af !important;
    font-size: 0.9rem !important;
}

/* Hide default SVG checkmark */
.wc-block-components-checkbox__mark {
    display: none !important;
}

/* Radio buttons - shipping and payment options */
/* NOTE: Shipping/payment radios are now hidden via card-based selection (see below) */
/* This only applies to other radio inputs NOT in shipping/payment sections */
.wc-block-components-radio-control__input:not([name*="radio-control-0"]):not([value*="ppcp"]):not([value*="klarna"]):not([value*="worldpay"]):not([value*="free_shipping"]) {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    flex: 0 0 20px !important;
    border: 2px solid #4b5563 !important;
    border-radius: 50% !important;
    background: transparent !important;
    cursor: pointer !important;
    position: relative !important;
}

.wc-block-components-radio-control__input:not([name*="radio-control-0"]):not([value*="ppcp"]):not([value*="klarna"]):not([value*="worldpay"]):not([value*="free_shipping"]):checked {
    border-color: #ec4899 !important;
}

.wc-block-components-radio-control__input:not([name*="radio-control-0"]):not([value*="ppcp"]):not([value*="klarna"]):not([value*="worldpay"]):not([value*="free_shipping"]):checked::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 10px !important;
    height: 10px !important;
    background: #ec4899 !important;
    border-radius: 50% !important;
}

.wc-block-components-radio-control__input:not([name*="radio-control-0"]):not([value*="ppcp"]):not([value*="klarna"]):not([value*="worldpay"]):not([value*="free_shipping"]):hover {
    border-color: #ec4899 !important;
}

/* Specific override for checkboxes in contact fields - higher specificity */
.wc-block-checkout__contact-fields .wc-block-components-checkbox .wc-block-components-checkbox__input,
.wc-block-checkout__contact-fields .wc-block-components-checkbox__input[type="checkbox"],
.wc-block-checkout__contact-fields input[type="checkbox"] {
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
}

/* ==========================================================================
   CHECKOUT CARD-BASED SELECTION STYLING
   Added: 2026-01-11
   ========================================================================== */

/* 1. Hide radio inputs in shipping and payment options */
/* Using attribute selectors for highest specificity */
.wc-block-components-radio-control__input[value*="free_shipping"],
.wc-block-components-radio-control__input[value="ppcp-gateway"],
.wc-block-components-radio-control__input[value="klarna_payments"],
.wc-block-components-radio-control__input[value="access_worldpay_checkout"],
.wc-block-components-radio-control__input[name="radio-control-0"],
input.wc-block-components-radio-control__input[type="radio"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* 2. Card-based selection - base styles */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control .wc-block-components-radio-control__option,
.wc-block-checkout__payment-method .wc-block-components-radio-control .wc-block-components-radio-control__option {
    border: 2px solid #334155 !important;
    border-radius: 8px !important;
    padding: 20px 24px !important;
    margin-bottom: 12px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    background: #1e293b !important;
}

/* 3. Card hover state */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control .wc-block-components-radio-control__option:hover,
.wc-block-checkout__payment-method .wc-block-components-radio-control .wc-block-components-radio-control__option:hover {
    border-color: #64748b !important;
    background: #263449 !important;
}

/* 4. Card selected state - pink border with glow */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control .wc-block-components-radio-control__option-checked,
.wc-block-components-shipping-rates-control .wc-block-components-radio-control .wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-checkout__payment-method .wc-block-components-radio-control .wc-block-components-radio-control__option-checked,
.wc-block-checkout__payment-method .wc-block-components-radio-control .wc-block-components-radio-control__option--checked-option-highlighted {
    border-color: #ec4899 !important;
    box-shadow: 0 0 0 1px #ec4899, 0 0 16px rgba(236, 72, 153, 0.25) !important;
    background: #1e293b !important;
}

/* 5. Fix option layout - make it horizontal */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option-layout,
.wc-block-checkout__payment-method .wc-block-components-radio-control__option-layout {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

/* 6. Hide PayPal from payment options (already in Express Checkout) */
.wc-block-checkout__payment-method .wc-block-components-radio-control__option:has(input[value="ppcp-gateway"]) {
    display: none !important;
}

/* Fallback for browsers without :has() - hide by PayPal text */
.wc-block-checkout__payment-method .wc-block-components-radio-control__option[class*="ppcp"],
.wc-block-checkout__payment-method label[for*="ppcp-gateway"] {
    display: none !important;
}

/* ==========================================================================
   PRODUCT PAGE PAYMENT BUTTONS
   Align Klarna Express Checkout width with PayPal buttons
   ========================================================================== */

/* Klarna Express Checkout button - match PayPal button width */
.single-product #kec-pay-button {
    max-width: 750px !important;
    margin-bottom: 15px !important;
}

/* Ensure PayPal buttons also have consistent max-width */
.single-product .ppc-button-wrapper {
    max-width: 750px !important;
}

/* ==========================================================================
   PAYMENT LOGO ENLARGEMENT
   ========================================================================== */

/* 7. Klarna logo - scale up to ~140px */
.wc-block-checkout__payment-method img[alt="Klarna"] {
    transform: scale(2.2) !important;
    transform-origin: left center !important;
    margin-left: 10px !important;
    margin-right: 70px !important;
}

/* 8. Card icons container - add spacing */
.wc-block-components-payment-method-icons {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* 9. Visa logo - scale up */
.wc-block-checkout__payment-method img[alt="Visa"] {
    transform: scale(2.8) !important;
    transform-origin: left center !important;
    margin-right: 35px !important;
}

/* 10. Mastercard logo - scale up */
.wc-block-checkout__payment-method img[alt="Mastercard"] {
    transform: scale(3.2) !important;
    transform-origin: left center !important;
    margin-right: 35px !important;
}

/* 11. Amex logo - scale up */
.wc-block-checkout__payment-method img[alt="Amex"] {
    transform: scale(3.5) !important;
    transform-origin: left center !important;
    margin-right: 25px !important;
}

/* ==========================================================================
   SHIPPING OPTION WITH TRUCK ICON
   ========================================================================== */

/* 12. Add truck icon before shipping label */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__label::before {
    content: '' !important;
    display: inline-block !important;
    width: 28px !important;
    height: 28px !important;
    margin-right: 14px !important;
    vertical-align: middle !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f8fafc' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 00-10.026 0 1.106 1.106 0 00-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* 13. Hide the FREE text */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__secondary-label {
    display: none !important;
}

/* 14. Shipping label text styling - larger */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__label {
    display: flex !important;
    align-items: center !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #f8fafc !important;
}

/* 15. Payment label styling */
.wc-block-checkout__payment-method .wc-block-components-radio-control__label {
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: #f8fafc !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* ==========================================================================
   MOBILE RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 767px) {
    /* Smaller card padding on mobile */
    .wc-block-components-shipping-rates-control .wc-block-components-radio-control__option,
    .wc-block-checkout__payment-method .wc-block-components-radio-control__option {
        padding: 16px 18px !important;
    }

    /* Slightly smaller logos on mobile */
    .wc-block-checkout__payment-method img[alt="Klarna"] {
        transform: scale(1.8) !important;
        margin-right: 50px !important;
    }

    .wc-block-checkout__payment-method img[alt="Visa"] {
        transform: scale(2.2) !important;
        margin-right: 25px !important;
    }

    .wc-block-checkout__payment-method img[alt="Mastercard"] {
        transform: scale(2.5) !important;
        margin-right: 25px !important;
    }

    .wc-block-checkout__payment-method img[alt="Amex"] {
        transform: scale(2.8) !important;
        margin-right: 18px !important;
    }

    /* Smaller truck icon on mobile */
    .wc-block-components-shipping-rates-control .wc-block-components-radio-control__label::before {
        width: 24px !important;
        height: 24px !important;
        margin-right: 10px !important;
    }
}

/* ==========================================================================
   PREVIOUS BUILDS GALLERY CAROUSEL
   Added: 2026-01-25
   ========================================================================== */

/* Section container */
.builds-gallery-section {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid var(--color-border);
}

.builds-gallery-title {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin: 0 0 0.5rem;
}

.builds-gallery-subtitle {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 1rem;
    margin: 0 0 2rem;
}

/* Carousel container */
.builds-carousel-container {
    position: relative;
    padding: 0 50px;
}

.builds-carousel {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0.5rem 0;
}

.builds-carousel::-webkit-scrollbar {
    display: none;
}

/* Individual carousel items */
.builds-carousel-item {
    flex: 0 0 260px;
    scroll-snap-align: start;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
}

.builds-carousel-item:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary);
    box-shadow: 0 12px 40px rgba(236, 72, 153, 0.2);
}

.builds-carousel-item img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.builds-carousel-item:hover img {
    transform: scale(1.05);
}

/* Overlay with photo count */
.builds-carousel-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    display: flex;
    justify-content: flex-end;
}

.builds-image-count {
    background: rgba(236, 72, 153, 0.9);
    color: white;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Carousel navigation buttons */
.builds-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(30, 41, 59, 0.9);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.builds-carousel-btn:hover {
    background: linear-gradient(135deg, #ec4899, #db2777);
    border-color: transparent;
}

.builds-carousel-prev {
    left: 0;
}

.builds-carousel-next {
    right: 0;
}

.builds-carousel-btn svg,
.builds-carousel-btn i {
    width: 24px;
    height: 24px;
}

/* ==========================================================================
   BUILDS GALLERY MODAL
   ========================================================================== */

.builds-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(8px);
}

.builds-modal.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Close button */
.builds-modal-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: white;
    font-size: 3rem;
    font-weight: 300;
    cursor: pointer;
    z-index: 10001;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s ease;
}

.builds-modal-close:hover {
    color: var(--color-primary);
    transform: scale(1.1);
}

/* Modal content wrapper */
.builds-modal-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 90vw;
    flex: 1;
    padding: 2rem 0;
}

/* Main image container */
.builds-modal-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 80%;
    max-height: 70vh;
}

#builds-modal-img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
}

/* Modal navigation */
.builds-modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(30, 41, 59, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10000;
}

.builds-modal-nav:hover {
    background: linear-gradient(135deg, #ec4899, #db2777);
    border-color: transparent;
}

.builds-modal-prev {
    left: 2rem;
}

.builds-modal-next {
    right: 2rem;
}

.builds-modal-nav svg,
.builds-modal-nav i {
    width: 28px;
    height: 28px;
}

/* Thumbnails strip */
.builds-modal-thumbnails {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem 2rem;
    max-width: 90vw;
    max-height: 120px;
    overflow-y: auto;
}

.builds-thumb {
    width: 70px;
    height: 70px;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.builds-thumb:hover {
    opacity: 0.8;
}

.builds-thumb.active {
    opacity: 1;
    border-color: var(--color-primary);
}

/* Image counter */
.builds-modal-counter {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    padding: 0.5rem;
}

/* ==========================================================================
   BUILDS GALLERY - COMPREHENSIVE RESPONSIVE SUPPORT
   Covers: Desktop, Laptop, Tablet, Mobile (all orientations & aspect ratios)
   ========================================================================== */

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .builds-carousel-item:hover {
        transform: none;
    }

    .builds-carousel-item:hover img {
        transform: none;
    }

    /* Add active state for touch feedback */
    .builds-carousel-item:active {
        transform: scale(0.98);
        opacity: 0.9;
    }

    /* Larger touch targets */
    .builds-carousel-btn {
        width: 48px;
        height: 48px;
    }

    .builds-modal-nav {
        width: 52px;
        height: 52px;
    }

    .builds-thumb {
        min-width: 60px;
        min-height: 60px;
    }

    /* Ensure smooth scrolling on iOS */
    .builds-carousel {
        -webkit-overflow-scrolling: touch;
        scroll-padding: 0 1rem;
    }
}

/* Large Desktop (1440px+) */
@media (min-width: 1440px) {
    .builds-carousel-item {
        flex: 0 0 300px;
    }

    .builds-carousel-item img {
        height: 300px;
    }

    .builds-carousel {
        gap: 1.5rem;
    }

    .builds-modal-image-container {
        max-width: 70%;
    }

    #builds-modal-img {
        max-height: 75vh;
    }

    .builds-thumb {
        width: 80px;
        height: 80px;
    }
}

/* Standard Desktop (1200px - 1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {
    .builds-carousel-item {
        flex: 0 0 280px;
    }

    .builds-carousel-item img {
        height: 280px;
    }
}

/* Small Desktop / Large Tablet Landscape (1024px - 1199px) */
@media (min-width: 1024px) and (max-width: 1199px) {
    .builds-carousel-item {
        flex: 0 0 240px;
    }

    .builds-carousel-item img {
        height: 240px;
    }

    .builds-carousel-container {
        padding: 0 45px;
    }
}

/* Tablet Portrait & Small Laptops (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .builds-gallery-section {
        margin-top: 3rem;
        padding-top: 2.5rem;
    }

    .builds-gallery-title {
        font-size: 1.75rem;
    }

    .builds-carousel-container {
        padding: 0 45px;
    }

    .builds-carousel-item {
        flex: 0 0 220px;
    }

    .builds-carousel-item img {
        height: 220px;
    }

    .builds-carousel-btn {
        width: 44px;
        height: 44px;
    }

    .builds-carousel-btn svg,
    .builds-carousel-btn i {
        width: 22px;
        height: 22px;
    }

    /* Modal for tablets */
    .builds-modal-content {
        padding: 1.5rem 0;
    }

    .builds-modal-nav {
        width: 46px;
        height: 46px;
    }

    .builds-modal-prev {
        left: 1rem;
    }

    .builds-modal-next {
        right: 1rem;
    }

    #builds-modal-img {
        max-height: 65vh;
    }

    .builds-thumb {
        width: 60px;
        height: 60px;
    }

    .builds-modal-thumbnails {
        max-height: 100px;
    }
}

/* Large Phones / Small Tablets (600px - 767px) */
@media (min-width: 600px) and (max-width: 767px) {
    .builds-gallery-section {
        margin-top: 2.5rem;
        padding-top: 2rem;
    }

    .builds-gallery-title {
        font-size: 1.5rem;
    }

    .builds-gallery-subtitle {
        font-size: 0.9rem;
        padding: 0 1rem;
    }

    .builds-carousel-container {
        padding: 0 40px;
    }

    .builds-carousel-item {
        flex: 0 0 200px;
    }

    .builds-carousel-item img {
        height: 200px;
    }

    .builds-carousel-btn {
        width: 44px;
        height: 44px;
    }

    .builds-carousel-btn svg,
    .builds-carousel-btn i {
        width: 20px;
        height: 20px;
    }

    /* Modal for large phones */
    .builds-modal-close {
        top: 0.75rem;
        right: 1rem;
        font-size: 2.5rem;
    }

    .builds-modal-nav {
        width: 42px;
        height: 42px;
    }

    .builds-modal-prev {
        left: 0.75rem;
    }

    .builds-modal-next {
        right: 0.75rem;
    }

    .builds-modal-image-container {
        max-width: 88%;
    }

    #builds-modal-img {
        max-height: 55vh;
    }

    .builds-thumb {
        width: 55px;
        height: 55px;
    }

    .builds-modal-thumbnails {
        padding: 0.75rem 1rem;
        gap: 0.4rem;
    }
}

/* Standard Phones (480px - 599px) */
@media (min-width: 480px) and (max-width: 599px) {
    .builds-gallery-section {
        margin-top: 2rem;
        padding-top: 1.5rem;
    }

    .builds-gallery-title {
        font-size: 1.35rem;
    }

    .builds-gallery-subtitle {
        font-size: 0.875rem;
        margin-bottom: 1.5rem;
        padding: 0 0.5rem;
    }

    .builds-carousel-container {
        padding: 0 35px;
    }

    .builds-carousel {
        gap: 0.75rem;
        padding: 0.5rem 0;
    }

    .builds-carousel-item {
        flex: 0 0 180px;
    }

    .builds-carousel-item img {
        height: 180px;
    }

    .builds-carousel-btn {
        width: 44px;
        height: 44px;
    }

    .builds-carousel-btn svg,
    .builds-carousel-btn i {
        width: 18px;
        height: 18px;
    }

    .builds-image-count {
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
    }

    /* Modal for standard phones */
    .builds-modal-close {
        top: 0.5rem;
        right: 0.75rem;
        font-size: 2.25rem;
    }

    .builds-modal-content {
        padding: 1rem 0;
    }

    .builds-modal-nav {
        width: 38px;
        height: 38px;
    }

    .builds-modal-nav svg,
    .builds-modal-nav i {
        width: 22px;
        height: 22px;
    }

    .builds-modal-prev {
        left: 0.5rem;
    }

    .builds-modal-next {
        right: 0.5rem;
    }

    .builds-modal-image-container {
        max-width: 92%;
    }

    #builds-modal-img {
        max-height: 50vh;
    }

    .builds-thumb {
        width: 48px;
        height: 48px;
    }

    .builds-modal-thumbnails {
        padding: 0.5rem;
        gap: 0.35rem;
        max-height: 90px;
    }

    .builds-modal-counter {
        font-size: 0.8rem;
    }
}

/* Small Phones (380px - 479px) */
@media (min-width: 380px) and (max-width: 479px) {
    .builds-gallery-section {
        margin-top: 1.5rem;
        padding-top: 1.25rem;
    }

    .builds-gallery-title {
        font-size: 1.25rem;
    }

    .builds-gallery-subtitle {
        font-size: 0.8rem;
        margin-bottom: 1.25rem;
    }

    .builds-carousel-container {
        padding: 0;
    }

    .builds-carousel {
        gap: 0.5rem;
        padding: 0.5rem 1rem;
    }

    .builds-carousel-item {
        flex: 0 0 75%;
        max-width: 280px;
    }

    .builds-carousel-item img {
        height: 200px;
    }

    .builds-carousel-btn {
        display: none;
    }

    .builds-carousel-overlay {
        padding: 0.75rem;
    }

    /* Modal for small phones */
    .builds-modal-close {
        top: 0.5rem;
        right: 0.5rem;
        font-size: 2rem;
        padding: 0.25rem;
    }

    .builds-modal-nav {
        width: 36px;
        height: 36px;
    }

    .builds-modal-nav svg,
    .builds-modal-nav i {
        width: 20px;
        height: 20px;
    }

    .builds-modal-prev {
        left: 0.25rem;
    }

    .builds-modal-next {
        right: 0.25rem;
    }

    #builds-modal-img {
        max-height: 45vh;
    }

    .builds-thumb {
        width: 44px;
        height: 44px;
    }

    .builds-modal-thumbnails {
        padding: 0.5rem 0.25rem;
        gap: 0.25rem;
        max-height: 80px;
    }
}

/* Extra Small Phones (320px - 379px) - iPhone SE, older devices */
@media (max-width: 379px) {
    .builds-gallery-section {
        margin-top: 1.25rem;
        padding-top: 1rem;
    }

    .builds-gallery-title {
        font-size: 1.125rem;
    }

    .builds-gallery-subtitle {
        font-size: 0.75rem;
        margin-bottom: 1rem;
    }

    .builds-carousel-container {
        padding: 0;
    }

    .builds-carousel {
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
    }

    .builds-carousel-item {
        flex: 0 0 85%;
    }

    .builds-carousel-item img {
        height: 180px;
    }

    .builds-carousel-btn {
        display: none;
    }

    .builds-image-count {
        font-size: 0.65rem;
        padding: 0.15rem 0.4rem;
    }

    /* Modal for extra small phones */
    .builds-modal-close {
        top: 0.25rem;
        right: 0.25rem;
        font-size: 1.75rem;
    }

    .builds-modal-content {
        padding: 0.5rem 0;
    }

    .builds-modal-nav {
        width: 32px;
        height: 32px;
    }

    .builds-modal-nav svg,
    .builds-modal-nav i {
        width: 18px;
        height: 18px;
    }

    .builds-modal-prev {
        left: 0.15rem;
    }

    .builds-modal-next {
        right: 0.15rem;
    }

    .builds-modal-image-container {
        max-width: 95%;
    }

    #builds-modal-img {
        max-height: 40vh;
    }

    .builds-thumb {
        width: 38px;
        height: 38px;
    }

    .builds-modal-thumbnails {
        padding: 0.35rem;
        gap: 0.2rem;
        max-height: 70px;
    }

    .builds-modal-counter {
        font-size: 0.7rem;
        padding: 0.25rem;
    }
}

/* ==========================================================================
   LANDSCAPE ORIENTATION HANDLING
   ========================================================================== */

/* Phones in landscape - prioritize image width */
@media (max-width: 896px) and (orientation: landscape) {
    .builds-gallery-section {
        margin-top: 1.5rem;
        padding-top: 1rem;
    }

    .builds-gallery-title {
        font-size: 1.25rem;
        margin-bottom: 0.25rem;
    }

    .builds-gallery-subtitle {
        margin-bottom: 1rem;
    }

    .builds-carousel-item {
        flex: 0 0 180px;
    }

    .builds-carousel-item img {
        height: 140px;
    }

    /* Modal landscape - maximize horizontal space */
    .builds-modal-content {
        flex-direction: row;
        padding: 0.5rem 0;
    }

    .builds-modal-image-container {
        max-width: 65%;
        max-height: 85vh;
    }

    #builds-modal-img {
        max-height: 75vh;
        max-width: 100%;
    }

    .builds-modal-thumbnails {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        flex-direction: column;
        max-height: 80vh;
        max-width: 80px;
        padding: 0.5rem;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .builds-thumb {
        width: 50px;
        height: 50px;
    }

    .builds-modal-counter {
        position: absolute;
        bottom: 0.5rem;
        left: 50%;
        transform: translateX(-50%);
    }

    .builds-modal-close {
        top: 0.25rem;
        right: 0.5rem;
        font-size: 2rem;
    }

    .builds-modal-nav {
        width: 36px;
        height: 36px;
    }
}

/* Tablets in landscape */
@media (min-width: 897px) and (max-width: 1024px) and (orientation: landscape) {
    .builds-carousel-item {
        flex: 0 0 220px;
    }

    .builds-carousel-item img {
        height: 180px;
    }

    #builds-modal-img {
        max-height: 70vh;
    }

    .builds-modal-thumbnails {
        max-height: 90px;
    }
}

/* ==========================================================================
   SAFE AREA SUPPORT (Notched devices - iPhone X+, etc.)
   ========================================================================== */

@supports (padding: max(0px)) {
    .builds-modal {
        padding-top: max(1rem, env(safe-area-inset-top));
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .builds-modal-close {
        top: max(0.5rem, env(safe-area-inset-top));
        right: max(0.5rem, env(safe-area-inset-right));
    }

    .builds-modal-prev {
        left: max(0.5rem, env(safe-area-inset-left));
    }

    .builds-modal-next {
        right: max(0.5rem, env(safe-area-inset-right));
    }

    .builds-modal-thumbnails {
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    }

    /* Carousel padding for notched devices */
    @media (max-width: 480px) {
        .builds-carousel {
            padding-left: max(1rem, env(safe-area-inset-left));
            padding-right: max(1rem, env(safe-area-inset-right));
        }
    }
}

/* ==========================================================================
   HIGH DPI / RETINA DISPLAY SUPPORT
   ========================================================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .builds-carousel-item img,
    #builds-modal-img,
    .builds-thumb {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }

    /* Sharper borders on retina */
    .builds-carousel-item {
        border-width: 0.5px;
    }

    .builds-thumb.active {
        border-width: 1.5px;
    }
}

/* ==========================================================================
   REDUCED MOTION PREFERENCE
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .builds-carousel {
        scroll-behavior: auto;
    }

    .builds-carousel-item,
    .builds-carousel-item img,
    .builds-modal-close,
    .builds-modal-nav,
    .builds-thumb {
        transition: none;
    }

    .builds-carousel-item:hover {
        transform: none;
    }

    .builds-carousel-item:hover img {
        transform: none;
    }
}

/* ==========================================================================
   DARK MODE SUPPORT (if user prefers)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .builds-modal {
        background: rgba(0, 0, 0, 0.98);
    }
}

/* ==========================================================================
   PRINT STYLES (hide gallery in print)
   ========================================================================== */

@media print {
    .builds-gallery-section,
    .builds-modal {
        display: none !important;
    }
}

/* ==========================================================================
   TRUSTPILOT WIDGET STYLING
   Added: 2026-01-25
   ========================================================================== */

.trustpilot-carousel-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 1.5rem;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

/* Ensure widget is visible and clickable */
.trustpilot-widget iframe {
    width: 100% !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .trustpilot-carousel-wrapper {
        padding: 1rem;
        margin: 0 -1rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

@media (max-width: 480px) {
    .trustpilot-carousel-wrapper {
        padding: 0.75rem;
    }
}

/* ==========================================================================
   WORLDPAY CARD INPUT WIDTH FIX
   Added: 2026-01-28
   Issue: Card number field too narrow to display full 16-digit number
   ========================================================================== */

/* Widen the Worldpay card form accordion content */
.wc-block-components-radio-control-accordion-content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Widen the card elements container */
.wc-block-card-elements {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 280px !important;
}

/* Widen the card number element specifically */
.wc-card-number-element {
    width: 100% !important;
    min-width: 280px !important;
    flex: 1 1 100% !important;
}

/* Make sure the iframe inside can expand */
.wc-card-number-element iframe {
    width: 100% !important;
    min-width: 260px !important;
}

/* Expiry and CVV fields - ensure readable sizing */
.wc-card-expiry-element,
.wc-card-cvc-element {
    min-width: 100px !important;
}

/* ==========================================================================
   MOBILE CHECKOUT SPACING FIX
   Added: 2026-01-28
   Issue: Checkout form fields cramped with excessive side padding on mobile
   Solution: Reduce padding at multiple container levels for better space usage
   Before: 74% viewport utilization (296px of 400px)
   After: 92% viewport utilization (368px of 400px)
   ========================================================================== */

@media (max-width: 480px) {
    /* Reduce container padding on mobile checkout */
    .page-id-7 .container,
    .woocommerce-checkout .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Reduce page content padding */
    .page-id-7 .page-content,
    .woocommerce-checkout .page-content {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    /* Reduce checkout block padding */
    .wp-block-woocommerce-checkout {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Reduce checkout main padding */
    .wc-block-checkout__main {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    /* Payment option cards - reduce padding for more content space */
    .wc-block-checkout__payment-method .wc-block-components-radio-control__option {
        padding: 16px 12px !important;
    }

    /* Shipping option cards - reduce padding */
    .wc-block-components-shipping-rates-control .wc-block-components-radio-control__option {
        padding: 16px 12px !important;
    }

    /* Form field sections - reduce side padding */
    .wc-block-checkout__shipping-fields,
    .wc-block-checkout__billing-fields,
    .wc-block-checkout__contact-fields {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Accordion content for Worldpay card form - tighter fit */
    .wc-block-components-radio-control-accordion-content {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}

/* ==========================================================================
   MOBILE CART PAGE LAYOUT FIX
   Added: 2026-01-28
   Version: 1.0.36
   Approach: Container-first with 16px balanced margins
   ========================================================================== */

@media (max-width: 480px) {
    /* === CONTAINER LAYER === */
    /* Single source of truth for margins, no horizontal clipping */
    .woocommerce-cart .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        overflow-x: visible !important;
    }

    /* Remove intermediate padding and overflow clipping */
    .woocommerce-cart .page-content,
    .woocommerce-cart .entry-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: visible !important;
    }

    /* === CART BLOCK LAYER === */
    .woocommerce-cart .wp-block-woocommerce-cart {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .woocommerce-cart .wc-block-cart__sidebar {
        width: 100% !important;
        max-width: calc(100vw - 32px) !important;  /* 400 - 32 = 368px */
        min-width: 0 !important;  /* Override global 380px min-width */
        flex: 1 1 auto !important;  /* Override global flex: 0 0 380px */
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* === EXPRESS PAYMENT === */
    .wc-block-cart .wc-block-components-express-payment,
    .wc-block-cart .wc-block-components-express-payment__content {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .wc-block-cart .wc-block-components-express-payment__event-buttons li {
        max-width: 100% !important;
    }

    /* === PAYPAL BUTTONS === */
    .wc-block-cart .paypal-buttons {
        max-width: 100% !important;
        width: 100% !important;
    }

    .wc-block-cart .paypal-buttons iframe {
        max-width: 100% !important;
    }

    .wc-block-cart .ppcp-messages {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* === TOTALS SECTION === */
    .wc-block-cart .wc-block-components-totals-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        box-sizing: border-box !important;
    }

    .wc-block-cart .wc-block-components-totals-item {
        width: 100% !important;
        max-width: 100% !important;
    }

    .wc-block-cart .wc-block-components-totals-item__label {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .wc-block-cart .wc-block-components-totals-item__value {
        flex: 0 0 auto !important;
        text-align: right !important;
    }
}


/* ==========================================================================
   HOMEPAGE REDESIGN v2.0 - AWD-IT Inspired Layout
   Added: 2026-02-10
   ========================================================================== */

/* ==========================================================================
   Trust Bar
   ========================================================================== */

.trust-bar {
    background: #1a1a1a;
    border-bottom: 1px solid #2a2a2a;
    padding: 0.625rem 0;
}

.trust-bar__list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 1rem;
}

.trust-bar__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.trust-bar__icon {
    width: 18px;
    height: 18px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.trust-bar__icon--trustpilot {
    color: var(--color-trustpilot, #00b67a);
}

.trust-bar__icon--klarna {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #ffb3c7;
    color: #0a0a0a;
    font-weight: 700;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.trust-bar__text {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-muted-light, #b0b0b0);
    font-weight: 500;
}

@media (max-width: 1023px) {
    .trust-bar__item--express {
        display: none;
    }
}

@media (max-width: 767px) {
    .trust-bar__list {
        justify-content: center;
        gap: 1.5rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 0.5rem;
    }
    .trust-bar__list::-webkit-scrollbar { display: none; }
    .trust-bar__item--trustpilot,
    .trust-bar__item--express {
        display: none;
    }
    .trust-bar__text {
        font-size: 0.75rem;
    }
}

/* ==========================================================================
   Hero Area (Banner + Category Tiles)
   ========================================================================== */

.hero-area {
    background: var(--color-bg-dark, #101010);
    padding: var(--space-lg, 1.5rem) 0;
}

.hero-area__grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--space-md, 1rem);
    min-height: 420px;
}

/* Hero Banner (left) */
.hero-banner {
    position: relative;
    overflow: hidden;
    background: #1a1a1a;
}

.hero-banner__image {
    position: absolute;
    inset: 0;
}

.hero-banner__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-banner__overlay {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding: var(--space-2xl, 3rem);
    padding-left: 0;
    background: linear-gradient(
        to right,
        rgba(16, 16, 16, 0.92) 0%,
        rgba(16, 16, 16, 0.65) 50%,
        transparent 100%
    );
}

.hero-banner__badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--color-primary);
    color: white;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: var(--space-md, 1rem);
    width: fit-content;
}

.hero-banner__title {
    font-size: var(--font-size-4xl, 2.5rem);
    font-weight: 800;
    color: white;
    line-height: 1.1;
    margin-bottom: var(--space-sm, 0.5rem);
}

.hero-banner__subtitle {
    font-size: var(--font-size-xl, 1.25rem);
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: var(--space-sm, 0.5rem);
}

.hero-banner__desc {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-muted-light, #b0b0b0);
    margin-bottom: var(--space-lg, 1.5rem);
    max-width: 400px;
}

.hero-banner__actions {
    display: flex;
    gap: var(--space-md, 1rem);
}

.btn-gradient {
    background: linear-gradient(135deg, #2563EB 0%, #6D28D9 50%, #9333EA 100%) !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 1.125rem;
    border: none;
}

.btn-gradient:hover {
    background: linear-gradient(135deg, #1D4ED8 0%, #5B21B6 50%, #7E22CE 100%) !important;
    color: #fff !important;
}

/* Hero Category Tiles (right) */
.hero-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--space-sm, 0.5rem);
}

.hero-tiles__item {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    text-decoration: none;
    padding: var(--space-md, 1rem);
    background: #1a1a1a;
    transition: transform var(--transition-fast);
}

.hero-tiles__item:hover {
    transform: scale(1.02);
}

.hero-tiles__bg {
    position: absolute;
    inset: 0;
    opacity: 0.7;
    transition: opacity var(--transition-base, 250ms);
}

.hero-tiles__item:hover .hero-tiles__bg {
    opacity: 0.9;
}

.hero-tiles__bg--gaming {
    background: linear-gradient(135deg, rgba(220,79,145,0.3), rgba(233,98,42,0.3)), url('../images/redesign/tiles/tile-gaming.jpg') center/cover no-repeat;
}

.hero-tiles__bg--amd {
    background: linear-gradient(135deg, rgba(237,28,36,0.3), rgba(255,102,0,0.3)), url('../images/redesign/tiles/tile-amd.jpg') center/cover no-repeat;
}

.hero-tiles__bg--intel {
    background: linear-gradient(135deg, rgba(0,113,197,0.3), rgba(0,174,239,0.3)), url('../images/redesign/tiles/tile-intel.jpg') center/cover no-repeat;
}

.hero-tiles__bg--quick {
    background: linear-gradient(135deg, rgba(34,197,94,0.3), rgba(22,163,74,0.3)), url('../images/redesign/tiles/tile-quickship.jpg') center/cover no-repeat;
}

.hero-tiles__label {
    position: relative;
    z-index: 2;
    color: white;
    font-size: var(--font-size-base, 1rem);
    font-weight: 700;
}

.hero-tiles__count {
    position: relative;
    z-index: 2;
    color: var(--color-text-muted-light, #b0b0b0);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 500;
}

/* Hero responsive */
@media (max-width: 1023px) {
    .hero-area__grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .hero-banner {
        min-height: 300px;
    }
    .hero-tiles {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr;
    }
    .hero-tiles__item {
        min-height: 100px;
    }
}

@media (max-width: 767px) {
    .hero-area {
        padding: var(--space-sm, 0.5rem) 0;
    }
    .hero-banner {
        min-height: 250px;
    }
    .hero-banner__title {
        font-size: 1.75rem;
    }
    .hero-banner__overlay {
        padding: 1.5rem;
    }
    .hero-banner__desc {
        display: none;
    }
    .hero-tiles {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }
    .hero-tiles__item {
        min-height: 80px;
    }
}

/* ==========================================================================
   Price Range Bands
   ========================================================================== */

.price-bands {
    background: var(--color-bg-dark, #101010);
    padding: 0 0 var(--space-xl, 2rem) 0;
}

.price-bands__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
}

.price-bands__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg, 1.5rem) var(--space-md, 1rem);
    min-height: 100px;
    text-decoration: none;
    color: white;
    font-weight: 700;
    transition: transform var(--transition-fast), filter var(--transition-fast);
}

.price-bands__item:hover {
    transform: translateY(-3px);
    filter: brightness(1.1);
    color: white;
}

.price-bands__label {
    font-size: var(--font-size-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
}

.price-bands__amount {
    font-size: var(--font-size-2xl, 1.5rem);
    font-weight: 800;
    line-height: 1.2;
}

.price-bands__tier {
    font-size: 1rem;
    opacity: 0.8;
    margin-top: 0.25rem;
}

/* Price band colors */
.price-bands__item--value {
    background: linear-gradient(135deg, #0891b2, #06b6d4);
}
.price-bands__item--standard {
    background: linear-gradient(135deg, #16a34a, #22c55e);
}
.price-bands__item--performance {
    background: linear-gradient(135deg, #dc4f91, #e9622a);
}
.price-bands__item--premium {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
}

@media (max-width: 767px) {
    .price-bands__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .price-bands__amount {
        font-size: 1.125rem;
    }
    .price-bands__item {
        padding: 0.75rem 0.5rem;
        min-height: 80px;
    }
}

/* ==========================================================================
   Featured Products Section (white background)
   ========================================================================== */

.featured-products {
    background: var(--color-bg-body, #ffffff);
    padding: var(--space-3xl, 4rem) 0;
}

.featured-products__header {
    text-align: center;
    margin-bottom: var(--space-2xl, 3rem);
}

.featured-products__title {
    font-size: var(--font-size-3xl, 2rem);
    font-weight: 700;
    color: var(--color-text-dark, #1a1a1a);
    margin-bottom: var(--space-sm, 0.5rem);
}

.featured-products__title em {
    font-style: normal;
    color: var(--color-primary);
}

.featured-products__subtitle {
    font-size: var(--font-size-lg, 1.125rem);
    color: var(--color-text-medium, #555);
}

.featured-products__footer {
    text-align: center;
    margin-top: var(--space-xl, 2rem);
}

/* Carousel product cards on white bg */
.featured-products .carousel-product-card {
    background: var(--color-bg-card, #ffffff);
    border: 1px solid var(--color-border, #e0e0e0);
    transition: box-shadow var(--transition-base, 250ms), border-color var(--transition-base, 250ms);
}

.featured-products .carousel-product-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-card-hover);
}

.featured-products .carousel-product-title a {
    color: var(--color-text-dark, #1a1a1a);
}

.featured-products .carousel-product-title a:hover {
    color: var(--color-primary);
}

.featured-products .carousel-product-brand {
    color: var(--color-text-medium, #555);
}

.featured-products .carousel-product-price {
    color: var(--color-primary);
}

/* Override carousel buttons for white bg context */
.featured-products .carousel-btn {
    background: var(--color-bg-body, #ffffff);
    border: 1px solid var(--color-border, #e0e0e0);
    color: var(--color-text-dark, #1a1a1a);
    box-shadow: var(--shadow-sm);
}

.featured-products .carousel-btn:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* ==========================================================================
   Game Grid - Choose PC by Game
   ========================================================================== */

.game-grid {
    background: var(--color-bg-dark, #101010);
    padding: var(--space-3xl, 4rem) 0;
}

.game-grid__header {
    text-align: center;
    margin-bottom: var(--space-2xl, 3rem);
}

.game-grid__title {
    font-size: var(--font-size-3xl, 2rem);
    color: white;
    margin-bottom: var(--space-sm, 0.5rem);
}

.game-grid__title em {
    font-style: normal;
    color: var(--color-primary);
}

.game-grid__subtitle {
    color: var(--color-text-muted-light, #b0b0b0);
    font-size: var(--font-size-lg, 1.125rem);
}

.game-grid__items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md, 1rem);
}

.game-grid__item {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    text-decoration: none;
}

.game-grid__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow, 400ms);
}

.game-grid__item:hover .game-grid__image {
    transform: scale(1.08);
}

.game-grid__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-slow, 400ms);
}

.game-grid__item:hover .game-grid__placeholder {
    transform: scale(1.08);
}

.game-grid__placeholder-text {
    font-size: var(--font-size-3xl, 2rem);
    font-weight: 800;
    color: rgba(255, 255, 255, 0.15);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.game-grid__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-lg, 1.5rem);
    background: linear-gradient(
        to top,
        rgba(16, 16, 16, 0.9) 0%,
        rgba(16, 16, 16, 0.3) 50%,
        transparent 100%
    );
}

.game-grid__name {
    font-size: var(--font-size-xl, 1.25rem);
    font-weight: 700;
    color: white;
}

.game-grid__cta {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-primary);
    font-weight: 600;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--transition-base, 250ms), transform var(--transition-base, 250ms);
}

.game-grid__item:hover .game-grid__cta {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1023px) {
    .game-grid__items {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .game-grid__items {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm, 0.5rem);
    }
    .game-grid__name {
        font-size: var(--font-size-base, 1rem);
    }
    .game-grid__cta {
        opacity: 1;
        transform: translateY(0);
        font-size: 0.75rem;
    }
}

/* ==========================================================================
   Why Choose TheCpuHub
   ========================================================================== */

.why-choose {
    background: var(--color-bg-body, #ffffff);
    padding: var(--space-3xl, 4rem) 0;
}

.why-choose__header {
    text-align: center;
    margin-bottom: var(--space-2xl, 3rem);
}

.why-choose__title {
    font-size: var(--font-size-3xl, 2rem);
    font-weight: 700;
    color: var(--color-text-dark, #1a1a1a);
    margin-bottom: var(--space-sm, 0.5rem);
}

.why-choose__title em {
    font-style: normal;
    color: var(--color-primary);
}

.why-choose__subtitle {
    font-size: var(--font-size-lg, 1.125rem);
    color: var(--color-text-medium, #555);
}

.why-choose__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl, 2rem);
}

.why-choose__item {
    text-align: center;
    padding: var(--space-xl, 2rem);
}

.why-choose__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-md, 1rem);
    background: rgba(220, 79, 145, 0.08);
    color: var(--color-primary);
}

.why-choose__icon svg,
.why-choose__icon i {
    width: 28px;
    height: 28px;
}

.why-choose__item-title {
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: 600;
    color: var(--color-text-dark, #1a1a1a);
    margin-bottom: var(--space-sm, 0.5rem);
}

.why-choose__item-text {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-medium, #555);
    line-height: 1.6;
}

@media (max-width: 1023px) {
    .why-choose__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .why-choose__grid {
        grid-template-columns: 1fr;
        gap: var(--space-md, 1rem);
    }
    .why-choose__item {
        padding: var(--space-md, 1rem);
    }
}

/* ==========================================================================
   Dual Banners
   ========================================================================== */

.dual-banners {
    background: var(--color-bg-light, #f5f5f5);
    padding: var(--space-3xl, 4rem) 0;
}

.dual-banners__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl, 2rem);
}

.dual-banners__item {
    display: flex;
    align-items: center;
    gap: var(--space-xl, 2rem);
    padding: var(--space-2xl, 3rem);
    background: var(--color-bg-dark, #101010);
    color: white;
    text-decoration: none;
    transition: transform var(--transition-fast);
}

.dual-banners__item:hover {
    color: white;
}

.dual-banners__item--cta:hover {
    transform: translateY(-2px);
}

.dual-banners__icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.dual-banners__icon svg,
.dual-banners__icon i {
    width: 40px;
    height: 40px;
}

.dual-banners__title {
    font-size: var(--font-size-xl, 1.25rem);
    font-weight: 700;
    margin-bottom: var(--space-xs, 0.25rem);
}

.dual-banners__text {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-muted-light, #b0b0b0);
    margin-bottom: var(--space-md, 1rem);
}

.dual-banners__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm, 0.5rem);
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--font-size-sm, 0.875rem);
}

@media (max-width: 767px) {
    .dual-banners__grid {
        grid-template-columns: 1fr;
    }
    .dual-banners__item {
        padding: var(--space-lg, 1.5rem);
    }
}

/* ==========================================================================
   Builds Section (on white bg context)
   ========================================================================== */

.builds-section {
    background: var(--color-bg-body, #ffffff);
    padding: var(--space-3xl, 4rem) 0;
}

.builds-section .builds-gallery-title {
    font-size: var(--font-size-3xl, 2rem);
    font-weight: 700;
    color: var(--color-text-dark, #1a1a1a);
    text-align: center;
    margin-bottom: var(--space-sm, 0.5rem);
    background: none;
    -webkit-text-fill-color: var(--color-text-dark, #1a1a1a);
}

.builds-section .builds-gallery-title em {
    font-style: normal;
    color: var(--color-primary);
    -webkit-text-fill-color: var(--color-primary);
}

.builds-section .builds-gallery-subtitle {
    color: var(--color-text-medium, #555);
    text-align: center;
    margin-bottom: var(--space-2xl, 3rem);
}

/* ==========================================================================
   Review Bar
   ========================================================================== */

.review-bar {
    background: var(--color-bg-light, #f5f5f5);
    padding: var(--space-3xl, 4rem) 0;
    text-align: center;
}

.review-bar__header {
    margin-bottom: var(--space-xl, 2rem);
}

.review-bar__title {
    font-size: var(--font-size-3xl, 2rem);
    font-weight: 700;
    color: var(--color-text-dark, #1a1a1a);
    margin-bottom: var(--space-sm, 0.5rem);
}

.review-bar__title em {
    font-style: normal;
    color: var(--color-primary);
}

.review-bar__subtitle {
    font-size: var(--font-size-lg, 1.125rem);
    color: var(--color-text-medium, #555);
}

.review-bar__widget {
    display: flex;
    justify-content: center;
}

/* ==========================================================================
   CTA Section
   ========================================================================== */

.cta-section {
    background: var(--gradient-dark, linear-gradient(180deg, #101010, #1a1a1a));
    padding: var(--space-3xl, 4rem) 0;
    text-align: center;
}

.cta-section__title {
    font-size: var(--font-size-3xl, 2rem);
    font-weight: 700;
    color: white;
    margin-bottom: var(--space-md, 1rem);
}

.cta-section__title em {
    font-style: normal;
    color: var(--color-primary);
}

.cta-section__text {
    color: var(--color-text-muted-light, #b0b0b0);
    max-width: 600px;
    margin: 0 auto var(--space-xl, 2rem);
    font-size: var(--font-size-lg, 1.125rem);
}

.cta-section__actions {
    display: flex;
    gap: var(--space-md, 1rem);
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================================
   GAME LANDING PAGES
   ============================================================ */

.game-landing {
    color: #f0f0f0;
    letter-spacing: 0.01em;
}

/* Breadcrumb */
.game-landing__breadcrumb {
    padding: 0.75rem 0;
    font-size: 0.875rem;
    color: #b0b0b0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.game-landing__breadcrumb a {
    color: #b0b0b0;
    text-decoration: none;
}

.game-landing__breadcrumb a:hover {
    color: var(--color-primary, #dc4f91);
}

.breadcrumb__sep {
    margin: 0 0.5rem;
    color: #555;
}

/* Hero */
.game-hero {
    position: relative;
    padding: 4rem 0 3.5rem;
    overflow: hidden;
}

.game-hero__content {
    position: relative;
    z-index: 2;
    max-width: 700px;
}

.game-hero__title {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 0.75rem;
    color: #fff;
}

.game-hero__subtitle {
    font-size: 1.25rem;
    color: #b0b0b0;
    margin: 0 0 2rem;
    font-weight: 400;
}

.game-hero__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.game-hero__accent {
    position: absolute;
    top: -50%;
    right: -10%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: var(--game-color, var(--color-primary, #dc4f91));
    opacity: 0.06;
    filter: blur(80px);
    pointer-events: none;
}

/* Intro */
.game-intro {
    padding: 2.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.game-intro__text {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: #d0d0d0;
    max-width: 800px;
    margin: 0;
}

/* Specs Table */
.game-specs {
    padding: 3.5rem 0;
}

.game-specs__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 2rem;
    color: #fff;
}

.game-specs__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.game-specs__card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
}

.game-specs__card--recommended {
    border-color: var(--game-color, var(--color-primary, #dc4f91));
}

.game-specs__card-header {
    padding: 1.25rem 1.5rem;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.game-specs__card--recommended .game-specs__card-header {
    background: rgba(255,255,255,0.06);
}

.game-specs__tier-name {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #999;
}

.game-specs__card--recommended .game-specs__tier-name {
    color: var(--game-color, var(--color-primary, #dc4f91));
}

.game-specs__tier-target {
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
}

.game-specs__list {
    margin: 0;
    padding: 1rem 1.5rem;
}

.game-specs__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.game-specs__row:last-child {
    border-bottom: none;
}

.game-specs__row dt {
    font-size: 0.875rem;
    font-weight: 600;
    color: #999;
    min-width: 70px;
}

.game-specs__row dd {
    font-size: 0.875rem;
    color: #e0e0e0;
    margin: 0;
    text-align: right;
}

/* Top Picks */
.game-top-picks {
    padding: 3.5rem 0;
    background: rgba(255,255,255,0.02);
}

.game-top-picks__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 2rem;
    color: #fff;
}

.game-top-picks__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.game-top-picks__card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

.game-top-picks__card--empty {
    justify-content: center;
    min-height: 300px;
    color: #666;
}

.game-top-picks__badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(255,255,255,0.06);
    color: #b0b0b0;
}

.game-top-picks__badge--value {
    background: var(--game-color, var(--color-primary, #dc4f91));
    color: #fff;
}

.game-top-picks__badge--ultimate {
    background: linear-gradient(135deg, var(--color-primary, #dc4f91), var(--color-secondary, #e9622a));
    color: #fff;
}

.game-top-picks__link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.game-top-picks__image {
    width: 100%;
    max-width: 250px;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
}

.game-top-picks__name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #e0e0e0;
    margin: 0;
    line-height: 1.3;
}

.game-top-picks__price {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
}

.game-top-picks__price del {
    color: #666;
    font-weight: 400;
    font-size: 0.9rem;
}

.game-top-picks__price ins {
    text-decoration: none;
    color: var(--color-primary, #dc4f91);
}

/* Product Grid */
.game-products {
    padding: 3.5rem 0;
}

.game-products__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 2rem;
    color: #fff;
}

.game-products__empty {
    text-align: center;
    padding: 3rem 0;
    color: #888;
}

.game-products__empty p {
    margin: 0 0 1.5rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* FAQ Accordion */
.game-faq {
    padding: 3.5rem 0;
    background: rgba(255,255,255,0.02);
}

.game-faq__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 2rem;
    color: #fff;
}

.game-faq__list {
    max-width: 800px;
}

.game-faq__item {
    border: 1px solid rgba(255,255,255,0.08);
    margin-bottom: -1px;
}

.game-faq__question {
    padding: 1.25rem 1.5rem;
    font-weight: 600;
    font-size: 1rem;
    color: #e0e0e0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    list-style: none;
}

.game-faq__question::-webkit-details-marker {
    display: none;
}

.game-faq__question:hover {
    color: #fff;
    background: rgba(255,255,255,0.02);
}

.game-faq__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
    color: #666;
}

.game-faq__item[open] .game-faq__icon {
    transform: rotate(180deg);
    color: var(--game-color, var(--color-primary, #dc4f91));
}

.game-faq__answer {
    padding: 0 1.5rem 1.25rem;
    color: #b0b0b0;
    line-height: 1.6;
}

.game-faq__answer p {
    margin: 0;
}

/* CTA */
.game-cta {
    padding: 4rem 0;
}

.game-cta__inner {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.game-cta__title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: #fff;
}

.game-cta__text {
    color: #b0b0b0;
    margin: 0 0 2rem;
    font-size: 1.0625rem;
}

.game-cta__actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Mobile */
@media (max-width: 768px) {
    .game-hero {
        padding: 2.5rem 0 2rem;
    }

    .game-hero__title {
        font-size: 1.75rem;
    }

    .game-hero__subtitle {
        font-size: 1.0625rem;
    }

    .game-hero__actions {
        flex-direction: column;
    }

    .game-hero__actions .btn {
        width: 100%;
        justify-content: center;
    }

    .game-specs__grid {
        grid-template-columns: 1fr;
    }

    .game-top-picks__grid {
        grid-template-columns: 1fr;
    }

    .game-specs,
    .game-top-picks,
    .game-products,
    .game-faq,
    .game-cta {
        padding: 2.5rem 0;
    }

    .game-cta__actions {
        flex-direction: column;
    }

    .game-cta__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   MOBILE HOMEPAGE REDESIGN - Feb 2026
   Quiz CTA, hero stacking, section reordering, carousel improvements
   ========================================================================== */

/* Quiz CTA Mobile - Hidden on desktop */
.quiz-cta-mobile {
    display: none;
}

/* Carousel dot indicators - hidden on desktop */
.carousel-dots {
    display: none;
}

@media (max-width: 767px) {

    /* --- Section Reordering --- */
    #main.site-main {
        display: flex;
        flex-direction: column;
    }

    .trust-bar        { order: 1; }
    .hero-area        { order: 2; }
    .quiz-cta-mobile  { order: 3; }
    .featured-products { order: 4; }
    .game-grid        { order: 5; }
    .price-bands      { order: 6; }
    .why-choose       { order: 7; }
    .dual-banners     { order: 8; }
    .builds-section   { order: 9; }
    .review-bar       { order: 10; }
    .cta-section      { order: 11; }

    /* --- Quiz CTA Mobile Card --- */
    .quiz-cta-mobile {
        display: block;
        padding: 0.75rem 0;
        background: var(--color-bg-dark, #101010);
    }

    .quiz-cta-mobile__card {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem;
        background: linear-gradient(135deg, rgba(220, 79, 145, 0.15), rgba(233, 98, 42, 0.15));
        border: 1px solid rgba(220, 79, 145, 0.3);
        text-decoration: none;
        color: white;
        transition: border-color 0.2s ease;
    }

    .quiz-cta-mobile__card:hover,
    .quiz-cta-mobile__card:active {
        border-color: #dc4f91;
        color: white;
    }

    .quiz-cta-mobile__icon {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #dc4f91;
        color: white;
    }

    .quiz-cta-mobile__icon svg,
    .quiz-cta-mobile__icon i {
        width: 22px;
        height: 22px;
    }

    .quiz-cta-mobile__content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
    }

    .quiz-cta-mobile__label {
        font-size: 0.6875rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #dc4f91;
        font-weight: 600;
    }

    .quiz-cta-mobile__title {
        font-size: 1rem;
        font-weight: 700;
    }

    .quiz-cta-mobile__desc {
        font-size: 0.75rem;
        color: #b0b0b0;
    }

    .quiz-cta-mobile__arrow {
        flex-shrink: 0;
        color: #dc4f91;
    }

    .quiz-cta-mobile__arrow svg,
    .quiz-cta-mobile__arrow i {
        width: 20px;
        height: 20px;
    }

    /* --- Hero Banner: Stacked layout --- */
    .hero-banner {
        display: flex;
        flex-direction: column;
        min-height: auto;
    }

    .hero-banner__image {
        position: relative;
        aspect-ratio: 16 / 9;
        width: 100%;
    }

    .hero-banner__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .hero-banner__overlay {
        position: relative;
        background: #101010;
        padding: 1.25rem 1rem 1.5rem;
        justify-content: flex-start;
        height: auto;
    }

    .hero-banner__badge {
        font-size: 0.6875rem;
        padding: 0.2rem 0.5rem;
        margin-bottom: 0.5rem;
    }

    .hero-banner__title {
        font-size: 1.5rem;
        margin-bottom: 0.25rem;
    }

    .hero-banner__subtitle {
        font-size: 1rem;
        margin-bottom: 0.25rem;
    }

    .hero-banner__desc {
        display: block;
        font-size: 0.8125rem;
        margin-bottom: 1rem;
        max-width: none;
    }

    .hero-banner__actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .hero-banner__actions .btn {
        width: 100%;
        text-align: center;
        padding: 0.75rem 1rem;
        font-size: 0.9375rem;
    }

    /* Category tiles: compact strip */
    .hero-tiles {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr;
        gap: 0.25rem;
    }

    .hero-tiles__item {
        min-height: 60px;
        padding: 0.5rem;
    }

    .hero-tiles__label {
        font-size: 0.75rem;
    }

    .hero-tiles__count {
        font-size: 0.625rem;
    }

    /* --- Featured Products Carousel: single card + peek --- */
    .featured-products {
        padding: 2.5rem 0;
    }

    .featured-products__title {
        font-size: 1.5rem;
    }

    .featured-products__subtitle {
        font-size: 0.875rem;
    }

    .product-carousel {
        scroll-padding-left: 1rem;
    }

    .carousel-item {
        flex: 0 0 calc(100% - 3rem);
    }

    .carousel-btn {
        display: none;
    }

    /* Carousel dot indicators */
    .carousel-dots {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        padding: 1rem 0 0;
    }

    .carousel-dot {
        width: 8px;
        height: 8px;
        background: #d0d0d0;
        border: none;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.2s ease;
        padding: 0;
    }

    .carousel-dot.active {
        background: #dc4f91;
        transform: scale(1.25);
    }

    /* --- Game Grid mobile tweaks --- */
    .game-grid__cta {
        opacity: 1;
        transform: translateY(0);
        font-size: 0.6875rem;
    }

    /* --- Why Choose: compact horizontal layout --- */
    .why-choose__grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .why-choose__item {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        text-align: left;
        padding: 0.75rem 0;
        border-bottom: 1px solid #e0e0e0;
    }

    .why-choose__item:last-child {
        border-bottom: none;
    }

    .why-choose__icon {
        width: 40px;
        height: 40px;
        margin: 0;
        flex-shrink: 0;
    }

    .why-choose__icon svg,
    .why-choose__icon i {
        width: 20px;
        height: 20px;
    }

    .why-choose__item-title {
        font-size: 0.9375rem;
        margin-bottom: 0.125rem;
    }

    .why-choose__item-text {
        font-size: 0.8125rem;
        line-height: 1.4;
    }

    /* --- Dual Banners: hide quiz (promoted above) --- */
    .dual-banners__item--cta {
        display: none;
    }

    .dual-banners__grid {
        grid-template-columns: 1fr;
    }

    /* --- CTA section: stacked buttons --- */
    .cta-section__actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .cta-section__actions .btn {
        width: 100%;
    }
}