/* ==========================================================================
   custom-product.css  -  product details page: typography & spacing pass

   Scope: CSS only. No markup, no Blade, no JavaScript is touched, so variant
   selection, stock display, quantity and add-to-cart behave exactly as before.

   The page already has a sensible structure (sticky gallery, buying panel,
   tab strip). What let it down was scale: several elements were set between
   8px and 12px, which is below comfortable reading size and well under the
   44px minimum for reliable tapping.

   Measured before / after
     assurance sub-label      8px  ->  12px   (was 9px desktop, 8px mobile)
     assurance label         10px  ->  13px
     stock badge             11px  ->  12.5px
     product meta list       12px  ->  13.5px
     quick overview rows     12px  ->  13.5px
     tab buttons             11px  ->  13.5px
     tab body text (mobile)  13px  ->  15px
     add to cart / buy now   11px  ->  15px, height 48 -> 52px
     option block headings   13px  ->  14px
     colour swatch           34px  ->  44px  (tap target)
     size chip                 -    ->  44px min height

   Everything uses !important because the rules it overrides do too.
   ========================================================================== */


/* ==========================================================================
   1. HEADING AND PRICE
   ========================================================================== */

.phase1-storefront .phase3-product-heading .title-animation {
    font-size: clamp(22px, 2.2vw, 30px) !important;
    line-height: 1.28 !important;
    font-weight: 700 !important;
    letter-spacing: -.012em !important;
}

/* The old 42px title crowded the panel and pushed price and buttons below the
   fold. A calmer heading leaves the price as the clear focal point. */
.phase1-storefront .phase3-product-price .main-price-container {
    font-size: clamp(26px, 2.4vw, 33px) !important;
    font-weight: 800 !important;
}

.phase1-storefront .phase3-product-price del {
    font-size: 16px !important;
    font-weight: 500 !important;
}

.phase1-storefront .phase3-product-price {
    margin: 10px 0 0 !important;
    gap: 6px 12px !important;
}


/* ==========================================================================
   2. BUYING PANEL RHYTHM
   ========================================================================== */

.phase1-storefront .phase3-buying-panel {
    padding: 22px clamp(16px, 2.2vw, 26px) 24px !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 22px rgba(16, 26, 34, .06) !important;
}

.phase1-storefront .phase3-stock-badge {
    min-height: 28px !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

.phase1-storefront .phase3-product-meta-list p {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
}


/* ==========================================================================
   3. OPTIONS - colour and size need real tap targets
   44px is the minimum reliable touch size; 34px produced mis-taps.
   ========================================================================== */

.phase1-storefront .phase3-option-block > h4,
.phase1-storefront .phase3-option-block h4 {
    margin-bottom: 9px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
}

.phase1-storefront .phase3-product-details .product-colors .color-option {
    width: 44px !important;
    height: 44px !important;
    border-radius: 9px !important;
}

.phase1-storefront .phase3-product-details .product-colors {
    gap: 9px !important;
}

.phase1-storefront .product-sizes .product-size,
.phase1-storefront .product-sizes-container .product-size {
    display: inline-flex !important;
    min-width: 46px !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 14px !important;
    border-radius: 9px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.phase1-storefront .product-sizes,
.phase1-storefront .product-sizes-container {
    gap: 8px !important;
}


/* ==========================================================================
   4. QUANTITY AND PURCHASE BUTTONS
   ========================================================================== */

.phase1-storefront .phase3-quantity .qty-btn-minus,
.phase1-storefront .phase3-quantity .qty-btn-plus {
    width: 48px !important;
    min-height: 52px !important;
    height: 52px !important;
    font-size: 17px !important;
}

.phase1-storefront .phase3-quantity .qty-input {
    min-height: 52px !important;
    height: 52px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

.phase1-storefront .phase3-add-cart,
.phase1-storefront .phase3-buy-now {
    min-height: 52px !important;
    height: 52px !important;
    padding: 0 18px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
}

.phase1-storefront .phase3-purchase-actions {
    gap: 10px !important;
    margin-top: 16px !important;
}


/* ==========================================================================
   5. ASSURANCE STRIP - the worst offender at 8px
   ========================================================================== */

.phase1-storefront .phase3-assurance-grid .phase5-assurance-item {
    min-height: 72px !important;
    padding: 12px 10px !important;
    border-radius: 11px !important;
}

.phase1-storefront .phase3-assurance-grid .phase5-assurance-item strong {
    font-size: 13px !important;
    line-height: 1.35 !important;
}

.phase1-storefront .phase3-assurance-grid .phase5-assurance-item span:not(.phase5-assurance-icon) {
    font-size: 12px !important;
    line-height: 1.4 !important;
}

.phase1-storefront .phase3-assurance-grid .phase5-assurance-icon {
    font-size: 19px !important;
}


/* ==========================================================================
   6. QUICK OVERVIEW / SPECIFICATION TABLE
   ========================================================================== */

.phase1-storefront .phase3-quick-overview .card-header {
    padding: 13px 16px !important;
}

.phase1-storefront .phase3-quick-overview .card-body {
    padding: 6px 16px 14px !important;
}

.phase1-storefront .phase3-quick-overview li strong,
.phase1-storefront .phase3-quick-overview li span {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
}

.phase1-storefront .phase3-quick-overview li {
    padding: 9px 0 !important;
}

/* Zebra striping makes long spec lists far easier to scan. */
.phase1-storefront .phase3-product-tabs table {
    width: 100% !important;
    font-size: 14px !important;
}

.phase1-storefront .phase3-product-tabs table td,
.phase1-storefront .phase3-product-tabs table th {
    padding: 11px 14px !important;
    border-color: #eceff1 !important;
    line-height: 1.6 !important;
    vertical-align: top !important;
}

.phase1-storefront .phase3-product-tabs table tr:nth-child(even) td {
    background: #fafbfc !important;
}

.phase1-storefront .phase3-product-tabs table th,
.phase1-storefront .phase3-product-tabs table td:first-child {
    width: 34% !important;
    color: #4b5560 !important;
    font-weight: 600 !important;
}


/* ==========================================================================
   7. TABS
   ========================================================================== */

.phase1-storefront .phase3-product-tabs .product-tab__btns {
    padding: 5px !important;
    gap: 3px !important;
}

.phase1-storefront .phase3-product-tabs .product-tab__btn {
    min-height: 46px !important;
    padding: 10px 20px !important;
    border-radius: 9px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
}

.phase1-storefront .phase3-product-tabs .product-tab-content-single {
    padding: clamp(18px, 2vw, 26px) !important;
}

.phase1-storefront .phase3-product-tabs .content,
.phase1-storefront .phase3-product-tabs .product-desc {
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #3b444d !important;
}

.phase1-storefront .phase3-product-tabs .product-desc p {
    margin-bottom: 13px !important;
}

.phase1-storefront .phase3-product-tabs .product-desc h1,
.phase1-storefront .phase3-product-tabs .product-desc h2,
.phase1-storefront .phase3-product-tabs .product-desc h3,
.phase1-storefront .phase3-product-tabs .product-desc h4 {
    margin: 22px 0 10px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.phase1-storefront .phase3-product-tabs .product-desc ul,
.phase1-storefront .phase3-product-tabs .product-desc ol {
    margin-bottom: 14px !important;
    padding-left: 21px !important;
}

.phase1-storefront .phase3-product-tabs .product-desc li {
    margin-bottom: 6px !important;
}


/* ==========================================================================
   8. GALLERY
   ========================================================================== */

.phase1-storefront .phase3-product-details .product-details__slider {
    top: 96px !important;
    padding: 10px !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 22px rgba(16, 26, 34, .05) !important;
}

.phase1-storefront .phase3-product-details .product-details-slider-single {
    height: clamp(340px, 36vw, 480px) !important;
    border-radius: 11px !important;
}

.phase1-storefront .phase3-product-details .sm-gallery {
    height: 74px !important;
    border-radius: 9px !important;
}


/* ==========================================================================
   9. MOBILE
   ========================================================================== */

@media (max-width: 767.98px) {

    .phase1-storefront .phase3-product-heading .title-animation {
        font-size: 20px !important;
        line-height: 1.32 !important;
    }

    .phase1-storefront .phase3-product-price .main-price-container {
        font-size: 25px !important;
    }

    .phase1-storefront .phase3-buying-panel {
        padding: 18px 15px 20px !important;
        border-radius: 12px !important;
    }

    /* These were 11px and 12px; both are below comfortable reading size. */
    .phase1-storefront .phase3-add-cart,
    .phase1-storefront .phase3-buy-now {
        min-height: 50px !important;
        height: 50px !important;
        padding: 0 12px !important;
        font-size: 14px !important;
    }

    .phase1-storefront .phase3-product-tabs .product-tab__btn {
        min-height: 42px !important;
        padding: 9px 14px !important;
        font-size: 12.5px !important;
    }

    .phase1-storefront .phase3-product-tabs .product-tab-content-single {
        padding: 16px !important;
    }

    .phase1-storefront .phase3-product-tabs .content,
    .phase1-storefront .phase3-product-tabs .product-desc {
        font-size: 15px !important;
        line-height: 1.78 !important;
    }

    .phase1-storefront .phase3-assurance-grid .phase5-assurance-item {
        min-height: 68px !important;
        padding: 10px 7px !important;
    }

    .phase1-storefront .phase3-assurance-grid .phase5-assurance-item strong {
        font-size: 12px !important;
    }

    .phase1-storefront .phase3-assurance-grid .phase5-assurance-item span:not(.phase5-assurance-icon) {
        font-size: 11px !important;
    }

    .phase1-storefront .phase3-product-details .product-details-slider-single {
        height: 320px !important;
    }

    .phase1-storefront .phase3-product-details .sm-gallery {
        height: 62px !important;
    }

    /* Spec tables stack awkwardly on narrow screens; let them scroll. */
    .phase1-storefront .phase3-product-tabs table {
        display: block !important;
        overflow-x: auto !important;
        font-size: 13.5px !important;
        -webkit-overflow-scrolling: touch;
    }

    .phase1-storefront .phase3-product-tabs table td,
    .phase1-storefront .phase3-product-tabs table th {
        padding: 9px 11px !important;
    }

    /* Clear the sticky mobile buy bar so the last rows are not hidden. */
    .phase1-storefront .phase3-product-details {
        padding-bottom: 92px !important;
    }
}

@media (max-width: 575.98px) {

    .phase1-storefront .product-sizes .product-size,
    .phase1-storefront .product-sizes-container .product-size {
        min-width: 44px !important;
        padding: 6px 11px !important;
        font-size: 13.5px !important;
    }

    .phase1-storefront .phase3-quick-overview li strong,
    .phase1-storefront .phase3-quick-overview li span {
        font-size: 13px !important;
    }
}


/* ==========================================================================
   10. MOBILE BUY BAR
   ========================================================================== */

.phase1-storefront .phase5-mobile-buybar,
.phase1-storefront .phase3-mobile-buybar {
    padding: 9px 12px !important;
    border-top: 1px solid #e8ebee !important;
    box-shadow: 0 -3px 14px rgba(16, 26, 34, .09) !important;
}

.phase1-storefront .phase5-mobile-buybar-price,
.phase1-storefront .phase5-sticky-price {
    font-size: 17px !important;
    font-weight: 800 !important;
}

.phase1-storefront .phase5-mobile-add-btn {
    min-height: 46px !important;
    padding: 0 20px !important;
    border-radius: 9px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
}


/* ==========================================================================
   11. MISSING IMAGE PLACEHOLDER
   Applied by the onerror handler in frontend_image.blade.php.
   ========================================================================== */

.cub-img-missing {
    padding: 12% !important;
    background: #f7f8f9;
    object-fit: contain !important;
    opacity: .85;
}


/* ==========================================================================
   12. INLINE PRODUCT VIDEO BELOW IMAGE GALLERY
   ========================================================================== */

.phase1-storefront .phase3-inline-video {
    overflow: hidden;
    border: 1px solid #dbe4ee;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 32, 54, .08);
}

.phase1-storefront .phase3-inline-video-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    background: #16304d;
    color: #fff;
    font-size: 14px;
    font-weight: 750;
}

.phase1-storefront .phase3-inline-video-heading i {
    font-size: 20px;
}

.phase1-storefront .phase3-inline-video-frame {
    overflow: hidden;
    border-radius: 0 0 13px 13px;
    background: #0f2036;
}

.phase1-storefront .phase3-inline-video-frame iframe,
.phase1-storefront .phase3-inline-video-frame video {
    width: 100% !important;
    height: 100% !important;
    border: 0;
    object-fit: contain;
}

@media (max-width: 767.98px) {
    .phase1-storefront .phase3-inline-video {
        margin-top: 14px !important;
        border-radius: 12px;
    }

    .phase1-storefront .phase3-inline-video-heading {
        padding: 9px 12px;
        font-size: 13px;
    }
}