/* ==========================================================================
   1. Design Tokens & Global Reset
   ========================================================================== */
:root {
    --bg-dark: #0d1710;              /* Deep dark forest background */
    --bg-card: #122016;              /* Dark olive card background */
    --bg-card-hover: #172a1d;        /* Hover surface color */
    --border-color: #1e3625;         /* Subtle card border */

    --accent-yellow: #f0b429;        /* BENTEX signature gold/yellow */
    --accent-yellow-hover: #d99f1c;  /* Yellow active state */

    --accent-green: #25d366;         /* WhatsApp vibrant green */
    --accent-green-hover: #1fba58;   /* Green hover state */

    --text-white: #ffffff;           /* High-contrast crisp text */
    --text-muted: #9ab0a0;           /* Secondary muted sage text */

    --radius-card: 12px;
    --radius-btn: 6px;
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-white);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Remove all underlines globally */
a, button {
    text-decoration: none !important;
    border: none;
}

/* ==========================================================================
   2. Header & Sticky Navigation
   ========================================================================== */
.top-bar {
    background-color: #080f0a;
    padding: 8px 40px;
    font-size: 0.82rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    color: var(--text-muted);
}

.top-bar a {
    color: var(--accent-yellow);
    font-weight: 700;
    transition: var(--transition);
}

.top-bar a:hover {
    color: var(--text-white);
}

header {
    background-color: var(--bg-dark);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 16px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo h2 {
    color: var(--accent-yellow);
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    line-height: 1;
}

.logo small {
    color: var(--text-muted);
    font-size: 0.65rem;
    letter-spacing: 2px;
    font-weight: 700;
    display: block;
    margin-top: 3px;
}

nav {
    display: flex;
    gap: 20px;
    align-items: center;
}

.nav-link {
    color: var(--text-white);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 12px;
    border-radius: 4px;
    transition: var(--transition);
    cursor: pointer;
}

.nav-link:hover, .nav-link.active {
    color: var(--accent-yellow);
}

.btn-call-nav {
    background: var(--accent-yellow);
    color: #000000;
    font-size: 0.85rem;
    font-weight: 800;
    padding: 10px 22px;
    border-radius: var(--radius-btn);
    text-transform: uppercase;
    transition: var(--transition);
    cursor: pointer;
}

.btn-call-nav:hover {
    background: var(--accent-yellow-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(240, 180, 41, 0.3);
}

.btn-call-nav:active {
    transform: translateY(0);
}

/* ==========================================================================
   3. Page Layout & Hero Section
   ========================================================================== */
.page-content {
    display: none;
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px;
}

.page-content.active {
    display: block;
    animation: fadeIn 0.4s ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.tag {
    display: inline-block;
    background-color: var(--accent-yellow);
    color: #000000;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    padding: 5px 14px;
    border-radius: 4px;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.hero {
    text-align: center;
    padding: 60px 20px;
}

.hero h1 {
    font-size: 3.2rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

.hero p {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 620px;
    margin: 0 auto 32px auto;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ==========================================================================
   4. Action Buttons (Yellow & Green Styling)
   ========================================================================== */
.btn-yellow, .btn-green {
    padding: 14px 28px;
    border-radius: var(--radius-btn);
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: var(--transition);
}

.btn-yellow {
    background-color: var(--accent-yellow);
    color: #000000;
}

.btn-yellow:hover {
    background-color: var(--accent-yellow-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(240, 180, 41, 0.35);
}

.btn-yellow:active {
    transform: translateY(1px) scale(0.98);
}

.btn-green {
    background-color: var(--accent-green);
    color: #ffffff;
}

.btn-green:hover {
    background-color: var(--accent-green-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.35);
}

.btn-green:active {
    transform: translateY(1px) scale(0.98);
}

/* ==========================================================================
   5. Product Catalog & Grid Layout (Matching Reference Images)
   ========================================================================== */
.parts-catalog {
    margin-top: 24px;
}

.parts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

/* Product Card Styling */
.part-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: var(--transition);
}

.part-card:hover {
    border-color: var(--accent-yellow);
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
}

/* Image Container */
.part-img-wrapper {
    width: 100%;
    height: 200px;
    background-color: #070d09;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.part-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.part-card:hover .part-img-wrapper img {
    transform: scale(1.06);
}

/* Text Content Area */
.part-info {
    padding: 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.item-num {
    color: var(--accent-yellow);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.part-card h4 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-white);
    line-height: 1.3;
    margin-bottom: 16px;
}

/* Side-by-Side Card Buttons at Bottom */
.card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: auto;
    padding: 0 16px 16px;
}

.btn-card-yellow, .btn-card-green {
    padding: 10px 0;
    font-size: 0.78rem;
    font-weight: 800;
    border-radius: var(--radius-btn);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: var(--transition);
}

.btn-card-yellow {
    background-color: var(--accent-yellow);
    color: #000000;
}

.btn-card-yellow:hover {
    background-color: var(--accent-yellow-hover);
    transform: translateY(-1px);
}

.btn-card-yellow:active {
    transform: translateY(1px) scale(0.96);
}

.btn-card-green {
    background-color: var(--accent-green);
    color: #ffffff;
}

.btn-card-green:hover {
    background-color: var(--accent-green-hover);
    transform: translateY(-1px);
}

.btn-card-green:active {
    transform: translateY(1px) scale(0.96);
}

/* ==========================================================================
   6. Navigation & Back Buttons
   ========================================================================== */
.back-btn {
    background: transparent;
    color: var(--text-white);
    font-size: 0.9rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 24px;
    transition: var(--transition);
}

.back-btn:hover {
    color: var(--accent-yellow);
    transform: translateX(-4px);
}

/* ==========================================================================
   7. Footer
   ========================================================================== */
footer {
    background-color: #070d09;
    border-top: 1px solid var(--border-color);
    padding: 40px 24px 20px 24px;
    margin-top: 60px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    header {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }

    .hero h1 {
        font-size: 2.2rem;
    }

    .parts-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* Shared section layouts */
[hidden] { display: none !important; }
img { max-width: 100%; }
button, input { font: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent-yellow); outline-offset: 4px; }
.section, .features-section { padding: 40px 0; }
.section > h2, .features-section > h2 { margin-bottom: 24px; }
.sub-heading, .link-text { color: var(--accent-yellow); font-weight: 700; }
.sub-heading { margin-bottom: 8px; font-size: 0.8rem; letter-spacing: 1px; }
.card-grid, .contact-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.category-card { position: relative; overflow: hidden; border: 1px solid var(--border-color); border-radius: var(--radius-card); background: var(--bg-card); cursor: pointer; }
.category-card img { display: block; width: 100%; height: 190px; object-fit: cover; }
.card-overlay { padding: 24px; }
.card-overlay h3 { margin-bottom: 8px; }
.card-overlay p { color: var(--text-muted); margin-bottom: 20px; }
.features-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.feature-card, .c-card { padding: 24px; border: 1px solid var(--border-color); border-radius: var(--radius-card); background: var(--bg-card); }
.feature-card h4, .c-card h4 { margin-bottom: 10px; }
.feature-card p, .c-card p { color: var(--text-muted); }
.banner-cta, .contact-box, .category-header { text-align: center; padding: 40px 24px; }
.banner-cta { border: 1px solid var(--border-color); border-radius: var(--radius-card); background: var(--bg-card); margin-top: 32px; }
.banner-cta p, .contact-box > p, .category-header p { max-width: 680px; margin: 16px auto 24px; color: var(--text-muted); }
.phone-number { font-size: clamp(1.5rem, 5vw, 2.5rem); font-weight: 800; margin: 24px 0; color: var(--accent-yellow); }
.search-box { max-width: 640px; margin: 24px auto 32px; }
.search-box label { display: block; margin-bottom: 8px; color: var(--text-muted); }
.search-box input { width: 100%; padding: 14px 16px; border: 1px solid var(--border-color); border-radius: var(--radius-btn); background: var(--bg-card); color: var(--text-white); }
.search-box input::placeholder { color: var(--text-muted); }
.sub-category-title { margin: 32px 0 20px; }
.contact-cards { margin: 32px 0; }
.icon { font-size: 1.8rem; margin-bottom: 12px; }
.timing-badge { margin: 24px 0; color: var(--text-muted); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; max-width: 1152px; margin: 0 auto 32px; text-align: left; }
.footer-col h4 { color: var(--text-white); margin-bottom: 16px; }
.footer-col a { display: block; margin: 8px 0; }
.footer-col a:hover { color: var(--accent-yellow); }
.footer-col p { margin-top: 12px; }
.copyright { border-top: 1px solid var(--border-color); padding-top: 20px; }
.reveal-on-scroll.visible { animation: fadeIn 0.4s ease-out; }
.btn-green, .btn-card-green { color: #07150b; }
header { gap: 20px; flex-wrap: wrap; }
nav { flex-wrap: wrap; justify-content: center; gap: 8px; }
@media (max-width: 900px) {
    .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card-grid, .contact-cards { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    header { position: static; }
    .top-bar { padding: 8px 12px; justify-content: center; flex-wrap: wrap; }
    .nav-link { font-size: 0.75rem; padding: 8px; }
    .page-content { padding: 24px 16px; }
    .hero { padding: 32px 0; }
    .features-grid, .footer-grid { grid-template-columns: 1fr; }
    .parts-grid { grid-template-columns: minmax(0, 1fr); }
    .banner-cta, .contact-box, .category-header { padding: 24px 0; }
    .banner-cta { padding: 24px 16px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Catalogue metadata */
.part-group { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 8px; }
.part-price { color: var(--accent-yellow); font-weight: 700; margin-top: auto; }

/* Premium visual layer inspired by the supplied Bentex reference design. */
:root {
    --olive: #1b281c;
    --olive-2: #263622;
    --cream: #f3f0e8;
    --paper: #fbfaf6;
    --gold: #dca900;
    --gold-light: #efc441;
    --ink: #172017;
    --ease: cubic-bezier(.22,1,.36,1);
}
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body { background: var(--cream); color: var(--ink); font-family: "DM Sans", system-ui, sans-serif; }
.site-noise { position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: .018; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.top-bar { background: #101810; color: #dce1d6; font-size: 11px; letter-spacing: .9px; font-weight: 700; padding: 8px 42px; }
.top-bar a { color: var(--gold-light); }
.site-header { min-height: 78px; background: var(--olive); color: #fff; padding: 0 42px; border-bottom: 1px solid rgba(255,255,255,.08); transition: background .5s var(--ease), box-shadow .5s var(--ease), backdrop-filter .5s var(--ease); }
.site-header.scrolled { background: rgba(20,32,21,.78); backdrop-filter: blur(22px) saturate(140%); box-shadow: 0 10px 40px rgba(0,0,0,.14); }
.site-header:after { content: ""; position: absolute; left: 4%; right: 4%; bottom: -1px; height: 1px; background: linear-gradient(90deg,transparent,rgba(239,196,65,.55),transparent); transform: scaleX(.35); transition: transform .8s var(--ease); }
.site-header.scrolled:after { transform: scaleX(1); }
.logo h2 { font-family: "Barlow Condensed", sans-serif; font-size: 29px; letter-spacing: 2px; color: var(--gold-light); }
.logo small { font-size: 8px; letter-spacing: 3px; color: #d1d7cc; }
nav { gap: 4px; }
.nav-link { position: relative; font-size: 11px; letter-spacing: .8px; padding: 31px 13px; transition: .35s var(--ease); }
.nav-link:after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 19px; height: 2px; background: var(--gold-light); transform: scaleX(0); transition: transform .35s var(--ease); }
.nav-link:hover:after, .nav-link.active:after { transform: scaleX(1); }
.btn-call-nav, .btn, .btn-yellow, .btn-green { transition: .35s var(--ease); }
.btn-call-nav { background: var(--gold); padding: 12px 21px; font-size: 11px; }
.btn-call-nav:hover, .btn-yellow:hover, .btn-green:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(220,169,0,.23); }
.page-content.active { animation: pageIn .55s var(--ease); }
@keyframes pageIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero-home { height: calc(100vh - 110px); min-height: 680px; position: relative; display: grid; place-items: center; overflow: hidden; background: #172419; color: #fff; border-radius: 0; padding: 0; }
.hero-bg { position: absolute; inset: -4%; background: linear-gradient(90deg,rgba(18,30,19,.88),rgba(24,38,24,.64) 50%,rgba(18,30,19,.43)), url("images/site/farm-sunrise.jpg") center/cover; animation: heroZoom 22s ease-in-out infinite alternate; }
.hero-glow { position: absolute; width: 650px; height: 650px; border-radius: 50%; right: -170px; top: -180px; background: radial-gradient(circle,rgba(220,169,0,.15),transparent 68%); animation: floatGlow 8s ease-in-out infinite; }
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes floatGlow { 50% { transform: translate(-30px,30px) scale(1.1); } }
.hero-content { position: relative; z-index: 2; max-width: 900px; padding: 50px 24px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--gold-light); font-size: 11px; font-weight: 900; letter-spacing: 2.5px; }
.eyebrow:before { content: ""; width: 28px; height: 2px; background: currentColor; }
.eyebrow-dark { color: #68715f; }
.hero h1, .category-header h1, .contact-box h1, .section-heading h2 { font-family: "Barlow Condensed", sans-serif; font-weight: 900; letter-spacing: -1px; line-height: .91; text-transform: uppercase; }
.hero h1 { font-size: clamp(58px,8vw,108px); margin: 24px 0; }
.hero h1 em { color: var(--gold-light); font-style: normal; }
.hero p { max-width: 650px; margin: auto; color: #e2e6dc; font-size: 16px; }
.hero-buttons { margin-top: 32px; }
.btn { min-width: 175px; padding: 15px 24px; font-size: 12px; }
.hero-trust { display: flex; justify-content: center; gap: 26px; margin-top: 30px; color: #d4dacd; font-size: 9px; letter-spacing: 1.5px; font-weight: 800; }
.hero-trust span { padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.11); backdrop-filter: blur(12px); }
.hero-scroll { position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); display: inline-block; padding: 8px 12px; font-size: 9px; letter-spacing: 2px; color: #d8ddd3; z-index: 2; cursor: pointer; }
.hero-scroll:hover, .hero-scroll:focus-visible { color: var(--gold-light); }
.hero-scroll span { display: block; text-align: center; font-size: 18px; animation: scrollBounce 1.6s infinite; }
@keyframes scrollBounce { 50% { transform: translateY(7px); } }
.section { max-width: 1380px; margin: auto; padding: 110px 42px; }
.home-quick-shop {
    max-width: 1380px;
    margin: 0 auto;
    padding: 28px 42px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.home-quick-shop a {
    min-height: 42px;
    padding: 10px 15px;
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid rgba(27,40,28,.12);
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .7px;
    text-transform: uppercase;
    transition: .25s var(--ease);
}
.home-quick-shop a:hover {
    border-color: var(--gold);
    box-shadow: inset 0 -3px 0 var(--gold-light);
}
.home-trust-strip {
    max-width: 1380px;
    margin: 24px auto 0;
    padding: 0 42px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
}
.home-trust-strip div {
    min-height: 92px;
    padding: 18px 20px;
    background: var(--olive);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.home-trust-strip strong {
    font: 900 25px/.95 "Barlow Condensed", sans-serif;
    text-transform: uppercase;
}
.home-trust-strip span {
    margin-top: 6px;
    color: #ccd4c7;
    font-size: 13px;
}
.section-heading { text-align: center; max-width: 780px; margin: 0 auto 55px; }
.section-heading h2 { font-size: clamp(44px,5vw,70px); margin: 17px 0 15px; color: var(--ink); }
.section-heading h2 span { color: #718060; }
.section-heading p { color: var(--muted); }
.card-grid { gap: 20px; }
.category-card { height: 500px; display: block; position: relative; overflow: hidden; background: var(--olive); color: #fff; border: 0; border-radius: 0; transition: transform .7s var(--ease), box-shadow .7s var(--ease); }
.category-card img { width: 100%; height: 100%; object-fit: cover; padding: 0; background: none; transition: 1s var(--ease); }
.category-card:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 28%,rgba(13,22,14,.9)); pointer-events: none; }
.card-overlay { position: absolute; inset: auto 28px 28px; z-index: 2; padding: 0; transform: translateY(10px); transition: .55s var(--ease); }
.category-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.category-meta span {
    padding: 6px 9px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.14);
    color: #f3f5ee;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.card-overlay h3 { font: 900 39px/.9 "Barlow Condensed", sans-serif; text-transform: uppercase; margin: 10px 0; }
.card-overlay p { font-size: 12px; color: #d6dbd2; }
.category-card:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(15,25,16,.28); }
.category-card:hover img { transform: scale(1.09); }
.category-card:hover .card-overlay { transform: none; }
.features-section { max-width: 1380px; margin: auto; padding: 100px 42px; }
.featured-parts-section { padding-top: 30px; }
.featured-parts-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}
.featured-part-card {
    background: #fff;
    border: 1px solid rgba(27,40,28,.10);
    color: var(--ink);
    min-width: 0;
    transition: .35s var(--ease);
}
.featured-part-card:hover {
    transform: translateY(-4px);
    border-color: rgba(220,169,0,.55);
    box-shadow: 0 18px 35px rgba(20,30,21,.12);
}
.featured-part-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #f2f3ee;
}
.featured-part-card span,
.featured-part-card h3,
.featured-part-card p {
    margin-inline: 12px;
}
.featured-part-card span {
    display: block;
    margin-top: 12px;
    color: #9a7b15;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
}
.featured-part-card h3 {
    margin-top: 5px;
    font: 900 20px/.95 "Barlow Condensed", sans-serif;
    text-transform: uppercase;
    min-height: 38px;
}
.featured-part-card p {
    margin-top: 6px;
    margin-bottom: 14px;
    color: #7a8471;
    font-size: 12px;
}
.features-section > h2 { font: 900 clamp(44px,5vw,70px)/.95 "Barlow Condensed", sans-serif; text-align: center; color: var(--ink); text-transform: uppercase; }
.feature-card { background: var(--paper); color: var(--ink); border: 1px solid rgba(27,40,28,.13); min-height: 185px; transition: .45s var(--ease); }
.feature-card:hover { transform: translateY(-6px); box-shadow: 0 18px 45px rgba(20,30,21,.12); border-color: rgba(220,169,0,.45); }
.c-card { background: var(--olive); color: #fff; border-color: rgba(255,255,255,.10); }
.c-card h4 { color: #fff; }
.c-card p { color: #cbd2c6; }
.banner-cta { background: var(--olive); color: #fff; border-radius: 0; padding: 120px 24px; }
.banner-cta h2 { font: 900 clamp(60px,7vw,100px)/.91 "Barlow Condensed", sans-serif; text-transform: uppercase; }
.banner-cta p { color: #c9d0c5; }
.phone-number { font: 700 32px "Barlow Condensed", sans-serif; color: var(--gold-light); }
.page-content:has(.parts-catalog) {
    width: min(1760px, calc(100% - 84px));
    max-width: none;
    padding-inline: 0;
}
.parts-catalog { scroll-margin-top: 104px; }
.parts-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.part-card { background: var(--paper); color: var(--ink); border: 1px solid rgba(27,40,28,.10); border-radius: 0; transition: .65s var(--ease); }
.part-card:hover { transform: translateY(-6px); box-shadow: 0 25px 55px rgba(27,40,28,.16); border-color: rgba(220,169,0,.5); }
.part-img-wrapper { aspect-ratio: 4 / 3; height: auto; background: #f2f3ee; padding: 0; }
.part-img-wrapper img { display: block; width: 100%; height: 100%; padding: 0; object-fit: cover; transition: .65s var(--ease); }
.part-card:hover .part-img-wrapper img { transform: scale(1.07); }
.part-info { padding: 14px 14px 10px; }
.part-card h4, .part-card h3 { font: 800 18px/1.05 "Barlow Condensed", sans-serif; text-transform: uppercase; color: var(--ink); }
.part-title-link { color: inherit; display: inline; }
.part-title-link:hover, .part-title-link:focus-visible { color: #9a7b15; }
.item-num { color: #9a7b15; }
.product-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.product-badges span { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 8px; background: #eef3e8; color: #526348; border: 1px solid rgba(27,40,28,.08); border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.card-actions { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); padding: 8px 14px 14px; gap: 8px; }
.btn-card-yellow, .btn-card-green { border-radius: 0; }
.reveal-on-scroll { opacity: 0; transform: translateY(35px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-on-scroll.visible { opacity: 1; transform: none; }
.enquiry-row { color: #fff; }
.enquiry-row a { color: #fff; }
.enquiry-row .item-num { color: var(--gold-light); }
.enquiry-row label { color: #d6ddd3; }
.enquiry-row .btn-details { color: var(--gold-light); }
@media (max-width: 900px) { .parts-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 900px) { .home-trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .featured-parts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .top-bar { padding: 8px 16px; } .site-header { padding: 0 17px; min-height: 68px; } .hero-home { height: calc(100vh - 96px); min-height: 610px; } .hero h1 { font-size: clamp(50px,14vw,76px); } .hero-trust { gap: 10px; flex-wrap: wrap; font-size: 8px; } .hero-trust span { padding: 6px 8px; } .hero-scroll { display: none; } .home-quick-shop { padding: 20px 16px 0; overflow-x: auto; flex-wrap: nowrap; } .home-quick-shop a { flex: 0 0 auto; } .home-trust-strip { grid-template-columns: 1fr 1fr; padding: 0 16px; } .home-trust-strip div { min-height: 82px; padding: 14px; } .home-trust-strip strong { font-size: 20px; } .home-trust-strip span { font-size: 11px; } .section, .features-section { padding: 75px 20px; } .category-card { height: 430px; } .featured-parts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .featured-part-card h3 { font-size: 17px; } .parts-grid { grid-template-columns: repeat(2,1fr); gap: 10px; } .part-img-wrapper { height: 155px; } .part-info { padding: 13px 12px 5px; } .card-actions { padding: 10px 12px 12px; gap: 5px; } }
@media (prefers-reduced-motion: reduce) { .hero-bg, .hero-glow, .hero-content *, .hero-scroll span { animation: none !important; } }
body:before { content: ""; position: fixed; z-index: 9998; pointer-events: none; width: 280px; height: 280px; border-radius: 50%; left: var(--mx,-400px); top: var(--my,-400px); transform: translate(-50%,-50%); background: radial-gradient(circle,rgba(220,169,0,.09),transparent 67%); filter: blur(18px); transition: left .18s ease-out, top .18s ease-out; }
.hero-content { will-change: transform; }
.btn, .btn-call-nav, .btn-card-yellow, .btn-card-green { position: relative; overflow: hidden; isolation: isolate; }
.btn:before, .btn-call-nav:before, .btn-card-yellow:before, .btn-card-green:before { content: ""; position: absolute; inset: -100% -30%; background: linear-gradient(105deg,transparent 38%,rgba(255,255,255,.38) 50%,transparent 62%); transform: translateX(-70%) rotate(8deg); transition: transform .75s var(--ease); pointer-events: none; }
.btn:hover:before, .btn-call-nav:hover:before, .btn-card-yellow:hover:before, .btn-card-green:hover:before { transform: translateX(70%) rotate(8deg); }
@media (pointer: coarse) { body:before { display: none; } }

/* Phase 3: responsive navigation and product detail layout */
.skip-link { position: fixed; top: 8px; left: 16px; z-index: 2000; padding: 12px 18px; background: var(--accent-yellow); color: #07150b; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.menu-toggle, .mobile-contact { display: none; }
.category-card { display: block; transition: border-color 0.2s ease, transform 0.2s ease; }
.category-card:hover { border-color: var(--accent-yellow); transform: translateY(-3px); }
.category-card img { height: 210px; object-fit: contain; padding: 20px; background: #fff; }
.part-img-wrapper { background: #f2f3ee; }
.part-card:hover .part-img-wrapper img { transform: none; }
.part-card h4 { margin-bottom: 8px; }
.btn-details { align-self: flex-start; min-height: 44px; margin-top: 12px; background: transparent; color: var(--accent-yellow); cursor: pointer; font-weight: 700; text-align: left; }
.btn-details:hover { text-decoration: underline !important; }
.hero { background: radial-gradient(ellipse at top, #203c28, transparent 70%); border-radius: 20px; }
.hero h1 { font-size: clamp(2rem, 4.5vw, 3.6rem); }
.category-header h1, .contact-box h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.15; }
.btn-card-yellow, .btn-card-green, .back-btn, .nav-link { min-height: 44px; }
.btn-card-yellow, .btn-card-green { min-width: 0; white-space: nowrap; }
.nav-link { display: inline-flex; align-items: center; }
body.dialog-open { overflow: hidden; }
#product-dialog { width: min(900px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 24px; color: var(--text-white); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; overflow-y: auto; }
#product-dialog::backdrop { background: rgb(0 0 0 / 75%); }
.dialog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; color: var(--text-muted); font-size: 0.8rem; letter-spacing: 1px; }
.dialog-close { min-height: 44px; padding: 8px 14px; background: var(--bg-dark); color: var(--text-white); border-radius: 6px; cursor: pointer; }
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.detail-image { min-width: 0; min-height: 520px; padding: 0; background: #f2f3ee; border-radius: 0; display: grid; place-items: center; overflow: hidden; }
.detail-image img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.detail-info { min-width: 0; }
.detail-info h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; margin: 12px 0 24px; overflow-wrap: anywhere; }
.detail-info dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 20px 0; border-block: 1px solid var(--border-color); }
.detail-info dt { color: var(--text-muted); }
.detail-info dd { font-weight: 700; }
.detail-note { color: var(--text-muted); margin: 24px 0; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.detail-actions a { flex: 1 1 180px; padding-inline: 12px; text-align: center; }
@media (min-width: 901px) and (max-width: 1100px) {
    .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
    header { flex-direction: row; flex-wrap: wrap; padding: 16px 24px; position: sticky; }
    .js .menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-left: auto; min-height: 44px; padding: 10px 16px; background: var(--bg-card); color: var(--text-white); border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; }
    #main-nav { display: flex; width: 100%; order: 4; flex-direction: column; align-items: stretch; }
    .js #main-nav { display: none; }
    .js #main-nav.menu-open { display: flex; flex-direction: column; align-items: stretch; }
    #main-nav .nav-link { padding: 12px 16px; }
    .btn-call-nav { white-space: nowrap; }
}
@media (min-width: 601px) and (max-width: 900px) {
    .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card-grid > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    body { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
    header { padding: 12px 16px; gap: 12px; }
    header > .btn-call-nav { display: none; }
    .mobile-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1001; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--bg-dark); border-top: 1px solid var(--border-color); }
    .mobile-contact a { padding: 12px 8px; font-size: 0.8rem; }
    .product-detail { grid-template-columns: 1fr; gap: 24px; }
    #product-dialog { padding: 16px; }
    .detail-image { min-height: 180px; padding: 16px; }
    .detail-image img { max-height: 220px; }
}

/* Phase 4: compact browsing controls and permanent product pages */
.category-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 0.68fr); gap: 44px; align-items: center; padding: 12px 0 20px; text-align: left; }
.category-copy { min-width: 0; }
.category-header .tag { margin-bottom: 10px; }
.category-header p { margin: 12px 0 18px; color: #64755f; }
.category-header .hero-buttons { justify-content: flex-start; }
.category-visual { position: relative; min-height: 300px; background: #fff; border: 1px solid rgba(27,40,28,.10); overflow: hidden; }
.category-visual img { width: 100%; height: 100%; min-height: 300px; object-fit: contain; padding: 28px; background: linear-gradient(135deg, #fff 0%, #f3f5ef 100%); }
.category-visual-copy { position: absolute; left: 18px; right: 18px; bottom: 18px; padding: 16px 18px; background: rgba(18,32,22,.92); color: #fff; backdrop-filter: blur(14px); }
.category-visual-copy span { display: block; color: var(--gold-light); font-size: 0.72rem; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; }
.category-visual-copy strong { display: block; margin-top: 4px; font: 900 1.45rem/1 "Barlow Condensed", sans-serif; text-transform: uppercase; }
.category-visual-copy p { margin: 8px 0 0; color: #dce3d8; font-size: 0.86rem; }
.page-content:has(.parts-catalog) .back-btn, .product-page .back-btn { color: #64755f; }
.page-content:has(.parts-catalog) .back-btn:hover, .product-page .back-btn:hover { color: #9a7b15; }
.catalogue-tools { max-width: none; display: flex; flex-wrap: wrap; align-items: end; gap: 16px; margin: 12px 0 28px; }
.catalogue-tools > div:first-child { flex: 1 1 300px; }
.catalogue-tools label, .search-box label { color: #64755f; font-weight: 600; }
.catalogue-tools select { min-height: 50px; padding: 12px; background: var(--bg-card); color: var(--text-white); border: 1px solid var(--border-color); border-radius: 6px; font: inherit; width: 100%; }
.catalogue-tools .btn-details { margin: 0; min-height: 50px; padding: 8px; }
.catalogue-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 20px; justify-content: flex-start; }
.catalogue-pill { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 9px 14px; background: #fff; border: 1px solid rgba(27,40,28,.12); color: var(--ink); font-weight: 800; font-size: 0.85rem; }
.catalogue-pill span { display: none; }
.catalogue-pill.active { border-color: rgba(220,169,0,.65); box-shadow: inset 0 -3px 0 var(--accent-yellow); }
.catalogue-pill:hover { border-color: var(--accent-yellow); }
.search-status { flex-basis: 100%; color: #64755f; font-weight: 600; }
.empty-state { text-align: center; border: 1px solid var(--border-color); border-radius: 12px; padding: 40px 24px; }
.empty-state p { margin-top: 12px; color: var(--text-muted); }
.part-card h3 { font-size: 1rem; font-weight: 800; line-height: 1.15; margin-bottom: 6px; }
.part-group { margin-bottom: 6px; }
.part-price { margin-top: 2px; }
a.btn-details { display: inline-flex; align-items: center; }
.product-page { max-width: 1320px; }
.standalone-product { margin: 20px 0 36px; }
.detail-gallery { min-width: 0; }
.detail-info h1 { font: 900 clamp(2.2rem, 4.5vw, 4rem)/.95 "Barlow Condensed", sans-serif; text-transform: uppercase; margin: 12px 0 18px; overflow-wrap: anywhere; }
.detail-summary { color: #6d775f; font-size: 1rem; margin-bottom: 22px; }
.product-buybox { background: #fff; border: 1px solid rgba(27,40,28,.10); padding: 28px; }
.detail-specs { background: #f8f7f1; border: 1px solid rgba(27,40,28,.08); padding: 18px; }
.detail-image img { height: auto; }
.detail-thumbs { display: flex; align-items: center; gap: 12px; margin-top: 12px; color: var(--text-muted); font-weight: 700; font-size: 0.85rem; }
.detail-thumbs img { width: 86px; height: 64px; object-fit: cover; border: 1px solid rgba(27,40,28,.12); background: #f2f3ee; }
.product-info-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0 0 44px; }
.product-info-panels > div { background: #fff; border: 1px solid rgba(27,40,28,.10); padding: 24px; }
.product-info-panels h2, .related-products h2 { font: 900 1.7rem/.95 "Barlow Condensed", sans-serif; text-transform: uppercase; margin-bottom: 12px; }
.product-info-panels p, .product-info-panels li, .related-products p { color: #6d775f; }
.product-info-panels ul { padding-left: 18px; }
.related-products { margin: 0 0 48px; }
.section-heading.compact { text-align: left; margin: 0 0 18px; max-width: none; }
.section-heading.compact h2 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 8px; }
.related-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
#copy-status { overflow-wrap: anywhere; max-width: 100%; color: var(--text-muted); }
#copy-status input { width: 100%; padding: 12px; font: inherit; }
@media (max-width: 900px) {
    .category-header { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 600px) {
    .page-content:has(.parts-catalog) { width: auto; padding-inline: 16px; }
    .part-img-wrapper { aspect-ratio: 4 / 3; height: auto; padding: 0; }
    .card-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .category-header { grid-template-columns: 1fr; gap: 18px; padding: 8px 0 16px; }
    .category-visual { min-height: 220px; }
    .category-visual img { min-height: 220px; padding: 18px; }
    .category-header .hero-buttons a { padding: 12px 14px; font-size: 0.75rem; }
    .catalogue-tools { gap: 12px; }
    .catalogue-tools > div { width: 100%; }
    .catalogue-pill { flex: 1 1 auto; justify-content: center; }
    .product-buybox { padding: 18px; }
    .product-info-panels, .related-grid { grid-template-columns: 1fr; }
}

#copy-product-link { display: none; }
.js #copy-product-link { display: inline-flex; }

/* Phase 5: multi-product enquiries */
.add-enquiry { display: none; }
.js .add-enquiry { display: block; min-height: 44px; padding: 12px 16px; margin: 0 16px 16px; background: var(--accent-yellow); color: #07150b; border-radius: 6px; font: inherit; font-weight: 700; cursor: pointer; }
.js .part-card > .add-enquiry { margin: 0 14px 0; border-radius: 0; }
.js .part-card .card-actions .add-enquiry { display: none; }
.detail-actions .add-enquiry { width: 100%; margin: 0; }
.detail-actions #copy-product-link { width: 100%; justify-content: center; }
[data-enquiry-count] { margin-left: 8px; padding: 2px 7px; border-radius: 12px; background: var(--accent-yellow); color: #07150b; }
.enquiry-notice:empty { display: none; }
.enquiry-notice { position: fixed; bottom: 16px; left: 16px; right: 16px; max-width: 700px; margin: auto; padding: 12px 16px; border: 1px solid var(--accent-yellow); background: var(--bg-card); color: var(--text-white); border-radius: 8px; z-index: 1002; pointer-events: none; }
.enquiry-page { max-width: 1320px; }
.enquiry-hero { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 44px; align-items: end; margin: 34px 0 30px; }
.enquiry-hero h1 { font: 900 clamp(2.4rem, 5vw, 4rem)/.9 "Barlow Condensed", sans-serif; text-transform: uppercase; margin: 14px 0 16px; }
.enquiry-hero p { max-width: 640px; color: #64755f; font-size: 1.05rem; }
.quote-help-panel, .enquiry-main-panel, .enquiry-summary-panel, .enquiry-empty-card, .enquiry-notes-card, .enquiry-preview-card { background: #fff; border: 1px solid rgba(27,40,28,.10); }
.quote-help-panel { padding: 22px; border-left: 4px solid var(--accent-yellow); }
.quote-help-panel span, .enquiry-panel-head span, .enquiry-summary-panel > span, .enquiry-empty-card > span { display: block; color: #9a7b15; font-size: 0.72rem; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; }
.quote-help-panel ol { margin: 12px 0 0; padding-left: 20px; color: #64755f; }
.quote-help-panel li + li { margin-top: 8px; }
.enquiry-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; margin-bottom: 70px; }
.enquiry-main-panel { padding: 22px; }
.enquiry-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.enquiry-panel-head h2, .enquiry-summary-panel h2, .enquiry-empty-card h2 { font: 900 1.8rem/1 "Barlow Condensed", sans-serif; text-transform: uppercase; margin-top: 6px; }
.enquiry-panel-head a { color: #9a7b15; font-weight: 800; }
.enquiry-row { display: grid; grid-template-columns: 120px minmax(0,1fr) 170px auto; gap: 18px; align-items: center; padding: 16px; margin-bottom: 12px; background: #f8f7f1; border: 1px solid rgba(27,40,28,.08); border-radius: 8px; color: var(--ink); }
.enquiry-product-image { display: block; background: #fff; border: 1px solid rgba(27,40,28,.08); border-radius: 6px; overflow: hidden; }
.enquiry-row img { display: block; width: 120px; height: 90px; object-fit: cover; }
.enquiry-row a { color: var(--ink); font-weight: 900; }
.enquiry-row a:hover { color: #9a7b15; }
.enquiry-row .item-num { margin-top: 6px; color: #9a7b15; }
.enquiry-product-info p:not(.item-num) { color: #64755f; font-size: 0.86rem; }
.quantity-field { color: #64755f; font-weight: 800; }
.quantity-control { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; margin-top: 8px; border: 1px solid rgba(27,40,28,.13); border-radius: 6px; overflow: hidden; background: #fff; }
.quantity-control button, .quantity-control input { min-height: 42px; border: 0; background: #fff; color: var(--ink); font: inherit; font-weight: 900; text-align: center; }
.quantity-control button { cursor: pointer; }
.quantity-control button:disabled { color: #bac4b4; cursor: not-allowed; }
.quantity-control input { border-inline: 1px solid rgba(27,40,28,.10); width: 100%; }
.quantity-control input[aria-invalid] { outline: 2px solid #ff9c8c; outline-offset: -2px; }
.remove-enquiry { color: #9a7b15; background: transparent; font-weight: 900; cursor: pointer; }
.remove-enquiry:hover { color: #6b530e; }
.enquiry-notes-card { margin-top: 18px; padding: 18px; }
.enquiry-notes-card label, #copy-enquiry-fallback label { display: block; color: #64755f; font-weight: 800; margin-bottom: 10px; }
#enquiry-notes, #enquiry-copy-text { width: 100%; padding: 14px 16px; font: inherit; color: var(--ink); background: #f8f7f1; border: 1px solid rgba(27,40,28,.12); border-radius: 6px; resize: vertical; }
#enquiry-notes::placeholder { color: #889582; }
.enquiry-preview-card { margin-top: 14px; padding: 0; overflow: hidden; }
.enquiry-preview-card summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 0 16px; cursor: pointer; font-weight: 900; list-style: none; }
.enquiry-preview-card summary::-webkit-details-marker { display: none; }
.enquiry-preview-card summary:before { content: "+"; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 8px; background: #eef3e8; color: #526348; border-radius: 50%; font-weight: 900; }
.enquiry-preview-card[open] summary:before { content: "-"; }
.enquiry-preview-card summary span { display: inline-flex; align-items: center; margin-right: auto; }
.enquiry-preview-card summary small { color: #7d8b77; font-size: 0.72rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
#enquiry-preview { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow: auto; margin: 0 16px 16px; padding: 14px 16px; color: #dce3d8; background: #122016; border: 1px solid rgba(27,40,28,.16); border-radius: 6px; font: 600 0.86rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.enquiry-summary-panel { position: sticky; top: 120px; padding: 24px; }
.enquiry-summary-panel p { color: #64755f; }
.enquiry-summary-points { display: grid; gap: 8px; margin: 18px 0; padding: 16px 0; border-block: 1px solid rgba(27,40,28,.10); }
.enquiry-actions { display: grid; gap: 10px; margin: 18px 0 0; }
.enquiry-actions a, .enquiry-actions button { width: 100%; justify-content: center; min-height: 50px; }
#enquiry-long, #enquiry-copy-status { margin-top: 12px; color: #64755f; font-weight: 700; }
#copy-enquiry-fallback { grid-column: 1 / -1; padding: 18px; background: #fff; border: 1px solid rgba(27,40,28,.10); }
.enquiry-empty-card { max-width: 680px; padding: 34px; margin: 34px 0 90px; }
.enquiry-empty-card p { margin: 12px 0 22px; color: #64755f; }
@media (max-width:600px) {
    .enquiry-hero, .enquiry-layout { grid-template-columns: 1fr; gap: 18px; }
    .quote-help-panel { padding: 18px; }
    .enquiry-main-panel, .enquiry-summary-panel, .enquiry-empty-card { padding: 18px; }
    .enquiry-summary-panel { position: static; }
    .enquiry-panel-head { align-items: flex-start; flex-direction: column; }
    .enquiry-row { grid-template-columns: 86px minmax(0,1fr); gap: 12px; padding: 12px; }
    .enquiry-product-image, .enquiry-row img { width: 86px; height: 74px; }
    .quantity-field { grid-column: 1 / -1; }
    .remove-enquiry { justify-self: start; }
    .enquiry-notice { bottom: calc(90px + env(safe-area-inset-bottom)); }
}

/* Bentex Agro Industries brand mark */
.logo a { display: block; line-height: 0; }
.logo img {
    display: block;
    width: 148px;
    height: 66px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    background: #fff;
}
.footer-col .logo img { width: 132px; height: 60px; }
@media (max-width: 600px) {
    .logo img { width: 132px; height: 58px; }
}

/* Use the supplied circular mark beside the readable wordmark. */
.logo a { display: flex; align-items: center; gap: 10px; }
.logo img.logo-mark,
.footer-col .logo img.logo-mark {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 50%;
    background: transparent;
}
.logo-copy { display: block; }
.logo-copy h2 { margin: 0; }
.logo-copy small { display: block; }
@media (max-width: 600px) {
    .logo img.logo-mark,
    .footer-col .logo img.logo-mark { width: 38px; height: 38px; }
}