/* ============================================================
   CST PDP Layout — Amazon-style 3-column + mobile
   File: cartridge/static/default/css/product/cst-pdp-layout.css
   ============================================================ */

/* ── Page wrapper ── */
.cst-pdp {
    max-width: 1500px !important;
    width: 95% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 16px !important;
    /* padding-bottom: 48px !important; */
    background: #fff !important;

    /* Reset anything product-detail was injecting */
    box-sizing: border-box !important;
    float: none !important;
    overflow: visible !important;
}
.cst-pdp.container {
    max-width: 1500px !important;
    width: 95% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* ── Mobile title: hidden on desktop ── */
.cst-pdp__title--mobile {
    display: none !important;
}

/* ── Desktop title: always visible in col-info ── */
.cst-pdp__title--desktop {
    display: block !important;
}

/* ── Mobile purchase block: hidden on desktop ── */
.cst-pdp__mobile-purchase {
    display: none !important;
}

/* ── Breadcrumb ── */
.cst-pdp__breadcrumb {
    margin-bottom: 10px !important;
}

.cst-pdp__breadcrumb .breadcrumb {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    font-size: 12px !important;
    flex-wrap: wrap !important;
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
}

.cst-pdp__breadcrumb .breadcrumb-item {
    font-size: 12px !important;
    color: #565959 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.cst-pdp__breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "›" !important;
    color: #888 !important;
    font-size: 14px !important;
    padding: 0 4px !important;
    font-weight: 400 !important;
}

.cst-pdp__breadcrumb .breadcrumb-item a {
    color: #565959 !important;
    text-decoration: none !important;
    font-size: 12px !important;
    transition: color 0.15s !important;
}

.cst-pdp__breadcrumb .breadcrumb-item a:hover {
    color: #c45500 !important;
    text-decoration: underline !important;
}

.cst-pdp__breadcrumb .breadcrumb-item.active {
    color: #565959 !important;
    font-weight: 400 !important;
}

/* ── 3-column grid ── */
.cst-pdp__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.8fr) 280px !important;
    gap: 20px !important;
    align-items: start !important;
    width: 100% !important;
    margin-top: 12px !important;
}
.cst-pdp__recommendations-set,
.cst-pdp__recommendations {
    /* margin-top: 40px !important;
    padding-top: 24px !important;
    border-top: 1px solid #e3e6e6 !important; */
}

.cst-pdp__recommendations-set + .cst-pdp__recommendations {
    margin-top: 32px !important;
    border-top: none !important;
}

/* ── COL 1: Media ── */
.cst-pdp__col--media {
    position: sticky !important;
    top: 16px !important;
    min-width: 0 !important;
}

.cst-pdp__col--media .primary-images {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    flex: none !important;
}

/* ── COL 2: Info ── */
.cst-pdp__col--info {
    min-width: 0 !important;
}

.cst-pdp__col--info .row {
    /* padding-left: 10px !important; */
    padding-right: 10px !important;
}

/* .cst-pdp__col--info .row [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
} */

/* Product title */
.cst-pdp__title {
    font-size: 1.45rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    margin-bottom: 12px !important;
    color: #0f1111 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ── Brand link ── */
.cst-pdp__brand {
    font-size: 13.5px !important;
    margin-bottom: 4px !important;
    font-weight: 500 !important;
    color: #565959 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
}

.cst-pdp__brand a {
    color: #e50f11 !important;
    text-decoration: none !important;
    font-size: 13.5px !important;
}

.cst-pdp__brand a:hover {
    color: #c45500 !important;
    text-decoration: underline !important;
}

.cst-pdp__brand-sep {
    color: #ccc !important;
    font-size: 12px !important;
}
.prices {
    padding-bottom: 0 !important;
    padding-top: 6px !important;
}
/* .cst-pdp__rating svg,
.cst-pdp__rating i,
.cst-pdp__rating .star,
.cst-pdp__rating [class*="star"] {
    font-size: 16px !important;
    vertical-align: middle !important;
} */
/* ── Ratings row ── */
.cst-pdp__rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cst-pdp__stars {
    display: flex !important;
    align-items: center !important;
    gap: 1px !important;
}

.cst-pdp__stars svg {
    width: 16px !important;
    height: 16px !important;
    fill: #ffa41c !important;
}

.cst-pdp__stars svg.star--empty {
    fill: #ddd !important;
}

.cst-pdp__rating-score {
    font-size: 14px !important;
    color: #ff6201 !important;
    font-weight: 600 !important;
    padding-right: 6px !important;
    text-decoration: none !important;
}

.cst-pdp__rating-score:hover {
    text-decoration: underline !important;
    color: #c45500 !important;
}

.cst-pdp__rating-sep {
    color: #ccc !important;
    font-size: 12px !important;
}

.cst-pdp__rating-count {
    font-size: 13.5px !important;
    color: #007185 !important;
    text-decoration: none !important;
}

.cst-pdp__rating-count:hover {
    text-decoration: underline !important;
    color: #c45500 !important;
}

/* Price in col 2 */
.cst-pdp__price.prices,
.cst-pdp__col--info .cst-pdp__price {
    font-size: 1.6rem !important;
    font-weight: 400 !important;
    color: #0f1111 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 8px !important;
    /* padding-bottom: 8px !important; */
    /* border-top: 1px solid #e3e6e6 !important; */
    border-bottom: none !important;
    display: block !important;
    text-align: left !important;
}

/* Remove any nested border/margin the component may add */
.cst-pdp__price .prices,
.cst-pdp__price .price {
    border-bottom: none !important;
    border-top: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ── Pay-in-4 row (optional, only if your payment provider supports it) ── */
.cst-pdp__payin {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 13.5px !important;
    color: #0f1111 !important;
    flex-wrap: wrap !important;
    margin-top: 4px !important;
}

.cst-pdp__payin strong {
    color: #0f1111 !important;
    font-weight: 600 !important;
}

.cst-pdp__payin-badge {
    display: inline-flex !important;
    align-items: center !important;
    background: #232f3e !important;
    color: #ff9900 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 3px !important;
    letter-spacing: 0.04em !important;
    line-height: 1.6 !important;
}

.cst-pdp__payin a {
    color: #007185 !important;
    font-size: 13px !important;
    text-decoration: none !important;
}

.cst-pdp__payin a:hover {
    text-decoration: underline !important;
    color: #c45500 !important;
}

/* ── Trust icons row ── */
.cst-pdp__trust {
    display: flex !important;
    gap: 24px !important;
    margin: 6px 0 0 0 !important;
    padding-top: 8px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #e3e6e6 !important;
    display: block !important;
    text-align: left !important;
}

/* Promotions */
.cst-pdp__promotions {
    font-size: 14px !important;
}

/* Attributes */
.cst-pdp__attributes {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 16px !important;
}

.cst-pdp__attributes .row [class*="col-"] {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
}

/* ── Inline spec table ── */
.cst-spec-table {
    border: 1px solid #e3e6e6 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
}

.cst-spec-table__row {
    display: flex !important;
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    border-bottom: 1px solid #f0f2f2 !important;
}

.cst-spec-table__row:last-child {
    border-bottom: none !important;
}

.cst-spec-table__row:nth-child(even) {
    background: #f7f8f8 !important;
}

.cst-spec-table__label {
    font-weight: 600 !important;
    color: #555 !important;
    min-width: 160px !important;
    flex-shrink: 0 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

.cst-spec-table__value {
    color: #0f1111 !important;
    font-size: 13.5px !important;
}

/* ── COL 3: Cart box ── */
.cst-pdp__col--cart {
    position: sticky !important;
    top: 16px !important;
    min-width: 0 !important;
}

.cst-pdp__cart-box {
    border: 1px solid #d5d9d9 !important;
    border-radius: 10px !important;
    padding: 10px 20px 20px !important;
    background: #fff !important;
    width: 100% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.cst-pdp__cart-price .prices,
.cst-pdp__cart-price {
    font-size: 1.55rem !important;
    font-weight: 700 !important;
    color: #0f1111 !important;
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
    display: block !important;
    border-bottom: 1px solid #e3e6e6 !important;
}

.cst-pdp__availability {
    margin-bottom: 10px !important;
    font-size: 14px !important;
}

.cst-pdp__availability .availability-msg {
    color: #007600 !important;
    font-weight: 600 !important;
}

.cst-pdp__quantity {
    margin-bottom: 14px !important;
}

.cst-pdp__quantity label {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
    display: block !important;
    color: #0f1111 !important;
}

.cst-pdp__quantity select {
    width: 100% !important;
    border: 1px solid #888c8c !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    background: #fff !important;
    cursor: pointer !important;
}

/* Add to Cart RED */
.cst-pdp__addtocart .add-to-cart,
.cst-pdp__addtocart .btn-primary {
    width: 100% !important;
    padding: 13px !important;
    font-size: 15px !important;
    border-radius: 24px !important;
    background-color: #dc2626 !important;
    border: 1px solid #b91c1c !important;
    color: #fff !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    transition:
        background-color 0.15s ease,
        box-shadow 0.15s ease !important;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3) !important;
    letter-spacing: 0.01em !important;
}

.cst-pdp__addtocart .add-to-cart:hover,
.cst-pdp__addtocart .btn-primary:hover {
    background-color: #b91c1c !important;
    color: #fff !important;
}

/* View Cart */
.cst-pdp__addtocart .add-to-cart-and-view,
.cst-pdp__addtocart .cst-view-cart-btn {
    width: 100% !important;
    padding: 13px !important;
    font-size: 15px !important;
    border-radius: 24px !important;
    background-color: #fff !important;
    border: 2px solid #ffa41c !important;
    color: #0f1111 !important;
    font-weight: 600 !important;
    margin-top: 8px !important;
    cursor: pointer !important;
    letter-spacing: 0.01em !important;
}

/* Social share */
.cst-pdp__social {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid #e3e6e6 !important;
}

/* Service items */
.cst-pdp__service-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 9px 0 !important;
    border-bottom: 1px solid #f0f2f2 !important;
}

.cst-pdp__service-item:last-of-type {
    border-bottom: none !important;
}

.cst-pdp__service-icon {
    flex-shrink: 0 !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #dc2626 !important;
}

.cst-pdp__service-icon svg {
    width: 18px !important;
    height: 18px !important;
}

.cst-pdp__service-text {
    flex: 1 !important;
}

.cst-pdp__service-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0f1111 !important;
    display: block !important;
    margin-bottom: 2px !important;
}

.cst-pdp__service-sub {
    font-size: 12px !important;
    color: #666 !important;
    display: block !important;
    line-height: 1.4 !important;
}

/* Product options */
.cst-product-options {
    margin: 0 !important;
    padding: 0 !important;
}

/* Delivery widget */
.cst-pdp__delivery {
    display: flex !important;
    align-items: flex-start !important;
    gap: 9px !important;
    padding-top: 14px !important;
    line-height: 1.5 !important;
}

.cst-pdp__delivery-icon {
    flex-shrink: 0 !important;
    color: #dc2626 !important;
    margin-top: 2px !important;
}

.cst-pdp__delivery-text {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.cst-pdp__delivery-label {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #0f1111 !important;
    display: block !important;
}

.cst-pdp__delivery-location {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #dc2626 !important;
    display: block !important;
}

.cst-pdp__delivery-sub {
    font-size: 12px !important;
    color: #666 !important;
    display: block !important;
    line-height: 1.4 !important;
}

a.cst-pdp__delivery-link {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #dc2626 !important;
    text-decoration: none !important;
}

a.cst-pdp__delivery-link:hover {
    color: #991b1b !important;
}

/* ── Tablet (≤ 991px) ── */
@media (max-width: 991px) {
    .cst-pdp__grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
    }

    .cst-pdp__col--media {
        grid-column: 1 !important;
        grid-row: 1 !important;
        position: static !important;
    }

    .cst-pdp__col--info {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    .cst-pdp__col--cart {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        position: static !important;
    }

    .cst-pdp__cart-box {
        max-width: 440px !important;
    }

    .cst-spec-table__label {
        min-width: 130px !important;
    }
}

/* ════════════════════════════════════════════════════════
   MOBILE (≤ 767px) — Amazon-style single column layout
   
   Visual order:
   1.  Title          (standalone h1 above grid)
   2.  Gallery        (col--media, order 1)
   3.  Price          (inside col--info)
   4.  Promotions
   5.  Variation attributes
   6.  ─── MOBILE PURCHASE BLOCK ───
       • Availability / dispatch message
       • Quantity   — full-width bordered dropdown
       • Add to Cart — full-width RED pill
       • View Cart  — full-width outlined pill (if shown)
       • Service table (Shipping / Returns / Payment)
       • Social icons
   7.  Spec table
   8.  Description accordion
   
   Cart col (col--cart) = HIDDEN
════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .cst-pdp.container {
        width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* ── Show mobile title, hide desktop title ── */
    .cst-pdp__title--mobile {
        display: block !important;
        font-size: 1.05rem !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        color: #0f1111 !important;
        margin: 8px 0 10px !important;
        padding: 0 !important;
    }

    .cst-pdp__title--desktop {
        display: none !important;
    }

    /* ── Single-column flex grid ── */
    .cst-pdp__grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* Gallery first */
    .cst-pdp__col--media {
        order: 1 !important;
        position: static !important;
        width: 100% !important;
    }

    /* Hide breadcrumb inside gallery on mobile (already shown via standalone if needed) */
    .cst-pdp__col--media .cst-pdp__breadcrumb {
        display: none !important;
    }

    /* Info col second */
    .cst-pdp__col--info {
        order: 2 !important;
        width: 100% !important;
    }

    /* Cart col hidden on mobile */
    .cst-pdp__col--cart {
        display: none !important;
    }

    /* ── Gallery ── */
    .cst-gallery {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .cst-gallery__main {
        width: 100% !important;
        order: 1 !important;
    }

    .cst-gallery__main-img {
        height: 320px !important;
        width: 100% !important;
        object-fit: contain !important;
    }

    .cst-gallery__thumbs {
        flex-direction: row !important;
        width: 100% !important;
        order: 2 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 6px !important;
        padding-bottom: 4px !important;
        scrollbar-width: none !important;
    }

    .cst-gallery__thumbs::-webkit-scrollbar {
        display: none !important;
    }

    .cst-gallery__thumb {
        width: 56px !important;
        height: 56px !important;
        flex-shrink: 0 !important;
    }

    .cst-gallery__zoom-panel {
        display: none !important;
    }

    /* ── Price ── */
    .cst-pdp__price.prices,
    .cst-pdp__col--info .cst-pdp__price {
        font-size: 1.5rem !important;
        margin-top: 12px !important;
    }

    /* ── Spec table ── */
    .cst-spec-table__row {
        flex-direction: column !important;
        gap: 3px !important;
    }

    .cst-spec-table__label {
        min-width: unset !important;
    }

    /* ════════════════════════════════════════════
       MOBILE PURCHASE BLOCK — shown on mobile
    ════════════════════════════════════════════ */
    .cst-pdp__mobile-purchase {
        display: block !important;
        /* margin-top: 8px !important; */
        /* padding-top: 16px !important; */
        /* padding-bottom: 8px !important; */
        /* padding-left: 10px !important;
        padding-right: 10px !important; */
        border-top: 1px solid #e3e6e6 !important;
        /* margin-bottom: 20px !important; */
    }

    /* Availability */
    .cst-mob__availability {
        margin-bottom: 14px !important;
    }

    /* Let SFCC's own availability classes control color (green/red) */
    .cst-mob__availability .availability-msg {
        /* font-size: 14px !important; */
        font-weight: 600 !important;
    }

    /* ── Quantity — Amazon inline style "Quantity: 1  ▾" ── */
    .cst-mob__qty {
        width: 100% !important;
        position: relative !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    /* Hide the standalone label — text shown inside select via JS below */
    .cst-mob__qty label {
        display: none !important;
    }

    /* Remove ::before label since it's now inside the dropdown */
    .cst-mob__qty::before {
        display: none !important;
    }

    /* Wrapper to overlay "Quantity:" prefix text */
    .cst-mob__qty .quantity,
    .cst-mob__qty .form-group {
        position: relative !important;
        width: 100% !important;
    }

    /* Full-width select styled like Amazon */
    .cst-mob__qty select,
    .cst-mob__qty .quantity-select {
        /* width: 100% !important;
    font-size: 15px !important;
    color: #0f1111 !important;

    border: 1px solid #888c8c !important; */

        font-size: 14px !important;
        border-radius: 12px !important; /* ← match button pill shape */
        height: 40px !important;
        padding-left: 20px !important;
        /* background: #f0f2f2 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    display: block !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
    font-weight: 600 !important;
    line-height: 1.4 !important; */
    }
    .cst-mob__qty select:focus,
    .cst-mob__qty .quantity-select:focus {
        border-color: #8f3e33 !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(0, 113, 133, 0.15) !important;
    }

    /* Availability — restore original green/red (not forced red) */
    .cst-mob__availability .availability-msg {
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    /* In Stock = green */
    .cst-mob__availability .availability-msg.in-stock,
    .cst-mob__availability .availability-msg li.in-stock,
    .cst-mob__availability li {
        color: #007600 !important;
        font-weight: 600 !important;
        list-style: none !important;
    }

    /* Out of Stock = red */
    .cst-mob__availability .availability-msg.out-of-stock,
    .cst-mob__availability .availability-msg li.out-of-stock {
        color: #dc2626 !important;
    }

    /* ── Add to Cart — full width RED pill ── */
    .cst-mob__atc {
        margin-bottom: 0 !important;
        width: 100% !important;
        /* border-bottom: #000000 1px solid !important; */
    }

    .cst-mob__atc .add-to-cart,
    .cst-mob__atc .btn-primary {
        width: 100% !important;
        display: block !important;
        padding: 12px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        border-radius: 30px !important;
        background-color: #dc2626 !important;
        border: none !important;
        color: #fff !important;
        text-align: center !important;
        letter-spacing: 0.01em !important;
        box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3) !important;
        margin-bottom: 10px !important;
        margin-top: 20px !important;
        box-sizing: border-box !important;
        transition: background-color 0.15s !important;
        line-height: 1.4 !important;
    }

    .cst-mob__atc .add-to-cart:hover,
    .cst-mob__atc .btn-primary:hover {
        background-color: #b91c1c !important;
        color: #fff !important;
    }

    /* View Cart / Buy Now outlined button */
    .cst-mob__atc .add-to-cart-and-view,
    .cst-mob__atc .cst-view-cart-btn {
        width: 100% !important;
        display: block !important;
        padding: 12px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        border-radius: 30px !important;
        background-color: #fff !important;
        border: 2px solid #ffa41c !important;
        color: #0f1111 !important;
        text-align: center !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
        line-height: 1.4 !important;
    }

    .cst-mob__atc .add-to-cart-and-view:hover,
    .cst-mob__atc .cst-view-cart-btn:hover {
        background-color: #fff8ee !important;
    }
}

.cst-availability {
    overflow: hidden !important;
    width: 100% !important;
}

.cst-availability .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

/* Hide the "Availability:" label col */
.cst-availability .col-4 {
    display: none !important;
}

/* Full-width message col */
.cst-availability .col-8 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}

.cst-availability .availability-msg {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.cst-availability .availability-msg li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* In-stock */
.cst-availability .in-stock {
    color: #007600 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* Out-of-stock */
.cst-availability .out-of-stock {
    color: #dc2626 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* Pre-order / backorder */
.cst-availability .preorder,
.cst-availability .backorder {
    color: #c45500 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* "Select styles" fallback */
.cst-availability .availability-msg div {
    /* color: #565959 !important; */
    font-size: 13.5px !important;
    padding-right: 10px 0 !important;
}

/* Mobile-specific spacing */
.cst-pdp__mobile-purchase .cst-availability {
    margin-bottom: 14px !important;
    /* margin-top: 10px !important; */
}

/* Desktop cart box spacing */
.cst-pdp__cart-box .cst-availability {
    margin-bottom: 10px !important;
    margin-top: 0 !important;
}
.cst-availability .availability-msg li,
.cst-availability .availability-msg div {
    font-size: 16px !important;
    font-weight: 700 !important;
}
.cst-availability .availability-msg .in-stock,
.cst-availability .availability-msg li.in-stock {
    color: #007600 !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
}
.cst-availability .availability-msg .not-available,
.cst-availability .availability-msg li.not-available,
.cst-availability .availability-msg .out-of-stock,
.cst-availability .availability-msg li.out-of-stock {
    color: #dc2626 !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
}

/* Preorder / Backorder — amber */
.cst-availability .availability-msg .preorder,
.cst-availability .availability-msg .backorder {
    color: #c45500 !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
}

@media (max-width: 767px) {
    /* ══ Root container ══ */
    .cst-pdp {
        width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-top: 8px !important;
        padding-bottom: 32px !important;
    }
}
/* ══ Shop with Confidence — mobile only ══ */
.cst-mob__confidence {
    display: none !important;
}

@media (max-width: 767px) {
    .cst-mob__confidence {
        display: block !important;
        /* margin-top: 16px !important; */
        padding-top: 14px !important;
        padding-bottom: 4px !important;
        border-top: 1px solid #e3e6e6 !important;
        /* border-bottom: 1px solid #e3e6e6 !important; */
    }

    .cst-mob__confidence-title {
        font-size: 18px !important;
        font-weight: 700 !important;
        padding-bottom: 14px !important;
        color: #0f1111 !important;
    }

    .cst-mob__confidence-items {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px 8px !important;
        padding-bottom: 12px !important;
    }

    .cst-mob__confidence-item {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #e50f11 !important;
        text-decoration: none !important;
        white-space: normal !important;
        line-height: 1.3 !important;
    }

    .cst-mob__confidence-item:hover {
        color: #c70000 !important;
        text-decoration: underline !important;
    }

    .cst-mob__confidence-icon {
        flex-shrink: 0 !important;
    }

    .cst-mob__confidence-icon svg {
        color: #000000;
        width: 18px !important;
        height: 18px !important;
    }
}