:root {
            --primary-color: #0071bc;
            --secondary-color: #0071bc;
            --text-color: #333333;
            --bg-color: white;
            --border-color: #dee2e6;
            --hover-color: #e9eef4;
            --accent-color: #0071bc;
            --star-color: #ffc107;
            --modal-bg: rgba(0, 0, 0, 0.8);
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.6;
            padding: 0;
            margin: 0;
            font-size: 12px;
        }
        .bscontainer {
            width: 100%;
           margin-top: 20px;
            margin: 0;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .bscontainer-main {
            flex: 0.75;
            min-width: 300px;
            width: 100%;
        }
        .bscontainer-sidebar {
            flex: 0.25;
            min-width: 250px;
            background-color: white;
            border-radius: 12px;
            padding: 20px;
            border: 1px solid #dee2e6;
            position: sticky;
            top: 20px;
            align-self: flex-start;
            max-height: calc(100vh - 40px);
            overflow-y: auto;
        }
		
        /* Product photos section */
        .bshoper-product-photos {
            background-color: white;
            overflow: hidden;
            margin-bottom: 3px;
            display: flex;
            flex-direction: column;
            width: 100%;
        }
        .bshoper-main-photo-container {
            position: relative;
            width: 100%;
            height: 400px;
            display: block;
			border-radius:6px;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            cursor: pointer;
        }
        .bshoper-main-photo {
            max-height: 100%;
            max-width: 100%;
			margin: 0px auto;
        }
        /* Zoom container */
        
        
        /* Product info section */
        .bshoper-product-info {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 0px;
            min-height: 540px;
            display: flex;
            flex-direction: column;
            width: 100%;
        }
        .bshoper-product-info-content {
            padding: 20px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .bshoper-product-title {
            font-size: 1.6rem;
            font-weight: 600;
            color: #333333;
        }
        .bshoper-product-info-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px solid #dee2e6;
}
        .bshoper-product-stars {
    color: #ffc107;
    display: flex;
    align-items: center;
    gap: 5px;
	margin-bottom: 3px;
}
        .bshoper-product-stat-value {
            color: #333333;
            font-weight: 600;
            font-size: 0.9rem;
        }
        /* Modern highlights section */
        .bshoper-product-modern {
            margin-bottom: 15px;
        }
        .bshoper-product-modern h3 {
            font-size: 1.1rem;
            font-weight: 600;
            color: #333333;
            margin-bottom: 10px;
            padding-bottom: 5px;
        }
        .bshoper-product-modern ul {
            list-style: none;
            padding: 0;
        }
        .bshoper-product-modern li {
            color: #6b7280;
            font-size: 0.85rem;
            position: relative;
            padding-left: 10px;
            line-height: 1.5rem;
        }
        .bshoper-product-modern li::before {
            content: "•";
            color: #333333;
            font-weight: bold;
            position: absolute;
            left: 0;
            top: 0;
        }
        .bshoper-product-modern strong {
            color: #333333;
            font-weight: 600;
        }
        /* Variants section */
        .bshoper-product-variants {
            margin-bottom: 0px;
			padding:10px;
        }
        .bshoper-variant-type {
            font-size: 1.0rem;
            font-weight: 600;
            color: #333333;
            margin-bottom: 8px;
            padding-bottom: 4px;
        }
        .bshoper-variant-photos {
            display: flex;
            gap: 8px;
            margin-bottom: 10px;
            flex-wrap: wrap;
            overflow-x: auto;
            padding-bottom: 5px;
			padding-top:5px;
			padding-left:2px;
        }
        .bshoper-variant-photo {
            width: 60px;
            height: 60px;
            min-width: 60px;
            object-fit: cover;
            border-radius: 6px;
            cursor: pointer;
            border: 2px solid transparent;
            transition: border-color 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease, filter 0.12s ease !important;
            transform: none !important;
        }
        .bshoper-variant-photo:hover {
            border-color: #000000;
        }
        .bshoper-variant-photo.active {
            border-color: #000000 !important;
            border-width: 1px !important;
            box-shadow: 0 0 0 1px #000000 !important;
            padding: 3px;
        }
        .bshoper-variant-texts {
            display: flex;
            gap: 8px;
            margin-bottom: 10px;
            flex-wrap: wrap;
            overflow-x: auto;
            padding-bottom: 5px;
        }
        .bshoper-variant-text {
            padding: 6px 12px;
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.3s ease;
            white-space: nowrap;
			color:black;
        }
        .bshoper-variant-text:hover {
            border-color: #000000;
        }
        .bshoper-variant-text.active {
            border-color: #000000;
            border-width: 2px;
            background-color: white;
			color:black;
        }
        /* Specific CSS for product overview container to avoid conflicts */
        .bshoper-product-overview-container {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 20px;
            border: 1px solid #dee2e6;
            transition: all 0.3s ease;
            width: 100%;
        }
        .bshoper-product-overview-header {
    background-color: #f8f9faab;
    color: #333333;
    padding: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    border-bottom: 1px solid #dee2e6;
}
        .bshoper-product-overview-header:hover {
            background-color: #e9eef4;
        }
        .bshoper-product-overview-header h2 {
            font-size: 1.6rem;
            font-weight: 600;
            margin: 0;
            display: flex;
            align-items: center;
            flex: 1;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .bshoper-product-toggle-button {
            margin-left: 15px;
            flex-shrink: 0;
            transition: transform 0.3s ease;
        }
        .bshoper-product-toggle-button .icon {
            width: 20px;
            height: 20px;
            display: block;
        }
        .bshoper-product-toggle-button .icon__group {
            stroke: #333333;
            stroke-width: 2;
        }
        .bshoper-product-overview-container .bshoper-product-overview-header.collapsed .bshoper-product-toggle-button {
            transform: rotate(180deg);
        }
        .bshoper-product-overview-content {
            overflow: hidden;
            transition: all 0.5s ease;
            width: 100%;
        }
        .bshoper-product-overview-container .bshoper-product-overview-header.collapsed + .bshoper-product-overview-content {
            max-height: 0;
            padding: 0;
        }
        .bshoper-product-overview-table {
            width: 100%;
            border-collapse: collapse;
            background-color: white;
            table-layout: auto;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .bshoper-product-overview-table td {
            padding: 14px 18px;
            border-bottom: 1px solid #dee2e6;
            text-align: left;
            font-size: 0.9rem;
            color: #333333;
        }
        .bshoper-product-overview-table tr:last-child td {
            border-bottom: none;
        }
        .bshoper-product-overview-table strong {
    background-color: var(--hover-color);
    color: black;
    padding: 4px 8px;
    border-radius: 4px;
    width: 150px;
    display: inline-block;
    font-size: 0.8rem;
    vertical-align: middle;
}
        .bshoper-product-highlight {
    background-color: #e9eef4;
    border-left: 4px solid #333333;
    padding: 15px 20px;
    margin: 15px 0;
    border-radius: 4px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333333;
    font-size: 0.9rem;
    font-weight: 700;
}
        /* Specific CSS for reviews container to avoid conflicts */
		/* See More Reviews Button */
.see-more-reviews-btn {
    display: block;
    width: 50%;
    padding: 10px 15px;
    color: #0071bc;
    border: 1px solid #000000;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
    margin: 0 auto;
    background-color: #ffffff;
    color: #333333;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.see-more-reviews-btn:hover {
    background-color: #f0f0f0;
    color: #333333;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Hidden Reviews Container */
.bshoper-user-reviews-hidden {
    display: none; /* Initially hidden */
}
        .bshoper-reviews-container {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 40px;
            border: 1px solid #dee2e6;
            transition: all 0.3s ease;
            width: 100%;
			max-height:100%;
        }
        .bshoper-reviews-header {
            background-color: #f8f9fa;
            color: #333333;
            padding: 20px;
            display: flex;
            align-items: center;
            cursor: pointer;
            width: 100%;
            border-bottom: 1px solid #dee2e6;
        }
        .bshoper-reviews-header:hover {
            background-color: #e9eef4;
        }
        .bshoper-reviews-header h2 {
            font-size: 1.6rem;
            font-weight: 600;
            margin: 0;
            display: flex;
            align-items: center;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .bshoper-reviews-rating-info {
            display: flex;
            align-items: center;
            margin-left: 15px;
            margin-right: auto;
        }
        .bshoper-reviews-stars {
            color: #ffc107;
            font-size: 1.1rem;
            text-align:center;
        }
        .bshoper-reviews-rating-number {
            color: #333333;
            font-weight: 600;
            font-size: 1.0rem;
        }
        .bshoper-reviews-toggle-button {
            margin-left: 15px;
            flex-shrink: 0;
            transition: transform 0.3s ease;
        }
        .bshoper-reviews-toggle-button .icon {
            width: 20px;
            height: 20px;
            display: block;
        }
        .bshoper-reviews-toggle-button .icon__group {
            stroke: #333333;
            stroke-width: 2;
        }
        .bshoper-reviews-container .bshoper-reviews-header.collapsed .bshoper-reviews-toggle-button {
            transform: rotate(180deg);
        }
        .bshoper-reviews-content {
            overflow: hidden;
            transition: all 0.5s ease;
            width: 100%;
            max-height:100%;
        }
        .bshoper-reviews-container .bshoper-reviews-header.collapsed + .bshoper-reviews-content {
            max-height: 0;
            padding: 0;
        }
        /* Combined reviews content */
        .bshoper-reviews-combined {
            display: flex;
            flex-wrap: wrap;
            padding: 20px;
        }
        .bshoper-rating-summary {
            flex: 1;
            min-width: 300px;
            padding-right: 20px;
            border-right: 1px solid #dee2e6;
        }
        .bshoper-user-reviews {
            flex: 2;
            min-width: 300px;
            padding-left: 20px;
        }
        .bshoper-average-rating {
            font-size: 2.8rem;
            font-weight: 700;
            color: #333333;
            text-align:center;
        }
        .bshoper-rating-details {
            flex: 1;
        }
        .bshoper-rating-bar {
            display: flex;
            align-items: center;
            margin: 5px 0;
        }
        .bshoper-rating-bar-label {
            width: 50px;
            font-size: 0.85rem;
            color: #6b7280;
        }
        .bshoper-rating-bar-container {
            flex: 1;
            height: 8px;
            background-color: #e5e7eb;
            border-radius: 4px;
            margin: 0 10px;
            overflow: hidden;
        }
        .bshoper-rating-bar-filled {
            height: 100%;
            background-color: #ffc107;
            border-radius: 4px;
        }
        .bshoper-rating-count {
            font-size: 0.75rem;
            color: #6b7280;
        }
        /* User Reviews */
        .bshoper-review-item {
            padding: 15px 0;
            border-bottom: 1px solid #dee2e6;
        }
        .bshoper-review-item:last-child {
            border-bottom: none;
        }
        .bshoper-review-header {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .bshoper-user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--hover-color);
            color: black;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 12px;
            font-size: 16px;
            text-transform: uppercase;
        }
        .bshoper-user-info {
            flex: 1;
        }
        .bshoper-user-name {
            font-weight: 600;
            color: #333333;
            font-size: 0.95rem;
        }
        .bshoper-verified {
            background-color: var(--hover-color);
            color: black;
            font-size: 0.7rem;
            padding: 2px 8px;
            border-radius: 10px;
            margin-left: 8px;
        }
        .bshoper-review-date {
            font-size: 0.75rem;
            color: #6b7280;
        }
        .bshoper-review-rating {
            display: flex;
            color: #ffc107;
            margin: 5px 0;
        }
        .bshoper-review-text {
            margin-top: 10px;
            color: #333333;
            line-height: 1.5;
            font-size: 0.9rem;
        }
        /* Photo thumbnails for reviews */
        .bshoper-review-photos {
            display: flex;
            gap: 10px;
            margin-top: 15px;
            flex-wrap: wrap;
            overflow-x: auto;
            padding-bottom: 5px;
        }
        .bshoper-review-photo-thumbnail {
            width: 80px;
            height: 80px;
            min-width: 80px;
            object-fit: cover;
            border-radius: 6px;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.3s ease;
            margin: 0;
        }
        .bshoper-review-photo-thumbnail:hover {
            border-color: var(--primary-color);
            transform: scale(1.05);
        }
        .bshoper-main-photo,
        .bshoper-photo-thumbnail,
        .bshoper-review-photo-thumbnail {
            color: transparent;
            background: #f1f5f9;
        }
        .bshoper-main-photo[data-loaded="1"],
        .bshoper-photo-thumbnail[data-loaded="1"],
        .bshoper-review-photo-thumbnail[data-loaded="1"] {
            background: none;
        }
        .bshoper-main-photo[data-error="1"],
        .bshoper-photo-thumbnail[data-error="1"],
        .bshoper-review-photo-thumbnail[data-error="1"] {
            color: #9ca3af;
            background: #f3f4f6;
        }
        .bshoper-review-video-wrapper {
            position: relative;
            width: 80px;
            height: 80px;
            min-width: 80px;
        }
        .bshoper-review-video-thumbnail {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 6px;
        }
        .bshoper-review-video-play {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            font-weight: 700;
            color: #ffffff;
            background: rgba(0, 0, 0, 0.35);
            border-radius: 6px;
            pointer-events: none;
        }
        /* Price card in sidebar */
        .price-card {
            background-color: white;
            border-radius: 12px;
            margin-bottom: 20px;
        }
        .price-card h3 {
            font-size: 1.2rem;
            font-weight: 600;
            color: #333333;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #dee2e6;
        }
        .price-current {
            font-size: 2rem;
            font-weight: 700;
            color: #000000;
        }
        .price-original {
            font-size: 1.2rem;
            color: #6b7280;
            text-decoration: line-through;
        }
        .price-save {
            font-size: 0.9rem;
            color: #d9534f;
            font-weight: 600;
            margin-bottom: 15px;
        }
                .price-button {
            display: block;
            width: 100%;
            padding: 12px;
            /* background-color: #0071bc; */ /* Removed */
            background-color: #d3031c; /* New background color for Buy Now */
            color: white; /* Ensure text is white */
            border: none; /* Remove default border */
            border-radius: 6px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            text-align: center;
            transition: background-color 0.3s ease, transform 0.2s ease; /* Added transform for hover */
            margin-bottom: 10px;
        }
        /* Specific style for Buy Now button hover */
        .price-button:hover {
            /* background-color: #00568c; */ /* Removed */
            background-color: #b00216; /* Darker red for Buy Now hover */
            transform: translateY(-2px); /* Slight lift effect on hover */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
        }
        .price-button-secondary {
            background-color: white; /* Keep background white */
            /* color: #0071bc; */ /* Removed */
            color: black; /* New text color for Add to Cart */
            /* border: 1px solid #0071bc; */ /* Removed */
            border: 1px solid #000000; /* New black border for Add to Cart */
        }
        /* Specific style for Add to Cart button hover */
        .price-button-secondary:hover {
            /* background-color: #f8f9fa; */ /* Removed */
            background-color: #f0f0f0; /* Slightly darker background for Add to Cart hover */
            color: #333333; /* Optional: Darken text on hover for contrast */
            transform: translateY(-2px); /* Slight lift effect on hover */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
        }
        /* Ensure disabled buttons have appropriate styles */
        .price-button:disabled {
             background-color: #6c757d;
             color: #ffffff;
             border-color: #6c757d;
             cursor: not-allowed;
             opacity: 0.65;
             transform: none; /* Remove lift effect when disabled */
             box-shadow: none; /* Remove shadow when disabled */
        }
        .price-button.price-button-secondary:disabled {
             background-color: #e9ecef;
             color: #6c757d;
             border-color: #adb5bd; /* Keep the border visible but greyed out */
             transform: none;
             box-shadow: none;
        }
        /* CTA preload spinner (real PDP flow): always visible and centered */
        #pre-shopDeskop .cta-loader-btn,
        #pre-shopMobile .cta-loader-btn {
            position: relative !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            line-height: 0 !important;
            color: transparent !important;
            overflow: hidden !important;
        }
        #pre-shopDeskop .cta-loader-btn .cta-loader-center,
        #pre-shopMobile .cta-loader-btn .cta-loader-center {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 20px !important;
            height: 20px !important;
            pointer-events: none !important;
        }
        #pre-shopDeskop .cta-loader-btn .cta-loader-ring,
        #pre-shopMobile .cta-loader-btn .cta-loader-ring {
            display: block !important;
            width: 18px !important;
            height: 18px !important;
            min-width: 18px !important;
            min-height: 18px !important;
            box-sizing: border-box !important;
            border-radius: 999px !important;
            border: 2px solid rgba(255, 255, 255, 0.40) !important;
            border-top-color: #ffffff !important;
            border-right-color: #ffffff !important;
            animation: bshopCtaSpinGlobal .78s linear infinite !important;
        }
        #pre-shopDeskop .cta-loader-btn.price-button-secondary .cta-loader-ring,
        #pre-shopMobile .cta-loader-btn.price-button-secondary .cta-loader-ring {
            border-color: rgba(15, 23, 42, 0.26) !important;
            border-top-color: #111827 !important;
            border-right-color: #111827 !important;
        }
        @keyframes bshopCtaSpinGlobal {
            to { transform: rotate(360deg); }
        }
        /* --- Also update Mobile Price Card Button Styles --- */
        /* Find the .mobile-price-card .price-button rules (around line 1050) and update them similarly */
        .mobile-price-card .price-button {
            display: block;
            width: 100%;
            padding: 12px;
            /* background-color: #0071bc; */ /* Removed */
            background-color: #d3031c; /* New background color for Buy Now */
            color: white; /* Ensure text is white */
            border: none; /* Remove default border */
            border-radius: 6px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            text-align: center;
            transition: background-color 0.3s ease, transform 0.2s ease;
            margin-bottom: 10px;
        }
        .mobile-price-card .price-button:hover {
            /* background-color: #00568c; */ /* Removed */
            background-color: #b00216; /* Darker red for Buy Now hover */
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .mobile-price-card .price-button-secondary {
            background-color: white;
            color: black;
            border: 1px solid #000000; /* New black border for Add to Cart */
        }
        .mobile-price-card .price-button-secondary:hover {
            /* background-color: #f8f9fa; */ /* Removed */
            background-color: #f0f0f0; /* Slightly darker background for Add to Cart hover */
            color: #333333; /* Optional: Darken text on hover */
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        /* Ensure disabled buttons in mobile card have appropriate styles */
        .mobile-price-card .price-button:disabled {
             background-color: #6c757d;
             color: #ffffff;
             border-color: #6c757d;
             cursor: not-allowed;
             opacity: 0.65;
             transform: none;
             box-shadow: none;
        }
        .mobile-price-card .price-button.price-button-secondary:disabled {
             background-color: #e9ecef;
             color: #6c757d;
             border-color: #adb5bd;
             transform: none;
             box-shadow: none;
        }
        /* Shipping info */
        .shipping-info {
            background-color: white;
            border: 1px solid #dee2e6;
            border-radius: 12px;
            padding: 20px;
        }
        .shipping-info h3 {
            font-size: 1.2rem;
            font-weight: 600;
            color: #333333;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #dee2e6;
        }
        .shipping-destination {
            display: flex;
            align-items: center;
            cursor: pointer;
        }
        .shipping-destination span {
            font-weight: 600;
            color: #333333;
        }
        .country-selector {
            display: flex;
            gap: 10px;
            margin-top: 10px;
            flex-wrap: wrap;
        }
        .country-flag {
            width: 30px;
            height: 20px;
            cursor: pointer;
            border: 2px solid transparent;
            border-radius: 4px;
            transition: all 0.3s ease;
        }
        .country-flag:hover {
            transform: scale(1.1);
        }
        .country-flag.active {
            border-color: #0071bc;
        }
        
        .shipping-method {
            font-weight: 600;
            color: #333333;
        }
        .shipping-time {
            font-weight: 600;
            color: #333333;
        }
        .shipping-price {
            font-weight: 600;
            color: #333333;
        }
        /* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        .modal-content {
            background-color: white;
            border-radius: 12px;
            width: 90%;
            max-width: 600px;
            max-height: 90vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .modal-header {
            padding: 20px;
            border-bottom: 1px solid #dee2e6;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .modal-header h3 {
            margin: 0;
            font-size: 1.4rem;
            color: #333333;
        }
        .close-modal {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #6c757d;
        }
        .modal-body {
            padding: 20px;
            overflow-y: auto;
            flex: 1;
        }
        .country-select-container {
            margin-bottom: 30px;
        }
        .country-select-container label {
            display: block;
            margin-bottom: 10px;
            font-weight: 600;
            color: #333333;
        }
        .country-select {
            width: 100%;
            padding: 12px;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            font-size: 1rem;
            background-color: white;
            cursor: pointer;
        }
        .country-select option {
            padding: 10px;
        }
        .country-flag-option {
            display: inline-block;
            width: 24px;
            height: 16px;
            margin-right: 10px;
            vertical-align: middle;
        }
        .shipping-options {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        /* Responsive design */
        @media (max-width: 992px) {
            .bshoper-reviews-combined {
                flex-direction: column;
            }
            .bshoper-rating-summary {
                border-right: none;
                border-bottom: 1px solid #dee2e6;
                padding-right: 0;
                padding-bottom: 20px;
                margin-bottom: 20px;
            }
            .bshoper-user-reviews {
                padding-left: 0;
                padding-top: 20px;
            }
            .bscontainer {
                flex-direction: column;
            }
            .bscontainer-sidebar {
                position: static;
                max-height: none;
                margin-top: 20px;
                display: none;
            }
            .bshoper-product-photos {
                flex-direction: column;
            }
            .bshoper-main-photo-container {
                width: 100%;
                height: 300px;
                margin-bottom: 10px;
            }
            .bshoper-photo-thumbnails-container {
                width: 100%;
                height: auto;
                padding: 10px 0;
            }
            .bshoper-photo-thumbnails {
                flex-direction: row;
                height: auto;
                max-height: 90px;
                padding: 0 10px;
            }
            .bshoper-photo-thumbnail {
                width: 80px;
                height: 80px;
            }
            
        }
        @media (max-width: 768px) {
            .bscontainer {
                padding: 10px;
            }
            .bshoper-product-photos,
            .bshoper-product-info,
            .bshoper-product-overview-container,
            .bshoper-reviews-container {
                border-radius: 8px;
                overflow: hidden;
                width: 100%;
            }
            .bshoper-main-photo-container {
                height: 300px;
            }
            .bshoper-product-info {
                min-height: auto;
                height: auto;
            }
            .bshoper-product-info-content {
                padding: 15px;
            }
            .bshoper-product-title {
                font-size: 1.4rem;
            }
            .bshoper-product-stars {
                font-size: 1.1rem;
            }
            .bshoper-product-info-top {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
            .bshoper-product-stars {
                flex-direction: row;
                gap: 10px;
            }
            .bshoper-product-modern h3,
            .bshoper-variant-type {
                font-size: 1.0rem;
            }
            .bshoper-product-modern li,
            .bshoper-variant-text {
                font-size: 0.8rem;
            }
            .bshoper-variant-photo {
                width: 50px;
                height: 50px;
                min-width: 50px;
            }
            .bshoper-product-overview-table td,
            .bshoper-rating-bar {
                padding: 12px 15px;
                font-size: 0.85rem;
            }
            .bshoper-review-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 5px;
            }
            .bshoper-user-avatar {
                margin-bottom: 5px;
            }
            .bshoper-user-info {
                width: 100%;
            }
            .bshoper-review-date {
                margin-top: 5px;
            }
            .bscontainer-sidebar {
                display: none;
            }
            /* Mobile specific: move thumbnails below main photo */
            .bshoper-product-photos {
                flex-direction: column;
            }
            .bshoper-main-photo-container {
                order: 1;
                margin-bottom: 10px;
            }
            .bshoper-photo-thumbnails-container {
                order: 2;
                width: 100%;
                height: auto;
                padding: 10px 0;
            }
            .bshoper-photo-thumbnails {
                flex-direction: row;
                height: auto;
                max-height: 90px;
                padding: 0 10px;
                overflow-x: auto;
            }
            .bshoper-product-modern li {
                font-size: 0.75rem;
                line-height: 1.4rem;
            }
        }
        @media (max-width: 480px) {
			
            .bshoper-product-overview-header h2,
            .bshoper-reviews-header h2 {
                font-size: 1.4rem;
            }
            .bshoper-main-photo-container {
                height: 250px;
            }
            .bshoper-photo-thumbnail,
            .bshoper-review-photo-thumbnail {
                width: 60px;
                height: 60px;
                min-width: 60px;
            }
            .bshoper-product-title {
                font-size: 1.3rem;
            }
            .bshoper-product-info-top {
                flex-direction: column;
                align-items: flex-start;
            }
            .bshoper-product-stars {
                margin-top: 0px;
            }
            .bshoper-product-modern h3 {
                font-size: 1.0rem;
            }
            .bshoper-product-modern li {
                font-size: 0.75rem;
                line-height: 1.4rem;
            }
            .bshoper-variant-type {
                font-size: 0.9rem;
            }
            .bshoper-variant-photo {
                width: 45px;
                height: 45px;
                min-width: 45px;
            }
            .bshoper-variant-text {
                font-size: 0.75rem;
                padding: 4px 8px;
            }
            .bshoper-product-overview-table td {
                padding: 10px 12px;
                font-size: 0.8rem;
            }
            .bshoper-average-rating {
                font-size: 2.4rem;
            }
            .bshoper-rating-bar-label {
                font-size: 0.8rem;
            }
            .bshoper-user-name {
                font-size: 0.9rem;
            }
            .bshoper-review-text {
                font-size: 0.85rem;
            }
            .bscontainer-sidebar {
                display: none;
            }
			
            /* Mobile specific: move thumbnails below main photo */
            .bshoper-product-photos {
                flex-direction: column;
            }
            .bshoper-main-photo-container {
                order: 1;
                margin-bottom: 10px;
            }
            .bshoper-photo-thumbnails-container {
                order: 2;
                width: 100%;
                height: auto;
                padding: 10px 0;
                /* Masquer le conteneur des miniatures sur mobile */
                display: none;
            }
            .bshoper-photo-thumbnails {
                flex-direction: row;
                height: auto;
                max-height: 90px;
                padding: 0 10px;
                overflow-x: auto;
				padding-top:5px;
				padding-top:5px;
            }
            .bshoper-variant-photos,
            .bshoper-variant-texts,
            .bshoper-review-photos {
                overflow-x: auto;
                padding-bottom: 5px;
            }
            /* Fix for mobile layout - ensure content isn't cut off */
            .bscontainer {
                min-height: 100vh;
                padding-bottom: 20px;
            }
            /* Move price card to bottom on mobile */
            .bscontainer-main {
                order: 1;
            }
            .mobile-price-card {
                background-color: white;
                border-radius: 12px;
                padding: 20px;
                margin-top: 20px;
                border: 1px solid #dee2e6;
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                z-index: 100;
                box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            }
            .mobile-price-card h3 {
                font-size: 1.2rem;
                font-weight: 600;
                color: #333333;
                margin-bottom: 15px;
                padding-bottom: 10px;
                border-bottom: 1px solid #dee2e6;
            }
            .mobile-price-card .price-current {
                font-size: 2rem;
                font-weight: 700;
                color: #000000;
            }
            .mobile-price-card .price-original {
                font-size: 1.2rem;
                color: #6b7280;
                text-decoration: line-through;
            }
            .mobile-price-card .price-save {
                font-size: 0.9rem;
                color: #d9534f;
                font-weight: 600;
                margin-bottom: 15px;
            }
            /* Align buttons horizontally on mobile */
            .mobile-price-card .button-container {
                display: flex;
                gap: 10px;
            }
            .mobile-price-card .price-button,
            .mobile-price-card .price-button-secondary {
                flex: 1;
                margin-bottom: 0;
            }
            .mobile-price-card .shipping-destination {
                display: flex;
                align-items: center;
            }
            .mobile-price-card .shipping-destination span {
                font-weight: 600;
                color: #333333;
            }
            .mobile-price-card .shipping-option {
                padding: 10px;
                border: 1px solid #dee2e6;
                border-radius: 6px;
                margin-bottom: 10px;
            }
            .mobile-price-card .shipping-option:last-child {
                margin-bottom: 0;
            }
            .mobile-price-card .shipping-method {
                font-weight: 600;
                color: #333333;
                margin-bottom: 5px;
            }
            .mobile-price-card .shipping-time {
                font-size: 0.8rem;
                color: #33;
            }
            .mobile-price-card .shipping-price {
                font-weight: 600;
                color: #0071bc;
            }
        }
        /* Hide mobile price card on desktop */
		        /* Quantity Selector */
        .bshoper-quantity-selector {
            margin-bottom: 15px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .bshoper-quantity-selector label {
            font-weight: 600;
            color: #333333;
            font-size: 0.9rem;
        }
        .bshoper-quantity-controls {
            display: flex;
            align-items: center;
            width: fit-content;
            border-radius: 6px;
            overflow: hidden;
        }
        .bshoper-quantity-btn {
            background-color: #f8f9fa;
            color: #333333;
            border: none;
            padding: 8px 15px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.2s ease;
            min-width: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .bshoper-quantity-btn:hover {
            background-color: #e9ecef;
        }
        .bshoper-quantity-btn:disabled {
            background-color: #f8f9fa;
            color: #adb5bd;
            cursor: not-allowed;
        }
        .bshoper-quantity-input {
            width: 60px;
            padding: 8px;
            border: none;
            text-align: center;
            font-size: 1rem;
            -moz-appearance: textfield;
        }
        .bshoper-quantity-input::-webkit-outer-spin-button,
        .bshoper-quantity-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        /* Stock Notice */
        .bshoper-stock-notice {
            display: flex;
            align-items: center;
            font-size: 0.85rem;
            color: black;
            font-weight: 500;
            margin-bottom: 15px;
        }
        .bshoper-stock-icon {
            margin-right: 8px;
            font-weight: 400;
        }
        /* Adjust margin for buttons if needed */
        .price-button {
            margin-top: 5px;
        }
        /* Mobile Full-Screen Modal */
        @media (max-width: 768px) {
            .modal-content {
                width: 100%;
                height: 100%;
                max-width: none;
                max-height: none;
                border-radius: 0;
            }
            .modal-header {
                padding: 15px;
            }
            .modal-body {
                padding: 15px;
            }
        }
        /* Mobile price info section - hidden on desktop by default */
        
        /* Mobile price info section - visible only on mobile */
        @media (max-width: 480px) {
            .mobile-price-info {
                margin-bottom: 15px;
                padding-bottom: 15px;
                border-bottom: 1px solid #dee2e6;
            }
            .mobile-price-info .price-original {
                font-size: 1.1rem;
                margin-bottom: 5px;
            }
            .mobile-price-info .price-current {
                font-size: 1.8rem;
                margin-bottom: 5px;
            }
            .mobile-price-info .price-save {
                font-size: 0.8rem;
                margin-bottom: 0;
            }
        }
        /* --- NOUVEAU : Style pour le conteneur d'options d'expédition mobile --- */
        .mobile-shipping-info {
            background-color: white;
            border: 1px solid #dee2e6;
            border-radius: 12px;
            padding: 20px;
            margin-top: 20px; /* Espace au-dessus */
        }
        .mobile-shipping-info h3 {
            font-size: 1.2rem;
            font-weight: 600;
            color: #333333;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #dee2e6;
        }
        .mobile-shipping-info .shipping-option {
            margin-bottom: 10px;
            padding: 15px;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .mobile-shipping-info .shipping-option:hover {
            border-color: #0071bc;
            background-color: #f8f9fa;
        }
        .mobile-shipping-info .shipping-option.selected {
            border-color: #0071bc;
            background-color: #e9f4ff;
        }
        .mobile-shipping-info .shipping-option:last-child {
            margin-bottom: 0;
        }
        .mobile-shipping-info .shipping-method {
            font-weight: 600;
            color: #333333;
        }
        .mobile-shipping-info .shipping-time {
            font-weight: 600;
            color: #333333;
            font-size: 0.9rem; /* Un peu plus petit */
            margin-top: 5px; /* Espace au-dessus */
        }
        .mobile-shipping-info .shipping-price {
            font-weight: 600;
            color: #0071bc; /* Couleur accentuée pour le prix */
            font-size: 1.1rem; /* Un peu plus grand */
            margin-top: 5px; /* Espace au-dessus */
        }
        /* --- NOUVEAU : Afficher uniquement sur mobile (max-width: 480px) --- */
        
        /* Mobile Swipe Navigation Indicators */
        .mobile-swipe-indicators {
            display: none;
        }
        @media (max-width: 480px) {
            .mobile-swipe-indicators {
                display: none;
            }
        }
        .mobile-swipe-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #ccc;
        }
        .mobile-swipe-indicator.active {
            background-color: #0071bc;
        }
        
        /* Fullscreen Gallery Modal */
        
* Cacher par défaut */
.mobile-price-info,
.mobile-price-card,
.mobile-shipping-info {
    display: none;
}

/* Afficher en mode mobile */
.show-mobile-elements .mobile-price-info,
.show-mobile-elements .mobile-price-card,
.show-mobile-elements .mobile-shipping-info {
    display: block;
}

/* Cacher quand sidebar active */
.sidebar-active .mobile-price-info,
.sidebar-active .mobile-price-card,
.sidebar-active .mobile-shipping-info {
    display: none !important;
}

/* Media query pour le resize automatique */
@media (max-width: 768px) {
    .mobile-price-info,
    .mobile-price-card,
    .mobile-shipping-info {
        display: block !important;
    }
    
    .sidebar-active .mobile-price-info,
    .sidebar-active .mobile-price-card,
    .sidebar-active .mobile-shipping-info {
        display: none !important;
    }
}
@media screen and (min-width: 769px) {
    .mobile-price-info,
    .mobile-price-card,
    .mobile-shipping-info {
        display: none !important;
    }
}
.flag-select-wrapper {
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
        }
        
        .flag-select {
            width: 100% !important;
        }
        
        /* Style pour les options avec drapeaux */
        .flag-option {
            display: flex !important;
            align-items: center !important;
            gap: 10px !important;
        }
        
        .flag-option img {
            width: 24px !important;
            height: 18px !important;
            object-fit: cover !important;
            flex-shrink: 0 !important;
        }
        
        /* Style pour le select */
        .select2-selection {
            height: 45px !important;
            padding: 0 15px !important;
            display: flex !important;
            align-items: center !important;
        }
        
        .select2-selection__rendered {
            display: flex !important;
            align-items: center !important;
            gap: 10px !important;
            padding: 0 !important;
        }
        
        .select2-selection__arrow {
            height: 43px !important;
        }
        
        /* Style pour les résultats dropdown */
        .select2-results__option {
            padding: 10px 15px !important;
            display: flex !important;
            align-items: center !important;
            gap: 10px !important;
        }
.shipping-container {
            background: white;
            /*border-radius: 20px;*/
            width: 100%;
			margin-bottom: 10px;
            text-align: center;
        }
        
        .shipping-title {
            color: #333;
            margin-bottom: 20px;
            font-size: 1.8rem;
        }
        
        .shipping-subtitle {
            color: #666;
            margin-bottom: 30px;
            font-size: 1rem;
        }
        
        .shipping-custom-select {
            position: relative;
            width: 100%;
            margin-bottom: 10px;
        }
        
        .shipping-select-header {
            /*background: #f8f9fa;*/
            /*border-radius: 12px;*/
            /*padding: 15px 20px;*/
			font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s ease;
        }
        
        .shipping-select-header:hover {
            border-color: #667eea;
        }
        
        .shipping-select-header.shipping-active {
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        
        .shipping-selected-value {
            color: #333;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            gap: 0px;
			margin-left:-44px;
        }
        
        .shipping-arrow {
            transition: transform 0.3s ease;
            font-size: 0.8rem;
        }
        
        .shipping-arrow.shipping-rotated {
            transform: rotate(180deg);
        }
        
        .shipping-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            display: none;
            justify-content: center;
            align-items: flex-end;
            z-index: 1000;
        }
        
        .shipping-modal-overlay.shipping-active {
            display: flex;
			z-index: 99999;
        }
        
        .shipping-modal-content {
            background: white;
            width: 100%;
            max-height: 80vh;
            border-radius: 20px 20px 0 0;
            overflow: hidden;
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }
        
        .shipping-modal-overlay.shipping-active .shipping-modal-content {
            transform: translateY(0);
        }
        
        .shipping-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            border-bottom: 1px solid #eee;
        }
        
        .shipping-modal-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: #333;
        }
        
        .shipping-close-btn {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #666;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .shipping-close-btn:hover {
            background: #f5f5f5;
        }
        
        .shipping-search-box {
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
        }
        
        .shipping-search-input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 10px;
            font-size: 1rem;
            outline: none;
        }
        
        .shipping-search-input:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
        }
        
        .shipping-options-container {
            max-height: 60vh;
            overflow-y: auto;
        }
        
        .shipping-option {
            padding: 15px 20px;
            cursor: pointer;
            transition: background 0.2s ease;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #f5f5f5;
        }
        
        .shipping-option:last-child {
            border-bottom: none;
        }
        
        .shipping-option:hover {
            background: #f8f9fa;
        }
        
        .shipping-option.shipping-selected {
            background: #e3f2fd;
        }
        
        .shipping-flag {
            margin-right: 0px;
            font-size: 1.5rem;
        }
        
        .shipping-selected-info {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 20px;
            text-align: left;
            display: none;
        }
        
        .shipping-selected-info.shipping-active {
            display: block;
            animation: shipping-fadeIn 0.5s ease;
        }
        
        @keyframes shipping-fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .shipping-info-title {
            color: #333;
            /*margin-bottom: 15px;*/
            font-size: 1.3rem;
            display: flex;
            align-items: center;
            /*gap: 10px;*/
        }
        
        .shipping-info-details {
            color: #666;
            line-height: 1.6;
        }
        
        .shipping-info-details p {
            margin: 10px 0;
        }
        
        .shipping-region-tag {
            display: inline-block;
            background: #667eea;
            color: white;
            padding: 6px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
            margin-top: 10px;
        }
        
        /* Styles pour mobile fullscreen */
        @media (max-width: 768px) {
            body {
                padding: 0;
                height: 100vh;
            }
            
            .shipping-container {
                border-radius: 0;
                max-width: 100%;
                height: auto;
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding: 0px;
            }
            
            .shipping-modal-content {
                border-radius: 20px 20px 0 0;
            }
        }
		.f16 .flag, .f32 .flag { width: auto; clear: right; }
	.f16 .flag { padding-left: 24px; }
	.f32 .flag { padding-left: 35px; }
	.f16 i { display: inline-block; }
	.f32 i { display: inline-block; }
	.shipping-update{
		position: relative;
    top: -1.5px;
    margin-right: 2px;
    text-decoration-line: underline;
	}
	.loading-div {
            
            
        }
        
        .loading-spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #ff0000;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
			margin:0 auto;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
		.loading-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	border-radius:7px;
    background-color: rgba(41, 56, 71, .5);
    transition: background-color .4s;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 9999;
}

.loader {
    width: 40px;
    height: 4px;
    background-color: red;
    margin-bottom: 20px;
    animation: loading 1s infinite alternate;
}

.loading-text {
    color: white;
    font-family: Arial, sans-serif;
    font-size: 16px;
}

@keyframes loading {
    0% { width: 40px; }
    100% { width: 200px; }
}
/* === RESET de base === */
/* === RÉINITIALISATION GLOBALE pour les éléments de la modale === */
.bsmodal-overlay,
.bsmodal-content,
.bshoper-main-photo-container-modal,
.bsmodal-thumbnails-container,
.bsmodal-thumbnails,
.bsmodal-thumb {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-sizing: border-box;
}

/* === BOUTON DE FERMETURE === */
.bsmodal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #333;
    background: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font: bold 24px/30px Arial, sans-serif;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    z-index: 10;
    border: none;
    line-height: 30px;
}

/* Style du bouton uniquement sur mobile */
@media (max-width: 768px) {
    .bsmodal-close {
        color: white;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(4px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
}

/* === MODALE : Overlay (fond semi-transparent) === */
.bsmodal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: stretch;
    z-index: 99999;
    overflow: hidden;
}

/* === CONTENU DE LA MODALE (desktop) === */
@media (min-width: 769px) {
    .bsmodal-content {
        width: 100%;
        max-width: 900px;
        max-height: 100vh;
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        display: flex;
        flex-direction: column;
    }

    .bshoper-main-photo-container-modal {
        text-align: center;
        padding: 20px;
    }

    #bsmodal-main-image {
        max-width: 100%;
        height: auto;
        max-height: 400px;
        object-fit: contain;
    }

    .bsmodal-thumbnails-container {
        padding: 15px;
        margin-top: 10px;
        background: #fff;
        border-top: 1px solid #eee;
    }

    .bsmodal-thumbnails {
        display: flex;
        justify-content: center;
        gap: 10px;
    }

    .bsmodal-thumb {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border: 2px solid #ddd;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .bsmodal-thumb:hover,
    .bsmodal-thumb.active {
        border-color: #000 !important;
        transform: scale(1.05);
    }
}

/* === VERSION MOBILE (<=768px) === */
@media (max-width: 768px) {
    .bsmodal-content {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border-radius: 0;
        background: #000;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .bshoper-main-photo-container-modal {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        background: #000;
        overflow: hidden;
    }

    #bsmodal-main-image {
        max-width: 95vw;
        max-height: 90vh;
        object-fit: contain;
        image-rendering: -webkit-optimize-contrast;
    }

    .bsmodal-thumbnails-container {
        flex-shrink: 0;
        padding: 12px;
        background: #111;
        border-top: 1px solid #333;
    }

    .bsmodal-thumbnails {
        display: flex;
        gap: 12px;
        justify-content: start;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    /* Masquer la scrollbar sur mobile */
    .bsmodal-thumbnails::-webkit-scrollbar {
        display: none;
    }
    .bsmodal-thumbnails {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .bsmodal-thumb {
        width: 64px !important;
        height: 64px !important;
        object-fit: cover;
        border: 2px solid #555 !important;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
        background: #222;
        flex-shrink: 0;
    }

    .bsmodal-thumb:hover,
    .bsmodal-thumb.active {
        border-color: #fff !important;
        transform: scale(1.08);
    }
}
/* Cacher les boutons sur desktop par défaut */
.shop-button-mobile {
    display: none;
}

/* Afficher uniquement sur mobile */
@media screen and (max-width: 768px) {
    .shop-button-mobile {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: white !important;
        padding: 15px 20px !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
        z-index: 9999 !important;
        gap: 10px !important;
        margin: 0 !important;
        border-top: 1px solid #eee !important;
    }
    
    .price-button-mobile {
        flex: 1 !important;
        padding: 15px !important;
        border: none !important;
        border-radius: 8px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        text-align: center !important;
        min-height: 50px !important;
    }
    
    .buy-now-mobile {
        background: #b00216 !important;
        color: white !important;
        flex: 2 !important;
    }
    
    .add-cart-mobile {
        background: #ffffff !important;
        color: #000 !important;
        border: 1px solid #ddd !important;
    }
}

/* Pour les très petits écrans */
@media screen and (max-width: 480px) {
    .shop-button-mobile {
        padding: 12px 15px !important;
    }
    
    .price-button-mobile {
        padding: 5px !important;
        font-size: 12px !important;
        min-height: 35px !important;
    }
}
.parent-bs-icon{
display: flex;
line-height: 1.5em;
}
.bs-icon{
margin-right: 3px;
}
.ancr-avis{
cursor:pointer;
text-decoration:underline;
}
.ancr-avis:hover{
text-decoration:none;
}
.title-prod {
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    flex: 1;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.img-prod{
position: relative;top: 50%;-ms-transform: translateY(-50%);transform: translateY(-50%);width: 100%;
min-height: 270px;
}

.product-image {
            position: relative;
            height: 420px;
            overflow: hidden;
        }

        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
.product-main-image {
            position: relative;
			max-height:440px;
            height: auto;
            overflow: hidden;
        }

        .product-main-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .product-card:hover .product-image img {
            transform: scale(1.05);
        }
@media (min-width: 768px) {
    .md\:grid-cols-4 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}
.similar-products{
padding:20px;
}
.similar-products-content{
padding-top:20px;
}



/* --- Styles de base pour la modale (préfixés) --- */

/* Overlay de la modale */
.variant-modal-overlay {
  display: none; /* Caché par défaut */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
  z-index: 1000; /* Doit être inférieur à la modale mais au-dessus du contenu */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.variant-modal-overlay.active {
  display: block;
  opacity: 1;
}

/* Conteneur principal de la modale */
.variant-product-modal {
  display: none; /* Caché par défaut */
  position: fixed;
  bottom: 0;
  left: 0;
  padding-bottom:100px;
  width: 100%;
  max-height: 90vh; /* Limite la hauteur à 90% de la vue */
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1001; /* Doit être au-dessus de l'overlay */
  transform: translateY(100%); /* Commence en dehors de l'écran (en bas) */
  transition: transform 0.3s ease-out;
  border-top-left-radius: 15px; /* Bord arrondi en haut */
  border-top-right-radius: 15px;
  overflow-y: auto; /* Permet le défilement si le contenu dépasse */
}
.variant-product-modal img{
height:auto;
}
.variant-product-modal.active {
  display: block;
  transform: translateY(0); /* Glisse vers sa position finale */
}

/* Contenu de la modale */
.variant-modal-content {
  padding: 20px;
  position: relative; /* Pour positionner le bouton de fermeture */
}

/* Bouton de fermeture */
.variant-modal-close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: #333;
  padding: 5px;
  line-height: 1;
  z-index: 1002; /* Doit être au-dessus du contenu */
  background-color: #ffffff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

/* Image principale dans la modale */
.variant-modal-main-image-container {
  text-align: center;
  margin-bottom: 15px;
}

.variant-modal-main-image-container img {
  max-width: 100%;
  height: auto;
  max-height: 300px; /* Limite la hauteur de l'image si nécessaire */
  object-fit: contain;
  border-radius: 8px; /* Optionnel: arrondit les coins */
}

/* Prix dans la modale */
.variant-modal-price-container {
  margin-bottom: 15px;
  margin-left:10px;
}
/* Styles spécifiques pour les prix dans la modale si nécessaire */
/* Les styles .price-original et .price-current existants s'appliquent déjà */
/* Vous pouvez les cibler plus précisément si besoin */
.variant-modal-price-container .price-original {
    /* Ajoutez des styles spécifiques si nécessaire */
}
.variant-modal-price-container .price-current {
    /* Ajoutez des styles spécifiques si nécessaire */
}


/* Variants dans la modale */
.variant-modal-variants-container {
  margin-bottom: 20px;
}
/* Les styles de .bshoper-product-variants s'appliqueront déjà */
/* Vous pouvez les cibler plus précisément si besoin */
.variant-modal-variants-container .bshoper-product-variants {
    /* Ajoutez des styles spécifiques si nécessaire */
}

/* Bloc quantité dans la modale */
.variant-modal-quantity-container {
  margin-left:15px;
  margin-bottom: 20px;
}
/* Les styles de .bshoper-quantity-selector s'appliqueront déjà */
/* Vous pouvez les cibler plus précisément si besoin */
.variant-modal-quantity-container .bshoper-quantity-selector {
    /* Ajoutez des styles spécifiques si nécessaire */
}

/* Ajustements pour mobile si nécessaire */
@media (max-width: 768px) {
  .variant-modal-content {
    padding: 15px;
  }
  .variant-modal-main-image-container img {
    width: 100%;
    height: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: 8px;
    margin: 0px auto;
}
  /* Ajoutez d'autres ajustements mobile si nécessaire */
}
.bshoper-photo-thumbnails {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 10px 0;
}

.bshoper-photo-thumbnail {
    width: 60px;
    height: 60px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.bshoper-photo-thumbnail.active {
    border-color: #00000;
}

.mobile-swipe-indicators {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 10px 0;
}

.mobile-swipe-indicator {
    width: 0px;
    height: 0px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
}

.mobile-swipe-indicator.active {
    background-color: #007BFF;
}
/* Conteneur principal */
.bshoper-main-photo-container {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 400px;
    aspect-ratio: 1 / 1;
    max-height: 480px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bshoper-main-photo-container:hover {
    /*box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);*/
    transform: translateY(-2px);
}

/* Image principale avec swipe moderne */
.bshoper-main-photo {
    max-width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: contain;
    cursor: grab;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    user-select: none;
    touch-action: auto;
    border-radius: 8px;
}

.bshoper-main-photo:active {
    cursor: grabbing;
}

/* Effet de swipe en cours */
.bshoper-main-photo.swiping {
    transition: transform 0.2s ease-out;
}

/* Zoom actif */
.bshoper-main-photo.zoomed {
    cursor: zoom-out;
    transform: scale(2);
    z-index: 10;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* Indicateurs de swipe modernes */
.mobile-swipe-indicators {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0px;
    margin: 0px;
    padding: 0px;
}

.mobile-swipe-indicator {
    width: 12px;
    height: 0px;
    border-radius: 50%;
    background: #e9ecef;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border: 0px solid transparent;
}

.mobile-swipe-indicator:hover {
    background: #adb5bd;
    transform: scale(1.1);
}

.mobile-swipe-indicator.active {
    background: #007bff;
    transform: scale(1.2);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
    border-color: #fff;
}

/* Animation de transition entre images */
.bshoper-main-photo.fade-out {
    opacity: 0;
    transform: scale(0.95);
}

.bshoper-main-photo.fade-in {
    opacity: 1;
    transform: scale(1);
}

/* Miniatures avec style moderne */
.bshoper-photo-thumbnails-container {
    position: relative;
    margin: 20px 0;
    padding: 0 16px;
}

.bshoper-photo-thumbnails {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 8px 4px;
    scrollbar-width: thin;
    scrollbar-color: #007bff #e9ecef;
}

.bshoper-photo-thumbnails::-webkit-scrollbar {
    height: 6px;
}

.bshoper-photo-thumbnails::-webkit-scrollbar-track {
    background: #e9ecef;
    border-radius: 3px;
}

.bshoper-photo-thumbnails::-webkit-scrollbar-thumb {
    background: #007bff;
    border-radius: 3px;
}

.bshoper-photo-thumbnail {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	margin-top:5px;
	margin-right:3px;
}

.bshoper-photo-thumbnail:hover {
    transform: translateY(-3px);
	padding-top:-3px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    border-color: #e9ecef;
}

.bshoper-photo-thumbnail.active {
    border-color: #000000;
    transform: translateY(-5px);
	padding-top:-5px;
    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.25);
}

/* Boutons de pagination des miniatures */
.thumbnail-pagination {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    color: #495057;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    z-index: 2;
    border: 1px solid #e9ecef;
}

.thumbnail-pagination:hover {
    background: #007bff;
    color: white;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}

.thumbnail-pagination.prev {
    left: 8px;
}

.thumbnail-pagination.next {
    right: 8px;
}

/* Effets de swipe visuels */
.swipe-hint {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #495057;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 5;
}

.swipe-hint.show {
    opacity: 1;
}

.swipe-hint.left {
    left: 20px;
    animation: pulseLeft 2s infinite;
}

.swipe-hint.right {
    right: 20px;
    animation: pulseRight 2s infinite;
}

@keyframes pulseLeft {
    0%, 100% { transform: translateX(0); opacity: 0.7; }
    50% { transform: translateX(-10px); opacity: 1; }
}

@keyframes pulseRight {
    0%, 100% { transform: translateX(0); opacity: 0.7; }
    50% { transform: translateX(10px); opacity: 1; }
}

/* Responsive design */
@media (max-width: 768px) {
    .bshoper-main-photo-container {
        min-height: 300px;
        border-radius: 8px;
    }
    
    .bshoper-main-photo {
        max-height: 400px;
    }
    
    .mobile-swipe-indicators {
        margin: 15px 0;
        gap: 8px;
    }
    
    .mobile-swipe-indicator {
        width: 0px;
        height: 0px;
    }
    
    .bshoper-photo-thumbnail {
        width: 60px;
        height: 60px;
        border-radius: 8px;
    }
    
    .thumbnail-pagination {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .bshoper-main-photo-container {
        min-height: 250px;
    }
    
    .bshoper-photo-thumbnail {
        width: 50px;
        height: 50px;
    }
    
    .mobile-swipe-indicator {
        width: 8px;
        height: 8px;
    }
}

/* Effet de chargement élégant */
.bshoper-main-photo.loading {
    opacity: 0.5;
    filter: blur(2px);
}

.bshoper-main-photo.loaded {
    opacity: 1;
    filter: blur(0);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Overlay de zoom */
.zoom-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.zoom-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.zoom-overlay img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
/* Conteneur principal de l'image dans la modale */
.bshoper-main-photo-container-modal {
    /* Dimensions fixes ou contraintes */
    width: 100%; /* Ou une largeur spécifique si la modale a une largeur fixe */
    height: 80vh; /* Ou une hauteur spécifique, ajustez selon votre design */
    
    /* Crucial : Masque tout ce qui dépasse du conteneur */
    overflow: hidden;
    
    /* Centre l'image à l'intérieur */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Position relative peut être nécessaire pour le positionnement absolu de l'image si izoomify le requiert */
    position: relative;
    
    /* Empêche la sélection d'image pendant le zoom (optionnel mais recommandé) */
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
}

/* L'image principale dans la modale */
#bsmodal-main-image {
    /* Permet de redimensionner l'image */
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    
    /* Affichage en block pour éviter les espaces indésirables */
    display: block;
    
    /* Transition douce (facultatif) */
    transition: transform 0.3s ease;
    
    /* Transform-origin au centre pour un zoom centré */
    transform-origin: center center;
}
.bshoper-photo-thumbnails {
    /* ... autres styles ... */
    overflow: hidden;
}
/* --- Styles pour la Galerie Plein Écran --- */

/* --- Styles pour la Galerie Plein Écran avec izoomify --- */

/* Style de base : la modale est cachée par défaut */
.fullscreen-gallery-modal {
    display: none; /* CRUCIAL: État caché par défaut */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Fond sombre */
    z-index: 10000; /* Très haut z-index pour passer au-dessus de tout */
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* Contenu principal de la galerie */
.fullscreen-gallery-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative; /* Contexte de positionnement pour les enfants absolus */
    /* CRUCIAL: Permet à la loupe d'izoomify de déborder si nécessaire */
    overflow: visible;
}

/* Image principale de la galerie */
/* Styles de base pour l'image, avant et pendant le zoom */
#fullscreenMainImage {
    max-width: 90vw; /* Responsive: largeur maximale de 90% de la viewport */
    max-height: 80vh; /* Responsive: hauteur maximale de 80% de la viewport */
    width: auto; /* Laisser la largeur s'ajuster automatiquement */
    height: auto; /* Laisser la hauteur s'ajuster automatiquement */
    object-fit: contain; /* Conserver les proportions */
    /* Styles pour izoomify */
    position: relative; /* Essentiel pour le positionnement absolu de la loupe */
    overflow: visible; /* TRÈS IMPORTANT: permet à la loupe de déborder */
    cursor: crosshair; /* Change le curseur pour indiquer le zoom */
    /* Ajoutons une bordure subtile pour voir l'image */
    border: 1px solid transparent;
    box-sizing: content-box; /* Inclure la bordure dans les dimensions */
}
#fullscreenMainVideo {
    max-width: 90vw;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Conteneur des miniatures */
.fullscreen-gallery-thumbnails {
    display: flex;
    gap: 10px;
    overflow: hidden; /* Essentiel: permet le défilement horizontal */
    padding: 10px;
    width: 100%;
    justify-content: center;
    /* Ajout de styles pour une meilleure UX */
    scrollbar-width: thin; /* Pour Firefox */
    scrollbar-color: rgba(255, 255, 255, 0.5) transparent; /* Pour Firefox */
    margin-top: auto; /* Pousse les miniatures en bas */
    box-sizing: border-box; /* Inclure le padding dans la largeur */
}

/* Personnalisation de la scrollbar pour Webkit (Chrome, Safari) */
.fullscreen-gallery-thumbnails::-webkit-scrollbar {
    height: 8px;
}
.fullscreen-gallery-thumbnails::-webkit-scrollbar-track {
    background: transparent;
}
.fullscreen-gallery-thumbnails::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
}

/* Miniatures individuelles */
.fullscreen-gallery-thumbnail {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent; /* Bordure transparente par défaut */
    transition: all 0.3s ease;
    flex-shrink: 0; /* Empêche les miniatures de rétrécir */
}
.fullscreen-gallery-thumbnail.video-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
}

.fullscreen-gallery-thumbnail:hover {
    border-color: #fff;
    transform: scale(1.05);
}

.fullscreen-gallery-thumbnail.active {
    border-color: #fff; /* Met en surbrillance la miniature active */
}

/* Bouton de fermeture */
.close-fullscreen-gallery {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: white;
    z-index: 10001; /* Encore plus élevé que la modale */
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.close-fullscreen-gallery:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Boutons de navigation (précédent/suivant) pour l'image principale */
.fullscreen-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001; /* Très haut z-index */
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.fullscreen-gallery-nav:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
}

.fullscreen-gallery-nav.prev {
    left: 20px;
}

.fullscreen-gallery-nav.next {
    right: 20px;
}

.fullscreen-gallery-nav:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-50%); /* Pas de scale au hover si désactivé */
}

/* --- NOUVEAU : Boutons de pagination pour les miniatures dans la modale --- */
/* Conteneur pour les boutons de pagination des miniatures */
.fullscreen-gallery-thumbnails-nav-container {
    position: absolute;
    bottom: 60px; /* Ajustez pour qu'ils soient au-dessus des miniatures */
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
    z-index: 10001;
}

/* Boutons de pagination des miniatures */
.fullscreen-gallery-thumbnails-nav {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 1.5rem; /* Un peu plus petit */
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.fullscreen-gallery-thumbnails-nav:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.fullscreen-gallery-thumbnails-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1);
}
/* --- Fin des boutons de pagination des miniatures --- */


/* --- Styles CRITIQUES pour izoomify --- */
/* Ces styles sont essentiels pour que la fonctionnalité de zoom fonctionne visuellement */

/* 1. S'assurer que l'image principale a un contexte de positionnement et n'empêche pas le débordement */
/*#fullscreenMainImage.izoomify-in {
    position: relative !important;
    overflow: visible !important; /* TRÈS IMPORTANT */
    cursor: crosshair !important; /* Change le curseur pour indiquer le zoom */
    /* S'assurer qu'elle ne reçoit pas de styles conflictuels */
    pointer-events: auto !important;
}*/

/* 2. Styles de base pour l'élément de loupe créé par izoomify */
/* Ciblage très spécifique pour surcharger les styles par défaut ou conflictuels */
.fullscreen-gallery-modal .izoomify-lens,
.fullscreen-gallery-modal .izoomify-zoom {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 999999 !important; /* Très, très haut z-index */
    pointer-events: none !important; /* Ne doit pas interférer avec la souris */
    /* Styles visuels pour le test/debug - vous pouvez les ajuster */
    border: 2px solid #aaa !important; /* Bordure subtile */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important; /* Ombre */
    background-clip: content-box !important;
    /* Pour s'assurer qu'elle a une taille minimale si le plugin a un problème */
    min-width: 50px !important;
    min-height: 50px !important;
}
/* --- Fin des styles CRITIQUES pour izoomify --- */

/* --- Fin des styles de la galerie plein écran --- */


/* --- Styles pour les variantes (si nécessaire) --- */
.variant-cloned-variants .bshoper-variant-photo.active {
    border-color: #000000 !important;
    border-width: 1px !important;
    box-shadow: 0 0 0 1px #000000 !important;
    padding: 3px;
}

/* === Styles pour l'image principale === */
.bshoper-main-photo-container {
    min-height: 300px;
    position: relative;
    overflow: hidden; /* Cache le contenu débordant pendant le swipe */
    width: 100%;
}
/* Quand Slick est initialisé, laisser Slick gérer la hauteur */
.bshoper-main-photo-container.slick-initialized {
    aspect-ratio: auto;
}

.bshoper-main-photo {
    width: 100%;
    height: auto; /* Maintient les proportions */
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

/* === Styles pour le carrousel de miniatures avec Slick === */

/* Conteneur principal externe */
.bshoper-photo-thumbnails-container {
    width: 100%;
    padding: 10px 0; /* Espace vertical autour du carrousel */
    position: relative; /* Pour positionner les flèches absolument */
    padding-top: 5px;
    padding-bottom: 5px;
    box-sizing: border-box; /* Inclut le padding dans la largeur */
    /* order: 2; */ /* Si utilisé dans un Flexbox parent */
}

/* Conteneur principal de Slick - C'est ici que Slick applique ses styles */
/* Il est crucial de ne PAS définir de styles de disposition (flex, overflow-x) ici
   qui pourraient interférer avec ceux de Slick */
.bshoper-photo-thumbnails {
    width: 100%;
    /* overflow: hidden; */ /* Slick le gère */
    /* display: flex; */ /* Slick le gère */
    /* gap: 10px; */ /* Slick gère l'espacement via les marges des slides */
    /* padding: 0 10px; */ /* Slick gère le padding interne via slick-list padding */
    position: relative; /* Utile, Slick l'utilise */
    margin-top: 10px; /* Espace par rapport à l'image principale */
    box-sizing: border-box;
    /* Assurez-vous que les styles de base de Slick ne sont pas écrasés */
}

/* Styles spécifiques aux éléments internes de Slick */
/* Ces styles sont souvent définis par Slick lui-même, mais peuvent être surchargés */
.bshoper-photo-thumbnails .slick-list {
    /* C'est le conteneur qui masque les slides non visibles */
    /* overflow: hidden; */ /* Déjà appliqué par Slick */
    margin: 0; /* Slick peut ajouter des marges */
    padding: 0 5px; /* Padding interne pour éviter que les bords touchent le conteneur */
    /* Ajoutez scrollbar-width: none; etc. ici si vous voulez les cacher */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
.bshoper-photo-thumbnails .slick-list::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
}

.bshoper-photo-thumbnails .slick-track {
    /* C'est le conteneur qui contient tous les slides et qui se déplace */
    /* display: flex; */ /* Déjà appliqué par Slick */
    /* align-items: center; ou stretch, selon la config Slick */
    margin: 0; /* Slick peut ajouter des marges */
}

.bshoper-photo-thumbnails .slick-slide {
    /* Chaque slide individuel */
    /* height: auto; */ /* Souvent géré par Slick */
    /* width est géré par Slick en fonction de slidesToShow et du responsive */
    margin: 0 5px; /* Espacement entre les slides (optionnel, peut être géré par padding) */
    padding: 0; /* Réinitialiser le padding */
    /* display: block; ou flex, selon slick-slide-wrapper */
}

/* Wrapper optionnel à l'intérieur de .slick-slide (si utilisé dans votre HTML) */
/* .slick-slide-wrapper { */
    /* display: flex !important; */ /* Important pour surcharger les styles de Slick si nécessaire */
    /* justify-content: center; */
    /* align-items: center; */
    /* height: 100%; */
/* } */


/* === Styles pour les miniatures elles-mêmes === */
/* Ces styles s'appliquent aux images à l'intérieur des .slick-slide */
.bshoper-photo-thumbnails .bshoper-photo-thumbnail {
    /* Dimensions fixes pour une apparence cohérente */
    width: 80px;
    height: 80px;
    min-width: 80px; /* Empêche la réduction en dessous de 80px */
    object-fit: cover; /* Ajuste l'image dans le conteneur sans la déformer */
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent; /* Bordure transparente par défaut */
    transition: all 0.3s ease; /* Transition douce pour le hover/active */
    margin: 0; /* Réinitialiser les marges */
    padding: 2px; /* Petit espace autour */
    box-sizing: border-box; /* Inclus padding/border dans la width/height */
    display: block; /* Empêche les espaces indésirables sous l'image */
    /* Centrer l'image dans le slide si le slide est plus large */
    /* margin: 0 auto; */ /* Déjà centré par object-fit et width fixe */
}

.bshoper-photo-thumbnail:hover {
    border-color: #000000;
    transform: scale(1.05); /* Léger agrandissement au survol */
}

.bshoper-photo-thumbnail.active {
    border-color: #000000; /* Bordure noire pour l'image active */
    /* transform: scale(1.05); */ /* Optionnel: aussi agrandir l'active */
}

/* === Styles pour les boutons de pagination personnalisés === */
.thumbnail-pagination {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10; /* S'assurer qu'ils sont au-dessus du carrousel */
    opacity: 0; /* Cachés par défaut */
    transition: opacity 0.3s ease, background-color 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    /* Empêcher la sélection de texte */
    user-select: none;
    -webkit-user-select: none;
}

.thumbnail-pagination:hover {
    background-color: rgba(255, 255, 255, 1); /* Fond opaque au survol */
    opacity: 1 !important; /* Forcer la visibilité au survol */
}

.thumbnail-pagination.prev {
    left: 5px;
}

.thumbnail-pagination.next {
    right: 5px;
}

/* Afficher les boutons au survol du conteneur */
.bshoper-photo-thumbnails-container:hover .thumbnail-pagination {
    opacity: 1;
}

/* Désactiver les boutons si nécessaire (ajouter la classe 'disabled' via JS) */
.thumbnail-pagination.disabled {
    opacity: 0.3 !important;
    cursor: not-allowed;
    background-color: rgba(200, 200, 200, 0.5);
}
.thumbnail-pagination.disabled:hover {
     background-color: rgba(200, 200, 200, 0.5); /* Pas de changement au survol si désactivé */
}

/* ========================================
   🖼️ ZOOM CONTAINER - Mobile & Desktop
   ======================================== */
.zoom-container {
    height: 600px;
    max-width: 95vw;
    max-height: 95vh;
    margin: 20px auto;
    overflow: hidden;
    position: relative;
    background-color: #000;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #333;
    /* 🔽 Désactiver le scroll pendant le pinch */
    touch-action: none;
}

.zoom-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
    backface-visibility: hidden;
    user-select: none;
    cursor: default; /* Pas de curseur de zoom sur mobile */
}
#closeFullscreenGallery {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* État zoomé */
.zoom-container img.csszoomed {
    cursor: zoom-out;
}

/* ========================================
   📱 Mobile : Plein écran
   ======================================== */

/* --- Fullscreen Gallery Optimisée --- */
.zoom-container {
    touch-action: none;
}

.zoom-container img {
    cursor: default;
    transition: transform 0.3s ease;
}

/* Conteneur principal du carrousel */
#mainPhotoContainer {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Slides générés par Slick */
#mainPhotoContainer .slick-slide,
#mainPhotoContainer .slick-slide div {
    border: none !important;
    outline: none !important;
}

/* Image à l'intérieur du slide */
#mainPhotoContainer .slick-slide img {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    /* Optionnel : s'assurer que l'image prend tout l'espace sans artefacts */
    display: block;
    max-width: 100%;
    height: auto;
}

/* Éviter les bordures sur les clones de Slick */
#mainPhotoContainer .slick-slide.slick-cloned {
    border: none !important;
}
#fullscreenMainImage {
    /* Empêche l'anti-aliasing flou pendant le zoom */
    image-rendering: -webkit-optimize-contrast;
    /* Légère amélioration de la netteté */
    backface-visibility: hidden;
}
/* --- FULLSCREEN GALLERY - MOBILE ONLY (STYLE ALIEXPRESS) --- */
@media (max-width: 768px) {

    /* Container modal */
    .fullscreen-gallery-modal-mobile {
        display: none; /* toggle via JS */
        position: fixed;
        inset: 0; /* top:0;left:0;right:0;bottom:0; */
        width: 100%;
        height: 100%;
        background: #000;
        z-index: 99999;
        justify-content: center;
        align-items: center;
    }

    .mobile-gallery-content {
        position: relative;
        width: 100vw;
        height: 100vh;
        background: #000;
        overflow: hidden;
        -webkit-tap-highlight-color: transparent;
    }

    /* Hide old header if present */
    .gallery-header {
        display: none !important;
    }

    /* subtle top/bottom gradient to improve contrast on bright images */
    .mobile-gallery-content::before,
    .mobile-gallery-content::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        pointer-events: none;
        z-index: 1600;
    }

    .mobile-gallery-content::before {
        top: 0;
        height: 120px;
        background: linear-gradient(180deg, rgba(0,0,0,0.65), rgba(0,0,0,0));
    }

    .mobile-gallery-content::after {
        bottom: 0;
        height: 140px;
        background: linear-gradient(0deg, rgba(0,0,0,0.65), rgba(0,0,0,0));
    }

    /* --- Bouton fermer (X) : safe-area aware + halo pour lisibilité --- */
    .close-fullscreen-gallery-mobile {
        position: absolute;
        top: calc(env(safe-area-inset-top, 0px) + 50px);
        right: calc(env(safe-area-inset-right, 0px) + 12px);
        z-index: 3000;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        font-size: 16px;
        line-height: 1;
        font-weight: 700;
        color: #fff;
        background: rgba(0, 0, 0, 0.72);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
        -webkit-tap-highlight-color: transparent;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);

        /* halo blanc pour rester lisible sur noir et sur image claire */
        box-shadow:
          0 0 0 1px rgba(255,255,255,0.9), /* anneau blanc */
          0 8px 20px rgba(0,0,0,0.6);
        text-shadow: 0 2px 4px rgba(0,0,0,0.6);
    }

    .close-fullscreen-gallery-mobile:active,
    .close-fullscreen-gallery-mobile:focus {
        outline: none;
        transform: scale(0.98);
    }

    /* --- Slick slider: full screen --- */
    .fullscreen-gallery-slider {
        width: 100vw;
        height: 100vh;
        position: relative;
        z-index: 1200;
        touch-action: none;
    }

    .fullscreen-gallery-slider .slick-list,
    .fullscreen-gallery-slider .slick-track {
        width: 100%;
        height: 100%;
    }

    .fullscreen-gallery-slider .slick-slide {
        width: 100vw;
        height: 100vh;
        display: flex !important;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        position: relative;
    }

    .fullscreen-gallery-slider .slick-slide > div {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .fullscreen-gallery-slider .slick-slide img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0 auto;
        -webkit-user-drag: none;
        user-select: none;
        transform-origin: center center;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
    .fullscreen-gallery-slider .slick-slide video {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0 auto;
        background: #000;
    }

    /* --- Slick dots (override defaults) : centered & above nav area --- */
    .fullscreen-gallery-slider .slick-dots {
        /*position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
       display: flex !important;
		justify-content: center;
        gap: 8px;
        z-index: 2600;
        padding: 0;
        margin: 0;
        list-style: none;*/
		display: none !important;
    }

    .fullscreen-gallery-slider .slick-dots li {
        margin: 0;
        padding: 0;
    }

    .fullscreen-gallery-slider .slick-dots li button {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255,255,255,0.55);
        border: none;
        padding: 0;
        transition: transform .18s ease, background .18s ease, opacity .18s ease;
        opacity: 1;
        box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    }

    .fullscreen-gallery-slider .slick-dots li.slick-active button {
        background: #fff;
        transform: scale(1.25);
        width: 10px;
        height: 10px;
    }

    .fullscreen-gallery-slider .slick-prev,
    .fullscreen-gallery-slider .slick-next {
        display: none !important;
    }

    /* --- Compteur : styled, centered; fallback bottom if JS non présent --- */
    .gallery-counter {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2700;
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        background: rgba(0,0,0,0.66);
        padding: 6px 14px;
        border-radius: 20px;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        box-shadow: 0 2px 10px rgba(0,0,0,0.55);
        pointer-events: none; /* not clickable, lets swipe work */
        /* fallback: sit above dots by default */
        bottom: calc(env(safe-area-inset-bottom, 0px) + 56px);
        top: auto;
        white-space: nowrap;
    }

    /* small screens safe adjustments */
    .fullscreen-gallery-modal-mobile .mobile-gallery-content,
    .fullscreen-gallery-modal-mobile .fullscreen-gallery-slider {
        -webkit-overflow-scrolling: touch;
    }

    /* Accessibility: ensure contrast of text inside the counter and button */
    .close-fullscreen-gallery-mobile,
    .gallery-counter {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Optional: slight scale animation when opening the modal */
    .fullscreen-gallery-modal-mobile.showing .fullscreen-gallery-slider .slick-current img {
        transition: transform .25s cubic-bezier(.2,.9,.2,1);
    }
}
.bshoper-main-photo {
    /* ... autres styles ... */
    will-change: transform; /* Ajoutez cette ligne */
	image-rendering: -webkit-optimize-contrast; /* Pour Webkit */
    image-rendering: crisp-edges; /* Standard (pas toujours supporté) */
}
#mainPhotoContainer .slick-slide { /* Ciblez les slides */
    transform: translateZ(0); /* Force également l'accélération matérielle */
    backface-visibility: hidden; /* Peut aider à éviter les glitchs */
}
#mainPhotoContainer .slick-slide:not(.slick-current) { /* Exemple approximatif */
    content-visibility: auto;
    contain-intrinsic-size: 100px; /* Fournir une taille approximative */
}
/* ============================
   Bshoper – Gallery Thumbnails
   Date: 2025-09-06
   ============================ */

/* ---------- Container ---------- */
.bshoper-photo-thumbnails-container{
  position: relative;
}

/* La liste Slick des miniatures */
#photoThumbnails{
  display:block;
}

/* Évite les marges négatives qui cassent les largeurs */
#photoThumbnails .slick-list{
  margin: 0 !important;
  padding: 0;
  overflow: hidden; /* bords propres */
}

/* Performance : meilleure interpolation GPU */
#photoThumbnails .slick-track{
  will-change: transform;
}

/* Chaque slide utilise du padding pour l’écart (pas de margin) */
#photoThumbnails .slick-slide{
  box-sizing: border-box;
  padding: 0 6px; /* ← écart horizontal entre vignettes */
  outline: none;  /* pas de halo bleu par défaut */
}

/* ---------- Miniatures ---------- */
#photoThumbnails img.bshoper-photo-thumbnail{
  width: 100%;
  aspect-ratio: 1 / 1;    /* vignettes carrées */
  object-fit: cover;
  display: block;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.08);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

/* Effets hover/focus */
#photoThumbnails img.bshoper-photo-thumbnail:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.18);
}
#photoThumbnails img.bshoper-photo-thumbnail:focus{
  outline: 2px solid #111;
  outline-offset: 2px;
}

/* Vignette active (slide courant dans le nav) */
#photoThumbnails .slick-current img.bshoper-photo-thumbnail,
#photoThumbnails img.bshoper-photo-thumbnail.active{
  border-color: #111;
  box-shadow: 0 0 0 2px rgba(17,17,17,0.15) inset;
}

/* Si des templates ajoutent mx-auto, on neutralise */
#photoThumbnails img.mx-auto{
  margin-left: 0;
  margin-right: 0;
}

/* ---------- Flèches externes ---------- */
.thumbnail-pagination{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center; 
  justify-content: center;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: opacity 120ms ease, transform 120ms ease, background 120ms ease;
  backdrop-filter: saturate(120%) blur(2px);
}

.thumbnail-pagination.prev{ left: 6px; }
.thumbnail-pagination.next{ right: 6px; }

.thumbnail-pagination:hover{
  background: rgba(0,0,0,0.7);
  transform: translateY(-50%) scale(1.03);
}

/* État désactivé (géré côté JS quand en butée si infinite:false) */
.thumbnail-pagination.slick-disabled{
  opacity: .35;
  pointer-events: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px){
  #photoThumbnails .slick-slide{ padding: 0 5px; } /* écart un peu réduit */
  .thumbnail-pagination{ width: 32px; height: 32px; }
}

@media (max-width: 480px){
  #photoThumbnails .slick-slide{ padding: 0 4px; }
  .thumbnail-pagination{ width: 30px; height: 30px; }
}
#photoThumbnails .slick-slide { padding: 0 6px; margin: 0; box-sizing: border-box; }
#photoThumbnails .slick-list  { margin: 0; overflow: hidden; }
/* ============================
   Bshoper – Gallery (gap compact)
   Supprime toute marge parasite et fixe un écart propre
   ============================ */

/* -- Ecart contrôlé (modifie cette valeur si besoin) -- */
:root { --gallery-gap: 8px; }

/* Conteneurs principaux */
.bshoper-main-photo-container,
.bshoper-photo-thumbnails-container {
  margin: 0 !important;       /* tue toute marge héritée (tailwind mt-*, etc.) */
  padding: 0 !important;
}

/* L’UNIQUE espace vertical voulu entre image et miniatures */
.bshoper-photo-thumbnails-container {
  margin-top: var(--gallery-gap) !important;
}

/* Empêche les marges de s’effondrer et élimine l’espace “baseline” des images */
.bshoper-main-photo-container,
#mainPhotoContainer,
#photoThumbnails {
  line-height: 0;             /* supprime l’espace inline sous les <img> */
}

/* Normalisation Slick: pas de marges/paddings qui gonflent la hauteur */
#mainPhotoContainer .slick-list,
#photoThumbnails .slick-list {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

/* L’image principale se comporte en bloc (pas d’espace baseline) */
.bshoper-main-photo {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== Miniatures (spacement latéral stable via padding) ===== */

/* Taille & rendu des vignettes */
#photoThumbnails img.bshoper-photo-thumbnail {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;                           /* tue l’espace baseline */
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.08);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

/* Espace entre vignettes: padding (pas de margin) pour ne pas casser le calcul de Slick */
#photoThumbnails .slick-slide {
  box-sizing: border-box;
  padding: 0 6px;
  margin: 0 !important;
  outline: none;
}

/* Track performant */
#photoThumbnails .slick-track { will-change: transform; }

/* Effets */
#photoThumbnails img.bshoper-photo-thumbnail:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.18);
}
#photoThumbnails .slick-current img.bshoper-photo-thumbnail,
#photoThumbnails img.bshoper-photo-thumbnail.active {
  border-color: #111;
  box-shadow: 0 0 0 2px rgba(17,17,17,0.15) inset;
}

/* Neutralise d’éventuels .mx-auto résiduels */
#photoThumbnails img.mx-auto { margin-left: 0; margin-right: 0; }

/* Flèches externes (si utilisées) */
.thumbnail-pagination {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); color: #fff; font-weight: 700;
  cursor: pointer; user-select: none; z-index: 2;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: opacity 120ms ease, transform 120ms ease, background 120ms ease;
  backdrop-filter: saturate(120%) blur(2px);
}
.thumbnail-pagination.prev { left: 6px; }
.thumbnail-pagination.next { right: 6px; }
.thumbnail-pagination:hover { background: rgba(0,0,0,0.7); transform: translateY(-50%) scale(1.03); }
.thumbnail-pagination.slick-disabled { opacity: .35; pointer-events: none; }

/* Responsive: gap un peu réduit si tu veux un rendu plus compact sur mobile */
@media (max-width: 768px) {
  :root { --gallery-gap: 6px; }
  #photoThumbnails .slick-slide { padding: 0 5px; }
  .thumbnail-pagination { width: 32px; height: 32px; }
}
@media (max-width: 480px) {
  :root { --gallery-gap: 4px; }
  #photoThumbnails .slick-slide { padding: 0 4px; }
  .thumbnail-pagination { width: 30px; height: 30px; }
}
#photoThumbnails img.bshoper-photo-thumbnail{
  box-sizing: border-box;
}

/* 2) Donne 1px d'air en haut/bas pour éviter le clipping par la slick-list */
#photoThumbnails .slick-slide{
  /* AVANT: padding: 0 6px; */
  padding: 1px 6px !important;  /* ↑ respire verticalement */
  margin: 0 !important;
  box-sizing: border-box;
}

/* 3) Très fine respiration verticale au niveau de la liste (corrige les arrondis subpixel) */
#photoThumbnails .slick-list{
  /* AVANT: padding: 0 !important; */
  padding-block: 1px !important;   /* 1px haut/bas */
  margin: 0 !important;
  overflow: hidden;                 /* on garde le clipping horizontal propre */
}

/* 4) État actif: outline interne (inratable) en plus de la bordure */
#photoThumbnails .slick-current img.bshoper-photo-thumbnail,
#photoThumbnails img.bshoper-photo-thumbnail.active{
  border-color: #111;
  outline: 2px solid rgba(17,17,17,0.7);
  outline-offset: -2px;   /* dessine l'outline à l'intérieur → jamais coupé */
  box-shadow: none;       /* optionnel: on supprime l'inset si tu l'avais */
}
.thumbnail-pagination.is-hidden{
  display: none !important;
}
.bshoper-main-photo-container,
#mainPhotoContainer,
#photoThumbnails{ display:block; }

#mainPhotoContainer .slick-list,
#photoThumbnails .slick-list{
  min-height: 1px;           /* force une hauteur non nulle */
  overflow: hidden;
}

/* Images = blocs (pas d’espace baseline) */
.bshoper-main-photo,
#photoThumbnails img.bshoper-photo-thumbnail{
  display:block;
}
.modal-thumbs-prev.disabled,
.modal-thumbs-next.disabled { opacity: .35; pointer-events: none; }
.fullscreen-gallery-thumbnails-nav{
display:none !important;
}
/* Le conteneur de la modale doit être en position:relative pour placer le bouton */
.variant-modal-content,
.variant-modal-content .modal-content {
  position: relative;
}

/* Bouton fermer — parfaitement centré, hit-area 44x44 (guidelines iOS) */
.variant-modal-close-btn {
  position: absolute;
  top: 10px;              /* ajuste si besoin */
  right: 10px;            /* ajuste si besoin */
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: #fff;
  color: #000;
  cursor: pointer;
  z-index: 10;

  /* centrage fiable */
  display: grid;
  place-items: center;

  /* évite les décalages liés à la police/line-height */
  line-height: 1;
  font-size: 20px;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Effets au survol / focus (optionnel) */
.variant-modal-close-btn:hover { background: rgba(0,0,0,.75); }
.variant-modal-close-btn:focus { outline: 2px solid rgba(255,255,255,.6); outline-offset: 2px; }
.bshoper-quantity-controls{
	margin-left:15px;
}
.modal-content #variant-modal-quantity-container{
	margin-left:0px;
}
/* --- Modale variantes : cache les "dots" slick --- */
#variant-modal .slick-dots {
  display: none !important;
}

/* --- Modale variantes : cache tout scrollbar/indicateur natif dans les zones photos --- */
/* adapte/complète les sélecteurs selon tes conteneurs réels */
#variant-modal .variant-modal-images-slider,
#variant-modal .variant-modal-thumbs,
#variant-modal .variant-modal-main-image-container,
#variant-modal .modal-main-image-container,
#variant-modal .slick-list {
  -ms-overflow-style: none;   /* IE/Edge */
  scrollbar-width: none;      /* Firefox */
  -webkit-overflow-scrolling: touch; /* fluide iOS */
}
@media (max-width: 768px) {
  #variant-modal .variant-modal-images-slider,
  #variant-modal .variant-modal-main-image-container,
  #variant-modal .modal-main-image-container,
  #variant-modal .slick-list {
    overflow: clip !important;
  }
}
#variant-modal .variant-modal-images-slider::-webkit-scrollbar,
#variant-modal .variant-modal-thumbs::-webkit-scrollbar,
#variant-modal .variant-modal-main-image-container::-webkit-scrollbar,
#variant-modal .modal-main-image-container::-webkit-scrollbar,
#variant-modal .slick-list::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* PDP V2: keep variant modal below sticky header so close button stays visible */
body[data-product-v2="1"] {
  --variant-modal-top: calc(var(--header-h, 72px) + env(safe-area-inset-top, 0px) + 8px);
  --variant-modal-max-height: calc(100dvh - var(--variant-modal-top));
}
@media (max-width: 768px) {
  body[data-product-v2="1"] #variant-modal.variant-product-modal {
    top: var(--variant-modal-top) !important;
    bottom: 0 !important;
    max-height: var(--variant-modal-max-height) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: clip !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  body[data-product-v2="1"] #variant-modal .variant-modal-content {
    flex: 1 1 auto !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); /* Place pour les CTA fixes en bas */
  }
  body[data-product-v2="1"] #variant-modal .variant-modal-close-btn {
    top: 10px !important;
    z-index: 14 !important;
  }
}
/* Empêche les optimisations qui provoquent des décalages subtils */
#photoThumbnails .slick-track { will-change: auto !important; }
#photoThumbnails .slick-slide { transform: none !important; }

/* Mobile only */
@media (max-width: 768px) {
  #fullscreenGallerySlider img,
  #variantModalCarousel img.vmc-img,
  #mainPhotoContainer .bshoper-main-photo {
    /* laisse passer le scroll vertical quand pas en zoom */
    touch-action: pan-y;
  }
}
.vmc-img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  transform-origin:center center;
  touch-action: pan-y;        /* permet le scroll vertical dans la modale variant */
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
/* Conteneur de la grille */
.similar-products-content{
  display:grid;
  gap:1.5rem;               /* équiv. gap-6 */
  padding-top:20px;
  grid-template-columns:repeat(2,minmax(0,1fr)); /* mobile: 2 */
}

/* ≥ 640px : 3 colonnes */
@media (min-width:640px){
  .similar-products-content{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* ≥ 768px : 4 colonnes */
@media (min-width:768px){
  .similar-products-content{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

/* ≥ 1024px : 5 colonnes */
@media (min-width:1024px){
  .similar-products-content{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
}

/* Carte produit (remplace l’empilage de classes utilitaires) */
.similar-product-card{
  background:#fff;
  border-radius:0.5rem;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease, height .25s ease;
}

/* Effet hover (desktop) */
@media (hover:hover){
  .similar-product-card:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(0,0,0,.08);
  }
}

/* Wrapper image avec ratio stable */
.similar-product-media{
  position:relative;
  aspect-ratio:4/3;          /* évite les sauts de layout */
  overflow:hidden;
}
.similar-product-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s ease;
}
@media (hover:hover){
  .similar-product-card:hover .similar-product-media img{
    transform:scale(1.04);
  }
}

/* Corps */
.similar-product-body{
  padding:1rem;
  display:flex;
  flex-direction:column;
  gap:.35rem;
  flex:1 1 auto;
}

/* Boutons “cachés → visibles au survol” (équiv. group-hover) */
.similar-product-actions{
  display:none;
  margin-top:.75rem;
}
@media (hover:hover){
  .similar-product-card:hover .similar-product-actions{
    display:block;
    animation:sp-fade .18s ease both;
  }
}
@keyframes sp-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Petits helpers visuels */
.similar-product-title{color:#111827;font-weight:600;line-height:1.25}
.similar-product-price{font-weight:700;color:#000;font-size:.95rem}
.similar-product-meta{font-size:.75rem;color:#6b7280}
.similar-product-btn{
  width:100%;
  border-radius:.375rem;
  padding:.5rem .75rem;
  font-size:.875rem;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.similar-product-btn--primary{
  background:#000;color:#fff;border:1px solid #000;
}
.similar-product-btn--primary:hover{background:#111}
.similar-product-btn--ghost{
  background:#fff;color:#000;border:1px solid #e5e7eb;
}
.similar-product-btn--ghost:hover{background:#f9fafb}
/* ====== Grille ====== */
.similar-products-content{
  display:grid;
  gap:16px;                 /* espace entre cartes */
  grid-template-columns: repeat(2, minmax(0,1fr));
}

@media (min-width:640px){
  .similar-products-content{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width:768px){
  .similar-products-content{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (min-width:1024px){
  .similar-products-content{ grid-template-columns: repeat(5, minmax(0,1fr)); }
}

/* ====== Carte ====== */
.similar-product-card{
  display:flex;
  flex-direction:column;
  height:100%;
  background:#fff;
  border-radius:12px;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.similar-product-card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.10);
}

/* ====== Media (image) : ratio fixe pour aligner les lignes ====== */
.similar-product-media{
  position:relative;
  width:100%;
  aspect-ratio: 4 / 3;      /* ← change en 1/1 si tu veux du carré */
  background:#f5f5f5;
}
.similar-product-media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;          /* cover = remplissage sans bandes */
  display:block;
}

/* Fallback si ton navigateur ne supporte pas aspect-ratio : décommente
.similar-product-media{ padding-top:75%; }   /* 4/3 => 75% */
/*.similar-product-media img{ position:absolute; inset:0; }*/

/* ====== Corps ====== */
.similar-product-body{
  display:flex;
  flex-direction:column;
  padding:12px 14px 14px;
  gap:6px;
  flex:1;                    /* occupe la hauteur restante pour pousser les boutons en bas */
}

.similar-product-title{
  font-size:14px;
  line-height:1.25;
  color:#111827;
  font-weight:600;
  display:-webkit-box;
  -webkit-line-clamp: 2;     /* 2 lignes max */
  -webkit-box-orient: vertical;
  overflow:hidden;
  min-height: 2.5em;         /* réserve la place pour 2 lignes => alignement */
}

.similar-product-price{
  font-weight:700;
  color:#000;
  font-size:14px;
}

.similar-product-meta{
  font-size:12px;
  color:#6b7280;
}

/* ====== Actions alignées en bas ====== */
.similar-product-actions{
  margin-top:auto;           /* pousse les boutons au bas de la carte */
  display:grid;
  gap:8px;
  grid-template-columns: 1fr;
}

.similar-product-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  font-size:13px;
  line-height:1;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
  cursor:pointer;
  border:1px solid transparent;
}
.similar-product-btn--primary{
  background:#000; color:#fff;
}
.similar-product-btn--primary:hover{
  background:#111;
}
.similar-product-btn--ghost{
  background:#fff; color:#111; border-color:#e5e7eb;
}
.similar-product-btn--ghost:hover{
  background:#f9fafb;
}

/* ====== Liens couvrants sans casser la mise en page ====== */
.similar-product-card a{
  text-decoration:none;
}
/* === Similar products grid – force layout === */
.similar-products-content{
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  margin:0;
  padding:16px 0;
  display:grid !important;                 /* forcer la grille */
  grid-template-columns:repeat(auto-fill, minmax(200px,1fr));
  gap:16px;
  align-items:stretch;
}

/* neutraliser des styles globaux éventuels (floats, list, etc.) */
.similar-products-content > *{
  float:none !important;
  list-style:none !important;
  max-width:100% !important;
}

/* === Card === */
.similar-product-card{
  display:flex;
  flex-direction:column;
  height:100%;
  border-radius:12px;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .2s ease;
  overflow:hidden;
}
.similar-product-card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}

/* Image : même ratio pour toutes, pas d’étirement */
.similar-product-media{
  position:relative;
  width:100%;
  aspect-ratio: 1 / 1;                     /* carré moderne */
  overflow:hidden;
  background:#f5f5f5;
}
.similar-product-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Corps */
.similar-product-body{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px;
  min-height: 120px;                        /* garantit une hauteur confortable */
}

.similar-product-title{
  font-size:14px;
  line-height:1.2;
  font-weight:600;
  color:#111827;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.similar-product-price{
  font-weight:700;
  color:#111;
  font-size:14px;
}

.similar-product-meta{
  font-size:12px;
  color:#6b7280;
}

/* Actions alignées bas */
.similar-product-actions{
  margin-top:auto;
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}

.similar-product-btn{
  width:100%;
  border-radius:8px;
  padding:9px 12px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#111;
  transition:background .15s ease, border-color .15s ease;
}
.similar-product-btn--primary{
  background:#111;
  color:#fff;
  border-color:#111;
}
.similar-product-btn--primary:hover{ background:#000; }
.similar-product-btn--ghost:hover{ background:#f9fafb; }

/* === Responsive colonnes fixes si tu préfères === */
@media (min-width:480px){
  .similar-products-content{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:768px){
  .similar-products-content{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (min-width:1024px){
  .similar-products-content{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}
@media (min-width:1280px){
  .similar-products-content{ grid-template-columns:repeat(5, minmax(0,1fr)); }
}
/* Le corps devient le conteneur de positionnement des actions */
.similar-product-body{
  position: relative;
  padding:12px;
  padding-bottom: 56px;     /* réserve une zone bas pour les boutons (≈ hauteur 2 boutons + gap) */
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:120px;
}

/* Actions : posées en absolu en bas, cachées par défaut sans impacter la hauteur */
.similar-product-actions{
  position: absolute;
  left:12px;
  right:12px;
  bottom:12px;

  display:grid;
  grid-template-columns:1fr;
  gap:8px;

  opacity:0;
  visibility:hidden;
  transform: translateY(4px);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

/* Révélation au survol (desktop) ou au focus clavier (accessibilité / mobile) */
@media (hover:hover){
  .similar-product-card:hover .similar-product-actions{
    opacity:1;
    visibility:visible;
    transform: none;
    pointer-events:auto;
  }
}
.similar-product-card:focus-within .similar-product-actions{
  opacity:1;
  visibility:visible;
  transform: none;
  pointer-events:auto;
}
/* Mobile / écrans tactiles : afficher les boutons en permanence */
@media (hover: none), (pointer: coarse), (max-width: 640px){
  .similar-product-body{
    padding-bottom: 0;            /* on remet une mise en page normale */
  }
  .similar-product-actions{
    position: static;             /* plus d’absolu pour éviter le chevauchement */
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    margin-top: 8px;              /* petit espace au-dessus */
    display: grid;                /* s’assure que la grille est bien calculée */
    grid-template-columns: 1fr;   /* un bouton par ligne (change à 2 si tu veux) */
    gap: 8px;
  }
}
.bshoper-video-thumb {
  position: relative;
  display: inline-block;
}
.bshoper-video-thumb::after {
  content: '▶';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  background: rgba(0,0,0,.55);
  border-radius: 50%;
  pointer-events: none;
}
.bshoper-video-main-overlay {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.bshoper-video-main-overlay .play {
  width: 68px; height: 68px; border-radius:50%;
  background: rgba(0,0,0,.55); color:#fff; font-size:32px; line-height:68px; text-align:center;
}
/* ---- Logo BShoper ---- */
.site-logo:hover{ transform: scale(1.01); }
.header--compact .site-logo{ height:48px !important; }

/* CTA loading state pendant boot update async */
.bshop-cta-loading {
    position: relative;
    opacity: 0.85;
    cursor: wait;
}
.bshop-cta-loading::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -7px;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: bshop-cta-spin 0.6s linear infinite;
}
.bshop-cta-loading.price-button-secondary::after {
    border-color: rgba(15, 23, 42, 0.26);
    border-top-color: #111827;
}
@keyframes bshop-cta-spin {
    to { transform: rotate(360deg); }
}