/* Comprehensive Product Layout with Two-Column Design */

/* Main product layout */
.node--type-producto .content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    grid-template-areas:
        "image image"
        "overview pricing"
        "details relations"
        "technical safety"
        "usage usage"
        "specs specs"
        "files files";
}

/* Product image spans full width */
.node--type-producto .content > .field--name-field-imagen {
    grid-area: image;
    margin-bottom: 30px;
}

/* Two-column areas */
.node--type-producto .product-field-group-overview {
    grid-area: overview;
}

.node--type-producto .product-field-group-pricing {
    grid-area: pricing;
}

.node--type-producto .product-field-group-details {
    grid-area: details;
}

.node--type-producto .product-field-group-relations {
    grid-area: relations;
}

.node--type-producto .product-field-group-technical {
    grid-area: technical;
}

.node--type-producto .product-field-group-safety {
    grid-area: safety;
}

.node--type-producto .product-field-group-usage {
    grid-area: usage;
}

.node--type-producto .product-field-group-specs-basic {
    grid-area: specs;
}

.node--type-producto .product-field-group-files {
    grid-area: files;
}

/* Field Groups - Clean Design */
.product-field-group-overview,
.product-field-group-pricing,
.product-field-group-specs-basic,
.product-field-group-details,
.product-field-group-technical,
.product-field-group-usage,
.product-field-group-safety,
.product-field-group-relations,
.product-field-group-files {
    margin: 0 0 20px 0;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Details elements without titles - cleaner look */
.product-field-group-overview > details,
.product-field-group-pricing > details,
.product-field-group-specs-basic > details,
.product-field-group-details > details,
.product-field-group-technical > details,
.product-field-group-usage > details,
.product-field-group-safety > details,
.product-field-group-relations > details,
.product-field-group-files > details {
    border: none;
    padding: 0;
    background: transparent;
}

/* Clean summary without title text */
.product-field-group-overview > details > summary,
.product-field-group-pricing > details > summary,
.product-field-group-specs-basic > details > summary,
.product-field-group-details > details > summary,
.product-field-group-technical > details > summary,
.product-field-group-usage > details > summary,
.product-field-group-safety > details > summary,
.product-field-group-relations > details > summary,
.product-field-group-files > details > summary {
    padding: 15px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #e9ecef;
    cursor: pointer;
    font-weight: 600;
    color: #2c3e50;
    font-size: 16px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    border-radius: 0;
    position: relative;
}

.product-field-group-overview > details > summary:hover,
.product-field-group-pricing > details > summary:hover,
.product-field-group-specs-basic > details > summary:hover,
.product-field-group-details > details > summary:hover,
.product-field-group-technical > details > summary:hover,
.product-field-group-usage > details > summary:hover,
.product-field-group-safety > details > summary:hover,
.product-field-group-relations > details > summary:hover,
.product-field-group-files > details > summary:hover {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
}

/* Remove default markers */
.product-field-group-overview > details > summary::-webkit-details-marker,
.product-field-group-pricing > details > summary::-webkit-details-marker,
.product-field-group-specs-basic > details > summary::-webkit-details-marker,
.product-field-group-details > details > summary::-webkit-details-marker,
.product-field-group-technical > details > summary::-webkit-details-marker,
.product-field-group-usage > details > summary::-webkit-details-marker,
.product-field-group-safety > details > summary::-webkit-details-marker,
.product-field-group-relations > details > summary::-webkit-details-marker,
.product-field-group-files > details > summary::-webkit-details-marker {
    display: none;
}

/* Custom arrow indicators */
.product-field-group-overview > details > summary::before,
.product-field-group-pricing > details > summary::before,
.product-field-group-specs-basic > details > summary::before,
.product-field-group-details > details > summary::before,
.product-field-group-technical > details > summary::before,
.product-field-group-usage > details > summary::before,
.product-field-group-safety > details > summary::before,
.product-field-group-relations > details > summary::before,
.product-field-group-files > details > summary::before {
    content: "▶";
    margin-right: 12px;
    font-size: 14px;
    color: #6c757d;
    transition: transform 0.3s ease;
    display: inline-block;
    width: 16px;
    text-align: center;
}

.product-field-group-overview > details[open] > summary::before,
.product-field-group-pricing > details[open] > summary::before,
.product-field-group-specs-basic > details[open] > summary::before,
.product-field-group-details > details[open] > summary::before,
.product-field-group-technical > details[open] > summary::before,
.product-field-group-usage > details[open] > summary::before,
.product-field-group-safety > details[open] > summary::before,
.product-field-group-relations > details[open] > summary::before,
.product-field-group-files > details[open] > summary::before {
    transform: rotate(90deg);
}

/* Content wrapper */
.product-field-group-overview > details > .details-wrapper,
.product-field-group-pricing > details > .details-wrapper,
.product-field-group-specs-basic > details > .details-wrapper,
.product-field-group-details > details > .details-wrapper,
.product-field-group-technical > details > .details-wrapper,
.product-field-group-usage > details > .details-wrapper,
.product-field-group-safety > details > .details-wrapper,
.product-field-group-relations > details > .details-wrapper,
.product-field-group-files > details > .details-wrapper {
    padding: 20px;
    background: #fff;
    border-top: 1px solid #f1f3f4;
}

/* Force collapsed state */
.product-field-group-specs-basic > details > .details-wrapper,
.product-field-group-details > details > .details-wrapper,
.product-field-group-technical > details > .details-wrapper,
.product-field-group-usage > details > .details-wrapper,
.product-field-group-safety > details > .details-wrapper,
.product-field-group-relations > details > .details-wrapper,
.product-field-group-files > details > .details-wrapper {
    display: none;
}

.product-field-group-specs-basic > details[open] > .details-wrapper,
.product-field-group-details > details[open] > .details-wrapper,
.product-field-group-technical > details[open] > .details-wrapper,
.product-field-group-usage > details[open] > .details-wrapper,
.product-field-group-safety > details[open] > .details-wrapper,
.product-field-group-relations > details[open] > .details-wrapper,
.product-field-group-files > details[open] > .details-wrapper {
    display: block;
}

/* Field styling within groups */
.product-field-group-overview .field,
.product-field-group-pricing .field,
.product-field-group-specs-basic .field,
.product-field-group-details .field,
.product-field-group-technical .field,
.product-field-group-usage .field,
.product-field-group-safety .field,
.product-field-group-relations .field,
.product-field-group-files .field {
    margin-bottom: 20px;
    padding: 0;
}

.product-field-group-overview .field:last-child,
.product-field-group-pricing .field:last-child,
.product-field-group-specs-basic .field:last-child,
.product-field-group-details .field:last-child,
.product-field-group-technical .field:last-child,
.product-field-group-usage .field:last-child,
.product-field-group-safety .field:last-child,
.product-field-group-relations .field:last-child,
.product-field-group-files .field:last-child {
    margin-bottom: 0;
}

.product-field-group-overview .field__label,
.product-field-group-pricing .field__label,
.product-field-group-specs-basic .field__label,
.product-field-group-details .field__label,
.product-field-group-technical .field__label,
.product-field-group-usage .field__label,
.product-field-group-safety .field__label,
.product-field-group-relations .field__label,
.product-field-group-files .field__label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
    font-size: 14px;
    display: block;
}

.product-field-group-overview .field__item,
.product-field-group-pricing .field__item,
.product-field-group-specs-basic .field__item,
.product-field-group-details .field__item,
.product-field-group-technical .field__item,
.product-field-group-usage .field__item,
.product-field-group-safety .field__item,
.product-field-group-relations .field__item,
.product-field-group-files .field__item {
    color: #212529;
    line-height: 1.6;
}

/* Special styling for overview and pricing (always expanded) */
.product-field-group-overview > details[open] > summary,
.product-field-group-pricing > details[open] > summary {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.product-field-group-overview > details[open] > summary::before,
.product-field-group-pricing > details[open] > summary::before {
    color: white;
}

/* Mobile responsive design */
@media (max-width: 768px) {
    .node--type-producto .content {
        grid-template-columns: 1fr;
        gap: 20px;
        grid-template-areas:
            "image"
            "overview"
            "pricing"
            "details"
            "technical"
            "usage"
            "safety"
            "specs"
            "relations"
            "files";
    }

    .product-field-group-overview > details > summary,
    .product-field-group-pricing > details > summary,
    .product-field-group-specs-basic > details > summary,
    .product-field-group-details > details > summary,
    .product-field-group-technical > details > summary,
    .product-field-group-usage > details > summary,
    .product-field-group-safety > details > summary,
    .product-field-group-relations > details > summary,
    .product-field-group-files > details > summary {
        padding: 12px 15px;
        font-size: 16px;
    }

    .product-field-group-overview > details > .details-wrapper,
    .product-field-group-pricing > details > .details-wrapper,
    .product-field-group-specs-basic > details > .details-wrapper,
    .product-field-group-details > details > .details-wrapper,
    .product-field-group-technical > details > .details-wrapper,
    .product-field-group-usage > details > .details-wrapper,
    .product-field-group-safety > details > .details-wrapper,
    .product-field-group-relations > details > .details-wrapper,
    .product-field-group-files > details > .details-wrapper {
        padding: 15px;
    }

    .product-field-group-overview .field__label,
    .product-field-group-pricing .field__label,
    .product-field-group-specs-basic .field__label,
    .product-field-group-details .field__label,
    .product-field-group-technical .field__label,
    .product-field-group-usage .field__label,
    .product-field-group-safety .field__label,
    .product-field-group-relations .field__label,
    .product-field-group-files .field__label {
        font-size: 15px;
    }
}

/* Print styles */
@media print {
    .product-field-group-overview > details,
    .product-field-group-pricing > details,
    .product-field-group-specs-basic > details,
    .product-field-group-details > details,
    .product-field-group-technical > details,
    .product-field-group-usage > details,
    .product-field-group-safety > details,
    .product-field-group-relations > details,
    .product-field-group-files > details {
        display: block !important;
    }

    .product-field-group-overview > details > summary::before,
    .product-field-group-pricing > details > summary::before,
    .product-field-group-specs-basic > details > summary::before,
    .product-field-group-details > details > summary::before,
    .product-field-group-technical > details > summary::before,
    .product-field-group-usage > details > summary::before,
    .product-field-group-safety > details > summary::before,
    .product-field-group-relations > details > summary::before,
    .product-field-group-files > details > summary::before {
        display: none;
    }

    .product-field-group-overview > details > summary,
    .product-field-group-pricing > details > summary,
    .product-field-group-specs-basic > details > summary,
    .product-field-group-details > details > summary,
    .product-field-group-technical > details > summary,
    .product-field-group-usage > details > summary,
    .product-field-group-safety > details > summary,
    .product-field-group-relations > details > summary,
    .product-field-group-files > details > summary {
        background: transparent;
        border-bottom: 1px solid #ddd;
        cursor: default;
    }
}