/* Product title black when you hover over it */
.ps-product__title:hover {
    color: #000000 !important;
}

/* =========================================
   6. WISHLIST & COMPARE ICONS (Product Page)
   ========================================= */
/* Make icons black in normal state */
.ps-product__shopping .ps-product__actions a i {
    color: #000000 !important;
}

/* On hover: yellow background, black icon */
.ps-product__shopping .ps-product__actions a:hover {
    background-color: #FFDE59 !important;
    border-color: #FFDE59 !important;
}

.ps-product__shopping .ps-product__actions a:hover i {
    color: #000000 !important;
}

/* =========================================
   7. HORIZONTAL PRODUCT TABS ON MOBILE
   ========================================= */
@media (max-width: 767px) {
    .ps-tab-list {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        padding-bottom: 10px !important; /* Space for scrollbar */
        border-bottom: 1px solid #e1e1e1;
    }
    
    .ps-tab-list li {
        display: inline-block !important;
        margin-right: 20px !important;
        margin-bottom: 0 !important; /* Prevent vertical spacing */
    }

    /* Optional: Make the scrollbar look neat */
    .ps-tab-list::-webkit-scrollbar {
        height: 3px;
    }
    .ps-tab-list::-webkit-scrollbar-thumb {
        background: #FFDE59; /* Match your theme yellow */
        border-radius: 4px;
    }
}

/* =========================================
   8. PRODUCT SPECIFICATION TABLE STYLE
   ========================================= */
/* Create a border around the entire specification container */
.product-specification-table--rows-columns .row {
    margin: 0 !important;
    border: 1px solid #e1e1e1;
    border-bottom: none;
    border-radius: 4px;
}

/* Force 1 item per row on all devices (overrides the 2-column PC layout) */
.product-specification-table--rows-columns .col-md-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
}

/* Format each row using Flexbox to look like a table */
.product-specification-table--rows-columns .spec-item {
    display: flex;
    border-bottom: 1px solid #e1e1e1;
    padding: 12px 15px;
    width: 100%;
    align-items: flex-start;
}

/* Column 1: The Label (e.g., "Department") */
.product-specification-table--rows-columns .spec-label {
    width: 40%;
    min-width: 120px;
    font-weight: 600;
    color: #000000;
    padding-right: 15px;
}

/* Column 2: The Value (e.g., "Men") */
.product-specification-table--rows-columns .spec-value {
    width: 60%;
    color: #555555;
    word-break: break-word;
}

/* Add slight background color to alternate rows for a real table look */
.product-specification-table--rows-columns .col-md-6:nth-child(odd) .spec-item {
    background-color: #f9f9f9;
}

/* Mobile specific tweaks */
@media (max-width: 767px) {
    .product-specification-table--rows-columns .spec-item {
        padding: 10px 12px;
    }
}

/* Hide homepage H1 tag */
.seo-hidden-h1 {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* =========================================
   8. MEGA MENU HOVER (Shop by Department)
   ========================================= */
/* Apply background to the entire row container */
.menu--product-categories .menu--dropdown > li:hover,
.menu--product-categories .menu--dropdown > li.current-menu-item,
.menu--product-categories .menu--dropdown > li.active {
    background-color: #FFDE59 !important;
}

/* Apply text/background color to the link inside */
.menu--product-categories .menu--dropdown > li:hover > a,
.menu--product-categories .menu--dropdown > li.current-menu-item > a,
.menu--product-categories .menu--dropdown > li.active > a {
    background-color: #FFDE59 !important;
    color: #000000 !important;
}

/* Ensure icons stay black when hovered */
.menu--product-categories .menu--dropdown > li:hover > a i,
.menu--product-categories .menu--dropdown > li.current-menu-item > a i,
.menu--product-categories .menu--dropdown > li.active > a i {
    color: #000000 !important;
}

/* =========================================
   9. CUSTOMER DASHBOARD MENU HOVER & ACTIVE
   ========================================= */
.ps-widget--account-dashboard .ps-widget__content ul li.active > a,
.ps-widget--account-dashboard .ps-widget__content ul li > a:hover {
    background-color: #FFDE59 !important;
    color: #000000 !important;
}
/* Ensure icons stay black when hovered */
.ps-widget--account-dashboard .ps-widget__content ul li.active > a i,
.ps-widget--account-dashboard .ps-widget__content ul li > a:hover i {
    color: #000000 !important;
}

/* =========================================
   10. FAQ ACCORDION ACTIVE STATE (Product Page)
   ========================================= */
/* Change the blue background to yellow when FAQ is clicked/expanded */
.accordion-button:not(.collapsed) {
    background-color: #FFDE59 !important;
    color: #000000 !important;
    box-shadow: none !important;
}

/* Ensure the text and icons inside the active FAQ turn black for readability */
.accordion-button:not(.collapsed) .ps-faq-icon i,
.accordion-button:not(.collapsed) .ps-faq-toggle-icon i,
.accordion-button:not(.collapsed) .ps-faq-question-text {
    color: #000000 !important;
}

/* =========================================
   11. HOVER ICONS ON PRODUCT CARD
   ========================================= */
/* Change the blue hover circle to yellow */
.ps-product__thumbnail .ps-product__actions a:hover {
    background-color: #FFDE59 !important;
    border-color: #FFDE59 !important; /* Overrides any blue borders if they exist */
}

/* Change the icon color inside the circle to black */
.ps-product__thumbnail .ps-product__actions a:hover i {
    color: #000000 !important;
}