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

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* ==========================================================================
   Product Description Premium & Adaptive Layouts (CKEditor & Property Lists)
   ========================================================================== */

/* Rozetka Style - Product Descriptions */
.rz-wrap {
    font-family: inherit;
    line-height: 1.6;
    color: #333;
}

.rz-wrap h3 {
    font-size: 1.25rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    color: #222;
    font-weight: 600;
    border-bottom: 2px solid #eee;
    padding-bottom: 5px;
}

.rz-list {
    list-style: none;
    padding: 0;
    margin-bottom: 1.5rem;
}

.rz-list li {
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.rz-list li:last-child {
    border-bottom: none;
}

.rz-key {
    color: #777;
    font-weight: normal;
    padding-right: 15px;
    flex-shrink: 0;
}

.rz-grey-box {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin: 20px 0;
    border: 1px solid #e9ecef;
    font-size: 0.95rem;
}

.rz-yellow-box {
    background: #fff9e6;
    padding: 15px;
    border-radius: 8px;
    margin: 20px 0;
    border: 1px solid #ffeeba;
    font-size: 0.95rem;
}

.rz-trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 25px;
}

.rz-trust-item {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 12px;
    border: 1px solid #efefef;
    border-radius: 8px;
    transition: transform 0.2s;
}

.rz-trust-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.rz-trust-icon {
    font-size: 22px;
    color: #28a745;
    margin-right: 12px;
    font-weight: bold;
    min-width: 30px;
    text-align: center;
}

.rz-trust-title {
    display: block;
    font-weight: 600;
    color: #222;
    font-size: 0.9rem;
}

.rz-trust-text span:not(.rz-trust-title) {
    font-size: 0.8rem;
    color: #777;
    display: block;
}

/* CKEditor Alert Styles (e.g. Product 3633) */
.ck-alert {
  padding: 1.25rem;
  border-radius: 8px;
  margin: 1.25rem 0;
  border-left: 4px solid transparent;
  font-size: 0.95rem;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-left-width: 4px;
}
.ck-alert_theme_blue {
  background: #eef6f4;
  border-color: #d8e5e2;
  border-left-color: #2f8f9d;
}
.ck-alert h2 {
  font-size: 1.15rem;
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-weight: 700;
  color: #222;
}
.ck-alert ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ck-alert li {
  padding: 0.35rem 0;
  border-bottom: 1px dashed #eee;
  color: #333;
}
.ck-alert li:last-child {
  border-bottom: none;
}

/* Old Specification / Property Blocks Styles (e.g. Product 13055) */
.element--middle__block {
  padding: 1.5rem;
  border-radius: 8px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  margin-bottom: 1.5rem;
}
.element--middle__title {
  color: #222;
  font-weight: 700;
  margin-top: 1rem;
  margin-bottom: 0.75rem;
  border-bottom: 2px solid #eee;
  padding-bottom: 0.35rem;
  font-size: 1.2rem;
}
.middle__props ul,
.props__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.prop__block {
  padding: 0.5rem 0;
  border-bottom: 1px dashed #eee;
  font-size: 0.95rem;
}
.prop__block:last-child {
  border-bottom: none;
}
.prop__block p {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.prop__block p span {
  color: #666;
  font-weight: 500;
}

/* Mobile adjustments */
@media (max-width: 576px) {
    .rz-list li {
        flex-direction: column;
        border-bottom-style: solid;
    }
    .rz-key {
        margin-bottom: 2px;
        font-size: 0.85rem;
    }
    .rz-trust-grid {
        grid-template-columns: 1fr;
    }
    .prop__block p {
        flex-direction: column;
        gap: 0.125rem;
    }
}

/* ==========================================================================
   Header Mobile Sticky Override (Creative Elements & Mega Menu Integration)
   ========================================================================== */

@media (max-width: 767px) {
    /* 1. Disable the monolithic sticky header of the Hummingbird theme on mobile */
    .header {
        position: static !important;
    }

    /* 2. Make Section 0 (Logo, Search, Cart) static on mobile to prevent Creative Elements JS overrides from forcing stickiness */
    .elementor-element-1cc92f7 {
        position: static !important;
    }

    /* 3. Section 1 (f8f15eb) sticky override has been commented out to respect standard builder/module settings */
    /*
    .elementor-element-f8f15eb {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 9999 !important;
        width: 100% !important;
        background-color: #FFC000 !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    }
    */
}

/* ==========================================================================
   CMS Pages Premium Styles Scope (Only applies to PrestaShop CMS Pages)
   ========================================================================== */

/* 1. Direct tag overrides for font-family on CMS pages to override theme styles */
body#cms,
body#cms p,
body#cms span,
body#cms li,
body#cms strong,
body#cms a,
body#cms h1,
body#cms h2,
body#cms h3,
body#cms .breadcrumb,
body#cms .breadcrumb-item,
body#cms .breadcrumb-item a,
body#cms .breadcrumb-item span {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* 2. Container and layout alignments */
body#cms .breadcrumb__wrapper {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 8px 0 !important;
}
body#cms .breadcrumb__wrapper .container {
    max-width: 760px !important;
    margin: 0 auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}
body#cms .breadcrumb {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
body#cms .breadcrumb-item,
body#cms .breadcrumb-item a,
body#cms .breadcrumb-item span {
    font-size: 0.8rem !important; /* ~12.8px */
    color: #64748b !important; /* Slate-500 */
    text-decoration: none !important;
}
body#cms .breadcrumb-item a:hover {
    color: #2563eb !important;
}

/* Constrain headers and content to a reading column */
body#cms .page-header,
body#cms #content.page-content--cms {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

body#cms .page-header {
    margin-top: 1.75rem !important;
    margin-bottom: 1.25rem !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding-bottom: 1.25rem !important;
}

/* 3. Page Title (H1) */
body#cms h1.page-title-section,
body#cms h1.page-title-section span {
    font-size: 1.625rem !important; /* 26px - modern, clean, not giant */
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #0f172a !important; /* Slate-900 */
    letter-spacing: -0.015em !important;
    margin: 0 !important;
    text-align: left !important;
}

/* 4. Article content paragraphs and text elements */
body#cms #content.page-content--cms {
    padding-top: 0.75rem !important;
    padding-bottom: 3.5rem !important;
}

body#cms #content.page-content--cms p,
body#cms #content.page-content--cms li {
    font-size: 0.9375rem !important; /* 15px - crisp modern size */
    line-height: 1.6 !important;
    color: #334155 !important; /* Slate-700 */
    margin-bottom: 1.25rem !important;
}

body#cms #content.page-content--cms strong {
    color: #0f172a !important; /* Slate-900 */
    font-weight: 600 !important;
}

/* 5. Headings */
body#cms #content.page-content--cms h2,
body#cms #content.page-content--cms h2 span {
    font-size: 1.25rem !important; /* 20px */
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.35 !important;
    letter-spacing: -0.01em !important;
    margin-top: 2.25rem !important;
    margin-bottom: 0.85rem !important;
    border-left: 3px solid #2563eb !important; /* Royal blue accent */
    padding-left: 10px !important;
}

body#cms #content.page-content--cms h3,
body#cms #content.page-content--cms h3 span {
    font-size: 1.0625rem !important; /* 17px */
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.35 !important;
    margin-top: 1.75rem !important;
    margin-bottom: 0.65rem !important;
}

/* 6. Lead paragraph / Callout (Master's Advice) */
body#cms #content.page-content--cms p.lead {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid #2563eb !important;
    padding: 16px 20px !important;
    border-radius: 0 8px 8px 0 !important;
    font-size: 0.96875rem !important; /* ~15.5px */
    color: #1e293b !important;
    line-height: 1.55 !important;
    margin: 1.75rem 0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.01) !important;
}

/* 7. Bullet lists checkmark overrides */
body#cms #content.page-content--cms ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-top: 0.75rem !important;
    margin-bottom: 1.25rem !important;
}

body#cms #content.page-content--cms ul li {
    position: relative !important;
    padding-left: 20px !important;
    margin-bottom: 8px !important;
}

body#cms #content.page-content--cms ul li::before {
    content: "✓" !important;
    position: absolute !important;
    left: 0 !important;
    top: 1px !important;
    color: #059669 !important; /* Emerald-600 */
    font-weight: 700 !important;
    font-size: 0.95rem !important;
}

/* 8. Ordered lists */
body#cms #content.page-content--cms ol {
    padding-left: 18px !important;
    margin-top: 0.75rem !important;
    margin-bottom: 1.25rem !important;
}

body#cms #content.page-content--cms ol li {
    margin-bottom: 8px !important;
    padding-left: 2px !important;
}

/* 9. Image formatting (Infographics) */
body#cms #content.page-content--cms img {
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    margin: 1.75rem auto !important;
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    border: 1px solid #e2e8f0 !important;
    transition: transform 0.2s ease !important;
}

body#cms #content.page-content--cms img:hover {
    transform: scale(1.002) !important;
}

/* 10. Table formatting */
body#cms #content.page-content--cms table {
    width: 100% !important;
    margin: 1.75rem 0 !important;
    border-collapse: collapse !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
}

body#cms #content.page-content--cms table th,
body#cms #content.page-content--cms table td {
    padding: 10px 14px !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 0.875rem !important; /* ~14px */
    color: #334155 !important;
}

body#cms #content.page-content--cms table th {
    background-color: #f8fafc !important;
    font-weight: 600 !important;
    color: #0f172a !important;
}

body#cms #content.page-content--cms table tbody tr:hover {
    background-color: #f8fafc !important;
}

/* 11. Mobile responsiveness */
@media (max-width: 767px) {
    body#cms .breadcrumb__wrapper .container,
    body#cms .page-header,
    body#cms #content.page-content--cms {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    body#cms .page-header {
        margin-top: 1.25rem !important;
        margin-bottom: 0.85rem !important;
        padding-bottom: 0.85rem !important;
    }
    
    body#cms h1.page-title-section,
    body#cms h1.page-title-section span {
        font-size: 1.375rem !important; /* 22px */
    }
    
    body#cms #content.page-content--cms p,
    body#cms #content.page-content--cms li {
        font-size: 0.875rem !important; /* 14px */
        line-height: 1.55 !important;
    }
    
    body#cms #content.page-content--cms h2,
    body#cms #content.page-content--cms h2 span {
        font-size: 1.15rem !important; /* 18px */
        margin-top: 1.75rem !important;
    }

    body#cms #content.page-content--cms h3,
    body#cms #content.page-content--cms h3 span {
        font-size: 1rem !important; /* 16px */
        margin-top: 1.25rem !important;
    }
    
    body#cms #content.page-content--cms table {
        display: block !important;
        width: 100% !important;
    }
}

/* 12. Interactive Enhancements for CMS Pages (Table of Contents, Alert Boxes, Promo Banners) */

/* CMS Metadata Line */
body#cms .cms-meta {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.8125rem !important; /* ~13px */
    color: #64748b !important; /* Slate-500 */
    margin-bottom: 1.5rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding-bottom: 0.75rem !important;
}
body#cms .cms-meta__separator {
    color: #cbd5e1 !important;
}

/* Table of Contents (TOC) Box */
body#cms .cms-toc {
    background-color: #f8fafc !important; /* Slate-50 */
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    margin: 1.5rem 0 !important;
}
body#cms .cms-toc__title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.01em !important;
}
body#cms .cms-toc__list {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}
body#cms .cms-toc__list li {
    position: relative !important;
    padding-left: 14px !important;
    margin-bottom: 6px !important;
    line-height: 1.4 !important;
}
body#cms .cms-toc__list li::before {
    content: "•" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    color: #3b82f6 !important; /* Blue-500 dot */
    font-size: 1.1rem !important;
    line-height: 1 !important;
}
body#cms .cms-toc__list li a {
    font-size: 0.875rem !important;
    color: #2563eb !important; /* Royal Blue link */
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}
body#cms .cms-toc__list li a:hover {
    color: #1d4ed8 !important;
    text-decoration: underline !important;
}

/* Alert Boxes / Callout Cards */
body#cms .cms-alert {
    display: flex !important;
    gap: 14px !important;
    padding: 16px 18px !important;
    border-radius: 8px !important;
    margin: 1.75rem 0 !important;
    border: 1px solid transparent !important;
    box-sizing: border-box !important;
}
body#cms .cms-alert__icon {
    font-size: 1.25rem !important;
    line-height: 1.2 !important;
    flex-shrink: 0 !important;
}
body#cms .cms-alert__content,
body#cms .cms-alert__content p {
    font-size: 0.875rem !important; /* ~14px */
    line-height: 1.55 !important;
    margin: 0 !important;
}

/* Tip variant (Green) */
body#cms .cms-alert--tip {
    background-color: #f0fdf4 !important; /* Green-50 */
    border-color: #bbf7d0 !important; /* Green-200 */
}
body#cms .cms-alert--tip .cms-alert__content,
body#cms .cms-alert--tip .cms-alert__content strong {
    color: #14532d !important; /* Green-900 */
}

/* Warning variant (Amber) */
body#cms .cms-alert--warning {
    background-color: #fffbeb !important; /* Amber-50 */
    border-color: #fef08a !important; /* Amber-200 */
}
body#cms .cms-alert--warning .cms-alert__content,
body#cms .cms-alert--warning .cms-alert__content strong {
    color: #78350f !important; /* Amber-900 */
}

/* Info variant (Blue) */
body#cms .cms-alert--info {
    background-color: #eff6ff !important; /* Blue-50 */
    border-color: #bfdbfe !important; /* Blue-200 */
}
body#cms .cms-alert--info .cms-alert__content,
body#cms .cms-alert--info .cms-alert__content strong {
    color: #1e3a8a !important; /* Blue-900 */
}

/* Promo Banner / CTA Box */
body#cms .cms-promo-box {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important; /* Deep dark background */
    border-radius: 12px !important;
    padding: 24px !important;
    margin: 3.5rem 0 1.5rem 0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    gap: 16px !important;
}
body#cms .cms-promo-box__content {
    flex: 1 !important;
}
body#cms .cms-promo-box__title {
    font-size: 1.125rem !important; /* 18px */
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 6px !important;
    letter-spacing: -0.01em !important;
}
body#cms .cms-promo-box__text {
    font-size: 0.84375rem !important; /* ~13.5px */
    color: #cbd5e1 !important; /* Slate-300 */
    line-height: 1.5 !important;
    margin: 0 !important;
}
body#cms a.cms-promo-box__btn {
    display: inline-block !important;
    background-color: #3b82f6 !important; /* Blue-500 */
    color: #ffffff !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    border: none !important;
    cursor: pointer !important;
}
body#cms a.cms-promo-box__btn:hover {
    background-color: #2563eb !important; /* Blue-600 */
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}
body#cms a.cms-promo-box__btn:active {
    transform: translateY(0) !important;
}

/* Mobile Adjustments for Promo Box */
@media (max-width: 600px) {
    body#cms .cms-promo-box {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 20px !important;
        gap: 14px !important;
    }
    body#cms a.cms-promo-box__btn {
        width: 100% !important;
        text-align: center !important;
    }
}

/* 13. Interactive Checklist for Tools/Materials */
body#cms #content.page-content--cms ul.cms-checklist {
    list-style: none !important;
    padding-left: 0 !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    margin: 1.5rem 0 !important;
}
body#cms #content.page-content--cms ul.cms-checklist li {
    position: relative !important;
    padding-left: 0 !important;
    margin-bottom: 10px !important;
}
body#cms #content.page-content--cms ul.cms-checklist li::before {
    display: none !important; /* Remove checkmark from list items inside checklist */
}
body#cms #content.page-content--cms ul.cms-checklist li:last-child {
    margin-bottom: 0 !important;
}
body#cms #content.page-content--cms ul.cms-checklist label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    cursor: pointer !important;
    margin: 0 !important;
    user-select: none !important;
}
body#cms #content.page-content--cms ul.cms-checklist input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 4px !important;
    background-color: #fff !important;
    outline: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}
body#cms #content.page-content--cms ul.cms-checklist input[type="checkbox"]:checked {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}
body#cms #content.page-content--cms ul.cms-checklist input[type="checkbox"]::before {
    content: "✓" !important;
    font-size: 12px !important;
    color: #fff !important;
    font-weight: bold !important;
    display: none !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}
body#cms #content.page-content--cms ul.cms-checklist input[type="checkbox"]:checked::before {
    display: block !important;
}
body#cms #content.page-content--cms ul.cms-checklist input[type="checkbox"]:checked + span {
    color: #94a3b8 !important;
    text-decoration: line-through !important;
}

/* 14. Process Steps Timeline */
body#cms .cms-timeline {
    position: relative !important;
    margin: 2.25rem 0 !important;
    padding-left: 20px !important;
}
body#cms .cms-timeline::before {
    content: "" !important;
    position: absolute !important;
    left: 31px !important;
    top: 10px !important;
    bottom: 10px !important;
    width: 2px !important;
    background-color: #e2e8f0 !important;
    z-index: 1 !important;
}
body#cms .cms-timeline-step {
    position: relative !important;
    margin-bottom: 24px !important;
    display: flex !important;
    gap: 20px !important;
    z-index: 2 !important;
}
body#cms .cms-timeline-step:last-child {
    margin-bottom: 0 !important;
}
body#cms .cms-timeline-badge {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background-color: #2563eb !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.8125rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 0 4px #fff !important;
}
body#cms .cms-timeline-content {
    flex: 1 !important;
    background-color: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.01) !important;
}
body#cms .cms-timeline-content h3 {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}
body#cms .cms-timeline-content p {
    margin-bottom: 0 !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    color: #475569 !important;
}

/* 15. FAQ Accordion Section */
body#cms .cms-faq {
    margin: 2rem 0 !important;
}
body#cms .cms-faq-item {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
    background-color: #fff !important;
    overflow: hidden !important;
    transition: border-color 0.2s ease !important;
}
body#cms .cms-faq-item[open] {
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02) !important;
}
body#cms .cms-faq-question {
    padding: 16px 20px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    cursor: pointer !important;
    user-select: none !important;
    outline: none !important;
    list-style: none !important;
    position: relative !important;
    display: block !important;
}
body#cms .cms-faq-question::-webkit-details-marker {
    display: none !important;
}
body#cms .cms-faq-question::after {
    content: "+" !important;
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    color: #64748b !important;
    transition: transform 0.2s ease, content 0.2s ease !important;
}
body#cms .cms-faq-item[open] .cms-faq-question::after {
    content: "−" !important;
}
body#cms .cms-faq-answer {
    padding: 0 20px 16px 20px !important;
    border-top: 1px solid #f1f5f9 !important;
    background-color: #f8fafc !important;
}
body#cms .cms-faq-answer p {
    margin-bottom: 0 !important;
    font-size: 0.875rem !important;
    color: #475569 !important;
}

/* 16. Compare Tables Responsive Wrapper */
body#cms .table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 1.75rem 0 !important;
    border-radius: 6px !important;
    border: 1px solid #e2e8f0 !important;
}
body#cms .table-responsive table {
    margin: 0 !important;
    border: none !important;
}

/* Stats / Metrics Grid for About Us page */
body#cms .cms-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 16px !important;
    margin: 2rem 0 !important;
}

body#cms .cms-stats-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    text-align: center !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

body#cms .cms-stats-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.01) !important;
    border-color: #ff7a1a !important;
}

body#cms .cms-stats-number {
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: #ff7a1a !important; /* Brand vibrant orange */
    line-height: 1 !important;
    margin-bottom: 6px !important;
}

body#cms .cms-stats-label {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    margin-bottom: 4px !important;
}

body#cms .cms-stats-desc {
    font-size: 0.75rem !important;
    color: #64748b !important;
}

/* Category Grid / Cards */
body#cms .cms-category-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 20px !important;
    margin: 2rem 0 !important;
}

body#cms .cms-category-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

body#cms .cms-category-card:hover {
    border-color: #ff7a1a !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04) !important;
}

body#cms .cms-category-title {
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
}

body#cms .cms-category-desc {
    font-size: 0.875rem !important;
    color: #475569 !important;
    margin-bottom: 16px !important;
    line-height: 1.5 !important;
    flex-grow: 1 !important;
}

body#cms .cms-category-link {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #ff7a1a !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

body#cms .cms-category-link:hover {
    color: #e06000 !important;
    text-decoration: underline !important;
}

/* Info Cards for Delivery and Payment */
body#cms .cms-info-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 20px !important;
    margin: 2rem 0 !important;
}

body#cms .cms-info-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02) !important;
}

body#cms .cms-info-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding-bottom: 12px !important;
}

body#cms .cms-info-card-icon {
    font-size: 1.5rem !important;
    line-height: 1 !important;
}

body#cms .cms-info-card-title {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
}

body#cms .cms-price-badge {
    background-color: #fff7ed !important; /* Light orange */
    color: #ea580c !important; /* Orange-600 */
    font-weight: 700 !important;
    font-size: 0.8125rem !important;
    padding: 4px 10px !important;
    border-radius: 9999px !important;
    border: 1px solid #ffedd5 !important;
    display: inline-block !important;
}

body#cms .cms-legal-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin: 2rem 0 !important;
}

body#cms .cms-legal-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

body#cms .cms-legal-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 16px !important;
}

body#cms .cms-legal-item {
    font-size: 0.8125rem !important;
    color: #475569 !important;
}

body#cms .cms-legal-item strong {
    color: #0f172a !important;
}

/* Samix Brand Page Modernization CSS */
body#cms .cms-benefit-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 20px !important;
    margin: 2.5rem 0 !important;
}

body#cms .cms-benefit-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    text-align: center !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
    transition: all 0.2s ease !important;
}

body#cms .cms-benefit-card:hover {
    transform: translateY(-2px) !important;
    border-color: #ff7a1a !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04) !important;
}

body#cms .cms-benefit-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 64px !important;
    width: 64px !important;
    border-radius: 50% !important;
    background-color: #eff6ff !important;
    border: 1px solid #dbeafe !important;
    font-size: 1.75rem !important;
    margin: 0 auto 16px auto !important;
}

body#cms #content.page-content--cms .cms-samix-cta {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important; /* Premium dark gradient */
    border-radius: 16px !important;
    padding: 40px !important;
    text-align: center !important;
    margin: 4rem 0 2rem 0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #334155 !important;
}

body#cms #content.page-content--cms .cms-samix-cta h2 {
    color: #ffffff !important;
    border-bottom: none !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    font-size: 1.625rem !important; /* Clean font size */
    font-weight: 700 !important;
    padding-left: 0 !important;
    border-left: none !important;
    text-align: center !important;
}

body#cms #content.page-content--cms .cms-samix-cta h2 * {
    color: #ffffff !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
}

body#cms #content.page-content--cms .cms-samix-cta p {
    color: #cbd5e1 !important; /* Highly readable light-gray text */
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    max-width: 640px !important;
    margin: 0 auto 24px auto !important;
}

body#cms #content.page-content--cms .cms-samix-cta p * {
    color: #cbd5e1 !important;
}

body#cms a.cms-samix-cta-btn {
    display: inline-block !important;
    background: linear-gradient(135deg, #ff7a1a 0%, #ea580c 100%) !important; /* Vibrant Orange brand gradient */
    color: #ffffff !important;
    padding: 12px 28px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.2) !important;
    border: none !important;
}

body#cms a.cms-samix-cta-btn:hover {
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(234, 88, 12, 0.4) !important;
    text-decoration: none !important;
}

body#cms a.cms-samix-cta-btn:active {
    transform: translateY(0) !important;
}/* --- Santehsnab Premium Product Card Redesign 2026 --- */

/* 1. Container & Layout Overrides */
body.page-product #content-wrapper {
    background-color: #f8fafc !important; /* Soft Slate background */
    padding: 2.5rem 0 !important;
}

body.page-product .product__container {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 32px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.02), 0 8px 10px -6px rgba(0, 0, 0, 0.02) !important;
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr !important;
    gap: 48px !important;
    margin-bottom: 2rem !important;
}

@media (max-width: 991px) {
    body.page-product .product__container {
        grid-template-columns: 1fr !important;
        padding: 20px !important;
        gap: 28px !important;
    }
}

/* 2. Title & Manufacturer Branding */
body.page-product .product__name {
    font-size: 1.625rem !important; /* 26px - clean typography size */
    font-weight: 800 !important;
    color: #0f172a !important; /* Slate-900 */
    line-height: 1.35 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 12px !important;
}

body.page-product .product__manufacturer {
    margin-bottom: 16px !important;
}

body.page-product .product__manufacturer a {
    display: inline-block !important;
    background-color: #eff6ff !important; /* Soft royal blue */
    color: #2563eb !important;
    padding: 5px 14px !important;
    border-radius: 8px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border: 1px solid #dbeafe !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.page-product .product__manufacturer a:hover {
    background-color: #2563eb !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2) !important;
}

/* 3. Premium Price Block Redesign */
body.page-product .product__prices {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 20px !important;
    margin: 24px 0 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.01) !important;
}

body.page-product .product__price {
    font-size: 1.75rem !important; /* 28px - clear action size */
    font-weight: 850 !important;
    color: #ea580c !important; /* High-contrast orange */
}

/* Old Price Styling */
body.page-product .product__prices-inline span.regular-price {
    font-size: 1.05rem !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
    margin-right: 12px !important;
}

/* Discount Badge */
body.page-product .product__prices-inline span.discount-percentage,
body.page-product .product__discount-value {
    display: inline-block !important;
    background-color: #fef2f2 !important;
    color: #ef4444 !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    padding: 3px 10px !important;
    border-radius: 8px !important;
    border: 1px solid #fee2e2 !important;
    vertical-align: middle !important;
}

/* 4. Specifications Card Grid Layout */
body.page-product .product__description-short ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 24px 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 12px !important;
}

body.page-product .product__description-short ul li {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    font-size: 0.875rem !important;
    color: #334155 !important;
    line-height: 1.4 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.01) !important;
    transition: all 0.2s ease !important;
}

body.page-product .product__description-short ul li:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03) !important;
}

body.page-product .product__description-short ul li strong {
    display: block !important;
    font-size: 0.725rem !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 4px !important;
}

/* 5. Quantity Selector & Call-to-Action Add to Cart */
body.page-product .product__actions-qty-add {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-top: 28px !important;
}

/* Quantity selector border cleanup */
body.page-product .quantity-button__group {
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    background-color: #ffffff !important;
    overflow: hidden !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
    height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
}

body.page-product .quantity-button__group input.js-quantity-wanted {
    border: none !important;
    background: transparent !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-align: center !important;
    width: 48px !important;
    font-size: 0.95rem !important;
    height: 100% !important;
}

body.page-product .quantity-button__group button.btn {
    border: none !important;
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    height: 100% !important;
    width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

body.page-product .quantity-button__group button.btn:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Redesigned Premium "Add to Cart" Button */
body.page-product .product__add-to-cart-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: linear-gradient(135deg, #ff7a1a 0%, #ea580c 100%) !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 750 !important;
    height: 48px !important;
    padding: 0 36px !important;
    border-radius: 10px !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(234, 88, 12, 0.25) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

body.page-product .product__add-to-cart-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(234, 88, 12, 0.45) !important;
    color: #ffffff !important;
}

body.page-product .product__add-to-cart-button:active {
    transform: translateY(0) !important;
}

/* 6. Layout for Bottom Details & Reassurance */
body.page-product .product__bottom {
    margin-top: 48px !important;
    display: grid !important;
    grid-template-columns: 1.25fr 0.75fr !important;
    gap: 48px !important;
}

@media (max-width: 991px) {
    body.page-product .product__bottom {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
}

/* Modern Card Layout for Trust elements */
body.page-product .block-reassurance {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 4px 15px -3px rgba(0,0,0,0.01) !important;
}

body.page-product .block-reassurance li {
    padding: 16px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

body.page-product .block-reassurance li:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

body.page-product .block-reassurance li:first-child {
    padding-top: 0 !important;
}

body.page-product .block-reassurance .reassurance-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* 7. Product Rating styling (under Title) */
body.page-product .comments-note {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
}

body.page-product .grade-stars {
    display: inline-flex !important;
}

body.page-product .comments-note span.average-grade,
body.page-product .comments-note a {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #64748b !important; /* Slate-500 */
    text-decoration: none !important;
}

body.page-product .comments-note a:hover {
    color: #2563eb !important;
}
/* --- Santehsnab Premium Product Miniature (Catalog Grid Card) Redesign 2026 --- */

body .product-miniature {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important; /* Allow shadow to bleed out */
}

body .product-miniature__inner {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important; /* Flat light gray border */
    border-radius: 12px !important; /* Modern clean rounded corners */
    padding: 16px !important;
    box-shadow: none !important; /* Flat card - no volume shadows */
    transition: border-color 0.2s ease, box-shadow 0.2s ease, border-radius 0.2s ease !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: visible !important; /* Allow specs block to slide down below */
}

body .product-miniature:hover .product-miniature__inner {
    border-color: #cbd5e1 !important; /* Subtle border enhancement on hover */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05) !important; /* Shadows now bleed out on hover */
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Citrus-style Slide-down Product Specifications */
body .product-miniature__features {
    position: absolute !important;
    top: 100% !important;
    left: -1px !important;
    right: -1px !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-top: none !important;
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
    padding: 0 16px 16px 16px !important;
    box-shadow: 0 16px 24px rgba(0, 0, 0, 0.05) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-5px) !important;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s !important;
    z-index: 99 !important;
}

body .product-miniature:hover .product-miniature__features {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

body .product-miniature__features-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 8px 0 0 0 !important;
    border-top: 1px dashed #cbd5e1 !important;
    padding-top: 8px !important;
}

body .product-miniature__features-list li {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 0.75rem !important; /* ~12px */
    line-height: 1.6 !important;
    margin-bottom: 4px !important;
}

body .product-miniature__features-list li:last-child {
    margin-bottom: 0 !important;
}

body .product-miniature__features-list .feature-name {
    color: #64748b !important; /* Slate-500 */
    font-weight: 500 !important;
    text-align: left !important;
    padding-right: 8px !important;
}

body .product-miniature__features-list .feature-value {
    color: #1e293b !important; /* Slate-800 */
    font-weight: 600 !important;
    text-align: right !important;
}

/* 1. Miniature Top Area (Image Container) */
body .product-miniature__top {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    background-color: #ffffff !important; /* Pure white backdrop */
    aspect-ratio: 1 / 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 14px !important;
}

body .product-miniature__image-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

body .product-miniature__image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transition: transform 0.3s ease !important;
}

body .product-miniature:hover .product-miniature__image {
    transform: scale(1.03) !important; /* Flat clean scaling */
}

/* 2. Absolute Product Flags (Stickers Overlay) */
body .product-flags {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    z-index: 11 !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body .product-flags .badge {
    padding: 4px 8px !important;
    font-size: 0.6875rem !important; /* ~11px */
    font-weight: 700 !important;
    border-radius: 4px !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    box-shadow: none !important;
    border: none !important;
    display: inline-block !important;
    width: max-content !important;
}

/* Flat Badges (Solid Flat Colors) */
body .product-flags .badge.discount {
    background-color: #ff4757 !important; /* Flat Rose Red */
}

body .product-flags .badge.new {
    background-color: #3b82f6 !important; /* Flat Royal Blue */
}

body .product-flags .badge.pack {
    background-color: #2ed573 !important; /* Flat Emerald Green */
}

/* 3. Quickview Button (Sleek Flat Overlay) */
body .product-miniature__quickview-button {
    position: absolute !important;
    bottom: -60px !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(15, 23, 42, 0.85) !important; /* Solid dark overlay */
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    box-shadow: none !important;
    transition: all 0.25s ease !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 10 !important;
    white-space: nowrap !important;
    height: auto !important;
}

body .product-miniature:hover .product-miniature__quickview-button {
    bottom: 12px !important;
    top: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(-50%) !important;
}

body .product-miniature__quickview-button:hover {
    background: #ff7a1a !important; /* Flat brand orange */
    border-color: #ff7a1a !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* 4. Miniature Bottom Area (Info & Actions) */
body .product-miniature__bottom {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    justify-content: space-between !important;
}

body .product-miniature__row {
    display: flex !important;
    flex-direction: column !important;
    margin-top: auto !important;
}

body .product-miniature__infos {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
}

/* 5. Product Title (Flat Graphite Text) */
body .product-miniature__title {
    font-size: 0.875rem !important; /* 14px */
    font-weight: 600 !important;
    color: #1e293b !important; /* Dark Slate-800 */
    line-height: 1.4 !important;
    text-decoration: none !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 38px !important;
    transition: color 0.2s ease !important;
}

body .product-miniature:hover .product-miniature__title {
    color: #ff7a1a !important; /* Highlight brand color on hover */
}

/* 6. Pricing Section (Flat Design - installment badge removed) */
body .product-miniature__prices {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 4px !important;
}

body .product-miniature__price {
    font-size: 1.1875rem !important; /* ~19px */
    font-weight: 800 !important;
    color: #0f172a !important; /* Slate-900 */
}

/* Highlight price with orange only if on discount */
body .product-miniature__discount-price ~ body .product-miniature__price {
    color: #ea580c !important; 
}

body .product-miniature__discount-price {
    display: inline-flex !important;
}

body .product-miniature__regular-price {
    font-size: 0.8125rem !important; /* 13px */
    color: #94a3b8 !important; /* Slate-400 */
    text-decoration: line-through !important;
}

/* 7. Action Form and Buttons */
body .product-miniature__actions {
    margin-top: auto !important;
}

body .product-miniature__form {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    justify-content: space-between !important;
}

/* Modern Flat Quantity Selector */
body .product-miniature__form .quantity-button {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    height: 38px !important;
}

body .product-miniature__form .quantity-button__group {
    display: inline-flex !important;
    align-items: stretch !important;
    border: 1px solid #cbd5e1 !important; /* Slate-300 */
    border-radius: 8px !important; /* Rounded flat corner */
    overflow: hidden !important;
    height: 38px !important;
    width: 96px !important;
    background-color: #ffffff !important; /* Flat white backdrop */
    box-shadow: none !important;
}

body .product-miniature__form .quantity-button__group.input-group {
    flex-wrap: nowrap !important;
}

/* Plus/Minus Buttons inside selector */
body .product-miniature__form .quantity-button__group button.btn {
    border: none !important;
    background-color: #f8fafc !important; /* Very soft light gray */
    color: #475569 !important;
    height: 100% !important;
    align-self: stretch !important;
    width: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transition: background-color 0.2s ease !important;
}

body .product-miniature__form .quantity-button__group button.btn:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

body .product-miniature__form .quantity-button__group button.btn i.material-icons {
    font-size: 14px !important;
    line-height: 14px !important;
    color: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    width: auto !important;
    display: block !important;
}

/* Center Input box */
body .product-miniature__form .quantity-button__group input.form-control {
    border: none !important;
    background: transparent !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-align: center !important;
    width: 36px !important;
    flex-grow: 1 !important;
    font-size: 0.875rem !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Citrus-style Buy Button (Flat Vibrant Orange - Icon Only) */
body .product-miniature__add {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    flex-grow: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #ea580c !important; /* Flat Orange Accent */
    color: #ffffff !important;
    border-radius: 8px !important; /* Match flat style border radius */
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, transform 0.1s ease !important;
    cursor: pointer !important;
}

body .product-miniature__add i.material-icons {
    font-size: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

body .product-miniature__add:hover {
    box-shadow: none !important;
    color: #ffffff !important;
    background-color: #d84a06 !important; /* Flat Darker Orange on Hover */
}

body .product-miniature__add:active {
    transform: scale(0.97) !important; /* Flat scale click indicator */
}

body .product-miniature__add-text {
    display: none !important;
}

/* See details button fallback */
body a.product-miniature__details {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 38px !important;
    border-radius: 8px !important;
    border: 1px solid #ea580c !important;
    color: #ea580c !important;
    background: transparent !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

body a.product-miniature__details:hover {
    background-color: #ea580c !important;
    color: #ffffff !important;
}

/* --- Santehsnab Premium Homepage Redesign 2026 --- */

/* 1. Base Homepage styling */
body.page-index #content.page-content--home {
    background-color: #f8fafc !important; /* Premium Slate-50 background */
    padding: 2.5rem 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3.5rem !important; /* Clean space between sections */
}

/* 2. Hero Image Slider Styling */
body.page-index .ps-imageslider {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    background-color: #ffffff !important;
}

body.page-index .ps-imageslider img {
    border-radius: 12px !important;
    object-fit: cover !important;
}

/* Slide controls */
body.page-index .ps-imageslider .carousel-control-prev,
body.page-index .ps-imageslider .carousel-control-next {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    opacity: 0 !important;
    transition: all 0.2s ease !important;
}

body.page-index .ps-imageslider:hover .carousel-control-prev,
body.page-index .ps-imageslider:hover .carousel-control-next {
    opacity: 1 !important;
}

body.page-index .ps-imageslider .carousel-control-prev:hover,
body.page-index .ps-imageslider .carousel-control-next:hover {
    background-color: #ffffff !important;
    color: #ea580c !important;
    border-color: #cbd5e1 !important;
}

/* 3. Banner block styling */
body.page-index .ps-banner {
    margin: 0 !important;
}

body.page-index .ps-banner .banner {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease !important;
    background-color: #ffffff !important;
}

body.page-index .ps-banner .banner:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: #ea580c !important;
}

body.page-index .ps-banner img {
    border-radius: 12px !important;
    width: 100% !important;
    height: auto !important;
}

/* 4. Products Showcase Blocks on Home page */
body.page-index .module-products {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 32px !important;
    box-shadow: none !important;
}

@media (max-width: 768px) {
    body.page-index .module-products {
        padding: 20px !important;
        border-radius: 12px !important;
    }
}

body.page-index .module-products__title {
    margin-bottom: 24px !important;
}

body.page-index .module-products__title h2 {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    border-bottom: none !important;
    padding-left: 0 !important;
    letter-spacing: -0.02em !important;
}

body.page-index .module-products__buttons {
    margin-top: 24px !important;
    text-align: center !important;
}

body.page-index .module-products__buttons a.btn-outline-primary {
    border: 1px solid #ea580c !important;
    color: #ea580c !important;
    background: transparent !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    padding: 10px 24px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

body.page-index .module-products__buttons a.btn-outline-primary:hover {
    background-color: #ea580c !important;
    color: #ffffff !important;
}

/* 5. Universal CSS Grid for Catalog Products (Solves spacing and height mismatch) */
body .products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (min-width: 576px) {
    body .products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (min-width: 768px) {
    body .products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (min-width: 992px) {
    body .products {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 24px !important;
    }
}

/* --- Premium Category Grid styling --- */
.home-categories {
    margin-top: 1rem !important;
    margin-bottom: 2rem !important;
}

.home-categories__title-block {
    margin-bottom: 24px !important;
}

.home-categories__title {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 6px !important;
}

.home-categories__subtitle {
    font-size: 0.9rem !important;
    color: #64748b !important;
    margin: 0 !important;
}

.home-categories__grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 16px !important;
}

.home-categories__card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    text-decoration: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.home-categories__card:hover {
    border-color: #ea580c !important;
    box-shadow: none !important;
    transform: none !important;
    text-decoration: none !important;
}

.home-categories__icon-wrapper {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 50% !important;
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.home-categories__card:hover .home-categories__icon-wrapper {
    background-color: #fff7ed !important;
    border-color: #ffedd5 !important;
    color: #ea580c !important;
}

.home-categories__info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.home-categories__name {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
}

.home-categories__count {
    font-size: 0.75rem !important;
    color: #94a3b8 !important;
}

/* --- Plumbing Wizard Widget styling --- */
.home-wizard {
    margin-top: 1rem !important;
    margin-bottom: 2rem !important;
}

.home-wizard__wrapper {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 32px !important;
    box-shadow: none !important;
}

@media (max-width: 768px) {
    .home-wizard__wrapper {
        padding: 20px !important;
        border-radius: 12px !important;
    }
}

.home-wizard__header {
    margin-bottom: 28px !important;
}

.home-wizard__title {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 6px !important;
}

.home-wizard__subtitle {
    font-size: 0.9rem !important;
    color: #64748b !important;
    margin: 0 !important;
}

/* Wizard Steps Navigation */
.home-wizard__steps-nav {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 28px !important;
}

.home-wizard__step-indicator {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    color: #94a3b8 !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding-bottom: 8px !important;
    border-bottom: 3px solid #e2e8f0 !important;
    transition: border-color 0.25s ease, color 0.25s ease !important;
}

.home-wizard__step-indicator .step-num {
    display: none !important;
}

.home-wizard__step-indicator.active {
    color: #ea580c !important;
    border-bottom-color: #ea580c !important;
}

.home-wizard__step-indicator.completed {
    color: #10b981 !important;
    border-bottom-color: #10b981 !important;
}

/* Step Content Panes */
.home-wizard__step-pane {
    display: none !important;
}

.home-wizard__step-pane.active {
    display: block !important;
    animation: fadeIn 0.3s ease !important;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.home-wizard__step-pane .pane-title {
    font-size: 1.15rem !important;
    font-weight: 750 !important;
    color: #1e293b !important;
    margin-bottom: 24px !important;
}

.home-wizard__step-pane .pane-options {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
}

/* Option Card Selectors */
.pane-option-card {
    cursor: pointer !important;
    margin: 0 !important;
    display: block !important;
}

.pane-option-card input[type="radio"] {
    display: none !important;
}

.pane-option-card .option-content {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    height: 100% !important;
    transition: all 0.2s ease !important;
}

.pane-option-card:hover .option-content {
    border-color: #cbd5e1 !important;
}

.pane-option-card input[type="radio"]:checked + .option-content {
    border-color: #ea580c !important;
    background-color: #fff7ed !important;
    box-shadow: none !important;
}

.pane-option-card .option-icon {
    font-size: 1.25rem !important;
    width: 40px !important;
    height: 40px !important;
    background-color: #f8fafc !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
    transition: background-color 0.2s ease !important;
}

.pane-option-card input[type="radio"]:checked + .option-content .option-icon {
    background-color: #ffedd5 !important;
}

.pane-option-card .option-label {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
}

.pane-option-card .option-desc {
    font-size: 0.8rem !important;
    color: #64748b !important;
    line-height: 1.45 !important;
}

.pane-actions {
    display: flex !important;
    gap: 12px !important;
    justify-content: flex-end !important;
    border-top: 1px solid #f1f5f9 !important;
    padding-top: 20px !important;
}

/* Results Showcase styling */
.home-wizard__results-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
}

.result-card {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}

@media (max-width: 576px) {
    .result-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
}

.result-card__icon {
    font-size: 2rem !important;
    background-color: #ffffff !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.result-card__details {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.result-card__type {
    font-size: 0.725rem !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.result-card__title {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 !important;
}

.result-card__price {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: #ea580c !important;
}

.result-card__link {
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    color: #2563eb !important;
    text-decoration: none !important;
}

.home-wizard__results-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-top: 2px dashed #e2e8f0 !important;
    padding-top: 24px !important;
    gap: 16px !important;
}

@media (max-width: 576px) {
    .home-wizard__results-footer {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}

.total-price-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.total-label {
    font-size: 0.85rem !important;
    color: #64748b !important;
}

.total-price-val {
    font-size: 1.5rem !important;
    font-weight: 850 !important;
    color: #ea580c !important;
}

/* --- Dynamic Tabbed Products selection --- */
.module-products__tabs {
    display: flex !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
    flex-wrap: wrap !important;
}

.module-products__tabs .tab-btn {
    border: 1px solid #cbd5e1 !important;
    background-color: #ffffff !important;
    color: #64748b !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    padding: 8px 18px !important;
    border-radius: 20px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.module-products__tabs .tab-btn:hover {
    border-color: #94a3b8 !important;
    color: #1e293b !important;
}

.module-products__tabs .tab-btn.active {
    background-color: #ea580c !important;
    border-color: #ea580c !important;
    color: #ffffff !important;
}

/* --- Expert Advice Hub styling --- */
.home-expert {
    margin-top: 1rem !important;
    margin-bottom: 3.5rem !important;
}

.home-expert__title-block {
    margin-bottom: 24px !important;
}

.home-expert__title {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 6px !important;
}

.home-expert__subtitle {
    font-size: 0.9rem !important;
    color: #64748b !important;
    margin: 0 !important;
}

.home-expert__grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 20px !important;
}

.home-expert__card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    transition: border-color 0.2s ease !important;
}

.home-expert__card:hover {
    border-color: #ea580c !important;
    box-shadow: none !important;
    transform: none !important;
}

.home-expert__image-wrapper {
    background-color: #f8fafc !important;
    height: 140px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-top-left-radius: 11px !important;
    border-top-right-radius: 11px !important;
}

.home-expert__card:hover .home-expert__image-wrapper {
    color: #ea580c !important;
}

.home-expert__content {
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.home-expert__tag {
    font-size: 0.725rem !important;
    font-weight: 750 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 8px !important;
}

.home-expert__card-title {
    font-size: 1.05rem !important;
    font-weight: 750 !important;
    color: #1e293b !important;
    margin-bottom: 10px !important;
}

.home-expert__card-desc {
    font-size: 0.85rem !important;
    color: #64748b !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
    flex-grow: 1 !important;
}

.home-expert__checklist {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
}

.home-expert__checklist li {
    font-size: 0.775rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.home-expert__checklist li span {
    color: #10b981 !important;
}

.home-expert__read-more {
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    width: 100% !important;
    padding: 10px 0 !important;
    border-radius: 8px !important;
}

/* --- Mobile Bottom Navigation Bar styling --- */
@media (max-width: 575.98px) {
    .mobile-bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        background-color: rgba(255, 255, 255, 0.96) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-top: 1px solid #e2e8f0 !important;
        z-index: 9999 !important;
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.03) !important;
    }

    /* Offset page content at the very bottom on mobile so nav doesn't overlap footer content */
    body {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .mobile-bottom-nav__item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        color: #64748b !important;
        text-decoration: none !important;
        font-size: 0.65rem !important;
        font-weight: 600 !important;
        width: 20% !important;
        height: 100% !important;
        transition: color 0.2s ease !important;
    }

    .mobile-bottom-nav__item:hover,
    .mobile-bottom-nav__item:focus {
        text-decoration: none !important;
        color: #475569 !important;
    }

    .mobile-bottom-nav__item.active {
        color: #ea580c !important;
    }

    .mobile-bottom-nav__item i.material-icons {
        font-size: 22px !important;
    }
}

/* Hide navigation and reset body padding on desktops and tablets */
@media (min-width: 576px) {
    .mobile-bottom-nav {
        display: none !important;
    }
    body {
        padding-bottom: 0 !important;
    }
}

/* --- Flat 2.0 / Citrus Button Styling Overrides --- */
body .home-wizard .btn-primary,
body .module-products__buttons a.btn-outline-primary,
body .module-products__tabs .tab-btn.active,
body a.product-miniature__details:hover {
    background-color: #ea580c !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

body .home-wizard .btn-primary,
body .module-products__buttons a.btn-outline-primary,
body a.product-miniature__details {
    border-radius: 8px !important;
    font-weight: 700 !important;
    transition: background-color 0.2s ease, transform 0.1s ease !important;
}

body .home-wizard .btn-primary:hover,
body .module-products__buttons a.btn-outline-primary:hover,
body a.product-miniature__details:hover {
    background-color: #d84a06 !important;
    color: #ffffff !important;
    border: none !important;
}

body .home-wizard .btn-primary:active,
body .module-products__buttons a.btn-outline-primary:active {
    transform: scale(0.98) !important;
}

body .home-wizard .btn-outline-secondary {
    background-color: transparent !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 10px 24px !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

body .home-wizard .btn-outline-secondary:hover {
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
    border-color: #94a3b8 !important;
}

/* ==========================================================================
   6. Modern 2026 Mobile Responsive Design Overrides (< 576px / < 768px)
   ========================================================================== */

@media (max-width: 768px) {
    /* Base Container Spacing */
    body.page-index #content.page-content--home {
        padding: 1.5rem 0 !important;
    }

    /* 1. Category Grid Layout: App-like 2-column layout */
    .home-categories__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .home-categories__card {
        padding: 12px 10px !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 8px !important;
        border-radius: 8px !important;
    }
    
    .home-categories__icon-wrapper {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
    }
    
    .home-categories__icon-wrapper svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    .home-categories__name {
        font-size: 0.8rem !important;
        line-height: 1.25 !important;
    }
    
    .home-categories__count {
        font-size: 0.65rem !important;
    }

    /* 2. Product Showcase Block */
    body.page-index .module-products {
        padding: 16px 12px !important;
        border-radius: 8px !important;
    }
    
    body.page-index .module-products__title {
        margin-bottom: 16px !important;
    }
    
    body.page-index .module-products__title h2 {
        font-size: 1.2rem !important;
        text-align: center !important;
    }
    
    .module-products__tabs {
        justify-content: center !important;
        gap: 6px !important;
        margin-bottom: 16px !important;
    }
    
    .module-products__tabs .tab-btn {
        padding: 6px 12px !important;
        font-size: 0.725rem !important;
    }

    /* 3. Universal Product Cards in Grid (Category Catalog + Showcase) */
    body .products,
    body .ce-products,
    body .ce-product-grid,
    body .elementor-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    body .product-miniature {
        height: 100% !important;
        margin: 0 !important;
    }
    
    body .product-miniature__inner {
        padding: 6px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        height: 100% !important;
        min-height: 290px !important; /* Unified min-height on mobile to ensure all cards are of identical height and never overflow! */
        box-sizing: border-box !important;
    }
    
    /* Full-width stretch image style on mobile */
    body .product-miniature__top {
        margin: -6px -6px 6px -6px !important;
        width: calc(100% + 12px) !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 0 !important;
        margin-bottom: 6px !important;
        overflow: hidden !important;
    }
    
    body .product-miniature__image-link picture {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    body .product-miniature__image {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
    
    /* Hide quickview button & touch eye icon on mobile */
    body .product-miniature__quickview-touch,
    body .product-miniature__quickview-button {
        display: none !important;
    }
    
    /* Premium Flex container on mobile */
    body .product-miniature__bottom {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        flex-grow: 1 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    body .product-miniature__infos {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        margin-bottom: 6px !important;
    }
    
    /* Horizontal row for price and action button on mobile */
    body .product-miniature__row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        column-gap: 4px !important;
        align-items: center !important;
        margin-top: auto !important;
        width: 100% !important;
    }
    
    body .product-miniature__variants {
        display: none !important;
    }
    
    /* Product Title (up to 2 lines, readable size) */
    body .product-miniature__title {
        font-size: 0.785rem !important; /* Crisp 12.5px font size */
        line-height: 1.25 !important;
        height: 2.5em !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        margin: 0 !important;
        color: #1e293b !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
    
    /* Reviews display */
    body .product-list-review {
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
    }
    
    body .product-list-comments-number {
        font-size: 0.675rem !important;
        color: #64748b !important;
        margin: 0 0 0 2px !important;
        line-height: 1 !important;
    }
    
    body .product-list-comments-number .comments-count-text {
        display: none !important;
    }
    
    body .product-list-comments-number [data-ps-ref="number-value"]::before {
        content: "(";
    }
    
    body .product-list-comments-number [data-ps-ref="number-value"]::after {
        content: ")";
    }
    
    /* Pricing display */
    body .product-miniature__prices {
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
    }
    
    body .product-miniature__price {
        font-size: 0.9rem !important;
        font-weight: 800 !important;
        line-height: 1.1 !important;
        color: #0f172a !important;
    }
    
    body .product-miniature__discount-price {
        display: inline-flex !important;
        margin-bottom: 1px !important;
    }
    
    body .product-miniature__regular-price {
        font-size: 0.7rem !important;
        line-height: 1.1 !important;
    }
    
    /* HIDE quantity selector on mobile catalog card */
    body .product-miniature__form .quantity-button {
        display: none !important;
    }
    
    /* Action Form and Buttons */
    body .product-miniature__actions {
        margin: 0 !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        padding-right: 2px !important; /* Prevent button clipping on the card edge */
    }
    
    body .product-miniature__form {
        display: flex !important;
        width: auto !important;
        margin: 0 !important;
    }
    
    /* Circle buy button with cart icon only */
    body .product-miniature__add {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        border-radius: 8px !important;
        background-color: #ea580c !important;
        color: #ffffff !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: 0 2px 6px rgba(234, 88, 12, 0.15) !important;
        border: none !important;
        transition: background-color 0.2s ease, transform 0.1s ease !important;
    }
    
    body .product-miniature__add i.material-icons {
        font-size: 16px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }
    
    body .product-miniature__add-text {
        display: none !important;
    }
    
    /* Details button fallback as a circle with chevron icon */
    body a.product-miniature__details {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        border-radius: 8px !important;
        border: 1px solid #ea580c !important;
        color: #ea580c !important;
        background: transparent !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0 !important;
        padding: 0 !important;
        transition: all 0.2s ease !important;
    }
    
    body a.product-miniature__details::after {
        content: "chevron_right";
        font-family: 'Material Icons';
        font-size: 18px !important;
        line-height: 1 !important;
        color: inherit !important;
    }
    
    /* Disable hover slide-down features specs on mobile */
    body .product-miniature__features {
        display: none !important;
    }

    /* 4. Expert Articles section styling */
    .home-expert__grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .home-expert__card {
        border-radius: 8px !important;
    }
    
    .home-expert__image-wrapper {
        height: 120px !important;
    }
    
    .home-expert__content {
        padding: 12px !important;
    }
    
    .home-expert__card-title {
        font-size: 0.95rem !important;
    }
    
    .home-expert__card-desc {
        font-size: 0.8rem !important;
        margin-bottom: 12px !important;
    }
}

/* --- High-Resolution Desktop Container Expansion (Citrus Fluid Grid Style) --- */
@media (min-width: 1200px) {
    body .container,
    body .container-lg,
    body .container-md,
    body .container-sm,
    body .container-xl,
    body .container-xxl,
    body .elementor-container {
        max-width: 1400px !important;
    }
}

@media (min-width: 1600px) {
    body .container,
    body .container-lg,
    body .container-md,
    body .container-sm,
    body .container-xl,
    body .container-xxl,
    body .elementor-container {
        max-width: 1560px !important;
    }
}

/* --- CMS Dual Choice Block --- */
body#cms .cms-dual-choice {
    margin: 3.5rem 0 2.5rem 0 !important;
    padding: 28px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
}

body#cms .cms-dual-choice__header {
    text-align: center !important;
    margin-bottom: 24px !important;
}

body#cms .cms-dual-choice__subtitle {
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #ea580c !important;
    font-weight: 700 !important;
    margin-bottom: 6px !important;
}

body#cms .cms-dual-choice__title {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 !important;
    border-left: none !important;
    padding-left: 0 !important;
    line-height: 1.35 !important;
}

body#cms .cms-dual-choice__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    margin-top: 20px !important;
}

body#cms .cms-dual-choice__card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
}

body#cms .cms-dual-choice__card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.05) !important;
}

body#cms .cms-dual-choice__card--ready {
    border-top: 4px solid #ea580c !important;
}

body#cms .cms-dual-choice__card--custom {
    border-top: 4px solid #3b82f6 !important;
}

body#cms .cms-dual-choice__card-badge {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 9999px !important;
}

body#cms .cms-dual-choice__card--ready .cms-dual-choice__card-badge {
    background-color: #fff7ed !important;
    color: #ea580c !important;
    border: 1px solid #ffedd5 !important;
}

body#cms .cms-dual-choice__card--custom .cms-dual-choice__card-badge {
    background-color: #eff6ff !important;
    color: #2563eb !important;
    border: 1px solid #dbeafe !important;
}

body#cms .cms-dual-choice__card-icon {
    font-size: 1.75rem !important;
    margin-bottom: 12px !important;
    line-height: 1 !important;
}

body#cms .cms-dual-choice__card-title {
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

body#cms .cms-dual-choice__card-text {
    font-size: 0.84375rem !important;
    color: #475569 !important;
    line-height: 1.55 !important;
    margin-bottom: 20px !important;
    flex-grow: 1 !important;
}

body#cms .cms-dual-choice__card-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: auto !important;
}

body#cms .cms-dual-choice__btn {
    display: inline-block !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-align: center !important;
    transition: all 0.2s ease !important;
}

body#cms .cms-dual-choice__btn--primary {
    background-color: #ea580c !important;
    color: #ffffff !important;
}

body#cms .cms-dual-choice__btn--primary:hover {
    background-color: #c2410c !important;
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.25) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

body#cms .cms-dual-choice__btn--accent {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

body#cms .cms-dual-choice__btn--accent:hover {
    background-color: #1d4ed8 !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

body#cms .cms-dual-choice__link {
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

body#cms .cms-dual-choice__link:hover {
    color: #0f172a !important;
    text-decoration: underline !important;
}

@media (max-width: 650px) {
    body#cms .cms-dual-choice {
        padding: 16px !important;
        margin: 2.5rem 0 1.5rem 0 !important;
    }
    body#cms .cms-dual-choice__grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    body#cms .cms-dual-choice__card {
        padding: 18px !important;
    }
    body#cms .cms-dual-choice__card-badge {
        position: static !important;
        align-self: flex-start !important;
        margin-bottom: 10px !important;
    }
    body#cms .cms-dual-choice__card-icon {
        margin-bottom: 8px !important;
    }
    body#cms .cms-dual-choice__title {
        font-size: 1.125rem !important;
    }
    body#cms .cms-dual-choice__card-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 10px !important;
    }
    body#cms .cms-dual-choice__btn {
        width: 100% !important;
    }
    body#cms .cms-dual-choice__link {
        text-align: center !important;
        margin-top: 6px !important;
    }
}