/**
 * Amazon Style Product - CSS Fixes
 * Fixes for alignment, overflow, and theme conflicts
 */

/* =============================================
   Page Wrapper - Contain everything
============================================= */
.asp-page-wrapper {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
    overflow-x: hidden;
}

.asp-product-container {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* =============================================
   Hide Theme Breadcrumbs & Content-Top (Woostify etc)
============================================= */
.woocommerce-breadcrumb,
.woostify-breadcrumb,
.site-breadcrumb,
#breadcrumbs,
.breadcrumb-wrapper,
nav.woocommerce-breadcrumb {
    display: none !important;
}

/* Hide Woostify .content-top grey bar on product pages (contains empty notices wrapper) */
body.single-product .content-top {
    display: none !important;
}

/* =============================================
   3-Column Layout - Amazon-style proportions
   Gallery (1.3fr) | Info (1fr) | BuyBox (1fr)
============================================= */
.asp-product-layout {
    display: grid;
    grid-template-columns: 1.3fr 1fr minmax(280px, 1fr);
    gap: 20px;
    padding: 20px 0;
    width: 100%;
    max-width: 100%;
    align-items: start;
    /* All columns align at top */
}

/* Column 1: Gallery */
.asp-col-gallery {
    position: relative;
    min-width: 300px;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Column 2: Product Info */
.asp-col-info {
    padding-right: 10px;
    min-width: 0;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Column 3: Buy Box - Must align with top */
.asp-col-buybox {
    border: 1px solid var(--asp-border);
    border-radius: 8px;
    padding: 16px;
    background: var(--asp-bg);
    height: fit-content;
    position: sticky;
    top: 100px;
    min-width: 260px;
    margin-top: 0 !important;
    padding-top: 16px !important;
}

/* Force buybox children to start from top */
.asp-col-buybox>*:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* =============================================
   Gallery Fixes
============================================= */
.asp-gallery-wrapper {
    display: flex;
    gap: 10px;
}

.asp-thumbnails {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 50px;
    flex-shrink: 0;
}

.asp-thumb {
    width: 50px;
    height: 50px;
}

.asp-main-image-container {
    flex: 1;
    min-width: 0;
}

.asp-main-image img {
    max-width: 100%;
    max-height: 400px;
    width: auto;
    height: auto;
}

/* Hide zoom on smaller screens to prevent overflow */
@media (max-width: 1200px) {
    .asp-zoom-result {
        display: none !important;
    }
}

/* =============================================
   Compare - Better Placement
============================================= */
.asp-compare-wrapper {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--asp-border-light);
}

/* =============================================
   Product Title - Prevent Overflow
============================================= */
.asp-product-title {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* =============================================
   Offer Cards - Contain Scroll
============================================= */
.asp-offers-scroll {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

.asp-offer-card {
    flex: 0 0 auto;
    min-width: 180px;
    max-width: 220px;
}

/* =============================================
   Buy Box Buttons - Full Width
============================================= */
.asp-btn {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.asp-btn-cart,
.asp-btn-buy {
    padding: 8px 12px;
    font-size: 13px;
}

/* =============================================
   Related Products Grid - Responsive
============================================= */
.asp-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
}

.asp-related-item {
    text-align: center;
}

.asp-related-item a {
    display: block;
    text-decoration: none;
    color: var(--asp-text);
}

.asp-related-item img {
    max-width: 100%;
    height: auto;
}

.asp-related-item h4 {
    font-size: 13px;
    font-weight: 400;
    margin: 8px 0 4px;
    color: var(--asp-link);
}

.asp-related-price {
    font-size: 14px;
    font-weight: 500;
}

/* =============================================
   Tablet (1024px)
============================================= */
@media (max-width: 1024px) {
    .asp-product-layout {
        grid-template-columns: minmax(200px, 280px) 1fr;
        gap: 16px;
    }

    .asp-col-buybox {
        grid-column: 1 / -1;
        position: static;
        max-width: 100%;
        margin-top: 20px;
    }

    .asp-col-gallery {
        max-width: 280px;
    }
}

/* =============================================
   Mobile (768px)
============================================= */
@media (max-width: 768px) {
    .asp-page-wrapper {
        padding: 0 10px;
    }

    .asp-product-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .asp-col-gallery,
    .asp-col-info,
    .asp-col-buybox {
        max-width: 100%;
        width: 100%;
        padding: 16px 0;
    }

    .asp-col-buybox {
        border: none;
        border-top: 1px solid var(--asp-border);
        border-radius: 0;
        padding: 16px;
    }

    /* Gallery horizontal on mobile */
    .asp-gallery-wrapper {
        flex-direction: column;
    }

    .asp-thumbnails {
        flex-direction: row;
        width: 100%;
        justify-content: center;
        order: 2;
    }

    .asp-main-image-container {
        order: 1;
    }

    .asp-main-image img {
        max-height: 300px;
    }
}

/* =============================================
   Override Theme Styles
============================================= */
.asp-product-container .woocommerce-product-gallery,
.asp-product-container .summary.entry-summary {
    display: none !important;
}

/* Ensure our styles take precedence */
.asp-product-container *:not(.woocommerce-notices-wrapper) {
    box-sizing: border-box;
}

/* =============================================
   BUY BOX - Internal Element Alignment Fixes
============================================= */

/* Buy Box Container Reset */
.asp-col-buybox {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.asp-col-buybox>* {
    width: 100%;
}

/* Pincode Checker - Fix Button Stretching */
.asp-pincode-checker {
    width: 100%;
}

.asp-pincode-form {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}

.asp-pincode-input {
    flex: 1;
    min-width: 0;
    height: 36px;
    padding: 8px 12px;
}

.asp-pincode-btn {
    flex-shrink: 0;
    width: auto;
    min-width: 70px;
    height: 36px;
    padding: 8px 16px;
    white-space: nowrap;
}

/* Buy Box Price */
.asp-buybox-price {
    width: 100%;
    text-align: left;
}

/* Stock Status */
.asp-stock-status {
    width: 100%;
    text-align: left;
}

/* Delivery Info */
.asp-delivery-info {
    width: 100%;
}

.asp-delivery-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    width: 100%;
}

/* Location Select */
.asp-location-select {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

/* Quantity Row */
.asp-quantity-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: flex-start;
}

.asp-qty-select {
    width: auto;
    min-width: 80px;
}

/* Action Buttons - Full Width */
.asp-cart-form,
.asp-buynow-form {
    width: 100%;
    display: block;
}

.asp-col-buybox .asp-btn {
    display: block;
    width: 100%;
    text-align: center;
    margin-left: 0;
    margin-right: 0;
}

.asp-col-buybox .asp-btn-cart,
.asp-col-buybox .asp-btn-buy {
    width: 100%;
    max-width: 100%;
}

/* Wishlist Button */
.asp-wishlist-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}

/* Secure Badge */
.asp-secure-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: flex-start;
}

/* Returns Info - Fix alignment */
.asp-returns-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: flex-start;
}

.asp-returns-link {
    margin-left: auto;
}

/* Seller Info */
.asp-seller-info {
    width: 100%;
}

.asp-seller-row {
    display: flex;
    gap: 8px;
    width: 100%;
}

/* Gift Wrap - Fix checkbox alignment */
.asp-gift-wrap {
    width: 100%;
}

.asp-gift-wrap-label {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    cursor: pointer;
}

.asp-gift-wrap-checkbox {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.asp-gift-wrap-icon {
    flex-shrink: 0;
}

.asp-gift-wrap-text {
    flex: 1;
}

/* Force all children to be full width */
.asp-col-buybox input[type="text"],
.asp-col-buybox input[type="number"],
.asp-col-buybox select,
.asp-col-buybox button,
.asp-col-buybox .button {
    max-width: 100%;
}

/* Hidden WooCommerce form elements */
.asp-cart-form input[type="hidden"],
.asp-buynow-form input[type="hidden"],
.asp-variation-form {
    display: none;
}

/* Form display fix */
form.asp-cart-form,
form.asp-buynow-form {
    margin: 0;
    padding: 0;
}

/* =============================================
   Social Proof
   ============================================= */
.asp-sales-count-bold {
    font-weight: 700 !important;
    color: #0F1111;
}