/**
 * Amazon Style Product - Layout Override v4
 * Phase 3: 40% / 35% / 25% column layout
 * Fix: Buy Box top alignment (remove 150px drop) + safe sticky
 */

/* ==============================================
   CSS Variable for sticky offset
============================================== */
:root {
    --asp-sticky-top: 24px;
}





body.single-product .asp-product-layout {
    display: grid !important;
    /* FIX: Flexible grid to prevent overflow (40% 35% 25% -> fr units) */
    grid-template-columns: minmax(0, 40fr) minmax(0, 35fr) minmax(0, 25fr) !important;
    gap: 24px !important;
    padding: 20px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: start !important;
    box-sizing: border-box !important;
}

/* Allow grid items to shrink */
body.single-product .asp-product-layout>* {
    min-width: 0 !important;
}

/* ==============================================
   Force all columns to start at the same baseline
============================================== */

body.single-product .asp-col-gallery,
body.single-product .asp-col-info,
body.single-product .asp-col-buybox {
    margin-top: 0 !important;
    padding-top: 0 !important;
    align-self: start !important;
    grid-row: 1 !important;
}

/* Column 1: Gallery (40%) */
/* Column 1: Gallery (40%) - Moved to end */

/* Column 2: Product Info (35%) */
body.single-product .asp-col-info {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 10px 0 0 !important;
}

/* ==============================================
   Column 3: Buy Box (25%) - Top Alignment Fix
============================================== */

/* Column 3: Buy Box (25%) - Moved to end */

/* Remove desktop sticky override */
/* @media (min-width: 1024px) { ... } REMOVED */

/* ==============================================
   Remove top spacing from buybox children
============================================== */

/* Force buybox first child alignment */
body.single-product .asp-col-buybox>*:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Remove accidental margins on key buybox sections */
body.single-product .asp-col-buybox .asp-buybox-price,
body.single-product .asp-col-buybox .asp-pincode-checker,
body.single-product .asp-col-buybox .asp-buybox-stock,
body.single-product .asp-col-buybox .asp-stock-status,
body.single-product .asp-col-buybox .asp-stock-status,
body.single-product .asp-col-buybox .asp-delivery-info {
    margin-top: 0 !important;
}

/* FIX: Prevent button overflow with specific flex rules */
body.single-product .asp-col-buybox .asp-bb-pincode-form {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

body.single-product .asp-col-buybox .asp-bb-pincode-form input[type="text"],
body.single-product .asp-col-buybox .asp-bb-pincode-form input[type="tel"],
body.single-product .asp-col-buybox .asp-bb-pincode-form input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    /* critical to prevent pushing button out */
    box-sizing: border-box !important;
}

body.single-product .asp-col-buybox .asp-bb-pincode-form .asp-bb-pincode-btn,
body.single-product .asp-col-buybox .asp-bb-pincode-form button {
    flex: 0 0 96px !important;
    min-width: 96px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* ==============================================
   Mobile Responsive (<= 900px)
============================================== */

@media (max-width: 900px) {
    body.single-product .asp-product-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    body.single-product .asp-col-gallery,
    body.single-product .asp-col-info,
    body.single-product .asp-col-buybox {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    body.single-product .asp-col-buybox {
        position: static !important;
        top: auto !important;
        padding: 16px !important;
        display: flow-root !important;
    }
}

/* ==============================================
   Gallery Thumbnails Fix
============================================== */

body.single-product .asp-gallery-grid {
    display: grid !important;
    grid-template-columns: 60px 1fr !important;
    gap: 12px !important;
}

body.single-product .asp-gallery-thumbs {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

body.single-product .asp-gallery-thumb {
    width: 56px !important;
    height: 56px !important;
    border: 2px solid transparent !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    overflow: hidden !important;
}

body.single-product .asp-gallery-thumb.active,
body.single-product .asp-gallery-thumb:hover {
    border-color: #c45500 !important;
}

body.single-product .asp-gallery-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ==============================================
   Product Info Spacing
============================================== */

body.single-product .asp-product-info>* {
    margin-bottom: 12px !important;
}

body.single-product .asp-product-title {
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    margin: 0 0 8px 0 !important;
    color: #0F1111 !important;
}

body.single-product .asp-brand-link a {
    color: #007185 !important;
    font-size: 14px !important;
    text-decoration: none !important;
}

body.single-product .asp-brand-link a:hover {
    color: #C7511F !important;
    text-decoration: underline !important;
}

/* ==============================================
   Hide Previous/Next Navigation
============================================== */

body.single-product .product-nav,
body.single-product .woostify-single-product-navigation,
body.single-product .product-navigation,
body.single-product [class*="prev-next"],
body.single-product .product-nav-item {
    display: none !important;
}

/* ==============================================
   Fix Delivery Result Alignment (Grid)
   Selector: .asp-bb-delivery-result (singular)
============================================== */
body.single-product .asp-col-buybox .asp-bb-delivery-result {
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px !important;
}

body.single-product .asp-col-buybox .asp-bb-delivery-row {
    display: grid !important;
    grid-template-columns: 1fr max-content max-content !important;
    column-gap: 6px !important;
    align-items: center !important;
    margin-bottom: 6px !important;
}

body.single-product .asp-col-buybox .asp-bb-delivery-label {
    word-break: normal !important;
    overflow-wrap: normal !important;
    font-size: 13px !important;
    color: #565959 !important;
}

body.single-product .asp-col-buybox .asp-bb-delivery-date {
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    font-weight: 700 !important;
    color: #111 !important;
    line-height: 1.2 !important;
}

/* Price columns (Free / Fee) */
body.single-product .asp-col-buybox .asp-bb-delivery-fee,
body.single-product .asp-col-buybox .asp-bb-delivery-free {
    text-align: right !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    min-width: auto !important;
}

/* ==============================================
   Fix Check Button Text Color
============================================== */
body.single-product .asp-col-buybox .asp-bb-pincode-btn,
body.single-product .asp-col-buybox #asp-pincode-check {
    color: #111 !important;
}

/* ==============================================
   SCROLL FIX: Remove "scroll jails" (PDP Only)
   Critical for sticky behavior to work.
============================================== */
body.single-product .asp-product-container,
body.single-product .asp-page-wrapper,
body.single-product #view {
    overflow: visible !important;
}

/* ==============================================
   FINAL OVERRIDES (Moved to end for precedence)
   1. Sticky Gallery
   2. Standard Flow Buy Box
============================================== */

/* 1. Sticky Gallery (Desktop Only) */
@media (min-width: 1025px) {
    body.single-product .asp-col-gallery {
        position: sticky !important;
        top: var(--asp-sticky-top, 4px) !important;
        align-self: start !important;
        z-index: 50 !important;
        /* High z-index to stay on top */
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* 2. Buy Box (Standard/Relative) */
body.single-product .asp-col-buybox {
    position: relative !important;
    top: auto !important;
    z-index: 20 !important;
    box-sizing: border-box !important;
    border: 1px solid #D5D9D9 !important;
    border-radius: 8px !important;
    overflow: visible !important;
    width: 100% !important;

    margin: 0 !important;
    grid-row: 1 !important;
}

/* 3. Hide "Add to Compare" (User Requested) */
body.single-product .asp-compare-wrapper {
    display: none !important;
}