/* Body Padding for Fixed Header */
body.single-product {
    padding-top: var(--vane-header-total-height);
    background-color: var(--vane-white);
    /* Fix grey space */
}

/* ==========================================================================
   Single Product Page
   ========================================================================== */

.vane-single-product-grid {
    display: grid;
    grid-template-columns: 50% 50%;
    /* Adjusted split as requested */
    gap: 60px;
    padding: 20px var(--vane-container-padding);
    /* Reverted top padding */
    max-width: 1400px;
    margin: 0 auto;
}

/* Override default WooCommerce summary styles */
.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary {
    float: none !important;
    width: 60% !important;
    clear: none !important;
}

/* Left Column: Vertical Gallery */
.vane-single-gallery {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.vane-gallery-item img {
    width: 50%;
    max-width: 50%;
    height: auto;
    display: block;
    object-fit: cover;
}

.vane-gallery-item {
    display: flex;
    justify-content: center;
}

/* Right Column: Product Details */
.vane-single-details {
    position: sticky;
    top: calc(var(--vane-header-total-height) + 40px);
    height: fit-content;
}

/* Breadcrumbs */
.vane-single-breadcrumbs {
    font-family: var(--vane-font-primary);
    font-size: 20px;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.vane-single-breadcrumbs a {
    color: var(--vane-black);
    text-decoration: none;
    font-weight: 600;
}

.vane-single-breadcrumbs span:not(.vane-breadcrumbs-separator) {
    font-weight: 500;
    color: #666;
}

.vane-breadcrumbs-separator {
    color: var(--vane-black);
    font-weight: 600;
}

/* Title */
.vane-single-title {
    font-family: var(--vane-font-primary);
    font-size: 32px;
    font-weight: 600;
    margin: 0 0 18px;
    text-transform: uppercase;
}

/* Price */
.vane-single-price {
    font-family: var(--vane-font-primary);
    font-size: 24px;
    font-weight: 500;
    margin: 6px 0;
}

.vane-single-price .woocommerce-Price-amount {
    font-weight: 500;
}

/* Price Info */
.vane-price-info {
    margin-bottom: 30px;
}

.vane-transfer-price--primary {
    font-family: var(--vane-font-primary);
    font-size: 18px;
    font-weight: 700;
    color: var(--vane-black);
    margin: 0 0 2px;
}

.vane-volume-price,
.vane-transfer-price,
.vane-installments {
    font-family: var(--vane-font-primary);
    font-size: 16px;
    color: #333;
    margin: 0;
}

.vane-single-description {
    margin: 18px 0 24px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--vane-gray-dark);
}

.vane-single-description p {
    margin: 0;
}

.vane-single-description p + p {
    margin-top: 10px;
}

/* Attributes (Color, Size) */
.vane-single-details form.cart .variations {
    width: 100%;
    margin-bottom: 30px;
    border-collapse: collapse;
    /* Ensure no spacing */
}

.vane-single-details form.cart .variations tr {
    display: block;
    margin-bottom: 20px;
}

.vane-single-details form.cart .variations td,
.vane-single-details form.cart .variations th {
    display: block;
    font-size: 20px !important;
    font-weight: 300 !important;
    padding: 0 !important;
    margin: 0;
    text-align: left;
    border: none;
    background: none;
}

.vane-single-details form.cart .variations th {
    margin: 10px 0 !important;
    /* Explicit spacing on the container */
}

.vane-single-details form.cart .label {
    display: block;
    font-family: var(--vane-font-primary);
    font-size: 16px;
    font-weight: 500;
    /* Changed to 500 as requested */
    letter-spacing: 1.5px;
    /* Match filters */
    text-transform: uppercase;
    margin-bottom: 0;
    text-align: left;
    padding: 0 !important;
    color: var(--vane-black);
}

.vane-selected-value {
    font-weight: 400;
    text-transform: uppercase;
}

.vane-selected-value:not(:empty)::before {
    content: '/ ';
}

/* Hide "Clear" link */
.reset_variations {
    display: none !important;
}

/* Swatches Container */
.vane-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vane-swatch-btn {
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    /* Reset margin */
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Color Swatches - Matching filters.css */
.vane-swatch-color {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: none !important;
    border: none;
    cursor: pointer;
    width: 44px;
}

.vane-swatch-color:hover,
.vane-swatch-color:focus,
.vane-swatch-color:active {
    background: none !important;
    background-color: transparent !important;
}

.vane-swatch-color__swatch {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--color-bg);
    border: 1.5px solid var(--vane-black);
    transition: all 0.2s ease;
    display: block;
}

.vane-swatch-color:hover .vane-swatch-color__swatch {
    transform: scale(1.1);
}

/* Selected state - thick border + check */
.vane-swatch-color.active .vane-swatch-color__swatch {
    border: 3px solid var(--vane-black);
}

.vane-swatch-color.active .vane-swatch-color__swatch::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translate(-50%, -60%) rotate(-45deg);
}

/* For light colors, use dark check */
.vane-swatch-color--light.active .vane-swatch-color__swatch::after {
    border-color: var(--vane-black);
}

/* Text Swatches (Colors/Generic) */
.vane-swatch-text {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 20px;
    font-family: var(--vane-font-primary);
    font-size: 16px;
    font-weight: 500;
    color: var(--vane-black);
    background-color: transparent;
    border: 1.5px solid var(--vane-black);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
}

.vane-swatch-text:hover {
    background-color: rgba(0, 0, 0, 0.08) !important;
    color: var(--vane-black) !important;
}

.vane-swatch-text:focus,
.vane-swatch-text:active {
    background-color: transparent !important;
    color: var(--vane-black) !important;
}

/* Selected state */
.vane-swatch-text.active,
.vane-swatch-text.active:hover,
.vane-swatch-text.active:focus,
.vane-swatch-text.active:active {
    background-color: var(--vane-black) !important;
    color: var(--vane-white) !important;
}

/* Disabled state */
.vane-swatch-text.disabled {
    opacity: 0.5;
    pointer-events: none;
    text-decoration: line-through;
}

/* Size Swatches - Matching filters.css */
.vane-swatch-size {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0;
    /* Remove padding to ensure centering */
    font-family: var(--vane-font-primary);
    font-size: 16px;
    font-weight: 500;
    color: var(--vane-black);
    background-color: transparent;
    border: 1.5px solid var(--vane-black);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    line-height: 1;
}

.vane-swatch-size--wide {
    min-width: 78px;
    padding: 0 18px;
}

.vane-swatch-size:hover {
    background-color: rgba(0, 0, 0, 0.08) !important;
    color: var(--vane-black) !important;
}

.vane-swatch-size:focus,
.vane-swatch-size:active {
    background-color: transparent !important;
    color: var(--vane-black) !important;
}

/* Selected state - inverted */
.vane-swatch-size.active,
.vane-swatch-size.active:hover,
.vane-swatch-size.active:focus,
.vane-swatch-size.active:active {
    background-color: var(--vane-black) !important;
    color: var(--vane-white) !important;
}

/* Disabled state */
.vane-swatch-btn.disabled {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
}

/* Optional: Cross out disabled sizes */
.vane-swatch-size.disabled::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 1px;
    background-color: var(--vane-black);
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Hide default select */
.vane-hidden-select select {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* Cart Form */
.vane-single-details form.cart {
    text-align: left;
}


/* Quantity Container */
.vane-single-details .quantity {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: fit-content;
    gap: 5px;
    border: 1px solid var(--vane-black);
    border-radius: 100px;
    /* margin-top: 10px !important; */
    margin-bottom: 0 !important;
    padding: 0 10px !important;
}

/* Quantity Input - TEMP STYLES */
/* Chrome, Safari, Edge, Opera */
.vane-qty-input::-webkit-inner-spin-button,
.vane-qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.vane-qty-input {
    -moz-appearance: textfield;
}

.vane-qty-input {
    width: 40px !important;
    height: 40px !important;
    text-align: center !important;
    line-height: 1;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: var(--vane-black) !important;
    border: 0 !important;
    background: none !important;
    padding: 0 !important;
}

.vane-qty-plus,
.vane-qty-minus {
    width: 30px !important;
    height: 30px !important;
    text-align: center !important;
    line-height: 1;
    font-size: 22px !important;
    font-weight: 300 !important;
    color: var(--vane-black) !important;
    border: 0 !important;
    background: none !important;
    padding: 0 !important;
}

/* Add to Cart Button */
.single_add_to_cart_button {
    width: 100%;
    background-color: var(--vane-black) !important;
    color: var(--vane-white) !important;
    padding: 15px !important;
    font-family: var(--vane-font-primary) !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: none !important;
    border-radius: 30px !important;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 20px;
}

.single_add_to_cart_button:hover {
    background-color: #333 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .vane-single-product-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 20px 0 30px;
    }

    .woocommerce #content div.product div.summary,
    .woocommerce div.product div.summary,
    .woocommerce-page div.product div.summary {
        width: 100% !important;
    }

    .vane-single-gallery {
        flex-direction: row;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 10px;
        -webkit-overflow-scrolling: touch;
        padding: 0 10px 8px;
        scrollbar-width: none;
    }

    .vane-single-gallery::-webkit-scrollbar {
        display: none;
    }

    .vane-gallery-item {
        flex: 0 0 calc(100vw - 20px);
        display: flex;
        justify-content: center;
        align-items: center;
        scroll-snap-align: center;
    }

    .vane-gallery-item img {
        width: auto;
        max-width: 100%;
        max-height: 50vh;
        height: auto;
        display: block;
        margin: 0 auto;
        object-fit: contain;
    }

    .vane-single-details {
        position: static;
        width: 100%;
        padding: 0 20px;
    }
}