/**
 * Products Grid Styles
 */

/* Container */
.products-grid-container {
    margin: 2rem auto;
    max-width: 1280px;
    width: 88%;
}

/* Filters */
.products-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background: #f5f5f5;
    border-radius: 4px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    min-width: 150px;
}

.filter-group label {
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.tax-filter {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.filter-controls {
    display: flex;
    align-items: flex-end;
}

.reset-filters {
    padding: 0.5rem 1rem;
    background: #e0e0e0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.reset-filters:hover {
    background: #d0d0d0;
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 797px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .products-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* Product Card */
.product-card {
    border-radius: .5em;
    transition: transform 0.2s, box-shadow 0.2s;
    background: #f1f3f6;
    border: 2px solid #f1f3f6;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.product-card__image {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: .5em .5em 0 0;
    background: white;
}

.product-card__title {
    padding: 1rem !important;
    border-bottom: 2px solid white !important;
    font-size: 1em !important;
}

.product-card__link {
    font-size: 1.2rem !important;
    line-height: 1.1rem !important;
    font-weight: 600 !important;
}

.product-card__taxonomies {
    padding: 1em;
}

.product-card__image picture {
    max-height: 16.5em;
}

.product-image {
    text-align: center;
    margin-bottom: 1rem;
}

.product-image img {
    max-width: 100%;
    height: auto;
}

.product-title {
    font-size: 1.25rem;
    margin: 0 0 1rem;
}

.product-title a {
    color: #333;
    text-decoration: none;
}

.product-title a:hover {
    color: #0073aa;
}

/* Taxonomies */
.product-taxonomies {
    margin-bottom: 1rem;
}

.product-taxonomy {
    margin-bottom: 0.5rem;
}

.taxonomy-label,
.product-card__taxonomy-label {
    font-weight: bold;
}

/* Resources */
.product-resources h4 {
    margin: 1rem 0 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}

.resource-group h5 {
    margin: 0.75rem 0 0.5rem;
    font-size: 1rem;
}

.product-resource {
    margin-bottom: 0.5rem;
}

.product-resource a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #0073aa;
}

.product-resource a:hover {
    text-decoration: underline;
}

.resource-icon {
    width: 16px;
    height: 16px;
    margin-right: 0.5rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.resource-card {
    background-color: #f1f3f6;
}

.resource-card.resource-card--cad .resource-cad-item {
    text-align: left;
    margin: .5em 0;
    font-weight: 700;
    font-size: 1.1em;
    color: #054689;
    cursor: pointer;
}
.resource-card.resource-card--cad .resource-cad-item:hover {
    text-decoration: underline;
    color: #333;
}

/* Icon placeholders - replace with actual icons */
.datasheet-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z" fill="%230073aa"/></svg>');
}

.cad-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 16.5c0 .38-.21.71-.53.88l-7.9 4.44c-.16.12-.36.18-.57.18-.21 0-.41-.06-.57-.18l-7.9-4.44A.991.991 0 0 1 3 16.5v-9c0-.38.21-.71.53-.88l7.9-4.44c.16-.12.36-.18.57-.18.21 0 .41.06.57.18l7.9 4.44c.32.17.53.5.53.88v9z" fill="%230073aa"/></svg>');
}

.assembly-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.4 7.34L16.66 4.6A2 2 0 0 0 14 4.53l-9 9a2 2 0 0 0-.57 1.21L4 18.91a1 1 0 0 0 .29.8A1 1 0 0 0 5 20h.09l4.17-.38a2 2 0 0 0 1.21-.57l9-9a1.92 1.92 0 0 0-.07-2.71z" fill="%230073aa"/></svg>');
}

.video-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" fill="%230073aa"/></svg>');
}

/* No matches message */
.no-products-match {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem;
    background: #f5f5f5;
    border-radius: 4px;
}

.item-banner__container, .item-overview__container {
    margin: 1em auto;
    width: 88%;
    max-width: 1280px;
}

.item-banner__title {
    color: #054689;
    padding: 1rem 0;
}

.item-overview {
    background: #f1f3f6;
    padding: 3em 0;
}

.item-overview__container {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 2em;
}

@media (max-width: 797px) {
    .item-overview__container {
        grid-template-columns: repeat(1, 1fr);
    }
}

.item-overview__image {
    background: white;
    border-radius: .5em;
}

.item-overview__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.item-overview__content h2 {
    margin-bottom: 1rem;
    font-size: 2.5rem !important;
}

.item-overview__text ul {
    list-style: disc !important;
    margin-top: 1.5em !important;
    padding-left: 2em !important;
}

.item-resources {
    margin: 3em auto;
    width: 88%;
    max-width: 1280px;
}

.item-resources h2 {
    margin-bottom: 1.5rem;
}

.item-resources-grid .resources-title {
    display: none !important;
}

.single .resources-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 1200px) {
    .single .resources-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 797px) {
    .single .resources-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .single .resources-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

.resource-card {
    border-radius: .5em;
    transition: transform 0.2s, box-shadow 0.2s;
}

.resource-card a {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

.resource-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.resource-type {
    text-align: center;
    padding: .5em 1em;
    color: #054689;
    font-size: 1.2em;
    background: white;
}

.resource-image {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: .5em .5em 0 0;
    background: #f1f3f6;
    width: 100%;
    overflow: hidden;
    border: 2px solid #f1f3f6;
    border-bottom-color: white;
}

.resource-image picture, .resource-image picture img {
    width: 100%;
}

.resource-title {
    padding: 1em;
    font-weight: 600;
    text-align: center;
    font-size: 1.1rem !important;
    line-height: 1.1em !important;
    font-size: 1.1em !important;
    background: #f1f3f6;
    border-radius: 0 0 .5em .5em;
    color: #054689 !important;
}

.resource-cad-list {
    background: #f1f3f6;
    padding: 1em;
    text-align: left;
    border-radius: 0 0 .5em .5em;
}

.resource-cad-list ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    list-style: disc;
    padding-left: 1em;
}

.resource-cad-list ul li {
    margin: 0px !important;
    font-size: 1em !important;
    font-weight: 300 !important;
}

/* CAD Modal */
.cad-modal {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cad-modal__overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.7);
}

.cad-modal__content {
    position: relative;
    background: #fff;
    padding: 2em;
    border-radius: 8px;
    z-index: 2;
    max-width: 54em;
    width: 88%;
    margin: 2em auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: calc(100vh - 4em);           /* Limit height to viewport */
    overflow-y: auto;           /* Enable vertical scrolling if needed */
}

.cad-modal__close {
    position: absolute;
    right: 0.5em;
    top: 0.5em;
    background: none;
    border: none;
    font-size: 2em;
    cursor: pointer;
}

.cad-modal__form {
    padding-top: 1em !important;
}

body.et_divi_theme .gform_wrapper.gravity-theme .gform_fields {
    grid-row-gap: 1em !important;
}

.gform_wrapper.gravity-theme input[type=color], .gform_wrapper.gravity-theme input[type=date], .gform_wrapper.gravity-theme input[type=datetime-local], .gform_wrapper.gravity-theme input[type=datetime], .gform_wrapper.gravity-theme input[type=email], .gform_wrapper.gravity-theme input[type=month], .gform_wrapper.gravity-theme input[type=number], .gform_wrapper.gravity-theme input[type=password], .gform_wrapper.gravity-theme input[type=search], .gform_wrapper.gravity-theme input[type=tel], .gform_wrapper.gravity-theme input[type=text], .gform_wrapper.gravity-theme input[type=time], .gform_wrapper.gravity-theme input[type=url], .gform_wrapper.gravity-theme input[type=week], .gform_wrapper.gravity-theme select, .gform_wrapper.gravity-theme textarea {
    font-size: 1em !important;
    line-height: 1.3em !important;
    padding: .8em !important;
    border: 2px solid #ddd !important;
    border-radius: .3em !important;
    margin: 0px !important;
    color: #333 !important;
    transition: .3s ease-in !important;
}

.gform_wrapper.gravity-theme input[type=color]:hover, .gform_wrapper.gravity-theme input[type=date]:hover, .gform_wrapper.gravity-theme input[type=datetime-local]:hover, .gform_wrapper.gravity-theme input[type=datetime]:hover, .gform_wrapper.gravity-theme input[type=email]:hover, .gform_wrapper.gravity-theme input[type=month]:hover, .gform_wrapper.gravity-theme input[type=number]:hover, .gform_wrapper.gravity-theme input[type=password]:hover, .gform_wrapper.gravity-theme input[type=search]:hover, .gform_wrapper.gravity-theme input[type=tel]:hover, .gform_wrapper.gravity-theme input[type=text]:hover, .gform_wrapper.gravity-theme input[type=time]:hover, .gform_wrapper.gravity-theme input[type=url]:hover, .gform_wrapper.gravity-theme input[type=week]:hover, .gform_wrapper.gravity-theme select:hover, .gform_wrapper.gravity-theme textarea:hover {
    border-color: #054689 !important;
}

.gform_wrapper.gravity-theme input[type=color]:active, .gform_wrapper.gravity-theme input[type=date]:active, .gform_wrapper.gravity-theme input[type=datetime-local]:active, .gform_wrapper.gravity-theme input[type=datetime]:active, .gform_wrapper.gravity-theme input[type=email]:active, .gform_wrapper.gravity-theme input[type=month]:active, .gform_wrapper.gravity-theme input[type=number]:active, .gform_wrapper.gravity-theme input[type=password]:active, .gform_wrapper.gravity-theme input[type=search]:active, .gform_wrapper.gravity-theme input[type=tel]:active, .gform_wrapper.gravity-theme input[type=text]:active, .gform_wrapper.gravity-theme input[type=time]:active, .gform_wrapper.gravity-theme input[type=url]:active, .gform_wrapper.gravity-theme input[type=week]:active, .gform_wrapper.gravity-theme select:active, .gform_wrapper.gravity-theme textarea:active {
    border-color: black !important;
    background-color: #fff !important;
    color: black !important;
}

body.et_divi_theme .gform_wrapper input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]):focus, body.et_divi_theme .gform_wrapper textarea:focus, body.et_divi_theme .gform_wrapper select:focus {
    border-color: black !important;
    background-color: #fff !important;
    color: black !important;
}

.gform_wrapper.gravity-theme .gfield_label {
    font-size: 1.1em !important;
}

.gform_wrapper.gravity-theme .gfield_header_item, .gform_wrapper.gravity-theme .gform_fileupload_rules, .gform_wrapper.gravity-theme .ginput_complex label {
    font-size: .8em !important;
    text-transform: capitalize !important;
}

input[type="submit"], input.button, .gform_wrapper .gform_footer input.gform_button {
    background: #054689 !important;
    color: white !important;
}

input[type="submit"]:hover, input.button:hover, .gform_wrapper .gform_footer input.gform_button:hover {
    background: #000 !important;
    color: white !important;
}