// Thin line icons — 1.5px stroke, consistent 24 viewBox
const Ic = ({ size = 20, children, style }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
    stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"
    style={style}>{children}</svg>
);

const IconSearch = (p) => <Ic {...p}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></Ic>;
const IconUser = (p) => <Ic {...p}><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></Ic>;
const IconBag = (p) => <Ic {...p}><path d="M4 7h16l-1.2 13a2 2 0 0 1-2 1.8H7.2a2 2 0 0 1-2-1.8L4 7z"/><path d="M8 7V5a4 4 0 0 1 8 0v2"/></Ic>;
const IconHeart = (p) => <Ic {...p}><path d="M12 20s-7-4.3-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.7-7 10-7 10z"/></Ic>;
const IconClose = (p) => <Ic {...p}><path d="M18 6 6 18M6 6l12 12"/></Ic>;
const IconMenu = (p) => <Ic {...p}><path d="M3 6h18M3 12h18M3 18h18"/></Ic>;
const IconArrow = (p) => <Ic {...p}><path d="M5 12h14M13 6l6 6-6 6"/></Ic>;
const IconArrowLeft = (p) => <Ic {...p}><path d="M19 12H5M11 6l-6 6 6 6"/></Ic>;
const IconPlus = (p) => <Ic {...p}><path d="M12 5v14M5 12h14"/></Ic>;
const IconMinus = (p) => <Ic {...p}><path d="M5 12h14"/></Ic>;
const IconFilter = (p) => <Ic {...p}><path d="M3 6h18M6 12h12M10 18h4"/></Ic>;
const IconGrid = (p) => <Ic {...p}><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></Ic>;
const IconCheck = (p) => <Ic {...p}><path d="m5 12 5 5L20 7"/></Ic>;
const IconStar = (p) => <Ic {...p}><path d="m12 3 2.6 5.6 6.2.7-4.6 4.2 1.2 6.1L12 16.8 6.6 19.6l1.2-6.1L3.2 9.3l6.2-.7z" fill="currentColor"/></Ic>;
const IconInstagram = (p) => <Ic {...p}><rect x="3" y="3" width="18" height="18" rx="4"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.5" fill="currentColor"/></Ic>;
const IconMail = (p) => <Ic {...p}><rect x="3" y="5" width="18" height="14" rx="1"/><path d="m3 7 9 6 9-6"/></Ic>;
const IconPin = (p) => <Ic {...p}><path d="M12 22s8-7 8-13a8 8 0 0 0-16 0c0 6 8 13 8 13z"/><circle cx="12" cy="9" r="3"/></Ic>;
const IconPhone = (p) => <Ic {...p}><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.6a2 2 0 0 1-.5 2.1L7.9 9.7a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.8.3 1.7.5 2.6.6a2 2 0 0 1 1.7 2z"/></Ic>;
const IconGlobe = (p) => <Ic {...p}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18"/></Ic>;
const IconTruck = (p) => <Ic {...p}><rect x="1" y="6" width="14" height="11"/><path d="M15 10h4l3 3v4h-7"/><circle cx="6" cy="19" r="2"/><circle cx="18" cy="19" r="2"/></Ic>;
const IconShield = (p) => <Ic {...p}><path d="M12 3 4 6v6c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10V6l-8-3z"/></Ic>;
const IconReturn = (p) => <Ic {...p}><path d="M3 8h14a4 4 0 0 1 0 8h-3"/><path d="m7 4-4 4 4 4"/></Ic>;
const IconChat = (p) => <Ic {...p}><path d="M21 12a8 8 0 0 1-11.4 7.3L3 21l1.7-6.6A8 8 0 1 1 21 12z"/></Ic>;
const IconChevron = (p) => <Ic {...p}><path d="m9 6 6 6-6 6"/></Ic>;
const IconChevronDown = (p) => <Ic {...p}><path d="m6 9 6 6 6-6"/></Ic>;
const IconShare = (p) => <Ic {...p}><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.6 13.5 6.8 4M15.4 6.5l-6.8 4"/></Ic>;

Object.assign(window, {
  IconSearch, IconUser, IconBag, IconHeart, IconClose, IconMenu,
  IconArrow, IconArrowLeft, IconPlus, IconMinus, IconFilter, IconGrid,
  IconCheck, IconStar, IconInstagram, IconMail, IconPin, IconPhone,
  IconGlobe, IconTruck, IconShield, IconReturn, IconChat, IconChevron, IconChevronDown, IconShare
});