/* ============================================================
   CST PDP — Amazon-style Product Details Accordion
   File: cartridge/static/default/css/product/cst-desc-details.css
   ============================================================ */

/* ── Wrapper ── */
.cst-pd {
    margin-top: 20px !important;
    border-top: 2px solid #e7e7e7 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ── "Product details" static heading ── */
.cst-pd__heading {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #0f1111 !important;
    padding: 18px 0 14px 0 !important;
}

/* ── Each accordion section ── */
.cst-pd__section {
    border-top: 1px solid #e7e7e7 !important;
}

/* ── Toggle row ── */
.cst-pd__toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    background: none !important;
    border: none !important;
    padding: 16px 0 !important;
    cursor: pointer !important;
    text-align: left !important;
    outline: none !important;
    gap: 12px !important;
}

.cst-pd__toggle:focus-visible {
    outline: 2px solid #007185 !important;
    outline-offset: 2px !important;
    border-radius: 2px !important;
}

.cst-pd__toggle-label {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #0f1111 !important;
    flex: 1 !important;
}

/* Chevron rotates when open */
.cst-pd__chevron {
    flex-shrink: 0 !important;
    color: #0f1111 !important;
    transition: transform 0.22s ease !important;
}

.cst-pd__toggle[aria-expanded="true"] .cst-pd__chevron {
    transform: rotate(180deg) !important;
}

/* ── Body: hidden / visible ── */
.cst-pd__body {
    display: none !important;
}

.cst-pd__body--open {
    display: block !important;
}

/* ── Inner content padding ── */
.cst-pd__inner {
    padding-bottom: 16px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ================================================================
   ABOUT THIS ITEM — JS rebuilds clean output into .cst-clean
   Hide all raw injected content, show only the rebuilt .cst-clean
   ================================================================ */
.cst-pd__inner[data-cst-cleanup="about"] > *:not(.cst-clean) {
    display: none !important;
}

.cst-clean {
    display: block !important;
}

/* Sub-section label */
.cst-clean__label {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f1111 !important;
    margin: 20px 0 6px 0 !important;
    display: block !important;
    padding-bottom: 6px !important;
    border-bottom: 2px solid #e7e7e7 !important;
}

.cst-clean__label:first-child {
    margin-top: 4px !important;
}

/* Bullet list */
.cst-clean__bullets {
    list-style: disc !important;
    padding-left: 20px !important;
    margin: 0 0 10px 0 !important;
}

.cst-clean__bullets li {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #0f1111 !important;
    margin-bottom: 6px !important;
}

/* Feature pills (from button nav) */
.cst-clean__features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.cst-clean__features li {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #0f1111 !important;
    background: #f5f5f5 !important;
    border: 1px solid #e7e7e7 !important;
    border-radius: 4px !important;
    padding: 5px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.cst-clean__features li span.feat-num {
    font-weight: 700 !important;
    color: #c7511f !important;
    font-size: 13px !important;
}

/* Key-value rows (spec table) */
.cst-clean__rows {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
}

.cst-clean__rows li {
    display: flex !important;
    align-items: baseline !important;
    padding: 9px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #0f1111 !important;
    margin-bottom: 0 !important;
}

.cst-clean__rows li:last-child {
    border-bottom: none !important;
}

.cst-clean__rows li strong {
    display: inline-block !important;
    min-width: 220px !important;
    flex-shrink: 0 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: #0f1111 !important;
    padding-right: 16px !important;
}

/* Comparison table */
.cst-clean__compare-wrap {
    overflow-x: auto !important;
    margin-bottom: 10px !important;
    border: 1px solid #e7e7e7 !important;
    border-radius: 4px !important;
}

.cst-clean__compare {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #0f1111 !important;
    display: table !important;
}

.cst-clean__compare th,
.cst-clean__compare td {
    padding: 10px 12px !important;
    border: 1px solid #e7e7e7 !important;
    text-align: left !important;
    vertical-align: top !important;
    font-size: 14px !important;
    color: #0f1111 !important;
    min-width: 100px !important;
    display: table-cell !important;
}

.cst-clean__compare th,
.cst-clean__compare tr:first-child td {
    background: #f5f5f5 !important;
    font-weight: 700 !important;
}

.cst-clean__compare td.cst-this,
.cst-clean__compare th.cst-this {
    background: #fff8f0 !important;
    border-top: 2px solid #c7511f !important;
}

/* Plain text */
.cst-clean__text {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #0f1111 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* ================================================================
   ADDITIONAL INFORMATION — original two-column design, untouched
   ================================================================ */
.cst-pd__inner--table {
    /* keep raw HTML hidden except ul/li/strong which render naturally */
}

/* Hide all headings and junk tags */
.cst-pd__inner--table h1,
.cst-pd__inner--table h2,
.cst-pd__inner--table h3,
.cst-pd__inner--table h4,
.cst-pd__inner--table h5,
.cst-pd__inner--table h6,
.cst-pd__inner--table table,
.cst-pd__inner--table button,
.cst-pd__inner--table link,
.cst-pd__inner--table img {
    display: none !important;
}

/* The <ul> list renders as two-column rows */
.cst-pd__inner--table ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.cst-pd__inner--table ul li {
    display: flex !important;
    align-items: baseline !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #e7e7e7 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #0f1111 !important;
    margin-bottom: 0 !important;
    background: none !important;
}

.cst-pd__inner--table ul li:last-child {
    border-bottom: none !important;
}

/* Label column — bold, fixed width */
.cst-pd__inner--table ul li strong {
    display: inline-block !important;
    min-width: 220px !important;
    flex-shrink: 0 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: #0f1111 !important;
    padding-right: 16px !important;
}

/* ── Mobile ── */
@media (max-width: 575px) {
    .cst-clean__rows li,
    .cst-pd__inner--table ul li {
        flex-direction: column !important;
        gap: 2px !important;
        padding: 10px 0 !important;
    }

    .cst-clean__rows li strong,
    .cst-pd__inner--table ul li strong {
        min-width: unset !important;
    }

    .cst-clean__bullets li,
    .cst-clean__text {
        font-size: 14px !important;
    }

    .cst-clean__compare th,
    .cst-clean__compare td {
        font-size: 13px !important;
        padding: 8px 8px !important;
        min-width: 80px !important;
    }
}