/** Shopify CDN: Minification failed

Line 501:0 Unexpected "}"

**/
/* hc-spd2.css - 2e passe d'externalisation de sections/shop-product-details.liquid (19-08-2026).
   Contenu : le gros bloc <style> .shop-product-section (reglages -> variables --spd2-* definies
   inline par instance), le bloc .limited-stock-component (statique, etait duplique 2x) et la
   partie statique de .rating-component. Complements de hc-spd.css / hc-spd-suite.css (1re passe). */

.shop-product-section {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 8px;
    font-family: inherit;
    letter-spacing: var(--letter-spacing-body);
    background-color: var(--spd2-bg);
    color: var(--spd2-text);
    --accent-color: var(--spd2-accent);
}

/* Added container class to handle the margin without affecting other sections */
.shop-product-inner-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.shop-product-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    align-items: flex-start;
}

.shop-carousel-container {
    flex: 0 0 55%; /* Default width percentage */
    max-width: 55%; /* Matching max-width to the flex basis */
    position: relative; /* Default to relative positioning */
    align-self: flex-start;
}

.shop-product-info {
    flex: 0 0 calc(45% - 20px); /* Default percentage */
    max-width: calc(45% - 20px); /* Matching max-width to the flex basis */
    display: flex;
    flex-direction: column;
    gap: var(--spd2-gap);
    color: var(--spd2-text);
    width: 100%;
    overflow: hidden;
    text-align: left;
    align-items: flex-start;
}

.shop-carousel-container *,
.shop-carousel-container *::before,
.shop-carousel-container *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.shop-product-carousel {
    width: 90%;
    display: block;
    position: relative;
    padding: 0 5px;
}

.shop-main-image-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background-color: var(--spd2-imgbg);
    margin-bottom: 5px;
}

.shop-image-container {
    position: relative;
    padding-bottom: 100%; /* Perfect square (1:1 aspect ratio) for all devices */
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.shop-main-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Maintain aspect ratio within square container */
    display: none;
    background-color: transparent;
}

.shop-main-image.active {
    display: block;
}

.shop-thumbnails-outer {
    position: relative;
    width: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: center; /* Center the thumbnails wrapper */
}

.shop-thumbnails-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 5px;
    max-width: 100%;
    margin: 0 auto;
}

/* For desktop: limit thumbnails width to match the image container exactly */
@media (min-width: 800px) {
    .shop-thumbnails-wrapper {
        max-width: 100%; /* Match the width of the image container */
        width: 100%;
        justify-content: center;
    }

    .shop-thumbnails {
        /* Show approximately 4-5 thumbnails at once */
        max-width: calc(70px * 5 + 10px * 4); /* 5 thumbs + 4 gaps */
        justify-content: center;
        margin: 0 auto;
    }
}

.shop-thumbnails {
    display: flex;
    gap: 10px;
    width: 100%;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    padding: 5px 0;
}

.shop-thumbnails::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.shop-thumbnail {
    flex: 0 0 auto;
    width: 70px; /* Reduced from any larger value */
    height: 70px; /* Matching height to width for square thumbnails */
    cursor: pointer;
    border: 1px solid var(--spd2-thumb-border);
    border-radius: 4px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.shop-thumbnail.active {
    border-color: var(--spd2-thumb-active);
}

.thumb-square {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.thumb-square img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.shop-thumbnail-indicators {
    display: none;
    justify-content: center;
    gap: 5px;
    margin-top: 10px;
}

.shop-indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--spd2-ind);
    cursor: pointer;
}

.shop-indicator-dot.active {
    background-color: var(--spd2-ind-active);
}

.shop-nav-arrow {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--spd2-arrow-bg);
    border: 1px solid var(--spd2-arrow-border);
    border-radius: 50%;
    cursor: pointer;
    flex: 0 0 auto;
    z-index: 2;
    transition: all 0.2s ease;
}

/* Style for disabled arrows */
.shop-nav-arrow.disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.shop-nav-arrow:hover {
    background-color: #f5f5f5;
}

.shop-nav-arrow svg {
    width: 16px;
    height: 16px;
}

.shop-nav-arrow.shop-prev-arrow {
    margin-right: 5px;
}

.shop-nav-arrow.shop-next-arrow {
    margin-left: 5px;
}

.shop-nav-arrow.disabled {
    opacity: 0.5;
    cursor: default;
}

.shop-product-title {
    font-size: 28px !important; /* Increased by additional 8px */
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.3;
    font-weight: var(--font-weight-bold);
    color: var(--spd2-title);
    letter-spacing: var(--letter-spacing-heading);
    overflow: visible;
    word-wrap: break-word;
    max-width: 100%;
}

/* Rating component styling moved to inline style block */

.shop-product-price-container {
    margin: 1rem 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    font-family: var(--font-body-family-override);
}

.shop-product-price {
    font-size: 1.8rem;
    font-weight: var(--font-weight-semibold);
    color: var(--spd2-price) !important;
    letter-spacing: var(--letter-spacing-body);

.shop-product-price.on-sale {
    color: #EF4A65 !important;
}

.shop-compare-price {
    text-decoration: line-through !important;
    font-size: 1.6rem;
    color: var(--spd2-compare) !important;
    margin-left: 0.5rem !important;
    letter-spacing: var(--letter-spacing-body);
}

.shop-save-price {
    background-color: var(--spd2-sale-bg) !important;
    color: var(--spd2-sale-text) !important;
    font-weight: var(--font-weight-semibold);
    padding: 0.5rem 0.8rem !important;
    border-radius: 50px !important;
    margin-left: 0.75rem !important;
    letter-spacing: var(--letter-spacing-body);
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

.shop-save-price .tag-icon {
    margin-right: 4px;
    transform: rotate(90deg);
    position: relative;
    top: -0.5px;
}

.shop-product-description {
    margin: 1rem 0;
    line-height: 1.6;
    color: var(--spd2-desc);
    letter-spacing: var(--letter-spacing-body);
}

.shop-read-more, .shop-read-less {
    display: inline-block;
    margin-left: 0.5rem;
    color: var(--spd2-accent);
    text-decoration: none;
    font-weight: var(--font-weight-regular);
    letter-spacing: var(--letter-spacing-body);
}

.shop-custom-content {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--spd2-divider);
    letter-spacing: var(--letter-spacing-body);
    color: var(--spd2-custom);
}

@media (min-width: 768px) {
    .shop-carousel-container {
        max-width: var(--spd2-maxw);
    }
    
    .shop-thumbnail {
        width: 64px;
    }
    
    .shop-thumbnails {
        gap: 13px;
    }
    
    .shop-nav-arrow {
        width: 32px;
        height: 32px;
    }
    
    .shop-nav-arrow svg {
        width: 14px;
        height: 14px;
    }
    
    .shop-product- {
        padding: 0 7px;
    }
    
    .shop-main-image-wrapper {
        margin-bottom: 14px;
    }
    
    .shop-thumbnails-outer {
        margin: 10px 0;
    }
}

/* Tablet and mobile specific styles */
@media (max-width: 799px) {
    .shop-product-layout {
        flex-direction: column;
    }
    
    .shop-carousel-container, 
    .shop-product-info {
        flex: 0 0 100%;
        max-width: 100%;
        position: static; /* Remove sticky positioning on tablets */
        max-height: none;
    }
    
    .shop-carousel-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
    }
    
    .shop-image-container {
        max-width: 600px;
        margin: 0 auto;
        padding-bottom: 100%; /* Maintain perfect square */
    }
    
    .shop-thumbnails-outer {
        max-width: 600px;
        width: 100%;
        margin: 10px auto 0;
    }
    
    .shop-thumbnails-wrapper {
        max-width: 600px; /* Match the max-width of the image container */
        margin: 0 auto;
    }
}

        gap: 1rem;
    }
    
    .shop-carousel-container, 
    .shop-product-info {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .shop-product-info {
        gap: var(--spd2-gap2);
        padding-top: 10px;
        align-items: flex-start;
        text-align: left;
    }
    
    .shop-product-title {
        font-size: 26px !important;
        padding-right: 0;
        width: 100%;
    }
    
    .shop-thumbnail-indicators {
        display: flex;
    }
    
    /* Image and thumbnail styles for mobile */
    .shop-image-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-bottom: 100% !important; /* Square aspect ratio */
        margin: 0 !important;
    }
    
    .shop-thumbnails-outer {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 0 !important;
    }
    
    .shop-thumbnails-wrapper {
        width: 100% !important;
        max-width: 100% !important; /* Take full width on mobile */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .shop-product-carousel {
        width: 100% !important;
    }
    
    .shop-carousel-container {
        padding: 0 !important;
        width: 100% !important;
    }
    
    .shop-thumbnail {
        width: 60px;
        height: 60px;
        border-radius: 4px;
    }
    
    .shop-thumbnails {
        gap: 8px;
        padding: 5px 6px;
        justify-content: center;
    }
    
    .shop-nav-arrow {
        width: 24px;
        height: 24px;
    }
    
    .shop-nav-arrow svg {
        width: 12px;
        height: 12px;
    }
    
    /* Make sure images display properly in the square container */
    .shop-main-image {
        object-fit: contain;
    }
    
    /* Adjust hover effect for mobile */
    .shop-main-image:hover img {
        transform: scale(1.03); /* Slightly smaller scale for mobile */
    }
}

@media (max-width: 480px) {
    .shop-image-container,
    .shop-thumbnails-outer,
    .shop-thumbnails-wrapper {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
    
    .shop-thumbnails-outer {
        margin-top: 10px;
    }
    
    .shop-thumbnail {
        width: 50px;
        height: 50px;
        border-radius: 3px;
    }
    
    .shop-thumbnails {
        gap: 6px;
        padding: 5px 4px;
    }
    
    .shop-nav-arrow {
        width: 22px;
        height: 22px;
    }
    
    .shop-nav-arrow svg {
        width: 10px;
        height: 10px;
    }
}

/* Desktop layout adjustments */
@media (min-width: 800px) {
    .shop-product-layout {
        display: flex;
        gap: 20px; /* Reduced gap between carousel and product info */
        align-items: flex-start;
    }
    
    .shop-carousel-container {
        flex: 0 0 50%; /* Reduced from 55% to 50% */
        max-width: 50%; 
        position: sticky; /* Enable sticky for desktop only */
        top: 20px;
        height: fit-content;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    /* Hide scrollbar for Chrome, Safari and Opera */
    .shop-carousel-container::-webkit-scrollbar {
        display: none;
    }
    
    .shop-product-info {
        flex: 0 0 calc(50% - 20px); /* Adjusted to match carousel width */
        max-width: calc(50% - 20px);
    }
    
    .shop-match-image-width {
        max-width: 100%; /* Match exactly the image container width */
        width: 100%;
        padding: 0;
    }
    
    .shop-square-container,
    .shop-match-image-width {
        width: 100%; /* Ensure both have same width */
    }
    
    /* Center thumbnails within the container */
    .shop-thumbnails {
        justify-content: center;
    }
}

@media (max-width: 799px) {
    .shop-product-layout {
        flex-direction: column;
    }
    
    .shop-carousel-container, 
    .shop-product-info {
        flex: 0 0 100%;
        max-width: 100%;
        position: static; /* Remove sticky positioning on tablets */
        max-height: none;
    }
    
    .shop-carousel-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
    }
    
    .shop-image-container {
        max-width: 600px;
        margin: 0 auto;
        padding-bottom: 100%; /* Maintain perfect square */
    }
    
    .shop-thumbnails-outer {
        max-width: 600px;
        width: 100%;
        margin: 10px auto 0;
    }
    
    .shop-thumbnails-wrapper {
        max-width: 600px; /* Match the max-width of the image container */
        margin: 0 auto;
    }
}

@media (max-width: 767px) {
    .shop-image-container {
      max-width: 500px;
      padding-bottom: 100%; /* Maintain perfect square */
    }
    
    .shop-thumbnails-outer {
      max-width: 500px;
    }
    
    .shop-thumbnails-wrapper {
      max-width: 500px; /* Match the max-width of the image container */
    }
    
    .shop-product-info {
        gap: var(--spd2-gap2);
        padding-top: 10px;
        align-items: flex-start;
        text-align: left;
    }
    
    .shop-product-title {
        font-size: 26px !important;
        padding-right: 0;
        width: 100%;
    }
    
    .shop-thumbnail-indicators {
        display: flex;
    }
    
    /* Image and thumbnail styles for mobile */
    .shop-image-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-bottom: 100% !important; /* Square aspect ratio */
        margin: 0 !important;
    }
    
    .shop-thumbnails-outer {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 0 !important;
    }
    
    .shop-thumbnails-wrapper {
        width: 100% !important;
        max-width: 100% !important; /* Take full width on mobile */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .shop-product-carousel {
        width: 100% !important;
    }
    
    .shop-carousel-container {
        padding: 0 !important;
        width: 100% !important;
    }
    
    .shop-thumbnail {
        width: 60px;
        height: 60px;
        border-radius: 4px;
    }
    
    .shop-thumbnails {
        gap: 8px;
        padding: 5px 6px;
        justify-content: center;
    }
    
    .shop-nav-arrow {
        width: 24px;
        height: 24px;
    }
    
    .shop-nav-arrow svg {
        width: 12px;
        height: 12px;
    }
    
    /* Square aspect ratio for mobile */
    .shop-image-container {
        padding-bottom: 100%;
        margin: 0 auto;
        max-width: 500px; /* Prevent images from becoming too large on tablets */
    }

    /* Make sure images display properly in the square container */
    .shop-main-image {
        object-fit: contain;
    }
    
    /* Adjust hover effect for mobile */
    .shop-main-image:hover img {
        transform: scale(1.03); /* Slightly smaller scale for mobile */
    }
}

@media (max-width: 480px) {
    .shop-image-container {
      max-width: 100%;
      padding-bottom: 100%; /* Maintain perfect square */
    }
    
    .shop-thumbnails-outer {
      max-width: 100%;
    }
    
    .shop-thumbnails-wrapper {
      max-width: 100%; /* Match the max-width of the image container */
    }
    
    .shop-thumbnail {
        width: 50px;
        height: 50px;
        border-radius: 3px;
    }
    
    .shop-thumbnails {
        gap: 6px;
        padding: 5px 4px;
    }
    
    .shop-nav-arrow {
        width: 22px;
        height: 22px;
    }
    
    .shop-nav-arrow svg {
        width: 10px;
        height: 10px;
    }
}

/* ... existing code ... */

/* ---- .limited-stock-component (statique, ex-duplique) ---- */
.limited-stock-component {
                    font-family: var(--font-body-family);
                    letter-spacing: var(--letter-spacing-body);
                    display: inline-flex;
                    align-items: center;
                    width: auto;
                    max-width: 100%;
                  }
                  
                  .stock-icon {
                    margin-right: 8px;
                    display: flex;
                    align-items: center;
                    position: relative;
                    width: 14px;
                    height: 14px;
                  }
                  
                  .clock-face, .hour-hand, .minute-hand {
                    width: 14px;
                    height: 14px;
                  }
                  
                  .hour-hand, .minute-hand {
                    position: absolute;
                    top: 0;
                    left: 0;
                  }
                  
                  .minute-hand {
                    transform-origin: center;
                    animation: rotate 8s linear infinite;
                  }
                  
                  .hourglass {
                    animation: flip 2s infinite;
                    transform-origin: center;
                  }
                  
                  .limited-stock-text {
                      font-weight: var(--font-weight-regular);
                    margin-right: 4px;
                  }
                  
                  .stock-available {
                      font-weight: var(--font-weight-regular);
                  }
                  
                  @keyframes rotate {
                    from { transform: rotate(0deg); }
                    to { transform: rotate(360deg); }
                  }
                  
                  @keyframes flip {
                    0% { transform: rotate(0deg); }
                    50% { transform: rotate(180deg); }
                    100% { transform: rotate(0deg); }
                  }
                  
                  @media (max-width: 768px) {
                    .limited-stock-component {
                      flex-wrap: wrap;
                    }
                  }

/* ---- .rating-component (partie statique) ---- */
.rating-component {
                  font-family: var(--font-body-family-override);
                  letter-spacing: var(--letter-spacing-body);
                }
                
                @media (max-width: 768px) {
                  .rating-component {
                    flex-wrap: wrap;
                  }
                  
                  .rating-satisfaction {
                    margin-left: 0;
                    margin-top: 0px;
                  }
                }