/* ==========================================================================
   Public site styles
   Palette: deep navy surface, red accent, secondary blue, neutral greys.
   Bootstrap 4 provides the grid; everything below is bespoke.
   ========================================================================== */

:root {
    --brand:        #e4170f;
    --brand-dark:   #b4120c;
    --accent:       #004b9c;
    --ink:          #0d2440;
    --ink-soft:     #143253;
    --body:         #4a5568;
    --line:         #e4e4e4;
    --surface:      #f6f6f6;
    --radius:       12px;
    --shadow:       0 10px 30px rgba(13, 36, 64, .08);
    --shadow-lg:    0 20px 50px rgba(13, 36, 64, .14);
}

* { box-sizing: border-box; }

body {
    font-family: "Segoe UI", Tahoma, "Helvetica Neue", Arial, sans-serif;
    color: var(--body);
    background: #fff;
    line-height: 1.7;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5 { color: var(--ink); font-weight: 700; line-height: 1.25; }
a { color: var(--brand); transition: color .18s ease; }
a:hover { color: var(--brand-dark); text-decoration: none; }
img { max-width: 100%; }

.section { padding: 80px 0; }
.section-sm { padding: 52px 0; }
.section-alt { background: var(--surface); }

/* Section heading -------------------------------------------------------- */

.section-head { margin-bottom: 44px; }
.section-head .eyebrow {
    color: var(--brand);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: block;
}
.section-head h2 { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 12px; }
.section-head p { max-width: 640px; margin: 0; }
.section-head.text-center p { margin-inline: auto; }

/* Buttons ---------------------------------------------------------------- */

.btn-brand {
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #fff;
    font-weight: 600;
    padding: 11px 26px;
    border-radius: 8px;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn-brand:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(228, 23, 15, .32);
}
.btn-ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .55);
    color: #fff;
    font-weight: 600;
    padding: 11px 26px;
    border-radius: 8px;
    transition: background .18s ease, border-color .18s ease;
}
.btn-ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

/* Top bar & navigation --------------------------------------------------- */

.topbar {
    background: var(--ink);
    color: rgba(255, 255, 255, .72);
    font-size: 14px;
    padding: 9px 0;
}
.topbar a { color: rgba(255, 255, 255, .72); }
.topbar a:hover { color: var(--brand); }
.topbar-contact a { margin-inline-end: 22px; }
.topbar i { color: var(--brand); margin-inline-end: 6px; }

.site-nav {
    background: #fff;
    box-shadow: 0 2px 16px rgba(13, 36, 64, .07);
    padding: 12px 0;
    z-index: 1030;
}
.site-nav .navbar-brand img { height: 46px; width: auto; }
.site-nav .nav-item { margin-inline-start: 6px; }
.site-nav .nav-link {
    color: var(--ink);
    font-weight: 600;
    padding: 10px 16px !important;
    border-radius: 7px;
    transition: color .18s ease, background .18s ease;
}
.site-nav .nav-link:hover { color: var(--brand); background: rgba(228, 23, 15, .08); }
.site-nav .nav-item.active > .nav-link { color: var(--brand); background: rgba(228, 23, 15, .12); }
.site-nav .dropdown-menu {
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 8px;
    margin-top: 10px;
}
.site-nav .dropdown-item {
    border-radius: 7px;
    padding: 9px 14px;
    color: var(--ink);
    font-weight: 500;
}
.site-nav .dropdown-item:hover { background: rgba(228, 23, 15, .1); color: var(--brand); }

/* Open the menu on hover from lg up. Below that the navbar is collapsed and
   Bootstrap's click behaviour is the correct interaction, so this is scoped
   to the desktop breakpoint only. The bridge keeps the menu open while the
   pointer crosses the gap between the link and the panel. */
@media (min-width: 992px) {
    .hover-dropdown:hover > .dropdown-menu { display: block; margin-top: 0; }
    .hover-dropdown > .dropdown-menu::before {
        content: '';
        position: absolute;
        top: -10px;
        inset-inline-start: 0;
        width: 100%;
        height: 10px;
    }
    .hover-dropdown > .nav-link { cursor: pointer; }
}

/* Hero slider ------------------------------------------------------------ */

.hero {
    position: relative;
    min-height: 560px;
    background: var(--ink);
    overflow: hidden;
}
/* slides are stacked and cross-fade via opacity, so the container owns the
   height instead of the individual slides */
.hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .9s ease, visibility 0s linear .9s;
    z-index: 0;
    pointer-events: none;
}
.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity .9s ease;
    z-index: 1;
    pointer-events: auto;
}
.hero-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(13, 36, 64, .92) 0%, rgba(13, 36, 64, .72) 45%, rgba(13, 36, 64, .35) 100%);
}
html[dir="rtl"] .hero-slide::after {
    background: linear-gradient(270deg, rgba(13, 36, 64, .92) 0%, rgba(13, 36, 64, .72) 45%, rgba(13, 36, 64, .35) 100%);
}
.hero-content { position: relative; z-index: 2; max-width: 620px; padding: 70px 0; }
/* brand slogan strip: the source art is black on transparent, so invert it to
   white to read on the dark hero */
.hero-slogan {
    display: block;
    width: 100%;
    max-width: 440px;
    height: auto;
    margin-bottom: 24px;
    filter: brightness(0) invert(1);
}
.hero-content h1 { color: #fff; font-size: clamp(30px, 5vw, 52px); margin-bottom: 18px; }
.hero-content p { color: rgba(255, 255, 255, .84); font-size: 18px; margin-bottom: 30px; }

/* content rises in just after its slide has faded up */
.hero-slide .hero-content { opacity: 0; transform: translateY(20px); }
.hero-slide.is-active .hero-content {
    opacity: 1;
    transform: none;
    transition: opacity .7s ease .25s, transform .7s ease .25s;
}

.hero-dots {
    position: absolute;
    bottom: 26px;
    inset-inline-start: 0;
    width: 100%;
    text-align: center;
    z-index: 3;
}
.hero-dots button {
    width: 34px;
    height: 4px;
    border: none;
    border-radius: 4px;
    margin: 0 5px;
    padding: 0;
    background: rgba(255, 255, 255, .35);
    cursor: pointer;
    transition: background .2s ease;
}
.hero-dots button.is-active { background: var(--brand); }

.hero-static { min-height: 380px; display: flex; align-items: center; }

/* respect users who ask for less motion: cut the animation, keep the swap */
@media (prefers-reduced-motion: reduce) {
    .hero-slide,
    .hero-slide.is-active,
    .hero-slide.is-active .hero-content {
        transition: none;
    }
    .hero-slide .hero-content { opacity: 1; transform: none; }
}

/* Page banner ------------------------------------------------------------ */

.page-banner {
    background: var(--ink);
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 74px 0;
}
.page-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(13, 36, 64, .78);
}
.page-banner .container { position: relative; z-index: 2; }
.page-banner h1 { color: #fff; margin-bottom: 6px; }
.page-banner .crumbs { color: rgba(255, 255, 255, .66); font-size: 14px; margin: 0; }
.page-banner .crumbs a { color: rgba(255, 255, 255, .82); }
.page-banner .crumbs a:hover { color: var(--brand); }

/* Cards ------------------------------------------------------------------ */

.card-tile {
    display: block;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    height: 100%;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card-tile:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}
.card-tile .tile-media {
    height: 190px;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.card-tile .tile-media img { width: 100%; height: 100%; object-fit: cover; }
.card-tile .tile-media .placeholder { color: #c9ccd1; font-size: 42px; }
.card-tile .tile-body { padding: 20px; }
.card-tile .tile-body h3 { font-size: 18px; margin-bottom: 6px; }
.card-tile .tile-body p { font-size: 14px; margin: 0; color: var(--body); }
.card-tile .tile-meta {
    font-size: 13px;
    color: var(--brand);
    font-weight: 600;
    margin-top: 12px;
    display: inline-block;
}

/* Product card ----------------------------------------------------------- */

.product-card .tile-media { height: 220px; padding: 16px; background: #fff; }
.product-card .tile-media img { object-fit: contain; }
.product-card .badge-visc {
    display: inline-block;
    background: rgba(228, 23, 15, .14);
    color: var(--brand-dark);
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 8px;
}

/* Feature blocks --------------------------------------------------------- */

.feature-box {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px 24px;
    height: 100%;
    transition: transform .2s ease, box-shadow .2s ease;
}
.feature-box:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.feature-box .icon {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: rgba(228, 23, 15, .12);
    color: var(--brand);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.feature-box h3 { font-size: 17px; margin-bottom: 8px; }
.feature-box p { font-size: 14px; margin: 0; }

/* Rich text authored in the admin ---------------------------------------- */

.rich-content > *:first-child { margin-top: 0; }
.rich-content > *:last-child { margin-bottom: 0; }
.rich-content p { margin-bottom: 1rem; }
.rich-content h2 { font-size: 24px; margin: 1.6rem 0 .7rem; }
.rich-content h3 { font-size: 20px; margin: 1.4rem 0 .6rem; }
.rich-content h4 { font-size: 17px; margin: 1.2rem 0 .5rem; }
.rich-content ul,
.rich-content ol { margin: 0 0 1rem; padding-inline-start: 1.4rem; }
.rich-content li { margin-bottom: .4rem; }
.rich-content a { text-decoration: underline; }
.rich-content blockquote {
    margin: 1.2rem 0;
    padding: 4px 0 4px 16px;
    border-inline-start: 3px solid var(--brand);
    color: var(--ink);
    font-style: italic;
}
html[dir="rtl"] .rich-content blockquote { padding: 4px 16px 4px 0; }
.rich-content hr { margin: 1.6rem 0; border-color: var(--line); }
.rich-content table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
}
.rich-content th,
.rich-content td {
    padding: 10px 14px;
    border: 1px solid var(--line);
    text-align: start;
}
.rich-content th { background: var(--surface); color: var(--ink); font-weight: 600; }

/* Product detail --------------------------------------------------------- */

.product-hero-img {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 30px;
    text-align: center;
}
.product-hero-img img { max-height: 380px; object-fit: contain; }
.product-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.product-thumbs img {
    width: 74px;
    height: 74px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color .18s ease;
}
.product-thumbs img:hover, .product-thumbs img.is-active { border-color: var(--brand); }

.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 15px; }
.spec-table th { text-align: start; color: var(--ink); font-weight: 600; width: 45%; background: var(--surface); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: none; }

/* Contact ---------------------------------------------------------------- */

.contact-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    height: 100%;
    text-align: center;
}
.contact-card .icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(228, 23, 15, .12);
    color: var(--brand);
    font-size: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}
.contact-card h3 { font-size: 16px; margin-bottom: 6px; }
.contact-card a, .contact-card span { color: var(--body); font-size: 15px; }

.form-control {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 15px;
    height: auto;
    font-size: 15px;
}
.form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(228, 23, 15, .15);
}
label { font-weight: 600; color: var(--ink); font-size: 14px; margin-bottom: 6px; }

.map-embed iframe {
    width: 100%;
    height: 380px;
    border: 0;
    border-radius: var(--radius);
    display: block;
}

/* Search & empty states -------------------------------------------------- */

.filter-bar {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
    margin-bottom: 30px;
}
.chip {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 30px;
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    margin: 0 6px 8px 0;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

.empty-state { text-align: center; padding: 60px 20px; color: #9aa0a6; }
.empty-state i { font-size: 44px; margin-bottom: 14px; display: block; opacity: .5; }

/* Results area while an AJAX filter is in flight -------------------------- */

#productResults { min-height: 220px; transition: opacity .15s ease; }
#productResults.is-loading { opacity: .35; pointer-events: none; }
#productResults.is-loading::after {
    content: '';
    position: absolute;
    top: 60px;
    inset-inline-start: 50%;
    width: 34px;
    height: 34px;
    margin-inline-start: -17px;
    border: 3px solid var(--line);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: resultsSpin .7s linear infinite;
}
@keyframes resultsSpin { to { transform: rotate(360deg); } }

/* CTA strip -------------------------------------------------------------- */

.cta-strip { background: var(--ink); padding: 56px 0; }
.cta-strip h2 { color: #fff; margin-bottom: 8px; }
.cta-strip p { color: rgba(255, 255, 255, .74); margin: 0; }

/* Footer ----------------------------------------------------------------- */

.site-footer { background: var(--ink-soft); color: rgba(255, 255, 255, .7); padding: 60px 0 0; }
.site-footer .footer-logo { height: 48px; width: auto; }
.site-footer .footer-text { font-size: 14px; color: rgba(255, 255, 255, .6); }
.site-footer .footer-title {
    color: #fff;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 18px;
}
.site-footer .footer-list { list-style: none; padding: 0; margin: 0; }
.site-footer .footer-list li { margin-bottom: 11px; font-size: 14px; }
.site-footer .footer-list a { color: rgba(255, 255, 255, .7); }
.site-footer .footer-list a:hover { color: var(--brand); }
.site-footer .footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.site-footer .footer-contact i { color: var(--brand); margin-top: 5px; }
.site-footer .footer-socials { margin-top: 18px; }
.site-footer .footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    margin-inline-end: 8px;
    transition: background .18s ease, transform .18s ease;
}
.site-footer .footer-socials a:hover { background: var(--brand); transform: translateY(-3px); }
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    margin-top: 30px;
    padding: 22px 0;
    text-align: center;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .55);
}

/* Floating WhatsApp ------------------------------------------------------ */

.whatsapp-float {
    position: fixed;
    inset-block-end: 24px;
    inset-inline-end: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    box-shadow: 0 8px 24px rgba(37, 211, 102, .42);
    z-index: 1040;
    transition: transform .18s ease;
}
.whatsapp-float:hover { color: #fff; transform: scale(1.08); }

/* Pagination ------------------------------------------------------------- */

.pagination { justify-content: center; margin-top: 40px; }
.page-link { color: var(--ink); border-color: var(--line); padding: 9px 15px; }
.page-item.active .page-link { background: var(--brand); border-color: var(--brand); }
.page-link:hover { color: var(--brand); background: rgba(228, 23, 15, .08); }

/* Responsive ------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .section { padding: 56px 0; }
    .hero { min-height: 440px; }
    .site-nav > .container { padding-inline: 18px; }
    .site-nav .navbar-collapse {
        margin-top: 12px;
        padding: 12px 4px 16px;
        border-top: 1px solid var(--line);
    }
    .site-nav .nav-item { margin-inline-start: 0; }
    .site-nav .nav-link { padding: 12px 14px !important; }
    .site-nav .navbar-nav { margin-bottom: 10px; }
    .site-nav .dropdown-menu { margin-top: 4px; box-shadow: none; padding: 4px 0; padding-inline-start: 12px; }
    .site-nav .btn-brand { display: block; text-align: center; padding-block: 12px; }
}

@media (max-width: 575.98px) {
    .hero { min-height: 400px; }
    .hero-content { padding: 48px 0; }
    .card-tile .tile-media { height: 160px; }
    .product-card .tile-media { height: 180px; }
}