@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* Prohygiene Custom Styles */

:root {
    --brand-primary: #4a69ff;
    --brand-secondary: #7ad03a;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: 'Outfit', sans-serif !important;
}

body {
    background-color: #f9fbfd;
    color: #333;
}

/* ── Global Container ──────────────────────────────────────────────
   max-width: 1400px  — industry sweet spot for B2B e-commerce
   width: 100%        — shrinks naturally on smaller screens (no overflow)
   clamp padding      — 16px min on mobile → ~42px at 1400px → 48px max
   ─────────────────────────────────────────────────────────────── */
.container {
    max-width: 1400px !important;
    width: 100% !important;
    padding-left:  clamp(16px, 3vw, 48px) !important;
    padding-right: clamp(16px, 3vw, 48px) !important;
    margin-left:  auto !important;
    margin-right: auto !important;
}


/* Override Classic theme button colors */
.btn-primary {
    background: linear-gradient(135deg, var(--brand-secondary) 0%, #6ab530 100%);
    border: none;
    box-shadow: 0 4px 15px rgba(122, 208, 58, 0.3);
    color: #fff;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: linear-gradient(135deg, #6ab530 0%, var(--brand-secondary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(122, 208, 58, 0.4);
    color: #fff;
}

/* Hide Subcategories block */
#subcategories {
    display: none !important;
}

/* Product Page Variations */
.product-prices .current-price {
    color: var(--brand-primary);
    font-weight: bold;
}

.tabs .nav-tabs .nav-link {
    font-weight: 600;
}

.tabs .nav-tabs .nav-link.active {
    color: var(--brand-primary);
    border-bottom: 3px solid var(--brand-secondary) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    background: transparent !important;
}

/* Highlight / Search / Cart */
.search-widget form input[type="text"]:focus {
    border-color: var(--brand-primary);
}

.blockcart .header {
    background: #fff;
    border-top: 3px solid var(--brand-primary);
}

/* Product labels / savings */
.product-flags .product-flag.new {
    background: var(--brand-secondary);
    border-radius: 25px;
    padding-inline: 20px;
    padding-block: 5px;
}

.product-flags .product-flag.on-sale {
    background: #ff4d4d;
}

@media (max-width: 991px) {
    .product-flags .product-flag {
        font-size: 0.7rem !important;
        padding: 3px 10px !important;
        border-radius: 20px !important;
    }
}

@media (max-width: 575px) {
    .product-flags .product-flag {
        font-size: 0.62rem !important;
        padding: 2px 7px !important;
        border-radius: 15px !important;
        min-width: unset !important;
    }
    .product-flags {
        gap: 3px !important;
    }
}

/* Links */
a {
    color: var(--brand-primary);
}

a:hover {
    color: var(--brand-secondary);
}

/* Footer bottom color */
/* Removed legacy .footer-container since we are overriding fully */

/* --- Added per new requirements --- */
/* Overall enhanced background and header */
body {
    background: linear-gradient(135deg, #f4faff, #f1fbe8);
    background-attachment: fixed;
}

.header-top {
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

/* Product Details Angular UI Overrides */
/* ── Equal-height product cards ──────────────────────────────────
   Strategy: flex column on card + flex-grow on description body
   so every card in a row stretches to the same height regardless
   of title / description length.
   ─────────────────────────────────────────────────────────────── */

/* Pass height down from Bootstrap col → article → card */
.js-product,
.js-product .product-miniature {
    height: 100% !important;
}

.product-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform .3s, box-shadow .3s;
    position: relative;
    border: none !important;
    text-align: center;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Flags inside miniature card: top-left corner, column stacked */
.product-card .product-flags {
    top: 6px !important;
    left: 6px !important;
    width: auto !important;
    gap: 4px !important;
}

.product-card .product-flags .product-flag {
    font-size: 0.65rem !important;
    padding: 3px 9px !important;
    border-radius: 20px !important;
    margin-top: 0 !important;
}

/* Fixed image zone — always the same height */
.product-card .image-wrapper {
    position: relative;
    height: 175px;
    margin-bottom: 10px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 8px;
    overflow: visible; /* don't clip absolute flags */
}

.product-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Desktop: cap thumbnail at 150px wide, centered in the wrapper */
@media (min-width: 992px) {
    .product-miniature .thumbnail-container .product-thumbnail img {
        max-width: 150px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Description area grows to fill leftover space */
.product-card .product-description.card-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    padding: 0 !important;
}

/* Title: 2-line clamp — same visual height across all cards */
.product-card h3.product-title {
    margin: 10px 0 5px;
    font-size: 0.8rem;
    text-transform: uppercase;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 2.4em;
    /* reserve 2 lines even when text is short */
}

.product-card h3.product-title a {
    color: #4a69ff;
    font-weight: 700;
}


/* Price fixed zone */
.product-card .product-price-and-shipping {
    flex-shrink: 0;
    margin-bottom: 10px;
}

/* Button always at the bottom */
.product-card .btn-voir-fiche {
    display: inline-block;
    margin-top: auto;
    align-self: center;
    padding: 6px 14px;
    border-radius: 25px;
    background: #7ad03a;
    color: #fff !important;
    text-decoration: none;
    font-weight: 500;
    transition: background .3s;
    flex-shrink: 0;
}

.product-card .btn-voir-fiche:hover {
    background: #6ab530;
    color: #fff !important;
}

/* Slider max out and remove text */
#carousel {
    max-width: 100%;
    margin-bottom: 2rem;
}

.carousel-inner .carousel-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.carousel .caption,
#carousel .direction,
.carousel .carousel-caption {
    display: none !important;
}

/* Banner image fitting */
.banner {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 2rem 0;
    align-items: center;
}

.banner img {
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    max-width: 500px;
    width: 100%;
}

/* Tab Colors */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--brand-secondary);
    border-color: #dee2e6 #dee2e6 #fff;
    border-top: 3px solid var(--brand-secondary);
}

.nav-tabs .nav-link:hover {
    color: var(--brand-primary);
}

/* Removed duplicate product border styles inherited from old theme */

/* Background Override */
body#index,
body {
    background: #f4faff;
    background: linear-gradient(135deg, #f4faff 0%, #e9f5e1 100%) !important;
    background-attachment: fixed !important;
}

/* Header & Main Menu Enhancements */
.header-top {
    padding-top: 15px;
    padding-bottom: 15px;
}

#_desktop_top_menu {
    display: flex;
    align-items: center;
}

.top-menu[data-depth="0"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.top-menu[data-depth="0"]>li>a {
    font-weight: 600;
    font-size: 0.9rem;
    color: #444;
    text-transform: uppercase;
    padding: 10px 15px;
    transition: all 0.2s;
}

.top-menu[data-depth="0"]>li.current>a,
.top-menu[data-depth="0"]>li:hover>a {
    color: var(--brand-primary);
    border-bottom: 3px solid var(--brand-secondary);
}

/* Dropdown Menu Fixes */
.top-menu .popover {
    background: #fff;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px;
    padding: 20px !important;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 900px;
    top: 100% !important;
    position: absolute;
    z-index: 1000;
}

.top-menu .popover .top-menu[data-depth="1"] {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.top-menu .popover .top-menu[data-depth="1"]>li {
    flex: 1 1 calc(25% - 15px);
    /* 4 columns */
    min-width: 150px;
}

.top-menu .popover .top-menu[data-depth="1"]>li>a {
    font-weight: 600;
    color: var(--brand-primary);
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #eee;
    display: block;
}

.top-menu .popover a {
    transition: color 0.2s;
    white-space: normal;
}

.top-menu .popover a:hover {
    color: var(--brand-secondary);
    text-decoration: none;
}

/* Footer Enhancements */
#footer {
    background: linear-gradient(90deg, #1182ef 0%, #6ab530 100%) !important;
    padding: 4rem 0 2rem 0;
    margin-top: 4rem;
    color: #fff;
    border: none;
    box-shadow: none;
}

.custom-footer .footer-heading {
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.custom-footer .footer-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.custom-footer .footer-social-links {
    display: inline-flex;
    gap: 15px;
}

.custom-footer .footer-social-links img {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    transition: transform 0.2s;
    object-fit: contain;
}

.custom-footer .footer-social-links a:hover img {
    transform: scale(1.1);
}

.custom-footer .footer-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    margin: 30px 0 20px 0;
}

.custom-footer .footer-bottom-text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

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

.custom-footer .footer-col-center {
    text-align: center;
}

@media (max-width: 768px) {
    .custom-footer .footer-col {
        text-align: center !important;
        margin-bottom: 2rem;
    }
}

/* Social Follow Fix */
.block-social ul {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
}

.block-social li {
    background: transparent !important;
    border-radius: 50% !important;
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.block-social li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.block-social li a img {
    max-width: 35px;
    max-height: 35px;
    transition: transform 0.2s;
}

.block-social li a::before {
    display: none !important;
}

.block-social li:hover a img {
    transform: scale(1.1);
}

/* Header Cart Active & Restyle Fixes */
.blockcart .header {
    background: transparent !important;
    border: none !important;
}

.blockcart a {
    border-radius: 30px;
    padding: 10px 20px !important;
    transition: all 0.3s;
    background: transparent !important;
    color: #444 !important;
    box-shadow: none !important;
}

.blockcart.active a {
    background: transparent !important;
    color: var(--brand-primary) !important;
    box-shadow: none !important;
}

.blockcart.active a i {
    color: var(--brand-primary) !important;
}

.blockcart.active a:hover {
    background: transparent !important;
    color: var(--brand-secondary) !important;
    box-shadow: none !important;
}

.blockcart .cart-products-count {
    background: #ff4d4d;
    color: #fff;
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.8rem;
    position: relative;
    top: -2px;
    margin-left: 5px;
}

/* Header & Search Bar */
#search_widget {
    position: relative;
}

#search_widget form input[type="text"] {
    background: #f4f8fc;
    border: 2px solid transparent;
    border-radius: 30px;
    padding: 12px 25px;
    color: #333;
    font-weight: 500;
    transition: all 0.3s;
    width: 100%;
}

#search_widget form input[type="text"]:focus {
    border-color: var(--brand-primary);
    background: #fff;
    box-shadow: 0 4px 15px rgba(74, 105, 255, 0.1);
    outline: none;
}

#search_widget form button[type="submit"] {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--brand-primary);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    transition: all 0.2s;
}

#search_widget form button[type="submit"] i {
    color: #fff !important;
}

#search_widget form button[type="submit"]:hover {
    background: var(--brand-secondary);
}

/* --- About Section (Angular ported) --- */
.about-section {
    padding: 4rem 15px;
    margin-top: 2rem;
}

.about-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.about-content h2 {
    color: #0076a3;
    /* Keeping an exact match to the provided deep blue */
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    letter-spacing: 1px;
}

.about-content>p {
    color: #444;
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 2.5rem;
}

.about-highlights {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 2rem;
}

.highlight-card {
    background: #ffffff;
    border-radius: 50px;
    padding: 12px 25px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.04);
    color: #0076a3;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.highlight-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    background: #0077b6;
    color: #fff;
    transform: translateY(-3px);
}

.about-end {
    color: #0076a3 !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    margin-top: 2rem;
}

.carousel .carousel-inner {
    height: 500px !important;
}

/* Header V3 Specific Layout */
.logo-h1 {
    margin: 0;
}

.logo-h1 img {
    max-width: 250px;
    transition: transform 0.3s ease;
}

/* Adjusted scale */
.logo-h1 img:hover {
    transform: scale(1.02);
}

.top-contact-bar {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 8px 0;
    font-size: 0.85rem;
    color: #444;
}

.top-contact-bar .green-icon {
    color: var(--brand-secondary);
    font-size: 16px;
    vertical-align: text-bottom;
}

.top-contact-bar .green-text {
    color: var(--brand-secondary);
}

.header-middle-row {
    padding-top: 10px;
    padding-bottom: 0 !important;
    background: #fff;
    box-shadow: none;
    position: relative;
    z-index: 1020;
}

.display-top-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* Hide arbitrary top nav elements */
#_desktop_user_info,
#_desktop_contact_link {
    display: none !important;
}

/* Square Green Search Bar */
#search_widget {
    flex-grow: 1;
    max-width: 500px;
    margin: 0;
    margin-top: 15px;
    margin-right: 20px;
    float: none !important;
}

#search_widget form {
    display: flex;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 0;
    overflow: hidden;
    align-items: stretch;
}

#search_widget form input[type="text"],
#header .search-widgets form input[type="text"] {
    border: none;
    padding: 12px 15px !important;
    width: 100%;
    outline: none;
    font-size: 0.95rem;
    color: #444;
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
    min-width: 0;
}

#search_widget form button[type="submit"] {
    background: var(--brand-secondary) !important;
    border: none !important;
    padding: 0 25px !important;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.3s;
    position: static !important;
    /* Fix default absolute positioning */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    height: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
}

#search_widget form button[type="submit"]:hover {
    background: #6ab530 !important;
}

#search_widget form button[type="submit"] i {
    color: #fff !important;
    font-size: 22px;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: block;
}

#search_widget form:focus-within {
    border-color: var(--brand-secondary);
    box-shadow: none;
}

/* Cart Square Green Button */
#_desktop_cart {
    margin-left: auto;
    margin-top: 15px;
}

#_desktop_cart .blockcart .header {
    background: var(--brand-secondary) !important;
    border: none !important;
    padding: 10px 15px !important;
    border-radius: 2px;
}



#_desktop_cart .blockcart .material-icons {
    color: #fff !important;
    margin-right: 8px;
    font-size: 22px;
}

#_desktop_cart .blockcart .cart-products-count {
    color: #fff !important;
    background: transparent !important;
    padding: 0;
    margin-left: 5px;
    font-weight: bold;
}

/* Main Menu (Black Sub Header) */
.full-width-menu-container {
    background: #1a1a1a;
    width: 100%;
    margin-top: 15px;
    /* Spacers */
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

#_desktop_top_menu {
    max-width: 100%;
    margin: 0;
    background: transparent;
}

#_desktop_top_menu>ul {
    max-width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    padding-left: 15px;
}

#_desktop_top_menu .top-menu[data-depth="0"]>li>a {
    color: #fff !important;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 16px 20px;
    border: none;
    display: block;
    transition: color 0.3s;
}

#_desktop_top_menu .top-menu[data-depth="0"]>li>a:hover,
#_desktop_top_menu .top-menu[data-depth="0"]>li.current>a {
    background: #333;
    color: var(--brand-secondary) !important;
    border: none;
}

.top-menu .popover {
    top: 100% !important;
    border-radius: 0 0 8px 8px;
}

/* Home Icon Injected By JS */
.custom-home-icon a {
    color: #fff;
    padding: 14px 20px;
    display: block;
}

.custom-home-icon a:hover {
    background: #333;
}

/* Go To Top Button */
.go-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: var(--brand-secondary);
    color: #fff !important;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(122, 208, 58, 0.3);
    z-index: 9999;
    transition: transform 0.3s, background 0.3s;
}

.go-to-top:hover {
    background: #6ab530;
    color: #fff;
    transform: translateY(-5px);
}

/* Global Loader */
.global-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #ffffff;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(122, 208, 58, 0.2);
    border-left-color: var(--brand-secondary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 991px) {
    /* ── Home slider max-height ── */
    #index #carousel {
        max-height: 250px !important;
        overflow: hidden !important;
    }

    #search_widget {
        max-width: 100%;
        margin-right: 0;
        margin-top: 15px;
    }

    .display-top-wrapper {
        flex-direction: column;
        align-items: stretch;
    }

    #_desktop_cart {
        margin-top: 15px;
        margin-left: 0;
    }

    #_desktop_top_menu {
        flex: auto;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .mobile-nav-flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
    }

    .mobile-right-icons {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    /* Mobile Logo Fix */
    #_mobile_logo {
        flex: auto;
        text-align: center;
        width: 100%;
    }

    #_mobile_logo img.logo {
        max-width: 220px !important;
        height: auto;
        display: inline-block;
    }

    /* Mobile Hamburger Icon */
    #menu-icon i {
        font-size: 32px !important;
        color: #fff !important;
        vertical-align: middle;
    }

    /* Mobile Cart Reset (Remove ugly background block) */
    #_mobile_cart .blockcart {
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative;
    }

    #_mobile_cart .blockcart .header {
        background: transparent !important;
        padding: 0 !important;
        border: none !important;
        color: #fff !important;
        position: relative;
    }

    #_mobile_cart .blockcart .header a {
        display: flex;
        align-items: center;
        color: #fff !important;
    }

    #_mobile_cart .blockcart .header i.shopping-cart {
        font-size: 30px !important;
        color: #fff !important;
        margin-right: 0 !important;
    }

    #_mobile_cart .blockcart .header .cart-products-count {
        background: var(--brand-secondary) !important;
        color: #fff !important;
        font-weight: 700;
        border-radius: 50%;
        padding: 3px 6px !important;
        font-size: 11px !important;
        position: absolute;
        top: -8px;
        right: -10px;
        line-height: 1;
        display: inline-block !important;
    }

    /* Hide desktop search container on mobile by default to toggle it */
    .header-top-right {
        display: none;
        padding-top: 15px;
        padding-bottom: 15px;
        width: 100% !important;
    }
}

#header .top-menu a[data-depth="0"]:hover,
a:hover {
    color: var(--brand-secondary) !important;
}

/*


.header-top.header-middle-row {
    margin-inline: 20px;
}



#footer {
    padding-inline: 30px !important;
}



*/
/* ── Home new-products grid
   col-xs-6  → 2/row  mobile  (Bootstrap handles width)
   col-sm-4  → 3/row  tablet
   col-lg-3  → 4/row  desktop (unchanged)
   Only ensure padding/box-sizing plays well inside .products flex container ── */
.ph-newproducts-section .products {
    display: flex !important;
    flex-wrap: wrap !important;
}
.ph-newproducts-section .products .js-product {
    padding: 6px !important;
    box-sizing: border-box !important;
}

/* ── Ecolabel badge image ── */
.ph-ecolabel-img {
    height: 40px;
    margin-left: 10px;
    margin-top: -3px;
    object-fit: contain;
}

@media (max-width: 575px) {
    .ph-ecolabel-img {
        height: 24px !important;
        margin-left: 4px !important;
    }
}

.product-miniature,
.product-miniature .product {
    min-height: 300px !important;
}

@media (max-width: 991px) {
    .product-miniature,
    .product-miniature .product {
        min-height: 300px !important;
    }
    .product-miniature .product-title a {
        font-size: 0.82rem !important;
    }
    .product-miniature .product-price-and-shipping {
        font-size: 0.85rem !important;
    }
    .product-miniature .thumbnail-container img {
        height: 160px !important;
        object-fit: contain !important;
    }
}

@media (max-width: 575px) {
    /* Force 2-per-row on all listing pages (category, search, best-sales…)
       col-xs-12 is inherited from product-list.tpl — override it here */
    #js-product-list .products .js-product {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}

@media (max-width: 575px) {
    .product-miniature,
    .product-miniature .product {
        min-height: 240px !important;
    }
    .product-miniature .product-title a {
        font-size: 0.75rem !important;
        line-height: 1.3 !important;
    }
    .product-miniature .product-price-and-shipping {
        font-size: 0.78rem !important;
    }
    .product-miniature .thumbnail-container img {
        height: 120px !important;
        object-fit: contain !important;
    }
    .product-miniature .product-description {
        padding: 6px 8px !important;
    }
    /* Hide add-to-cart button on very small cards to save space */
    .product-miniature .add-to-cart {
        font-size: 0.72rem !important;
        padding: 6px 8px !important;
    }
}

.header-top.header-middle-row .logo.img-fluid {
    max-width: 150px !important;
}

#index #wrapper {
    padding-top: 0 !important;
}

/*.product-miniature .thumbnail-container {
    width: 100% !important;
}**/

.product-price {
    color: var(--brand-secondary) !important;
}

.form-control:focus {
    outline: .1875rem solid var(--brand-secondary) !important;
}

.custom-radio input[type="radio"]:checked+span {
    background-color: var(--brand-secondary) !important;
}

.carousel .carousel-control .icon-next:hover i,
.carousel .carousel-control .icon-prev:hover i,
.dropdown:hover .expand-more,
.page-my-account #content .links a:hover i,
.search-widget form button[type="submit"] .search:hover,
.top-menu .sub-menu a:hover {
    color: var(--brand-secondary) !important;
}

#category .block-category.card.card-block,
#category .block-categories {
    display: none !important;
}

.facet-dropdown .select-list:hover {
    background: var(--brand-primary) !important;
    color: #FFF !important;
}

.facet-dropdown.open>.select-title {
    border-color: var(--brand-primary) !important;
}

.product-images>li.thumb-container .thumb.selected,
.product-images>li.thumb-container .thumb:hover {
    border: var(--brand-secondary) 3px solid;
}

/* ================================================================
   HEADER V3 — FINAL (2026-03-17)
   Search moved to black nav bar | Mobile = TunisiaNet style
   ================================================================ */

/* ── Desktop: middle row logo + cart ── */
.ph-desktop-middle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
}

/* Remove search from middle row if it leaks in */
.ph-desktop-middle #search_widget {
    display: none !important;
}

/* ── Desktop: black bar flex row (nav + search) ── */
.ph-menu-search-row {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
}

.ph-menu-nav {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}

.ph-menu-search {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 15px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* Search widget inside black bar */
.ph-menu-search #search_widget {
    margin: 0 !important;
    max-width: 260px !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
}

.ph-menu-search #search_widget form {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 3px !important;
}

.ph-menu-search #search_widget form input[type="text"] {
    color: #fff !important;
    background: transparent !important;
    font-size: 0.82rem !important;
    padding: 9px 12px !important;
}

.ph-menu-search #search_widget form input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
}

.ph-menu-search #search_widget form button[type="submit"] {
    background: var(--brand-secondary) !important;
    padding: 0 14px !important;
    border-radius: 0 !important;
    position: static !important;
    transform: none !important;
    height: auto !important;
    width: auto !important;
}

.ph-menu-search #search_widget form:focus-within {
    border-color: var(--brand-secondary) !important;
    box-shadow: none !important;
}

/* ── Desktop cart wrapper (keep existing green style, just position) ── */
#_desktop_cart {
    margin: 0 !important;
    margin-top: 0 !important;
}

/* ================================================================
   CART HOVER DROPDOWN
   ================================================================ */

#blockcart-wrapper {
    position: relative;
    display: inline-block;
}

/* ── Cart overlay ── */
.ph-cart-overlay {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.45) !important;
    z-index: 100000 !important;
    cursor: pointer !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.32s ease, visibility 0.32s ease !important;
}

.ph-cart-overlay.ph-is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* ── Cart slide-in panel ── */
/* Always in the DOM (display:block) — hidden via transform+visibility so
   CSS transition works. display:none breaks transitions. */
.ph-cart-dropdown {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 380px !important;
    max-width: 95vw !important;
    height: 100vh !important;
    background: #fff !important;
    box-shadow: -4px 0 30px rgba(0, 0, 0, 0.18) !important;
    z-index: 100001 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    /* Hidden state: pushed fully off-screen to the right */
    transform: translateX(100%) !important;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Open state: slide into view */
.ph-cart-dropdown.ph-is-open {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    animation: none !important;
}

.ph-cart-dropdown-header {
    font-weight: 700;
    font-size: 0.95rem;
    color: #222;
    padding: 16px 20px 12px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}

.ph-cart-dropdown-header .ph-cart-dd-count {
    color: #999;
    font-weight: 400;
    font-size: 0.82rem;
}

/* Items list */
.ph-cart-items-list {
    list-style: none;
    padding: 0 20px;
    margin: 14px 0 0;
    max-height: none;
    overflow-y: visible;
    scrollbar-width: thin;
    scrollbar-color: var(--brand-secondary) #f0f0f0;
}

.ph-cart-items-list::-webkit-scrollbar {
    width: 4px;
}

.ph-cart-items-list::-webkit-scrollbar-track {
    background: #f0f0f0;
}

.ph-cart-items-list::-webkit-scrollbar-thumb {
    background: var(--brand-secondary);
    border-radius: 4px;
}

.ph-cart-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 0;
    border-bottom: 1px solid #f6f6f6;
}

.ph-cart-item:last-child {
    border-bottom: none;
}

.ph-cart-item-img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid #eee;
    flex-shrink: 0;
    background: #fafafa;
}

.ph-cart-item-img-placeholder {
    width: 54px;
    height: 54px;
    border-radius: 6px;
    background: #f5f5f5;
    flex-shrink: 0;
}

.ph-cart-item-info {
    flex: 1;
    min-width: 0;
}

.ph-cart-item-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: #333;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}

.ph-cart-item-price {
    font-size: 0.85rem;
    color: var(--brand-secondary);
    font-weight: 700;
    display: block;
    margin-bottom: 6px;
}

/* Qty controls */
.ph-qty-ctrl {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ph-qty-btn {
    width: 22px;
    height: 22px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f8f8f8;
    color: #444;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    padding: 0;
    flex-shrink: 0;
}

.ph-qty-btn:hover {
    background: var(--brand-secondary);
    color: #fff;
    border-color: var(--brand-secondary);
}

.ph-qty-input {
    width: 34px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: #333;
    background: #fff;
    appearance: textfield;
    -moz-appearance: textfield;
}

.ph-qty-input::-webkit-outer-spin-button,
.ph-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}



/* Remove button */
.ph-cart-remove {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: none;
    background: none;
    color: #ccc;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
    padding: 0;
}

.ph-cart-remove {
    color: #e53935 !important;
    background: #fdecea !important;
}

.ph-cart-remove i {
    font-size: 16px;
}

/* Empty cart state */
.ph-cart-empty {
    text-align: center;
    padding: 40px 20px;
    color: #bbb;
}

.ph-cart-empty i {
    font-size: 44px;
    display: block;
    margin-bottom: 8px;
    color: #ddd;
}

.ph-cart-empty p {
    font-size: 0.88rem;
    margin: 0;
}

/* Cart footer */
.ph-cart-footer {
    border-top: 1px solid #f0f0f0;
    margin-top: 14px;
    padding: 14px 20px 20px;
    position: sticky;
    bottom: 0;
    background: #fff;
}

.ph-cart-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.ph-cart-total-label {
    font-weight: 600;
    color: #555;
    font-size: 0.9rem;
}

.ph-cart-total-amount {
    font-weight: 800;
    color: var(--brand-primary);
    font-size: 1.05rem;
}

.ph-cart-cta {
    display: flex;
    gap: 8px;
}

.ph-cart-btn {
    flex: 1;
    text-align: center;
    padding: 9px 10px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 0.82rem;
    text-decoration: none !important;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
    display: inline-block;
}

.ph-cart-btn-outline {
    border: 2px solid var(--brand-primary) !important;
    color: var(--brand-primary) !important;
    background: transparent;
}

.ph-cart-btn-outline:hover {
    background: var(--brand-primary) !important;
    color: #fff !important;
}

.ph-cart-btn-primary {
    background: var(--brand-secondary) !important;
    color: #fff !important;
}

.ph-cart-btn-primary:hover {
    background: #6ab530 !important;
    color: #fff !important;
}

/* ================================================================
   MOBILE HEADER V3 — TunisiaNet Style
   ================================================================ */

/* Hide old mobile classes from V2 */
.mobile-v3-layout,
.mobile-top-contact,
.mobile-logo-container,
.mobile-black-bottom-bar {
    display: none !important;
}

/* Main mobile wrapper */
.ph-mobile-header {
    width: 100% !important;
    background: var(--brand-primary) !important;
}

/* Blue top bar */
.ph-mobile-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 16px !important;
    background: var(--brand-primary) !important;
    min-height: 60px !important;
}

.ph-mob-left,
.ph-mob-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.ph-mob-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 8px;
}

/* Icon buttons */
.ph-mob-icon-btn {
    background: none;
    border: none;
    color: #fff !important;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    line-height: 1;
    position: relative;
}

.ph-mob-icon-btn i.material-icons {
    font-size: 26px;
    color: #fff !important;
}

/* Mobile logo — no bg, no filter, just size */
.ph-mob-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.ph-mob-logo-link img.logo,
#_mobile_logo img.logo {
    max-width: 140px !important;
    max-height: 46px !important;
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    filter: none !important;
}

/* Mobile cart — clean icon-button (matches hamburger/user style) */
.ph-mob-cart {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#_mobile_cart .blockcart,
#_mobile_cart .blockcart .header,
#_mobile_cart .blockcart .cart-preview {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

#_mobile_cart .blockcart a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    color: #fff !important;
    padding: 6px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    font-size: 0 !important;
    position: relative;
}

#_mobile_cart .blockcart .material-icons,
#_mobile_cart .blockcart i.material-icons {
    font-size: 26px !important;
    color: #fff !important;
    margin: 0 !important;
}

/*#_mobile_cart .blockcart span:not(.material-icons):not(.cart-products-count) {
    display: none !important;
}*/

#_mobile_cart .blockcart .cart-products-count {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    background: var(--brand-secondary) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 3px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* White search row below blue bar */
.ph-mobile-search-bar {
    background: #fff;
    padding: 10px 14px;
    border-bottom: 1px solid #e8edf2;
}

.ph-mobile-search-bar #search_widget {
    margin: 0 !important;
    max-width: 100% !important;
    float: none !important;
}

.ph-mobile-search-bar #search_widget form {
    background: #f4f8fc !important;
    border: 1.5px solid #dde4ea !important;
    border-radius: 30px !important;
    overflow: hidden;
    display: flex !important;
    align-items: center !important;
}

.ph-mobile-search-bar #search_widget form input[type="text"] {
    color: #333 !important;
    font-size: 0.92rem !important;
    padding: 11px 18px !important;
    background: transparent !important;
    border: none !important;
    flex: 1 !important;
}

.ph-mobile-search-bar #search_widget form button[type="submit"] {
    background: var(--brand-secondary) !important;
    border-radius: 30px !important;
    padding: 9px 20px !important;
    margin: 3px !important;
    position: static !important;
    transform: none !important;
    height: auto !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

/* Slide-out mobile menu — display:block always, visibility controlled by left position only */
.ph-mobile-menu-wrapper {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: -100% !important;
    width: 82vw !important;
    max-width: 320px !important;
    height: 100vh !important;
    overflow-y: auto !important;
    z-index: 99999 !important;
    background: #fff !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18) !important;
    transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding-bottom: 30px !important;
}

.ph-mobile-menu-wrapper.is-open {
    left: 0 !important;
}

.ph-mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    background: var(--brand-primary);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 1;
}

.ph-mobile-menu-title {
    font-weight: 800;
    font-size: 1.05rem;
    color: #fff;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Overlay */
.ph-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.52);
    z-index: 99998;
    backdrop-filter: blur(2px);
}

.ph-mobile-overlay.is-open {
    display: block;
}

/* Hide desktop search from old layout area on mobile */
@media (max-width: 991px) {
    .header-top-right {
        display: none !important;
    }

    .header-middle-row {
        display: none !important;
    }

    .full-width-menu-container {
        display: none !important;
    }
}

/* ================================================================
   V3 HOTFIXES — Cart layout + dropdown visibility + mobile bar
   Overrides all legacy CSS conflicts. !important required throughout.
   ================================================================ */

/* ── Constrain cart wrapper to natural width (not flex-stretch) ── */
#blockcart-wrapper {
    display: inline-flex !important;
    flex-direction: column !important;
    position: relative !important;
    width: auto !important;
}

.blockcart.cart-preview {
    display: inline-flex !important;
    flex-direction: column !important;
    width: auto !important;
}

/* ── New cart trigger: ph-cart-head (replaces legacy .header) ── */
.ph-cart-head {
    display: block !important;
    width: auto !important;
    line-height: 1 !important;
}

.ph-cart-head .ph-cart-trigger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: var(--brand-secondary) !important;
    color: #fff !important;
    padding: 10px 18px !important;
    border-radius: 3px !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border: none !important;
    box-shadow: none !important;
    transition: background 0.2s !important;
}

.ph-cart-head .ph-cart-trigger:hover {
    background: #6ab530 !important;
    color: #fff !important;
}

.ph-cart-head .ph-cart-trigger .material-icons {
    font-size: 20px !important;
    color: #fff !important;
    margin: 0 !important;
}

/* Inline count style for .cart-products-count (classic PS fallback) */
.ph-cart-head .ph-cart-trigger .cart-products-count {
    background: rgba(0, 0, 0, 0.22) !important;
    color: #fff !important;
    border-radius: 50% !important;
    min-width: 20px !important;
    height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
}

/* ── Cart icon wrap — positions the badge over the icon ── */
.ph-cart-icon-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ── ph-cart-badge: green circle top-right of icon ── */
.ph-cart-badge {
    position: absolute !important;
    top: -7px !important;
    right: -9px !important;
    background: var(--brand-secondary) !important;
    color: #fff !important;
    border-radius: 50% !important;
    min-width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

.ph-cart-label {
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #fff !important;
    line-height: 1 !important;
}


/* ── Cart subtotals row (tax, shipping) in dropdown ── */
.ph-cart-subtotal-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #888;
    padding: 3px 0;
}

.ph-cart-subtotal-label {
    flex: 1;
}

.ph-cart-subtotal-amount {
    font-weight: 600;
}

/* ── Mobile bar: enforce flex row — hard override in case cache is stale ── */
@media (max-width: 991px) {
    .ph-mobile-header {
        display: block !important;
        width: 100% !important;
    }

    .ph-mobile-bar {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: var(--brand-primary) !important;
        padding: 8px 14px !important;
        min-height: 58px !important;
    }

    .ph-mob-left,
    .ph-mob-right {
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
    }

    .ph-mob-center {
        flex: 1 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .ph-mob-icon-btn {
        display: flex !important;
        background: none !important;
        border: none !important;
        color: #fff !important;
        padding: 6px !important;
        cursor: pointer !important;
        text-decoration: none !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .ph-mob-icon-btn i.material-icons {
        font-size: 26px !important;
        color: #fff !important;
    }

    /* Mobile search bar row */
    .ph-mobile-search-bar {
        display: block !important;
        background: #fff !important;
        padding: 8px 12px !important;
        border-bottom: 2px solid #f0f0f0 !important;
    }

    /* Logo in mobile bar — raw image, no bg, no filter */
    .ph-mob-center img.logo,
    .ph-mob-logo-link img.logo {
        max-width: 140px !important;
        max-height: 46px !important;
        background: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
    }
}

/* ================================================================
   MOBILE MENU CATEGORIES UI REFINEMENTS
   ================================================================ */

.ph-mobile-menu-wrapper {
    background: #fff !important;
}

.ph-mobile-menu-wrapper ul.top-menu {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.ph-mobile-menu-wrapper li {
    background: #fff !important;
    margin: 0 !important;
    border-radius: 0 !important;
    position: relative !important;
}

/* Level 0 — simple dark label */
.ph-mobile-menu-wrapper ul.top-menu[data-depth="0"]>li {
    border-bottom: 1px solid #f0f0f0 !important;
}

.ph-mobile-menu-wrapper ul.top-menu[data-depth="0"]>li>a {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #222 !important;
    padding: 13px 48px 13px 16px !important;
    display: block !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    transition: color 0.15s !important;
}

.ph-mobile-menu-wrapper ul.top-menu[data-depth="0"]>li>a:hover {
    color: var(--brand-primary) !important;
    background: #f8f9ff !important;
}

/* Sub-categories — no border, no indent, no background */
.ph-mobile-menu-wrapper ul[data-depth="1"],
.ph-mobile-menu-wrapper ul.collapse {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.ph-mobile-menu-wrapper ul[data-depth="1"] li {
    border-bottom: none !important;
}

.ph-mobile-menu-wrapper ul[data-depth="1"] li a {
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    color: #555 !important;
    padding: 9px 16px 9px 28px !important;
    display: block !important;
    border: none !important;
    transition: color 0.15s !important;
}

.ph-mobile-menu-wrapper ul[data-depth="1"] li a:hover {
    color: var(--brand-primary) !important;
    background: transparent !important;
}

.ph-mobile-menu-wrapper a:focus {
    outline: none !important;
}

/* ================================================================
   HOME PAGE — STATS COUNTER
   ================================================================ */
.ph-stats-block {
    background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
    padding: 70px 20px;
    position: relative;
    overflow: hidden;
}

.ph-stats-block::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(74, 105, 255, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 50%, rgba(122, 208, 58, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.ph-stats-inner {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

.ph-stats-head {
    text-align: center;
    margin-bottom: 50px;
}

.ph-stats-head h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px;
}

.ph-stats-head p {
    color: rgba(255, 255, 255, 0.55);
    font-size: 1rem;
    margin: 0;
    font-weight: 300;
}

.ph-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
}

.ph-stat-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 44px 24px;
    text-align: center;
    transition: background 0.3s, border-color 0.3s, transform 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.ph-stat-card:hover {
    background: rgba(74, 105, 255, 0.1);
    border-color: rgba(74, 105, 255, 0.35);
    transform: translateY(-6px);
}

.ph-stat-num {
    font-size: 3.2rem;
    font-weight: 800;
    color: var(--brand-primary);
    line-height: 1;
    text-shadow: 0 0 30px rgba(74, 105, 255, 0.35);
    font-family: 'Outfit', sans-serif;
}

.ph-stat-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
    letter-spacing: 0.3px;
}

@media (max-width: 900px) {
    .ph-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .ph-stats-grid {
        grid-template-columns: 1fr !important;
    }

    .ph-stat-num {
        font-size: 2.4rem;
    }
}

/* ================================================================
   HOME PAGE — HOW IT WORKS
   ================================================================ */
.ph-hiw-block {
    padding: 80px 20px;
    background: #fff;
    border-top: 3px solid var(--brand-primary);
}

.ph-hiw-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    position: relative;
    margin-top: 20px;
}

/* Connecting line between steps */
.ph-hiw-grid::before {
    content: '';
    position: absolute;
    top: 56px;
    left: calc(12.5%);
    right: calc(12.5%);
    height: 2px;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
    z-index: 0;
}

.ph-hiw-step {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ph-hiw-num {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--brand-primary);
    margin-bottom: 10px;
    text-transform: uppercase;
}

.ph-hiw-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    box-shadow: 0 8px 24px rgba(74, 105, 255, 0.25);
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    z-index: 1;
}

.ph-hiw-step:hover .ph-hiw-icon {
    transform: scale(1.1) translateY(-4px);
    box-shadow: 0 14px 32px rgba(74, 105, 255, 0.35);
}

.ph-hiw-icon i {
    font-size: 30px;
    color: #fff;
}

.ph-hiw-step h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px;
}

.ph-hiw-step p {
    font-size: 0.88rem;
    color: #777;
    line-height: 1.65;
    margin: 0;
    font-weight: 300;
}

@media (max-width: 900px) {
    .ph-hiw-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 40px !important;
    }

    .ph-hiw-grid::before {
        display: none;
    }
}

@media (max-width: 540px) {
    .ph-hiw-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ================================================================
   HOME PAGE — TESTIMONIALS CAROUSEL
   ================================================================ */
.ph-testi-block {
    padding: 80px 20px;
    background: linear-gradient(160deg, #f4faff 0%, #e9f5e1 100%);
}

.ph-testi-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 10px;
}

.ph-testi-viewport {
    overflow: hidden;
    border-radius: 12px;
    flex: 1;
}

.ph-testi-track {
    display: flex;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.ph-testi-card {
    flex: 0 0 100%;
    background: #fff;
    border-radius: 16px;
    padding: 40px 44px;
    box-shadow: 0 6px 28px rgba(74, 105, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ph-testi-stars {
    color: var(--brand-secondary);
    font-size: 1.1rem;
    letter-spacing: 3px;
}

.ph-testi-quote {
    font-size: 1.08rem;
    font-style: italic;
    color: #2d3748;
    line-height: 1.75;
    margin: 0;
    border-left: 3px solid var(--brand-primary);
    padding-left: 18px;
    font-weight: 300;
}

.ph-testi-author {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
}

.ph-testi-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.ph-testi-author strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a1a;
}

.ph-testi-author span {
    font-size: 0.8rem;
    color: #888;
    font-weight: 400;
}

.ph-testi-nav {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid var(--brand-primary);
    background: #fff;
    color: var(--brand-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
    z-index: 2;
}

.ph-testi-nav:hover {
    background: var(--brand-primary);
    color: #fff;
}

.ph-testi-nav i {
    font-size: 22px;
}

.ph-testi-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
}

.ph-testi-dot {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #d0d7e8;
    border: none;
    cursor: pointer;
    transition: background 0.25s, width 0.25s;
    padding: 0;
}

.ph-testi-dot.active {
    width: 30px;
    background: var(--brand-primary);
}

@media (max-width: 768px) {
    .ph-testi-card {
        padding: 28px 22px;
    }

    .ph-testi-nav {
        display: none;
    }

    .ph-testi-quote {
        font-size: 0.95rem;
    }
}

/* ================================================================
   HOME PAGE — TRUST BADGES BAR
   ================================================================ */
.ph-badges-block {
    background: #111827;
    padding: 44px 20px;
    border-top: 1px solid rgba(74, 105, 255, 0.2);
    border-bottom: 1px solid rgba(74, 105, 255, 0.15);
}

.ph-badges-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px 60px;
}

.ph-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    transition: transform 0.25s;
}

.ph-badge:hover {
    transform: translateY(-4px);
}

.ph-badge-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ph-badge-icon i {
    font-size: 24px;
}

.ph-badge strong {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ph-badge span {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 300;
}

/* ================================================================
   HOME PAGE — SECTORS BLOCK
   ================================================================ */
.ph-section-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.ph-section-title {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    color: var(--brand-primary);
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.ph-section-subtitle {
    text-align: center;
    font-size: 1.05rem;
    color: #666;
    margin-bottom: 40px;
    font-weight: 300;
}

.ph-sectors-block {
    padding: 70px 20px;
    background: linear-gradient(135deg, #f4faff 0%, #e9f5e1 100%);
    margin-top: 0;
}

.ph-sectors-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 28px !important;
}

.ph-sector-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(74, 105, 255, 0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
}

.ph-sector-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 10px 28px rgba(74, 105, 255, 0.14);
}

.ph-sector-img-wrap {
    overflow: hidden;
    height: 190px;
}

.ph-sector-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.ph-sector-card:hover .ph-sector-img-wrap img {
    transform: scale(1.04);
}

.ph-sector-body {
    padding: 20px;
    flex: 1;
}

.ph-sector-body h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px;
}

.ph-sector-body p {
    font-size: 0.92rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
    font-weight: 300;
}

@media (max-width: 1100px) {
    .ph-sectors-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .ph-sectors-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .ph-sectors-block {
        padding: 40px 16px;
    }

    .ph-section-title {
        font-size: 1.5rem;
    }

    .ph-section-subtitle {
        font-size: 0.92rem;
        margin-bottom: 24px;
    }

    .ph-sector-img-wrap {
        height: 160px;
    }
}

/* ================================================================
   HOME PAGE — TRUST BLOCK
   ================================================================ */
.ph-trust-block {
    padding: 80px 20px;
    background: #fff;
}

.ph-trust-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 70px !important;
    align-items: center !important;
}

.ph-trust-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 16px;
    line-height: 1.2;
}

.ph-trust-intro {
    font-size: 1.02rem;
    color: #666;
    line-height: 1.7;
    margin-bottom: 32px;
    font-weight: 300;
}

.ph-trust-feature {
    display: flex;
    gap: 16px;
    margin-bottom: 26px;
    align-items: flex-start;
}

.ph-trust-icon {
    width: 44px;
    height: 44px;
    background: var(--brand-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ph-trust-icon i {
    font-size: 20px;
}

.ph-trust-feature-text strong {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.ph-trust-feature-text p {
    font-size: 0.92rem;
    color: #777;
    line-height: 1.6;
    margin: 0;
    font-weight: 300;
}

.ph-trust-right img {
    width: 100%;
    border-radius: 14px;
    box-shadow: 0 14px 44px rgba(74, 105, 255, 0.13);
    display: block;
}

@media (max-width: 1024px) {
    .ph-trust-inner {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }

    .ph-trust-right {
        text-align: center;
    }

    .ph-trust-right img {
        max-width: 400px;
        margin: 0 auto;
        display: block;
    }
}

@media (max-width: 600px) {
    .ph-trust-block {
        padding: 40px 16px;
    }

    .ph-trust-title {
        font-size: 1.5rem;
    }

    .ph-trust-intro {
        font-size: 0.93rem;
    }

    .ph-trust-feature {
        gap: 12px;
        margin-bottom: 20px;
    }

    .ph-trust-icon {
        width: 38px;
        height: 38px;
        flex-shrink: 0;
    }

    .ph-trust-icon i {
        font-size: 17px;
    }

    .ph-trust-feature-text strong {
        font-size: 0.95rem;
    }

    .ph-trust-feature-text p {
        font-size: 0.85rem;
    }

    .ph-trust-right {
        display: none;
    }
}

/* ================================================================
   HOME PAGE — NEWSLETTER SECTION (black menu style)
   ================================================================ */
.ph-newsletter-section {
    background: #1a1a1a !important;
    padding: 0 !important;
    width: 100% !important;
    display: block !important;
}

.ph-newsletter-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 40px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 40px;
    align-items: center;
}

.ph-newsletter-icon {
    width: 64px;
    height: 64px;
    background: var(--brand-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ph-newsletter-icon i {
    font-size: 30px;
    color: #fff;
}

.ph-newsletter-text {
    flex: 1;
}

.ph-newsletter-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.3;
}

.ph-newsletter-sub {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    font-weight: 300;
}

.ph-newsletter-form-wrap {
    flex-shrink: 0;
    min-width: 340px;
}

.ph-newsletter-input-row {
    display: flex;
    gap: 0;
}

.ph-newsletter-input {
    flex: 1;
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-right: none;
    border-radius: 4px 0 0 4px;
    color: #fff;
    font-size: 0.95rem;
    font-family: 'Outfit', sans-serif;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}

.ph-newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.ph-newsletter-input:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--brand-secondary);
}

.ph-newsletter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: var(--brand-secondary);
    color: #fff;
    border: none;
    border-radius: 0 4px 4px 0;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}

.ph-newsletter-btn:hover {
    background: #6ab530;
}

.ph-newsletter-btn i {
    font-size: 18px;
}

.ph-newsletter-conditions {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.4);
    margin: 8px 0 0;
}

.ph-newsletter-msg {
    font-size: 0.9rem;
    padding: 8px 12px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.ph-newsletter-success {
    background: rgba(122, 208, 58, 0.15);
    color: var(--brand-secondary);
    border: 1px solid rgba(122, 208, 58, 0.3);
}

.ph-newsletter-error {
    background: rgba(255, 77, 77, 0.12);
    color: #ff4d4d;
    border: 1px solid rgba(255, 77, 77, 0.3);
}

@media (max-width: 1100px) {
    .ph-newsletter-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 28px;
        padding: 50px 24px;
    }

    .ph-newsletter-icon {
        margin: 0 auto;
    }

    .ph-newsletter-form-wrap {
        min-width: unset;
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .ph-newsletter-input-row {
        flex-direction: column;
        gap: 10px;
    }

    .ph-newsletter-input {
        border-right: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 4px;
    }

    .ph-newsletter-btn {
        border-radius: 4px;
        justify-content: center;
    }
}

/* ================================================================
   MOBILE CART PROXY BUTTON (ph-mob-cart-btn / ph-mob-cart-badge)
   ================================================================ */
.ph-mob-cart-btn {
    background: transparent !important;
    border: none !important;
    padding: 6px !important;
    cursor: pointer !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

.ph-mob-cart-btn .material-icons {
    font-size: 26px !important;
    color: #fff !important;
    display: block !important;
}

.ph-mob-cart-badge {
    position: absolute !important;
    top: 0px !important;
    right: 0px !important;
    background: var(--brand-secondary) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    min-width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.ph-mob-cart-badge.has-items {
    display: inline-flex !important;
}

@media (max-width: 480px) {



}

/* ── Checkout payment step override ──────────────────────────────── */
/* Hide the step 4 "PAIEMENT" section header — order is auto-submitted */
#checkout-payment-step .step-title {
    display: none !important;
}

#checkout-payment-step.js-current-step {
    border-top: none !important;
}

.ph-cgv-form {
    margin-bottom: 20px;
}

.ph-cgv-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ph-cgv-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    color: #555;
}

.ph-place-order-wrap {
    margin-top: 20px;
}

.ph-place-order-btn {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
    font-weight: 700;
    background: var(--brand-secondary) !important;
    border-color: var(--brand-secondary) !important;
    border-radius: 8px !important;
    letter-spacing: 0.03em;
}

.ph-place-order-btn:hover {
    background: #6ab530 !important;
    border-color: #6ab530 !important;
}

/* ── Product Page Refactor & Mobile Fixes ────────────────────────── */

/* Main Layout: Inverse Column Order */
.product-main-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.product-info-side {
    order: 1;
    /* Swapped to appear first on desktop if needed, or structured in TPL */
}

.product-gallery-side {
    order: 2;
}

@media (max-width: 991px) {
    .product-info-side {
        order: 2;
    }

    .product-gallery-side {
        order: 1;
    }
}

.product-container {
    background: transparent;
    border-radius: 0;
    padding: 20px;
    box-shadow: none;
    margin-bottom: 2rem;
}

#product .page-content {
    background: transparent;
    padding: 0;
}

#product h1.h1 {
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--brand-primary);
    margin-bottom: 1.5rem;
    line-height: 1.1;
    text-transform: none;
}

.product-prices {
    background: transparent;
    padding: 0;
    border-radius: 0;
    border: none;
    margin-bottom: 2rem;
}

.product-prices .current-price {
    font-size: 2.4rem;
    color: #333;
    font-weight: 800;
}

.product-prices .tax-shipping-delivery-label {
    display: block;
    font-size: 0.85rem;
    opacity: 0.7;
}

.product-description-short {
    font-size: 1.15rem;
    line-height: 1.6;
    color: #444;
    margin-bottom: 40px;
    border-left: 4px solid var(--brand-secondary);
    padding-left: 20px;
}

/* Updated Actions Section */
.product-actions {
    background: #fff;
    padding: 35px;
    border-radius: 20px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.05);
    border: none;
    margin-bottom: 30px;
}

.ph-stock-status {
    margin-bottom: 25px;
}

.stock-label {
    padding: 8px 16px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.stock-label.in-stock {
    background: rgba(122, 208, 58, 0.1);
    color: var(--brand-secondary);
}

.stock-label.out-of-stock {
    background: rgba(255, 77, 77, 0.1);
    color: #ff4d4d;
}

/* Side-by-Side Qty and Add Button */
.add-to-cart-container {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    margin-top: 15px;
}

.qty-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qty-selector .control-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #888;
}

.qty-input-group #quantity_wanted {
    height: 55px;
    width: 80px;
    border: 2px solid #f0f0f0;
    border-radius: 12px;
    text-align: center;
    font-weight: 800;
    font-size: 1.1rem;
    transition: all 0.3s;
    background: #fff;
    appearance: textfield;
    -moz-appearance: textfield;
}


/* Hide native up/down spinners for clean look */
.qty-input-group #quantity_wanted::-webkit-inner-spin-button,
.qty-input-group #quantity_wanted::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}


.qty-input-group #quantity_wanted:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 4px rgba(74, 105, 255, 0.1);
    outline: none;
}


.product-add-to-cart .add {
    flex-grow: 1;
}

.btn-prohygiene-add {
    height: 55px;
    width: 100%;
    background: var(--brand-secondary);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    transition: transform 0.2s, background 0.3s, box-shadow 0.3s;
    box-shadow: 0 10px 25px rgba(122, 208, 58, 0.3);
}

.btn-prohygiene-add:hover {
    background: #6ab530;
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(122, 208, 58, 0.4);
}

.btn-prohygiene-add i {
    font-size: 24px;
}

/* Modern Gallery styling */
.product-gallery-side {
    padding-left: 2rem !important;
}

.images-container {
    background: #fff;
    border-radius: 25px;
    padding: 30px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.03);
}

.product-cover {
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
}

.product-cover img {
    width: 100%;
    height: 500px;
    object-fit: contain;
    transition: transform 0.5s;
}

.product-cover:hover img {
    transform: scale(1.05);
}

.product-images {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    padding: 5px 0 15px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--brand-secondary) #f0f0f0;
}

.product-images::-webkit-scrollbar {
    height: 6px;
}

.product-images::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 10px;
}

.product-images::-webkit-scrollbar-thumb {
    background: var(--brand-secondary);
    border-radius: 10px;
}

.product-images li {
    flex: 0 0 100px;
    height: 100px;
    border: 3px solid #f8f8f8;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s;
}

.product-images li:hover,
.product-images li.selected {
    border-color: var(--brand-secondary);
    transform: scale(0.95);
}

.product-images .thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Separate Tabs Section styling */
.product-tabs-row {
    margin-top: 4rem;
}

.ph-product-tabs {
    background: #fff;
    padding: 50px;
    border-radius: 30px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.04);
}

.ph-product-tabs .nav-tabs {
    justify-content: center;
    border-bottom: 2px solid #f5f5f5;
    margin-bottom: 40px;
    gap: 80px;
    /* Increased spacing between tabs */
}


.ph-product-tabs .nav-link {
    font-size: 1.2rem;
    padding: 15px 0 !important;
    color: #999 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ph-product-tabs .nav-link.active::after {
    height: 4px;
    border-radius: 0;
}

/* ── Mobile Overrides for New Layout ─────────────────────────── */
@media (max-width: 991px) {
    .product-info-side {
        padding-right: 15px !important;
    }

    .product-gallery-side {
        padding-left: 15px !important;
        margin-top: 30px;
    }

    #product h1.h1 {
        font-size: 2rem;
    }

    .product-cover img {
        height: 350px;
    }
}

@media (max-width: 767px) {
    .product-container {
        padding: 15px;
    }

    .add-to-cart-container {
        flex-direction: column;
        align-items: stretch;
    }

    .qty-input-group #quantity_wanted {
        width: 100%;
    }

    .ph-product-tabs {
        padding: 30px 15px;
        border-radius: 0;
    }

    .ph-product-tabs .nav-tabs {
        gap: 20px;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
    }
}

#mobile_top_menu_wrapper {
    padding: 0 !important;
}

/* --- Global Theme Color Overrides (Force Brand Primary instead of PrestaShop Blue) --- */

/* Text colors */
a,
.page-my-account #content .links a i,
#_desktop_top_menu .dropdown-item:hover,
.search-widget form input[type="text"]:focus,
.text-primary,
.dropdown-item.active,
.dropdown-item:active,
.page-link,
.btn-link,
.quickview .modal-header,
#footer .h1,
#footer .h2,
#footer .h3,
.cart-grid-body a.label:hover,
.product-price {
    color: var(--brand-primary) !important;
}

/* Hover text colors */
a:hover,
#_desktop_top_menu .dropdown-item:hover i,
.nav-link:hover {
    color: var(--brand-secondary) !important;
}

/* Background colors */
.btn-primary:not(.btn-prohygiene-add),
.tag-primary,
.dropdown-item.active,
.dropdown-item:active,
.page-item.active .page-link,
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link,
.tabs .nav-tabs .nav-link.active,
#search_widget form button[type="submit"]:hover,
.blockcart .cart-products-count,
.custom-radio input[type="radio"]:checked+span,
.facet-label.active .material-icons {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #FFF !important;
    /*padding: 10px !important;
    border-radius: 10px;
    margin-inline: 10px;*/
}

/* Hover background colors */
.btn-primary:hover:not(.btn-prohygiene-add),
.btn-primary:focus:not(.btn-prohygiene-add),
.btn-primary:active:not(.btn-prohygiene-add) {
    background-color: var(--brand-secondary) !important;
    border-color: var(--brand-secondary) !important;
}

/* Border colors */
.form-control:focus,
.input-group.focus,
.custom-checkbox input[type="checkbox"]:checked+span .checkbox-checked,
.product-images li.selected,
.product-images li:hover {
    border-color: var(--brand-primary) !important;
}

/* Pagination active override */
.pagination .current a,
.pagination .page-list li.current a {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}

/* Fix classic theme blue on buttons and focus states */
.btn-primary.disabled,
.btn-primary:disabled {
    background-color: #ccc !important;
    border-color: #ccc !important;
}

/* Universal sweep for PrestaShop Classic Blue (#24b9d7) */
.modal-header,
.block-categories .category-sub-menu a:hover,
#contact-rich-info .block .icon,
.facet .facet-label:hover,
.cart-summary-line.cart-summary-subtotals .value,
.search-widget form input[type="text"]:focus,
#main .page-header h1,
#main .page-header {
    border-color: var(--brand-primary) !important;
}

.progress-bar {
    background-color: var(--brand-primary) !important;
}

.product-flags .product-flag.new {
    background-color: var(--brand-secondary) !important;
}

.btn-outline-primary {
    color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.btn-outline-primary:hover {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}

body#product .ph-product-tabs .nav-item .nav-link {
    padding-inline: 15px !important;
    border-radius: 10px;
    margin-inline: 10px !important;
}

/* --- Product Page: Modern Quantity Selector & Add to Cart Refactor --- */
.product-add-to-cart .product-quantity {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
}

.product-add-to-cart .qty {
    margin-bottom: 0 !important;
    float: none !important;
}

.product-add-to-cart .control-label {
    font-weight: 700 !important;
    color: #7a7a7a !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
    margin-bottom: 8px !important;
    display: block !important;
    width: 100% !important;
}

.bootstrap-touchspin {
    width: 140px !important;
    height: 52px !important;
    background: #fff !important;
    border: 2px solid #f0f4f8 !important;
    border-radius: 12px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: stretch !important;
    padding: 0 !important;
}

.bootstrap-touchspin:focus-within {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 5px 15px rgba(74, 105, 255, 0.1) !important;
    transform: translateY(-1px) !important;
}

.bootstrap-touchspin input#quantity_wanted,
.bootstrap-touchspin input.js-cart-line-product-quantity {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    text-align: center !important;
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    color: #222 !important;
    padding: 0 40px !important;
    margin: 0 !important;
    box-shadow: none !important;
    -moz-appearance: textfield !important;
}

.bootstrap-touchspin input#quantity_wanted::-webkit-outer-spin-button,
.bootstrap-touchspin input#quantity_wanted::-webkit-inner-spin-button,
.bootstrap-touchspin input.js-cart-line-product-quantity::-webkit-outer-spin-button,
.bootstrap-touchspin input.js-cart-line-product-quantity::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.bootstrap-touchspin .input-group-btn-vertical {
    display: contents !important;
}

.bootstrap-touchspin .btn-touchspin {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 48px !important;
    background: #f1f4f8 !important;
    /* Slightly darker background to match full height feel */
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #444 !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    z-index: 5 !important;
    border-radius: 0 !important;
    height: 100% !important;
}

.bootstrap-touchspin .btn-touchspin:hover {
    background: #e2e8f0 !important;
    color: var(--brand-primary) !important;
}

.bootstrap-touchspin .bootstrap-touchspin-down {
    left: 0 !important;
    border-right: 1px solid #e2e8f0 !important;
}

.bootstrap-touchspin .bootstrap-touchspin-up {
    right: 0 !important;
    border-left: 1px solid #e2e8f0 !important;
}

/* Icon Fixes for Touchspin buttons (removes double icons) */
.bootstrap-touchspin .btn-touchspin i {
    font-size: 0 !important;
    /* Hides original expand_less/more text */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

.bootstrap-touchspin .btn-touchspin i::before {
    font-family: 'Material Icons' !important;
    font-size: 22px !important;
    font-weight: normal !important;
    line-height: 1 !important;
    display: block !important;
}

.bootstrap-touchspin .bootstrap-touchspin-up i::before {
    content: "add" !important;
}

.bootstrap-touchspin .bootstrap-touchspin-down i::before {
    content: "remove" !important;
}

/* Add to Cart Button Matching */
.product-add-to-cart .add-to-cart {
    height: 52px !important;
    border-radius: 12px !important;
    padding: 0 40px !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    text-transform: none !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 4px 15px rgba(122, 208, 58, 0.3) !important;
    background: linear-gradient(135deg, var(--brand-secondary) 0%, #6ab530 100%) !important;
    border: none !important;
    color: #fff !important;
}

.product-add-to-cart .add-to-cart:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(122, 208, 58, 0.4) !important;
    background: linear-gradient(135deg, #6ab530 0%, var(--brand-secondary) 100%) !important;
}

.product-add-to-cart .add-to-cart:active {
    transform: translateY(0) scale(0.98) !important;
}

.product-add-to-cart .add-to-cart .material-icons {
    font-size: 24px !important;
    margin-right: 0 !important;
}

/* --- Product Page: Premium Image Modal & Lightbox Refactor --- */
.modal-backdrop.show {
    opacity: 0.8 !important;
    background-color: #0b1120 !important;
    backdrop-filter: blur(10px) !important;
}

#product-modal .modal-dialog {
    max-width: 1100px !important;
    width: 95% !important;
    margin: 2rem auto !important;
    height: auto !important;
}

#product-modal .modal-content {
    border-radius: 24px !important;
    border: none !important;
    overflow: hidden !important;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.3) !important;
    background: #fff !important;
}

#product-modal .modal-body {
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    max-height: 85vh !important;
    overflow: hidden !important;
}

/* Left Section (Main Image) */
#product-modal .modal-body figure {
    flex: 1 !important;
    margin: 0 !important;
    padding: 40px !important;
    background: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

#product-modal .product-cover-modal {
    max-width: 100% !important;
    max-height: 70vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

#product-modal .product-cover-modal:hover {
    transform: scale(1.02) !important;
}

/* Right Section (Thumbnails) */
#product-modal .thumbnails {
    width: 220px !important;
    background: #f8fafc !important;
    padding: 25px !important;
    border-left: 1px solid #f1f5f9 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

#product-modal .mask {
    height: 100% !important;
    overflow-y: auto !important;
    padding-right: 5px !important;
}

/* Custom Scrollbar for Thumbnails */
#product-modal .mask::-webkit-scrollbar {
    width: 6px !important;
}

#product-modal .mask::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 10px !important;
}

#product-modal .product-images {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

#product-modal .thumb-container {
    margin: 0 !important;
}

#product-modal .thumb {
    width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    border: 3px solid transparent !important;
    transition: all 0.3s ease !important;
    background: #fff !important;
    padding: 6px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02) !important;
}

#product-modal .thumb:hover,
#product-modal .thumb.selected {
    border-color: var(--brand-secondary) !important;
    box-shadow: 0 10px 20px rgba(122, 208, 58, 0.2) !important;
    transform: translateY(-2px) !important;
}

/* Close Button Enhancement */
#product-modal .close {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 1050 !important;
    background: #fff !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
    color: #333 !important;
    opacity: 1 !important;
    transition: all 0.3s !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#product-modal .close:hover {
    background: #f1f5f9 !important;
    transform: rotate(90deg) !important;
    color: var(--brand-primary) !important;
}

#product-modal .close i {
    font-size: 24px !important;
}

/* Image Navigation Arrows */
#product-modal .arrows {
    display: none !important;
    /* Hide old tiny arrows */
}

/* Responsive Tweaks */
@media (max-width: 991px) {
    #product-modal .modal-body {
        flex-direction: column !important;
        max-height: none !important;
        overflow-y: auto !important;
    }

    #product-modal .thumbnails {
        width: 100% !important;
        border-left: none !important;
        border-top: 1px solid #eee !important;
        padding: 20px !important;
    }

    #product-modal .product-images {
        flex-direction: row !important;
        overflow-x: auto !important;
        padding-bottom: 5px !important;
    }

    #product-modal .thumb-container {
        width: 100px !important;
        flex-shrink: 0 !important;
    }
}

.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link:hover {
    border-bottom: var(--brand-primary) 3px solid !important;

}

/*.tabs .nav-tabs .nav-link:hover {
    border-radius: 0 !important;
}*/

/* --- Product Information Side & Buy Card Refactor --- */
.product-info-side {
    padding-left: 15px !important;
}

#product h1.h1 {
    font-size: 2.8rem !important;
    font-weight: 800 !important;
    color: var(--brand-primary) !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

.product-info-card {
    background: #ffffff !important;
    border-radius: 24px !important;
    padding: 35px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid #f1f5f9 !important;
    margin-top: 1.5rem !important;
}

.product-prices {
    margin-bottom: 1.5rem !important;
}

.product-prices .current-price span {
    font-size: 2.6rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

.product-info-card .product-description {
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    color: #4b5563 !important;
    margin: 1rem 0 !important;
}

/* Stock Status Pill Enhancement */
.ph-stock-status .stock-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 18px !important;
    border-radius: 30px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    margin-bottom: 20px !important;
    text-transform: none !important;
}

.ph-stock-status .stock-label.in-stock {
    background: #f0fdf4 !important;
    color: #16a34a !important;
    border: 1px solid #dcfce7 !important;
}

.ph-stock-status .stock-label i {
    font-size: 18px !important;
    color: inherit !important;
}

/* Social Sharing Section */
.product-additional-info .social-sharing {
    margin-top: 25px !important;
    padding-top: 20px !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.product-additional-info .social-sharing span {
    font-weight: 700 !important;
    color: #64748b !important;
    font-size: 0.9rem !important;
    text-transform: none !important;
}

.product-additional-info .social-sharing li {
    margin: 0 !important;
}

.product-additional-info .social-sharing li a {
    color: #64748b !important;
    transition: color 0.2s !important;
}

.product-additional-info .social-sharing li a:hover {
    color: var(--brand-primary) !important;
}

/* Adjusting Title inside the card */
.product-info-card h1.h1 {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
    font-size: 2.2rem !important;
    /* Slightly smaller to fit better inside the card padding */
}

.product-images>li.thumb-container .thumb.selected,
.product-images>li.thumb-container .thumb:hover {
    border: none !important;
}

body#checkout section.checkout-step .address-item.selected {
    border: 3px solid var(--brand-secondary) !important;
    border-radius: 10px !important;
}

.brands-sort .select-list:hover,
.products-sort-order .select-list:hover,
.suppliers-sort .select-list:hover {
    background: transparent !important;
}

.brands-sort .select-title,
.products-sort-order .select-title,
.suppliers-sort .select-title {
    border-radius: 10px !important;
}

/* --- Premium Pagination Refactor --- */
.pagination {
    margin: 3rem 0 !important;
    display: flex !important;
    justify-content: center !important;
    background: transparent !important;
}

.pagination .page-list {
    display: inline-flex !important;
    align-items: center !important;
    background: #ffffff !important;
    padding: 8px 15px !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid #f1f5f9 !important;
    list-style: none !important;
    margin: 0 auto !important;
    gap: 5px !important;
}

.pagination .page-list li {
    display: flex !important;
    align-items: center !important;
}

.pagination a {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    color: #64748b !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
    border: none !important;
}

.pagination a:hover {
    background: #f8fafc !important;
    color: var(--brand-primary) !important;
    transform: translateY(-2px) !important;
}

.pagination .current a {
    background: var(--brand-primary) !important;
    color: #fff !important;
    box-shadow: 0 8px 15px rgba(74, 105, 255, 0.25) !important;
    cursor: default !important;
}

.pagination .current a:hover {
    transform: none !important;
    background: var(--brand-primary) !important;
}

.pagination .next,
.pagination .previous {
    width: auto !important;
}

.pagination .next a,
.pagination .previous a {
    width: auto !important;
    padding: 0 20px !important;
    border-radius: 30px !important;
    font-size: 0.9rem !important;
    text-transform: none !important;
    gap: 5px !important;
    display: inline-flex !important;
}

.pagination .disabled a {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    color: #94a3b8 !important;
}

.pagination .disabled a:hover {
    background: transparent !important;
    transform: none !important;
}

/* --- Product Page: Layout Alignment & card Refactor --- */
#product #content {
    max-width: none !important;
    margin: 0 !important;
    position: relative !important;
}

.product-main-row {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
}

.product-gallery-card,
.product-info-card {
    background: #ffffff !important;
    border-radius: 24px !important;
    padding: 40px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid #f1f5f9 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    margin-top: 0 !important;
}

.product-gallery-side {
    padding-left: 15px !important;
}

.product-info-side {
    padding-right: 15px !important;
}

/* Product Flags Enhancement (Moving inside card) */
.product-gallery-card .product-flags {
    position: absolute !important;
    top: 30px !important;
    left: 30px !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.product-gallery-card .product-flag {
    position: static !important;
    margin-bottom: 0 !important;
    border-radius: 50px !important;
    padding: 6px 16px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 0.7rem !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
}

/* Align the tops precisely */
.product-info-card h1.h1 {
    margin-top: 0 !important;
    line-height: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PRODUCT PAGE v3 — Consolidated responsive overrides
   Scoped to body#product to avoid leaking into other pages.
   Desktop → tighten oversized cards/fonts.
   Tablet (≤ 991px) → stack columns, gallery above info.
   Mobile (≤ 575px) → compact everything.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Desktop: tighten card sizes ───────────────────────────────── */
body#product .product-container {
    padding: 0 !important;
}

body#product .product-main-row {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 0 !important;
}

body#product .product-gallery-card,
body#product .product-info-card {
    padding: 28px !important;
    border-radius: 20px !important;
    height: auto !important;
    margin-top: 0 !important;
}

/* h1: was 2.8rem — reduce to readable but prominent */
body#product h1.h1,
body#product .product-info-card h1.h1 {
    font-size: 1.7rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.6rem !important;
}

/* Price: was 2.6rem */
body#product .product-prices .current-price span {
    font-size: 1.9rem !important;
}

/* Cover image: was 500px — reduce for col-md-5 proportions */
body#product .product-cover img {
    height: 360px !important;
}

/* Tabs section */
body#product .ph-product-tabs {
    padding: 30px !important;
    border-radius: 18px !important;
}

body#product .ph-product-tabs .nav-tabs {
    gap: 40px !important;
    margin-bottom: 24px !important;
}

body#product .ph-product-tabs .nav-link {
    font-size: 1rem !important;
    padding: 12px 0 !important;
}

body#product .product-actions {
    padding: 24px !important;
    border-radius: 16px !important;
}

/* ── Tablet: 576px – 991px — stack columns ──────────────────────── */
@media (max-width: 991px) {
    body#product .product-info-side,
    body#product .product-gallery-side {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    body#product .product-gallery-side {
        order: 1 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 16px !important;
    }

    body#product .product-info-side {
        order: 2 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body#product .product-cover img {
        height: 300px !important;
    }

    body#product h1.h1,
    body#product .product-info-card h1.h1 {
        font-size: 1.4rem !important;
    }

    body#product .product-prices .current-price span {
        font-size: 1.65rem !important;
    }

    body#product .product-gallery-card,
    body#product .product-info-card {
        padding: 22px !important;
        border-radius: 16px !important;
    }

    body#product .product-actions {
        padding: 20px !important;
    }

    body#product .ph-product-tabs {
        padding: 22px 18px !important;
        border-radius: 14px !important;
    }

    body#product .ph-product-tabs .nav-tabs {
        gap: 24px !important;
    }

    body#product .product-tabs-row {
        margin-top: 2rem !important;
    }
}

/* ── Mobile: ≤ 575px — compact ─────────────────────────────────── */
@media (max-width: 575px) {
    body#product .product-gallery-card,
    body#product .product-info-card {
        padding: 16px !important;
        border-radius: 12px !important;
    }

    body#product .product-cover img {
        height: 220px !important;
    }

    body#product h1.h1,
    body#product .product-info-card h1.h1 {
        font-size: 1.15rem !important;
    }

    body#product .product-prices .current-price span {
        font-size: 1.4rem !important;
    }

    body#product .product-actions {
        padding: 16px !important;
        border-radius: 12px !important;
    }

    body#product .add-to-cart-container {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    body#product .btn-prohygiene-add {
        height: 48px !important;
        font-size: 0.95rem !important;
    }

    body#product .product-add-to-cart .add-to-cart {
        height: 48px !important;
        padding: 0 16px !important;
        font-size: 0.95rem !important;
    }

    body#product .ph-product-tabs {
        padding: 14px 12px !important;
        border-radius: 10px !important;
    }

    body#product .ph-product-tabs .nav-tabs {
        gap: 10px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        padding-bottom: 4px !important;
    }

    body#product .ph-product-tabs .nav-link {
        font-size: 0.82rem !important;
        white-space: nowrap !important;
        padding: 10px 0 !important;
    }

    body#product .product-tabs-row {
        margin-top: 1.5rem !important;
    }

    body#product .product-description-short {
        font-size: 0.95rem !important;
        padding-left: 14px !important;
        margin-bottom: 20px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   FULL PS DEFAULT COLOR SWEEP (#24b9d7 / #25b9d7 / #2fb5d2)
   Every selector in themes/classic + frontend modules that still
   shows the PS teal replaced with brand primary/secondary.
   ═══════════════════════════════════════════════════════════════════ */

/* ── A. Cart modal ──────────────────────────────────────────────── */
#blockcart-modal .product-name {
    color: var(--brand-primary) !important;
}

#blockcart-modal .cart-content-btn .btn-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

#blockcart-modal .cart-content-btn .btn-secondary {
    border-color: var(--brand-primary) !important;
    color: var(--brand-primary) !important;
}

/* ── B. Bootstrap utility classes ───────────────────────────────── */
.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.bg-primary {
    background-color: var(--brand-primary) !important;
}

.card-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.card-outline-primary {
    border-color: var(--brand-primary) !important;
}

/* ── C. Form outlines (classic theme sets outline not border) ────── */
.form-control:focus {
    outline-color: var(--brand-primary) !important;
}

.input-group.focus {
    outline-color: var(--brand-primary) !important;
}

.search-widget form input[type="text"]:focus {
    outline-color: var(--brand-primary) !important;
}

.block_newsletter form input[type="text"]:focus,
.block_newsletter form input[type="email"]:focus {
    outline-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

/* ── D. Faceted search ──────────────────────────────────────────── */
.facet-dropdown.open > .select-title {
    border: 3px solid var(--brand-primary) !important;
}

.facet-dropdown .select-list:hover {
    background: var(--brand-primary) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* ── E. Product page – remaining bits ───────────────────────────── */
#product-modal .modal-content .modal-body .product-images img:hover {
    border-color: var(--brand-primary) !important;
}

/* Default product flag fallback — exclude ecolabel (has inline bg:transparent) */
.product-flags li.product-flag:not(.ecolabel-flag) {
    background: var(--brand-primary) !important;
}

/* .new flag stays green */
.product-flags .product-flag.new {
    background: var(--brand-secondary) !important;
}

/* Ecolabel flag: keep transparent bg, no shadow, no padding */
.product-flags li.product-flag.ecolabel-flag {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    min-width: unset !important;
    min-height: unset !important;
}

.product-customization .product-message:focus {
    outline: 3px solid var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

/* ── F. Cart / promo ────────────────────────────────────────────── */
.block-promo .promo-input + button {
    border-color: var(--brand-primary) !important;
    color: var(--brand-primary) !important;
}

.block-promo .promo-code-button.cancel-promo {
    color: var(--brand-primary) !important;
}

/* ── G. Category / subcategory blocks ───────────────────────────── */
#subcategories ul li .subcategory-name:hover,
.block-categories .arrows .arrow-down:hover,
.block-categories .arrows .arrow-right:hover,
.block-categories .collapse-icons .add:hover,
.block-categories .collapse-icons .remove:hover {
    color: var(--brand-primary) !important;
}

#subcategories ul li:hover .subcategory-image a {
    border-color: var(--brand-primary) !important;
}

/* ── H. Quick-view hover on product miniature ───────────────────── */
.product-miniature .highlighted-informations .quick-view:hover {
    color: var(--brand-primary) !important;
}

/* ── I. Social & newsletter ─────────────────────────────────────── */
.block-social ul li:hover {
    background-color: var(--brand-primary) !important;
}

.account-list a:hover,
.footer-container li a:hover {
    color: var(--brand-secondary) !important;
}

/* ── J. Header cart (legacy PS classic selectors) ───────────────── */
#header .header-nav .cart-preview.active {
    background: var(--brand-primary) !important;
}

#header .header-nav .blockcart a:hover {
    color: var(--brand-primary) !important;
}

/* ── K. Module: blockwishlist ───────────────────────────────────── */
.wishlist-footer-links > a {
    color: var(--brand-primary) !important;
}

.wishlist-footer-links > a:hover {
    color: var(--brand-secondary) !important;
}

/* ── L. Module: productcomments addons suggestion ───────────────── */
.module-addons-suggestion .suggestion-link .btn-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

/* ── M. Contact page file-upload button ─────────────────────────── */
.group-span-filestyle .btn-default,
.bootstrap-touchspin .group-span-filestyle .btn-touchspin,
.group-span-filestyle .bootstrap-touchspin .btn-touchspin {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}

/* ── Global button border-radius ───────────────────────────────── */
.btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    border-radius: 25px !important;
}

/* ── Global input border-radius ────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
textarea,
select,
.form-control {
    border-radius: 10px !important;
}

/* Stores page */
.ph-stores-page {
    display: block;
}

.ph-stores-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 32px;
    margin-bottom: 24px;
    border: 1px solid #e5edf5;
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(74, 105, 255, 0.16), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #f5f9ff 100%);
    box-shadow: 0 18px 42px rgba(23, 52, 109, 0.08);
}

.ph-stores-kicker {
    margin: 0 0 8px;
    color: var(--brand-primary);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ph-stores-intro-title {
    margin: 0 0 10px;
    color: #162338;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    line-height: 1.1;
}

.ph-stores-intro-text {
    max-width: 760px;
    margin: 0;
    color: #53627a;
    font-size: 1rem;
    line-height: 1.6;
}

.ph-stores-download {
    min-width: 240px;
    text-align: center;
}

#stores .page-stores .ph-store-card {
    margin-bottom: 22px;
    overflow: hidden;
    border: 1px solid #e7edf5;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(15, 42, 89, 0.06);
}

#stores .page-stores .ph-store-card .store-item-container {
    padding: 22px 0;
}

.ph-store-short {
    margin: -2px 0 12px;
    color: #6b7a90;
    font-size: 0.95rem;
    font-weight: 600;
}

.ph-store-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.ph-store-action {
    border-radius: 999px;
    padding: 10px 16px;
    box-shadow: none;
}

.ph-store-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    color: var(--brand-primary);
    font-weight: 600;
}

.ph-store-more:hover,
.ph-store-more:focus {
    text-decoration: none;
}

#stores .page-stores .store-item-footer a {
    color: inherit;
}

@media (max-width: 991px) {
    .ph-stores-intro {
        flex-direction: column;
        align-items: flex-start;
    }

    .ph-stores-download {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 575px) {
    .ph-stores-intro {
        padding: 22px 18px;
        border-radius: 20px;
    }

    .ph-store-quick-actions {
        gap: 8px;
    }

    .ph-store-action {
        width: 100%;
        padding: 11px 14px;
    }
}

/* ==========================================================================
   Customer authentication — professional Pro Hygiene login
   ========================================================================== */
body#authentication #main {
    width: 100%;
    max-width: 650px;
    margin: 42px auto 72px;
}

body#authentication #main .page-header {
    margin: 0 0 24px;
    text-align: center;
}

body#authentication #main .page-header::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--brand-primary) 0%, #354ed8 100%);
    box-shadow: 0 10px 24px rgba(74, 105, 255, 0.22);
    color: #fff;
    content: "lock";
    font-family: "Material Icons";
    font-size: 23px;
    font-weight: 400;
    line-height: 1;
}

body#authentication #main .page-header h1 {
    margin: 0;
    color: #1d2939;
    font-size: clamp(1.7rem, 3vw, 2.15rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.15;
    text-transform: none;
}

body#authentication #content.page-content {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0 auto !important;
    overflow: hidden;
    padding: 40px 44px 34px;
    border: 1px solid rgba(74, 105, 255, 0.1);
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 60px rgba(34, 55, 104, 0.12), 0 4px 14px rgba(34, 55, 104, 0.05);
}

body#authentication #content.page-content::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--brand-primary) 0%, #6881ff 48%, var(--brand-secondary) 100%);
    content: "";
}

body#authentication #content .login-form {
    margin: 0;
}

body#authentication #login-form .form-group.row {
    display: block;
    margin: 0 0 22px;
}

body#authentication #login-form .form-control-label {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 8px;
    padding: 0;
    color: #344054;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
}

body#authentication #login-form .form-control-label.required::after {
    margin-left: 3px;
    color: var(--brand-primary);
}

body#authentication #login-form .js-input-column {
    width: 100%;
    max-width: 100%;
    padding: 0;
    flex: 0 0 100%;
}

body#authentication #login-form .form-control-comment {
    display: none;
}

body#authentication #login-form .form-control {
    width: 100%;
    height: 52px;
    padding: 13px 16px;
    border: 1px solid #cfd8e3;
    border-radius: 12px !important;
    outline: 0 !important;
    background: #f9fbfd;
    box-shadow: none;
    color: #1d2939;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

body#authentication #login-form .form-control:hover {
    border-color: #aebdcb;
    background: #fff;
}

body#authentication #login-form .form-control:focus {
    border-color: var(--brand-primary);
    outline: 0 !important;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(74, 105, 255, 0.12);
}

body#authentication #login-form .input-group {
    position: relative;
    display: block;
    width: 100%;
    outline: 0 !important;
    background: transparent;
}

body#authentication #login-form .input-group.focus {
    outline: 0 !important;
}

body#authentication #login-form .input-group .form-control {
    display: block;
    padding-right: 62px;
    border-radius: 12px !important;
}

body#authentication #login-form .input-group-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 4;
    display: block;
    width: 42px;
    height: 42px;
}

body#authentication #login-form button[data-action="show-password"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    min-width: 42px;
    padding: 0;
    border: 0;
    border-radius: 9px !important;
    outline: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: #667085;
    cursor: pointer;
    font-size: 0;
    line-height: 1;
    transform: none;
    transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

body#authentication #login-form button[data-action="show-password"]::before {
    width: 22px;
    height: 22px;
    background-color: currentColor;
    content: "";
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

body#authentication #login-form #field-password[type="text"] + .input-group-btn button[data-action="show-password"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 5.2A11.2 11.2 0 0 1 12 5c6.5 0 10 7 10 7a18.6 18.6 0 0 1-2.1 3.1'/%3E%3Cpath d='M6.6 6.6C3.6 8.6 2 12 2 12s3.5 7 10 7a10.7 10.7 0 0 0 5.4-1.6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 5.2A11.2 11.2 0 0 1 12 5c6.5 0 10 7 10 7a18.6 18.6 0 0 1-2.1 3.1'/%3E%3Cpath d='M6.6 6.6C3.6 8.6 2 12 2 12s3.5 7 10 7a10.7 10.7 0 0 0 5.4-1.6'/%3E%3C/svg%3E");
}

body#authentication #login-form button[data-action="show-password"]:hover {
    background: rgba(74, 105, 255, 0.1) !important;
    color: var(--brand-primary);
}

body#authentication #login-form button[data-action="show-password"]:focus {
    background: rgba(74, 105, 255, 0.12) !important;
    box-shadow: 0 0 0 3px rgba(74, 105, 255, 0.16) !important;
    color: #354ed8;
}

body#authentication #login-form button[data-action="show-password"]:active {
    transform: scale(0.94);
}

body#authentication #login-form .forgot-password {
    margin: -6px 0 26px;
    text-align: right;
}

body#authentication #login-form .forgot-password a {
    color: var(--brand-primary);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
}

body#authentication #login-form .forgot-password a:hover,
body#authentication #login-form .forgot-password a:focus {
    color: #354ed8;
    text-decoration: underline;
}

body#authentication #login-form .form-footer {
    padding: 0;
}

body#authentication #submit-login {
    width: 100%;
    min-height: 52px;
    padding: 12px 22px;
    border: 0;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--brand-secondary) 0%, #63b82d 100%) !important;
    box-shadow: 0 12px 26px rgba(122, 208, 58, 0.28);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

body#authentication #submit-login:hover,
body#authentication #submit-login:focus {
    background: linear-gradient(135deg, #6fc833 0%, #58a526 100%) !important;
    box-shadow: 0 15px 30px rgba(122, 208, 58, 0.34);
    color: #fff;
    transform: translateY(-1px);
}

body#authentication #submit-login:active {
    box-shadow: 0 7px 18px rgba(122, 208, 58, 0.24);
    transform: translateY(0);
}

body#authentication #content.page-content hr {
    margin: 30px 0 24px;
    border-color: #e8edf3;
}

body#authentication #content .no-account {
    margin: 0;
    text-align: center;
}

body#authentication #content .no-account a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid rgba(74, 105, 255, 0.18);
    border-radius: 11px;
    background: rgba(74, 105, 255, 0.06);
    color: var(--brand-primary);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

body#authentication #content .no-account a:hover,
body#authentication #content .no-account a:focus {
    border-color: rgba(74, 105, 255, 0.34);
    background: rgba(74, 105, 255, 0.1);
    color: #354ed8;
}

body#authentication #content .alert-danger {
    margin-bottom: 24px;
    border: 1px solid #f3c9ce;
    border-radius: 12px;
    background: #fff6f7;
    color: #9f2433;
}

@media (max-width: 767px) {
    body#authentication #main {
        margin: 28px auto 48px;
    }

    body#authentication #main .page-header {
        margin-bottom: 18px;
    }

    body#authentication #main .page-header::before {
        width: 44px;
        height: 44px;
        margin-bottom: 12px;
        border-radius: 13px;
        font-size: 21px;
    }

    body#authentication #main .page-header h1 {
        font-size: 1.6rem;
    }

    body#authentication #content.page-content {
        max-width: 100%;
        padding: 30px 22px 26px;
        border-radius: 17px !important;
    }

    body#authentication #login-form .form-group.row {
        margin-bottom: 19px;
    }

    body#authentication #content .no-account a {
        width: 100%;
    }
}