/* ============================================================================
   links.css — prototype me ye cheezein <button> thin, Razor me <a> hain.

   Kyun badla: category, brand, zuban aur grid/list sab asli links hain taake
   Google un ko follow kar sake (yani muft customers) aur customer link share
   kar sake. Button hota to Google andar ja hi nahi sakta.

   theme.css aur catalogue.css ke element-wale selectors (.viewswitch button …)
   anchor par nahi lagte, is liye yahan wahi shaklein <a> ke liye likhi hain.
   ============================================================================ */

/* ---------- Zuban ka toggle ---------- */
.lang-toggle a {
  background: transparent;
  border: 0;
  color: inherit;
  padding: 6px 14px;
  font-size: 12.5px;
  cursor: pointer;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.lang-toggle a:hover { color: inherit; text-decoration: none; }
.lang-toggle a.on {
  background: var(--ground);
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Grid / List ---------- */
.viewswitch a {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  min-height: 42px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  text-decoration: none;
}
.viewswitch a:hover { color: var(--ink); }
.viewswitch a.on,
.viewswitch a[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.viewswitch svg { width: 16px; height: 16px; }

/* ---------- Chips aur brand buttons ---------- */
/* Class-wale selectors anchor par pehle hi lag jate hain; yahan sirf wo cheezein
   jo <a> apne sath le kar aata hai. */
a.chip, a.brand-chip, a.clear-filters { text-decoration: none; }
a.chip:hover, a.brand-chip:hover, a.clear-filters:hover { text-decoration: none; }
a.chip[aria-pressed="true"],
a.brand-chip[aria-pressed="true"] { color: var(--on-accent); }

/* ---------- Product ki tasveer ---------- */
/* Naap aur object-fit catalogue.css ka (.item-media img: contain). Yahan pehle cover
   likha tha jo baad me load ho kar us ko dabata tha — panel/inverter ki tasveer ke
   kinare kat jate the. */
.item-media img { display: block; }

/* ---------- Logo ---------- */
/* Naap (--logo-h, apni shakal) catalogue.css me — yahan sirf dabba. */
.brandmark .mark.has-logo {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 3px;
}