/* =====================================================================
   SweeperParts.au – Single Source Stylesheet
   Architecture: ITCSS-ish layering + BEM-inspired naming
   Layers: 1.Settings 2.Tools 3.Generic 4.Base 5.Objects 6.Components 7.Utilities
   ===================================================================== */

/* 1. SETTINGS --------------------------------------------------------- */
:root {
  /* Color system */
  --color-bg: #0f1115;
  --color-surface: #1b1f25;
  --color-surface-alt: #1f242b;
  --color-border: #272d35;
  --color-accent: #ff8c37;
  --color-accent-alt: #ffb347;
  --color-text: #f5f7fa;
  --color-text-muted: #9aa4b1;
  --color-danger: #ff4d4f;
  --color-success: #31c48d;
  --color-warning: #fbbf24;

  /* Typography */
  --font-stack: system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Liberation Mono", monospace;
  --fs-xs: .7rem;
  --fs-sm: .8rem;
  --fs-base: .9rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.6rem,4vw,2.4rem);

  /* Layout */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px -1px rgba(0,0,0,.5);
  --shadow: 0 2px 4px -1px rgba(0,0,0,0.4),0 4px 18px -4px rgba(0,0,0,0.3);
  --max-width: 1200px;
  --gutter: 1.5rem;

  /* Animation */
  --ease: cubic-bezier(.4,0,.2,1);
  --transition: .28s var(--ease);
}

@media (prefers-color-scheme: light) {
  :root {
    --color-bg:#f5f7fa;
    --color-surface:#ffffff;
    --color-surface-alt:#f0f2f5;
    --color-text:#17202a;
    --color-text-muted:#5c6570;
    --color-border:#e2e8f0;
    --shadow: 0 1px 2px rgba(0,0,0,.08),0 4px 16px -4px rgba(0,0,0,.08);
  }
}

/* 2. TOOLS (Mixins via utility classes only) ------------------------- */
/* (Not using preprocessors - utilities provided later) */

/* 3. GENERIC (Reset / Normalize) ------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl { margin:0; padding:0; }
ul, ol { list-style:none; }
img, svg { max-width:100%; height:auto; display:block; }
table { border-collapse: collapse; width:100%; }

/* 4. BASE ------------------------------------------------------------- */
body { font-family: var(--font-stack); background: var(--color-bg); color: var(--color-text); line-height:1.5; font-size: var(--fs-base); -webkit-font-smoothing: antialiased; }
a { color: var(--color-accent); text-decoration:none; transition: color var(--transition); }
a:hover { text-decoration:underline; }
strong { font-weight:600; }
code { font-family: var(--font-mono); font-size: .85em; padding:.15em .35em; background: var(--color-surface-alt); border:1px solid var(--color-border); border-radius: var(--radius-sm); }

main { padding:2rem var(--gutter) 4rem; max-width: var(--max-width); margin:0 auto; }

/* Typography helpers */
h1, .h1 { font-size: var(--fs-xl); font-weight:600; letter-spacing:.5px; line-height:1.15; }
h2, .h2 { font-size:1.35rem; font-weight:600; letter-spacing:.5px; margin-top:2.5rem; margin-bottom:.85rem; }
h3, .h3 { font-size:1.05rem; font-weight:600; letter-spacing:.5px; margin-top:2rem; margin-bottom:.5rem; }
h4, .h4 { font-size:.95rem; font-weight:600; letter-spacing:.5px; margin-top:1.5rem; margin-bottom:.5rem; }
h5, .h5 { font-size:.8rem; text-transform:uppercase; letter-spacing:1px; margin-top:1.25rem; margin-bottom:.4rem; }
p { margin:0 0 1rem; }
small, .text-sm { font-size: var(--fs-sm); }
.muted { color: var(--color-text-muted); }

/* 5. OBJECTS (Layout primitives) ------------------------------------- */
.container { max-width: var(--max-width); margin:0 auto; padding:0 var(--gutter); }
.grid { display:grid; gap:1.5rem; }
.grid-auto { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.flex { display:flex; }
.flex-center { display:flex; align-items:center; justify-content:center; }
.stack > * + * { margin-top: var(--stack-gap,1rem); }
.cluster { display:flex; flex-wrap:wrap; gap:var(--cluster-gap, .75rem); align-items:center; }
.sidebar-layout { display:grid; grid-template-columns: 260px 1fr; gap:2rem; align-items:start; }
@media (max-width: 880px) { .sidebar-layout { grid-template-columns:1fr; } }

/* 6. COMPONENTS ------------------------------------------------------- */
/* HEADER / NAV */
header.site-header { background: var(--color-surface); border-bottom:1px solid var(--color-border); position:sticky; top:0; z-index:50; }
.nav-shell { max-width: var(--max-width); margin:0 auto; padding: .6rem var(--gutter) 0; display:flex; flex-direction:column; gap:.35rem; }
.brand-stack { display:flex; align-items:flex-start; justify-content:space-between; }
.nav-brand { font-size:1.6rem !important; font-weight:700; letter-spacing:.5px; line-height:1; display:inline-block; background:linear-gradient(90deg,var(--color-accent),var(--color-accent-alt)); -webkit-background-clip:text; background-clip:text; color:transparent; position:relative; padding:.15rem .25rem .35rem; }
.nav-brand .brand-accent { color:#fff; mix-blend-mode:normal; background:none; -webkit-background-clip:initial; background-clip:initial; }
.primary-nav { padding:.15rem 0 .9rem !important; border-top:1px solid var(--color-border); }
.primary-nav .menu-row { display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; }
.primary-nav .menu-core { display:flex; gap:1.1rem; flex-wrap:wrap; align-items:center; }
.primary-nav .menu-account { display:flex; gap:.9rem; align-items:center; font-size: var(--fs-xs); }
.primary-nav .menu-account a, .primary-nav .menu-account button { font-size: var(--fs-xs); }
.is-accent { color: var(--color-accent); font-weight:600; }
.account-inline { gap:1.1rem; }
.primary-nav a { text-decoration:none; }
.primary-nav a:hover { text-decoration:none; }
.below-nav { margin-top:-.35rem; padding-bottom: .75rem; }
.below-nav form { max-width:100%; }
.below-nav input { width:480px !important; }
@media (max-width: 880px){
  .primary-nav .menu-row { flex-direction:column; align-items:flex-start; }
  .below-nav input { width:100% !important; }
  .nav-brand { font-size:1.35rem !important; }
}
.top-bar { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; padding:.85rem var(--gutter); }
.logo a { font-weight:600; letter-spacing:.5px; font-size:1rem; }
.search form { position:relative; }
.search input { background: var(--color-surface-alt); border:1px solid var(--color-border); color: var(--color-text); padding:.55rem .75rem; font:inherit; border-radius: var(--radius); width:230px; transition: background var(--transition), border-color var(--transition); }
.search input:focus { outline:none; border-color: var(--color-accent); background:#222830; }
@media (max-width: 680px) { .search input { width:160px; } }

.account-actions a { margin-left:1rem; font-size: var(--fs-sm); font-weight:500; }
.primary-nav { display:flex; gap:1.2rem; padding:.55rem var(--gutter) .9rem; position:relative; justify-content:center; align-items:center; }
.primary-nav .nav-brand { font-weight:600; font-size:.95rem; letter-spacing:.5px; padding:.35rem .4rem; }
.primary-nav .nav-brand:hover { text-decoration:none; }
.primary-nav > a, .primary-nav > .dropdown > span { font-size: var(--fs-sm); font-weight:500; letter-spacing:.5px; position:relative; padding:.35rem .4rem; }
.primary-nav > a:after, .primary-nav > .dropdown > span:after { content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background: var(--color-accent); transition: width var(--transition); }
.primary-nav > a:hover:after, .primary-nav > .dropdown:hover > span:after { width:100%; }

/* Logo image styling */
.brand-with-logo { display:flex; align-items:center; gap:.5rem; }
.site-logo { display:block; height:40px; width:auto; aspect-ratio:auto; object-fit:contain; filter:drop-shadow(0 0 1px rgba(0,0,0,.4)); }
@media (max-width: 880px){
  .site-logo { height:32px; }
  .brand-with-logo { gap:.4rem; }
}
@media (max-width: 520px){
  .site-logo { height:28px; }
}

/* DROPDOWN MEGA MENU */
.dropdown { position:relative; }
.dropdown .menu { position:absolute; left:0; top:100%; display:grid; grid-template-columns:repeat(3, minmax(160px,1fr)); gap:2rem; padding:1.25rem 1.5rem; background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); opacity:0; pointer-events:none; transform: translateY(4px); transition: var(--transition); min-width:640px; z-index: 100; }
.dropdown:hover .menu, .dropdown:focus-within .menu { opacity:1; pointer-events:auto; transform: translateY(0); }
.dropdown h4 { margin-top:0; font-size:.75rem; text-transform:uppercase; letter-spacing:1px; color: var(--color-text-muted); }
.dropdown ul li + li { margin-top:.35rem; }
.dropdown a { font-size: var(--fs-sm); }
@media (max-width: 940px) {
  .primary-nav { flex-wrap:wrap; justify-content:flex-start; }
  .dropdown .menu { position:static; transform:none; opacity:1; pointer-events:auto; min-width:unset; box-shadow:none; border:none; padding:.25rem 0 1rem; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
}

/* Center below-nav search bar */
.below-nav { display:flex; justify-content:center; }

/* Mobile Nav Toggle */
.nav-toggle { display:none; background: var(--color-surface-alt); border:1px solid var(--color-border); width:42px; height:38px; padding:0; border-radius: var(--radius); cursor:pointer; align-items:center; justify-content:center; gap:5px; flex-direction:column; transition: var(--transition); }
.nav-toggle .bar { width:20px; height:2px; background: var(--color-text); border-radius:2px; transition: var(--transition); }
.nav-toggle[aria-expanded="true"] { background: var(--color-accent); border-color: var(--color-accent); }
.nav-toggle[aria-expanded="true"] .bar { background:#101216; }
@media (max-width: 940px) {
  .nav-toggle { display:flex; }
  .primary-nav { position:fixed; inset:60px 0 auto 0; background: var(--color-surface); border-bottom:1px solid var(--color-border); padding:1rem var(--gutter) 1.25rem; flex-wrap:nowrap; flex-direction:column; align-items:flex-start; gap:.75rem; max-height:0; overflow:hidden; transition: max-height var(--transition), padding var(--transition); }
  .primary-nav.is-open { max-height:480px; }
  body.nav-open { overflow:hidden; }
  .dropdown .menu { display:none !important; }
  .dropdown > span { cursor:default; }
}

/* HERO */
.hero { padding:3.5rem 0 2.5rem; background: linear-gradient(145deg,var(--color-surface-alt),rgba(15,17,21,.4)); border:1px solid var(--color-border); border-radius: var(--radius); position:relative; overflow:hidden; }
.hero:before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 90% 10%,rgba(255,140,55,.25),transparent 60%); opacity:.4; }
.hero-inner { max-width:760px; margin:0 auto; padding:0 var(--gutter); position:relative; }
.hero h1 { margin:0 0 1rem; }
.hero p { margin:0 0 1.25rem; color: var(--color-text-muted); font-size: var(--fs-md); }
.cta { display:inline-block; background: var(--color-accent); color:#101216; font-weight:600; padding:.75rem 1.15rem; font-size: var(--fs-sm); border-radius: var(--radius); letter-spacing:.5px; box-shadow:0 0 0 1px #ff9d5a, var(--shadow-sm); transition: var(--transition); }
.cta:hover { filter:brightness(1.05); text-decoration:none; }

/* PRODUCT CARDS */
.product-row, .cards, .related-grid { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.product-card, .make-card { background:linear-gradient(145deg,var(--color-surface-alt),#181b21); padding:.9rem .9rem 1.05rem; border:1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); position:relative; overflow:hidden; display:flex; flex-direction:column; min-height:205px; }
.make-card-media { aspect-ratio: 4 / 3; border:1px solid var(--color-border); background:#222830; border-radius: var(--radius-sm); margin:0 0 .55rem; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.make-card-media img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.05); transition: transform .6s var(--ease); }
.make-card:hover .make-card-media img { transform:scale(1.05); }
.product-card:before, .make-card:before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 120% 0%,rgba(255,140,55,0.18),transparent 60%); opacity:0; transition:opacity .4s; }
.product-card:hover:before, .make-card:hover:before { opacity:1; }
.product-card h3, .make-card h3 { margin:0 0 .35rem; font-size:.85rem; font-weight:600; line-height:1.25; }
.product-card p, .make-card p { margin:.15rem 0 .75rem; font-size:.7rem; color: var(--color-text-muted); }
.product-card .sku { font-size: var(--fs-xs); color: var(--color-text-muted); margin-bottom:.35rem; }
.thumb { background:#222830; aspect-ratio:4/3; border:1px solid var(--color-border); border-radius: var(--radius-sm); margin-bottom:.55rem; display:flex; align-items:center; justify-content:center; font-size: var(--fs-xs); color: var(--color-text-muted); }
.badges { display:flex; gap:.35rem; flex-wrap:wrap; margin:0 0 .45rem; }
.badge { display:inline-block; padding:.25rem .5rem; font-size: var(--fs-xs); background: var(--color-surface-alt); border:1px solid var(--color-border); border-radius: var(--radius-pill); letter-spacing:.5px; }
.badge.quick-ship { background: var(--color-success); border-color: var(--color-success); color:#072b1d; font-weight:600; }
.price { display:inline-block; background: var(--color-accent); color:#101216; font-size: var(--fs-xs); font-weight:600; padding:.35rem .6rem; border-radius:var(--radius-pill); letter-spacing:.5px; box-shadow:0 0 0 1px #ff9d5a,0 2px 4px -1px rgba(0,0,0,0.45); }
button.add-small { margin-top:auto; background: var(--color-surface-alt); border:1px solid var(--color-border); color: var(--color-text); font:inherit; font-size: var(--fs-xs); padding:.45rem .7rem; border-radius: var(--radius); cursor:pointer; transition: var(--transition); }
button.add-small:hover { background: var(--color-accent); color:#101216; border-color: var(--color-accent); }

/* PDP (Product Detail) */
.pdp header { margin-bottom:1.5rem; }
.pdp .sku { font-size: var(--fs-xs); color: var(--color-text-muted); }
.oem-refs { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.6rem; }
.xref { font-size: var(--fs-xs); background: var(--color-surface-alt); border:1px solid var(--color-border); padding:.25rem .45rem; border-radius: var(--radius-pill); letter-spacing:.5px; }
.xref.placeholder { opacity:.5; }
.pdp-main { display:grid; gap:2rem; grid-template-columns: minmax(0,1fr) 320px; align-items:start; }
@media (max-width: 980px) { .pdp-main { grid-template-columns:1fr; } }
.gallery { background: var(--color-surface-alt); border:1px solid var(--color-border); border-radius: var(--radius); min-height:320px; display:flex; align-items:center; justify-content:center; color: var(--color-text-muted); }
.purchase-box { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius); padding:1rem 1.1rem 1.25rem; display:flex; flex-direction:column; gap:.85rem; position:sticky; top:90px; }
.purchase-box form.add-to-cart { display:flex; gap:.5rem; }
.purchase-box input[type=number] { width:70px; background: var(--color-surface-alt); border:1px solid var(--color-border); color: var(--color-text); padding:.5rem .4rem; border-radius: var(--radius); font:inherit; }
.purchase-box button, .buy-now { background: var(--color-accent); border:1px solid var(--color-accent); color:#101216; padding:.6rem .9rem; font:inherit; font-size: var(--fs-sm); font-weight:600; border-radius: var(--radius); cursor:pointer; transition: var(--transition); letter-spacing:.5px; }
.purchase-box button:hover, .buy-now:hover { filter:brightness(1.05); }
.buy-now { background: linear-gradient(90deg,var(--color-accent),var(--color-accent-alt)); border:none; }
.usp-bar { margin-top:.25rem; }
.usp-bar-list { display:flex; flex-direction:column; gap:.4rem; padding:0; margin:0; }
.usp-bar-list li { font-size: var(--fs-xs); color: var(--color-text-muted); display:flex; gap:.4rem; align-items:center; }

/* Tables & Data */
table th, table td { text-align:left; padding:.5rem .6rem; font-size: var(--fs-sm); border-bottom:1px solid var(--color-border); }
table th { font-weight:600; background: var(--color-surface-alt); }

/* Breadcrumb */
.breadcrumb { font-size: var(--fs-xs); margin-bottom:1rem; color: var(--color-text-muted); }

/* Category layout */
.layout-with-filters { display:grid; gap:2rem; grid-template-columns: 250px 1fr; align-items:start; }
@media (max-width: 900px) { .layout-with-filters { grid-template-columns:1fr; } }
.filters { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius); padding:1rem; min-height:160px; font-size: var(--fs-sm); color: var(--color-text-muted); }
.product-grid h1 { margin-top:0; }
.seo-text { margin-top:3rem; max-width:780px; }

/* Trust strip */
.trust-strip { margin:3rem 0 2rem; background: var(--color-surface-alt); border:1px solid var(--color-border); border-radius: var(--radius); padding:.9rem 1.1rem; }
.trust-strip ul { display:flex; flex-wrap:wrap; gap:1.1rem; margin:0; padding:0; font-size: var(--fs-xs); letter-spacing:.5px; color: var(--color-text-muted); }

/* Case studies */
.case-studies .studies { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.study { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius); padding:1rem; font-size: var(--fs-sm); color: var(--color-text-muted); }

/* Email capture */
.email-capture form { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.75rem; }
.email-capture input[type=email] { background: var(--color-surface-alt); border:1px solid var(--color-border); color: var(--color-text); padding:.6rem .65rem; font:inherit; border-radius: var(--radius); min-width:260px; }
.email-capture button { background: var(--color-accent); border:1px solid var(--color-accent); color:#101216; padding:.65rem 1rem; font:inherit; font-size: var(--fs-sm); font-weight:600; border-radius: var(--radius); cursor:pointer; transition: var(--transition); }
.email-capture button:hover { filter:brightness(1.05); }

/* Validation states */
.field { position:relative; }
.field-error { margin-top:.35rem; font-size: var(--fs-xs); color: var(--color-danger); line-height:1.3; }
.is-invalid input, .is-invalid select, .is-invalid textarea { border-color: var(--color-danger) !important; background: linear-gradient(0deg, rgba(255,77,79,.08), rgba(255,77,79,.08)), var(--color-surface-alt); }
.is-valid input, .is-valid select, .is-valid textarea { border-color: var(--color-success) !important; }

/* Toast notifications */
.toast-stack { position:fixed; top:12px; right:12px; display:flex; flex-direction:column; gap:.6rem; width:min(320px, calc(100vw - 24px)); z-index:200; }
.toast { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); padding:.75rem .9rem; font-size: var(--fs-sm); display:flex; align-items:center; gap:.75rem; animation: fade-in .4s var(--ease); position:relative; overflow:hidden; }
.toast:before { content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(255,140,55,.18), transparent 60%); opacity:.25; pointer-events:none; }
.toast--success { border-color: var(--color-success); }
.toast--error { border-color: var(--color-danger); }
.toast--error:before { background:linear-gradient(120deg, rgba(255,77,79,.25), transparent 60%); }
.toast__close { margin-left:auto; background:transparent; border:none; color: var(--color-text-muted); font-size:1.1rem; line-height:1; cursor:pointer; padding:.25rem; border-radius: var(--radius-sm); }
.toast__close:hover { color: var(--color-text); }
.toast.is-leaving { animation: toast-out .3s var(--ease) forwards; }
@keyframes toast-out { to { opacity:0; transform: translateY(-4px); } }

/* Lists inside footer / columns */
footer.site-footer { margin-top:4rem; background: var(--color-surface); border-top:1px solid var(--color-border); padding:2.5rem var(--gutter) 3rem; font-size: var(--fs-xs); color: var(--color-text-muted); }
.footer-columns { display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); max-width: var(--max-width); margin:0 auto 1.5rem; }
.footer-columns h5 { margin:0 0 .6rem; }
.footer-columns ul li + li { margin-top:.4rem; }
.badges li + li { margin-top:.3rem; }
.legal { text-align:center; font-size: var(--fs-xs); letter-spacing:.75px; opacity:.8; }

/* Forms generic */
input, button, select, textarea { font-family:inherit; }
button { border:none; }
button:focus-visible, input:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }

/* Utilities */
.u-hide { display:none !important; }
.u-visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.u-text-center { text-align:center !important; }
.u-mt-0 { margin-top:0 !important; }
.u-mb-0 { margin-bottom:0 !important; }
.u-mt-lg { margin-top:3rem !important; }
.u-gap-sm { --stack-gap:.5rem; }

/* State modifiers */
.is-loading { opacity:.6; pointer-events:none; }
.is-error { border-color: var(--color-danger) !important; }
.is-success { border-color: var(--color-success) !important; }

/* Animations */
@keyframes fade-in { from { opacity:0; transform:translateY(4px);} to { opacity:1; transform:translateY(0);} }
.anim-fade-in { animation: fade-in .5s var(--ease); }

/* Scrollbars (webkit) */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background: #111418; }
::-webkit-scrollbar-thumb { background:#232a33; border:2px solid #111418; border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background:#2d3641; }

/* Print adjustments */
@media print {
  header.site-header, .primary-nav, .purchase-box button, .buy-now, .email-capture, .trust-strip { display:none !important; }
  body { background:#fff; color:#000; }
  a { color:#000; }
}

/* Dark scheme explicit (optional override) */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
}