/**
 * WooCommerce - Single Product Page Styles
 * 
 * @package i-sport-theme
 * @version 1.0.0
 */

/* ==========================================================================
   Shop Header - Exact Figma Values
   ========================================================================== */
.shop-header {
    width: 1920px;
    height: 100px;
    background: #FFFFFF;
    border-bottom: 1px solid #F5F5F5;
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 100;
}

/* Hide default site header on product pages */
.single-product .site-header {
    display: none !important;
}

/* Hide mobile nav and menu icon by default (desktop) */
.shop-mobile-nav {
    display: none;
}

.shop-header-menu-icon {
    display: none;
}

/* Hide image pagination dots by default (desktop) */
.image-pagination {
    display: none;
}

.shop-header-container {
    width: 1520px;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 32px;
}

/* Logo Container - 145x32 */
.shop-header-logo {
    width: 145px;
    height: 32px;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.shop-header-logo img {
    width: 145px;
    height: 32px;
}

/* Menu Icon - Hidden by default, shown at min600 */
.shop-header-menu-icon {
    display: none;
    width: 32px;
    height: 48px;
    align-items: center;
    justify-content: center;
}

.shop-header-menu-icon img {
    width: 32px;
    height: 48px;
}

/* Right Container - width: 1146, height: 32, gap: 32 */
.shop-header-right {
    width: 1146px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Navigation - gap: 32px */
.shop-header-nav {
    display: flex;
    align-items: center;
    gap: 32px;
    height: 32px;
}

/* Nav Links - Inter Bold 700, 16px, letter-spacing 2px, uppercase, #05061C */
.shop-nav-link {
    font-family: Inter, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #05061C;
    text-decoration: none;
    white-space: nowrap;
}

.shop-nav-link:hover {
    opacity: 0.7;
}

/* Actions Container - width: 461, height: 32, gap: 16px */
/* Icons container (inside 1146px right container) */
.shop-header-icons {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Icon Frames - 32x32 */
.shop-header-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icon Vectors - 24x24, #000000 */
.shop-header-icon svg {
    width: 24px;
    height: 24px;
    color: #000000;
}

/* Buy Button - 165x48, padding 16px 32px, bg #000000 */
.shop-header-btn {
    width: 165px;
    height: 48px;
    padding: 16px 32px;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    /* Text - Inter Extra Bold 800, 16px, capitalize, #FFFFFF */
    font-family: Inter, sans-serif;
    font-weight: 800;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0px;
    text-transform: capitalize;
    color: #FFFFFF;
    white-space: nowrap;
}

.shop-header-btn:hover {
    background: #171717;
    color: #FFFFFF;
}

/* ==========================================================================
   Single Product Page Layout
   ========================================================================== */
.single-product-page {
    width: 1920px;
    background: #FFFFFF;
}

.product-layout {
    display: flex;
    flex-wrap: wrap;
    width: 1920px;
}

/* Accordion Wrapper - positions accordion in left column for desktop */
.accordion-wrapper {
    width: 1440px;
    order: 3;
}

/* ==========================================================================
   Left Column - Product Images (pics_container)
   ========================================================================== */
.product-images-column {
    width: 1440px;
    min-height: 1920px;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    order: 1;
}

/* Product Images Grid (Frame 50) - 2x2 grid */
.product-images-grid {
    display: grid;
    grid-template-columns: repeat(2, 720px);
    grid-template-rows: repeat(2, 960px);
    gap: 0;
    width: 1440px;
    height: 1920px;
}

/* Individual Product Image Cell (Frame 40) */
.product-image-cell {
    width: 720px;
    height: 960px;
    background: #F0F0F0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-image-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   Right Column - Product Details
   width: 480, height: 2816, gap: 32px, padding: 32px
   ========================================================================== */
.product-details-column {
    width: 480px;
    height: auto;
    gap: 32px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    order: 2;
}

/* Subtitle - "Für Damen und Herren" */
/* width: 178, height: 40, Inter Bold 700, 16px, line-height 40px, letter-spacing 0.05%, capitalize, #05061C */
.product-subtitle {
    width: 178px;
    height: 40px;
    font-family: Inter, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 40px;
    letter-spacing: 0.05%;
    text-transform: capitalize;
    color: #05061C;
}

/* Product Title - "I-SPORT EMS" */
/* width: 335, height: 40, Oswald Bold 900, 32px, line-height 40px, letter-spacing -1.5%, uppercase, #05061C */
.product-details-column .product_title {
    width: 335px;
    height: 40px;
    font-family: 'Oswald', sans-serif;
    font-weight: 900;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.48px;
    text-transform: uppercase;
    color: #05061C;
    margin: 0;
}

/* Frame 54 - Features container */
/* width: 416, height: 56, gap: 8px */
.product-features {
    width: 416px;
    height: 56px;
    gap: 8px;
    display: flex;
    flex-direction: column;
}

/* Feature row container */
/* width: 416, height: 24, gap: 4px */
.product-feature-row {
    width: 416px;
    height: 24px;
    gap: 4px;
    display: flex;
    align-items: center;
}

/* Feature icon - 24x24 */
.product-feature-row img,
.product-feature-row svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Feature text */
/* Inter Regular 400, 16px, line-height 150%, letter-spacing 1.2px, capitalize, #05061C */
.product-feature-row span {
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 1.2px;
    text-transform: capitalize;
    color: #05061C;
}

/* Size Section Container */
/* width: 416, height: 24, gap: 8px */
.size-section-header {
    width: 416px;
    height: 24px;
    gap: 8px;
    display: flex;
    align-items: center;
}

/* Size Section Label - "Herrengrößen" */
/* Inter Black 900, 16px, line-height 150%, letter-spacing 1.2px, capitalize, #05061C */
.size-section-label {
    height: 24px;
    font-family: Inter, sans-serif;
    font-weight: 900;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 1.2px;
    text-transform: capitalize;
    color: #05061C;
    white-space: nowrap;
}

/* Custom Suit Button - "Maßanfertigung" */
/* width: 416, height: 56, border: 1px solid #B4B4BB, background: #FFFFFF */
.custom-suit-button {
    width: 416px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #B4B4BB;
    border-radius: 0;
    background: #FFFFFF;
    font-family: Inter, sans-serif;
    font-weight: 900;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 1.2px;
    text-transform: capitalize;
    color: #05061C;
    cursor: pointer;
    outline: none;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.custom-suit-button:hover {
    background: #E5E5E8;
}

.custom-suit-button.active {
    background: #CDCDD2;
    border-color: #B4B4BB;
}

/* Size Guide Link - "Größenguide" */
/* width: 416, height: 36, gap: 8px */
.size-guide-container {
    width: 416px;
    height: 36px;
    gap: 8px;
    display: flex;
    align-items: center;
}

/* Größenguide text */
/* Inter Black 900, 24px, line-height 150%, letter-spacing 1.2px, capitalize, underline, #05061C */
.size-guide-link {
    font-family: Inter, sans-serif;
    font-weight: 900;
    font-size: 24px;
    line-height: 150%;
    letter-spacing: 1.2px;
    text-transform: capitalize;
    text-decoration: underline;
    color: #05061C;
    cursor: pointer;
}

/* Add to Cart Button - "In den Warenkorb" */
/* width: 416, height: 100, padding: 32px 64px, background: #05061C */
.add-to-cart-btn {
    width: 416px;
    height: 100px;
    padding: 32px 64px;
    gap: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #05061C;
    border: none;
    border-radius: 0;
    cursor: pointer;
    box-sizing: border-box;
    /* Text: Inter Black 900, 24px, line-height 150%, letter-spacing 1.2px, capitalize, #FFFFFF */
    font-family: Inter, sans-serif;
    font-weight: 900;
    font-size: 24px;
    line-height: 150%;
    letter-spacing: 1.2px;
    text-transform: capitalize;
    color: #FFFFFF;
    text-decoration: none;
}

.add-to-cart-btn:hover {
    background: #1a1b2e;
}

/* Payment Methods Section */
/* width: 380, height: 64, gap: 16px */
.payment-methods {
    width: 380px;
    height: 64px;
    gap: 16px;
    display: flex;
    flex-direction: column;
}

/* Payment Methods Label - "Akzeptierte zahlungsarten" */
/* Inter Bold 700, 16px, line-height 16px, letter-spacing -0.05%, capitalize, #05061C */
.payment-methods-label {
    width: 212px;
    height: 16px;
    font-family: Inter, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: -0.05%;
    text-transform: capitalize;
    color: #05061C;
}

/* Payment Icons Container */
/* width: 380, height: 32, gap: 8px */
.payment-icons {
    width: 380px;
    height: 32px;
    gap: 8px;
    display: flex;
    align-items: center;
}

/* Payment Icon */
.payment-icon {
    width: 32px;
    height: 32px;
}

/* ==========================================================================
   Accordion Section (Below Product Images)
   ========================================================================== */
/* Accordion Container */
/* width: 1440, height: 896, gap: 16px, padding: 100px */
.accordion-container {
    width: 1440px;
    height: 896px;
    gap: 16px;
    padding: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

/* Accordion Inner Frame */
/* width: 1000, height: 504, background: #FFFFFF */
.accordion-frame {
    width: 1000px;
    height: 504px;
    background: #FFFFFF;
    margin: 0;
    padding: 0;
}

/* Accordion Item - wrapper holding header (Frame 51) + content (Frame 52) */
.accordion-item {
    width: 1000px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    cursor: pointer;
}

/* Accordion Item Title */
/* Inter Bold 700, 24px, line-height 150%, letter-spacing 0.05%, capitalize, #373849 */
.accordion-title {
    height: 36px;
    font-family: Inter, sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 150%;
    letter-spacing: 0.05%;
    text-transform: capitalize;
    color: #373849;
    margin: 0;
    padding: 0;
}

/* Accordion Arrow/Chevron */
/* 16x16px, rotated 45deg, border-right and border-bottom only, #505160 */
.accordion-arrow {
    width: 16px;
    height: 16px;
    border: 0;
    border-right: 1px solid #505160;
    border-bottom: 1px solid #505160;
    transform: rotate(45deg);
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

/* Accordion Item Expanded - content frame handles its own height */
.accordion-item.expanded {
    height: auto;
}

/* Accordion Header (Frame 51) - title + arrow row */
/* width: 1000, height: 80, gap: 10px, padding: 32px top/bottom, border-bottom: 1px solid #B4B4BB */
.accordion-header {
    width: 100%;
    height: 80px;
    gap: 10px;
    padding-top: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid #B4B4BB;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Arrow rotates up when expanded */
.accordion-item.expanded .accordion-arrow {
    transform: rotate(-135deg);
}

/* Accordion Content (Frame 52) - text wrapper */
/* width: 1000, height: 424, padding: 32px top/bottom (inner text 360), border-bottom: 1px solid #B4B4BB */
/* Text: Inter Regular 400, 16px, line-height 150%, letter-spacing 0.05%, capitalize, #373849 */
.accordion-content {
    width: 100%;
    height: 424px;
    padding-top: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid #B4B4BB;
    box-sizing: border-box;
    overflow-y: auto;
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.05%;
    text-transform: capitalize;
    color: #373849;
    margin: 0;
    display: none;
}

/* Paragraph spacing inside accordion content */
.accordion-content p {
    margin: 0 0 24px 0;
}

.accordion-content p:last-child {
    margin-bottom: 0;
}

/* Show content when expanded */
.accordion-item.expanded .accordion-content {
    display: block;
}

/* Size Section Wrapper */
.size-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Size Buttons Grid */
/* width: 416, height: 112, rows: 2, columns: 3, row-gap: 8px, column-gap: 8px */
.size-buttons-grid {
    display: grid;
    grid-template-columns: repeat(3, 134px);
    grid-template-rows: repeat(2, 52px);
    row-gap: 8px;
    column-gap: 8px;
    width: 416px;
    height: 112px;
}

/* Size Button */
/* width: 134, height: 52, border: 1px solid #B4B4BB */
/* Text: Inter Black 900, 16px, line-height 150%, letter-spacing 1.2px, capitalize, #05061C */
.size-button {
    width: 134px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #B4B4BB;
    border-radius: 0;
    background: #FFFFFF;
    font-family: Inter, sans-serif;
    font-weight: 900;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #05061C;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/* Size Button - Selected/Active State */
/* background: #CDCDD2 */
.size-button.active {
    background: #CDCDD2;
}

.size-button:hover {
    background: #E5E5E8;
}

/* ==========================================================================
   Shop Footer
   ========================================================================== */
/* Footer Container */
/* width: 1920, height: 321, background: #121227, border-top: 1px solid #505160 */
.shop-footer {
    width: 1920px;
    height: 321px;
    background: #121227;
    border-top: 1px solid #505160;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Footer Inner Container */
/* width: 1520, height: 32, max-width: 1536px, justify-content: space-between, padding: 0 24px */
.shop-footer-inner {
    width: 1520px;
    height: 32px;
    max-width: 1536px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 24px;
    padding-left: 24px;
    box-sizing: border-box;
}

/* Footer Logo */
.shop-footer-logo {
    width: 145px;
    height: 32px;
}

.shop-footer-logo img {
    width: 145px;
    height: 32px;
}

/* Footer Links Container */
/* width: 358, height: 15 */
.shop-footer-links {
    width: 358px;
    height: 15px;
    display: flex;
    align-items: center;
}

/* Link with left margin (48px padding-left) */
.shop-footer-link + .shop-footer-link {
    padding-left: 48px;
}

/* Footer Link */
/* Inter Bold 700, 10px, line-height 15px, letter-spacing 2px, uppercase, #FFFFFF */
.shop-footer-link {
    font-family: Inter, sans-serif;
    font-weight: 700;
    font-size: 10px;
    line-height: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #FFFFFF;
    text-decoration: none;
}

.shop-footer-link:hover {
    opacity: 0.8;
}

/* ==========================================================================
   Responsive - min1280 (1280px - 1919px)
   Scoped to the Customizer preview only. On the live desktop we scale the
   1920 design to fit instead (see footer-shop.php scaleToFit), so this
   breakpoint must not fire there.
   ========================================================================== */
@media (max-width: 1919px) and (min-width: 1280px) {
    /* Header - width: 1280, height: 100, padding: 200px */
    body.is-customizer-preview .shop-header {
        width: 1280px;
        height: 100px;
        padding-right: 200px;
        padding-left: 200px;
    }
    
    /* Header Container - width: 1180, height: 48, gap: 24 */
    body.is-customizer-preview .shop-header-container {
        width: 1180px;
        height: 48px;
        gap: 24px;
    }
    
    /* Right Container - width: 822, height: 32, gap: 32 */
    body.is-customizer-preview .shop-header-right {
        width: 822px;
        height: 32px;
        gap: 32px;
    }
    
    /* Product Page Layout - width: 1280 */
    body.is-customizer-preview .single-product-page {
        width: 1280px;
    }
    
    body.is-customizer-preview .product-layout {
        width: 1280px;
        display: flex;
    }
    
    /* Left Column - width: 800 */
    body.is-customizer-preview .product-images-column {
        width: 800px;
        display: flex;
        flex-direction: column;
    }
    
    /* Image Grid - width: 800, height: 4268 (4 x 1067px) */
    body.is-customizer-preview .product-images-grid {
        width: 800px;
        height: 4268px;
        display: grid;
        grid-template-columns: 800px;
        grid-template-rows: repeat(4, 1067px);
        flex-shrink: 0;
    }
    
    /* Image Cell - width: 800, height: 1067 - show all cells */
    body.is-customizer-preview .product-image-cell {
        width: 800px;
        height: 1067px;
        display: block;
    }
    
    body.is-customizer-preview .product-image-cell img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    /* Hide pagination dots on min1280 */
    body.is-customizer-preview .image-pagination {
        display: none;
    }
    
    /* Hide mobile menu icon on min1280 */
    body.is-customizer-preview .shop-header-menu-icon {
        display: none;
    }
    
    /* Show desktop nav on min1280 */
    body.is-customizer-preview .shop-header-nav {
        display: flex;
    }
    
    /* Right Column - width: 480 */
    body.is-customizer-preview .product-details-column {
        width: 480px;
    }
    
    /* Accordion Container - width: 800, height: 1136, gap: 16px, padding: 100px */
    body.is-customizer-preview .accordion-container {
        width: 800px;
        height: 1136px;
        gap: 16px;
        padding: 100px;
        box-sizing: border-box;
    }
    
    /* Accordion Frame - width: 600 */
    body.is-customizer-preview .accordion-frame {
        width: 600px;
    }
    
    /* Accordion Item - width: 600 */
    body.is-customizer-preview .accordion-item {
        width: 600px;
    }
    
    /* Accordion Content */
    body.is-customizer-preview .accordion-content {
        width: 600px;
    }
    
    /* Accordion Wrapper - width: 800 for min1280 */
    body.is-customizer-preview .accordion-wrapper {
        width: 800px;
        order: 3;
    }
    
    /* Footer - width: 1280, height: 233 */
    body.is-customizer-preview .shop-footer {
        width: 1280px;
        height: 233px;
    }
}

/* ==========================================================================
   Responsive - min600 (600px - 1279px)
   ========================================================================== */
@media (max-width: 1279px) and (min-width: 600px) {
    /* Header - width: 600, height: auto for dropdown */
    .shop-header {
        width: 600px;
        min-height: 100px;
        background: #FFFFFF;
        border-bottom: 1px solid #F5F5F5;
        backdrop-filter: blur(12px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 0;
        position: relative;
    }
    
    /* Header Container - width: 536, height: 48 */
    .shop-header-container {
        width: 536px;
        height: 48px;
        gap: 0;
        display: flex;
        align-items: center;
        margin: 26px 0;
    }
    
    /* Menu Icon - gap after it */
    .shop-header-menu-icon {
        display: flex;
        width: 32px;
        height: 48px;
        margin-right: 21px;
    }
    
    /* Logo Container - width: 145, height: 32, pushes rest to right */
    .shop-header-logo {
        width: 145px;
        height: 32px;
        margin-right: auto;
    }
    
    .shop-header-logo img {
        width: 145px;
        height: 32px;
    }
    
    /* Right container (icons) - close to button */
    .shop-header-right {
        width: auto;
        height: 32px;
        display: flex;
        margin-right: 8px;
    }
    
    /* Icons Container - gap: 10px between icons */
    .shop-header-icons {
        display: flex;
        align-items: center;
        gap: 10px;
        height: 32px;
    }
    
    /* Individual icons - width: 32, height: 32 */
    .shop-header-icon {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .shop-header-icon img {
        width: 32px;
        height: 32px;
    }
    
    /* Hide desktop navigation in min600 */
    .shop-header-nav {
        display: none;
    }
    
    /* Mobile Navigation Dropdown */
    .shop-mobile-nav {
        display: none;
        flex-direction: column;
        width: 100%;
        background: #FFFFFF;
        padding: 20px 32px;
        box-sizing: border-box;
        border-bottom: 1px solid #F5F5F5;
    }
    
    .shop-mobile-nav.active {
        display: flex;
    }
    
    .shop-mobile-nav-link {
        font-family: Inter, sans-serif;
        font-weight: 700;
        font-size: 16px;
        line-height: 15px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #05061C;
        text-decoration: none;
        padding: 16px 0;
        border-bottom: 1px solid #F5F5F5;
    }
    
    .shop-mobile-nav-link:last-child {
        border-bottom: none;
    }
    
    .shop-mobile-nav-link:hover {
        opacity: 0.7;
    }
    
    /* Button - width: 165, height: 48, padding: 16px 32px */
    .shop-header-btn {
        width: 165px;
        height: 48px;
        padding-top: 16px;
        padding-right: 32px;
        padding-bottom: 16px;
        padding-left: 32px;
        background: #000000;
        box-sizing: border-box;
        font-family: Inter, sans-serif;
        font-weight: 800;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0px;
        text-transform: capitalize;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Product page min600 - width: 600, height: 2672 */
    .single-product-page {
        width: 600px;
        height: auto;
        padding: 0;
        box-sizing: border-box;
        background: #FFFFFF;
    }
    
    .product-layout {
        width: 600px;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
    }
    
    /* Images Column - order: 1 (first) */
    .product-images-column {
        width: 600px;
        height: auto;
        min-height: auto;
        display: flex;
        flex-direction: column;
        order: 1;
    }
    
    /* Accordion Wrapper - order: 3 (last, after product details) */
    .accordion-wrapper {
        width: 600px;
        order: 3;
    }
    
    /* Accordion Container for min600 - width: 600, height: 824, gap: 16px */
    .accordion-container {
        width: 600px;
        height: 824px;
        gap: 16px;
        padding: 64px 32px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .accordion-frame {
        width: 536px;
    }
    
    .accordion-item {
        width: 536px;
    }
    
    .accordion-header {
        width: 536px;
    }
    
    .accordion-content {
        width: 536px;
        height: auto;
    }
    
    /* Footer for min600 - width: 600, height: 136 */
    .shop-footer {
        width: 600px !important;
        height: 136px !important;
        padding: 32px 16px !important;
        background: var(--main95, #121227) !important;
        border-top: 1px solid var(--main70, #505160) !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .shop-footer-inner {
        width: 536px !important;
        height: 71px !important;
        gap: 24px !important;
        padding: 0 24px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
    }
    
    .shop-footer-logo {
        width: 145px !important;
        height: 32px !important;
        flex-shrink: 0 !important;
        align-self: flex-start !important;
    }
    
    .shop-footer-logo img {
        width: 145px !important;
        height: 32px !important;
    }
    
    .shop-footer-links {
        width: auto !important;
        height: 15px !important;
        gap: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        align-self: flex-end !important;
    }
    
    .shop-footer-link {
        width: auto !important;
        height: 15px !important;
        font-family: Inter, sans-serif !important;
        font-weight: 700 !important;
        font-size: 10px !important;
        line-height: 15px !important;
        letter-spacing: 2px !important;
        text-transform: uppercase !important;
        color: #FFFFFF !important;
        padding-left: 0 !important;
    }
    
    /* pics_container - width: 600, height: 800 */
    .product-images-grid {
        width: 600px;
        height: 800px;
        display: block;
        overflow: hidden;
    }
    
    /* Image - width: 600, height: 800 - carousel mode */
    .product-image-cell {
        width: 600px;
        height: 800px;
        display: none;
    }
    
    .product-image-cell.active {
        display: block;
    }
    
    .product-image-cell img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    /* Image Pagination (Frame 57) - width: 600, height: 80, gap: 16px */
    .image-pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 600px;
        height: 80px;
        gap: 16px;
    }
    
    /* Pagination Dot (Ellipse 2) - width: 16, height: 16 */
    .pagination-dot {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #B4B4BB;
        cursor: pointer;
        transition: background 0.3s ease;
    }
    
    .pagination-dot.active {
        background: var(--main, #05061C);
    }
    
    .pagination-dot:hover {
        background: #505160;
    }
    
    /* Product Details Container - width: 600, height: 968, gap: 32px, padding: 64px 32px */
    .product-details-column {
        width: 600px;
        height: auto;
        gap: 32px;
        padding: 64px 32px;
        box-sizing: border-box;
        order: 2;
        display: flex;
        flex-direction: column;
    }
    
    /* Subtitle - "Für Damen und Herren" - width: 178, height: 40 */
    .product-subtitle {
        width: 178px;
        height: 40px;
        font-family: Inter, sans-serif;
        font-weight: 700;
        font-size: 16px;
        line-height: 40px;
        letter-spacing: 0.05%;
        text-transform: capitalize;
        color: var(--main, #05061C);
    }
    
    /* Product Title - "I-SPORT EMS" - width: 335, height: 40 */
    .product_title {
        width: 335px;
        height: 40px;
        font-family: Oswald, sans-serif;
        font-weight: 900;
        font-size: 32px;
        line-height: 40px;
        letter-spacing: -0.48px;
        text-transform: uppercase;
        color: var(--main, #05061C);
        margin: 0;
    }
    
    /* Shipping Info Frame (Frame 54) - width: 416, height: 56, gap: 8px */
    .shipping-info {
        width: 416px;
        height: 56px;
        gap: 8px;
    }
    
    /* Shipping Info Row - width: 416, height: 24, gap: 4px */
    .shipping-info-row {
        width: 416px;
        height: 24px;
        gap: 4px;
    }
    
    /* Shipping Info Text - font: Inter Regular 400, 16px */
    .shipping-info-text {
        font-family: Inter, sans-serif;
        font-weight: 400;
        font-size: 16px;
        line-height: 150%;
        letter-spacing: 1.2px;
        text-transform: capitalize;
        color: var(--main, #05061C);
    }
    
    /* Shipping/Return Icon - width: 24, height: 24 */
    .shipping-info-icon {
        width: 24px;
        height: 24px;
    }
    
    .shipping-info-icon img {
        width: 24px;
        height: 24px;
    }
    
    /* Size Section Container - width: 536, height: auto, gap: 8px */
    .size-section {
        width: 536px;
        height: auto;
        gap: 8px;
        display: flex;
        flex-direction: column;
    }
    
    /* Size Section Header - width: 536, height: 24, gap: 8px */
    .size-section-header {
        width: 536px;
        height: 24px;
        gap: 8px;
        display: flex;
        align-items: center;
    }
    
    /* Size Label (Herrengrößen/Damengrößen) - font: Inter Black 900, 16px */
    .size-section-label {
        font-family: Inter, sans-serif;
        font-weight: 900;
        font-size: 16px;
        line-height: 150%;
        letter-spacing: 1.2px;
        text-transform: capitalize;
        color: var(--main, #05061C);
    }
    
    /* Size Buttons Grid - width: 536, height: 112, 2 rows x 3 columns */
    .size-buttons-grid {
        width: 536px;
        height: 112px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 52px);
        row-gap: 8px;
        column-gap: 8px;
    }
    
    /* Size Button - width: ~173, height: 52 */
    .size-button {
        width: auto;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--main30, #B4B4BB);
        background: #FFFFFF;
        box-sizing: border-box;
        font-family: Inter, sans-serif;
        font-weight: 900;
        font-size: 16px;
        line-height: 150%;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: #05061C;
    }
    
    .size-button.active {
        background: var(--main20, #CDCDD2);
    }
    
    /* Custom Suit Button - width: 536, height: 56 */
    .custom-suit-button {
        width: 536px;
        height: 56px;
    }
    
    /* Size Guide Container - width: 536 */
    .size-guide-container {
        width: 536px;
    }
    
    /* Add to Cart Button - width: 536 */
    .add-to-cart-btn {
        width: 536px;
        height: 100px;
    }
    
    /* Product Features - width: 536 */
    .product-features {
        width: 536px;
        height: auto;
    }
    
    .product-feature-row {
        width: 536px;
    }
}

/* ==========================================================================
   Responsive - Mobile (below 600px / 390px design)
   ========================================================================== */
@media (max-width: 599px) {
    /* Header - width: 390, height: 60 */
    .shop-header {
        width: 390px !important;
        height: 60px !important;
        background: #FFFFFF !important;
        border-bottom: 1px solid #F5F5F5 !important;
        backdrop-filter: blur(12px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }
    
    /* Header Container - width: 358, height: 48, gap: 18 */
    .shop-header-container {
        width: 358px !important;
        height: 48px !important;
        gap: 18px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Menu Icon - width: 32, height: 48, pushes rest to right */
    .shop-header-menu-icon {
        display: flex !important;
        width: 32px !important;
        height: 48px !important;
        gap: 4px !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        margin-right: auto !important;
        order: 1 !important;
    }
    
    .shop-header-menu-icon img {
        width: 32px !important;
        height: 32px !important;
    }
    
    /* Hide logo on mobile */
    .shop-header-logo {
        display: none !important;
        order: 0 !important;
    }
    
    /* Icons container - on right side */
    .shop-header-right {
        display: flex !important;
        align-items: center !important;
        gap: 18px !important;
        height: 48px !important;
        width: auto !important;
        order: 2 !important;
        flex-shrink: 0 !important;
    }
    
    /* Icons wrapper - width: 145, height: 24, gap: 16 */
    .shop-header-icons {
        width: 145px !important;
        height: 24px !important;
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        justify-content: flex-end !important;
    }
    
    /* Header Icon (Cart) - width: 24, height: 24 */
    .shop-header-icon {
        width: 24px !important;
        height: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .shop-header-icon img {
        width: 24px !important;
        height: 24px !important;
    }
    
    /* Buy Button - width: 145, height: 48 */
    .shop-header-btn {
        display: flex !important;
        width: 145px !important;
        height: 48px !important;
        padding: 16px 32px !important;
        background: #000000 !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        order: 3 !important;
    }
    
    /* Hide desktop navigation */
    .shop-header-nav {
        display: none !important;
    }
    
    /* ==========================================================================
       Product Page - Mobile (390px)
       ========================================================================== */
    
    /* Product Page Container - width: 390, height: 2816 */
    .single-product-page {
        width: 390px !important;
        height: auto !important;
        padding: 0 !important;
        background: #FFFFFF !important;
    }
    
    .product-layout {
        width: 390px !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Images Column (pics_container) - width: 390, height: 520 */
    .product-images-column {
        width: 390px !important;
        height: 520px !important;
        min-height: auto !important;
        order: 1 !important;
    }
    
    /* Image Grid - single image carousel */
    .product-images-grid {
        width: 390px !important;
        height: 520px !important;
        display: block !important;
        overflow: hidden !important;
    }
    
    /* Image Cell - carousel mode */
    .product-image-cell {
        width: 390px !important;
        height: 520px !important;
        display: none !important;
    }
    
    .product-image-cell.active {
        display: block !important;
    }
    
    .product-image-cell img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    /* Image Pagination (Frame 57) - width: 390, height: 80, gap: 16px */
    .image-pagination {
        display: flex !important;
        width: 390px !important;
        height: 80px !important;
        gap: 16px !important;
        padding: 32px 0 !important;
        justify-content: center !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }
    
    /* Pagination Dot - 16x16 */
    .pagination-dot {
        width: 16px !important;
        height: 16px !important;
        border-radius: 50% !important;
        background: #B4B4BB !important;
    }
    
    .pagination-dot.active {
        background: #05061C !important;
    }
    
    /* Product Details Container - width: 390, height: 904, gap: 32px */
    .product-details-column {
        width: 390px !important;
        height: auto !important;
        gap: 32px !important;
        padding: 32px 16px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        order: 2 !important;
    }
    
    /* Subtitle - width: 178, height: 40 */
    .product-subtitle {
        width: 178px !important;
        height: 40px !important;
        font-family: Inter, sans-serif !important;
        font-weight: 700 !important;
        font-size: 16px !important;
        line-height: 40px !important;
        letter-spacing: 0.05% !important;
        text-transform: capitalize !important;
        color: #05061C !important;
    }
    
    /* Product Title - width: 335, height: 40 */
    .product_title {
        width: 335px !important;
        height: 40px !important;
        font-family: Oswald, sans-serif !important;
        font-weight: 900 !important;
        font-size: 32px !important;
        line-height: 40px !important;
        letter-spacing: -0.48px !important;
        text-transform: uppercase !important;
        color: #05061C !important;
        margin: 0 !important;
    }
    
    /* Features Container (Frame 54) - width: 358, height: 56, gap: 8px */
    .product-features {
        width: 358px !important;
        height: 56px !important;
        gap: 8px !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Feature Row - width: 358, height: 24, gap: 4px */
    .product-feature-row {
        width: 358px !important;
        height: 24px !important;
        gap: 4px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Feature Text - Inter Regular 400, 16px */
    .product-feature-row span {
        font-family: Inter, sans-serif !important;
        font-weight: 400 !important;
        font-size: 16px !important;
        line-height: 150% !important;
        letter-spacing: 0px !important;
        text-transform: capitalize !important;
        color: #05061C !important;
    }
    
    /* Size Section Header - width: 358, height: 24, gap: 8px */
    .size-section-header {
        width: 358px !important;
        height: 24px !important;
        gap: 8px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Size Section Label - Inter Black 900, 16px */
    .size-section-label {
        font-family: Inter, sans-serif !important;
        font-weight: 900 !important;
        font-size: 16px !important;
        line-height: 150% !important;
        letter-spacing: 1.2px !important;
        text-transform: capitalize !important;
        color: #05061C !important;
    }
    
    /* Size Section Container */
    .size-section {
        width: 358px !important;
        height: auto !important;
        gap: 8px !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Size Buttons Grid - width: 358, height: 112, 2 rows x 3 columns */
    .size-buttons-grid {
        width: 358px !important;
        height: 112px !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        grid-template-rows: repeat(2, 52px) !important;
        row-gap: 8px !important;
        column-gap: 8px !important;
        box-sizing: border-box !important;
    }
    
    /* Size Button */
    .size-button {
        width: auto !important;
        height: 52px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid #B4B4BB !important;
        background: #FFFFFF !important;
        box-sizing: border-box !important;
        font-family: Inter, sans-serif !important;
        font-weight: 900 !important;
        font-size: 16px !important;
        text-transform: uppercase !important;
        color: #05061C !important;
    }
    
    .size-button.active {
        background: #CDCDD2 !important;
    }
    
    /* Add to Cart Button - width: 358, height: 100, padding: 32px */
    .add-to-cart-btn {
        width: 358px !important;
        height: 100px !important;
        gap: 16px !important;
        padding: 32px !important;
        background: #05061C !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
    
    /* Accordion Wrapper - order: 3 (after product details) */
    .accordion-wrapper {
        width: 390px !important;
        order: 3 !important;
    }
    
    /* Accordion Container - width: 390, gap: 16px */
    .accordion-container {
        width: 390px !important;
        height: auto !important;
        gap: 16px !important;
        padding: 32px 16px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        overflow: visible !important;
    }
    
    /* Accordion Frame */
    .accordion-frame {
        width: 358px !important;
        height: auto !important;
    }
    
    /* Accordion Item */
    .accordion-item {
        width: 358px !important;
        height: auto !important;
    }
    
    /* Accordion Header */
    .accordion-header {
        width: 358px !important;
        height: auto !important;
        min-height: 80px !important;
    }
    
    /* Accordion Content - auto height when expanded */
    .accordion-content {
        width: 358px !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* ==========================================================================
       Footer - Mobile (390px)
       ========================================================================== */
    
    /* Footer - width: 390, height: 192 */
    .shop-footer {
        width: 390px !important;
        height: 192px !important;
        padding: 32px !important;
        background: #121227 !important;
        border-top: 1px solid #505160 !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Footer Inner Container - width: 326, height: 127, gap: 18 */
    .shop-footer-inner {
        width: 326px !important;
        height: 127px !important;
        gap: 18px !important;
        padding: 0 24px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
    }
    
    /* Footer Logo Container - width: 145, height: 32 */
    .shop-footer-logo {
        width: 145px !important;
        height: 32px !important;
        align-self: flex-start !important;
    }
    
    .shop-footer-logo img {
        width: 145px !important;
        height: 32px !important;
    }
    
    /* Footer Links Container - width: 111, height: 77, gap: 16 (stacked) */
    .shop-footer-links {
        width: 111px !important;
        height: 77px !important;
        gap: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        align-self: flex-start !important;
    }
    
    /* Footer Link - width: 89, height: 15 */
    .shop-footer-link {
        width: auto !important;
        height: 15px !important;
        padding-left: 0 !important;
        font-family: Inter, sans-serif !important;
        font-weight: 700 !important;
        font-size: 10px !important;
        line-height: 15px !important;
        letter-spacing: 2px !important;
        text-transform: uppercase !important;
        color: #FFFFFF !important;
    }
}