/* =========================================
PRODUCT PAGE SLIDER
========================================= */

.cs-banner-slider {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
}

/* Main image */
.cs-slider .slick-slide {
    padding: 8px;
}

.cs-slider .slick-slide img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
}

/* Fix arrows */
.cs-banner-slider .slick-prev,
.cs-banner-slider .slick-next {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    border: 1px solid #e5e5e5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    z-index: 10;
    transition: all 0.3s ease;
}

.cs-banner-slider .slick-prev:hover,
.cs-banner-slider .slick-next:hover {
    background: var(--secondary);
    border-color: var(--secondary);
}

/* Remove text issue */
.cs-banner-slider .slick-prev::before,
.cs-banner-slider .slick-next::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 16px;
    color: #333;
    opacity: 1;
}

/* Left arrow */
.cs-banner-slider .slick-prev::before {
    content: "\f104";
}

/* Right arrow */
.cs-banner-slider .slick-next::before {
    content: "\f105";
}

.cs-banner-slider .slick-prev {
    left: 12px;
}

.cs-banner-slider .slick-next {
    right: 12px;
}

/* Hover icon color */
.cs-banner-slider .slick-prev:hover::before,
.cs-banner-slider .slick-next:hover::before {
    color: #fff;
}

/* Thumbnails */
.slider-thumbnails {
    margin-top: 14px;
}

.slider-thumbnails .slick-slide {
    padding: 4px;
    opacity: 0.6;
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider-thumbnails .slick-current {
    opacity: 1;
}

.slider-thumbnails img {
    border-radius: 8px;
    border: 2px solid transparent;
}

.slider-thumbnails .slick-current img {
    border-color: var(--secondary);
}

/* Mobile */
@media (max-width: 767px) {

    .cs-banner-slider .slick-prev,
    .cs-banner-slider .slick-next {
        width: 34px;
        height: 34px;
    }

    .cs-banner-slider .slick-prev {
        left: 8px;
    }

    .cs-banner-slider .slick-next {
        right: 8px;
    }

    .cs-banner-slider .slick-prev::before,
    .cs-banner-slider .slick-next::before {
        font-size: 14px;
    }
}



.product-overview-section { padding: 30px 0; }
.po-card { display: flex; align-items: flex-start; gap: 24px; }
.po-icon {
    width: 90px; height: 90px; border-radius: 50%;
    overflow: hidden; flex-shrink: 0; border: 1px solid #eee;
    display: flex; align-items: center; justify-content: center;
}
.po-icon img { width: 100%; height: 100%; object-fit: cover; }
.po-title { font-size: 22px; font-weight: 600; margin-bottom: 8px; }
.po-desc { color: #444; line-height: 1.6; font-size: 13px; }
@media (max-width: 576px) {
    .po-card { flex-direction: column; align-items: center; text-align: center; }
}


/* ============================================================
   PRODUCT DESCRIPTION (.pdesc-*) — the admin rich-text description block
   Was a bare .normalize-css div hugging the left edge with no heading and no
   bottom rhythm (it ran straight into Features at a Glance). Now: the site's
   centred ghost header + full-width rich text (no card — client preference),
   with the same typography as the category "Read More" copy (.content-text).
   ============================================================ */

.pdesc-section { background: var(--white, #fff); }
.site-section.pdesc-section { padding-top: 26px !important; padding-bottom: 30px !important; }
.pdesc-section .section-header { margin-bottom: 30px; }
.pdesc-section .title-center .title::before {
    left: 50%; right: auto; width: max-content;
    transform: translate(-50%, -50%); text-align: center;
}

/* ── Rich text — full container width ── */
.pdesc-body {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    line-height: 1.75;
    color: var(--Dgray, #666);
    text-align: left;
}
/* Admin descriptions lead with <h3>Product Name</h3> — that's already the page
   H1, so the duplicate is hidden (kept in the DOM for crawlers). Only the
   leading one: any later h3 sub-heading in the copy still shows. */
.pdesc-body > h3:first-child { display: none; }
.pdesc-body > :first-child,
.pdesc-body > h3:first-child + * { margin-top: 0; }

.pdesc-body h2, .pdesc-body h3, .pdesc-body h4 {
    margin: 26px 0 10px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    line-height: 1.35;
    color: var(--steel-blue, #2C3E50);
}
.pdesc-body h2 { font-size: 22px; }
.pdesc-body h3 { font-size: 18px; }
.pdesc-body h4 { font-size: 16px; }

.pdesc-body p { margin: 0 0 14px; }
.pdesc-body p:last-child { margin-bottom: 0; }

/* amber-dot bullets, matching the site's list language */
.pdesc-body ul, .pdesc-body ol { margin: 0 0 16px; padding: 0; }
.pdesc-body ul { list-style: none; }
.pdesc-body ul li {
    position: relative;
    margin: 0 0 8px;
    padding-left: 22px;
}
.pdesc-body ul li::before {
    content: "";
    position: absolute;
    left: 0; top: 10px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--secondary, #E89A0E);
}
.pdesc-body ol { list-style: decimal; padding-left: 22px; }
.pdesc-body ol li { margin: 0 0 8px; }
.pdesc-body li:last-child { margin-bottom: 0; }

.pdesc-body strong, .pdesc-body b { color: var(--steel-blue, #2C3E50); font-weight: 600; }
.pdesc-body a { color: var(--secondary, #E89A0E); text-decoration: underline; }
.pdesc-body a:hover { color: var(--steel-blue, #2C3E50); }
/* Admin rich-text images: the editor writes INLINE sizes (style="width:964px;height:542px")
   which beat normal CSS — on a phone the width got capped to the screen but the height
   didn't, squeezing the picture. !important is the only thing that out-ranks an inline
   style: width stays capped, height follows the image's own proportions. */
.pdesc-body img { max-width: 100% !important; height: auto !important; object-fit: contain; border-radius: 12px; margin: 12px 0; }   /* object-fit: if any other inline limit (e.g. max-height) still forces the box, the picture keeps its proportions inside it */
/* editor wrappers / tables with a fixed inline width must not push past the column */
.pdesc-body figure { max-width: 100% !important; margin: 12px 0; }

.pdesc-body table { width: 100%; max-width: 100% !important; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; }
.pdesc-body th, .pdesc-body td { padding: 10px 12px; border-bottom: 1px solid #f0f1f3; text-align: left; vertical-align: top; }
.pdesc-body th { color: var(--steel-blue, #2C3E50); font-weight: 600; }

/* ── Responsive ── */
@media (max-width: 991px) {
    .site-section.pdesc-section { padding-top: 20px !important; padding-bottom: 24px !important; }
    .pdesc-section .section-header { margin-bottom: 26px; }
}
@media (max-width: 767px) {
    .site-section.pdesc-section { padding-top: 16px !important; padding-bottom: 18px !important; }
    .pdesc-body { font-size: 14.5px; }
    .pdesc-body h2 { font-size: 20px; }
    .pdesc-body h3 { font-size: 17px; }
}
/* phones: a floated editor image leaves only a sliver for the text beside it — stack it */
@media (max-width: 575px) {
    .pdesc-body img { float: none !important; display: block; margin: 12px 0 !important; }
}