/* ===== HANN Catalog Search ===== */
/* Uses existing HANN design tokens: --hann, --ink, --txt, --line, --muted, etc. */

/* ===== NAV SEARCH BOX (prominent + user-friendly) ===== */
/* Always WHITE background regardless of theme — requested */
.nav-search,
[data-theme="light"] .nav-search,
[data-theme="dark"] .nav-search,
.nav.scrolled .nav-search,
[data-theme="light"] .nav.scrolled .nav-search,
[data-theme="dark"] .nav.scrolled .nav-search{
  position:relative;
  display:flex;align-items:center;gap:2px;
  width:260px;max-width:32vw;
  height:42px;
  margin-right:6px;
  background:#ffffff !important;
  border:1.5px solid rgba(22,17,15,.18) !important;
  border-radius:999px;
  padding:0 4px 0 14px;
  transition:border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), width .25s var(--ease);
}
.nav-search .ns-ico{ color:#5d564c !important }
.nav-search input{ color:#16110f !important; background:transparent !important }
.nav-search input::placeholder{ color:#8a8276 !important }
.nav-search:hover{ border-color:var(--hann-2) }
.nav-search:focus-within{
  border-color:var(--hann);
  box-shadow:0 0 0 4px rgba(181,0,80,.18), 0 10px 24px -10px rgba(181,0,80,.30);
}
@media (max-width:1180px){
  .nav-search{ width:44px; padding:0; justify-content:center; border-radius:50% }
  .nav-search input,.nav-search .ns-clear,.nav-search .ns-submit{ display:none }
  .nav-search.is-open{ width:260px; padding:0 4px 0 14px; border-radius:999px; justify-content:flex-start }
  .nav-search.is-open input{ display:block }
  .nav-search.is-open .ns-submit{ display:inline-flex }
  .nav-search.is-open.has-q .ns-clear{ display:inline-flex }
}
@media (max-width:760px){ .nav-search{ display:none } }
.nav-search svg.ns-ico{
  width:16px;height:16px;flex-shrink:0;color:#5d564c;
  stroke-width:1.9;
}
.nav-search input{
  flex:1;min-width:0;height:100%;
  background:transparent;border:none;outline:none;
  font:500 .82rem/1 var(--body);color:var(--txt);
  padding:0 8px;
  letter-spacing:.005em;
}
.nav-search input::placeholder{color:var(--faint);font-weight:400}
.nav-search .ns-clear{
  width:26px;height:26px;border-radius:50%;
  display:none;align-items:center;justify-content:center;
  color:var(--muted);background:transparent;cursor:pointer;border:none;flex-shrink:0;
  transition:color .2s,background .2s;
}
.nav-search.has-q .ns-clear{display:inline-flex}
.nav-search .ns-clear:hover{color:var(--txt);background:rgba(255,255,255,.08)}
[data-theme="light"] .nav-search .ns-clear:hover{background:rgba(22,17,15,.06)}
.nav-search .ns-clear svg{width:11px;height:11px}

/* Pink search SUBMIT button — always visible, hidden only on icon-only compact mode */
.nav-search .ns-submit{
  width:30px;height:30px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--hann);color:#fff;border:none;cursor:pointer;flex-shrink:0;
  margin-left:4px;
  transition:background .2s, transform .25s var(--settle), box-shadow .25s;
  box-shadow:0 6px 14px -6px rgba(181,0,80,.6);
}
.nav-search .ns-submit:hover{background:var(--hann-2);transform:scale(1.08)}
.nav-search .ns-submit svg{width:13px;height:13px;color:#fff;stroke-width:2.2}

/* Hide native search input clear (X) so we don't end up with two X marks */
.nav-search input::-webkit-search-decoration,
.nav-search input::-webkit-search-cancel-button,
.nav-search input::-webkit-search-results-button,
.nav-search input::-webkit-search-results-decoration{-webkit-appearance:none;display:none}

/* Live suggestions dropdown attached to nav search */
.ns-drop{
  position:absolute;top:calc(100% + 8px);left:0;right:0;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.45), 0 8px 24px -12px rgba(0,0,0,.35);
  overflow:hidden;
  z-index:1100;
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.ns-drop.open{opacity:1;transform:translateY(0);pointer-events:auto}
.ns-drop-list{max-height:60vh;overflow:auto}
.ns-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;cursor:pointer;
  border-bottom:1px solid var(--line);
  transition:background .15s;
}
.ns-item:last-child{border-bottom:none}
.ns-item:hover,.ns-item[aria-selected="true"]{background:var(--panel-2)}
.ns-thumb{
  width:42px;height:42px;flex-shrink:0;
  background:var(--panel-2);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font:600 .58rem/1 var(--mono);
  color:var(--hann);
  letter-spacing:.04em;
  overflow:hidden;
}
.ns-thumb img{width:100%;height:100%;object-fit:contain;padding:4px}
.ns-meta{flex:1;min-width:0}
.ns-code{font:700 .8rem/1.2 var(--mono);color:var(--txt);letter-spacing:.02em}
.ns-name{font:500 .72rem/1.3 var(--body);color:var(--muted);margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.ns-arrow{color:var(--faint);width:14px;height:14px;flex-shrink:0}
.ns-empty,.ns-loading,.ns-hint{
  padding:18px 14px;text-align:center;
  font:500 .78rem/1.4 var(--body);color:var(--muted);
}
.ns-empty strong,.ns-hint strong{color:var(--txt);font-weight:600}
.ns-cta{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 14px;background:var(--panel-2);
  border-top:1px solid var(--line);
  font:600 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--hann-2);cursor:pointer;
  transition:background .2s,color .2s;
}
.ns-cta:hover{background:var(--hann);color:#fff}
.ns-cta svg{width:12px;height:12px}
mark.ns-hi{background:rgba(226,24,106,.18);color:var(--txt);border-radius:2px;padding:0 2px}

/* ===== CATEGORY OVERVIEW (replaces #products on index.html) ===== */
.cov{
  position:relative;
  padding:clamp(56px,9vw,110px) 0 clamp(68px,11vw,140px);
}
.cov-head{margin-bottom:clamp(28px,4vw,52px)}
.cov-head .eyebrow{margin-bottom:14px}
.cov-head h2{
  font:800 clamp(2rem,5.4vw,4rem)/.98 var(--disp);
  letter-spacing:-.02em;color:var(--txt);
  margin-bottom:18px;font-stretch:125%;
}
.cov-head h2 .dot{color:var(--hann)}
.cov-head p.aside{
  font:400 1rem/1.6 var(--body);color:var(--muted);max-width:640px;
}
.cov-quick{
  position:relative;
  background:var(--panel);border:1px solid var(--line-2);
  border-radius:14px;padding:10px;margin-bottom:36px;
  box-shadow:0 12px 30px -18px rgba(0,0,0,.35);
}
.cov-quick form{
  display:flex;flex-wrap:wrap;gap:6px;align-items:stretch;
}
.cov-quick .cov-quick-input{
  flex:2 1 260px;min-width:200px;
  display:flex;align-items:center;gap:6px;padding:0 6px;
  position:relative;
}
.cov-quick .cov-quick-input::after{
  content:"";position:absolute;right:-3px;top:18%;bottom:18%;width:1px;background:var(--line);
}
.cov-quick .cov-quick-input svg{width:18px;height:18px;color:var(--muted);margin:0 6px 0 8px;flex-shrink:0}
.cov-quick input[type="text"]{
  flex:1;min-width:0;height:44px;background:transparent;border:none;outline:none;
  font:500 .95rem/1 var(--body);color:var(--txt);padding:0 6px;
}
.cov-quick input[type="text"]::placeholder{color:var(--faint)}
.cov-quick input[type="text"]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}

.cov-quick-select{
  flex:1 1 170px;min-width:150px;position:relative;
}
.cov-quick-select::after{
  content:"";position:absolute;right:14px;top:50%;transform:translateY(-30%) rotate(45deg);
  width:6px;height:6px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  pointer-events:none;
}
.cov-quick-select::before{
  content:"";position:absolute;left:-3px;top:18%;bottom:18%;width:1px;background:var(--line);
}
.cov-quick-select select{
  width:100%;height:44px;background:transparent;border:none;outline:none;
  font:500 .88rem/1 var(--body);color:var(--txt);
  padding:0 32px 0 12px;cursor:pointer;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
}

.cov-quick button[type="submit"]{
  flex:0 0 auto;height:44px;padding:0 22px;
  background:var(--hann);color:#fff;border:none;border-radius:8px;cursor:pointer;
  font:700 .8rem/1 var(--body);letter-spacing:.04em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;
  transition:background .25s, transform .25s var(--settle);
  box-shadow:0 8px 20px -8px rgba(181,0,80,.55);
}
.cov-quick button[type="submit"]:hover{background:var(--hann-2);transform:translateY(-1px)}
.cov-quick button[type="submit"] svg{width:13px;height:13px;color:#fff}

/* Live suggestions dropdown for cov-quick */
.cov-quick-drop{
  position:absolute;top:calc(100% + 8px);left:0;right:0;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.45), 0 8px 24px -12px rgba(0,0,0,.35);
  overflow:hidden;z-index:50;
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.cov-quick-drop.open{opacity:1;transform:translateY(0);pointer-events:auto}
.cov-quick-drop .cqd-list{max-height:60vh;overflow:auto}
.cov-quick-drop .cqd-item{
  display:flex;align-items:center;gap:14px;
  padding:12px 16px;cursor:pointer;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--line);transition:background .15s;
}
.cov-quick-drop .cqd-item:last-child{border-bottom:none}
.cov-quick-drop .cqd-item:hover{background:var(--panel-2)}
.cov-quick-drop .cqd-thumb{
  width:48px;height:48px;flex-shrink:0;
  background:#fff;border-radius:8px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border:1px solid var(--line);
}
.cov-quick-drop .cqd-thumb img{width:100%;height:100%;object-fit:contain;padding:4px}
.cov-quick-drop .cqd-meta{flex:1;min-width:0}
.cov-quick-drop .cqd-code{
  font:700 .9rem/1.2 var(--mono);color:var(--txt);letter-spacing:.02em;
}
.cov-quick-drop .cqd-sub{
  font:500 .75rem/1.3 var(--body);color:var(--muted);margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.cov-quick-drop .cqd-arrow{color:var(--faint);width:16px;height:16px;flex-shrink:0}
.cov-quick-drop .cqd-empty,
.cov-quick-drop .cqd-loading{
  padding:22px 16px;text-align:center;
  font:500 .85rem/1.4 var(--body);color:var(--muted);
}
.cov-quick-drop .cqd-empty strong{color:var(--txt);font-weight:600}
.cov-quick-drop .cqd-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 16px;background:var(--panel-2);
  border-top:1px solid var(--line);
  font:600 .76rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--hann-2);cursor:pointer;text-decoration:none;
  transition:background .2s,color .2s;
}
.cov-quick-drop .cqd-cta:hover{background:var(--hann);color:#fff}
.cov-quick-drop .cqd-cta svg{width:12px;height:12px}
mark.cqd-hi{background:rgba(226,24,106,.18);color:var(--txt);border-radius:2px;padding:0 2px}

.cov-block{margin-bottom:42px}
.cov-block-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:18px;flex-wrap:wrap;gap:8px;
}
.cov-block-head h3{
  font:800 1.65rem/1.1 var(--disp);
  font-stretch:125%;letter-spacing:-.01em;
  color:var(--txt);
}
[data-theme="dark"] .cov-block-head h3{ color:#ffffff }
.cov-block-head .mono{
  font-family:var(--mono);font-weight:600;letter-spacing:.18em;
  font-size:.72rem;text-transform:uppercase;color:var(--hann-2);
}
[data-theme="dark"] .cov-vt-name,
[data-theme="dark"] .cov-pt-name{ color:#ffffff }
[data-theme="dark"] .cov-head h2{ color:#ffffff }

/* Vehicle cards */
.cov-vt{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.cov-vt-card{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  min-height:170px;padding:22px;
  background:var(--panel);border:1px solid var(--line);
  border-radius:14px;color:inherit;text-decoration:none;
  overflow:hidden;
  transition:transform .35s var(--ease),border-color .25s,box-shadow .35s;
}
.cov-vt-card::before{
  content:"";position:absolute;inset:auto -30% -30% auto;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle, rgba(226,24,106,.25), transparent 70%);
  opacity:.0;transition:opacity .35s;pointer-events:none;
}
.cov-vt-card:hover{
  transform:translateY(-4px);border-color:var(--hann-2);
  box-shadow:0 26px 50px -22px rgba(181,0,80,.4);
}
.cov-vt-card:hover::before{opacity:1}
.cov-vt-icon{
  width:48px;height:48px;border-radius:10px;
  background:rgba(226,24,106,.12);color:var(--hann);
  display:flex;align-items:center;justify-content:center;
}
.cov-vt-icon svg{width:24px;height:24px}
.cov-vt-name{
  margin-top:auto;padding-top:18px;
  font:800 1.4rem/1 var(--disp);color:var(--txt);font-stretch:125%;
}
.cov-vt-meta{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:8px;
}
.cov-vt-count{
  font:600 .8rem/1 var(--body);color:var(--muted);
}
.cov-vt-arrow{
  width:34px;height:34px;border-radius:50%;
  background:var(--hann);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s var(--ease);
}
.cov-vt-card:hover .cov-vt-arrow{transform:translateX(4px)}
.cov-vt-arrow svg{width:14px;height:14px}

/* Product type cards */
.cov-pt{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.cov-pt-card{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;
  background:var(--panel);border:1px solid var(--line);
  border-radius:12px;color:inherit;text-decoration:none;
  transition:transform .3s var(--ease),border-color .25s;
}
.cov-pt-card:hover{
  transform:translateY(-2px);border-color:var(--hann-2);
}
.cov-pt-card.is-empty{opacity:.55}
.cov-pt-card.is-empty:hover{transform:none;border-color:var(--line)}
.cov-pt-ico{
  width:38px;height:38px;border-radius:8px;flex-shrink:0;
  background:rgba(226,24,106,.10);color:var(--hann);
  display:flex;align-items:center;justify-content:center;
}
.cov-pt-ico svg{width:18px;height:18px}
.cov-pt-text{flex:1;min-width:0}
.cov-pt-name{
  font:700 .9rem/1.25 var(--body);color:var(--txt);
  letter-spacing:-.005em;
}
.cov-pt-sub{
  font:500 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--hann-2);margin-top:5px;
}
.cov-pt-card.is-empty .cov-pt-sub{color:var(--faint)}

/* ===== MAIN SEARCH SECTION (used on catalog-search.html) ===== */
.csearch{
  position:relative;
  padding:clamp(56px,9vw,110px) 0 clamp(68px,11vw,140px);
}
.csearch-head{margin-bottom:clamp(28px,4vw,52px)}
.csearch-head .eyebrow{margin-bottom:14px}
.csearch-head h2{
  font:800 clamp(2rem,5.4vw,4rem)/.98 var(--disp);
  letter-spacing:-.02em;color:var(--txt);
  margin-bottom:18px;
  font-stretch:125%;
}
.csearch-head h2 .dot{color:var(--hann)}
.csearch-head p.aside{
  font:400 1rem/1.6 var(--body);color:var(--muted);
  max-width:640px;
}

/* Search controls bar */
.csearch-bar{
  display:flex;flex-wrap:wrap;gap:14px;align-items:stretch;
  background:var(--panel);
  border:1px solid var(--line-2);
  border-radius:14px;
  padding:14px;
  margin-bottom:30px;
  box-shadow:0 16px 40px -22px rgba(0,0,0,.4);
}
.csb-input{
  flex:2 1 280px;min-width:0;
  display:flex;align-items:center;gap:10px;
  background:transparent;
  border:none;
  padding:0 14px;
  position:relative;
}
.csb-input::after{
  content:"";position:absolute;right:-7px;top:18%;bottom:18%;width:1px;background:var(--line);
}
.csb-input svg{width:18px;height:18px;color:var(--muted);flex-shrink:0;stroke-width:1.8}
.csb-input input{
  flex:1;min-width:0;height:46px;background:transparent;border:none;outline:none;
  font:500 1rem/1 var(--body);color:var(--txt);letter-spacing:.005em;
}
.csb-input input::placeholder{color:var(--faint);font-weight:400}
.csb-input button.csb-clear{
  width:28px;height:28px;border-radius:50%;
  display:none;align-items:center;justify-content:center;
  color:var(--muted);background:transparent;cursor:pointer;
}
.csb-input.has-q button.csb-clear{display:inline-flex}
.csb-input button.csb-clear:hover{background:var(--panel-2)}

.csb-select{
  flex:1 1 180px;min-width:160px;position:relative;
}
.csb-select select{
  width:100%;height:46px;
  background:transparent;border:none;outline:none;
  font:500 .9rem/1 var(--body);color:var(--txt);
  padding:0 36px 0 14px;
  cursor:pointer;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  letter-spacing:.005em;
}
/* Native option list — explicit panel/text colors fix dark-mode invisibility */
.csb-select select option,
.cov-quick-select select option{
  background:var(--panel);
  color:var(--txt);
}
[data-theme="dark"] .csb-select select option,
[data-theme="dark"] .cov-quick-select select option{
  background:#1c1c25;color:#edeaf2;
}
.csb-select::after{
  content:"";position:absolute;right:14px;top:50%;transform:translateY(-30%) rotate(45deg);
  width:6px;height:6px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  pointer-events:none;
}
.csb-select::before{
  content:"";position:absolute;left:-7px;top:18%;bottom:18%;width:1px;background:var(--line);
}
.csb-select:first-child::before{display:none}
/* Variety dropdown stays dimmed until a product group is chosen */
.csb-select.is-disabled{opacity:.5}
.csb-select.is-disabled select{cursor:not-allowed;color:var(--muted)}

.csb-submit{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:8px;
  padding:0 26px;height:46px;
  background:var(--hann);color:#fff;
  border:none;border-radius:8px;cursor:pointer;
  font:700 .82rem/1 var(--body);letter-spacing:.04em;text-transform:uppercase;
  transition:background .25s,transform .25s var(--settle);
  box-shadow:0 10px 32px -10px rgba(181,0,80,.6);
}
.csb-submit:hover{background:var(--hann-2)}
.csb-submit svg{width:14px;height:14px}

/* Active filter chips + clear */
.csearch-filters{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-bottom:20px;min-height:30px;
}
.csearch-filters .csf-label{
  font:600 .68rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);margin-right:4px;
}
.csearch-filters .csf-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px 6px 12px;
  background:var(--panel);border:1px solid var(--line-2);
  border-radius:999px;
  font:500 .76rem/1 var(--body);color:var(--txt);
}
.csearch-filters .csf-chip button{
  width:16px;height:16px;border-radius:50%;
  background:var(--panel-2);color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .15s,color .15s;
}
.csearch-filters .csf-chip button:hover{background:var(--hann);color:#fff}
.csearch-filters .csf-chip button svg{width:8px;height:8px;stroke-width:3}
.csearch-filters .csf-clear{
  font:600 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--hann-2);cursor:pointer;background:none;border:none;padding:6px 4px;
}
.csearch-filters .csf-clear:hover{color:var(--hann)}

/* Results count */
.csearch-count{
  font:500 .85rem/1.4 var(--body);color:var(--muted);
  margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--line);
}
.csearch-count strong{color:var(--txt);font-weight:700}

/* Results grid */
.csearch-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:18px;
}
.cscard{
  display:flex;flex-direction:column;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;overflow:hidden;
  text-decoration:none;color:inherit;
  transition:transform .4s var(--ease),border-color .25s,box-shadow .35s;
  position:relative;
}
.cscard:hover{
  transform:translateY(-4px);
  border-color:var(--hann-2);
  box-shadow:0 24px 50px -22px rgba(181,0,80,.45);
}
.cscard-media{
  position:relative;
  aspect-ratio:1/1;
  background:#fff;
  overflow:hidden;
}
.cscard-media img{
  width:100%;height:100%;object-fit:contain;
  padding:10px;
  transition:transform .5s var(--ease);
}
.cscard:hover .cscard-media img{transform:scale(1.03)}
.cscard-code{
  position:absolute;top:10px;left:10px;
  padding:5px 9px;border-radius:6px;
  background:var(--hann);color:#fff;
  font:700 .72rem/1 var(--mono);letter-spacing:.04em;
}
.cscard-vt{
  position:absolute;top:10px;right:10px;
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 9px;border-radius:6px;
  background:rgba(255,255,255,.96);color:#16110f;
  border:1px solid rgba(22,17,15,.10);
  font:600 .68rem/1 var(--body);letter-spacing:.01em;
}
.cscard-vt svg{width:11px;height:11px}
.cscard-body{padding:16px}
.cscard-eyebrow{
  font:700 .62rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--hann-2);margin-bottom:8px;
}
.cscard-title{
  font:700 .92rem/1.35 var(--body);color:var(--txt);
  letter-spacing:-.005em;
  margin-bottom:10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.cscard-oem{
  padding-top:12px;border-top:1px solid var(--line);
  font:500 .7rem/1.4 var(--body);color:var(--muted);
}
.cscard-oem .oem-head{
  font:700 .58rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);margin-bottom:5px;
}
.cscard-oem .oem-row{display:flex;gap:8px;align-items:center;
  font-family:var(--mono);letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cscard-oem .oem-brand{color:var(--txt);font-weight:600;flex-shrink:0}
.cscard-foot{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 16px;border-top:1px solid var(--line);
  background:var(--panel-2);
  font:600 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--hann-2);
}
.cscard-foot svg{width:13px;height:13px;transition:transform .3s var(--ease)}
.cscard:hover .cscard-foot svg{transform:translateX(3px)}
.cscard-foot.has-pdf{cursor:pointer}

/* Empty state */
.csearch-empty{
  text-align:center;padding:64px 20px;
  border:1px dashed var(--line-2);border-radius:14px;
  background:var(--panel);
}
.csearch-empty svg{width:48px;height:48px;color:var(--muted);margin-bottom:14px;stroke-width:1.5}
.csearch-empty h3{font:800 1.4rem/1.2 var(--disp);color:var(--txt);margin-bottom:8px}
.csearch-empty p{font:400 .9rem/1.5 var(--body);color:var(--muted);max-width:440px;margin:0 auto 18px}
.csearch-empty button{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 22px;background:var(--hann);color:#fff;
  border:none;border-radius:8px;cursor:pointer;
  font:700 .78rem/1 var(--body);letter-spacing:.04em;text-transform:uppercase;
}
.csearch-empty button:hover{background:var(--hann-2)}

/* ===== PRODUCT DETAIL PAGE ===== */
.cpd{
  padding:clamp(22px,3vw,34px) 0 clamp(40px,6vw,72px);
}
.cpd-crumb{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  font:600 .72rem/1 var(--mono);letter-spacing:.10em;text-transform:uppercase;
  color:var(--faint);margin-bottom:24px;
}
.cpd-crumb a{color:var(--muted);transition:color .2s}
.cpd-crumb a:hover{color:var(--hann-2)}
.cpd-crumb svg{width:10px;height:10px;color:var(--faint)}
.cpd-crumb .cpd-here{color:var(--txt)}

.cpd-head{
  display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:18px;
  padding-bottom:28px;margin-bottom:36px;
  border-bottom:1px solid var(--line);
}
.cpd-head-l h1{
  font:800 clamp(1.7rem,3.8vw,2.7rem)/1 var(--disp);
  letter-spacing:-.02em;color:var(--txt);
  font-stretch:125%;
}
.cpd-head-l h1 .cpd-code{color:var(--hann)}
.cpd-head-l p{
  font:500 .92rem/1.4 var(--body);color:var(--muted);
  margin-top:8px;
}
.cpd-head-r{display:flex;align-items:center;gap:10px}

.cpd-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,3vw,40px);
  margin-bottom:clamp(18px,2.5vw,26px);
}
@media (max-width:880px){.cpd-grid{grid-template-columns:1fr}}
/* Drawing stays pinned beside the (now taller) info column — compact; size unchanged */
@media (min-width:881px){.cpd-imgcol{position:-webkit-sticky;position:sticky;top:88px;align-self:start}}

/* Image side */
.cpd-imgcol{display:flex;flex-direction:column;gap:14px}
.cpd-img{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;
}
.cpd-img-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 16px;background:rgba(226,24,106,.06);
  border-bottom:1px solid var(--line);
}
[data-theme="light"] .cpd-img-head{background:rgba(226,24,106,.04)}
.cpd-img-head span{
  font:700 .68rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--hann);
}
.cpd-img-head a{
  display:inline-flex;align-items:center;gap:5px;
  font:700 .72rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--hann-2);
}
.cpd-img-head a svg{width:11px;height:11px}
.cpd-img-frame{
  position:relative;flex:1;
  min-height:380px;
  display:flex;align-items:center;justify-content:center;
}
.cpd-img-frame img{
  max-width:100%;max-height:calc(100vh - 280px);
  width:auto;height:auto;
  object-fit:contain;padding:14px;
}
.cpd-img-placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--faint);gap:8px;padding:40px;
}
.cpd-img-placeholder svg{width:54px;height:54px;opacity:.4}

/* Info side */
.cpd-info{display:flex;flex-direction:column;gap:14px}
.cpd-quick{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cpd-card{
  display:flex;align-items:center;gap:12px;
  padding:14px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;
  text-decoration:none;color:inherit;
  transition:border-color .25s,transform .25s;
}
.cpd-card:hover{border-color:var(--hann-2);transform:translateY(-2px)}
.cpd-card-icon{
  width:42px;height:42px;border-radius:8px;
  background:rgba(226,24,106,.10);color:var(--hann);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font:800 .58rem/1 var(--mono);letter-spacing:.04em;
}
.cpd-card-icon svg{width:20px;height:20px}
.cpd-card-text .label{
  font:700 .58rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--hann);
}
.cpd-card-text .value{
  font:700 .82rem/1.3 var(--body);color:var(--txt);margin-top:4px;
}

.cpd-details{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;
}
.cpd-details h4{
  padding:11px 14px;background:var(--panel-2);
  border-bottom:1px solid var(--line);
  font:700 .64rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--txt);
}
.cpd-details dl{padding:6px 0}
.cpd-details .row{
  display:grid;grid-template-columns:1fr 1.4fr;align-items:center;
  padding:9px 14px;
  border-bottom:1px solid var(--line);
}
.cpd-details .row:last-child{border-bottom:none}
.cpd-details dt{
  display:inline-flex;align-items:center;gap:6px;
  font:500 .74rem/1.2 var(--body);color:var(--muted);
}
.cpd-details dt svg{width:13px;height:13px;color:var(--hann)}
.cpd-details dd{
  font:600 .78rem/1.2 var(--body);color:var(--txt);
  display:inline-flex;align-items:center;gap:6px;
}
.cpd-details dd.mono{font-family:var(--mono);font-weight:700;letter-spacing:.01em}

.cpd-app{
  padding:12px 14px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;
}
.cpd-app .label{
  font:700 .62rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--hann);margin-bottom:6px;
}
.cpd-app p{font:500 .82rem/1.5 var(--body);color:var(--txt)}

.cpd-cta{display:flex;gap:10px}
.cpd-cta a{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 18px;
  font:700 .78rem/1 var(--body);letter-spacing:.04em;text-transform:uppercase;
  border-radius:8px;text-decoration:none;
  transition:background .25s,transform .25s,color .25s,border-color .25s;
}
.cpd-cta .cta-quote{background:var(--hann);color:#fff;box-shadow:0 10px 30px -12px rgba(181,0,80,.55)}
.cpd-cta .cta-quote:hover{background:var(--hann-2)}
.cpd-cta .cta-phone{
  background:transparent;color:var(--txt);
  border:1px solid var(--line-2);
}
.cpd-cta .cta-phone:hover{border-color:var(--hann-2);color:var(--hann-2)}
.cpd-cta a svg{width:14px;height:14px}
/* CTA shares the quick row beside the vehicle-type card: stack the two buttons, fill the cell, stay symmetric */
.cpd-quick .cpd-cta{flex-direction:column;gap:8px;height:100%}

/* Reference tables */
.cpd-refs{
  display:grid;grid-template-columns:1fr;gap:12px;
  margin:0;
}
.cpd-ref{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;
}
.cpd-ref-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:var(--panel-2);border-bottom:1px solid var(--line);
}
.cpd-ref-head h4{
  font:700 .72rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--txt);
}
.cpd-ref-head .badge{
  font:700 .62rem/1 var(--mono);letter-spacing:.10em;text-transform:uppercase;
  color:var(--hann-2);background:rgba(226,24,106,.10);
  padding:3px 8px;border-radius:5px;
}
.cpd-ref ul{}
.cpd-ref li{
  display:flex;align-items:center;gap:12px;
  padding:10px 16px;border-bottom:1px solid var(--line);
  transition:background .15s;
}
.cpd-ref li:last-child{border-bottom:none}
.cpd-ref li:hover{background:var(--panel-2)}
.cpd-ref .brand{
  width:120px;flex-shrink:0;
  font:700 .74rem/1.2 var(--body);color:var(--txt);
  letter-spacing:.01em;
}
.cpd-ref .code{
  flex:1;font:500 .78rem/1.2 var(--mono);color:var(--muted);
  letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cpd-copy{
  width:28px;height:28px;border-radius:6px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted);background:transparent;border:none;cursor:pointer;
  transition:background .15s,color .15s;
}
.cpd-copy:hover{background:rgba(226,24,106,.12);color:var(--hann)}
.cpd-copy.is-copied{color:#22c55e}
.cpd-copy svg{width:14px;height:14px}

.cpd-not-found{
  text-align:center;padding:120px 20px;
}
.cpd-not-found h1{font:800 2rem/1.1 var(--disp);color:var(--txt);margin-bottom:14px}
.cpd-not-found p{font:400 1rem/1.5 var(--body);color:var(--muted);margin-bottom:24px}

/* ===== RESPONSIVE ===== */
@media (max-width:768px){
  .csb-input,.csb-select{flex:1 1 100%}
}

/* ===== Small-screen refinements for catalog/search components ===== */
@media (max-width:520px){
  /* Homepage quick-search: input, selects and button each take a full row; drop the inline divider lines */
  .cov-quick .cov-quick-input,
  .cov-quick .cov-quick-select{flex:1 1 100%;min-width:0}
  .cov-quick .cov-quick-input::after,
  .cov-quick .cov-quick-select::before{display:none}
  .cov-quick button[type="submit"]{flex:1 1 100%;width:100%;justify-content:center}
  /* Product detail: vehicle-type card and the quote/phone box stack instead of squeezing side by side */
  .cpd-quick{grid-template-columns:1fr}
  /* Reference rows: let brand shrink so long part numbers keep room */
  .cpd-ref .brand{width:auto;min-width:84px}
}


/* ===== Search-first browse panel (shown when no query/filter is active) ===== */
.csearch-browse{padding:6px 0 12px}
.csb-head{margin-bottom:22px}
.csb-head h3{font-family:var(--disp);font-stretch:108%;font-weight:700;font-size:clamp(1.3rem,2.4vw,1.85rem);color:var(--txt);margin:0;letter-spacing:-.01em}
.csb-head p{color:var(--muted);margin-top:8px;max-width:64ch;font-size:.97rem;line-height:1.6}
.csb-chips{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.csb-chip-label{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-right:4px;min-width:84px}
.csb-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border:1px solid var(--line-2);border-radius:999px;background:var(--panel);color:var(--txt);font-weight:600;font-size:.87rem;cursor:pointer;transition:border-color .25s,background .25s,color .25s,transform .25s}
.csb-chip:hover{border-color:var(--hann-2);color:#fff;transform:translateY(-2px)}
.csb-chip .csb-chip-n{font-family:var(--mono);font-size:.68rem;color:var(--muted);background:rgba(255,255,255,.06);padding:2px 8px;border-radius:999px}
.csb-chip:hover .csb-chip-n{color:#fff;background:rgba(255,255,255,.12)}
[data-theme="light"] .csb-chip .csb-chip-n{background:rgba(22,17,15,.06)}
.csb-chip.is-empty{opacity:.45;cursor:not-allowed}
.csb-chip.is-empty:hover{border-color:var(--line-2);color:var(--txt);transform:none}
.csb-feat-head{display:flex;align-items:center;gap:14px;margin:30px 0 16px;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--hann-2)}
.csb-feat-head::after{content:"";flex:1;height:1px;background:var(--line)}


/* ===== Horizontal pill filter bar (group + variety) ===== */
.csearch-filterbar{display:flex;flex-direction:column;gap:10px;margin:0 0 26px}
.csfb-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.csearch-filterbar .csfb-row + .csfb-row{padding-top:12px;margin-top:2px;border-top:1px dashed var(--line)}
.csfb-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-right:6px;min-width:88px}
.csfb-pill{display:inline-flex;align-items:center;padding:8px 16px;border:1px solid var(--line-2);border-radius:999px;background:var(--panel);color:var(--txt);font-weight:600;font-size:.85rem;cursor:pointer;transition:border-color .2s,background .2s,color .2s,transform .2s}
.csfb-pill:hover{border-color:var(--hann-2);color:#fff;transform:translateY(-1px)}
.csfb-pill.is-active{background:var(--hann);border-color:var(--hann);color:#fff;box-shadow:0 8px 20px -10px rgba(181,0,80,.6)}
@media (max-width:600px){ .csfb-label{min-width:0;width:100%;margin-bottom:2px} }


/* "Yeni ürünler" featured row — single horizontal line (side by side), scrolls if it overflows */
.csb-feat-grid{display:flex;grid-template-columns:none;gap:18px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.csb-feat-grid .cscard{flex:0 0 clamp(208px,27vw,260px);scroll-snap-align:start}
.csb-feat-grid::-webkit-scrollbar{height:8px}
.csb-feat-grid::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:999px}

/* Browse panel spans the full results-grid width (was squeezed into one column) */
.csearch-browse{grid-column:1 / -1}
.csb-feat-grid .cscard{flex-basis:clamp(220px,23vw,272px)}


/* ===== Product detail: compact dark banner band (nav stays visible, product sits right below) ===== */
.cpd-hero{
  position:relative;overflow:hidden;background:#0a0a0d;
  background-image:radial-gradient(120% 95% at 82% 0,rgba(181,0,80,.42),transparent 60%),radial-gradient(70% 60% at 98% 90%,rgba(255,46,132,.14),transparent 60%);
  padding:clamp(94px,12vh,116px) 0 clamp(20px,3vw,30px);
}
.cpd-hero .cpd-crumb{color:rgba(237,234,242,.6);margin-bottom:12px}
.cpd-hero .cpd-crumb a{color:var(--hann-2)}
.cpd-hero .cpd-crumb a:hover{color:var(--glow)}
.cpd-hero .cpd-crumb svg{color:rgba(237,234,242,.45)}
.cpd-hero .cpd-crumb .cpd-here{color:#fff}
.cpd-hero .cpd-head{border-bottom:none;padding-bottom:0;margin-bottom:0}
.cpd-hero .cpd-head-l h1{color:#f6f3f9}
.cpd-hero .cpd-head-l h1 .cpd-code{color:var(--hann-2)}
.cpd-hero .cpd-head-l p{color:rgba(237,234,242,.82)}

/* Vehicle-type card on the product page is informational only (no homepage redirect) */
.cpd-card--static{cursor:default}
.cpd-card--static:hover{border-color:var(--line);transform:none}