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

/* ── Page wrapper ── */
.cst-pdp {
    padding-top: 16px !important;
    background: #fff !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, 1.8fr) minmax(0, 2.2fr) 320px !important;
    gap: 32px !important;
    align-items: start !important;
    width: 100% !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 {
    margin-left: 0 !important;
    margin-right: 0 !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;
}

/* Rating row */
.cst-pdp__rating {
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #e3e6e6 !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-bottom: 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #e3e6e6 !important;
    display: block !important;
    text-align: left !important;
}

/* Promotions */
.cst-pdp__promotions {
    margin-bottom: 14px !important;
    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;
    padding: 9px 12px !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 {
        margin-bottom: 12px !important;
        width: 100% !important;
        position: relative !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;
        /* padding: 12px 40px 12px 16px !important; */
        font-size: 15px !important;
        color: #0f1111 !important;
        border: 1px solid #888c8c !important;
        border-radius: 8px !important;
        background: #f0f2f2 !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        display: block !important;
        appearance: auto !important;
        -webkit-appearance: auto !important;
        font-weight: 400 !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;
    }

    .cst-mob__atc .add-to-cart,
    .cst-mob__atc .btn-primary {
        width: 100% !important;
        display: block !important;
        padding: 15px !important;
        font-size: 16px !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;
        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: 15px !important;
        font-size: 16px !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;
    }
}