/* --- Oriadelots Modern Policy Pages Styles --- */
.policy-page-wrapper {
    font-family: inherit;
    color: #333333;
    background-color: #ffffff;
    line-height: 1.7;
    padding: 40px 0 60px 0;
}

/* Page Structural Container */
.policy-page-wrapper .policy-container {
    max-width: 900px; /* Narrower reading width for better legibility */
    margin: 0 auto;
    padding: 0 20px;
}

/* Headings Styling */
.policy-page-wrapper h1.policy-main-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #000000;
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.2;
}

.policy-page-wrapper p.policy-updated-date {
    font-size: 0.9rem;
    color: #777777;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 40px;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 15px;
}

.policy-page-wrapper h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #000000;
    margin-top: 35px;
    margin-bottom: 15px;
}

.policy-page-wrapper h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #000000;
    margin-top: 25px;
    margin-bottom: 10px;
}

/* Core Content Elements */
.policy-page-wrapper p {
    margin-bottom: 20px;
    font-size: 1.05rem;
}

/* Modernized Lists (Bullet points & Numbers) */
.policy-page-wrapper ul, 
.policy-page-wrapper ol {
    margin-bottom: 25px;
    padding-left: 20px;
}

.policy-page-wrapper li {
    margin-bottom: 10px;
    font-size: 1.05rem;
}

.policy-page-wrapper li strong {
    color: #000000;
}

/* Premium Highlight/Notice Boxes (For store address, warranty periods, etc.) */
.policy-page-wrapper .policy-notice-box {
    background-color: #f8fafc;
    border-left: 4px solid #52c9ee; /* Your Signature Brand Blue */
    padding: 20px;
    border-radius: 0 8px 8px 0;
    margin: 30px 0;
}

.policy-page-wrapper .policy-notice-box p {
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 500;
    color: #444444;
}

/* Responsive Scaling */
@media (max-width: 768px) {
    .policy-page-wrapper {
        padding: 25px 0 40px 0;
    }
    .policy-page-wrapper h1.policy-main-title {
        font-size: 2.1rem;
    }
    .policy-page-wrapper h2 {
        font-size: 1.4rem;
    }
}








/* --- 1. Global / Reset Homepage (our Story)--- */
.custom-hero-section {
    background-color: #ffffff;
    position: relative;
    z-index: 10;
    /* Curve and Lift */
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    margin-top: -10px !important;
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.04);
    padding: 30px 15px 10px 15px !important;
}

.custom-hero-section .hero-container {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0px !important;
}

/* --- 2. Typography & Components --- */
.custom-hero-section .hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: #000000;
    margin-top: 10px !important;
    margin-bottom: 15px !important;
    line-height: 1.15;
}

.custom-hero-section .highlight-circle {
    position: relative;
    display: inline-block;
    color: #000000;
    z-index: 1;
    white-space: nowrap;
}

.custom-hero-section .highlight-circle::before {
    content: "";
    position: absolute;
    top: -4px;
    left: -12px;
    right: -12px;
    bottom: -4px;
    border: 3px solid #52c9ee;
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    z-index: -1;
    transform: rotate(-1.5deg);
}

.custom-hero-section .hero-btn {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 20px !important;
    border: 2px solid #000000 !important;
    border-radius: 6px !important;
    color: #000000 !important;
    background-color: transparent !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    margin-bottom: 10px !important;
    transition: all 0.3s ease;
}

.custom-hero-section .hero-btn:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
}

.custom-hero-section .hero-text p {
    font-size: 1.05rem;
    line-height: 1.5;
    color: #333333;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

/* --- 3. Responsive Layouts --- */
@media (min-width: 769px) {
    .custom-hero-section {
        padding: 50px 40px 20px 40px !important;
        border-top-left-radius: 16px !important;
        border-top-right-radius: 16px !important;
        margin-top: -12px !important;
    }
    .custom-hero-section .hero-container {
        flex-direction: row;
        align-items: flex-start;
        gap: 50px !important;
    }
    .custom-hero-section .hero-left-col { flex: 1.1; }
    .custom-hero-section .hero-right-col { flex: 1.2; padding-top: 5px; }
}

@media (max-width: 768px) {
    .custom-hero-section { padding: 20px 15px 0px 15px !important; }
    .custom-hero-section .hero-title { font-size: 2.2rem; }
}

/* --- 4. About Us Page Specific Scopes (Kept separate from Homepage) --- */
.about-page-wrapper .about-grid-2 { display: flex; flex-direction: column; gap: 30px; }
.about-page-wrapper .about-grid-3 { display: flex; flex-direction: column; gap: 20px; }

@media (min-width: 769px) {
    .about-page-wrapper .about-grid-2 { flex-direction: row; gap: 60px; }
    .about-page-wrapper .about-grid-3 { flex-direction: row; gap: 25px; }
}




/* --- Oriadelots Modern About Us Page Styles --- */
.about-page-wrapper {
    font-family: inherit;
    color: #333333;
    background-color: #ffffff;
    line-height: 1.6;
}

/* Structural Container */
.about-page-wrapper .about-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Grid Frameworks */
.about-page-wrapper .about-grid-2 {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.about-page-wrapper .about-grid-3 {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Section Header Shared Elements */
.about-page-wrapper h2 {
    font-size: 2.2rem;
    font-weight: 800;
    color: #000000;
    margin-top: 0;
    margin-bottom: 15px;
}

/* 1. Hero Banner Styling */
.about-hero-section {
    padding: 50px 0 30px 0;
    background-color: #ffffff;
    text-align: left;
}
.about-hero-section .about-sub {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    color: #666666;
    display: block;
    margin-bottom: 10px;
}
.about-hero-section .about-main-title {
    font-size: 3.2rem;
    font-weight: 800;
    color: #000000;
    line-height: 1.15;
    margin-bottom: 20px;
    margin-top: 0;
}
.about-hero-section .about-highlight {
    position: relative;
    display: inline-block;
    color: #000000;
    z-index: 1;
}
.about-hero-section .about-highlight::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -12px;
    right: -12px;
    bottom: -2px;
    border: 3px solid #52c9ee; /* Signature Brand Blue */
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; /* Matches Homepage Curvature */
    z-index: -1;
    transform: rotate(-1deg);
}
.about-hero-section .about-hero-lead {
    font-size: 1.15rem;
    color: #444444;
    max-width: 900px;
    margin: 0;
    line-height: 1.6;
}

/* 2. Story Section Styling */
.about-story-section {
    padding: 40px 0;
    border-top: 1px solid #f0f0f0;
}
.about-story-section .story-accent {
    font-size: 1.25rem;
    font-weight: 600;
    color: #000000;
    line-height: 1.4;
}
.about-story-section p {
    margin-bottom: 15px;
}
.about-story-section p:last-child {
    margin-bottom: 0;
}

/* 3. Focus/Ecosystem Section Styling */
.about-focus-section {
    padding: 50px 0;
    background-color: #fcfcfc;
    border-top: 1px solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5;
}
.about-focus-section .section-header-center {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px auto;
}
.about-focus-section .focus-card {
    background: #ffffff;
    padding: 30px;
    border: 1px solid #eef2f4;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.about-focus-section .focus-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.03);
}
.about-focus-section .card-icon {
    font-size: 2rem;
    color: #52c9ee;
    margin-bottom: 15px;
}
.about-focus-section .focus-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #000000;
    margin: 0 0 12px 0;
    line-height: 1.3;
}
.about-focus-section .focus-card p {
    font-size: 0.95rem;
    color: #555555;
    margin: 0;
    line-height: 1.6;
}





/* 3. Ensure the search input itself has no top margin */
.mobile-header-wrapper-inner .mobile-search {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* ==========================================================================
   ORIADELOTS LIGHT MOBILE MENU STYLING (OPTIMIZED)
   ========================================================================== */
@media (max-width: 991px) {
    
    /* 1. THEME OVERRIDE (CRISP WHITE & BRAND BLACK) */
    div.mobile-header-active.mobile-header-wrapper-style,
    .mobile-header-wrapper-style,
    .mobile-header-wrapper-inner {
        background: #ffffff !important;
    }

    .mobile-header-wrapper-style a,
    .mobile-header-wrapper-style p,
    .mobile-header-wrapper-style span,
    .mobile-header-wrapper-style li,
    .mobile-header-wrapper-style h3,
    .mobile-header-wrapper-style h4,
    .mobile-header-wrapper-style h5,
    .mobile-header-wrapper-style h6,
    .mobile-header-wrapper-style .menu-expand,
    .mobile-menu-wrap ul li a {
        color: #111827 !important;
    }

    /* 2. HIDE DEFAULT HAMBURGER & EXTRA ICONS */
    .mobile-header-wrapper-style i.fa-bars,
    .mobile-header-wrapper-style .categories-button-active span.fa-list,
    .mobile-header-wrapper-style [class*="categories-button"] i,
    .mobile-header-wrapper-style [class*="categories-button"] span,
    .mobile-header-wrapper-style .mobile-menu-wrap .categories-button-active i,
    .mobile-header-wrapper-style .mobile-menu-wrap .categories-button-active span,
    .mobile-header-wrapper-style a[class*="categories"] i,
    .mobile-header-wrapper-style a[class*="categories"] span:not(.menu-expand),
    .categories-button-active::before,
    .categories-button-active::after,
    .mobile-header-wrapper-style a[class*="categories"]::before,
    .mobile-header-wrapper-style a[class*="categories"]::after,
    .categories-button-active i.fa-chevron-down,
    .categories-button-active i.fa-chevron-up,
    .categories-button-active .menu-expand {
        display: none !important;
        content: none !important;
    }

    /* 3. BROWSE CATEGORIES MAIN BUTTON ALIGNMENT */
    .categories-button-active,
    .main-categories-wrap a.categories-button-active,
    .mobile-menu-wrap .categories-button-active {
        padding: 14px 0 14px 12px !important;
        margin: 0 !important;
        display: block !important;
        font-family: 'Jost', sans-serif !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        text-transform: none !important;
    }

    /* 4. DROPDOWN TRACK & BACKGROUNDS */
    .mobile-header-active .categories-dropdown-wrap,
    .categories-dropdown-wrap.open,
    .categories-dropdown-active-large {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        top: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .categories-dropdown-wrap,
    .categories-dropdown-wrap ul,
    .categories-dropdown-wrap ul li,
    .categories-dropdown-wrap ul li a {
        background: transparent !important;
    }

    /* 5. INNER LINKS & ARROW POSITIONING */
    .categories-dropdown-wrap ul li {
        display: block !important;
        width: 100% !important;
        border-bottom: 1px solid #e2e8f0 !important; 
        position: relative;
    }

    .categories-dropdown-wrap ul li a,
    .categories-dropdown-wrap ul li span,
    .main-categories-wrap .categories-dropdown-wrap a {
        font-family: 'Jost', sans-serif !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        text-transform: none !important;
        display: block !important;
        padding: 14px 0 14px 12px !important; 
        margin: 0 !important;
        position: relative !important; 
    }

    /* Dropdown arrows pinned to the right */
    .categories-dropdown-wrap ul li.has-children > a::after,
    .categories-dropdown-wrap ul li.has-children > a::before,
    .categories-dropdown-wrap ul li .menu-expand {
        position: absolute !important;
        right: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        z-index: 10 !important;
    }

    .categories-dropdown-wrap ul li.has-children::after,
    .categories-dropdown-wrap ul li.has-children::before {
        position: absolute !important;
        right: 12px !important;
        top: 22px !important; 
        transform: translateY(-50%) !important;
        margin: 0 !important;
        z-index: 10 !important;
    }

    /* 6. NESTED SUBCATEGORIES (CLOSED BY DEFAULT) */
    .categories-dropdown-wrap ul li div.dropdown-menu,
    .categories-dropdown-wrap ul li ul,
    .categories-dropdown-wrap ul li .dropdown,
    .categories-dropdown-wrap ul.sub-menu {
        padding-left: 15px !important; 
        width: 100% !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .categories-dropdown-wrap ul li ul li {
        border-bottom: none !important; 
    }

    .categories-dropdown-wrap ul li ul li a {
        font-size: 14px !important; 
        font-weight: 400 !important;
        padding: 10px 0 !important;
    }

    .categories-dropdown-wrap ul li:last-child {
        border-bottom: none !important;
    }

    .mobile-header-wrapper-style li,
    .mobile-header-wrapper-style ul,
    .mobile-header-wrapper-style .mobile-menu-wrap ul li {
        border-color: #f1f5f9 !important;
    }

    /* 7. SEARCH INPUT & SPACING BALANCING */
    /* Pull the search bar up towards the logo */
    .mobile-header-wrapper-style .mobile-header-top {
        background: transparent !important;
        border-color: #f1f5f9 !important;
        padding-bottom: 15px !important; 
        margin-bottom: 15px !important; 
    }

    .mobile-header-wrapper-style .search-form,
    .mobile-header-wrapper-style .mobile-search {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 20px !important;
    }

    .mobile-header-wrapper-style form input,
    .mobile-header-wrapper-style .search-form input {
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        color: #111827 !important;
    }

    .mobile-header-wrapper-style form input::placeholder {
        color: #94a3b8 !important;
    }

    .mobile-header-wrapper-style .mobile-header-info-wrap {
        background: transparent !important;
        border-color: #f1f5f9 !important;
    }
}








/* ==========================================================================
   ORIADELOTS CATEGORY GRID CLEAN COMPACT OPTIMIZATION (SEAMLESS LOOK)
   ========================================================================== */

/* 1. Strip away all internal card padding and borders to match the featured slider */
.carousel-6-columns-cover .card-1 {
    padding: 0px !important;       /* REMOVES ALL BORDER SPACE: Image now goes edge-to-edge */
    background: transparent !important; /* Strips the white box background */
    border: none !important;       /* Erases the outer box container lines */
    box-shadow: none !important;   /* Keeps it completely flat and clean */
    text-align: center !important; /* Centers text underneath just like products */
}

/* Ensure the image stretches perfectly edge-to-edge with no clipping */
.carousel-6-columns-cover .card-1 img,
.carousel-6-columns-cover .card-1 figure img {
    width: 100% !important;
    height: auto !important;
    border-radius: 0px !important;  /* Matches the sharp, clean edges of your product grid */
    margin-bottom: 12px !important; /* Elegant spacing between the image and text */
}

/* Format the category labels to perfectly match your product text styling */
.carousel-6-columns-cover .card-1 h6,
.carousel-6-columns-cover .card-1 a,
.carousel-6-columns-cover .card-1 .category-name {
    font-size: 14px !important;
    font-weight: 500 !important;   /* Clean, modern weight matching product listings */
    color: #111827 !important;     /* Deep crisp brand charcoal */
    letter-spacing: -0.01em !important;
    display: block !important;
    margin-top: 6px !important;
    text-transform: none !important;
}

/* 2. Tighten the spatial distance margins between the elements */
.carousel-6-columns-cover .slick-list {
    margin-left: -8px !important;   /* Extends track slightly for maximum screen utilization */
    margin-right: -8px !important;
}

.carousel-6-columns-cover .card-1.slick-slide {
    margin-left: 8px !important;    /* Clean spacing between containers */
    margin-right: 8px !important;
}

/* 3. Small Phone Device Refinements */
@media (max-width: 767px) {
    .carousel-6-columns-cover .card-1.slick-slide {
        margin-left: 6px !important; /* Tighter column gaps on mobile touch viewports */
        margin-right: 6px !important;
    }
}


/* ==========================================================================
   ORIADELOTS CATEGORY NATURAL HEIGHT REDUCTION
   ========================================================================== */

/* 1. Keep the image fully fluid and natural (No fixed height cropping) */
.carousel-6-columns-cover .card-1 img,
.carousel-6-columns-cover .card-1 figure img {
    width: 100% !important;
    height: auto !important;        /* Let the height adjust naturally based on the width */
    object-fit: contain !important; /* Ensures the whole image stays completely visible */
    margin-bottom: 6px !important;  /* Snug spacing to shave off vertical empty space */
}

/* 2. Narrow the slide width slightly to naturally pull the height down */
.carousel-6-columns-cover .card-1.slick-slide {
    padding: 0 14px !important;    /* Increases side-gaps slightly, forcing the square images to scale down in height */
}

/* 3. Tighten the mobile view height naturally too */
@media (max-width: 767px) {
    .carousel-6-columns-cover .card-1.slick-slide {
        padding: 0 10px !important; /* Snug side padding to keep them short and crisp on mobile */
    }
}



/* ==========================================================================
   ORIADELOTS GLOBAL MOBILE E-COMMERCE GRID STYLING (MERGED & OPTIMIZED)
   ========================================================================== */
@media (max-width: 767px) {

    /* 1. Universal Layout Grid Force (Shop Main Loops, Listings, and Related Rows) */
    .row.products-loop, 
    .products-listing .row,
    [class*="product-grid"],
    .product-list-container .row,
    div#related-products.row {
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Gutter and Margin Adjustments for Shop Loops */
    .row.products-loop, 
    .products-listing .row,
    [class*="product-grid"],
    .product-list-container .row {
        margin-left: -6px !important;  
        margin-right: -6px !important;
    }

    /* Gutter and Margin Adjustments for Related Product Loops */
    div#related-products.row {
        margin-left: 0 !important;   /* Prevents Bootstrap negative left-pull layout breaks */
        margin-right: 0 !important;  /* Keeps the grid perfectly centered on mobile viewports */
        padding-left: 4px !important; 
        padding-right: 4px !important;
    }

    /* 2. Proportional 2-Column Split (Forces items side-by-side) */
    .row.products-loop > div,
    .products-listing .row > div,
    [class*="product-grid"] > div,
    .product-list-container .row > div,
    div#related-products.row > div.col-lg-4,
    div#related-products.row > div.col-sm-6 {
        display: inline-block !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        padding-left: 6px !important;  /* Balanced center channel layout gutter spacing */
        padding-right: 6px !important;
        margin-bottom: 12px !important; /* Visual vertical breathing space between rows */
        box-sizing: border-box !important;
    }

    /* 3. Section Headings Rule Protection (Prevents section headers from snapping into half-width) */
    div#related-products.row > div:first-child,
    div#related-products.row > .col-12 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        display: block !important;
        padding-left: 6px !important; /* Aligns section titles perfectly over the left column cards */
    }

    /* 4. Unified Card Aesthetic Polishing */
    .row.products-loop .product-inner,
    .products-listing .product-item,
    .product-card,
    div#related-products .product-card,
    div#related-products .product-inner {
        height: 100% !important; /* Forces layout cards to maintain crisp uniform heights */
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        background: #ffffff !important;
        border: 1px solid #f1f5f9 !important; 
        border-radius: 6px !important;
        padding: 8px !important;
    }

    /* 5. Fluid High-Performance Hardware Image Scale Adjustments */
    .row.products-loop .product-thumbnail img,
    .products-listing .product-item img,
    .product-card img,
    div#related-products .product-img-action-wrap img,
    div#related-products img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important; /* Locks all catalog thumbnails to clean 600x600 layout squares */
        object-fit: cover !important;
    }
}

/* ==========================================================================
   GLOBAL VISIBILITY LAYOUT CLEANUP MODIFIERS
   ========================================================================== */
/* Completely removes structural layout noise rows without messing up active product loops */
div.product-detail > div.row.mt-60:not([id]) {
    display: none !important;
}


/* ==========================================================================
   ORIADELOTS MOBILE 2-COLUMN FEATURE HIGHLIGHTS GRID FORCE (EXACT FIX)
   ========================================================================== */
@media (max-width: 767px) {
    
    /* 1. Target the exact feature layout container nested inside ck-content */
    .ck-content .section-padding-60 .container > .row,
    .ck-content div:has(> div > .banner-left-icon) {
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        width: 100% !important;
        margin-left: -6px !important;  /* Balances clean horizontal borders */
        margin-right: -6px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* 2. Break down the 4 columns into clean, symmetric 50% grid items */
    .ck-content .section-padding-60 .container > .row > [class*="col-"],
    .ck-content div:has(> div > .banner-left-icon) > [class*="col-"] {
        display: inline-block !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        padding-left: 6px !important;  /* Uniform middle gutter separation */
        padding-right: 6px !important;
        margin-bottom: 12px !important; /* Visual spacing between rows */
        box-sizing: border-box !important;
    }

    /* 3. Re-orient the internal card container (.banner-left-icon) to a stacked tile */
    .ck-content .banner-left-icon.style-2 {
        height: 100% !important;        /* Keeps all 4 cards at identical grid heights */
        display: flex !important;
        flex-direction: column !important; /* Changes left-to-right into top-to-bottom */
        align-items: center !important;    /* Centers icons horizontally */
        text-align: center !important;     /* Centers headings and description copy */
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important; /* Clean light frame look matching your table lines */
        border-radius: 8px !important;
        padding: 16px 10px !important;
        box-sizing: border-box !important;
    }

    /* 4. Center your custom system icon images and reset inline desktop spacing margins */
    .ck-content .banner-left-icon.style-2 .banner-icon {
        margin-right: 0 !important;      /* Clears desktop right-push spacing */
        margin-bottom: 12px !important;  /* Distinct separation between icon and title text */
    }

    .ck-content .banner-left-icon.style-2 .banner-icon img {
        max-width: 45px !important;      /* Keeps branding graphics matching perfectly */
        height: auto !important;
    }

    /* 5. Center align the description container block text elements */
    .ck-content .banner-left-icon.style-2 .banner-content {
        padding-left: 0 !important;
        text-align: center !important;
    }
}



/* ==========================================================================
   CUSTOM SOCIAL ICONS OVERRIDE (TIKTOK & X)
   ========================================================================== */

/* --- 1. TIKTOK OVERRIDE (Forcing LinkedIn class to TikTok) --- */

/* Parent Container Background & Border */
.mobile-social-icon a[title="Linkedin"] {
    background-color: #010101 !important; /* TikTok Dark Base */
    border-color: #010101 !important;
}

/* Subtle TikTok neon cyan/pink hover glow */
.mobile-social-icon a[title="Linkedin"]:hover {
    background-color: #fe2c55 !important; /* TikTok Pink */
    border-color: none !important;      /* TikTok Cyan */
}

/* Wipe out old LinkedIn font glyph and insert white TikTok SVG */
.mobile-social-icon a[title="Linkedin"] i.fab.fa-linkedin {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23ffffff'%3E%3Cpath d='M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z'/%3E%3C/svg%3E") !important;
    display: inline-block !important;
    width: 16px !important;   /* Matches standard icon sizing */
    height: 16px !important;
    vertical-align: middle !important;
}


/* --- 2. X OVERRIDE (Forcing Twitter class to X) --- */

/* Parent Container Background & Border */
.mobile-social-icon a[title="Twitter"] {
    background-color: #000000 !important; /* Sleek Black X Base */
    border-color: #111111 !important;
}

/* Wipe out old Twitter bird glyph and insert white X SVG */
.mobile-social-icon a[title="Twitter"] i.fab.fa-twitter {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23ffffff'%3E%3Cpath d='M389.2 48h70.6L305.6 224.2 487 464H345.3L234.7 319.2 124 464H53.6l165.1-188.8L32 48h145.1l111 145.2L421.4 48h70.6zm-24.8 373.8h-39.1L151.1 88h41.3l172.1 333.8z'/%3E%3C/svg%3E") !important;
    display: inline-block !important;
    width: 16px !important;   /* Matches standard icon sizing */
    height: 16px !important;
    vertical-align: middle !important;
}


/* Remove the "You may also like" row entirely without touching the grid row */
div.product-detail > div.row.mt-60:not([id]) {
    display: none !important;
}

/* ==========================================================================
   FIX LIST INDENTATION & SCREEN CLIPPING
   ========================================================================== */

/* 1. Target ordered lists (numbers) and unordered lists (bullets) */
.ck-content ol, 
.ck-content ul,
article ol, 
article ul,
.page-content ol,
.page-content ul {
    padding-left: 24px !important; /* Pushes numbers safely away from the screen edge */
    margin-left: 0 !important;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
    list-style-position: outside !important; /* Keeps multi-line text perfectly aligned under itself */
}

/* 2. Add slight breathing space between each list item for better readability */
.ck-content ol li, 
.ck-content ul li,
article ol li, 
article ul li,
.page-content ol li,
.page-content ul li {
    margin-bottom: 8px !important;
    padding-left: 4px !important;
    line-height: 1.6 !important; /* Matches your paragraph styling */
}

/* ==========================================================================
   ORIADELOTS HIGH-CONTRAST SEPARATED COLUMN TABLE STYLING (ALL DEVICES)
   ========================================================================== */

/* 1. Global Container Wrapper with responsive scroll mechanics */
figure.table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    margin: 25px 0 !important;
    background: #ffffff !important;
    border-radius: 4px !important;
    -webkit-overflow-scrolling: touch !important;
}

/* 2. Base Grid Mechanics */
figure.table table {
    width: 100% !important; 
    max-width: 100% !important;
    display: table !important;
    table-layout: auto !important; /* CHANGED FROM FIXED TO AUTO: Allows columns to auto-size based on content text */
    border-collapse: collapse !important; 
    border: 1px solid #cbd5e1 !important; 
}

figure.table tr {
    display: table-row !important;
}

/* Base Proportional Column Allocations (Fluid, not forced rigid) */
figure.table th:nth-child(1), figure.table td:nth-child(1) { min-width: 180px !important; }
figure.table th:nth-child(2), figure.table td:nth-child(2) { min-width: 250px !important; }
figure.table th:nth-child(3), figure.table td:nth-child(3) { min-width: 120px !important; }

/* 3. Deep Slate Black Header Block */
figure.table th {
    font-weight: 700 !important;
    color: #ffffff !important; 
    text-align: left !important;
    background-color: #111827 !important; 
    padding: 18px 16px !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important; 
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
}

figure.table th:last-child {
    border-right: none !important; 
}

/* 4. Structured Data Cells with Vertical Separator Lines */
figure.table td {
    display: table-cell !important;
    vertical-align: middle !important;
    text-align: left !important;
    white-space: normal !important; /* Forces text to drop down to a new line gracefully */
    padding: 16px 16px !important; 
    font-size: 14px !important;
    color: #1e293b !important;
    background-color: #ffffff !important;
    word-break: normal !important;  /* Prevents words from breaking awkwardly mid-letter */
    
    border-bottom: 1px solid #e2e8f0 !important; 
    border-right: 1px solid #e2e8f0 !important;  
    
    border-top: none !important;
    border-left: none !important;
}

figure.table td:last-child {
    border-right: none !important; 
}

/* Subtle Alternate Row Tint */
figure.table table tbody tr:nth-child(even) td {
    background-color: #f8fafc !important; 
}

/* ==========================================================================
   TABLE MOBILE SLIDER OPTIMIZATION SCREEN RESTRAINTS
   ========================================================================== */
@media (max-width: 767px) {
    /* Freeze layout width on phones to force a safe swipe-scroll container */
    figure.table table {
        width: 650px !important; 
        min-width: 650px !important;
        max-width: none !important;
    }
    
    figure.table td {
        white-space: normal !important; /* FIXED: Overrides the nowrap error to keep text fully visible */
        padding: 12px 12px !important;  /* Compact mobile padding */
        font-size: 13px !important;
    }
}