// ====================== ICON SET (outline, thin stroke) ======================
// All icons accept {size, stroke, className, style}. Default 1.6 stroke weight.
const Ico = ({ size = 18, stroke = 1.7, children, className, style }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
    stroke="currentColor" strokeWidth={stroke} strokeLinecap="round"
    strokeLinejoin="round" className={className} style={style} aria-hidden="true">
    {children}
  </svg>
);

const IconCompany   = (p) => <Ico {...p}><path d="M3 21h18M5 21V7l7-4 7 4v14M9 9h.01M9 13h.01M9 17h.01M15 9h.01M15 13h.01M15 17h.01"/></Ico>;
const IconChat      = (p) => <Ico {...p}><path d="M21 11.5a8.4 8.4 0 0 1-9 8.4 9.5 9.5 0 0 1-3.6-.7L3 21l1.3-3.4A8.4 8.4 0 1 1 21 11.5Z"/></Ico>;
const IconOrders    = (p) => <Ico {...p}><path d="M6 7h12l-1 13H7L6 7Z"/><path d="M9 7a3 3 0 0 1 6 0"/></Ico>;
const IconPhone     = (p) => <Ico {...p}><path d="M22 16.9v2.6a1.5 1.5 0 0 1-1.6 1.5A18 18 0 0 1 3 4.6 1.5 1.5 0 0 1 4.5 3h2.6a1.5 1.5 0 0 1 1.5 1.3l.6 3a1.5 1.5 0 0 1-.4 1.4L7.5 10a14 14 0 0 0 6.5 6.5l1.3-1.3a1.5 1.5 0 0 1 1.4-.4l3 .6a1.5 1.5 0 0 1 1.3 1.5Z"/></Ico>;
const IconPin       = (p) => <Ico {...p}><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="2.6"/></Ico>;
const IconUser      = (p) => <Ico {...p}><circle cx="12" cy="8" r="3.6"/><path d="M5 20a7 7 0 0 1 14 0"/></Ico>;
const IconSearch    = (p) => <Ico {...p}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.2-3.2"/></Ico>;
const IconChevron   = (p) => <Ico {...p}><path d="m6 9 6 6 6-6"/></Ico>;
const IconChevronR  = (p) => <Ico {...p}><path d="m9 6 6 6-6 6"/></Ico>;
const IconChevronL  = (p) => <Ico {...p}><path d="m15 6-6 6 6 6"/></Ico>;
const IconMenu      = (p) => <Ico {...p}><path d="M3 6h18M3 12h18M3 18h18"/></Ico>;
const IconCart      = (p) => <Ico {...p}><circle cx="9" cy="20" r="1.4"/><circle cx="18" cy="20" r="1.4"/><path d="M2.5 3.5h2.2l2.2 11.2a1.5 1.5 0 0 0 1.5 1.2h8.2a1.5 1.5 0 0 0 1.5-1.2L20.5 7H6"/></Ico>;
const IconTruck     = (p) => <Ico {...p}><path d="M2 6.5h11v9H2zM13 9.5h4l3 3v3h-7z"/><circle cx="6" cy="17.5" r="1.7"/><circle cx="17" cy="17.5" r="1.7"/></Ico>;
const IconHeadset   = (p) => <Ico {...p}><path d="M4 13v-1a8 8 0 0 1 16 0v1"/><path d="M4 13a2 2 0 0 1 2 2v2a2 2 0 0 1-4 0v-2a2 2 0 0 1 2-2ZM20 13a2 2 0 0 0-2 2v2a2 2 0 0 0 4 0v-2a2 2 0 0 0-2-2Z"/><path d="M18 17v1a3 3 0 0 1-3 3h-2"/></Ico>;
const IconCard      = (p) => <Ico {...p}><rect x="2.5" y="5" width="19" height="14" rx="2.2"/><path d="M2.5 9.5h19M6 14.5h4"/></Ico>;
const IconShield    = (p) => <Ico {...p}><path d="M12 3 5 6v5c0 5 3.2 8 7 10 3.8-2 7-5 7-10V6l-7-3Z"/><path d="m9 11.5 2 2 4-4.2"/></Ico>;
const IconMedal     = (p) => <Ico {...p}><circle cx="12" cy="9" r="5.2"/><path d="M9 13.8 7.5 21l4.5-2.4L16.5 21 15 13.8M12 7l.9 1.8 2 .3-1.45 1.4.35 2-1.8-1-1.8 1 .35-2L9.1 9.1l2-.3Z"/></Ico>;
const IconTag       = (p) => <Ico {...p}><path d="M3.5 12.5 11 5h7v7l-7.5 7.5a2 2 0 0 1-2.8 0l-4.2-4.2a2 2 0 0 1 0-2.8Z"/><circle cx="14.5" cy="8.5" r="1.3"/></Ico>;
const IconTagSale   = (p) => <Ico {...p}><path d="M4 13 12 5h6v6l-8 8a2 2 0 0 1-2.8 0L4 15.8a2 2 0 0 1 0-2.8Z"/><circle cx="14.5" cy="8.5" r="1.2"/><path d="m13 13 1.6 1.6L18 11.2"/></Ico>;
const IconHandshake = (p) => <Ico {...p}><path d="M11 6 8 4 2 8v6l3 3M13 6l3-2 6 4v6l-3 3"/><path d="M5 17l4 4 1.5-1.5L13 22l1.4-1.4L16 22l3-3M11 6l-4 4 1.5 1.5L11 9l3 3 2-1"/></Ico>;
const IconImage     = (p) => <Ico {...p}><rect x="3" y="4" width="18" height="16" rx="2.2"/><circle cx="8.5" cy="9.5" r="1.6"/><path d="m4 17 4.5-4.5a1.6 1.6 0 0 1 2.2 0L16 18M14 15l1.6-1.6a1.6 1.6 0 0 1 2.2 0L20 15.5"/></Ico>;
const IconCheck     = (p) => <Ico {...p}><path d="M20 6 9 17l-5-5"/></Ico>;
const IconClose     = (p) => <Ico {...p}><path d="M6 6l12 12M18 6 6 18"/></Ico>;
const IconArrowR    = (p) => <Ico {...p}><path d="M5 12h14M13 6l6 6-6 6"/></Ico>;
const IconStar      = (p) => <Ico {...p}><path d="M12 3.5l2.6 5.27 5.82.85-4.21 4.1.99 5.8L12 16.77l-5.2 2.74.99-5.8-4.21-4.1 5.82-.85L12 3.5Z"/></Ico>;
const IconBox       = (p) => <Ico {...p}><path d="M21 7.5 12 3 3 7.5v9L12 21l9-4.5v-9Z"/><path d="m3 7.5 9 4.5 9-4.5M12 21v-9"/></Ico>;
// --- product-type icons (placeholders by category) ---
const IconBottle    = (p) => <Ico {...p}><path d="M10 2.5h4v2.2l1.4 2.1a3 3 0 0 1 .6 1.8V19a2.5 2.5 0 0 1-2.5 2.5h-3A2.5 2.5 0 0 1 8 19V8.6a3 3 0 0 1 .6-1.8L10 4.7V2.5Z"/><path d="M8 11.5h8"/></Ico>;
const IconGlove     = (p) => <Ico {...p}><path d="M7 21v-5.5M7 12V6a1.5 1.5 0 0 1 3 0v4M10 10V4.5a1.5 1.5 0 0 1 3 0V10M13 10V6a1.5 1.5 0 0 1 3 0v6c0 1.4-.4 2.6-1.3 3.6L13.5 17v4"/><path d="M7 15.5a2.5 2.5 0 0 1 4.5-1.5"/></Ico>;
const IconPaperRoll = (p) => <Ico {...p}><ellipse cx="12" cy="6" rx="7" ry="3"/><path d="M5 6v8c0 1.7 3.1 3 7 3 .7 0 1.4 0 2-.1"/><path d="M19 6v4M14 17v3.5l2-1.2 2 1.2V14"/></Ico>;
const IconBucket    = (p) => <Ico {...p}><path d="M5 8h14l-1.2 11.2a1.5 1.5 0 0 1-1.5 1.3H7.7a1.5 1.5 0 0 1-1.5-1.3L5 8Z"/><path d="M5.5 8a6.5 3 0 0 1 13 0"/><path d="M9 3.5 7.5 8M15 3.5 16.5 8"/></Ico>;
const IconTrash     = (p) => <Ico {...p}><path d="M4 7h16M6 7l1 13a1.5 1.5 0 0 0 1.5 1.4h7a1.5 1.5 0 0 0 1.5-1.4L18 7"/><path d="M9.5 7V4.5h5V7M10 11v6M14 11v6"/></Ico>;
const IconSpray     = (p) => <Ico {...p}><path d="M9 8.5h5a2 2 0 0 1 2 2V20a1.5 1.5 0 0 1-1.5 1.5h-6A1.5 1.5 0 0 1 7 20v-9.5a2 2 0 0 1 2-2Z"/><path d="M9 5.5h3.5L14 8.5M14 3h3M14 5.5h4M16 3v2.5"/></Ico>;
const IconSoap      = (p) => <Ico {...p}><path d="M7 11h10v8.5a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 7 19.5V11Z"/><path d="M10 11V8a2 2 0 0 1 2-2h1.5L13 3.5h-3"/><path d="M10.5 15h3"/></Ico>;
const IconSign      = (p) => <Ico {...p}><path d="M12 4 3 20h18L12 4Z"/><path d="M12 10v4M12 17h.01"/></Ico>;
const IconCloth     = (p) => <Ico {...p}><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M4 9h16M9 4v16M4 14h16M14 4v16"/></Ico>;
const IconFilter    = (p) => <Ico {...p}><path d="M3 5h18l-7 8v6l-4-2v-4L3 5Z"/></Ico>;
// --- office product-type icons (placeholders by category) ---
const IconPen       = (p) => <Ico {...p}><path d="M14 4.5 19.5 10 9 20.5l-5.5 1 1-5.5L14 4.5Z"/><path d="M12.5 6 18 11.5"/></Ico>;
const IconNotebook  = (p) => <Ico {...p}><rect x="5" y="3" width="14" height="18" rx="2"/><path d="M9 3v18M12 8h4M12 12h4"/></Ico>;
const IconPaperStack= (p) => <Ico {...p}><rect x="5" y="3" width="14" height="18" rx="1.6"/><path d="M8.5 8h7M8.5 12h7M8.5 16h4"/></Ico>;
const IconLabel     = (p) => <Ico {...p}><path d="M3.5 6.5 10 4l10.5 3.5L18 16 7.5 20 3.5 6.5Z"/><circle cx="9" cy="9" r="1.6"/></Ico>;
const IconInk       = (p) => <Ico {...p}><rect x="4" y="8" width="16" height="11" rx="1.6"/><path d="M8 8V6a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v2M8 13h5"/></Ico>;
const IconFolder    = (p) => <Ico {...p}><path d="M3 7a2 2 0 0 1 2-2h4l2 2.5h8a2 2 0 0 1 2 2V18a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z"/></Ico>;
const IconClip      = (p) => <Ico {...p}><path d="M8 8v8a4 4 0 0 0 8 0V7a2.5 2.5 0 0 0-5 0v8.5a1 1 0 0 0 2 0V8"/></Ico>;
const IconTape      = (p) => <Ico {...p}><circle cx="12" cy="11" r="6.5"/><circle cx="12" cy="11" r="2.4"/><path d="M17 15.5 21 20H8a5.5 5.5 0 0 1-1.6-.25"/></Ico>;
const IconScissors  = (p) => <Ico {...p}><circle cx="6.5" cy="6.5" r="2.5"/><circle cx="6.5" cy="17.5" r="2.5"/><path d="M8.7 8.3 20 17M8.7 15.7 20 7M8.5 12l3 0"/></Ico>;
const IconStamp     = (p) => <Ico {...p}><path d="M9 3.5h6v4l1.5 4h-9L9 7.5v-4Z"/><path d="M4 16.5h16M5 20h14"/></Ico>;
const IconBinder    = (p) => <Ico {...p}><rect x="5" y="3.5" width="14" height="17" rx="1.6"/><path d="M9 3.5v17M6.5 8H4.5M6.5 12H4.5M6.5 16H4.5"/></Ico>;
const IconBoard     = (p) => <Ico {...p}><rect x="3" y="4.5" width="18" height="12" rx="1.8"/><path d="M12 16.5V21M9 21h6"/></Ico>;
const IconDevice    = (p) => <Ico {...p}><rect x="3" y="4.5" width="18" height="11" rx="1.6"/><path d="M2 19h20M9.5 15.5l-.5 3.5M14.5 15.5l.5 3.5"/></Ico>;
// --- copa / cozinha product-type icons ---
const IconCup       = (p) => <Ico {...p}><path d="M5 8h11v6a4 4 0 0 1-4 4H9a4 4 0 0 1-4-4V8Z"/><path d="M16 9h2.2a2.3 2.3 0 0 1 0 4.6H16"/><path d="M8 3.5c-.5.8-.5 1.5 0 2.3M11.5 3.5c-.5.8-.5 1.5 0 2.3"/></Ico>;
const IconCutlery   = (p) => <Ico {...p}><path d="M7 3v7a2 2 0 0 0 4 0V3M9 10v11M16 3c-1.5 0-2.5 2-2.5 4.5S15 12 16 12v9"/></Ico>;
const IconSnack     = (p) => <Ico {...p}><rect x="5" y="4" width="14" height="16" rx="2"/><path d="M9 8h.01M13 8h.01M11 12h.01M15 12h.01M9 16h.01M13 16h.01"/></Ico>;
const IconFilm      = (p) => <Ico {...p}><rect x="4" y="3.5" width="16" height="17" rx="1.6"/><path d="M8 3.5v17M4 8h4M4 12h4M4 16h4"/></Ico>;
const IconBolt      = (p) => <Ico {...p}><path d="M13 2 4.5 13.5H11l-1 8.5 8.5-11.5H12l1-8.5Z"/></Ico>;
const IconUsers     = (p) => <Ico {...p}><circle cx="9" cy="8" r="3.2"/><path d="M3.5 20a5.5 5.5 0 0 1 11 0"/><path d="M16 5.2a3.2 3.2 0 0 1 0 5.9M17.5 20a5.5 5.5 0 0 0-3-4.9"/></Ico>;
const IconDollar    = (p) => <Ico {...p}><path d="M12 2.5v19M16.5 6.5c-1-1.3-2.7-2-4.5-2-2.5 0-4.5 1.3-4.5 3.4 0 2.4 2.3 3.2 4.5 3.6s4.5 1.2 4.5 3.6c0 2.1-2 3.4-4.5 3.4-1.8 0-3.5-.7-4.5-2"/></Ico>;
const IconMail      = (p) => <Ico {...p}><rect x="3" y="5" width="18" height="14" rx="2.2"/><path d="m3.5 7 8.5 6 8.5-6"/></Ico>;
const IconInstagram = (p) => <Ico {...p}><rect x="3.5" y="3.5" width="17" height="17" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.2" cy="6.8" r="1.1" fill="currentColor" stroke="none"/></Ico>;
const IconWhatsApp  = ({ size = 18, className, style }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} style={style} aria-hidden="true">
    <path d="M12.05 2C6.55 2 2.1 6.45 2.1 11.95c0 1.76.46 3.45 1.34 4.96L2 22l5.25-1.38a9.9 9.9 0 0 0 4.8 1.22h.01c5.5 0 9.95-4.45 9.95-9.95C22 6.45 17.55 2 12.05 2Zm5.8 14.06c-.24.69-1.4 1.32-1.94 1.4-.5.07-1.12.1-1.81-.11-.42-.13-.95-.31-1.64-.6-2.88-1.25-4.77-4.15-4.91-4.34-.14-.19-1.18-1.57-1.18-3 0-1.43.75-2.13 1.02-2.42.27-.29.58-.36.78-.36.19 0 .39 0 .56.01.18.01.42-.07.66.5.24.58.83 2.01.9 2.16.07.14.12.31.02.5-.09.19-.14.31-.28.48-.14.17-.29.37-.42.5-.14.14-.28.29-.12.57.16.27.71 1.18 1.53 1.91 1.05.94 1.94 1.23 2.22 1.37.27.14.43.12.59-.07.16-.19.68-.79.86-1.07.18-.27.36-.22.61-.13.25.09 1.6.76 1.87.9.27.14.46.21.53.32.07.12.07.67-.17 1.36Z"/>
  </svg>
);

Object.assign(window, {
  Ico, IconCompany, IconChat, IconOrders, IconPhone, IconPin, IconUser,
  IconSearch, IconChevron, IconChevronR, IconChevronL, IconMenu, IconCart,
  IconTruck, IconHeadset, IconCard, IconShield, IconMedal, IconTag, IconTagSale,
  IconHandshake, IconImage, IconCheck, IconClose, IconArrowR,
  IconStar, IconBolt, IconUsers, IconDollar, IconMail, IconInstagram, IconWhatsApp, IconBox,
  IconBottle, IconGlove, IconPaperRoll, IconBucket, IconTrash, IconSpray, IconSoap, IconSign, IconCloth, IconFilter,
  IconPen, IconNotebook, IconPaperStack, IconLabel, IconInk, IconFolder, IconClip, IconTape, IconScissors, IconStamp, IconBinder, IconBoard, IconDevice,
  IconCup, IconCutlery, IconSnack, IconFilm,
});
