.hidden {
    /*display: none;*/
    /*transform: translateY(0%);*/
}



.product-detail-panel {
    padding: 32px;
 /*   background-color: #f0f0f0;*/
    font-family: Montserrat, -apple-system, Roboto, Helvetica, sans-serif;
}


/* Main container */
.product-configurator {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 20px;
}

@media (max-width: 991px) {
    .product-configurator {
        padding: 24px 16px;
    }
}

.configurator-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

@media (max-width: 991px) {
    .configurator-container {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* Product gallery section */
.product-gallery {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.main-image-wrapper {
    width: 100%;
    aspect-ratio: 533/421;
    overflow: hidden;
}

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

.visualization-label {
    color: #585858;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
}

.visualization-image {
    width: 100%;
    max-width: 693px;
    height: auto;
}

/* Product details section */
.product-details {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Product header */
.product-breadcrumb {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.breadcrumb-item {
    color: #060606;
    font-size: 16px;
    font-weight: 600;
}

.breadcrumb-separator {
    width: 20px;
    height: 2px;
    background-color: #000;
}

.product-title {
 /*   color: #060606;*/
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 8px 0;
}

@media (max-width: 640px) {
    .product-title {
        font-size: 32px;
    }
}

.product-subtitle {
 /*   color: #060606;*/
    font-size: 40px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
}

@media (max-width: 640px) {
    .product-subtitle {
        font-size: 32px;
    }
}

/* Configuration sections */
.color-configuration,
.lighting-configuration {
    padding-bottom: 24px;
    border-bottom: 1px solid #d6d6d6;
}

.dimensions-section {
    padding-bottom: 24px;
    border-bottom: 1px solid #d6d6d6;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*margin-bottom: 16px;*/
    
}

.section-title {
 /*   color: #060606;*/
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

/* Toggle switches */

/*
.color-toggle,
.lighting-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toggle-label-left,
.toggle-label-right {
    font-size: 16px;
}

.toggle-switch {
    display: flex;
    width: 48px;
    height: 28px;
    padding: 4px;
    align-items: center;
    border-radius: 27px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #d9d9d9;
}

.toggle-handle {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    border: 1px solid #fff;
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

*/

/* Color and lighting options */
.color-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

@media (max-width: 640px) {
    .color-options {
        grid-template-columns: 1fr;
    }
}

.lighting-options {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 13px;
}

@media (max-width: 991px) {
    .lighting-options {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .lighting-options {
        grid-template-columns: 1fr;
    }
}

.option-label {
    display: block;
  /*  color: #060606;*/
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
}

/* Dropdown fields */
.dropdown-field {
    display: flex;
    padding: 8px;
    align-items: center;
    gap: 10px;
    border: 1px solid #d9d9d9;
    cursor: pointer;
    background-color: #fff;
}

.dropdown-field-simple {
    padding: 8px 8px 8px 16px;
}

.color-preview {
    width: 18px;
    height: 18px;
    border-radius: 2px;
    flex-shrink: 0;
}

.color-preview-white {
    border: 1px solid #8f8f8f;
    background-color: #fff;
}

.color-preview-black {
    border: 1px solid #1e1e1e;
    background-color: #1e1e1e;
}

.color-preview-warm {
    background-color: #ffecc8;
}

.dropdown-text {
    flex: 1;
    color: #1e1e1e;
    font-size: 14px;
    font-weight: 500;
}

.dropdown-icon {
    flex-shrink: 0;
}

/* Dimensions section */
.dimensions-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

@media (max-width: 640px) {
    .dimensions-grid {
        flex-direction: column;
        align-items: stretch;
    }
}

.dimension-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dimension-label {
    color: #060606; 
    font-size: 14px;
    font-weight: 500;
}

.dimension-value {
    padding: 8px 16px;
    border: 1px solid #d9d9d9;
    color: #585858;
    font-size: 16px;
    font-weight: 500;
    background-color: #fff;
}

/* Purchase section */
.purchase-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

@media (max-width: 640px) {
    .purchase-section {
        flex-direction: column;
        align-items: stretch;
    }
}

.price-display {
 /*   color: #060606; */
    font-size: 32px;
    font-weight: 600;
    line-height: 1.4;
}

@media (max-width: 640px) {
    .price-display {
        font-size: 28px;
    }
}

.add-to-cart-button {
/*    display: flex;
    padding: 16px 32px;
    justify-content: center;
    align-items: center;
    border: none;
    color: #f0f0f0;
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #060606;*/
}

.add-to-cart-button:hover {
 /*   background: #1a1a1a;*/
}

@media (max-width: 640px) {
    .add-to-cart-button {
        width: 100%;
    }
}

/* Product tabs */
.product-tabs {
    margin-top: 32px;
}

.tab-navigation {
    display: flex;
    align-items: center;
    gap: 32px;
    border-bottom: 2px solid transparent;
}

@media (max-width: 640px) {
    .tab-navigation {
        gap: 16px;
        overflow-x: auto;
    }
}

.tab-button {
    background: none;
    border: none;
    padding: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.tab-content {
    margin-top: 32px;
}

.tab-panel {
    margin: 0;
}

.content-title {
/*    color: #060606;*/
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
}

.content-description {
    color: #060606;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    margin: 0;
}

.tab-panel-placeholder {
    color: #060606;
    font-size: 14px;
}




.dimension-container {
    display: flex;
    gap: 20px;
    padding: 20px;
  /*  max-width: 1200px;/
    margin: 0 auto;
}

@media (max-width: 640px) {
    .dimension-container {
        flex-direction: column;
    }
}

.dimension-input-group {
    flex: 1;
   /* display: flex;*/
    /*flex-direction: column;*/
    gap: 8px;
    /*white-space: nowrap;*/
}

.dimension-form-label {
    font-size: 14px;
    font-weight: 500;
    /*color: #333; */
}

.dimension-form-input {
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}


.pergoline-button.button-dimension-cancel {
    background-color: #f0f0f0;
    color: black;
    border: 1px solid black;
}