/* Products Page Specific Styles */
body { background-color: #F2F3F4; }

/* Breadcrumb to match facility/news */
.breadcrumb{font-size:12px;color:#7a8792;background:transparent;padding:10px 0 10px 24px}
.breadcrumb a{color:inherit;text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}


.products-section { padding: 60px 0; background-image: linear-gradient(to bottom, #FFFFFF, #F2F3F4); }

.products-section .container{padding-left:24px}

/* old local headings removed; hero uses shared .news-title-text and underline-blue */

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 44px 36px; /* row, column */
    margin-top: 40px;
}

.product-item {
    background: transparent; /* no white card */
    border: 0;
    padding: 0;
    text-align: left;
}

.product-item:hover .product-image { transform: translateY(-1px); }

.product-image {
        position:relative;
        background:#FFFFFF; /* framed image */
        margin-bottom: 12px;
        padding: 14px;
        border:0;
        border-radius:4px;
        transition: transform .2s ease;
}

/* Solid blue offset plate like the reference */
.product-image::after{
    content:"";
    position:absolute;
    right:-12px; bottom:-12px;
    width:100%; height:100%;
    background:#bcd0e8; /* muted blue plate */
    border-radius:4px;
    z-index:-1;
}

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

.product-name {
        font-size: 16px;
        color: #154994;
        font-weight: 700;
        margin: 4px 0 10px;
}

/* Thin divider under product name */
.product-name::after{
    content:"";
    display:block;
    height:1px;
    background:#c8d5e8;
    margin-top:10px;
}

.product-description {
    font-size: 13px;
    color: #6b7680;
    line-height: 1.9;
}

/* Remove page-specific contact styles to use shared NEWS/contact styles */

.to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 80px;
    height: 80px;
    background-color: #FFFFFF;
    border: 2px solid #154994;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 0.3s ease-in-out;
    color: #154994;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

.to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.to-top:hover {
    background-color: #154994;
    color: #FFFFFF;
}

.to-top-arrow {
    width: 12px;
    height: 12px;
    border-top: 3px solid #154994;
    border-left: 3px solid #154994;
    transform: rotate(45deg) translateY(2px);
    margin-bottom: 5px;
    transition: border-color 0.3s;
}

.to-top:hover .to-top-arrow {
    border-color: #FFFFFF;
}

/* PRODUCTS hero diagonal light band */
.products-hero{position:relative}
.products-hero::before{content:"";position:absolute;inset:0 0 auto 0;height:200px;pointer-events:none;background:
    linear-gradient(135deg, rgba(21,73,148,0.06) 8%, rgba(255,255,255,0.3) 45%, rgba(255,255,255,0.85) 80%, #fff 100%)}

/* IMPORTANT: Do NOT override shared footer styles here.
   Footer visuals come from css/news.css and css/main.css for consistency. */