/*!
*/
/*--------------------------------------------------------------
>>> 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;
  }
  
/* 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 — LOCKED 2026-05-03
   Final design, search-bar-twin treatment + 4-block layout
   (Title · Price · CTA · Strike-Price). Strike block is
   visually placed between Price and CTA via flex order.
   Matches .search-form input chrome (bg, border, radius,
   shadow). Robust to OM block reorder via :first-child,
   :nth-child(2), :nth-child(3) of 4, :nth-child(4):last-child.
   ============================================ */

/* 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 .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 — flex row, padded like search input but reserve right edge for the CTA */
.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 — kept, sized like search-input placeholder dot */
.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 — first child OR has <strong>. Acts 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;
}

/* Vertical hairline divider after title — like a fieldset rule */
.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 — middle children, look like input value */
/* SUBTITLE — only the live price (block 2). Excludes the CTA at position 3
   AND the new strike-price at position 4 in the 4-block layout. */
.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;
}

/* CTA — twin of .search-form button (right square) */
/* CTA — block 3 of 4 (new strike layout) OR last-of-3 (legacy layout).
   Visual order: pushed to the far right via flex order:4. */
.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 — match search-input :focus treatment --- */
.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;
}



/* ============================================
   STRIKE-THROUGH OLD PRICE — 4th block in DOM, visually positioned
   between the live price and the CTA via flex order:3.
   Only fires when the banner has exactly 4 children (the new layout).
   ============================================ */
.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; }

/* ----------------------------------------------------------------------------
   SONNISS PATCH 2026-05-28 -- Wow Optin "Your Inline Optin will appear here"
   ----------------------------------------------------------------------------
   The Wow Optin plugin's is_frontend_builder_shortcode_preview() check
   (frontend/class-frontend.php:714) treats ANY URL with ?action= or POST
   action as a builder preview, which renders the editor placeholder div on
   the live frontend. This false-triggered on WooCommerce password reset
   links (action=rp) and blocked customers from completing password resets.

   We've patched the plugin file directly, but this CSS is a belt-and-braces
   safety net in case the plugin auto-updates and overwrites the PHP patch.
   The selector matches ONLY the placeholder's exact inline-style fingerprint
   (grey background + grey border). It cannot match the real campaign, which
   uses CSS classes (.optn-inline-conversion, .optn-inline-slot) with no
   inline style attribute.

   Verified safe: 0 matches on homepage (real campaign), 1 match on broken
   password reset page (placeholder).

   Remove this block once Wow Optin upstream pushes a proper fix.
---------------------------------------------------------------------------- */
.navbar-banner > div[style*="background-color: #f5f5f5"][style*="border: 1px solid #ccc"] {
    display: none !important;
}

/* ===========================================================================
   ONE PRODUCT PER ROW ON MOBILE  (20 August 2026)

   Two columns below 768px squeezes a card to 138-163px, and the short
   description then wraps two or three words to a line. Measured on the live
   category page at 390px: a 138px card 698px tall, with a 254px description
   running to THIRTEEN lines. On /shop/ the same card was 626px with a ten-line
   description. That is the "wall of text" this fixes.

   Two different layout mechanisms produce it, so both are covered:
     .custom-product-category-page ul.products
         theme.css above sets display:grid + repeat(2, 1fr) !important
         under @media (max-width: 1200px). Category pages and the sale
         landing pages.
     .woocommerce ul.products
         WooCommerce's own floated columns-4 loop. /shop/, search results,
         VENDOR STORES (/vendors/<slug>/), TAG ARCHIVES (/sound-effects-tag/...),
         related products, up-sells and cart cross-sells. Vendor, tag and search
         have their own templates (store-vendor.php, taxonomy-product_tag.php,
         search.php) and none of them carries .custom-product-category-page, but
         all three sit inside a .woocommerce full-width wrapper. All verified at
         390px. Search was the worst page on the site before this: 132px cards,
         thirteen-line descriptions, and a SALE badge over 46% of the artwork.

   Both are forced to a single grid column. The li rules undo WooCommerce's
   float and percentage width, and the ::before/::after are killed because
   WooCommerce uses them as a float clearfix - left alone they become phantom
   grid cells and open a gap at the top and bottom of every loop. The existing
   1200px block above already does that for the category selector; this mirrors
   it for the WooCommerce one.

   max-width on the card stops the artwork becoming absurd as the viewport
   approaches 768px, and keeps the SALE label sitting over the image rather
   than over a much wider link.

   WHY ONE COLUMN AND NOT TWO: the browse-page waveform player goes from 109px
   to 286px. At 109px a two-minute preview is about 1.1 seconds per pixel, so it
   cannot be seeked and is purely decorative. At 286px it is 0.42s/px and usable.
   Cover art goes 133px to 310px. On a marketplace selling something the buyer
   cannot hear from a grid, the art and the waveform are what stand in for
   hearing it. Two columns was not buying density anyway: cards are 587px tall
   either way, so it was 2.9 products per screen against 1.3.

   DO NOT HIDE OR CLAMP .sound-pack-summary / .short-description TO SHORTEN THIS.
   It was offered and the owner declined on 20 August: people are used to
   scrolling on mobile and the description is doing real work. Hiding it would
   cut cards 625px to 481px and pages 12,026px to 9,722px, so anyone optimising
   for page length will be tempted. Leave it.
   =========================================================================== */

@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;
    }
}