/* Product-popup chrome — extracted from a ~60-line inline <style>
 * block that lived inside resources/views/storefront/product_page.blade.php
 * plus a ~341-line block from storefront/components/product_popup.blade.php.
 * Holds the modal-container padding, the legacy Owl-carousel table
 * layout, the product-tile hover affordances, the VFM modal overrides,
 * and the full .pp-* popup chrome (gallery, thumbs, details, pills,
 * action row, mobile media queries, productPopupModal overrides). */

/* Modal split-view — small top pad so the carousel doesn't sit
 * flush against the modal's header bar. */
.modal-container .modal-content .modal-split-view {
    padding-top: 20px !important;
}

/* Owl carousel inside the popup uses table-layout so each slide gets
 * a stable width regardless of its child image's intrinsic size. */
.owl-carousel {
    display: table;
    table-layout: fixed;
}

/* Product tile actions appear on hover. The icon is invisible at
 * rest so the tile reads as a clean card; it fades in only when the
 * shopper hovers the row. */
.product_item .product_details_icon { visibility: hidden; }
.product_item:hover .product_details_icon { visibility: visible; }

.product_details_active {
    color: #ffffff;
    font-size: 18px;
    margin-inline-end: 5px;
}

/* List-view variant — the add-to-cart pill needs a small gap from
 * the price block before it. Logical margin so RTL and LTR both
 * land cleanly. */
.collection-list .btn-addcart { margin-inline-end: 12px; }

/* The popup uses Bootstrap's .modal-lg as its frame, but stretched
 * wider than the default so the gallery + details columns fit side
 * by side without a tight feeling. Mobile media query below collapses
 * it back to full-width because the columns stack vertically. */
.modal-lg { max-width: 70% !important; }

/* VFM (vue-final-modal) wraps the legacy modal element and inherits
 * a margin-top from the library's default sheet style — flatten it
 * here so the popup snaps to the top of the viewport instead of
 * leaving a thin band above it. */
.vfm.vfm--inset.vfm--fixed,
.vfm__overlay.vfm--overlay.vfm--absolute.vfm--inset,
.vfm__container.vfm--absolute.vfm--inset.vfm--outline-none.modal-container.product-popup {
    margin-top: 0 !important;
}

/* Legacy theme + toolbar combination kept overriding the body's
 * padding when the right-edge accessibility toolbar was enabled.
 * Specific enough to only fire on that exact configuration so it
 * doesn't leak into other themes. */
body.style-light-body-blue.enable-toolbar-RTL.trigger-position-left.quick-links-position-right.trigger-size-small.trigger-color-blue.ready {
    padding-right: 0 !important;
}

div#product_view_body_ { padding: 0; }

@media only screen and (max-width: 991px) {
    /* Force the popup above any in-flight Bootstrap modals. */
    .modal.fade.show { z-index: 9999; }

    .vfm__container.vfm--absolute.vfm--inset.vfm--outline-none.modal-container.product-popup {
        margin: 0;
        width: 102% !important;
    }
    .modal-container .modal-content .modal-split-view { display: flex; }
    .row.owl-carousel.owl-theme.owl-loaded.owl-drag { margin: 0; }
    .product-measures-box { padding: 10px 0 62px; }
    .modal-lg { max-width: 100% !important; }
}

/* ============================================================
 * Product popup — Blade replacement for the legacy Vue popup.
 * All .pp-* rules below render the modal that opens when the
 * shopper clicks a product tile's quick-view icon. Two-column
 * grid (gallery + details) on desktop, single column on mobile.
 * ============================================================ */
.pp-modal {
    position: relative;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    font-family: inherit;
    color: #1a1a1a;
}
.pp-close {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(17,17,17,0.06);
    border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: background 0.15s, transform 0.15s;
    color: #1a1a1a;
}
.pp-close:hover { background: rgba(17,17,17,0.12); transform: rotate(90deg); }

.pp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 480px;
}

/* ===== Gallery ===== */
.pp-gallery {
    background: #f7f5f2;
    padding: 28px;
    display: flex; flex-direction: column; gap: 12px;
}
.pp-main-img-wrap {
    position: relative;
    flex: 1;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
}
.pp-main-img {
    width: 100%; height: 100%;
    object-fit: contain;
    transition: opacity 0.25s ease;
}
.pp-sale-badge {
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    background: #dc2626;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 20px;
    z-index: 2;
}
.pp-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 4px;
}
.pp-thumb {
    flex: 0 0 64px;
    width: 64px; height: 64px;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: #fff;
    padding: 0;
    transition: border-color 0.15s;
}
.pp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-thumb:hover { border-color: #9ca3af; }
.pp-thumb.on { border-color: #111; }

/* ===== Details ===== */
.pp-details {
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    max-height: 80vh;
}
.pp-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 11px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.pp-meta-cat { color: #6b7280; }
.pp-title {
    font-size: 26px;
    font-weight: 800;
    color: #111;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.pp-price-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.pp-price {
    font-size: 26px;
    font-weight: 800;
    color: #111;
    line-height: 1;
}
.pp-price-current { color: #1a1a1a; }
.pp-price-old {
    color: #9ca3af;
    text-decoration: line-through;
    font-size: 17px;
    font-weight: 500;
}
.pp-price-hint {
    font-size: 12px;
    color: #9ca3af;
    font-style: italic;
}
.pp-stock-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    font-size: 13px;
}
.pp-stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 100px;
}
.pp-stock.in { background: #d1fae5; color: #065f46; }
.pp-stock.out { background: #fee2e2; color: #991b1b; }
.pp-stock-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.pp-stock-qty {
    color: #6b7280;
    font-size: 12px;
}
.pp-desc {
    color: #4b5563;
    font-size: 14px;
    line-height: 1.6;
    max-height: 400px;
    overflow-y: auto;
    padding: 14px 16px;
    background: #f9fafb;
    border-radius: 10px;
}
.pp-desc::-webkit-scrollbar { width: 4px; }
.pp-desc::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
.pp-desc p { margin: 0 0 8px; }
.pp-desc p:last-child { margin: 0; }

/* ===== Variants ===== */
.pp-variants {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 4px;
}
.pp-variant-group { display: flex; flex-direction: column; gap: 6px; }
.pp-variant-label {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}
.pp-variant-select {
    border: 1.5px solid #e5e7eb;
    border-radius: 9px;
    padding: 9px 12px;
    font-size: 14px;
    font-family: inherit;
    color: #1a1a1a;
    background: #fff;
    transition: border-color 0.15s;
    outline: none;
}
.pp-variant-select:focus { border-color: #111; }
.pp-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pp-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
    color: #374151;
    background: #fff;
}
.pp-pill:hover { border-color: #6b7280; }
.pp-pill.active {
    background: #111;
    color: #fff;
    border-color: #111;
}
.pp-pill-add { font-size: 11px; opacity: 0.75; }
.pp-pill-extra {
    font-size: 12.5px;
    color: #065f46;
    margin-top: -6px;
}

/* ===== Action row ===== */
.pp-action-row {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 8px;
    align-items: stretch;
}
.pp-qty {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    flex-shrink: 0;
}
.pp-qty-btn {
    width: 42px; height: 44px;
    background: transparent;
    border: none;
    font-size: 18px;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    font-family: inherit;
}
.pp-qty-btn:hover { background: #f3f4f6; color: #111; }
.pp-qty-input {
    width: 44px;
    border: none;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #111;
    background: transparent;
    outline: none;
    font-family: inherit;
}
.pp-cart-btn {
    flex: 1;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, transform 0.1s;
    text-decoration: none;
    min-height: 44px;
}
.pp-cart-btn:hover {
    background: #2a2a2a;
    color: #fff;
    text-decoration: none;
}
.pp-cart-btn:active { transform: scale(0.98); }
.pp-cart-btn[disabled],
.pp-cart-btn.disabled { background: #d1d5db; cursor: not-allowed; }

/* ===== Mobile ===== */
@media (max-width: 768px) {
    .pp-grid { grid-template-columns: 1fr; min-height: auto; }
    .pp-gallery { padding: 20px; }
    .pp-details { padding: 22px 20px 28px; max-height: none; }
    .pp-title { font-size: 22px; }
    .pp-price, .pp-price-current { font-size: 22px; }
}

/* ===== productPopupModal — overrides for the outer Bootstrap modal
 * that wraps .pp-modal. Removes the default border + adds a deeper
 * shadow so the rounded popup floats above the page. Mobile drops
 * the radius and stretches it edge-to-edge. ===== */
#productPopupModal .modal-dialog {
    max-width: 880px;
    margin: 30px auto;
}
#productPopupModal .modal-content {
    border: none;
    border-radius: 18px;
    overflow: hidden;
    background: transparent;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
#productPopupModal .modal-body { padding: 0; }
@media (max-width: 768px) {
    #productPopupModal .modal-dialog {
        max-width: none;
        margin: 0;
        height: 100%;
    }
    #productPopupModal .modal-content {
        border-radius: 0;
        min-height: 100vh;
    }
}