/*!
*/
/*--------------------------------------------------------------
>>> Custom CSS for the theme - Optimized for dark theme
----------------------------------------------------------------

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

/* Footer Styles */
.site-footer-custom {
    background-color: var(--color-bg-darker);
    padding: 30px 0;
    width: 100%;
    border-top: 1px solid var(--color-border);
}

.footer-content {
    width: 100%;
    margin: 0;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

.footer-left {
    flex: 1;
}

.footer-links {
    margin-bottom: 20px;
}

.footer-links a {
    color: var(--color-text);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: var(--color-text-secondary);
}

.footer-copyright {
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

.footer-copyright p {
    margin: 0 0 5px 0;
}

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

.payment-methods-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
}

.payment-methods-text {
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.payment-methods {
    display: flex;
    gap: 10px;
    align-items: center;
}

.payment-methods img {
    height: 30px;
    width: auto;
}

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        gap: 30px;
        padding: 0 20px;
    }

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

    .payment-methods-wrapper {
        align-items: flex-start;
    }

    .footer-links {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .footer-links a {
        display: inline-block;
    }
}

/* Category Hero Section Styles */
.category-hero {
    position: relative;
    margin-bottom: 40px;
    background-color: transparent;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    min-height: 400px;
    padding-top: 120px;
    border: 1px solid var(--color-border);
}

.category-hero__banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.category-hero__banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    filter: grayscale(10%) contrast(105%);
}

.category-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0,0,0,0.4) 0%, /* Increased opacity */
        rgba(0,0,0,0.6) 40%, /* Increased opacity */
        rgba(0,0,0,0.95) 100% /* Increased opacity */
    );
    backdrop-filter: blur(0.5px); /* Keeping blur, adjust if needed */
}

.category-hero__content {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    margin-top: -120px;
    z-index: 2;
    display: flex;
    gap: 3rem;
}

.category-hero__main {
    flex: 0 0 55%;
    max-width: 55%;
}

.category-hero__side {
    flex: 0 0 45%;
    max-width: 45%;
    min-height: 300px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.category-hero__inner {
    background: rgba(8, 8, 8, 0.75);
    backdrop-filter: blur(10px);
    padding: 2rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-lg);
    width: 100%;
}

.category-hero__title {
    color: #ffffff;
    font-size: 2.8rem;
    font-weight: 400;
    margin: 1.5rem 0 2rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.category-hero__description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    line-height: 1.7;
    margin-top: 1.5rem;
    font-weight: 300;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.category-hero__description p {
    margin: 0 0 1.25rem 0;
}

.category-hero__description p:last-child {
    margin-bottom: 0;
}

/* Responsive styles for hero section */
@media (max-width: 1200px) {
    .category-hero {
        min-height: 350px;
        padding-top: 100px;
    }

    .category-hero__content {
        flex-direction: column;
        margin-top: -100px;
    }

    .category-hero__main,
    .category-hero__side {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .category-hero__title {
        font-size: 2.5rem;
    }

    .category-hero__side {
        min-height: 200px;
        margin-top: 1rem;
    }

    /* Override for Ads Version Hero within this breakpoint */
    .category-hero.category-hero--ads-version .category-hero__content { /* Increased specificity */
        flex-direction: row; /* Keep row direction for ads version */
    }

    .category-hero.category-hero--ads-version .category-hero__main { /* Increased specificity */
        flex: 0 0 55%; /* Maintain width */
        max-width: 55%; /* Maintain width */
    }

    .category-hero.category-hero--ads-version .category-hero__side { /* Increased specificity */
        flex: 0 0 45%; /* Maintain width */
        max-width: 45%; /* Maintain width */
        margin-top: 0; /* Remove top margin added in column layout */
    }
}

@media (max-width: 768px) {
    .category-hero {
        min-height: 500px;
        padding-top: 150px;
    }
    
    .category-hero__content {
        margin-top: -150px;
        padding: 1.5rem;
    }
    
    .category-hero__inner {
        padding: 1.5rem;
    }
    
    .category-hero__title {
        font-size: 2.5rem;
        margin: 1rem 0 1.5rem;
    }
    
    .category-hero__description {
        font-size: 1rem;
        line-height: 1.6;
    }

    /* Override for Ads Version Hero within this breakpoint */
    .category-hero.category-hero--ads-version .category-hero__content {
        flex-direction: row; /* Keep row direction for ads version */
        /* Adjust padding or other styles if needed for smaller screens */
    }

    .category-hero.category-hero--ads-version .category-hero__main {
        flex: 0 0 55%; /* Maintain width */
        max-width: 55%; /* Maintain width */
        /* Adjust padding or other styles if needed for smaller screens */
    }

    .category-hero.category-hero--ads-version .category-hero__side {
        flex: 0 0 45%; /* Maintain width */
        max-width: 45%; /* Maintain width */
        margin-top: 0; /* Remove top margin added in column layout */
        /* Adjust padding or other styles if needed for smaller screens */
    }
}

/* WooCommerce Breadcrumb customization for hero */
.category-hero .woocommerce-breadcrumb {
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}

.category-hero .woocommerce-breadcrumb a {
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.category-hero .woocommerce-breadcrumb a:hover {
    opacity: 0.9;
    border-bottom-color: rgba(255, 255, 255, 0.6);
}

/* Responsive styles for hero section */
@media (max-width: 1400px) {
    .category-hero__title {
        font-size: 3.5rem;
    }
    
    .category-hero__content {
        padding: 2.5rem;
    }
    
    .category-hero__inner {
        padding: 2rem;
    }
}

@media (max-width: 1024px) {
    .category-hero__banner {
        height: 450px;
    }

    .category-hero__title {
        font-size: 3rem;
    }
    
    .category-hero__description {
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    .category-hero__banner {
        height: 350px;
    }

    .category-hero__content {
        margin-top: -180px;
        padding: 1.5rem;
    }

    .category-hero__inner {
        padding: 2rem;
    }

    .category-hero__title {
        font-size: 2.5rem;
        margin: 0.75rem 0 1.25rem;
    }

    .category-hero__description {
        font-size: 1.1rem;
        line-height: 1.7;
    }
}

@media (max-width: 480px) {
    .category-hero__banner {
        height: 300px;
    }

    .category-hero__content {
        margin-top: -160px;
        padding: 1rem;
    }

    .category-hero__inner {
        padding: 1.5rem;
    }

    .category-hero__title {
        font-size: 2rem;
        margin: 0.5rem 0 1rem;
    }

    .category-hero__description {
        font-size: 1rem;
        line-height: 1.6;
        margin-top: 1rem;
    }
    
    .category-hero .woocommerce-breadcrumb {
        font-size: 0.8rem;
    }
}

/* CSS Variables - Optimized for dark theme */
:root {
    /* Core colors */
    --color-bg-dark: #121212;
    --color-bg-darker: #0e0e0e;
    --color-bg-light: #171717;
    --color-bg-hover: #252525;
    --color-text: #f1f1f1;
    --color-text-secondary: #bbbbbb;
    
    /* Borders */
    --color-border: rgba(255, 255, 255, 0.1);
    --color-border-hover: rgba(255, 255, 255, 0.2);
    
    /* Effects */
    --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
    --radius-sm: 4px;
    --radius-lg: 8px;
    --transition: all 0.2s ease;
    
    /* Scrollbar */
    --scrollbar-width: 8px;
    --scrollbar-track: #111;
    --scrollbar-thumb: #444;
    --scrollbar-thumb-hover: #555;
}

/* Body styles*/
/*Commented out so that the checkout scrolls when country is changed. 
Might need to somehow move the scroll bar down underneth the top nav bar*/

 html:not(.woocommerce-checkout) {
    overflow: hidden;
}


body:not(.woocommerce-checkout) {
    overflow-y: scroll;
    height: 100vh;
}

/* Lock layout on *non-checkout* pages */
body:not(.woocommerce-checkout):not(.woocommerce-account) {
    height: 100vh;
    overflow-y: scroll; /* or auto */
  }
  
  /* Then remove the lock on checkout and account pages */
  body.woocommerce-checkout,
  body.woocommerce-account {
    height: auto;
    overflow: visible;
  }

/**
 * Scroll box below the header.
 *
 * The body is the scroll box (rules above). Starting it under the fixed header
 * stops the header covering the top of the scrollbar. Account pages scroll the
 * same way; the checkout keeps the normal window scroll. Wide screens only.
 */
@media (min-width: 782px) {
    body:not(.woocommerce-checkout):not(.woocommerce-account),
    body.woocommerce-account:not(.woocommerce-checkout) {
        margin-top: var(--navbar-height);
        height: calc(100vh - var(--navbar-height) - var(--adminbar-height, 0px));
        overflow-y: scroll;
        --content-margin-top: 0px;
    }
    /* Script can still scroll the hidden root, which slides the scroll box up under the header and
       leaves a gap at the bottom. Padding the root by the header keeps jumps inside the scroll box. */
    html:has(> body:not(.woocommerce-checkout)) {
        scroll-padding-top: calc(var(--navbar-height) + var(--wp-admin--admin-bar--height, 0px));
    }
    /* Hidden screen reader text sits far down the page and gives the root room to scroll. Pinning it
       to the top removes that room, so restoring the scroll position on Back cannot slide the page up. */
    body:not(.woocommerce-checkout) :is(.screen-reader-text, .sd-vh, .sv-sr, .sa-vh, .svh-vh, .a11y-speak-region):not(:focus) {
        top: 0;
        left: 0;
    }
    /* checkout-style.css also loads on account pages and lets html scroll; keep html still there. */
    html:has(> body.woocommerce-account:not(.woocommerce-checkout)) {
        overflow: hidden !important;
    }
    /* The category rail sticks to the top of the scroll box, now directly under the header. */
    body:not(.woocommerce-checkout):not(.woocommerce-account) #categorySidebar {
        top: 0;
    }
    /* Account jump targets: the header is already above the scroll box, so only the gap is needed. */
    body.woocommerce-account .sa-acc .sa-lib {
        scroll-margin-top: 16px;
    }
    body.woocommerce-account .sa-acc .sa-ftools,
    body.woocommerce-account .sa-acc .sa-anchor {
        scroll-margin-top: 24px;
    }
    body.woocommerce-account .sa-login #sa-create {
        scroll-margin-top: 16px;
    }
    /* Page jump targets elsewhere: same reason, only the gap is needed. */
    body:not(.woocommerce-checkout):not(.woocommerce-account) #catroot-filter-top,
    body:not(.woocommerce-checkout):not(.woocommerce-account) #catroot-results,
    body:not(.woocommerce-checkout):not(.woocommerce-account) #catroot-swap,
    body:not(.woocommerce-checkout):not(.woocommerce-account) #cat-libraries,
    body:not(.woocommerce-checkout):not(.woocommerce-account) #hm-ways {
        scroll-margin-top: 16px;
    }
    body:not(.woocommerce-checkout):not(.woocommerce-account) #all-deals {
        scroll-margin-top: 24px;
    }
    body:not(.woocommerce-checkout):not(.woocommerce-account) .nr-day,
    body:not(.woocommerce-checkout):not(.woocommerce-account) .nr-list {
        scroll-margin-top: 26px;
    }
}
  
/* move content body up to top navbar*/
/* div#content {MARGIN-TOP: 20px;} */

/* Category Sidebar Mobile Styles */
.category-menu-trigger {
    display: none;
    position: fixed;
    top: 70px; /* Positioned below the nav bar */
    right: 1rem;
    z-index: 998; /* Below the nav bar z-index */
}

/* Category List Styles */
.category-list {
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
}

.category-list li {
    margin: 0;
    padding: 0;
    position: relative;
}

.category-list a {
    display: block;
    padding: 0.6rem 1rem;
    color: var(--color-text);
    text-decoration: none;
    transition: all 0.3s ease;
    border-left: 2px solid transparent;
    position: relative;
    z-index: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-list a:hover {
    background: var(--color-bg-hover);
    border-left-color: var(--color-border-hover);
    padding-left: 1.2rem;
}

.category-list li.current-cat > a {
    background: var(--color-bg-light);
    border-left-color: var(--color-text);
    font-weight: 500;
    padding-left: 1.2rem;
}

/* Subcategory List Styles */
.subcategory-list {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.subcategory-list li {
    margin: 0;
    padding: 0;
    position: relative;
}

.subcategory-list a {
    padding: 0.5rem 0.5rem 0.5rem 1.5rem;
    font-size: 0.9em;
    opacity: 0.9;
}

.subcategory-list a:hover {
    padding-left: 1.7rem;
}

.subcategory-list .subcategory-list a {
    padding-left: 2rem;
    font-size: 0.85em;
    opacity: 0.8;
}

.subcategory-list .subcategory-list a:hover {
    padding-left: 2.2rem;
}

/* Mobile Sidebar Enhancement */
@media (max-width: 768px) {
    .product-category-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .product-category-sidebar.is-active {
        transform: translateX(0);
    }

    .category-menu-trigger button {
        transform: scale(1);
        transition: transform 0.2s ease, background-color 0.2s ease;
    }

    .category-menu-trigger button:active {
        transform: scale(0.95);
    }
}


.category-menu-trigger button {
    background: var(--color-bg-dark);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.5rem;
    color: var(--color-text);
    cursor: pointer;
    transition: var(--transition);
}

.category-menu-trigger button:hover {
    background: var(--color-bg-hover);
}

.category-menu-trigger button.is-active {
    background: var(--color-bg-hover);
}

/* Product Category Layout */
.custom-product-category-page {
    display: flex;
    min-height: 100vh;
 /*   margin-top: 40px; */
}

/* Product Grid Layout */
@media (max-width: 1200px) {
    .custom-product-category-page ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
    }
    .custom-product-category-page ul.products li.product {
        width: 100% !important;
        margin: 0 !important;
        float: none !important;
        clear: none !important;
    }
    .custom-product-category-page ul.products::before,
    .custom-product-category-page ul.products::after {
        display: none !important;
    }
}

.product-category-sidebar {
    background: #212121;
    border-right: 1px solid var(--color-border);
    width: 200px;
    height: 100vh;
    flex-shrink: 0;
    overflow-y: auto;
    position: sticky;
    top: 0;
    font-size: 0.9rem;
}

.product-category-navigation {
    padding: 0.5rem 0;
}

.product-category-sidebar::-webkit-scrollbar {
    width: 4px;
}

.product-category-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.product-category-sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.product-category-sidebar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.main-content-and-footer {
    flex-grow: 1;
    width: calc(100% - 250px);
    padding: 1rem;
}

@media (max-width: 768px) {
    .category-menu-trigger {
        display: block;
    }

    .custom-product-category-page {
        display: block;
    }

    .product-category-sidebar {
        position: fixed;
        top: 70px;
        left: -250px;
        height: calc(100vh - 70px);
        z-index: 999;
        transition: var(--transition);
        background: var(--color-bg-darker);
        overflow-y: auto;
    }

    .product-category-sidebar.is-active {
        left: 0;
        box-shadow: var(--shadow-lg);
    }

    .main-content-and-footer {
        width: 100%;
        padding: 1rem;
    }
}

/* Scrollbar styling */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

::-webkit-scrollbar {
    width: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: var(--radius-sm);
    border: 1px solid var(--scrollbar-track);
    transition: var(--transition);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}

/* Search form styles */
.search-form {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 300px;
}

.search-form input[type="search"] {
    width: 100% !important;
    padding: 1.1rem 3.5rem 1.1rem 1rem !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    background-color: var(--color-bg-light) !important;
    color: var(--color-text) !important;
    font-size: 0.9rem !important;
    transition: all 0.3s ease !important;
    box-shadow: var(--shadow-sm) !important;
}

.search-form input[type="search"]:focus {
    outline: none !important;
    border-color: var(--color-border-hover) !important;
    background-color: var(--color-bg-hover) !important;
    box-shadow: var(--shadow-lg) !important;
}

.search-form input[type="search"]::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.search-form button {
    position: absolute;
    right: 2px;
    top: 2px;
    bottom: 2px;
    width: 48px;
    background: rgba(255, 255, 255, 0.1);
    border: none !important;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--color-text);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: -1px 0 0 var(--color-border);
}

.search-form button:hover {
    background: rgba(255, 255, 255, 0.2);
}

.search-form .icon-search {
    width: 16px;
    height: 16px;
    opacity: 1;
}

/* Styles for search form inputs on 404 error pages */
.error-404 .search-form input,
.not-found .search-form input {
    border-radius: var(--radius-sm);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    background-color: var(--color-bg-light);
    color: var(--color-text);
}

/* Login bar styles */
.login-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 5px;
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
    font-family: 'Source Sans Pro';
    flex-wrap: wrap; /* Allow items to wrap to the next line */
}

.login-bar a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text);
    text-decoration: none;
}

.login-bar .user-profile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    flex-shrink: 0; /* Prevent the icon from shrinking */
}

.login-bar .user-profile img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

.login-bar .username {
    flex: 1;
    font-size: 14px;
    color: var(--color-text);
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden; /* Hide overflow text */
    text-overflow: ellipsis; /* Add ellipsis for overflow text */
}

.login-bar .triangle-icon {
    margin-left: auto;
    color: var(--color-text);
    transition: transform 0.2s ease;
    flex-shrink: 0; /* Prevent the icon from shrinking */
}

.login-bar .user-profile.active .triangle-icon {
    transform: rotate(180deg);
}

.login-bar svg {
    width: 20px;
    height: 20px;
    margin-bottom: 5px;
    vertical-align: middle;
    fill: var(--color-text-secondary);
}

/* User menu styles */
.user-menu-wrapper {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    background-color: var(--color-bg-darker);
    border-top: 1px solid var(--color-border);
    display: none;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
}

.user-menu-wrapper.active {
    display: block;
}

.user-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 15px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
}

.user-menu li {
    margin: 0;
    padding: 0;
    position: relative;
}

.user-menu a {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: var(--transition);
    font-family: Helvetica, Arial, sans-serif;
    width: 100%;
}

.user-menu a:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-text);
}

.user-menu a.active {
    background-color: var(--color-bg-light);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    color: var(--color-text);
}

.user-menu svg {
    width: 16px;
    height: 16px;
    margin-right: 12px;
    color: var(--color-primary);
}

/* Add horizontal line under "Account details" */
.menu-item-32 {
    border-bottom: 1px solid var(--color-text);
    margin-bottom: 5px;
}

/* Site sidebar footer */
.site-sidebar-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: var(--color-bg-light);
    color: var(--color-text-secondary);
    text-align: center;
    padding: 10px 0;
    box-shadow: var(--shadow-sm);
}

/* Sidebar styles */
.primary-menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.nav > li {
    margin-bottom: 10px;
}

.flex {
    flex-grow: 1;
}

.site-sidebar {
    position: fixed;
    top: calc(var(--adminbar-height) + var(--navbar-height));
    left: 0;
    bottom: 0;
    z-index: 990;
    overflow-y: auto;
    scrollbar-width: none;
    transition: var(--transition);
}

.site-sidebar::-webkit-scrollbar {
    display: none;
}

.sidebar-inner {
    position: sticky;
    top: 6rem;
    z-index: 1;
}

/* Comments area styles */
.entry-content-inner .comments-area {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

/* Content styles */
.ranks li {
    background-color: var(--color-bg-light);
    box-shadow: var(--shadow-sm);
}

.phone {
    border-radius: 1.5rem;
}

.phone figure {
    border-radius: inherit;
    margin: 0;
}

.archive-content-column > .entry {
    background-color: var(--color-bg-light);
    box-shadow: var(--shadow-sm);
    padding: 0 calc(var(--y-gap) * 2);
    border-radius: var(--radius-sm);
}

.archive-content-column article:not(.block-loop-item) .entry-header {
    margin-top: calc(var(--y-gap) * 2);
}

.station-content {
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
}

.dropdown-menu,
.mobile-menu,
.plyr-playlist,
.avatar {
    background-color: var(--color-bg-light);
}

.site-header .search-form:focus {
    background-color: var(--color-bg-light);
}

/* Media queries for responsive design */
@media (max-width: 599px) {
    .header-station,
    .header-user {
        flex-direction: column;
        justify-content: center;
        margin-top: 5vw;
        padding: 1.5rem;
        text-align: center;
    }
    
    .header-station > .entry-header,
    .header-user > .entry-header {
        margin: 0;
    }
    
    .header-station .entry-meta,
    .header-station .entry-title,
    .header-user .entry-meta,
    .header-user .entry-title,
    .header-station .entry-info {
        justify-content: center;
    }
    
    .header-station > .post-thumbnail,
    .header-user > .post-thumbnail {
        width: 80%;
        align-self: center;
        margin: 0 auto;
    }
    
    .site-title {
        font-size: 1rem;
        line-height: 1;
    }
    
    .link-more {
        display: none;
    }
}

@media (min-width: 480px) {
    .entry-content-inner .entry-tag,
    .ranks,
    .station-content,
    .station-release {
        margin-left: 4.75rem;
        margin-right: 4.75rem;
    }
}

@media (min-width: 600px) {
    .entry-header-container .entry-meta .btn-more {
        margin-inline-start: auto;
    }
    
    .site-header .search-form {
        background-color: var(--color-bg-light);
    }
    
    .header-station > .post-thumbnail,
    .header-user > .post-thumbnail {
        width: 230px;
    }
}

@media (max-width: 781px) {
    .header-container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .site-sidebar {
        top: 0;
        width: 300px;
    }
    
    .header-station h1 {
        font-size: 2rem;
    }
    
    .ranks {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 782px) and (max-width: 991px) {
    .primary-menu-has-icon {
        --side-width: var(--side-folded-width);
    }
    
    .primary-menu-has-icon .site-sidebar {
        .site-title,
        .site-sidebar-header,
        .site-sidebar-footer {
            display: none;
        }
        
        #icon-sidemenu {
            justify-content: center;
        }
        
        .menu-header {
            padding: 1rem 0.5rem;
            font-size: 10px;
            text-align: center;
        }
        
        .nav {
            .menu-item-has-children > a:after {
                display: none;
            }
            
            .sub-menu {
                display: none !important;
            }
            
            a {
                text-align: center;
                justify-content: center;
                
                span {
                    display: none;
                    position: absolute;
                    background-color: var(--color-bg-light);
                    color: var(--color-text);
                    border-radius: 3px;
                    font-size: 10px;
                    line-height: 1;
                    bottom: 100%;
                    left: 50%;
                    transform: translate(-50%, 0);
                    padding: 4px 6px;
                    margin: 0;
                    
                    &:after {
                        content: "";
                        width: 0;
                        height: 0;
                        position: absolute;
                        bottom: -3px;
                        left: 50%;
                        margin-left: -3px;
                        border-color: var(--color-bg-light) transparent transparent transparent;
                        border-style: solid;
                        border-width: 5px 4px 0 4px;
                        background-color: transparent;
                    }
                }
                
                &:hover span {
                    display: block;
                }
            }
        }
    }
}

/* WooCommerce styles */
.woocommerce.full-width {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: 20px;
    padding-right: 20px;
}

.cart-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    padding: 20px;
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
    background-color: var(--color-bg-darker);
}

.cart-icon-wrapper svg {
    width: 24px;
    height: 24px;
    stroke: var(--color-text);
    vertical-align: middle;
    transition: var(--transition);
}

.cart-icon-wrapper:hover svg {
    opacity: 0.8;
}

.cart-count {
    position: absolute;
    top: 15px;
    right: 15px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background-color: var(--color-bg-light);
    color: var(--color-text);
    font-size: 11px;
    font-weight: bold;
    line-height: 16px;
    text-align: center;
    border-radius: var(--radius-lg);
    transform: translate(50%, -50%);
}

@media (max-width: 781px) {
    .cart-icon-wrapper {
        padding: 0 10px;
    }
}

/* Login modal styles */
.lrm-user-modal-container {
    --input-bg: var(--color-bg-light);
    --input-border: var(--color-border);
    --input-border-focus: var(--color-border-hover);
}

.lrm-user-modal-container input,
.lrm-user-modal-container select,
.lrm-user-modal-container textarea {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--color-text);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.lrm-user-modal-container-inner {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 1.5rem !important;
    background: var(--color-bg-light) !important;
    box-shadow: var(--shadow-sm) !important;
}

.lrm-main.lrm-font-svg.lrm-user-modal.lrm-btn-style--default.is-visible {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}

.lrm-user-modal-container .lrm-switcher a {
    background: var(--color-bg-light);
    border: none !important;
    transition: var(--transition);
}

.lrm-user-modal-container .lrm-switcher a:hover,
.lrm-switch-to-link.selected,
.lrm-user-modal-container .lrm-switcher.-is-not-login-only a.selected {
    background: var(--color-bg-hover) !important;
    color: var(--color-text) !important;
    border: none !important;
}

.lrm-form-message {
    margin-bottom: 1.5rem;
    color: var(--color-text-secondary);
}

.lrm-form button,
.lrm-form button[type=submit] {
    background: var(--color-bg-light) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 1rem 2rem !important;
    width: 100%;
    margin-top: 1.5rem !important;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.9rem !important;
    transition: var(--transition) !important;
}

.lrm-form button:hover,
.lrm-form button[type=submit]:hover {
    background: var(--color-bg-hover) !important;
    border-color: var(--color-border-hover) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.lrm-form button:active,
.lrm-form button[type=submit]:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Remember Me Checkbox */
.lrm-nice-checkbox__label input[type="checkbox"]:checked ~ .lrm-nice-checkbox__indicator {
    background: var(--color-bg-light);
    border-color: var(--color-border-hover);
    transition: var(--transition);
}

.lrm-nice-checkbox__label input[type="checkbox"]:checked::after {
    content: "✓";
    position: absolute;
    color: var(--color-text);
    font-size: 14px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.lrm-nice-checkbox__label input[type="checkbox"]:hover {
    border-color: var(--color-border-hover);
}

/* Elementor button styles */
.elementor-192 .elementor-element.elementor-element-64638fb6 .elementor-button {
    background-color: var(--color-bg-light) !important;
    color: var(--color-text) !important;
    padding: 1rem 2rem !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--color-border) !important;
    transition: var(--transition) !important;
    width: 100%;
    margin-top: 1.5rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.9rem !important;
    position: relative;
    overflow: hidden;
}

.elementor-192 .elementor-element.elementor-element-64638fb6 .elementor-button:hover {
    background-color: var(--color-bg-hover) !important;
    border-color: var(--color-border-hover) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.elementor-192 .elementor-element.elementor-element-64638fb6 .elementor-button:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Vendor Hero Section - Extracted to assets/css/vendor-store.css */

/* Sale price discount tag */
.custom-label {
    border-top-right-radius: 0px !important;
    border-top-left-radius: 0px !important;
    padding-top: 1px !important;
    margin-top: 15px !important;
}

/* Wishlist Styles */
.iconic-ww-modal__content {
    background-color: var(--color-bg-dark);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
}

input#iconic-ww-wishlist-title, 
input#iconic-ww-wishlist-user-name, 
input#iconic-ww-wishlist-email,
input.iconic-ww-copy__field.iconic-ww-input-field {
    background: var(--color-bg-light) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text);
    padding: 0.75rem 1rem !important;
    border-radius: var(--radius-sm) !important;
    transition: var(--transition);
    font-family: inherit;
}

input#iconic-ww-wishlist-title:focus,
input#iconic-ww-wishlist-user-name:focus,
input#iconic-ww-wishlist-email:focus,
input.iconic-ww-copy__field.iconic-ww-input-field:focus {
    border-color: var(--color-border-hover) !important;
    outline: none !important;
    box-shadow: var(--shadow-sm) !important;
}

ul.iconic-ww-wishlist-meta {
    margin-top: 30px;
}

.iconic-ww-button--compact {
    display: inline-flex;
    margin: 1.5rem 0;
}

/* Wishlist Table Styles */
.iconic-ww-wishlists-table,
.iconic-ww-wishlist-items {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 2rem 0;
    background: var(--color-bg-dark);
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
}

.iconic-ww-wishlists-table thead th,
.iconic-ww-wishlist-items thead th {
    background: var(--color-bg-light);
    color: var(--color-text);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.iconic-ww-wishlists-table tbody td,
.iconic-ww-wishlist-items tbody td {
    padding: 1.25rem 1.5rem;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
    transition: var(--transition);
    vertical-align: middle;
}

.iconic-ww-wishlists-table tbody tr:last-child td,
.iconic-ww-wishlist-items tbody tr:last-child td {
    border-bottom: none;
}

.iconic-ww-wishlists-table tbody tr:hover td,
.iconic-ww-wishlist-items tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.02);
}

.iconic-ww-wishlists-table__title-link {
    color: var(--color-text);
    text-decoration: none;
    transition: var(--transition);
}

.iconic-ww-wishlists-table__title-link:hover {
    color: var(--color-text);
    opacity: 0.8;
}

.iconic-ww-wishlists-table__actions {
    margin-top: 0.5rem;
}

.iconic-ww-wishlist-meta {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1rem;
}

.iconic-ww-wishlist-meta__item a {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition);
}

.iconic-ww-wishlist-meta__item a:hover {
    color: var(--color-text);
}

/* Wishlist Button Styles */
.iconic-ww-button,
.woocommerce-info .button,
.iconic-ww-wishlist-items__item-column--add-to-cart .button {
    background: var(--color-bg-light);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: var(--transition);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.iconic-ww-button:hover,
.woocommerce-info .button:hover,
.iconic-ww-wishlist-items__item-column--add-to-cart .button:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.iconic-ww-button:active,
.woocommerce-info .button:active,
.iconic-ww-wishlist-items__item-column--add-to-cart .button:active {
    transform: translateY(0);
    box-shadow: none;
}

.iconic-ww-nav {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.iconic-ww-nav a {
    color: var(--color-text);
    text-decoration: none;
    padding: 0.5rem 1rem;
    background: var(--color-bg-light);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.iconic-ww-nav a:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.iconic-ww-nav svg {
    width: 16px;
    height: 16px;
}

button.iconic-ww-button.iconic-ww-button--create-wishlist.iconic-ww-button--compact.button {
    margin-top: 0px !important;
}

/* Fix Create Wishlist button icon */
.iconic-ww-button .iconic-ww-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.iconic-ww-button .iconic-ww-icon svg {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px;
}

/* Wishlists toolbar with Create button */
.iconic-ww-wishlists-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-top: 2rem;
    margin-bottom: 15px;
}

.iconic-ww-wishlists-toolbar + .iconic-ww-wishlists-table {
    margin-top: 0;
}

.iconic-ww-wishlists-toolbar .iconic-ww-button--create-wishlist {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

/* Product Thumbnail */
.iconic-ww-wishlist-items__item-column--thumbnail {
    width: 80px;
}

.iconic-ww-wishlist-items__item-column--thumbnail img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

/* Product Name and Details */
.iconic-ww-wishlist-items__item-name a {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.iconic-ww-wishlist-items__item-name a:hover {
    opacity: 0.8;
}

/* Delete Button */
.iconic-ww-wishlist-items__item-column--delete-item {
    width: 40px;
}

.iconic-ww-button--delete {
    color: var(--color-text-secondary);
    transition: var(--transition);
    padding: 0;
    background: none;
    border: none;
}

.iconic-ww-button--delete:hover {
    color: #ff4444;
    transform: none;
    box-shadow: none;
}

/* Price Column */
.iconic-ww-wishlist-items__item-column--price {
    font-weight: 500;
    color: var(--color-text);
}

/* Added Date */
.iconic-ww-wishlist-items__added-date {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.75rem;
}

/* Empty Wishlist Message */
.woocommerce-info {
    background: var(--color-bg-dark);
    color: var(--color-text-secondary);
    padding: 1.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    margin: 2rem 0;
}

.woocommerce-info .button {
    margin-left: 1rem;
}

.iconic-ww-select-container .select2-dropdown {
margin-top: 0px !important;
}


/* Navigation menu styling */
nav#primary-menu {
    padding-top: 10px; /* Top padding for navigation menu */
    padding-bottom: 10px; /* Bottom padding for navigation menu */
    background-color: #171717; /* Dark grey navigation menu background color */
}

/* Navigation links styling */
.product-category-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-category-navigation li {
    line-height: 1.2;
}

.product-category-navigation a {
    display: block;
    text-decoration: none;
    color: #dbdbdb;
    padding: 12px;
    transition: all 0.2s ease;
}

.product-category-navigation ul ul {
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    margin-left: 12px;
}

.product-category-navigation ul ul a {
    font-size: 0.95em;
    padding: 5px 12px;
    opacity: 0.85;
}

.product-category-navigation a:hover {
    background-color: #dddddd; /* Hover background color */
    color: #333333; /* Hover text color */
}

/* Social Proof Banner for Google Ads Traffic */
.sonniss-social-proof-banner {
    padding: 3rem 2rem;
    background: #0a0a0a; /* Consider var(--color-bg-darker) or a new variable */
    margin: 2rem 0;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1); /* Consider var(--color-border) */
}

.sonniss-social-proof-banner__header {
    text-align: center;
    margin-bottom: 2rem;
}

.sonniss-social-proof-banner .trust-title {
    font-size: 1.5rem;
    color: #ffffff; /* Consider var(--color-text) */
    margin-bottom: 0;
    font-weight: 600;
}

.sonniss-social-proof-banner .client-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    max-width: 1300px;
    margin: 0 auto;
}

.sonniss-social-proof-banner .trusted-company {
    flex: 0 1 180px;
    filter: grayscale(100%) brightness(0.8);
    transition: all 0.3s ease; /* Consider var(--transition) */
    opacity: 0.6;
}

.sonniss-social-proof-banner .trusted-company:hover {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
}

.sonniss-social-proof-banner .trusted-company img {
    width: 100%;
    height: auto;
    max-height: 70px;
    object-fit: contain;
}

/* Category Bestseller Highlight */
.category-bestseller-highlight {
    background: rgb(91 91 91 / 5%);
    border: 1px solid rgba(255, 255, 255, 0.1); /* Consider var(--color-border) */
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin: 2rem 0;
    position: relative;
}

.category-bestseller-highlight::before {
    content: "🏆 BESTSELLER";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #c9a376; /* Consider a theme accent color variable */
    color: #000; /* Contrast color for the accent */
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
}

.bestseller-title {
    color: #ffffff; /* Consider var(--color-text) */
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1.5rem 0;
    text-align: center;
}

.category-bestseller-highlight .woocommerce ul.products {
    margin: 0 !important;
}

/* Trust Features */
.ad-traffic-features {
    background: rgb(91 91 91 / 5%);
    border: 1px solid rgba(255, 255, 255, 0.1); /* Consider var(--color-border) */
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin: 1.5rem 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    text-align: center;
}

.ad-traffic-feature {
    color: rgba(255, 255, 255, 0.8); /* Consider var(--color-text-secondary) or a slight variation */
    font-size: 0.9rem;
}

.ad-traffic-feature strong {
    color: #c9a376; /* Consider a theme accent color variable */
    display: block;
    margin-bottom: 0.25rem;
}

/* Mobile Responsive for new elements */
@media (max-width: 768px) {
    .sonniss-social-proof-banner {
        padding: 2rem 1rem;
    }
    
    .sonniss-social-proof-banner .trust-title {
        font-size: 1.25rem;
    }
    
    .sonniss-social-proof-banner .client-logos {
        gap: 1rem;
    }
    
    .sonniss-social-proof-banner .trusted-company {
        flex: 0 1 130px;
    }
    
    .ad-traffic-features {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* Styling for the new simplified hero (Ads Version) */
.category-hero.category-hero--ads-version {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 350px; /* Or adjust as per original .category-hero if different */
}

/* .category-hero__banner and .category-hero__overlay are shared and styled above */

.category-hero.category-hero--ads-version .category-hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 2rem; /* Padding for the content within the ads hero */
    display: flex; /* Added to help center .category-hero__inner-simplified */
    flex-direction: column; /* Added to help center .category-hero__inner-simplified */
    justify-content: center; /* Added to help center .category-hero__inner-simplified */
    align-items: center; /* Added to help center .category-hero__inner-simplified */
}

.category-hero.category-hero--ads-version .category-hero__inner-simplified {
    /* This div wraps title and description for the ads hero */
    /* Add any specific styling if needed, e.g., max-width for readability */
}

.category-hero.category-hero--ads-version .category-hero__title {
    color: var(--color-text);
    margin-top: 0;
    margin-bottom: 0.75rem; /* Space between title and description in ads hero */
    /* Inherits font-size etc. from general .category-hero__title or can be overridden */
}

.category-hero.category-hero--ads-version .category-hero__description {
    color: rgba(255, 255, 255, 0.85); /* Slightly brighter for ads hero description */
    font-size: 1rem; /* Adjust as needed for ads hero */
    line-height: 1.6;
    max-width: 700px; /* Constrain width for readability */
    margin-left: auto;
    margin-right: auto;
}

.category-hero.category-hero--ads-version .category-hero__description p {
    margin-bottom: 1em;
}

/* Styling for the category description when it was outside the hero (now removed) */
/* .category-description-wrapper { ... } */
/* .category-description-wrapper p { ... } */

/* Ensure breadcrumbs are styled correctly above the hero (for Ads version) */
.product-category-main-content > .woocommerce-breadcrumb { /* This rule applies if breadcrumbs are direct child */
    margin-bottom: 1.5rem;
    padding: 0 1rem;
    /* General breadcrumb styling is likely handled by WooCommerce or theme defaults */
}

/* Note: The original .category-hero, .category-hero__content, .category-hero__main,
   .category-hero__inner, .category-hero__title, .category-hero__description rules
   (lines 112-216 approx.) will apply to the non-ads version of the hero.
   The .category-hero--ads-version class provides specificity for the ads layout.
*/

/* ========================================
   SONNISS HERO - CONVERSION FOCUSED
   ======================================== */

.sonniss-category-hero {
    position: relative;
    min-height: 60vh;
    background: var(--color-bg-darker);
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: 40px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
}

.sonniss-category-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.25;
}

.sonniss-category-hero__bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    filter: grayscale(10%) contrast(105%);
}

.sonniss-category-hero__overlay {
    /* Ensure overlay is positioned above the background image */
    position: absolute;
    inset: 0;
    background: linear-gradient(
        169deg,
        rgb(14 14 14 / 95%) 0%,
        rgb(14 14 14 / 80%) 50%,
        rgb(14 14 14 / 20%) 100%
    );
    z-index: 2; /* Ensure it's above the image (z-index: 1) */
}

/* Lighter overlay for specific categories */
.sonniss-category-hero--lighter-overlay .sonniss-category-hero__overlay {
    background: linear-gradient(
        20deg,
        rgb(14 14 14 / 80%) 0%, /* Lighter start */
        rgb(14 14 14 / 36%) 50%, /* Lighter middle */
        rgb(14 14 14 / 10%) 100% /* Lighter end */
    );
}

.sonniss-category-hero__container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 2rem 2rem;
}

/* Default hero content (single column for front page, etc.) - This rule might become redundant or need adjustment if .sonniss-hero is now only on front page and styled in sonniss-home.css */
/* For now, we assume .sonniss-hero__content might still be used elsewhere or as a base, so we keep its general flex centering. */
/* If .sonniss-hero is *only* on the front page, its content styling is primarily in sonniss-home.css */
.sonniss-hero__content { /* This class is still on the front page hero */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Two-column layout specifically for category page hero */
.custom-product-category-page .sonniss-category-hero__content { /* Updated to new category hero class */
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 3rem;
    align-items: start;
    text-align: left;
    min-height: 50vh;
}

/* Value Stack - Left Side */
.value-stack {
 /*    max-width: 700px; */
    display: flex;
    flex-direction: column;
}

.deal-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    color: white;
    border-radius: 50px;
    padding: 0.5rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
    max-width: 200px;
}

.deal-badge__icon {
    font-size: 1rem;
}

.sonniss-category-hero__headline {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 1.5rem 0;
    color: var(--color-text);
    letter-spacing: -0.02em;
}

.value-props {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.value-prop {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--color-text);
    font-weight: 500;
}

.value-prop__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: #22c55e;
    color: white;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Value props in CTA section */
.cta-section .value-props {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.cta-section .value-prop {
    font-size: 0.85rem;
}

.sonniss-category-hero__description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

.sonniss-category-hero__description p {
    margin-bottom: 1rem;
}

.sonniss-category-hero__description p:last-child {
    margin-bottom: 0;
}

/* CTA Section - Right Side */
.cta-section {
    background: rgba(8, 8, 8, 0.8);
    backdrop-filter: blur(15px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    height: fit-content;
    align-self: start;
    margin-top: 4rem; /* Push CTA section down to align with title */
}

.social-proof {
    margin-bottom: 2rem;
}

.social-proof__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.stat {
    text-align: center;
    padding: 1rem;
    background: var(--color-bg-light);
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.stat__number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat__label {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.social-proof__trust {
    text-align: center;
    padding: 0.75rem;
    background: var(--color-bg-light);
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.trust-text {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.sonniss-cta {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 50%, rgba(0, 0, 0, 0.05) 100%),
        rgba(174, 110, 49, 0.1);
    color: #ffffff;
    border: 1px solid rgba(174, 110, 49, 0.3);
    border-radius: 8px;
    padding: 1.25rem 2rem;
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
}

.sonniss-cta:hover {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 50%, rgba(0, 0, 0, 0.08) 100%),
        rgba(174, 110, 49, 0.15);
    border-color: rgba(174, 110, 49, 0.4);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.sonniss-cta__text {
    font-weight: 600;
}

.sonniss-cta__arrow {
    font-size: 1.2rem;
    transition: transform 0.2s ease;
}

.sonniss-cta:hover .sonniss-cta__arrow {
    transform: translateY(2px);
}

/* Preload emojis */
.sonniss-category-hero::before {
    content: "🔥✓⭐";
    position: absolute;
    left: -9999px;
    top: -9999px;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 0;
    opacity: 0;
    pointer-events: none;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .custom-product-category-page .sonniss-category-hero__content { /* Updated to new category hero class */
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .cta-section { /* This is a child of .sonniss-category-hero__content, so it's fine */
        position: static;
        max-width: 400px;
        margin: 0 auto;
    }
    
    .sonniss-category-hero__headline { /* Updated to new category hero class */
        font-size: 3rem;
    }
}

@media (max-width: 768px) {
    .sonniss-category-hero { /* Updated to new category hero class */
        min-height: 50vh;
    }
    
    .sonniss-category-hero__container { /* Updated to new category hero class */
        padding: 2rem 1.5rem 1.5rem;
    }
    
    .sonniss-category-hero__headline { /* Updated to new category hero class */
        font-size: 2.5rem;
    }
    
    .sonniss-category-hero__description { /* Updated to new category hero class */
        font-size: 1rem;
    }
    
    .cta-section {
        padding: 1.5rem;
    }
    
    .social-proof__stats {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .sonniss-category-hero__container { /* Updated to new category hero class */
        padding: 1.5rem 1rem;
    }
    
    .sonniss-category-hero__headline { /* Updated to new category hero class */
        font-size: 2rem;
    }
    
    .value-props {
        gap: 0.5rem;
    }
    
    .value-prop {
        font-size: 0.9rem;
    }
    
    .sonniss-cta {
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }
}

/* ========================================
   SONNISS HERO BREADCRUMB STYLING
   ======================================== */

/* Breadcrumbs within the sonniss-category-hero */
.sonniss-category-hero .woocommerce-breadcrumb {
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 1.5rem 0;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sonniss-category-hero .woocommerce-breadcrumb a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.sonniss-category-hero .woocommerce-breadcrumb a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Breadcrumb separators */
.sonniss-category-hero .woocommerce-breadcrumb .delimiter {
    color: rgba(255, 255, 255, 0.4);
    margin: 0 0.25rem;
    font-weight: 300;
}

/* Mobile responsive for sonniss-category-hero breadcrumbs */
@media (max-width: 768px) {
    .sonniss-category-hero .woocommerce-breadcrumb {
        font-size: 0.8rem;
        margin-bottom: 1rem;
        flex-wrap: wrap;
    }
    
    .sonniss-category-hero .woocommerce-breadcrumb a {
        padding: 0.2rem 0.4rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .sonniss-category-hero .woocommerce-breadcrumb {
        font-size: 0.75rem;
        letter-spacing: 0.3px;
    }
    
    .sonniss-category-hero .woocommerce-breadcrumb a {
        padding: 0.15rem 0.3rem;
    }
}

/* ========================================
   NAVBAR BANNER - Responsive Display
   ======================================== 
   Controls the visibility of the banner shortcode 
   in the site navbar based on screen width.
   Banner displays only on desktop screens (1140px+)
   to maintain proper navbar layout on smaller devices.
   ======================================== */

/* Hide banner on screens smaller than 1140px (tablets and mobile) */
@media (max-width: 1139px) {
    .navbar-banner {
        display: none;
    }
}

/* Show and center banner on desktop screens (1140px and wider) */
@media (min-width: 1140px) {
    .navbar-banner {
        display: block;
        text-align: center;
    }
}

/* ============================================
   Navbar promotional banner.
   Styled as a twin of the search box, in a 4-block layout (title, price,
   button, old price); the old price is shown between the price and the
   button through flex order. Matches the .search-form input (background,
   border, radius, shadow). Blocks are styled by position, not content:
   :first-child is the title, :nth-child(2) the live price, :nth-child(3) of 4
   the button and :nth-child(4):last-child the old price, so keep them in that
   order in the optin editor. A 3-block banner without the old price also
   works.
   ============================================ */

/* Reset OM intermediate wrappers */
.navbar-banner .optn-inline-conversion,
.navbar-banner .optn-conversion-step {
    width: 100% !important;
    height: auto !important;
    line-height: 0 !important;
}

/* Outer container: twin of the .search-form input */
.navbar-banner .optn-block-columns.optn-conv {
    width: 100% !important;
    max-width: 760px !important;
    /* Matches search input padding 1.1rem (~50px effective height) */
    height: 50px !important;
    background-color: #171717 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    line-height: 1 !important;
}

/* Inner content: an unpadded flex row. The title's left margin clears the pulse dot; the button's margin-left: auto takes it to the right edge. */
.navbar-banner .optn-block-columns-content {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    position: relative !important;
    padding: 0 !important;
    z-index: 1 !important;
}

/* Reset every direct child */
.navbar-banner .optn-block-columns-content > .optn-block,
.navbar-banner .optn-block-columns-content > a.optn-block {
    position: relative !important;
    top: auto !important; left: auto !important;
    right: auto !important; bottom: auto !important;
    width: auto !important; height: auto !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
}

/* Shared button-btn reset */
.navbar-banner .optn-block-button-btn {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
}
.navbar-banner .optn-block-button-btn p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Pulse dot at the left of the banner, before the title */
.navbar-banner .optn-block-columns-content::before {
    content: '' !important;
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    width: 5px !important;
    height: 5px !important;
    margin-top: -2.5px !important;
    border-radius: 50% !important;
    background: #c9a376 !important;
    opacity: 0.9 !important;
    box-shadow: 0 0 6px rgba(201, 163, 118, 0.4) !important;
    animation: navbarBannerTwinPulse 3.2s ease-in-out infinite !important;
    z-index: 2 !important;
}
@keyframes navbarBannerTwinPulse {
    0%, 100% { opacity: 0.7; box-shadow: 0 0 0 0 rgba(201, 163, 118, 0.45), 0 0 5px rgba(201, 163, 118, 0.3); }
    50%      { opacity: 1;   box-shadow: 0 0 0 3px rgba(201, 163, 118, 0),    0 0 8px rgba(201, 163, 118, 0.55); }
}

/* Title: the first child, or one holding <strong>. Styled like an input label. */
.navbar-banner .optn-block-columns-content > .optn-block:first-child,
.navbar-banner .optn-block-columns-content > a.optn-block:first-child {
    margin-left: 32px !important;
    margin-right: 4px !important;
    align-self: center !important;
    order: 1 !important;
}
.navbar-banner .optn-block-columns-content > .optn-block:first-child p,
.navbar-banner .optn-block-columns-content > .optn-block:first-child strong,
.navbar-banner .optn-block-columns-content > .optn-block:has(strong) p,
.navbar-banner .optn-block-columns-content > .optn-block:has(strong) strong {
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #c9a376 !important;
    text-shadow: 0 0 12px rgba(201, 163, 118, 0.12) !important;
}

/* Thin vertical divider after the title */
.navbar-banner .optn-block-columns-content > .optn-block:first-child::after {
    content: '' !important;
    display: inline-block !important;
    width: 1px !important;
    height: 14px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    margin-left: 8px !important;
}

/* Subtitle: styled like an input value */
/* Only the live price (block 2), never the button (block 3) or the old
   price (block 4). */
.navbar-banner .optn-block-columns-content > .optn-block:nth-child(2) {
    margin-right: 8px !important;
    align-self: center !important;
    order: 2 !important;
}
.navbar-banner .optn-block-columns-content > .optn-block:nth-child(2) p {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #d4b48a !important;
    letter-spacing: 0 !important;
    text-shadow: 0 0 14px rgba(201, 163, 118, 0.18) !important;
}

/* Button: twin of the .search-form button (square left edge, rounded right corners) */
/* Block 3 of 4, or the last of 3 in the older 3-block layout. order: 4 puts
   it last and margin-left: auto pushes it to the right edge. */
.navbar-banner .optn-block-columns-content > .optn-block:nth-child(3):nth-last-child(2),
.navbar-banner .optn-block-columns-content > a.optn-block:nth-child(3):nth-last-child(2),
.navbar-banner .optn-block-columns-content > .optn-block:last-child:nth-child(3),
.navbar-banner .optn-block-columns-content > a.optn-block:last-child:nth-child(3) {
    margin-left: auto !important;
    align-self: stretch !important;
    height: 100% !important;
    order: 4 !important;
}
.navbar-banner .optn-block-columns-content > .optn-block:nth-child(3):nth-last-child(2) .optn-block-button-btn,
.navbar-banner .optn-block-columns-content > a.optn-block:nth-child(3):nth-last-child(2) .optn-block-button-btn,
.navbar-banner .optn-block-columns-content > .optn-block:last-child:nth-child(3) .optn-block-button-btn,
.navbar-banner .optn-block-columns-content > a.optn-block:last-child:nth-child(3) .optn-block-button-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: none !important;
    border-radius: 0 4px 4px 0 !important;
    padding: 0 18px !important;
    cursor: pointer !important;
    height: 100% !important;
    box-shadow: -1px 0 0 rgba(255, 255, 255, 0.1) !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}
.navbar-banner .optn-block-columns-content > .optn-block:nth-child(3):nth-last-child(2) .optn-block-button-btn:hover,
.navbar-banner .optn-block-columns-content > a.optn-block:nth-child(3):nth-last-child(2) .optn-block-button-btn:hover,
.navbar-banner .optn-block-columns-content > .optn-block:last-child:nth-child(3) .optn-block-button-btn:hover,
.navbar-banner .optn-block-columns-content > a.optn-block:last-child:nth-child(3) .optn-block-button-btn:hover {
    background: rgba(201, 163, 118, 0.18) !important;
}
.navbar-banner .optn-block-columns-content > .optn-block:nth-child(3):nth-last-child(2) p,
.navbar-banner .optn-block-columns-content > a.optn-block:nth-child(3):nth-last-child(2) p,
.navbar-banner .optn-block-columns-content > .optn-block:last-child:nth-child(3) p,
.navbar-banner .optn-block-columns-content > a.optn-block:last-child:nth-child(3) p {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #c9a376 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    transition: color 0.2s ease !important;
}
.navbar-banner .optn-block-columns-content > .optn-block:nth-child(3):nth-last-child(2) .optn-block-button-btn:hover p,
.navbar-banner .optn-block-columns-content > a.optn-block:nth-child(3):nth-last-child(2) .optn-block-button-btn:hover p,
.navbar-banner .optn-block-columns-content > .optn-block:last-child:nth-child(3) .optn-block-button-btn:hover p,
.navbar-banner .optn-block-columns-content > a.optn-block:last-child:nth-child(3) .optn-block-button-btn:hover p {
    color: #d4b48a !important;
}
.navbar-banner .optn-block-columns-content > .optn-block:nth-child(3):nth-last-child(2) p::after,
.navbar-banner .optn-block-columns-content > a.optn-block:nth-child(3):nth-last-child(2) p::after,
.navbar-banner .optn-block-columns-content > .optn-block:last-child:nth-child(3) p::after,
.navbar-banner .optn-block-columns-content > a.optn-block:last-child:nth-child(3) p::after {
    content: '→' !important;
    margin-left: 8px !important;
    font-weight: 500 !important;
    transition: transform 0.2s ease !important;
    display: inline-block !important;
}
.navbar-banner .optn-block-columns-content > .optn-block:nth-child(3):nth-last-child(2) .optn-block-button-btn:hover p::after,
.navbar-banner .optn-block-columns-content > a.optn-block:nth-child(3):nth-last-child(2) .optn-block-button-btn:hover p::after,
.navbar-banner .optn-block-columns-content > .optn-block:last-child:nth-child(3) .optn-block-button-btn:hover p::after,
.navbar-banner .optn-block-columns-content > a.optn-block:last-child:nth-child(3) .optn-block-button-btn:hover p::after {
    transform: translateX(3px) !important;
}

/* Image-only block fallback */
.navbar-banner .optn-block-columns-content > .optn-block img,
.navbar-banner .optn-block-columns-content > a.optn-block img {
    width: 14px !important;
    height: 14px !important;
    opacity: 0.85 !important;
}

/* --- Container hover: matches the search input's focus style --- */
.navbar-banner .optn-block-columns.optn-conv:hover {
    background-color: #1c1c1c !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15) !important;
}
.navbar-banner .optn-block-columns-content > .optn-block:first-child:hover p,
.navbar-banner .optn-block-columns-content > .optn-block:first-child:hover strong,
.navbar-banner .optn-block-columns-content > .optn-block:has(strong):hover p,
.navbar-banner .optn-block-columns-content > .optn-block:has(strong):hover strong {
    color: #d4b48a !important;
}
.navbar-banner .optn-block-columns-content > .optn-block:nth-child(2):hover p {
    color: #ffffff !important;
}



/* ============================================
   Old price, struck through: the 4th block in the markup, shown between the
   live price and the button with flex order: 3. Applies only when the banner
   has exactly 4 children.
   ============================================ */
.navbar-banner .optn-block-columns-content > .optn-block:nth-child(4):last-child,
.navbar-banner .optn-block-columns-content > a.optn-block:nth-child(4):last-child {
    align-self: center !important;
    margin-right: 16px !important;
    order: 3 !important;
    pointer-events: none !important;
    opacity: 1 !important; /* color/opacity now lives on the <p> for finer control */
}
.navbar-banner .optn-block-columns-content > .optn-block:nth-child(4):last-child .optn-block-button-btn,
.navbar-banner .optn-block-columns-content > a.optn-block:nth-child(4):last-child .optn-block-button-btn {
    background: none !important;
    border: none !important;
    padding: 0 !important;
}
.navbar-banner .optn-block-columns-content > .optn-block:nth-child(4):last-child p,
.navbar-banner .optn-block-columns-content > a.optn-block:nth-child(4):last-child p {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: rgba(241, 241, 241, 0.82) !important;
    letter-spacing: 0 !important;
    text-decoration: line-through !important;
    text-decoration-color: rgba(201, 163, 118, 0.75) !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 0 !important;
}

/* --- Resets --- */
.navbar-banner a,
.navbar-banner a:hover,
.navbar-banner a:visited { text-decoration: none !important; }
.navbar-banner .optn-block-columns,
.navbar-banner .optn-block-columns-content,
.navbar-banner .optn-block-button-btn { outline: none !important; }

/* ----------------------------------------------------------------------------
   Hide Wow Optin's editor placeholder ("Your Inline Optin will appear here").
   The plugin treats any URL with an action parameter as a builder preview, so
   the placeholder showed on the site, for example on password reset links
   (action=rp), where it stopped customers resetting their password. The
   selector matches only the placeholder's inline style (grey
   background and grey border); the real campaign uses classes and no inline
   style. Remove once Wow Optin fixes the check.
---------------------------------------------------------------------------- */
.navbar-banner > div[style*="background-color: #f5f5f5"][style*="border: 1px solid #ccc"] {
    display: none !important;
}

/* ===========================================================================
   One product per row on phones, for both the category grid
   (.custom-product-category-page) and WooCommerce's floated lists. Two columns
   squeezed each card to about 140px, too narrow for the description and the
   player. ::before and ::after are hidden because WooCommerce uses them as a
   clearfix, which would leave empty grid cells. Keep the description visible:
   do not hide or clamp it to shorten the page.
   =========================================================================== */

@media (max-width: 767px) {

    .custom-product-category-page ul.products,
    .woocommerce ul.products {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        justify-items: center !important;
    }

    .custom-product-category-page ul.products li.product,
    .woocommerce ul.products li.product {
        width: 100% !important;
        max-width: 420px !important;
        float: none !important;
        clear: none !important;
        margin: 0 auto !important;
    }

    .custom-product-category-page ul.products::before,
    .custom-product-category-page ul.products::after,
    .woocommerce ul.products::before,
    .woocommerce ul.products::after {
        display: none !important;
    }
}