/* ============================================
   MODERN E-COMMERCE PRODUCT DETAILS PAGE
   Clean, Professional Design
   ============================================ */

/* === CSS Variables === */
:root {
    --pd-primary: var(--bs-primary);
    --pd-primary-rgb: var(--bs-primary-rgb);
    --pd-secondary: var(--bs-secondary);
    --pd-orange: #f97316;
    --pd-green: #25d366;
    --pd-text: #1f2937;
    --pd-text-light: #6b7280;
    --pd-border: #e5e7eb;
    --pd-bg: #ffffff;
    --pd-bg-light: #f9fafb;
}

/* ========================================
   MODERN BREADCRUMB
   ======================================== */

.product-breadcrumb {
    margin-bottom: 20px;
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: 13px;
}

.breadcrumb-item a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--pd-text-light);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
    color: var(--pd-primary);
}

.breadcrumb-item a i {
    font-size: 14px;
}

.breadcrumb-item:not(:last-child)::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
}

.breadcrumb-item.active span {
    color: var(--pd-text);
    font-weight: 500;
}

/* Breadcrumb Responsive */
@media (max-width: 575.98px) {
    .product-breadcrumb {
        margin-bottom: 16px;
    }

    .breadcrumb-list {
        gap: 4px;
    }

    .breadcrumb-item {
        font-size: 12px;
    }

    .breadcrumb-item a span {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .breadcrumb-item.active span {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .breadcrumb-item:not(:last-child)::after {
        width: 12px;
        height: 12px;
        margin-left: 4px;
        background-size: 8px;
    }
}

/* === Product Gallery === */
.cz-product-gallery {
    background: var(--pd-bg);
    border: 1px solid var(--pd-border);
    border-radius: 8px;
    padding: 0;
    box-shadow: none;
    overflow: visible !important;
    position: relative;
    z-index: 1;
}

.cz-preview {
    overflow: visible !important;
    position: relative;
    z-index: 2;
}

/* Main Product Image Carousel - Force single item */
.owl-carousel.product-thumbnail-slider,
#sync1.owl-carousel {
    overflow: visible !important;
}

.owl-carousel.product-thumbnail-slider .owl-stage-outer,
#sync1.owl-carousel .owl-stage-outer {
    overflow: visible !important;
    width: 100% !important;
}

.owl-carousel.product-thumbnail-slider .owl-stage,
#sync1.owl-carousel .owl-stage {
    display: flex !important;
    width: auto !important;
    transform: translate3d(0px, 0px, 0px) !important;
}

.owl-carousel.product-thumbnail-slider .owl-item,
#sync1.owl-carousel .owl-item {
    width: 100% !important;
    min-width: 100% !important;
    flex-shrink: 0 !important;
}

/* Hide non-active items */
#sync1.owl-carousel .owl-item:not(.active) {
    visibility: hidden;
    position: absolute;
    left: -9999px;
}

.product-preview-item {
    background: var(--pd-bg);
    border: none;
    border-radius: 8px;
    min-height: 300px;
    position: relative;
    cursor: zoom-in;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.product-preview-item img.cz-image-zoom {
    max-width: 100% !important;
    max-height: 400px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* Image Zoom Pane */
.cz-image-zoom-pane {
    position: absolute !important;
    top: 0 !important;
    right: -420px !important;
    width: 400px !important;
    height: 400px !important;
    border: 1px solid var(--pd-border) !important;
    border-radius: 8px !important;
    background-color: var(--pd-bg) !important;
    background-repeat: no-repeat !important;
    background-size: 200% !important;
    display: none;
    visibility: hidden;
    opacity: 0;
    z-index: 9999 !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    pointer-events: none !important;
    overflow: hidden !important;
    transition: opacity 0.2s ease;
}

/* CSS hover fallback for zoom */
.product-preview-item:hover .cz-image-zoom-pane {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* The pane's 9999 only counts inside the gallery, because the gallery is itself a
   stacking context at z-index 1 -- so the pane really paints at 1. The quantity
   buttons are Bootstrap input-group children, which carry position: relative and
   z-index: 2 with nothing above them, and that is what was drawing the - and +
   over the zoom. The gallery has to rise while the image is hovered.
   100 clears everything in the page body and stays under the header at 1000, so
   a sticky header still covers the gallery on scroll. */
.cz-product-gallery:hover {
    z-index: 100;
}


/* Hide zoom on smaller screens */
@media (max-width: 1200px) {
    .cz-image-zoom-pane {
        display: none !important;
    }
    .product-preview-item {
        cursor: default;
    }
}

/* ========================================
   HORIZONTAL THUMBNAIL SLIDER - BOTTOM
   ======================================== */

/* Thumbnail Container - Horizontal Layout */
.cz-thumbs-horizontal {
    margin-top: 15px;
    padding: 0;
    position: relative;
}

/* Force Owl Carousel to display horizontally */
.cz-thumbs-horizontal .owl-carousel,
.cz-thumbs-horizontal #sync2 {
    display: flex !important;
    flex-direction: row !important;
}

.cz-thumbs-horizontal .owl-stage-outer {
    width: 100% !important;
    overflow: hidden !important;
    /* The hidden overflow is what pages the strip, but it was also cutting the
       hover lift and its shadow off. Padding gives them room inside the box;
       the negative margins keep the strip the same height as before. */
    padding: 6px 0 16px;
    margin: -6px 0 -16px;
}

.cz-thumbs-horizontal .owl-stage {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}

/* Individual Thumbnail Items.
   The carousel divides the strip by the number of thumbnails on show and writes
   the result onto each item -- 73.678px here, which with its 10px margin fits
   five across exactly. Forcing width: auto threw that away and the fixed 75px
   tile below took its place, so five items wanted 425px in a 408px strip and the
   last one lost the difference to the stage's hidden overflow. Both the width
   and the margin now come from the carousel. */
.cz-thumbs-horizontal .owl-item {
    display: inline-block !important;
    min-width: 0 !important;
}

.cz-thumbs-horizontal .thumb-item {
    padding: 0 !important;
}

/* Thumbnail Styling */
.cz-thumbs-horizontal .product-preview-thumb,
.product-thumb-slider-horizontal .product-preview-thumb {
    /* Square, at whatever width the carousel handed the item. */
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1;
    border: 2px solid var(--pd-border) !important;
    border-radius: 8px !important;
    background: var(--pd-bg) !important;
    padding: 5px !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.cz-thumbs-horizontal .product-preview-thumb:hover {
    border-color: var(--pd-primary) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.cz-thumbs-horizontal .product-preview-thumb.active {
    border-color: var(--pd-primary) !important;
    box-shadow: 0 2px 8px rgba(0, 82, 234, 0.3) !important;
}

.cz-thumbs-horizontal .product-preview-thumb img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* Navigation Arrows */
.cz-thumbs-horizontal .owl-nav {
    position: absolute !important;
    top: 50% !important;
    left: -15px !important;
    right: -15px !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    justify-content: space-between !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

.cz-thumbs-horizontal .owl-nav button.owl-prev,
.cz-thumbs-horizontal .owl-nav button.owl-next {
    pointer-events: auto !important;
    width: 32px !important;
    height: 32px !important;
    background: var(--pd-bg) !important;
    border: 1px solid var(--pd-border) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
    color: var(--pd-text) !important;
    font-size: 14px !important;
}

.cz-thumbs-horizontal .owl-nav button.owl-prev:hover,
.cz-thumbs-horizontal .owl-nav button.owl-next:hover {
    background: var(--pd-primary) !important;
    border-color: var(--pd-primary) !important;
    color: var(--pd-bg) !important;
}

.cz-thumbs-horizontal .owl-nav button.disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

/* Responsive Thumbnails.
   The sizes that used to live here never applied -- #sync2 .product-preview-thumb
   further down carries an id, so it outranked them and the thumbnails stayed at
   75px on every screen. They are not needed now either: the tile takes its width
   from the carousel, which already drops to four across under 480px. */
@media (max-width: 575.98px) {
    .cz-thumbs-horizontal {
        margin-top: 10px;
    }

    .cz-thumbs-horizontal .owl-nav {
        display: none !important;
    }
}

/* Legacy vertical thumbnail support (if needed elsewhere).
   #sync2 is the horizontal strip above, not a vertical one, and the id in this
   selector was overriding everything written for it. */
.product-preview-thumb,
.product-thumb-slider .product-preview-thumb {
    width: 75px !important;
    height: 75px !important;
    min-width: 75px !important;
    min-height: 75px !important;
    border: 2px solid var(--pd-border) !important;
    border-radius: 8px !important;
    background: var(--pd-bg) !important;
    padding: 5px !important;
    cursor: pointer;
    transition: border-color 0.2s ease;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.product-preview-thumb:hover,
.product-preview-thumb.active,
#sync2 .product-preview-thumb:hover,
#sync2 .product-preview-thumb.active {
    border-color: var(--pd-primary) !important;
}

.product-preview-thumb img,
#sync2 .product-preview-thumb img {
    width: 60px !important;
    height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    object-fit: contain !important;
}

/* Share Section - Below product details */
.share-section {
    display: flex !important;
    align-items: center !important;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--pd-border);
    margin-top: 20px;
}

.share-section > span {
    color: var(--pd-text-light);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    display: flex;
    align-items: center;
}

.share-section .sharethis-inline-share-buttons {
    display: flex !important;
    align-items: center !important;
}

/* Secure Payment Section */
.secure-payment-section {
    padding-top: 16px;
    border-top: 1px solid var(--pd-border);
    margin-top: 16px;
}

.secure-payment-section > div > span {
    color: var(--pd-text-light);
    font-size: 13px;
    font-weight: 500;
}

.secure-payment-section .payment-icons {
    display: flex;
    align-items: center;
    gap: 12px;
}

.secure-payment-section .payment-icons i {
    font-size: 18px;
    color: var(--pd-text-light);
    transition: color 0.2s ease;
}

.secure-payment-section .payment-icons i:hover {
    color: var(--pd-primary);
}

.secure-payment-section .payment-icons .bi-lock-fill {
    font-size: 14px;
    color: #22c55e !important;
}

/* ShareThis inline buttons styling */
.share-section .sharethis-inline-share-buttons {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.share-section .sharethis-inline-share-buttons > div,
.share-section .sharethis-inline-share-buttons .st-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    line-height: normal !important;
    box-sizing: border-box !important;
    position: relative !important;
    top: 0 !important;
}

.share-section .sharethis-inline-share-buttons .st-btn > * {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.share-section .sharethis-inline-share-buttons .st-btn img,
.share-section .sharethis-inline-share-buttons .st-btn svg {
    width: 16px !important;
    height: 16px !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.share-section .sharethis-inline-share-buttons .st-btn span,
.share-section .sharethis-inline-share-buttons .st-label {
    display: none !important;
}

/* Hide the "Shares" count text */
.share-section .sharethis-inline-share-buttons .st-total {
    display: none !important;
}

/* === Product Details === */
.details {
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: none;
}

/* Product Title */
.__inline-24,
.details h1 {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--pd-text);
    line-height: 1.3;
    margin-bottom: 8px;
}

/* Rating & Stats */
.pro {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.pro .star-rating {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}

.pro .star-rating i {
    color: #fbbf24;
    font-size: 14px;
}

.pro .text-muted,
.pro .font-regular,
.pro .font-for-tab {
    color: var(--pd-text-light) !important;
    font-size: 14px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-weight: 400 !important;
}

.web-text-primary {
    color: var(--pd-primary) !important;
}

/* Price Display */
.text-accent,
#chosen_price {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--pd-text) !important;
}

/* Total Price Section */
#chosen_price_div {
    margin-top: 20px !important;
    padding-top: 16px;
    border-top: 1px solid var(--pd-border);
}

#chosen_price_div #chosen_price {
    font-size: 16px !important;
}

/* === Variation Labels === */
.product-description-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--pd-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

/* === Size/Weight Options === */
.checkbox-alphanumeric,
.list-inline.product_choice_li,
.checkbox-alphanumeric--style-1 {
    display: flex !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    margin-bottom: 8px !important;
}

.checkbox-alphanumeric label,
.list-inline.product_choice_li label,
.for-mobile-capacity label {
    min-width: 1.85rem !important;
    height: auto !important;
    border: 1px solid var(--pd-border) !important;
    border-radius: 6px !important;
    background: var(--pd-bg) !important;
    color: var(--pd-text) !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0.15rem 0.4rem !important;
    margin: 0 !important;
}

.checkbox-alphanumeric label:hover,
.list-inline.product_choice_li label:hover {
    border-color: var(--pd-primary) !important;
    color: var(--pd-primary) !important;
}

.checkbox-alphanumeric input[type="radio"]:checked + label,
.list-inline.product_choice_li input[type="radio"]:checked + label,
.for-mobile-capacity input[type="radio"]:checked + label {
    background: var(--pd-primary) !important;
    border-color: var(--pd-primary) !important;
    color: var(--pd-bg) !important;
}

/* Hide radio inputs */
.checkbox-alphanumeric input[type="radio"],
.for-mobile-capacity input[type="radio"] {
    display: none !important;
}

/* === Color Options === */
.checkbox-color {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.checkbox-color label {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: 2px solid var(--pd-border) !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.checkbox-color input[type="radio"]:checked + label {
    border-color: var(--pd-text) !important;
    box-shadow: 0 0 0 2px var(--pd-bg), 0 0 0 4px var(--pd-text);
}

/* === The three product rails at the foot of the page ===
   Similar products, frequently bought together and you may also like all draw
   the shop page's card now. Its hover state reveals Add To Cart below the
   photo, which needs the card to be the full height of its cell. */
.details-product-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(5, 1fr);
}

.details-product-grid > .product-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
}

@media (max-width: 1399.98px) {
    .details-product-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1199.98px) {
    .details-product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767.98px) {
    .details-product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* The three headings read as one family. */
.similar-products-section .section-title i {
    color: var(--pd-primary);
}

/* === Variant pickers ===
   Measured off the reference: the label is 14px/400 in the muted grey with the
   chosen value beside it at 600 in the ink colour, swatches are 38px circles on
   a 10px gap, and the option pills are 50x40 at a 4px radius. */
.variant-picker-item {
    margin-bottom: 22px;
}

.variant-picker-label {
    font-size: 14px;
    font-weight: 400;
    color: var(--pd-text-light);
    margin-bottom: 12px;
}

.variant-picker-label-value {
    font-weight: 600;
    color: var(--pd-primary);
    text-transform: capitalize;
}

.variant-picker-values {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
}

/* Colour swatches. The colour itself is on the label's background, so the ring
   that marks the choice has to be drawn outside it. */
.checkbox-color.variant-picker-values li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

.checkbox-color.variant-picker-values label {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    border: none !important;
    /* The reference rings the swatch at a distance rather than outlining the
       colour itself: a white gap, then the hairline. 30 + 3 + 1 gives the 38px
       footprint it uses. */
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--pd-border);
    cursor: pointer;
    display: block;
    margin: 4px !important;
    transition: box-shadow 0.2s ease;
}

.checkbox-color.variant-picker-values label:hover {
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--pd-primary);
}

.checkbox-color.variant-picker-values input:checked + label {
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--pd-primary);
}

/* Option pills -- size, weight, and whatever else the seller named.
   The pill is sized by its label, not the other way round. It used to be
   min-width 50px with a locked 40px height and wrapping text, which is 26px of
   room once the padding is taken off: "250gms" broke across three lines and
   spilled out of the box, because the height could not grow to hold them. 50px
   is the floor now, for the short labels like "S" or "XL" that look wrong ragged,
   and anything longer sets its own width. */
.checkbox-alphanumeric.variant-picker-values .for-mobile-capacity {
    margin: 0 !important;
    /* Sizes to the pill inside it rather than to a share of the row. */
    flex: 0 0 auto !important;
}

.checkbox-alphanumeric.variant-picker-values label {
    width: auto !important;
    min-width: 50px !important;
    height: auto !important;
    min-height: 40px !important;
    /* A weight or a size is one token; breaking it mid-word reads as a typo. */
    white-space: nowrap !important;
    padding: 0 12px !important;
    border-radius: 4px !important;
    border: 1px solid var(--pd-border) !important;
    background: transparent !important;
    color: var(--pd-text-light) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.checkbox-alphanumeric.variant-picker-values label:hover {
    border-color: var(--pd-primary) !important;
}

.checkbox-alphanumeric.variant-picker-values input:checked + label {
    background: var(--pd-primary) !important;
    border-color: var(--pd-primary) !important;
    color: #fff !important;
}

/* === The buy row === */
.product-options-bottom {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.quantity-title {
    font-size: 14px;
    font-weight: 400;
    color: var(--pd-primary);
    margin-bottom: 5px;
}

/* The stepper sits on a tint rather than a border, as it does in the reference. */
.product-options-bottom .quantity-box,
.product-options-bottom .quantity-box.input-group {
    width: 127px !important;
    height: 50px !important;
    border: none !important;
    border-radius: 3px !important;
    background: var(--pd-bg-light) !important;
}

.product-options-bottom .quantity-box .btn-number {
    width: 40px !important;
    height: 50px !important;
    min-width: 40px !important;
    background: transparent !important;
    font-size: 16px !important;
}

.product-options-bottom .quantity-box .cart-qty-field,
.product-options-bottom .quantity-box .input-number {
    width: 47px !important;
    min-width: 47px !important;
    height: 50px !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px !important;
}

.product-info-buy-button {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
}

/* The cart button: outlined, not filled, which is what the reference does. */
.product-info-buy-button .btn-add-to-cart {
    width: 100%;
    height: 50px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 3px !important;
    border: 1px solid var(--pd-primary) !important;
    background: #fff !important;
    color: var(--pd-primary) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    padding: 0 20px !important;
    transition: background 0.2s ease, color 0.2s ease;
}

/* Drawn rather than placed, so rewriting the button's text cannot lose it. The
   mask keeps it on currentColor, so it inverts with the button on hover. */
.product-info-buy-button .btn-add-to-cart::before {
    content: '';
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.3 5H21l-2 7H7.38M20 16H8L6 3H3'/%3E%3Ccircle cx='8' cy='20' r='1'/%3E%3Ccircle cx='19' cy='20' r='1'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.3 5H21l-2 7H7.38M20 16H8L6 3H3'/%3E%3Ccircle cx='8' cy='20' r='1'/%3E%3Ccircle cx='19' cy='20' r='1'/%3E%3C/svg%3E") center / contain no-repeat;
}

.product-info-buy-button .btn-add-to-cart:hover:not(:disabled) {
    background: var(--pd-primary) !important;
    color: #fff !important;
}

.product-info-buy-button .btn-add-to-cart:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* === The second row: the other route to checkout, and the icon actions === */
.product-secondary-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

/* .btn.whatsapp-order-btn elsewhere is also two classes and sits later in the
   cascade, so matching its specificity is not enough to take the radius and the
   type size off it. */
.product-secondary-actions .btn.whatsapp-order-btn {
    flex: 1 1 auto;
    height: 50px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 3px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 0 20px !important;
}

.product-secondary-actions .btn.whatsapp-order-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.product-secondary-actions .box-icon {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pd-border);
    border-radius: 3px;
    background: #fff;
    color: var(--pd-primary);
    transition: border-color 0.2s ease, color 0.2s ease;
}

.product-secondary-actions .box-icon:hover {
    border-color: var(--pd-primary);
}

.product-secondary-actions .box-icon.wishlist_icon_active {
    color: #e53935;
    border-color: #e53935;
}

.product-total-price {
    margin-top: 18px;
}

/* styles.css already carries the reference's own rules for these class names,
   and its .product-options-bottom .btn-add-to-cart drops to 46px here. The
   second row has to follow it or the two rows stop lining up. */
@media only screen and (max-width: 1149px) {
    .product-secondary-actions .btn.whatsapp-order-btn {
        height: 46px;
    }

    .product-secondary-actions .box-icon {
        flex: 0 0 46px;
        width: 46px;
        height: 46px;
    }
}

@media (max-width: 575.98px) {
    /* Too narrow to stand the stepper and the cart button side by side. */
    .product-options-bottom {
        display: block;
    }

    /* Stacked, the two margins add up to a 40px hole between them. */
    .product-options-bottom .product-info-buy-button {
        margin-top: 14px !important;
    }

    .product-options-bottom .btn-add-to-cart {
        margin-top: 0 !important;
    }

    /* The icon actions keep their size; WhatsApp takes what is left. */
    .product-secondary-actions {
        margin-top: 14px;
    }
}

/* === Quantity Selector === */
.product-quantity {
    margin-bottom: 16px !important;
}

.quantity-box,
.quantity-box.input-group {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid var(--pd-border) !important;
    border-radius: 6px !important;
    background: var(--pd-bg) !important;
    overflow: hidden;
    width: auto !important;
    flex-wrap: nowrap !important;
}

.quantity-box .btn-number,
.quantity-box .btn.btn-number,
.input-group .btn-number {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border: none !important;
    background: var(--pd-bg-light) !important;
    color: var(--pd-primary) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s ease;
    padding: 0 !important;
    border-radius: 0 !important;
}

.quantity-box .btn-number:hover,
.input-group .btn-number:hover {
    background: var(--pd-border) !important;
}

.quantity-box .btn-number:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.quantity-box .cart-qty-field,
.quantity-box .input-number,
.input-group .input-number {
    width: 48px !important;
    height: 32px !important;
    min-width: 48px !important;
    border: none !important;
    border-left: 1px solid var(--pd-border) !important;
    border-right: 1px solid var(--pd-border) !important;
    background: var(--pd-bg) !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--pd-primary) !important;
    border-radius: 0 !important;
    flex: 0 0 auto !important;
}

/* === Action Buttons === */
.__btn-grp,
.element-center {
    display: flex !important;
    gap: 12px !important;
    margin-top: 20px !important;
    flex-wrap: wrap;
    align-items: center !important;
}

/* WhatsApp Button - Green.
   :not(.box-icon) because the product card's WhatsApp icon carries
   send-whatsapp-order too -- that class is what its click handler looks for --
   and this rule was reshaping it into a green rounded rectangle. It is a white
   circle beside the heart on every other page, and now here as well. */
.whatsapp-order-btn:not(.box-icon),
.send-whatsapp-order:not(.box-icon),
.btn.whatsapp-order-btn {
    background: var(--pd-green) !important;
    border: none !important;
    color: var(--pd-bg) !important;
    padding: 8px 18px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    min-height: 38px !important;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.whatsapp-order-btn:not(.box-icon):hover,
.send-whatsapp-order:not(.box-icon):hover,
.btn.whatsapp-order-btn:hover {
    background: var(--pd-green) !important; filter: brightness(0.85);
    color: var(--pd-bg) !important;
}

/* Add to Cart Button - Primary Dark Blue */
.btn.btn--primary,
.action-add-to-cart-form,
button.btn.btn--primary {
    background: var(--pd-primary) !important;
    border: none !important;
    color: var(--pd-bg) !important;
    padding: 8px 18px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 38px !important;
}

.btn.btn--primary:hover,
.action-add-to-cart-form:hover,
button.btn.btn--primary:hover {
    background: var(--pd-primary) !important;
    filter: brightness(0.85);
    color: var(--pd-bg) !important;
}

/* Buy Now Button */
.btn.btn-secondary.action-buy-now-this-product {
    background: var(--pd-primary) !important;
    border: none !important;
    color: var(--pd-bg) !important;
    padding: 12px 24px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* ========================================
   MODERN PRODUCT TABS SECTION
   ======================================== */

.product-tabs-section {
    background: var(--pd-bg);
    border: 1px solid var(--pd-border);
    border-radius: 12px;
    overflow: hidden;
}

/* Modern Tab Navigation */
.modern-tabs {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--pd-bg-light);
    border-bottom: 1px solid var(--pd-border);
}

.modern-tabs .tab-item {
    flex: 1;
}

.modern-tabs .tab-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 24px;
    font-size: 14px;
    font-weight: 500;
    color: var(--pd-text-light);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    position: relative;
}

.modern-tabs .tab-link i {
    font-size: 18px;
}

.modern-tabs .tab-link:hover {
    color: var(--pd-primary);
    background: rgba(0, 82, 234, 0.04);
}

.modern-tabs .tab-link.active {
    color: var(--pd-primary);
    background: var(--pd-bg);
    border-bottom-color: var(--pd-primary);
    font-weight: 600;
}

.modern-tabs .review-count {
    background: var(--pd-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 24px;
    text-align: center;
}

/* Tab Content */
.modern-tab-content {
    padding: 24px;
}

/* Overview Content */
.overview-content {
    font-size: 15px;
    line-height: 1.7;
    color: var(--pd-text);
}

.overview-content .product-description {
    max-height: none;
    overflow: visible;
}

.overview-content .product-description h1,
.overview-content .product-description h2,
.overview-content .product-description h3,
.overview-content .product-description h4,
.overview-content .product-description h5,
.overview-content .product-description h6 {
    color: var(--pd-text);
    margin-top: 20px;
    margin-bottom: 12px;
    font-weight: 600;
}

.overview-content .product-description p {
    margin-bottom: 16px;
}

.overview-content .product-description ul,
.overview-content .product-description ol {
    padding-left: 20px;
    margin-bottom: 16px;
}

.overview-content .product-description li {
    margin-bottom: 8px;
}

/* Product Video */
.product-video {
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

.product-video .video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.product-video .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--pd-text-light);
}

.empty-state i {
    font-size: 40px;
    color: var(--pd-border);
    margin-bottom: 16px;
    display: block;
}

.empty-state p {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 8px 0;
    color: var(--pd-text);
}

/* ========================================
   RATING SUMMARY CARD
   ======================================== */

.rating-summary-card {
    display: flex;
    gap: 32px;
    padding: 24px;
    background: var(--pd-bg-light);
    border-radius: 12px;
    margin-bottom: 24px;
}

.rating-overview {
    flex: 0 0 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rating-score {
    text-align: center;
}

.rating-score .score-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--pd-text);
    line-height: 1;
    display: block;
}

.rating-score .score-stars {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin: 12px 0;
}

.rating-score .score-stars i {
    font-size: 14px;
    color: #fbbf24;
}

.rating-score .total-ratings {
    font-size: 13px;
    color: var(--pd-text-light);
}

/* Rating Bars */
.rating-bars {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rating-bar-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rating-bar-item .bar-label {
    flex: 0 0 50px;
    font-size: 13px;
    font-weight: 500;
    color: var(--pd-text);
    display: flex;
    align-items: center;
    gap: 4px;
}

.rating-bar-item .bar-label i {
    font-size: 11px;
    color: #fbbf24;
}

.rating-bar-item .bar-track {
    flex: 1;
    height: 8px;
    background: var(--pd-border);
    border-radius: 4px;
    overflow: hidden;
}

.rating-bar-item .bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.rating-bar-item .bar-fill.excellent { background: #22c55e; }
.rating-bar-item .bar-fill.good { background: #84cc16; }
.rating-bar-item .bar-fill.average { background: #fbbf24; }
.rating-bar-item .bar-fill.below-average { background: #f97316; }
.rating-bar-item .bar-fill.poor { background: #ef4444; }

.rating-bar-item .bar-count {
    flex: 0 0 30px;
    font-size: 13px;
    font-weight: 500;
    color: var(--pd-text-light);
    text-align: right;
}

/* Reviews List Header */
.reviews-list-header {
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--pd-border);
}

.reviews-list-header h5 {
    font-size: 16px;
    font-weight: 600;
    color: var(--pd-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.reviews-list-header h5 i {
    color: var(--pd-primary);
}

/* Load More Button */
.load-more-wrap {
    text-align: center;
    padding-top: 20px;
}

.btn-load-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 500;
    color: var(--pd-primary);
    background: rgba(0, 82, 234, 0.08);
    border: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-load-more:hover {
    background: var(--pd-primary);
    color: #fff;
}

/* Responsive */
@media (max-width: 767.98px) {
    .modern-tabs .tab-link {
        padding: 12px 16px;
        font-size: 13px;
    }

    .modern-tabs .tab-link i {
        font-size: 16px;
    }

    .modern-tabs .tab-link span:not(.review-count) {
        display: none;
    }

    .modern-tab-content {
        padding: 16px;
    }

    .rating-summary-card {
        flex-direction: column;
        gap: 20px;
        padding: 16px;
    }

    .rating-overview {
        flex: none;
    }

    .rating-score .score-value {
        font-size: 40px;
    }
}

/* === Sidebar Widgets === */
.__inline-27,
.__inline-28,
.__inline-31,
.sidebar-widget {
    background: var(--pd-bg);
    border: 1px solid var(--pd-border);
    border-radius: 8px;
    padding: 0;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: none;
}

.__inline-27 h6,
.__inline-28 h6,
.__inline-31 h6,
.sidebar-widget h6 {
    font-size: 16px;
    font-weight: 600;
    color: var(--pd-text);
    padding: 16px 20px;
    margin: 0;
    border-bottom: 1px solid var(--pd-border);
    background: var(--pd-bg-light);
}

/* Sidebar Section - More from store */
.sidebar-section {
    background: var(--pd-bg);
    border: 1px solid var(--pd-border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.sidebar-section .sidebar-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--pd-text);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pd-border);
}

.sidebar-section .related-product {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid var(--pd-border);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.sidebar-section .related-product:hover {
    border-color: var(--pd-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.sidebar-section .related-product-image {
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    object-fit: contain;
    border-radius: 6px;
    background: var(--pd-bg-light);
    padding: 4px;
}

.sidebar-section .related-product-info {
    flex: 1;
    min-width: 0;
}

.sidebar-section .related-product-info h6 {
    font-size: 14px;
    font-weight: 500;
    color: var(--pd-text);
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.sidebar-section .related-product-info .star-rating {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 4px;
}

.sidebar-section .related-product-info .star-rating i {
    font-size: 12px;
    color: #fbbf24;
}

.sidebar-section .related-product-info .star-rating span {
    font-size: 12px;
    color: var(--pd-text-light);
    margin-left: 4px;
}

.sidebar-section .related-product-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--pd-primary);
}

/* Seller Info */
.__seller-author {
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    border-radius: 0;
}

.__img-60 {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--pd-border);
}

.__seller-author h6 {
    font-size: 15px;
    font-weight: 600;
    color: var(--pd-text);
    margin: 0 0 4px 0;
    padding: 0;
    background: transparent;
    border: none;
}

/* Stats */
.__h-79px {
    padding: 16px;
    text-align: center;
    background: var(--pd-bg-light);
    border-radius: 6px;
    min-height: auto;
}

.__h-79px strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--pd-primary);
    margin-bottom: 4px;
}

.__text-12px {
    font-size: 13px;
    color: var(--pd-text-light);
}

/* Chat Button */
.chat_with_seller-buttons .btn {
    width: 100%;
    background: var(--pd-primary);
    border: none;
    color: var(--pd-bg);
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
}

/* === Page Background === */
.__inline-23 {
    background: var(--pd-bg-light);
    padding: 24px 0;
}

/* === Responsive === */
@media (max-width: 991px) {
    .__inline-24,
    .details h1 {
        font-size: 24px !important;
    }
}

@media (max-width: 767px) {
    .__btn-grp,
    .element-center {
        flex-direction: column;
    }

    .whatsapp-order-btn,
    .btn.btn--primary {
        width: 100% !important;
    }
}

/* === Similar Products Section - Modern Design === */
.similar-products-section {
    background: var(--pd-bg);
    border: 1px solid var(--pd-border);
    border-radius: 12px;
    padding: 24px;
}

.similar-products-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--pd-border);
}

.similar-products-section .section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--pd-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.similar-products-section .section-title::before {
    content: '';
    width: 4px;
    height: 20px;
    background: var(--pd-primary);
    border-radius: 2px;
}

.similar-products-section .view-all-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--pd-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    background: rgba(0, 82, 234, 0.08);
    transition: all 0.2s ease;
}

.similar-products-section .view-all-link:hover {
    background: var(--pd-primary);
    color: #fff;
}

/* Modern Product Card */
.modern-product-card {
    background: var(--pd-bg);
    border: 1px solid var(--pd-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
}

.modern-product-card:hover {
    border-color: var(--pd-primary);
    box-shadow: 0 8px 24px rgba(0, 82, 234, 0.12);
    transform: translateY(-4px);
}

.modern-product-card .product-image-wrap {
    position: relative;
    background: var(--pd-bg-light);
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    overflow: hidden;
}

.modern-product-card .product-image-wrap img {
    max-width: 100%;
    max-height: 150px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.modern-product-card:hover .product-image-wrap img {
    transform: scale(1.05);
}

/* Discount Badge */
.modern-product-card .discount-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 2;
}

/* Product Actions - Hover Effect */
.modern-product-card .product-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s ease;
    z-index: 2;
}

.modern-product-card:hover .product-actions {
    opacity: 1;
    transform: translateX(0);
}

.modern-product-card .action-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--pd-bg);
    color: var(--pd-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.modern-product-card .action-btn:hover {
    background: var(--pd-primary);
    color: #fff;
    transform: scale(1.1);
}

.modern-product-card .action-btn i {
    font-size: 16px;
}

/* Product Content */
.modern-product-card .product-content {
    padding: 16px;
}

.modern-product-card .product-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--pd-text);
    text-decoration: none;
    display: block;
    line-height: 1.4;
    height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 8px;
    transition: color 0.2s ease;
}

.modern-product-card .product-title:hover {
    color: var(--pd-primary);
}

.modern-product-card .product-rating {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 10px;
}

.modern-product-card .product-rating i {
    font-size: 12px;
    color: #fbbf24;
}

.modern-product-card .product-rating .rating-count {
    font-size: 12px;
    color: var(--pd-text-light);
    margin-left: 4px;
}

.modern-product-card .product-price-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.modern-product-card .current-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--pd-primary);
}

.modern-product-card .old-price {
    font-size: 13px;
    font-weight: 400;
    color: var(--pd-text-light);
    text-decoration: line-through;
}

/* Responsive */
@media (max-width: 767.98px) {
    .similar-products-section {
        padding: 16px;
    }

    .similar-products-section .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .similar-products-section .view-all-link {
        padding: 6px 12px;
        font-size: 13px;
    }

    .modern-product-card .product-image-wrap {
        height: 140px;
        padding: 12px;
    }

    .modern-product-card .product-content {
        padding: 12px;
    }

    .modern-product-card .product-title {
        font-size: 13px;
        height: 36px;
    }

    .modern-product-card .current-price {
        font-size: 14px;
    }

    .modern-product-card .product-actions {
        opacity: 1;
        transform: translateX(0);
    }

    .modern-product-card .action-btn {
        width: 32px;
        height: 32px;
    }

    .modern-product-card .action-btn i {
        font-size: 14px;
    }
}

/* === Additional Legacy Styles === */
.pro {
    font-weight: 600;
    font-size: 16px;
}

.details .h3 {
    font-weight: 700 !important;
    font-size: 18px;
}

.single_product_review {
    box-shadow: 0px 0px 8px #00000026;
    border-radius: 6px;
}

.product_review_rating {
    color: var(--pd-primary);
    font-size: 14px;
    font-weight: 600;
}

.overall_review {
    font-weight: 700 !important;
    font-size: 22px;
}

.specification .h6 {
    font-weight: 700 !important;
    font-size: 16px !important;
}

/* ========================================
   MAIN IMAGE CAROUSEL - SINGLE ITEM VIEW
   ======================================== */

/* Main image container - MUST have overflow visible for zoom */
.cz-preview {
    background: var(--pd-bg);
    border-radius: 12px;
    border: 1px solid var(--pd-border);
    padding: 15px;
    width: 100%;
    overflow: visible !important;
    position: relative;
}

/* FORCE single item display in main carousel */
#sync1.owl-carousel,
.product-thumbnail-slider.owl-carousel {
    width: 100% !important;
    display: block !important;
    overflow: visible !important;
}

#sync1.owl-carousel .owl-stage-outer,
.product-thumbnail-slider.owl-carousel .owl-stage-outer {
    width: 100% !important;
    overflow: visible !important;
}

#sync1.owl-carousel .owl-stage,
.product-thumbnail-slider.owl-carousel .owl-stage {
    width: 100% !important;
}

/* CRITICAL: Force each owl-item to 100% width */
#sync1.owl-carousel .owl-item,
.product-thumbnail-slider.owl-carousel .owl-item {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

/* Product preview item - centered image */
#sync1 .product-preview-item,
.product-thumbnail-slider .product-preview-item {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 350px;
    background: var(--pd-bg);
}

#sync1 .product-preview-item img,
.product-thumbnail-slider .product-preview-item img {
    max-width: 100% !important;
    max-height: 400px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
}

/* ========================================
   MODERN STORE INFO CARD
   ======================================== */

.store-info-card {
    background: var(--pd-bg);
    border: 1px solid var(--pd-border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

/* Store Header */
.store-header {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--pd-border);
    margin-bottom: 16px;
    position: relative;
}

.store-header:hover {
    text-decoration: none;
}

.store-header:hover .store-name {
    color: var(--pd-primary);
}

.store-logo {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--pd-bg-light);
    border: 1px solid var(--pd-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.store-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.store-details {
    flex: 1;
    min-width: 0;
}

.store-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--pd-text);
    margin: 0 0 4px 0;
    line-height: 1.3;
    transition: color 0.2s ease;
}

.store-badge {
    font-size: 12px;
    color: var(--pd-text-light);
    display: flex;
    align-items: center;
    gap: 4px;
}

.store-badge i {
    font-size: 12px;
}

.store-status-badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.store-status-badge.vacation {
    background: #fef3c7;
    color: #d97706;
}

/* Store Stats */
.store-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 12px 0;
    margin-bottom: 16px;
    background: var(--pd-bg-light);
    border-radius: 8px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-item i {
    font-size: 16px;
}

.stat-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--pd-text);
}

.stat-label {
    font-size: 13px;
    color: var(--pd-text-light);
}

.stat-divider {
    width: 1px;
    height: 24px;
    background: var(--pd-border);
}

/* Store Actions */
.store-actions {
    display: flex;
    gap: 10px;
}

.btn-outline-store {
    flex: 1;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--pd-text);
    background: var(--pd-bg);
    border: 1px solid var(--pd-border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-outline-store:hover {
    background: var(--pd-bg-light);
    border-color: var(--pd-primary);
    color: var(--pd-primary);
    text-decoration: none;
}

.btn-chat-vendor {
    flex: 1;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--pd-bg);
    background: var(--pd-primary);
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
    text-decoration: none;
    cursor: pointer;
}

.btn-chat-vendor:hover {
    background: var(--pd-primary); filter: brightness(0.85);
    color: var(--pd-bg);
    text-decoration: none;
}

.btn-chat-vendor:disabled {
    background: var(--pd-text-light);
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 575.98px) {
    .store-info-card {
        padding: 16px;
    }

    .store-logo {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }

    .store-name {
        font-size: 14px;
    }

    .store-stats {
        gap: 12px;
        padding: 10px;
    }

    .stat-value {
        font-size: 14px;
    }

    .stat-label {
        font-size: 11px;
    }

    .store-actions {
        flex-direction: column;
    }

    .btn-outline-store,
    .btn-chat-vendor {
        width: 100%;
    }
}