* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --bg-primary: #eef2f7; --bg-secondary: #f8fafc; --bg-card: #ffffff; --bg-hover: #e6edf5;
    --accent: #2563eb; --accent-hover: #1d4ed8; --accent-glow: rgba(37, 99, 235, 0.15);
    --text-primary: #101828; --text-secondary: #475569; --text-muted: #64748b;
    --border: #e2e8f0; --success: #047857; --warning: #b45309; --danger: #dc2626;
    --radius: 12px; --shadow: 0 4px 20px rgba(15,23,42,0.08);
}
body { font-family: 'Inter', sans-serif; background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; }
/* Themed scrollbars everywhere (page, modal, carousels, selection
   lists) instead of the browser's chunky default, so they stay slim and
   match this palette rather than standing out. Firefox needs
   scrollbar-color set on the element itself (doesn't inherit into
   scroll containers reliably), so this goes on the universal selector
   rather than just :root/body. */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); background-clip: padding-box; }
.header { background: var(--bg-secondary); border-bottom: 1px solid var(--border); padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px; position: sticky; top: 0; z-index: 100; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 12px; font-size: 1.4rem; font-weight: 700; color: var(--accent); white-space: nowrap; cursor: pointer; }
.header-nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.header-utils { display: flex; align-items: center; gap: 14px; }
.nav-link { color: var(--text-secondary); text-decoration: none; font-size: 0.85rem; display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 4px 2px; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav-link:hover { color: var(--accent); }
.nav-link.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.nav-label-short { display: none; }
.search-box { position: relative; flex: 1 1 200px; min-width: 0; max-width: 260px; }
.search-box input { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 10px 16px 10px 38px; color: var(--text-primary); font-size: 0.9rem; width: 100%; }
.search-box input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.search-box i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.cart-btn { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; color: var(--text-primary); cursor: pointer; font-size: 0.9rem; }
.cart-btn:hover { border-color: var(--accent); }
.cart-badge { position: absolute; top: -6px; right: -6px; background: var(--accent); color: #fff; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; }
.btn { padding: 10px 18px; border-radius: 8px; border: none; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); box-shadow: 0 4px 12px var(--accent-glow); }
.btn-secondary { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* AI shopping assistant -- floating bubble + slide-up chat panel.
   Server-rendered only when actually configured (see shop/routes.py's
   storefront() -- ai_enabled), so a disabled/unconfigured assistant
   never even puts this markup on the page. */
@keyframes aiBubbleIn { from { transform: scale(0) rotate(-20deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes aiRing { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 70% { box-shadow: 0 0 0 14px rgba(59,130,246,0); } 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); } }
@keyframes aiPanelIn { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
/* These three deliberately never touch opacity (transform only) --
   content that's about to hold real search results must never depend
   on a CSS animation actually completing to become visible. An
   animation:...both that starts from opacity:0 can, on some mobile
   browsers, fail to fire on a freshly-inserted element and leave it
   stuck invisible forever -- exactly the "cards never show up" failure
   this is guarding against. Transform-only means the worst case if the
   animation never plays at all is just "no slide-in", never "invisible". */
@keyframes aiMsgIn { from { transform: translateY(8px); } to { transform: translateY(0); } }
@keyframes aiCardIn { from { transform: translateY(6px) scale(0.96); } to { transform: translateY(0) scale(1); } }
@keyframes aiDotBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes aiChipIn { from { transform: translateY(4px); } to { transform: translateY(0); } }

.ai-bubble { position: fixed; right: 20px; bottom: 20px; width: 58px; height: 58px; border-radius: 50%; background: var(--accent); color: #fff; border: none; cursor: pointer; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; z-index: 200; transition: transform 0.2s ease, background 0.2s ease; animation: aiBubbleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both, aiRing 2.2s ease-out 0.6s 3; }
.ai-bubble:hover { background: var(--accent-hover); transform: translateY(-3px) scale(1.05); }
.ai-bubble:active { transform: translateY(-1px) scale(0.96); }
.ai-bubble i { position: absolute; transition: transform 0.25s ease, opacity 0.2s ease; }
.ai-bubble .fa-xmark { opacity: 0; transform: rotate(-45deg) scale(0.5); }
.ai-bubble .fa-comment-dots { opacity: 1; transform: rotate(0) scale(1); }
.ai-bubble.open .fa-comment-dots { opacity: 0; transform: rotate(45deg) scale(0.5); }
.ai-bubble.open .fa-xmark { opacity: 1; transform: rotate(0) scale(1); }
.ai-bubble-dot { position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--danger); border: 2px solid var(--bg-primary); transition: opacity 0.2s ease, transform 0.2s ease; }
.ai-bubble-dot.hidden { opacity: 0; transform: scale(0); }

.ai-panel { position: fixed; right: 20px; bottom: 90px; width: 380px; max-width: calc(100vw - 32px); height: 520px; max-height: calc(100vh - 130px); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); z-index: 199; display: flex; flex-direction: column; overflow: hidden; transform-origin: bottom right; opacity: 0; transform: translateY(16px) scale(0.96); visibility: hidden; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s; }
.ai-panel.open { opacity: 1; transform: translateY(0) scale(1); visibility: visible; pointer-events: auto; transition: opacity 0.22s ease, transform 0.22s ease; animation: aiPanelIn 0.28s cubic-bezier(0.16, 1, 0.3, 1); }
.ai-panel-header { padding: 14px 16px; background: var(--bg-card); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.ai-panel-header .ai-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; flex-shrink: 0; position: relative; }
.ai-panel-header .ai-avatar::after { content: ''; position: absolute; bottom: -1px; right: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--success); border: 2px solid var(--bg-card); }
.ai-panel-header .ai-title { flex: 1; min-width: 0; }
.ai-panel-header strong { font-size: 0.92rem; display: block; }
.ai-panel-header span { display: block; font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-panel-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease; flex-shrink: 0; }
.ai-panel-close:hover { background: var(--bg-hover); color: var(--text-primary); }

/* min-height: 0 overrides the flex-item default of min-height: auto --
   without it, this box grows to fit all its content (every message +
   product row) instead of clipping to the space flex:1 actually gives
   it, so it overflows the panel's own overflow:hidden and the
   scrollbar here never gets a chance to activate -- new content (like
   a product row) can end up clipped and unreachable by scrolling. */
.ai-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
/* flex-shrink: 0 on every direct child of #aiMessages (this, the typing
   indicator, chips, and the product row below) -- without it, once the
   accumulated messages don't fit in the available space, flexbox's
   default shrink behavior compresses every child smaller to force it
   all to fit, instead of leaving them at natural size and letting the
   container (which has its own overflow-y: auto) scroll. That's what
   squashed the product row down to a sliver instead of showing full
   cards with a scrollbar. */
.ai-msg { flex-shrink: 0; max-width: 88%; font-size: 0.85rem; line-height: 1.5; padding: 10px 13px; border-radius: 14px; white-space: pre-wrap; animation: aiMsgIn 0.25s ease both; }
.ai-msg.user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.ai-msg.bot { align-self: flex-start; background: var(--bg-card); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.ai-typing-dots { flex-shrink: 0; align-self: flex-start; display: flex; align-items: center; gap: 4px; padding: 12px 15px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; border-bottom-left-radius: 4px; animation: aiMsgIn 0.25s ease both; }
.ai-typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: aiDotBounce 1.1s ease-in-out infinite; }
.ai-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.ai-typing-dots span:nth-child(3) { animation-delay: 0.3s; }

.ai-chips { flex-shrink: 0; align-self: flex-start; display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; }
.ai-chip { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); font-size: 0.76rem; padding: 6px 12px; border-radius: 20px; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; animation: aiChipIn 0.25s ease both; }
.ai-chip:nth-child(2) { animation-delay: 0.05s; }
.ai-chip:nth-child(3) { animation-delay: 0.1s; }
.ai-chip:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }

.ai-products { flex-shrink: 0; align-self: flex-start; max-width: 100%; display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; }
.ai-product-card { flex: 0 0 130px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 8px; cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; animation: aiCardIn 0.3s ease both; scroll-snap-align: start; }
.ai-product-card:nth-child(2) { animation-delay: 0.05s; }
.ai-product-card:nth-child(3) { animation-delay: 0.1s; }
.ai-product-card:nth-child(4) { animation-delay: 0.15s; }
.ai-product-card:nth-child(n+5) { animation-delay: 0.2s; }
.ai-product-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.25); }
.ai-product-card .thumb { width: 100%; height: 64px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 1.3rem; margin-bottom: 6px; background: var(--bg-primary); border-radius: 6px; overflow: hidden; }
.ai-product-card .thumb img { width: 100%; height: 100%; object-fit: contain; }
.ai-product-card .name { font-size: 0.72rem; line-height: 1.3; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ai-product-card .price { font-size: 0.78rem; font-weight: 700; color: var(--accent); }
.ai-product-card .avail { font-size: 0.68rem; color: var(--warning); }

.ai-input-row { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); background: var(--bg-card); align-items: flex-end; }
.ai-input-row input { flex: 1; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 20px; padding: 10px 16px; color: var(--text-primary); font-size: 0.85rem; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.ai-input-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.ai-input-row button { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff; border: none; cursor: pointer; flex-shrink: 0; transition: background 0.15s ease, transform 0.1s ease; }
.ai-input-row button:hover:not(:disabled) { background: var(--accent-hover); transform: scale(1.06); }
.ai-input-row button:active:not(:disabled) { transform: scale(0.92); }
.ai-input-row button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Respect reduced-motion: keep the interactions, drop the flourish. */
@media (prefers-reduced-motion: reduce) {
    .ai-bubble, .ai-panel, .ai-msg, .ai-typing-dots span, .ai-chip, .ai-product-card { animation: none !important; }
    .ai-panel { transition: opacity 0.15s ease, visibility 0s linear 0.15s; }
    .ai-bubble, .ai-product-card, .ai-input-row button { transition: none; }
}
@media (max-width: 480px) {
    /* Genuinely fullscreen, not "nearly" -- edge-to-edge with no gap on
       any side means there's no sliver of the page behind it left for
       the storefront's own product grid to show through. top:0/bottom:0
       (rather than a fixed height) sizes it to whatever the browser
       currently considers the visible area; the explicit dvh height is
       layered on top for browsers that support it, which -- unlike vh --
       tracks that visible area even while the on-screen keyboard is up. */
    .ai-panel { top: 0; left: 0; right: 0; bottom: 0; width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; }
    .ai-bubble { right: 16px; bottom: 16px; }
    /* The panel is genuinely fullscreen here, so its own bottom-right
       corner is exactly where this floating toggle sits -- open, it was
       overlapping the send button directly. The panel already has its
       own close (X) in the header once open, so the floating bubble is
       redundant in that state anyway; just hide it. */
    .ai-bubble.open { display: none; }
}
/* Hero vehicle filter — marque/modèle/motorisation right up top instead
   of marketing slides, since finding parts for *their* car is what a
   visitor is actually here to do. Feeds the same vf* state and
   vfSelectVehicle() the full "Trouver ma voiture" wizard uses (see
   hvfSubmit), so results are identical regardless of entry point. */
.hero-vehicle-filter { text-align: center; padding: 48px 24px 40px; border-bottom: 1px solid var(--border); }
.hvf-icon { font-size: 2.6rem; color: var(--accent); margin-bottom: 14px; opacity: 0.9; }
.hero-vehicle-filter h1 { font-size: 2.1rem; margin-bottom: 10px; text-wrap: balance; }
.hero-vehicle-filter > p { color: var(--text-secondary); font-size: 1rem; max-width: 560px; margin: 0 auto 28px; }
.hvf-selects { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; max-width: 820px; margin: 0 auto; }
.hvf-selects select { flex: 1 1 180px; min-width: 150px; max-width: 220px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; color: var(--text-primary); font-size: 0.9rem; cursor: pointer; }
.hvf-selects select:disabled { opacity: 0.55; cursor: not-allowed; }
.hvf-selects select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.hvf-selects button:disabled { opacity: 0.5; cursor: not-allowed; }
.hvf-vin-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 0.82rem; color: var(--text-muted); cursor: pointer; background: none; border: none; font-family: inherit; }
.hvf-vin-link:hover { color: var(--accent); }
@media (max-width: 640px) {
    .hero-vehicle-filter { padding: 32px 16px 28px; }
    .hero-vehicle-filter h1 { font-size: 1.4rem; }
    .hvf-selects select, .hvf-selects button { flex: 1 1 100%; max-width: none; }
}

/* Category quick-links — horizontally scrollable icon row, common
   pattern on parts sites (autodoc, oscaro, piecesauto24) for jumping
   straight into a part family. These are real categories (same tree
   POS uses) with live counts, not just a shortcut into the vehicle
   finder — clicking one filters the grid below immediately. */
.quick-categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px; padding: 4px 2px 16px; }
.quick-cat { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 10px; text-align: center; cursor: pointer; transition: all 0.2s; }
.quick-cat:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); }
.quick-cat.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.quick-cat i { font-size: 1.5rem; color: var(--accent); margin-bottom: 10px; display: block; }
.quick-cat span { font-size: 0.78rem; color: var(--text-secondary); display: block; }
.quick-cat .quick-cat-count { font-size: 0.68rem; color: var(--text-muted); margin-top: 3px; display: block; }
/* Drill-down row: the selected category's subcategories, one level
   down, deliberately smaller/pill-shaped so the hierarchy is legible
   at a glance rather than looking like more top-level choices. */
.quick-subcats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; padding: 0 2px 20px; }
.quick-subcat { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 20px; padding: 8px 14px; cursor: pointer; transition: all 0.2s; font-size: 0.8rem; color: var(--text-secondary); }
.quick-subcat:hover { border-color: var(--accent); color: var(--accent); }
.quick-subcat.active { border-color: var(--accent); background: var(--accent-glow); color: var(--accent); font-weight: 600; }
.quick-subcat .quick-cat-count { font-size: 0.72rem; color: var(--text-muted); }
.quick-subcat.active .quick-cat-count { color: inherit; }
.quick-subcat.all { font-weight: 600; }
.qs-label { display: inline-flex; align-items: center; gap: 6px; }

/* Generic horizontal product carousel (featured products use this;
   reusable anywhere else a curated row makes more sense than a grid). */
.carousel-row { position: relative; }
.carousel-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 2px 12px; }
.carousel-track .product-card { flex: 0 0 220px; scroll-snap-align: start; }
.carousel-nav { display: flex; gap: 8px; }
.carousel-nav button { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.carousel-nav button:hover { border-color: var(--accent); color: var(--accent); }
/* 1200px left huge dead black gutters on any screen wider than a small
   laptop (a 1920px monitor was using well under two-thirds of its
   width) -- .product-grid/.parts-grid already use auto-fill/minmax so
   they just add more columns as width grows, no other change needed.
   1800px still leaves a little breathing room on ultrawide monitors
   instead of stretching all the way to the edges. */
.container { max-width: 1800px; margin: 0 auto; padding: 40px 32px; }
.section-title { font-size: 1.3rem; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.section-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.section-title-row .section-title { margin-bottom: 0; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.product-card { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 10px; transition: all 0.2s; cursor: pointer; }
.featured-badge { position: absolute; top: 10px; left: 10px; z-index: 2; font-size: 0.66rem; font-weight: 700; padding: 3px 9px; border-radius: 20px; display: flex; align-items: center; gap: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.featured-badge.advertised { background: var(--accent); color: #fff; }
.featured-badge.trending { background: var(--warning); color: #fff; }
.featured-badge.new { background: var(--success); color: #fff; }
.product-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.product-icon { width: 100%; height: 90px; background: var(--bg-primary); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 2rem; }
.product-name { font-weight: 600; font-size: 0.95rem; }
.product-sku { color: var(--text-muted); font-size: 0.75rem; }
.product-price { font-size: 1.1rem; font-weight: 700; color: var(--accent); }
.product-demand { font-size: 0.8rem; color: var(--warning); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-state i { font-size: 2.5rem; margin-bottom: 12px; opacity: 0.5; }
.results-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -8px 0 16px; font-size: 0.82rem; color: var(--text-secondary); }
.filter-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 4px 8px 4px 12px; font-size: 0.78rem; color: var(--text-primary); }
.filter-chip i { cursor: pointer; color: var(--text-muted); font-size: 0.7rem; padding: 3px; border-radius: 50%; }
.filter-chip i:hover { color: var(--danger); background: var(--bg-hover); }
.search-suggestions { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); z-index: 150; padding: 10px; display: none; }
.search-suggestions.show { display: block; }
.search-suggestions .label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding: 0 2px 8px; }
.search-suggestions .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.search-suggestions .chips span { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 20px; padding: 6px 12px; font-size: 0.78rem; cursor: pointer; color: var(--text-secondary); transition: all 0.15s; }
.search-suggestions .chips span:hover { border-color: var(--accent); color: var(--accent); }
/* Product ratings/comments -- shared between the SSR /produit/<id> page
   (server-rendered, real content for crawlers) and the client-side
   product modal (openProductDetail), same class names so one set of
   rules styles both. */
.stars { color: var(--warning); white-space: nowrap; letter-spacing: 1px; }
.rating-summary { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.rating-summary .avg { font-size: 1.25rem; font-weight: 700; }
.rating-summary .count { color: var(--text-muted); font-size: 0.85rem; }
.reviews-section { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); }
/* #pageProductReviews is appended as a sibling after .modal-header/
   .modal-body (or the plain-fallback's own padded div) inside the same
   vfCard box (see openProductDetail), not nested inside their own
   padding, so it needs its own matching side padding to line up
   instead of touching the card's edges directly. */
.review-host { padding: 0 32px 32px; }
@media (max-width: 768px) { .review-host { padding: 0 20px 20px; } }
.reviews-section h3 { font-size: 1.05rem; margin-bottom: 14px; }
.review-empty { color: var(--text-muted); font-size: 0.85rem; padding: 4px 0 16px; }
.review-item { padding: 12px 0; border-bottom: 1px solid var(--border); }
.review-item:last-child { border-bottom: none; }
.review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.review-author { font-weight: 600; font-size: 0.86rem; }
.review-date { color: var(--text-muted); font-size: 0.75rem; }
.review-comment { color: var(--text-secondary); font-size: 0.87rem; line-height: 1.55; }
.review-form { margin-top: 18px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.review-form input, .review-form select, .review-form textarea { width: 100%; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; color: var(--text-primary); font-size: 0.88rem; font-family: inherit; margin-bottom: 10px; }
.review-form textarea { resize: vertical; min-height: 64px; }
.review-form input:focus, .review-form select:focus, .review-form textarea:focus { outline: none; border-color: var(--accent); }
.review-form-msg { font-size: 0.85rem; margin-top: 10px; }
.review-form-as { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 12px; }
.review-form-as strong { color: var(--text-primary); }
.star-picker { display: flex; gap: 6px; margin-bottom: 12px; }
.star-picker i { font-size: 1.5rem; color: var(--border); cursor: pointer; transition: color 0.1s, transform 0.1s; }
.star-picker i:hover { transform: scale(1.12); }
.star-picker i.fas { color: var(--warning); }
/* Honeypot: a real, tabbable-off, focusable-off field left for bots that
   fill in every input blindly -- display:none is skipped by some bots
   specifically because it's the obvious tell, this isn't. */
.review-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 1000; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.active { display: flex; }
.modal { background: var(--bg-secondary); border-radius: var(--radius); padding: 28px; width: 100%; max-width: 420px; max-height: 85vh; overflow-y: auto; position: relative; box-shadow: var(--shadow); }
.modal.modal-wide { max-width: 640px; }
.modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; color: var(--text-muted); font-size: 1.1rem; cursor: pointer; z-index: 10; }
.modal-close:hover { color: var(--text-primary); }

/* Product drill-down markup/classes, identical to the catalog browser's
   article view (app/templates/index.html) -- same CSS, same functions
   (_renderArticleDetailHtml etc., copied verbatim below), so a linked
   product looks the same whether you got there from the shop or from
   /parts-finder. Product views themselves are real pages now, not a
   modal (see openProductDetail), rendered via vfCard() -- the same
   plain bordered-box wrapper the vehicle-finder wizard already used for
   this content as page content -- so .modal-header/.modal-body below
   are just the article's own internal header/body styling, no longer
   tied to an actual .modal. */
.modal-header { background: linear-gradient(135deg, var(--bg-card), var(--bg-secondary)); padding: 32px; border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }
.modal-header h3 { font-size: 1.5rem; margin-bottom: 8px; }
.modal-header .breadcrumb { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 16px; }
.modal-header .breadcrumb a { color: var(--accent); cursor: pointer; }
.modal-body { padding: 32px; }
.spec-badge { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 6px; padding: 6px 12px; font-size: 0.8rem; color: var(--text-secondary); }
.spec-badge i { color: var(--accent); margin-right: 6px; }
.article-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 32px; }
@media (max-width: 900px) { .article-layout { grid-template-columns: 1fr; } }
.gallery-container { background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.gallery-main { width: 100%; height: 350px; display: flex; align-items: center; justify-content: center; background: white; border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
.gallery-main img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gallery-main .no-image { color: var(--text-muted); font-size: 4rem; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
.gallery-thumb { width: 100%; height: 70px; background: white; border: 2px solid var(--border); border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: all 0.2s; }
.gallery-thumb:hover { border-color: var(--accent); }
.gallery-thumb.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }
.gallery-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gallery-thumb .thumb-placeholder { color: var(--text-muted); font-size: 1.5rem; }
.thumb-pdf, .media-item-pdf { color: #e74c3c; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.thumb-pdf i, .media-item-pdf i { font-size: 1.6rem; }
.thumb-pdf span { font-size: 0.6rem; font-weight: 600; }
.media-item-pdf { height: 140px; background: var(--bg-card); }
.media-item-pdf span { font-size: 0.7rem; }
.article-info-panel { display: flex; flex-direction: column; gap: 16px; }
.info-block { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.info-block h5 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 12px; }
.info-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.info-row:last-child { border-bottom: none; }
.info-row .label { color: var(--text-secondary); }
.info-row .value { color: var(--text-primary); font-weight: 500; text-align: right; max-width: 60%; word-break: break-word; }
.tabs { display: flex; gap: 4px; margin-bottom: 24px; background: var(--bg-card); border-radius: 10px; padding: 4px; border: 1px solid var(--border); flex-wrap: wrap; }
.tab { padding: 10px 20px; border-radius: 8px; font-size: 0.85rem; cursor: pointer; transition: all 0.2s; color: var(--text-secondary); border: none; background: none; display: flex; align-items: center; gap: 8px; }
.tab:hover { color: var(--text-primary); }
.tab.active { background: var(--accent); color: white; font-weight: 600; }
.tab-content { display: none; }
.tab-content.active { display: block; }
.oem-list { display: flex; flex-wrap: wrap; gap: 8px; }
.oem-badge { background: var(--bg-primary); border: 1px solid var(--accent); border-radius: 6px; padding: 8px 14px; font-size: 0.85rem; color: var(--accent); font-family: monospace; }
.compatible-table { width: 100%; border-collapse: collapse; }
.compatible-table th { background: var(--bg-card); padding: 12px; text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); border-bottom: 2px solid var(--border); }
.compatible-table td { padding: 12px; font-size: 0.85rem; border-bottom: 1px solid var(--border); }
.compatible-table tr:hover td { background: var(--bg-hover); }
/* Compatible-vehicles list grouped by model, collapsed by default --
   real fitment lists run 100+ rows one engine variant at a time (same
   model repeated many times), unreadable as one long flat table. */
.compat-group { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.compat-group-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: var(--bg-card); border: none; cursor: pointer; text-align: left; font-size: 0.85rem; color: var(--text-primary); }
.compat-group-toggle:hover { background: var(--bg-hover); }
.compat-group-toggle .mfr { color: var(--accent); font-weight: 700; margin-right: 6px; }
.compat-group-toggle .count { color: var(--text-muted); font-size: 0.75rem; font-weight: 400; }
.compat-group-toggle i { color: var(--text-muted); transition: transform 0.15s ease; flex-shrink: 0; }
.compat-group.open .compat-group-toggle i { transform: rotate(180deg); }
.compat-group-body { display: none; }
.compat-group.open .compat-group-body { display: block; }
.compat-group-body table { width: 100%; border-collapse: collapse; }
.compat-group-body td { padding: 10px 14px; font-size: 0.82rem; border-top: 1px solid var(--border); }
.compat-group-body tr:hover td { background: var(--bg-hover); }
/* Equivalence tab -- other brands' parts that cross-reference to this
   article's own OEM number (same part, different supplier). */
.equiv-ref { font-weight: 700; }
.equiv-name { color: var(--text-muted); font-size: 0.78rem; margin-top: 2px; }
.equiv-price { color: var(--accent); font-weight: 700; }
.equiv-unavailable { background: rgba(239,68,68,0.12); color: var(--danger); border-radius: 20px; padding: 5px 14px; font-size: 0.76rem; font-weight: 600; display: inline-block; white-space: nowrap; }
.media-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.media-item { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; cursor: pointer; transition: all 0.2s; }
.media-item:hover { border-color: var(--accent); transform: translateY(-2px); }
.media-item img { width: 100%; height: 140px; object-fit: contain; background: white; }
.media-item .media-type { padding: 8px; font-size: 0.72rem; color: var(--text-muted); text-align: center; text-transform: uppercase; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 6px; }
.form-group input, .form-group textarea { width: 100%; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; color: var(--text-primary); font-size: 0.9rem; font-family: inherit; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.form-group textarea { resize: vertical; min-height: 100px; }
.auth-switch { text-align: center; margin-top: 12px; font-size: 0.85rem; color: var(--text-muted); }
.auth-switch a { color: var(--accent); cursor: pointer; text-decoration: none; }
.cart-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.cart-item .item-info { flex: 1; min-width: 0; }
.cart-item .item-name { font-size: 0.9rem; font-weight: 600; }
.cart-item .item-meta { font-size: 0.75rem; color: var(--text-muted); }
.qty-controls { display: flex; align-items: center; gap: 6px; }
.qty-controls button { width: 24px; height: 24px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg-primary); color: var(--text-primary); cursor: pointer; }
.cart-totals { padding: 16px 0 4px; margin-top: 8px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; font-weight: 700; font-size: 1.05rem; }
.cart-note { font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; }
table.orders-table { width: 100%; border-collapse: collapse; }
table.orders-table th { text-align: left; font-size: 0.75rem; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); padding: 8px 6px; }
table.orders-table td { padding: 10px 6px; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.specs-table { width: 100%; border-collapse: collapse; }
.specs-table tr { border-bottom: 1px solid var(--border); }
.specs-table td { padding: 12px 0; font-size: 0.85rem; }
.specs-table td:first-child { color: var(--text-secondary); width: 45%; font-weight: 500; }
.specs-table td:last-child { color: var(--text-primary); }
.notification { position: fixed; top: 80px; right: 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 20px; display: flex; align-items: center; gap: 10px; z-index: 2000; box-shadow: var(--shadow); }
.notification.error { border-color: var(--danger); }
.notification.error i { color: var(--danger); }
/* Desktop fallback panel for "Partager" when the browser can't hand an
   image file to the native share sheet (see shareProductPriceCard) --
   its own component rather than reusing .notification since it needs
   to hold a link and stay up longer than a toast. */
.share-toast { position: fixed; top: 80px; right: 20px; left: 20px; margin-left: auto; max-width: 320px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 16px 40px 16px 18px; z-index: 2100; box-shadow: var(--shadow); animation: shareToastIn 0.2s ease-out; }
.share-toast p { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 12px; }
.share-toast .btn { width: 100%; justify-content: center; }
.share-toast-close { position: absolute; top: 10px; right: 12px; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.95rem; padding: 4px; }
@keyframes shareToastIn { from { transform: translateY(-10px); } to { transform: translateY(0); } }
footer { text-align: center; padding: 32px; color: var(--text-muted); font-size: 0.8rem; border-top: 1px solid var(--border); }
footer .footer-contact { margin-top: 6px; }
.contact-page { max-width: 720px; margin: 0 auto; }
.contact-info { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 32px; }
.contact-info-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; flex: 1; min-width: 200px; display: flex; align-items: flex-start; gap: 12px; }
.contact-info-item i { color: var(--accent); font-size: 1.1rem; margin-top: 2px; }
.contact-info-item .label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px; }
.contact-form-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

/* Vehicle finder (in-page catalog drill-down) — same classes/markup as
   the standalone catalog browser (index.html) so the step UI is
   identical, just rendered into the modal instead of a sidebar+page. */
.content-header { margin-bottom: 20px; }
.content-header h2 { font-size: 1.3rem; margin-bottom: 4px; }
.content-header p { color: var(--text-secondary); font-size: 0.88rem; }
.selection-section { margin-bottom: 20px; }
.selection-label { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.selection-label i { color: var(--accent); font-size: 0.8rem; }
.selection-list { max-height: 400px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-primary); }
.selection-item { padding: 10px 14px; cursor: pointer; transition: all 0.2s; border-bottom: 1px solid var(--border); font-size: 0.85rem; display: flex; align-items: center; gap: 10px; }
.selection-item:last-child { border-bottom: none; }
.selection-item:hover { background: var(--bg-hover); color: var(--accent); }
.selection-item.selected { background: var(--accent-glow); color: var(--accent); border-left: 3px solid var(--accent); }
.selection-group-header { padding: 9px 14px 5px; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); background: var(--bg-hover); border-bottom: 1px solid var(--border); }
.selection-item-grouped { padding-left: 26px; }
.selection-item img { width: 32px; height: 32px; object-fit: contain; border-radius: 4px; }
.selection-item .item-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
/* Inline, not .item-sub's own line -- this sits right next to the model
   name (see modelYearRangeLabel), a body-style variant's production
   window is a short disambiguator, not a detail worth its own row. */
.model-year-label { font-size: 0.82em; color: var(--text-muted); font-weight: 400; }
.selection-filter { width: 100%; padding: 10px 12px; margin-bottom: 10px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-size: 0.85rem; }
.selection-filter:focus { outline: none; border-color: var(--accent); }
.selection-empty { padding: 14px; text-align: center; color: var(--text-muted); font-size: 0.8rem; }
.vf-offline-notice { margin-bottom: 16px; padding: 10px 14px; border-radius: var(--radius); background: var(--accent-glow); color: var(--text-secondary); font-size: 0.85rem; }
.vf-offline-notice i { color: var(--accent); margin-right: 6px; }
.vehicle-info-card { background: linear-gradient(135deg, var(--bg-card), var(--bg-secondary)); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 24px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.vehicle-info-details h3 { font-size: 1.15rem; margin-bottom: 8px; }
.vehicle-info-details .specs { display: flex; flex-wrap: wrap; gap: 12px; }
.parts-view-toggle { display: flex; gap: 6px; margin: 4px 0 16px; }
.parts-view-toggle button { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 6px 12px; color: var(--text-secondary); font-size: 0.78rem; cursor: pointer; transition: all 0.2s; }
.parts-view-toggle button:hover { border-color: var(--accent); color: var(--text-primary); }
.parts-view-toggle button.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.mfr-quick-filter { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 4px 2px 12px; margin-bottom: 8px; scrollbar-width: thin; }
.mfr-quick-filter button { flex: 0 0 auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 10px 16px; color: var(--text-secondary); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.mfr-quick-filter button:hover { border-color: var(--accent); color: var(--text-primary); }
.mfr-quick-filter button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.mfr-quick-filter button .cat-count { margin-left: 6px; opacity: 0.7; font-weight: 400; }
.parts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.part-card-compact { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 8px; cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; gap: 6px; }
.part-card-compact:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(0,0,0,0.18); }
.part-card-compact .thumb { width: 100%; height: 64px; background: var(--bg-primary); border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.part-card-compact .thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.part-card-compact .thumb i { font-size: 1.2rem; color: var(--text-muted); }
.part-card-compact .pc-name { font-size: 0.74rem; line-height: 1.25; max-height: 2.5em; overflow: hidden; }
.part-card-compact .pc-meta { font-size: 0.68rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-brand { display: inline-block; align-self: flex-start; background: var(--bg-primary); border: 1px solid var(--border); color: var(--accent); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; }
.pc-availability { font-size: 0.68rem; color: var(--warning); display: flex; align-items: center; gap: 4px; }
.pc-price { font-size: 0.85rem; font-weight: 700; color: var(--accent); }
.pc-stock { font-size: 0.68rem; color: var(--success); }
.pc-quick-add { margin-top: auto; background: var(--accent); color: #fff; border: none; border-radius: 6px; padding: 6px 0; font-size: 0.72rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background 0.2s; }
.pc-quick-add:hover { background: var(--accent-hover); }
.vf-back-btn { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 0.85rem; display: flex; align-items: center; gap: 6px; margin-bottom: 16px; padding: 6px 0; }
.vf-back-btn:hover { text-decoration: underline; }
.loading { display: flex; align-items: center; justify-content: center; padding: 40px; color: var(--text-muted); }
.spinner { width: 20px; height: 20px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin-right: 12px; }
@keyframes spin { to { transform: rotate(360deg); } }
.plate-search { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 24px; }
.plate-search h4 { font-size: 0.9rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.plate-search h4 i { color: var(--accent); }
.vin-input-container { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.vin-input-container input { flex: 1; min-width: 200px; text-transform: uppercase; letter-spacing: 1px; font-family: monospace; font-size: 1rem; }
.vin-counter { font-size: 0.85rem; color: var(--text-muted); font-family: monospace; min-width: 40px; text-align: center; }
.vin-counter.valid { color: var(--success); }
.vin-info { margin-top: 12px; padding: 12px; background: var(--bg-primary); border-radius: 8px; font-size: 0.85rem; color: var(--text-secondary); }
.vin-info i { color: var(--accent); margin-right: 8px; }
@media (max-width: 768px) {
    .container { padding: 24px 16px; }
    .modal-header { padding: 20px; }
    .modal-body { padding: 20px; }
}
@media (max-width: 480px) {
    .header { padding: 10px 14px; gap: 8px 12px; }
    .logo span { font-size: 1.1rem; }
    /* Collapse to two tight rows instead of one-item-per-row: logo +
       nav share row 1 (shortened nav-finder label so it actually fits),
       search/account/cart share row 2 (forced onto its own line by
       flex-basis:100% on a wrapping flex container) -- was 5 stacked
       rows of near-empty width before reaching any page content. */
    .header-nav { gap: 10px; }
    .nav-link { font-size: 0.78rem; gap: 4px; }
    .nav-label-full { display: none; }
    .nav-label-short { display: inline; }
    .header-utils { flex: 1 1 100%; gap: 8px; }
    .search-box { flex: 1 1 auto; max-width: none; }
    .search-box input { padding: 8px 12px 8px 34px; font-size: 0.85rem; }
    #accountArea { display: flex; }
    #accountArea .btn { padding: 8px 10px; font-size: 0.78rem; white-space: nowrap; }
    #accountArea .btn span, #accountArea .btn { gap: 5px; }
    .cart-btn { padding: 8px 11px; flex-shrink: 0; }
    .container { padding: 16px 12px; }
    .section-title { font-size: 1.1rem; }
    .contact-form-card { padding: 18px; }
    .quick-categories { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
    .quick-cat { padding: 14px 8px; }
    .quick-subcats { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}
@media (max-width: 600px) {
    input, select, textarea { font-size: 16px; }
}