/* ==========================================================================
   PequeMonster - Complete Visual Redesign (Desktop + Mobile)
   File: pm-redesign.css
   Date: 2026-03-27
   
   Color Palette:
   - Primary (monster blue): #5BA4CF
   - CTA (orange): #EF8700
   - Dark: #1a1a2e
   - Light bg: #f8f9fa
   - Borders: #e5e7eb
   - Secondary text: #6b7280
   - WhatsApp green: #25D366
   ========================================================================== */

/* ==========================================================================
   0. CSS VARIABLES & GOOGLE FONT
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
    --pm-primary: #5BA4CF;
    --pm-primary-dark: #3D7EAA;
    --pm-primary-light: #E3F2FD;
    --pm-cta: #EF8700;
    --pm-cta-dark: #D07600;
    --pm-cta-light: #FFF3E0;
    --pm-dark: #1a1a2e;
    --pm-text: #1a1a2e;
    --pm-text-secondary: #6b7280;
    --pm-bg-light: #f8f9fa;
    --pm-border: #e5e7eb;
    --pm-white: #ffffff;
    --pm-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --pm-shadow: 0 2px 8px rgba(0,0,0,0.08);
    --pm-shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --pm-radius: 8px;
    --pm-radius-lg: 12px;
    --pm-radius-pill: 24px;
    --pm-transition: all 0.2s ease;
    --pm-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ==========================================================================
   1. GLOBAL TYPOGRAPHY - Override Anton font everywhere
   ========================================================================== */

/* Body font */
html,
body,
body * {
    font-family: var(--pm-font) !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.page-heading,
.page-subheading,
.block .title_block,
.block .title_block a,
.block h4,
.block h4 a,
.home_products_title span,
.home_products_title a > span,
.brandstitle,
.sds_title_block a,
.idTabs > li a,
h3.page-product-heading,
.pb-center-column h1,
.sf-menu > li > a,
.sf-menu > li > ul > li > a,
#bottominfo_block h3,
#bottominfo_block p,
.footer-wrapper #footer h4,
.shopping_cart > a:first-child > span.cartname,
.btn,
.button,
ul.step,
.table > thead > tr > th,
#cart_summary tfoot td.total_price_container span,
.soldout-label,
#royinfoblock h3,
.sdstitle_block,
.sdsreadMore .more a,
.breadcrumb,
.breadcrumb a,
#my-account ul.myaccount-link-list li a,
.box-cart-bottom .ajax_add_to_cart_button span,
.content_sortPagiBar .sortPagiBar label,
.cart_block .cart-prices .cart-prices-line,
.cart_block .cart-prices .cart-prices-line .price,
.bottom-pagination-content .nbrItemPage label,
ul.product_list.list > li .product-container .button-container .ajax_add_to_cart_button span,
#categories_block_left li a,
#layered_block_left .layered_subtitle,
#homepage-slider .homeslider-description h2,
#homepage-slider .homeslider-description button,
.FINALmenu-tab-content,
#usefull_link_block li a,
.resetimg #wrapResetImages a,
.buttons_bottom_block #wishlist_button,
#royinfoblock h4,
.sf-menu li li li a,
.new-label,
.sale-label,
ul.product_list .functional-buttons div a,
ul.product_list .functional-buttons div label,
#layer_cart .crossseling h2,
#layer_cart .layer_cart_product h2,
#layer_cart .layer_cart_cart h2,
.product-name,
#categories_block_left li li a {
    font-family: var(--pm-font) !important;
}

/* Prices - Montserrat weight 800 */
.price,
.price-percent-reduction,
.old-price,
.price.product-price,
.box-info-product #our_price_display,
#cart_summary tfoot td#total_price_container,
.content_price .price,
.our_price_display .price {
    font-family: var(--pm-font) !important;
    font-weight: 800 !important;
}

/* text-transform: remove uppercase from most elements */
.pb-center-column h1,
#htmlcontent_top .bview h2,
#htmlcontent_home .bview h2,
.breadcrumb,
.cart_block .cart-prices .cart-prices-line,
#articleComments h4,
.comment-reply-title,
.related,
.soldout-label,
.shopping_cart > a:first-child > span.cartname,
.block .title_block,
.block h4,
#categories_block_left li a,
.footer-wrapper #footer h4,
#footer #newsletter_block_left h4,
.footer-wrapper #footer #social_block h4,
#layered_block_left .layered_subtitle,
.home_products_title span,
.home_products_title a > span,
.brandstitle,
.sds_title_block a,
.idTabs > li a,
h3.page-product-heading,
#royinfoblock h3,
.breadcrumb a,
.page-heading,
#my-account ul.myaccount-link-list li a,
.table > thead > tr > th,
.page-subheading,
.btn,
.button,
.button span,
.sf-menu > li > a,
h1, h2, h3, h4, h5, h6 {
    text-transform: none !important;
}

/* Body color */
body {
    color: var(--pm-text) !important;
    background-color: var(--pm-bg-light) !important;
}

/* Links */
a {
    color: var(--pm-primary) !important;
    transition: var(--pm-transition) !important;
}
a:hover,
a:focus {
    color: var(--pm-primary-dark) !important;
}

/* ==========================================================================
   2. DESKTOP HEADER (min-width: 769px)
   ========================================================================== */
@media (min-width: 769px) {

    /* Remove gradient backgrounds from header */
    header,
    #header {
        background-image: none !important;
        background-color: var(--pm-white) !important;
        border-bottom: 1px solid var(--pm-border) !important;
        box-shadow: var(--pm-shadow-sm) !important;
    }

    /* Top nav bar - clean dark bar */
    header .nav,
    #header .nav,
    header .nav.nav-height {
        background: var(--pm-dark) !important;
        min-height: 36px !important;
    }

    /* User info links */
    #header_user_info a {
        color: rgba(255,255,255,0.85) !important;
        font-size: 13px !important;
        font-weight: 500 !important;
    }
    #header_user_info a:hover {
        color: var(--pm-white) !important;
    }

    /* Head section - logo + search + cart */
    header .head,
    #header .head {
        background: var(--pm-white) !important;
        padding: 12px 0 !important;
    }

    /* Search bar - clean, rounded */
    #search_block_top #searchbox {
        background: var(--pm-bg-light) !important;
        border: 2px solid var(--pm-border) !important;
        border-radius: var(--pm-radius-pill) !important;
        overflow: hidden !important;
        transition: var(--pm-transition) !important;
    }
    #search_block_top #searchbox:focus-within {
        border-color: var(--pm-primary) !important;
        box-shadow: 0 0 0 3px rgba(91,164,207,0.15) !important;
    }
    #search_block_top #searchbox input {
        color: var(--pm-text) !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        border: none !important;
        background: transparent !important;
    }
    #search_block_top .btn.button-search {
        background-color: var(--pm-primary) !important;
        border-color: var(--pm-primary) !important;
        border-radius: 0 var(--pm-radius-pill) var(--pm-radius-pill) 0 !important;
    }

    /* Shopping cart in header */
    .shopping_cart > a:first-child {
        background-color: var(--pm-bg-light) !important;
        border: 1px solid var(--pm-border) !important;
        border-radius: var(--pm-radius) !important;
        transition: var(--pm-transition) !important;
    }
    .shopping_cart:hover > a:first-child {
        background-color: var(--pm-white) !important;
        border-color: var(--pm-primary) !important;
        box-shadow: var(--pm-shadow) !important;
    }
    .shopping_cart > a:first-child > span.cartname {
        color: var(--pm-text) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    /* Cart dropdown */
    #header .cart_block {
        background-color: var(--pm-white) !important;
        border: 1px solid var(--pm-border) !important;
        border-radius: var(--pm-radius) !important;
        box-shadow: var(--pm-shadow-lg) !important;
    }

    /* Info panel */
    .infopanel {
        background-color: var(--pm-bg-light) !important;
        border-color: var(--pm-border) !important;
    }
    #royinfoblock h3 {
        color: var(--pm-text-secondary) !important;
        font-weight: 600 !important;
    }

    /* ---- NAVIGATION MENU (FINALmenu + sf-menu) ---- */
    .sf-contener,
    #FINALmenu {
        background-color: var(--pm-primary) !important;
        border-color: var(--pm-primary-dark) !important;
        border-radius: 0 !important;
        border-bottom-width: 0 !important;
    }

    .sf-menu > li > a,
    #FINALmenu #FINALmenu-desktop-nav > li,
    #FINALmenu #FINALmenu-desktop-nav > li > a {
        background-color: var(--pm-primary) !important;
        color: var(--pm-white) !important;
        font-weight: 600 !important;
        font-size: 15px !important;
        text-transform: none !important;
        border-color: transparent !important;
    }

    .sf-menu > li.sfHover > a,
    .sf-menu > li > a:hover,
    #FINALmenu #FINALmenu-desktop-nav > li:hover,
    #FINALmenu #FINALmenu-desktop-nav > li:hover > a,
    #FINALmenu #FINALmenu-desktop-nav > li:hover .top-link-wrapper a,
    #FINALmenu #FINALmenu-desktop-nav > li:hover .top-link-wrapper span {
        background-color: var(--pm-primary-dark) !important;
        color: var(--pm-white) !important;
    }

    #FINALmenu #FINALmenu-desktop-nav .top-link-wrapper a,
    #FINALmenu #FINALmenu-desktop-nav .top-link-wrapper span,
    #FINALmenu #FINALmenu-desktop-nav .top-link-wrapper i {
        color: var(--pm-white) !important;
    }

    /* Sticky menu */
    #block_top_menu.fixed,
    #FINALmenu.sticky_menu {
        background-color: var(--pm-primary) !important;
    }

    /* Submenu dropdown */
    .sf-menu li ul.submenu-container,
    .FINALmenu-tab-content,
    #FINALmenu-desktop-nav .FINALmenu-simple-tab ul {
        background-color: var(--pm-white) !important;
        border: 1px solid var(--pm-border) !important;
        border-radius: var(--pm-radius) !important;
        box-shadow: var(--pm-shadow-lg) !important;
    }

    .sf-menu ul a,
    .sf-menu ul a:visited,
    #FINALmenu-desktop-nav .FINALmenu-simple-tab a {
        color: var(--pm-text) !important;
        font-weight: 500 !important;
    }

    .sf-menu > li > ul > li > a:hover,
    .sf-menu li li li a:hover,
    #FINALmenu-desktop-nav .FINALmenu-simple-tab a:hover {
        color: var(--pm-primary) !important;
    }

    .sf-menu li li li a:before,
    #FINALmenu .cms-pages a:before,
    #FINALmenu .categories a:before {
        color: var(--pm-primary) !important;
    }

} /* end @media min-width: 769px */


/* ==========================================================================
   3. BREADCRUMBS
   ========================================================================== */
.breadcrumb {
    color: var(--pm-text-secondary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 12px 0 !important;
}
.breadcrumb a {
    color: var(--pm-primary) !important;
    font-weight: 500 !important;
}
.breadcrumb a:hover {
    color: var(--pm-primary-dark) !important;
}
.breadcrumb a:after {
    color: var(--pm-border) !important;
}

/* ==========================================================================
   4. PRODUCT LISTINGS (Category pages + Homepage grids)
   ========================================================================== */

/* Container backgrounds - clean */
.columns-container-top,
.columns-container-middle,
#index .columns-container-middle {
    background-color: var(--pm-bg-light) !important;
}
.columns-container-bottom {
    background-image: none !important;
    background-color: var(--pm-bg-light) !important;
}
.bottom_line_bg {
    display: none !important;
}
#index .homeproducts_line_bg {
    background-image: none !important;
    background-color: transparent !important;
}

/* Product cards */
ul.product_list.grid > li .product-container {
    background-color: var(--pm-white) !important;
    border: 1px solid var(--pm-border) !important;
    border-radius: var(--pm-radius-lg) !important;
    box-shadow: var(--pm-shadow-sm) !important;
    transition: var(--pm-transition) !important;
    overflow: hidden !important;
}
ul.product_list.grid > li:hover .product-container {
    box-shadow: var(--pm-shadow-lg) !important;
    border-color: var(--pm-primary) !important;
    transform: translateY(-2px) !important;
}

/* List view cards */
ul.product_list.list > li .product-container {
    background-color: var(--pm-white) !important;
    border: 1px solid var(--pm-border) !important;
    border-radius: var(--pm-radius-lg) !important;
    box-shadow: var(--pm-shadow-sm) !important;
    transition: var(--pm-transition) !important;
}
ul.product_list.list > li .product-image-container {
    background-color: var(--pm-white) !important;
    border-radius: var(--pm-radius-lg) 0 0 var(--pm-radius-lg) !important;
}

/* Product name */
.product-name,
ul.product_list .product-container h2 a.product-name,
ul.product_list .product-container h5 a {
    color: var(--pm-text) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}
.product-name:hover {
    color: var(--pm-primary) !important;
}

/* Product description in list */
ul.product_list.list > li .product-desc {
    color: var(--pm-text-secondary) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* Prices in listings */
.price.product-price,
.content_price .price.product-price {
    color: var(--pm-cta) !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    line-height: 1.3 !important;
}
ul.product_list.list > li .right-block .content_price span {
    font-size: 22px !important;
    line-height: 1.3 !important;
}

/* Old price */
.old-price.product-price,
ul.product_list.grid > li .product-container .old-price {
    color: var(--pm-text-secondary) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    text-decoration: line-through !important;
}

/* Discount badge */
.price-percent-reduction {
    background-color: var(--pm-cta) !important;
    color: var(--pm-white) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    border-radius: 6px !important;
    padding: 3px 8px !important;
}
.box-info-product #reduction_percent,
.box-info-product #reduction_amount {
    background-color: var(--pm-cta) !important;
    border-radius: 6px !important;
}

/* New badge */
.new-label {
    background-color: var(--pm-primary) !important;
    border-color: var(--pm-primary-dark) !important;
    color: var(--pm-white) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    border-radius: 6px !important;
}

/* Sale badge */
.sale-label {
    background-color: var(--pm-cta) !important;
    border-color: var(--pm-cta-dark) !important;
    color: var(--pm-white) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    border-radius: 6px !important;
}

/* Add to cart button in listings */
ul.product_list.grid > li .product-container .button-container .ajax_add_to_cart_button,
ul.product_list.list > li .product-container .button-container .ajax_add_to_cart_button {
    background-color: var(--pm-cta) !important;
    border-color: var(--pm-cta) !important;
    color: var(--pm-white) !important;
    border-radius: var(--pm-radius) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: none !important;
    transition: var(--pm-transition) !important;
    font-family: var(--pm-font) !important;
}
ul.product_list.grid > li .product-container .button-container .ajax_add_to_cart_button:hover,
ul.product_list.grid > li:hover .product-container .button-container .ajax_add_to_cart_button,
ul.product_list.list > li .product-container .button-container .ajax_add_to_cart_button:hover {
    background-color: var(--pm-cta-dark) !important;
    border-color: var(--pm-cta-dark) !important;
    color: var(--pm-white) !important;
    box-shadow: 0 4px 12px rgba(239,135,0,0.3) !important;
}

/* View buttons on hover */
ul.product_list > li .product-container .product-image-container .lnk_view,
ul.product_list > li .product-container .product-image-container .quick-view {
    background-color: var(--pm-white) !important;
    border: 1px solid var(--pm-border) !important;
    border-radius: var(--pm-radius) !important;
}
ul.product_list > li .product-container .product-image-container .lnk_view:hover,
ul.product_list > li .product-container .product-image-container .quick-view:hover {
    background-color: var(--pm-primary) !important;
    border-color: var(--pm-primary) !important;
}
ul.product_list > li .product-container .product-image-container .lnk_view:hover span,
ul.product_list > li .product-container .product-image-container .quick-view:hover span {
    color: var(--pm-white) !important;
}

/* Product image container - rounded */
.product-image-container {
    border-radius: var(--pm-radius-lg) var(--pm-radius-lg) 0 0 !important;
    overflow: hidden !important;
}

/* ==========================================================================
   5. PRODUCT DETAIL PAGE
   ========================================================================== */

/* Product title */
.pb-center-column h1 {
    color: var(--pm-text) !important;
    font-weight: 700 !important;
    font-size: 26px !important;
    line-height: 1.3 !important;
    border-color: var(--pm-border) !important;
}

/* Product image block */
.pb-left-column #image-block {
    background-color: var(--pm-white) !important;
    border-radius: var(--pm-radius-lg) !important;
    overflow: hidden !important;
}

/* Thumbnails */
#thumbs_list li {
    border-color: var(--pm-border) !important;
    border-radius: var(--pm-radius) !important;
    overflow: hidden !important;
}
#thumbs_list li a:hover,
#thumbs_list li a.shown img {
    border-color: var(--pm-primary) !important;
}
#views_block:hover #view_scroll_left,
#views_block:hover #view_scroll_right {
    background-color: var(--pm-primary) !important;
}

/* Price section */
.box-info-product {
    background-color: var(--pm-white) !important;
    border-radius: var(--pm-radius) !important;
}
.box-info-product #our_price_display,
#our_price_display {
    color: var(--pm-cta) !important;
    font-weight: 800 !important;
    font-size: 32px !important;
}
#old_price,
#old_price_display {
    color: var(--pm-text-secondary) !important;
    font-weight: 500 !important;
}

/* Buy block / form */
.pb-center-column #buy_block {
    border-color: var(--pm-border) !important;
    border-radius: var(--pm-radius-lg) !important;
}

/* Add to cart button on product page */
#product .addcustom,
.box-info-product .addcustom,
button.addcustom,
#buy_block .addcustom {
    background-color: var(--pm-cta) !important;
    border-color: var(--pm-cta) !important;
    color: var(--pm-white) !important;
    border-radius: var(--pm-radius) !important;
    font-family: var(--pm-font) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-transform: none !important;
    padding: 12px 24px !important;
    transition: var(--pm-transition) !important;
    letter-spacing: 0 !important;
}
#product .addcustom:hover,
.box-info-product .addcustom:hover,
button.addcustom:hover,
#buy_block .addcustom:hover {
    background-color: var(--pm-cta-dark) !important;
    border-color: var(--pm-cta-dark) !important;
    color: var(--pm-white) !important;
    box-shadow: 0 4px 16px rgba(239,135,0,0.35) !important;
    transform: translateY(-1px) !important;
}
#product .addcustom span,
.addcustom span {
    font-family: var(--pm-font) !important;
    font-weight: 700 !important;
    text-transform: none !important;
}

/* Quantity +/- buttons */
.btn.button-plus span,
.btn.button-minus span {
    background-color: var(--pm-bg-light) !important;
    border-radius: var(--pm-radius) !important;
}
.btn.button-plus:hover span,
.btn.button-minus:hover span {
    background-color: var(--pm-primary-light) !important;
}
.btn.button-plus:hover,
.btn.button-minus:hover {
    color: var(--pm-primary) !important;
}
#quantity_wanted_p input {
    border-radius: var(--pm-radius) !important;
    border-color: var(--pm-border) !important;
}

/* Product tabs */
.idTabs > li a {
    background-color: var(--pm-bg-light) !important;
    color: var(--pm-text) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border-radius: var(--pm-radius) var(--pm-radius) 0 0 !important;
    border: 1px solid var(--pm-border) !important;
    border-bottom: none !important;
    transition: var(--pm-transition) !important;
    text-transform: none !important;
}
.idTabs .selected,
.idTabs > li a.selected {
    background-color: var(--pm-white) !important;
    color: var(--pm-primary) !important;
    border-bottom-color: var(--pm-white) !important;
}
.nav > li > a:hover,
.nav > li > a:focus {
    background-color: var(--pm-white) !important;
}
#more_info_sheets {
    background-color: var(--pm-white) !important;
    border: 1px solid var(--pm-border) !important;
    border-radius: 0 0 var(--pm-radius) var(--pm-radius) !important;
    padding: 20px !important;
}

/* Data sheet table */
.table-data-sheet tr td:first-child {
    background-color: var(--pm-bg-light) !important;
    color: var(--pm-text) !important;
    font-weight: 600 !important;
}
.table-data-sheet tr td {
    background-color: var(--pm-white) !important;
    color: var(--pm-text) !important;
    border-color: var(--pm-border) !important;
}

/* Page product heading (More info, Reviews, etc.) */
h3.page-product-heading {
    color: var(--pm-text) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    border-bottom: 2px solid var(--pm-border) !important;
    padding-bottom: 8px !important;
}

/* Accessories / related products */
.page-product-box .accessories_block .block_content .product_desc .s_title_block a {
    color: var(--pm-text) !important;
    font-weight: 600 !important;
}
.page-product-box .accessories_block .block_content .product_desc .s_title_block .price {
    color: var(--pm-cta) !important;
}

/* Product condition, availability colors */
.pb-center-column #product_condition span,
.pb-center-column #availability_statut span,
.pb-center-column #product_reference span {
    color: #10B981 !important;
}

/* Countdown / special offer blocks */
.product_count_block .countcontainer .roycounttitle,
.product_count_block .countcontainer .roycountoff {
    background-color: var(--pm-cta) !important;
    border-radius: var(--pm-radius) !important;
}

/* ==========================================================================
   6. HOMEPAGE
   ========================================================================== */

/* Section headers */
.home_products_title span,
.home_products_title a > span {
    color: var(--pm-text) !important;
    font-weight: 700 !important;
}
.home_products_title a:hover > span {
    color: var(--pm-primary) !important;
}

/* Section header decorative lines */
div.home_products_title:before,
#cms #center_column h1:before,
#cms #center_column h2:before,
.brandstitle:before {
    background-color: var(--pm-border) !important;
}
.home_products_title span:after,
.footer-wrapper #footer h4:before,
.brandstitle span:before,
#cms #center_column h1:after,
#cms #center_column h2:after,
.page-heading:after {
    background-color: var(--pm-primary) !important;
}

/* Slider arrows */
.tparrows {
    background-color: var(--pm-primary) !important;
    border-color: var(--pm-primary-dark) !important;
    border-radius: 50% !important;
}
.tparrows:hover {
    background-color: var(--pm-dark) !important;
    border-color: var(--pm-dark) !important;
}

/* Carousel controls */
#center_column .tab-content .bx-controls a,
#roybrandscarousel .bx-controls a {
    background-color: var(--pm-white) !important;
    border: 1px solid var(--pm-border) !important;
    border-radius: 50% !important;
}
#center_column .tab-content .bx-controls a:hover,
#roybrandscarousel .bx-controls a:hover {
    background-color: var(--pm-primary) !important;
    border-color: var(--pm-primary) !important;
}

/* HTML content blocks */
#htmlcontent_top .bview-first .mask,
#htmlcontent_home .bview-first .mask {
    background-color: var(--pm-primary) !important;
}
#htmlcontent_top .bview .binfo,
#htmlcontent_home .bview .binfo {
    background-color: var(--pm-cta) !important;
    border-color: var(--pm-cta-dark) !important;
    border-radius: var(--pm-radius) !important;
}

/* Brands carousel */
#roybrandscarousel {
    background-color: var(--pm-white) !important;
    border: 1px solid var(--pm-border) !important;
    border-radius: var(--pm-radius-lg) !important;
}

/* ==========================================================================
   7. SIDEBAR / BLOCKS
   ========================================================================== */

/* Block titles */
.block .title_block,
.block h4 {
    background-color: var(--pm-primary) !important;
    border-color: var(--pm-primary-dark) !important;
    color: var(--pm-white) !important;
    border-radius: var(--pm-radius) var(--pm-radius) 0 0 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-transform: none !important;
}
.block .title_block a,
.block h4 a {
    color: var(--pm-white) !important;
}
.block .title_block a:hover,
.block h4 a:hover {
    color: rgba(255,255,255,0.8) !important;
}

/* Block content */
.block .block_content {
    background-color: var(--pm-white) !important;
    border: 1px solid var(--pm-border) !important;
    border-radius: 0 0 var(--pm-radius) var(--pm-radius) !important;
    color: var(--pm-text-secondary) !important;
}
.block .block_content a {
    color: var(--pm-text) !important;
}
.block .block_content a:hover {
    color: var(--pm-primary) !important;
}

/* Category block */
#categories_block_left li a {
    color: var(--pm-text) !important;
    font-weight: 500 !important;
}
#categories_block_left li a:hover,
#categories_block_left li a.selected {
    color: var(--pm-primary) !important;
}

/* Layered navigation */
#layered_block_left .layered_subtitle {
    color: var(--pm-text) !important;
    font-weight: 700 !important;
}
.ui-slider-horizontal .ui-widget-header {
    background-color: var(--pm-primary) !important;
}
#layered_block_left .ui-slider .ui-slider-handle {
    background-color: var(--pm-primary) !important;
    border-color: var(--pm-primary-dark) !important;
    border-radius: 50% !important;
}

/* Home products icon backgrounds */
.hfeatured .home_products_title i,
.hbest .home_products_title i,
.hnew .home_products_title i,
.hspecials .home_products_title i {
    background-color: var(--pm-primary) !important;
    border-color: var(--pm-primary-dark) !important;
}

/* ==========================================================================
   8. FOOTER
   ========================================================================== */

.footer-wrapper {
    background-color: var(--pm-dark) !important;
}

/* Footer top line */
.footer-wrapper .footer_topline_bg {
    background-color: rgba(255,255,255,0.05) !important;
}

/* Footer headings */
.footer-wrapper #footer h4,
.footer-wrapper #footer h4 a,
.footer-wrapper #footer h4 a:link,
.footer-wrapper #footer h4 a:visited {
    color: var(--pm-white) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    border-color: rgba(255,255,255,0.1) !important;
}
.footer-wrapper #footer h4:before {
    background-color: var(--pm-primary) !important;
}

/* Footer text and links */
.footer-wrapper #footer,
.footer-wrapper #footer a:link,
.footer-wrapper #footer a:visited,
.footer-wrapper #footer ul li a {
    color: rgba(255,255,255,0.7) !important;
    font-size: 14px !important;
}
.footer-wrapper #footer a:hover {
    color: var(--pm-white) !important;
}
.footer-wrapper #footer .footer-block ul.bullet li:before {
    color: var(--pm-primary) !important;
}

/* Footer newsletter */
#footer #newsletter_block_left h4,
.footer-wrapper #footer #social_block h4 {
    color: var(--pm-white) !important;
    border-color: rgba(255,255,255,0.1) !important;
}
#footer #newsletter_block_left .form-group .form-control {
    background-color: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: var(--pm-radius-pill) !important;
    color: var(--pm-white) !important;
}
#footer #newsletter_block_left .form-group .button-small {
    background-color: var(--pm-primary) !important;
    border-color: var(--pm-primary-dark) !important;
    border-radius: var(--pm-radius-pill) !important;
}

/* Contact info icons */
.footer-wrapper #footer #block_contact_infos > div ul li i {
    background-color: rgba(255,255,255,0.1) !important;
}

/* Copyright / bottom line */
.footer-wrapper .footer_bottomline_bg {
    background-color: rgba(0,0,0,0.2) !important;
}
#copyright_footer {
    color: rgba(255,255,255,0.5) !important;
    background-color: rgba(0,0,0,0.2) !important;
}

/* Up arrow */
.modezuparrow {
    background-color: transparent !important;
}
.modezuparrow span {
    background-color: var(--pm-primary) !important;
    border-color: var(--pm-primary-dark) !important;
    border-radius: 50% !important;
}

/* Footer links separator */
ul.footer_links {
    border-top-color: rgba(255,255,255,0.1) !important;
}

/* ==========================================================================
   9. BUTTONS GLOBALLY
   ========================================================================== */

/* Primary buttons */
.btn,
.button,
.button.button-medium,
.button.button-small,
.button.button-large {
    background-color: var(--pm-cta) !important;
    border-color: var(--pm-cta) !important;
    color: var(--pm-white) !important;
    border-radius: var(--pm-radius) !important;
    font-family: var(--pm-font) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: none !important;
    transition: var(--pm-transition) !important;
    letter-spacing: 0 !important;
}
.btn:hover,
.button:hover,
.button.button-medium:hover,
.button.button-small:hover,
.button.button-large:hover {
    background-color: var(--pm-cta-dark) !important;
    border-color: var(--pm-cta-dark) !important;
    color: var(--pm-white) !important;
    box-shadow: 0 4px 12px rgba(239,135,0,0.3) !important;
}
.btn span,
.button span,
.button.button-medium span,
.button.button-small span {
    font-family: var(--pm-font) !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

/* Exclusive buttons (e.g., "Proceed to checkout") */
.button.exclusive-medium,
.button.button-medium.exclusive {
    background-color: var(--pm-cta) !important;
    border-color: var(--pm-cta-dark) !important;
    color: var(--pm-white) !important;
}
.button.exclusive-medium:hover,
.button.button-medium.exclusive:hover {
    background-color: var(--pm-cta-dark) !important;
}

/* Continue shopping / secondary */
.cart_navigation .continue_shoping span {
    font-family: var(--pm-font) !important;
    text-transform: none !important;
}

/* fancybox buttons */
.fancybox-wrap button,
#fancybox-wrap button {
    background-color: var(--pm-cta) !important;
    border-color: var(--pm-cta-dark) !important;
    color: var(--pm-white) !important;
    border-radius: var(--pm-radius) !important;
}

/* Avoid overriding +/- quantity buttons with orange */
.btn.button-plus,
.btn.button-minus,
#order-opc .btn.button-plus,
#order-opc .btn.button-minus,
#order .btn.button-plus,
#order .btn.button-minus {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Avoid overriding sort/display buttons */
.content_sortPagiBar .display li span,
.content_sortPagiBar .display_m li span {
    background-color: var(--pm-bg-light) !important;
    border-radius: 4px !important;
}
.content_sortPagiBar .display li.selected,
.content_sortPagiBar .display_m li.selected {
    background-color: var(--pm-primary) !important;
}

/* ==========================================================================
   10. FORMS AND INPUTS
   ========================================================================== */

.form-control,
input.uniform-input,
select.uniform-multiselect,
textarea.uniform {
    border: 1px solid var(--pm-border) !important;
    border-radius: var(--pm-radius) !important;
    color: var(--pm-text) !important;
    background-color: var(--pm-white) !important;
    font-family: var(--pm-font) !important;
    font-size: 14px !important;
    transition: var(--pm-transition) !important;
}
.form-control:focus,
input.uniform-input:focus,
textarea.uniform:focus {
    border-color: var(--pm-primary) !important;
    box-shadow: 0 0 0 3px rgba(91,164,207,0.15) !important;
    outline: none !important;
}
.form-control.grey {
    background-color: var(--pm-bg-light) !important;
}

div.selector select {
    background-color: var(--pm-white) !important;
    border-color: var(--pm-border) !important;
    border-radius: var(--pm-radius) !important;
}

#attributes .attribute_list select {
    background-color: var(--pm-white) !important;
    border-radius: var(--pm-radius) !important;
}
#attributes .attribute_list #color_to_pick_list li {
    border-color: var(--pm-border) !important;
    border-radius: 50% !important;
}
#attributes .attribute_list #color_to_pick_list li.selected {
    border-color: var(--pm-text) !important;
}

/* ==========================================================================
   11. PAGE HEADINGS
   ========================================================================== */

.page-heading {
    color: var(--pm-text) !important;
    font-weight: 700 !important;
    border-color: var(--pm-border) !important;
}
.page-heading:after {
    background-color: var(--pm-primary) !important;
}
.page-heading span.heading-counter {
    color: var(--pm-text-secondary) !important;
    font-weight: 500 !important;
}
.page-heading span.lighter {
    color: var(--pm-text) !important;
}

.page-subheading {
    color: var(--pm-text) !important;
    border-color: var(--pm-border) !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   12. PAGINATION
   ========================================================================== */

.content_sortPagiBar .sortPagiBar {
    background-color: var(--pm-white) !important;
    border: 1px solid var(--pm-border) !important;
    border-radius: var(--pm-radius) !important;
}

.top-pagination-content ul.pagination li > a span,
.top-pagination-content ul.pagination li > span span,
.bottom-pagination-content ul.pagination li > a span,
.bottom-pagination-content ul.pagination li > span span {
    background-color: var(--pm-bg-light) !important;
    color: var(--pm-text-secondary) !important;
    border-radius: var(--pm-radius) !important;
}
.top-pagination-content ul.pagination li > a:hover span,
.bottom-pagination-content ul.pagination li > a:hover span {
    background-color: var(--pm-primary) !important;
    color: var(--pm-white) !important;
}
.top-pagination-content ul.pagination li.active > span span,
.bottom-pagination-content ul.pagination li.active > span span {
    background-color: var(--pm-primary) !important;
    color: var(--pm-white) !important;
}

.top-pagination-content,
.bottom-pagination-content {
    border-color: var(--pm-border) !important;
}

/* ==========================================================================
   13. CART & CHECKOUT (non-destructive - only colors)
   ========================================================================== */

/* Layer cart (add-to-cart popup) */
#layer_cart {
    background-color: var(--pm-white) !important;
    border-radius: var(--pm-radius-lg) !important;
    box-shadow: var(--pm-shadow-lg) !important;
}
#layer_cart .layer_cart_product h2 {
    background-color: #10B981 !important;
    color: var(--pm-white) !important;
    font-weight: 700 !important;
}
#layer_cart .layer_cart_cart h2 {
    background-color: var(--pm-bg-light) !important;
    color: var(--pm-text) !important;
}
#layer_cart .cross {
    color: var(--pm-text-secondary) !important;
}
#layer_cart .cross:hover {
    color: var(--pm-text) !important;
}

/* Checkout steps */
ul.step li em {
    background-color: var(--pm-border) !important;
    border-color: var(--pm-text-secondary) !important;
    border-radius: 50% !important;
}
ul.step li.step_current em,
ul.step li.step_done a em {
    background-color: var(--pm-primary) !important;
    border-color: var(--pm-primary-dark) !important;
}
ul.step li.step_done a:hover em {
    background-color: var(--pm-primary-dark) !important;
}
ul.step li.step_done a:hover {
    color: var(--pm-primary) !important;
}

/* Payment module */
p.payment_module a {
    background-color: var(--pm-bg-light) !important;
    border-radius: var(--pm-radius) !important;
    transition: var(--pm-transition) !important;
}
p.payment_module a:hover {
    background-color: var(--pm-white) !important;
    border-color: var(--pm-primary) !important;
    box-shadow: var(--pm-shadow) !important;
}

/* Cart summary */
.table-bordered {
    background-color: var(--pm-white) !important;
    border-radius: var(--pm-radius) !important;
}

/* Cart delete icon */
.cart_delete a.cart_quantity_delete i,
a.price_discount_delete i {
    background-color: #EF4444 !important;
    border-radius: 50% !important;
}

/* ==========================================================================
   14. MY ACCOUNT
   ========================================================================== */

#my-account ul.myaccount-link-list li a {
    color: var(--pm-text-secondary) !important;
    font-weight: 600 !important;
}
#my-account ul.myaccount-link-list li a:hover {
    color: var(--pm-text) !important;
}
#my-account ul.myaccount-link-list li a i {
    background-color: var(--pm-primary) !important;
    border-color: var(--pm-primary-dark) !important;
    border-radius: var(--pm-radius) !important;
}
#my-account ul.myaccount-link-list li a:hover i {
    background-color: var(--pm-primary-dark) !important;
}

/* ==========================================================================
   15. CMS PAGES
   ========================================================================== */

#cms #center_column h1 {
    color: var(--pm-text) !important;
}
#cms #center_column h2,
#cms #center_column h3 {
    color: var(--pm-text) !important;
}
#page .rte {
    color: var(--pm-text) !important;
    line-height: 1.7 !important;
}
#page .rte a {
    color: var(--pm-primary) !important;
}
#page .rte a:hover {
    color: var(--pm-primary-dark) !important;
}

/* Contact form */
.contact-form-box fieldset {
    background-color: var(--pm-white) !important;
    border: 1px solid var(--pm-border) !important;
    border-radius: var(--pm-radius-lg) !important;
}

/* ==========================================================================
   16. ALERTS
   ========================================================================== */

.alert-warning {
    background-color: var(--pm-text-secondary) !important;
    border-radius: var(--pm-radius) !important;
}
.success-warning {
    background-color: #10B981 !important;
    border-radius: var(--pm-radius) !important;
}
.info-warning {
    background-color: var(--pm-primary) !important;
    border-radius: var(--pm-radius) !important;
}
.danger-warning {
    background-color: #EF4444 !important;
    border-radius: var(--pm-radius) !important;
}

/* ==========================================================================
   17. TABLES
   ========================================================================== */

.table > thead > tr > th {
    background-color: var(--pm-bg-light) !important;
    color: var(--pm-text) !important;
    font-weight: 600 !important;
    border-color: var(--pm-border) !important;
}
.table tfoot tr {
    background-color: var(--pm-bg-light) !important;
}

/* ==========================================================================
   18. BLOG (SmartBlog / SDS Blog)
   ========================================================================== */

.sds_blog_post .newsblock {
    background-color: var(--pm-white) !important;
    border: 1px solid var(--pm-border) !important;
    border-radius: var(--pm-radius-lg) !important;
}
.sdsarticleCat > div {
    background-color: var(--pm-white) !important;
    border: 1px solid var(--pm-border) !important;
    border-radius: var(--pm-radius-lg) !important;
}

/* Read more button */
a.news_more,
.sdsreadMore .more a {
    background-color: var(--pm-primary) !important;
    border-color: var(--pm-primary-dark) !important;
    border-radius: var(--pm-radius) !important;
    color: var(--pm-white) !important;
    font-weight: 600 !important;
}
a.news_more:hover,
.sdsreadMore .more a:hover {
    background-color: var(--pm-cta) !important;
    border-color: var(--pm-cta-dark) !important;
}
a.news_more:before,
.sdsreadMore .more a:before {
    background-color: var(--pm-primary-dark) !important;
    border-color: var(--pm-primary-dark) !important;
}

/* Blog titles */
.sdstitle_block a,
#index .newsblock h4 a {
    color: var(--pm-text) !important;
}
.sdstitle_block a:hover {
    color: var(--pm-primary) !important;
}

/* Blog title icons */
#index .newsblock h4 a:before,
.sdstitle_block a:before {
    background-color: var(--pm-primary) !important;
}

/* ==========================================================================
   19. PRODUCT COMMENTS / REVIEWS
   ========================================================================== */

#product_comments_block_tab div.star.star_on:after,
div.star.star_on:after {
    color: #F59E0B !important;
}
#product_comments_block_tab div.star:after {
    color: #D1D5DB !important;
}
#articleComments,
.smartblogcomments {
    background-color: var(--pm-white) !important;
    border-radius: var(--pm-radius-lg) !important;
}
#product_comments_block_tab div.comment .comment_details {
    border-left-color: var(--pm-border) !important;
}
#product_comments_block_tab div.comment {
    border-top-color: var(--pm-border) !important;
}

/* ==========================================================================
   20. MISC / BOX SHADOWS / GENERAL CLEANUP
   ========================================================================== */

/* Box class */
.box {
    background-color: var(--pm-white) !important;
    border-radius: var(--pm-radius-lg) !important;
}

/* Required field indicator */
#address p.required,
#identity p.required,
#account-creation_form p.required {
    color: #EF4444 !important;
}

/* Autocomplete results */
.ac_results {
    background-color: var(--pm-white) !important;
    border: 1px solid var(--pm-border) !important;
    border-radius: var(--pm-radius) !important;
    box-shadow: var(--pm-shadow-lg) !important;
}
.ac_results li {
    background-color: var(--pm-white) !important;
}
.ac_results li:hover,
.ac_results li.ac_over {
    background-color: var(--pm-bg-light) !important;
}

/* Comparison table */
table#product_comparison tbody tr td.td_empty,
table#product_comparison tbody tr td.feature-name,
table#product_comparison tbody tr.comparison_header {
    background-color: var(--pm-bg-light) !important;
}
table#product_comparison .remove a i {
    background-color: #EF4444 !important;
    border-radius: 50% !important;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth !important;
}

/* Selection color */
::selection {
    background-color: var(--pm-primary-light) !important;
    color: var(--pm-text) !important;
}

/* Remove garish header background images */
header {
    background-image: none !important;
}

/* ==========================================================================
   21. MOBILE-SPECIFIC REFINEMENTS
   ========================================================================== */
@media (max-width: 768px) {

    /* Product cards on mobile - 2 columns */
    ul.product_list.grid > li .product-container {
        border-radius: var(--pm-radius) !important;
        margin-bottom: 12px !important;
    }

    /* Prices on mobile */
    .price.product-price,
    .content_price .price.product-price {
        font-size: 17px !important;
    }
    ul.product_list.list > li .right-block .content_price span {
        font-size: 18px !important;
    }

    /* Product title on mobile */
    .pb-center-column h1 {
        font-size: 20px !important;
    }

    /* Buy button on mobile */
    #product .addcustom,
    .box-info-product .addcustom,
    button.addcustom {
        font-size: 15px !important;
        padding: 14px 20px !important;
        width: 100% !important;
    }

    /* Price on product page mobile */
    .box-info-product #our_price_display,
    #our_price_display {
        font-size: 28px !important;
    }

    /* Footer on mobile */
    .footer-wrapper {
        padding-bottom: 80px !important; /* space for WhatsApp bar */
    }

    /* Category mobile menu bar - use primary blue */
    .cat-title {
        background-color: var(--pm-primary) !important;
        border-color: var(--pm-primary-dark) !important;
        color: var(--pm-white) !important;
    }

    /* Tabs on mobile - scrollable */
    .idTabs {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .idTabs > li a {
        white-space: nowrap !important;
        font-size: 13px !important;
    }
}

/* ==========================================================================
   22. PRICE COLOR OVERRIDES (ensure orange everywhere)
   ========================================================================== */
.price,
.price.product-price,
.content_price .price,
span.price,
#our_price_display,
.box-info-product #our_price_display {
    color: var(--pm-cta) !important;
}

/* Old price stays gray */
.old-price,
.old-price.product-price,
#old_price_display {
    color: var(--pm-text-secondary) !important;
}

/* ==========================================================================
   23. AVOID BREAKING CHECKOUT / REDSYS / BIZUM
   ========================================================================== */

/* Do not restyle checkout-specific elements beyond colors */
#order .cart_navigation .button,
#order-opc .cart_navigation .button {
    /* keep orange but ensure it's clickable */
    background-color: var(--pm-cta) !important;
    border-color: var(--pm-cta) !important;
    border-radius: var(--pm-radius) !important;
}

/* ==========================================================================
   24. PRESERVE WHATSAPP ELEMENTS
   ========================================================================== */

/* Don't touch Leo WhatsApp - these selectors ensure we don't override */
.whatsapp-floating-button,
.leowhatsapp,
#leowhatsapp,
.leo-whatsapp-chat,
[class*="whatsapp"],
[id*="whatsapp"] {
    /* Intentionally empty - preserve original styles */
}

/* ==========================================================================
   25. PRINT STYLES
   ========================================================================== */
@media print {
    .footer-wrapper,
    .header-wrapper,
    #header,
    .breadcrumb {
        display: none !important;
    }
}


/* ===== FIX 1: Hide old FINALmenu mobile completely ===== */
@media (max-width: 768px) {
    .mobile_menu_wrapper,
    #FINALmenu-mobile-nav,
    .menu-place-holder,
    .topmenu_container,
    .FINALmenu-mobile-trigger,
    #FINALmenu-mobile-nav li,
    #FINALmenu-mobile-nav a,
    .mobile_menu_wrapper * {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        pointer-events: none !important;
    }
}

/* ===== FIX 2: Color swatches - make images circular ===== */
.attribute_list .color,
#color_to_pick_list li a,
.color_pick,
ul#color_to_pick_list li a img,
#color_to_pick_list a img,
.color_pick img {
    border-radius: 50% !important;
    overflow: hidden !important;
}

ul#color_to_pick_list li a,
.color_pick {
    border-radius: 50% !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ===== FIX 3: Cart - remove weird X characters (icon font issue) ===== */
.cart_block .remove_link a::before,
.cart_block .ajax_cart_block_remove_link::before,
#cart_summary .cart_delete a::before,
.icon-trash::before,
.cart_quantity_delete .icon-trash::before {
    content: "\00D7" !important;
    font-family: -apple-system, sans-serif !important;
    font-size: 18px !important;
}

.cart_delete a,
.ajax_cart_block_remove_link,
.remove_link a {
    font-family: -apple-system, sans-serif !important;
    text-decoration: none !important;
}

/* Fix delete button icons in cart summary */
.cart_quantity_delete a,
#cart_summary .cart_delete a {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0 !important;
}

.cart_quantity_delete a::after,
#cart_summary .cart_delete a::after {
    content: "\00D7" !important;
    font-size: 20px !important;
    font-family: -apple-system, sans-serif !important;
    color: #dc2626 !important;
}

/* Hide broken icon characters */
.icon-trash {
    font-size: 0 !important;
}
.icon-trash::before {
    font-size: 18px !important;
}
