/* Product Details Page Styles */

/* Product Image Gallery */
.product-image-gallery {
    margin-bottom: 2rem;
}

.single-product-image img {
    width: 100%;
    max-height: 500px;
    object-fit: contain;
    border-radius: 0; /* Flat design: sharp edges */
    border: 2px solid var(--border-color);
}

.product-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.carousel-main-image {
    flex: 1;
    overflow: hidden;
    border-radius: 0; /* Flat design: sharp edges */
    background-color: var(--border-color);
    border: 2px solid var(--border-color);
}

.carousel-main-image img {
    width: 100%;
    max-height: 500px;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

.carousel-btn {
    background-color: var(--primary-color);
    color: var(--light-color);
    border: none;
    border-radius: 0; /* Flat design: sharp edges */
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.5rem;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.carousel-btn:hover:not(.hidden) {
    background-color: var(--secondary-color);
}

.carousel-btn:disabled,
.carousel-btn.hidden {
    visibility: hidden;
    opacity: 0.5;
    cursor: not-allowed;
}

.carousel-thumbnails {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.thumbnail-item {
    width: 80px;
    height: 80px;
    border: 3px solid transparent;
    border-radius: 0; /* Flat design: sharp edges */
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumbnail-item:hover {
    border-color: var(--secondary-color);
}

.thumbnail-item.active {
    border-color: var(--primary-color);
}

.product-detail-container {
    display: grid;
    grid-template-columns: 60% 40%;
    /* Grid areas removed for desktop - relying on wrapper structure */
    column-gap: 2rem;
    row-gap: 1.5rem;
    align-items: start;
}

.product-main-info-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.product-sidebar-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Grid area assignments - primarily for Mobile now where display:contents is used */
.grid-area-name {
    grid-area: name;
}

.grid-area-type {
    grid-area: type;
}

.grid-area-description {
    grid-area: description;
}

.grid-area-sizes {
    grid-area: sizes;
}

.grid-area-actions {
    grid-area: actions;
}

.grid-area-attributes {
    grid-area: attributes;
    min-width: 0; /* Fix for horizontal scroll inside grid */
}

.product-title {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.product-description {
    line-height: 1.6;
    max-width: 800px;
    color: var(--text-color);
}

.product-sizes {
    border-radius: 0; /* Flat design: sharp edges */
    width: fit-content;
}

.product-sizes h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.size-item {
    margin-top: 1rem;
}
.size-item .column {
    gap: 0.25rem;
}

.size-label {
    font-weight: bold;
    margin-right: 0.5rem;
    margin-bottom: .25rem;
}

.product-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

.finishes-grid,
.colors-grid,
.options-grid,
.product-type-badge-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
}

.horizontal-scroll-wrapper {
    position: relative;
    width: 100%;
}

/* Remove the previous always-on gradient */
.horizontal-scroll-wrapper::after {
    display: none;
}

/* New hints using JS toggled classes */
.horizontal-scroll-wrapper .scroll-hint-right,
.horizontal-scroll-wrapper .scroll-hint-left {
    position: absolute;
    top: 0;
    bottom: 20px; /* Clear scrollbar */
    width: 40px;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.horizontal-scroll-wrapper .scroll-hint-right {
    right: 0;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.15));
}

.horizontal-scroll-wrapper .scroll-hint-left {
    left: 0;
    background: linear-gradient(to left, transparent, rgba(0,0,0,0.15));
}

.horizontal-scroll-wrapper.can-scroll-right .scroll-hint-right {
    opacity: 1;
}

.horizontal-scroll-wrapper.can-scroll-left .scroll-hint-left {
    opacity: 1;
}

/* DESKTOP: Grid Layout (Default) */
.horizontal-scroll-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    width: 100%;
}

/* Hide scroll hints on desktop */
.horizontal-scroll-wrapper .scroll-hint-right,
.horizontal-scroll-wrapper .scroll-hint-left {
    display: none;
}

/* MOBILE: Horizontal Scroll Layout */
@media (max-width: 1200px) {
    /* Unwrap the structure for mobile grid */
    .product-main-info-wrapper,
    .product-sidebar-wrapper {
        display: contents;
    }

    .horizontal-scroll-container {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: scroll;
        padding-bottom: 0.5rem;
        
        /* Scrollbar styling for mobile */
        scrollbar-width: thin; 
        scrollbar-color: var(--primary-color) var(--border-color);
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
    }

    .horizontal-scroll-container::-webkit-scrollbar {
        -webkit-appearance: none;
        height: 12px;
    }

    .horizontal-scroll-container::-webkit-scrollbar-thumb {
        background-color: var(--primary-color);
        border-radius: 0;
    }

    .horizontal-scroll-container::-webkit-scrollbar-track {
        background: var(--border-color);
    }

    .horizontal-scroll-container > * {
        flex: 0 0 auto;
    }
    
    /* Enable hints on mobile */
    .horizontal-scroll-wrapper .scroll-hint-right,
    .horizontal-scroll-wrapper .scroll-hint-left {
        display: block;
    }
}

.finish-item,
.product-type-container,
.color-item,
.option-item
{
    text-align: center;
    padding: 0.5rem;
    transition: border-color 0.2s ease;
}

.finish-name,
.color-name,
.option-name,
.product-type-name {
    font-size: 0.9rem;
    font-weight: 500;
}

/* Responsive behavior */
/* Breadcrumb styling */
.breadcrumb {
    padding: 0.5rem 0;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.breadcrumb a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb span {
    color: var(--text-color);
}

/* Product Type Badge */
.product-type-badge {
    cursor: help;
    transition: all 0.2s ease;
}

.product-type-badge:hover {
    transform: translateY(-2px);
}

.finish-item img,
.product-type-container img,
.color-item img,
.option-item img,
.product-type-badge img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 0; /* Flat design: sharp edges */
}

@media (max-width: 600px) {
    .finish-item img,
    .product-type-container img,
    .color-item img,
    .option-item img,
    .product-type-badge img {
        width: min(40vw, 40vh);
        height: min(40vw, 40vh);
    }
}

.product-name {
    margin:0;
}

@media (max-width: 1200px) {
    .product-detail-container {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name type"
            "description description"
            "attributes attributes"
            "sizes sizes"
            "actions actions"
            ;
        row-gap: 0.5rem;
        column-gap: 1rem;
        align-items: center;
    }

    .grid-area-type {
        justify-self: end;
    }
    
    .product-type-badge-section h3 {
        display: none;
    }

    .product-type-name {
        display: none;
    }

    .product-type-badge-grid {
        display: block;
        grid-template-columns: unset;
    }
    
    .product-type-container {
        padding: 0;
    }

    .product-type-container img,
    .product-type-badge img {
        width: 60px;
        height: 60px;
    }

    br {
        display:none;
    }
}

@media (max-width: 600px) {
    .finishes-grid,
    .colors-grid,
    .options-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .breadcrumb {
        font-size: 0.8rem;
    }
}