/* Catshroom Store — fontes hospedadas por nós (OFL). Gerado por Baixar-Fontes-Loja.mjs */
@font-face{font-family:"DM Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/dm-mono-400.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/dm-mono-500.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/figtree-400-800.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Gabarito";font-style:normal;font-weight:500 800;font-display:swap;src:url("fonts/gabarito-500-800.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
--ic-search:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'11'%20cy%3D'11'%20r%3D'7'%2F%3E%3Cpath%20d%3D'M21%2021l-4.3-4.3'%2F%3E%3C%2Fsvg%3E");
--ic-cart:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'9'%20cy%3D'20'%20r%3D'1'%2F%3E%3Ccircle%20cx%3D'18'%20cy%3D'20'%20r%3D'1'%2F%3E%3Cpath%20d%3D'M2%203h3l2.7%2012.4a2%202%200%200%200%202%201.6h7.7a2%202%200%200%200%202-1.5L21%207H6'%2F%3E%3C%2Fsvg%3E");
--ic-heart:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2021s-8-5-8-11a4.5%204.5%200%200%201%208-2.8A4.5%204.5%200%200%201%2020%2010c0%206-8%2011-8%2011z'%2F%3E%3C%2Fsvg%3E");
--ic-menu:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%206h16M4%2012h16M4%2018h16'%2F%3E%3C%2Fsvg%3E");
--ic-close:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6%206l12%2012M18%206L6%2018'%2F%3E%3C%2Fsvg%3E");
--ic-plus:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%205v14M5%2012h14'%2F%3E%3C%2Fsvg%3E");
--ic-minus:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M5%2012h14'%2F%3E%3C%2Fsvg%3E");
--ic-check:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M5%2012.5l4.5%204.5L19%207'%2F%3E%3C%2Fsvg%3E");
--ic-chevron-down:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6%209l6%206%206-6'%2F%3E%3C%2Fsvg%3E");
--ic-chevron-right:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M9%206l6%206-6%206'%2F%3E%3C%2Fsvg%3E");
--ic-chevron-left:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M15%206l-6%206%206%206'%2F%3E%3C%2Fsvg%3E");
--ic-truck:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M3%206h11v10H3zM14%2010h4l3%203v3h-7'%2F%3E%3Ccircle%20cx%3D'7'%20cy%3D'18'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'17'%20cy%3D'18'%20r%3D'2'%2F%3E%3C%2Fsvg%3E");
--ic-user:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'8'%20r%3D'4'%2F%3E%3Cpath%20d%3D'M4%2021c0-4%204-6%208-6s8%202%208%206'%2F%3E%3C%2Fsvg%3E");
--ic-filter:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M3%205h18l-7%208v6l-4-2v-4z'%2F%3E%3C%2Fsvg%3E");
--ic-trash:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%207h16M9%207V4h6v3M6%207l1%2013h10l1-13'%2F%3E%3C%2Fsvg%3E");
--ic-info:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'9'%2F%3E%3Cpath%20d%3D'M12%2011v5M12%208h.01'%2F%3E%3C%2Fsvg%3E");
--ic-alert:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%203l10%2018H2z'%2F%3E%3Cpath%20d%3D'M12%2010v4M12%2017.5h.01'%2F%3E%3C%2Fsvg%3E");
--ic-lock:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'5'%20y%3D'11'%20width%3D'14'%20height%3D'10'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M8%2011V8a4%204%200%200%201%208%200v3'%2F%3E%3C%2Fsvg%3E");
--ic-package:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M3%208l9-5%209%205v8l-9%205-9-5zM3%208l9%205%209-5M12%2013v8'%2F%3E%3C%2Fsvg%3E");
--ic-clock:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'9'%2F%3E%3Cpath%20d%3D'M12%207v5l3%202'%2F%3E%3C%2Fsvg%3E");
--ic-sparkle:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%203l2%206%206%202-6%202-2%206-2-6-6-2%206-2z'%2F%3E%3C%2Fsvg%3E");
--ic-eye:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M2%2012s4-7%2010-7%2010%207%2010%207-4%207-10%207S2%2012%202%2012z'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'3'%2F%3E%3C%2Fsvg%3E");
--ic-heart-fill:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'black'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2021s-8-5-8-11a4.5%204.5%200%200%201%208-2.8A4.5%204.5%200%200%201%2020%2010c0%206-8%2011-8%2011z'%2F%3E%3C%2Fsvg%3E");
--ic-star:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'black'%3E%3Cpath%20d%3D'M12%202.5l2.9%206.2%206.6.8-4.9%204.6%201.3%206.6L12%2017.4l-5.9%203.3%201.3-6.6L2.5%209.5l6.6-.8z'%2F%3E%3C%2Fsvg%3E");
--art-shroom:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20200%20200'%3E%3Cellipse%20cx%3D'100'%20cy%3D'178'%20rx%3D'54'%20ry%3D'8'%20fill%3D'%231f1b2e'%20opacity%3D'.12'%2F%3E%3Crect%20x%3D'84'%20y%3D'98'%20width%3D'32'%20height%3D'74'%20rx%3D'14'%20fill%3D'%23fbf3e3'%2F%3E%3Cpath%20d%3D'M34%20106C34%2058%2064%2030%20100%2030s66%2028%2066%2076z'%20fill%3D'%237b57d6'%2F%3E%3Ccircle%20cx%3D'72'%20cy%3D'72'%20r%3D'9'%20fill%3D'%23efeafb'%2F%3E%3Ccircle%20cx%3D'114'%20cy%3D'54'%20r%3D'7'%20fill%3D'%23efeafb'%2F%3E%3Ccircle%20cx%3D'136'%20cy%3D'84'%20r%3D'10'%20fill%3D'%23efeafb'%2F%3E%3Cpath%20d%3D'M34%20106h132'%20stroke%3D'%235a37ad'%20stroke-width%3D'6'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M90%20130h20M90%20142h20M90%20154h20'%20stroke%3D'%23e4d5b3'%20stroke-width%3D'2'%2F%3E%3C%2Fsvg%3E");
--art-cat:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20200%20200'%3E%3Cellipse%20cx%3D'100'%20cy%3D'178'%20rx%3D'54'%20ry%3D'8'%20fill%3D'%231f1b2e'%20opacity%3D'.12'%2F%3E%3Cpath%20d%3D'M58%20172c-14-4-20-28-10-52%208-20%2024-30%2052-30s44%2010%2052%2030c10%2024%204%2048-10%2052z'%20fill%3D'%238fdcc6'%2F%3E%3Ccircle%20cx%3D'100'%20cy%3D'74'%20r%3D'34'%20fill%3D'%238fdcc6'%2F%3E%3Cpath%20d%3D'M70%2054L64%2022l28%2014zM130%2054l6-32-28%2014z'%20fill%3D'%238fdcc6'%2F%3E%3Cpath%20d%3D'M72%2046l-2-14%2012%207zM128%2046l2-14-12%207z'%20fill%3D'%23f5a3c6'%2F%3E%3Ccircle%20cx%3D'87'%20cy%3D'76'%20r%3D'5'%20fill%3D'%231f1b2e'%2F%3E%3Ccircle%20cx%3D'113'%20cy%3D'76'%20r%3D'5'%20fill%3D'%231f1b2e'%2F%3E%3Cpath%20d%3D'M96%2087l4%204%204-4z'%20fill%3D'%23e8579a'%2F%3E%3Cpath%20d%3D'M92%2040c0-10%208-14%2014-14s14%204%2014%2014z'%20fill%3D'%23a68bf0'%2F%3E%3Crect%20x%3D'103'%20y%3D'40'%20width%3D'6'%20height%3D'8'%20fill%3D'%23fbf3e3'%2F%3E%3Cpath%20d%3D'M66%20130h68M62%20146h76M64%20160h72'%20stroke%3D'%2355bfa4'%20stroke-width%3D'2.5'%20opacity%3D'.7'%2F%3E%3C%2Fsvg%3E");
--art-vase:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20200%20200'%3E%3Cellipse%20cx%3D'100'%20cy%3D'178'%20rx%3D'54'%20ry%3D'8'%20fill%3D'%231f1b2e'%20opacity%3D'.12'%2F%3E%3Cpath%20d%3D'M80%2038h40l-5%2022c28%2014%2042%2040%2034%2082-4%2022-22%2032-49%2032s-45-10-49-32c-8-42%206-68%2034-82z'%20fill%3D'%23ef7fb0'%2F%3E%3Crect%20x%3D'74'%20y%3D'32'%20width%3D'52'%20height%3D'10'%20rx%3D'5'%20fill%3D'%23d63f86'%2F%3E%3Cpath%20d%3D'M60%20104h80M58%20120h84M58%20136h84M60%20152h80'%20stroke%3D'%23d63f86'%20stroke-width%3D'3'%20opacity%3D'.55'%2F%3E%3C%2Fsvg%3E");
--art-blocks:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20200%20200'%3E%3Cellipse%20cx%3D'100'%20cy%3D'178'%20rx%3D'54'%20ry%3D'8'%20fill%3D'%231f1b2e'%20opacity%3D'.12'%2F%3E%3Crect%20x%3D'46'%20y%3D'108'%20width%3D'54'%20height%3D'56'%20rx%3D'12'%20fill%3D'%23a68bf0'%2F%3E%3Crect%20x%3D'100'%20y%3D'108'%20width%3D'54'%20height%3D'56'%20rx%3D'12'%20fill%3D'%238fdcc6'%2F%3E%3Crect%20x%3D'73'%20y%3D'52'%20width%3D'54'%20height%3D'56'%20rx%3D'12'%20fill%3D'%23ef7fb0'%2F%3E%3Ccircle%20cx%3D'73'%20cy%3D'136'%20r%3D'7'%20fill%3D'%23efeafb'%2F%3E%3Ccircle%20cx%3D'127'%20cy%3D'136'%20r%3D'7'%20fill%3D'%23def5ee'%2F%3E%3Ccircle%20cx%3D'100'%20cy%3D'80'%20r%3D'7'%20fill%3D'%23fde6f0'%2F%3E%3C%2Fsvg%3E");
--art-pot:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20200%20200'%3E%3Cellipse%20cx%3D'100'%20cy%3D'178'%20rx%3D'54'%20ry%3D'8'%20fill%3D'%231f1b2e'%20opacity%3D'.12'%2F%3E%3Cpath%20d%3D'M100%20100c-2-26%208-44%2030-50-2%2022-12%2040-30%2050zM100%20100c2-20-6-34-24-40%200%2018%208%2032%2024%2040z'%20fill%3D'%2355bfa4'%2F%3E%3Cpath%20d%3D'M54%20104h92l-10%2062a10%2010%200%200%201-10%208H74a10%2010%200%200%201-10-8z'%20fill%3D'%23fbf3e3'%2F%3E%3Cpath%20d%3D'M60%20124h80M62%20140h76M64%20156h72'%20stroke%3D'%23e4d5b3'%20stroke-width%3D'3'%2F%3E%3Crect%20x%3D'50'%20y%3D'98'%20width%3D'100'%20height%3D'12'%20rx%3D'6'%20fill%3D'%23a68bf0'%2F%3E%3C%2Fsvg%3E");
}
.cs-i--search{--ic:var(--ic-search)}
.cs-i--cart{--ic:var(--ic-cart)}
.cs-i--heart{--ic:var(--ic-heart)}
.cs-i--menu{--ic:var(--ic-menu)}
.cs-i--close{--ic:var(--ic-close)}
.cs-i--plus{--ic:var(--ic-plus)}
.cs-i--minus{--ic:var(--ic-minus)}
.cs-i--check{--ic:var(--ic-check)}
.cs-i--chevron-down{--ic:var(--ic-chevron-down)}
.cs-i--chevron-right{--ic:var(--ic-chevron-right)}
.cs-i--chevron-left{--ic:var(--ic-chevron-left)}
.cs-i--truck{--ic:var(--ic-truck)}
.cs-i--user{--ic:var(--ic-user)}
.cs-i--filter{--ic:var(--ic-filter)}
.cs-i--trash{--ic:var(--ic-trash)}
.cs-i--info{--ic:var(--ic-info)}
.cs-i--alert{--ic:var(--ic-alert)}
.cs-i--lock{--ic:var(--ic-lock)}
.cs-i--package{--ic:var(--ic-package)}
.cs-i--clock{--ic:var(--ic-clock)}
.cs-i--sparkle{--ic:var(--ic-sparkle)}
.cs-i--eye{--ic:var(--ic-eye)}
.cs-art--shroom{--art:var(--art-shroom)}
.cs-art--cat{--art:var(--art-cat)}
.cs-art--vase{--art:var(--art-vase)}
.cs-art--blocks{--art:var(--art-blocks)}
.cs-art--pot{--art:var(--art-pot)}
/* ===== Catshroom Store — componentes. Convenção: cs-<bloco>__<elemento>--<modificador>.
   Camada 3 de tokens (por componente) no :root abaixo; só referenciam tokens semânticos. ===== */
:root{
  --btn-h:var(--h-control-md); --btn-px:var(--space-5); --btn-radius:var(--radius-pill);
  --field-h:var(--h-control-md); --field-radius:var(--radius-md); --field-border:var(--border-strong);
  --card-radius:var(--radius-lg); --card-pad:var(--space-4); --card-gap:var(--space-3); --stage-radius:var(--radius-md);
  --badge-radius:var(--radius-pill); --chip-h:36px; --grid-gap:var(--space-6); --cols:2;
  --page-gutter:var(--space-4); --section-gap:var(--space-10);
  --ring:var(--border-focus) solid var(--focus-ring);
}
@media (min-width:768px){:root{--cols:3;--section-gap:var(--space-12)}}
@media (min-width:1024px){:root{--cols:4;--page-gutter:var(--space-10);--section-gap:var(--space-16);--btn-px:var(--space-6)}}
@media (min-width:1600px){:root{--cols:5}}
@media (min-width:2200px){:root{--cols:6;--section-gap:var(--space-20)}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg-page);color:var(--ink);font:400 16px/24px var(--font-sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3,h4,p{margin:0}
a{color:var(--link)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:var(--ring);outline-offset:2px}
.label{text-transform:uppercase}
.cs-muted{color:var(--ink-muted)}
.cs-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cs-skip{position:absolute;left:var(--space-2);top:-60px;background:var(--ink);color:var(--ink-inverse);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);z-index:var(--z-toast)}
.cs-skip:focus{top:var(--space-2)}

/* ---- layout */
.cs-container{width:100%;max-width:var(--container-content);margin-inline:auto;padding-inline:max(var(--page-gutter),env(safe-area-inset-left,0px))}
@media (min-width:1600px){.cs-container{max-width:var(--container-wide)}}
@media (min-width:2200px){.cs-container{max-width:var(--container-ultra)}}
.cs-container--narrow{max-width:var(--container-narrow)!important}
.cs-section{padding-block:var(--section-gap)}
.cs-section--alt{background:var(--bg-alt)}
.cs-section-head{display:flex;align-items:end;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-6)}
.cs-grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--grid-gap)}
.cs-prose{max-width:var(--measure)}
.cs-row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.cs-stack{display:flex;flex-direction:column;gap:var(--space-4)}
.cs-layers{position:relative}
.cs-layers::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;pointer-events:none;background:repeating-linear-gradient(to top,var(--layer-line) 0 1px,transparent 1px 6px);-webkit-mask-image:linear-gradient(to top,#000,transparent);mask-image:linear-gradient(to top,#000,transparent)}

/* ---- icons (máscara: herdam currentColor) */
.cs-i{display:inline-block;flex:none;width:var(--icon-md);height:var(--icon-md);background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.cs-i--lg{width:var(--icon-lg);height:var(--icon-lg)}

/* ---- button */
.cs-btn{--bg:var(--primary);--fg:var(--on-primary);--bd:transparent;--edge:var(--primary-edge);--hbg:var(--primary-hover);--abg:var(--primary-active);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--btn-h);padding:0 var(--btn-px);
  border:var(--border-2) solid var(--bd);border-radius:var(--btn-radius);background:var(--bg);color:var(--fg);font:700 14px/20px var(--font-sans);
  text-decoration:none;cursor:pointer;white-space:nowrap;box-shadow:0 3px 0 0 var(--edge);transform:translateY(0);
  transition:background var(--duration-fast) var(--ease-out),transform var(--duration-instant) var(--ease-out),box-shadow var(--duration-instant) var(--ease-out),color var(--duration-fast) var(--ease-out)}
.cs-btn:hover{background:var(--hbg);transform:translateY(-1px);box-shadow:0 4px 0 0 var(--edge)}
.cs-btn:active{background:var(--abg);transform:translateY(2px);box-shadow:0 1px 0 0 var(--edge)}
.cs-btn--accent{--bg:var(--accent);--fg:var(--on-accent);--edge:var(--accent-edge);--hbg:var(--accent-hover);--abg:var(--accent-hover)}
.cs-btn--secondary{--bg:transparent;--fg:var(--ink);--bd:var(--ink);--hbg:var(--hover-surface);--abg:var(--active-surface);box-shadow:none}
.cs-btn--secondary:hover,.cs-btn--secondary:active{box-shadow:none}
.cs-btn--tertiary{--bg:transparent;--fg:var(--link);--hbg:var(--hover-surface);--abg:var(--active-surface);box-shadow:none;padding-inline:var(--space-3)}
.cs-btn--tertiary:hover,.cs-btn--tertiary:active{box-shadow:none;transform:none}
.cs-btn--danger{--bg:var(--error);--fg:var(--on-error);--hbg:var(--error-hover);--abg:var(--error-hover);box-shadow:none}
.cs-btn--danger:hover,.cs-btn--danger:active{box-shadow:none}
.cs-btn--sm{min-height:var(--h-control-sm);padding-inline:var(--space-4);font-size:13px;line-height:16px}
.cs-btn--lg{min-height:var(--h-control-lg);font-size:16px;padding-inline:var(--space-8)}
.cs-btn--block{width:100%}
.cs-btn--icon{width:var(--btn-h);padding:0}
.cs-btn--icon.cs-btn--sm{width:var(--h-control-sm)}
.cs-btn[disabled],.cs-btn[aria-disabled=true]{--bg:var(--disabled-bg);--fg:var(--disabled-ink);--bd:transparent;box-shadow:none;transform:none;cursor:not-allowed}
.cs-btn[aria-busy=true]{pointer-events:none}
.cs-btn[aria-busy=true]>.cs-btn__label{opacity:.0}
.cs-btn[aria-busy=true]::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;border:3px solid currentColor;border-right-color:transparent;animation:cs-spin .7s linear infinite}
.cs-btn[data-state=added]{--bg:var(--secondary);--fg:var(--on-secondary);--edge:var(--secondary-hover);--hbg:var(--secondary-hover)}
@keyframes cs-spin{to{transform:rotate(360deg)}}

/* ---- fields */
.cs-field{display:flex;flex-direction:column;gap:var(--space-2)}
.cs-field__label{font:600 14px/20px var(--font-sans)}
.cs-field__hint{font:400 13px/18px var(--font-sans);color:var(--ink-muted)}
.cs-field__error{display:flex;gap:var(--space-1);align-items:flex-start;font:600 13px/18px var(--font-sans);color:var(--error)}
.cs-input,.cs-select,.cs-textarea{width:100%;min-height:var(--field-h);padding:0 var(--space-4);background:var(--surface);color:var(--ink);border:var(--border-2) solid var(--field-border);border-radius:var(--field-radius);font:400 16px/24px var(--font-sans);transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}
.cs-textarea{padding-block:var(--space-3);min-height:96px;resize:vertical}
.cs-input::placeholder{color:var(--ink-muted);opacity:1}
.cs-input:hover,.cs-select:hover,.cs-textarea:hover{border-color:var(--ink)}
.cs-input:focus,.cs-select:focus,.cs-textarea:focus{outline:var(--ring);outline-offset:1px;border-color:var(--primary)}
.cs-input[aria-invalid=true]{border-color:var(--error)}
.cs-input[aria-invalid=true]:focus{border-color:var(--error)}
.cs-input:disabled,.cs-select:disabled{background:var(--disabled-bg);color:var(--disabled-ink);border-color:transparent;cursor:not-allowed}
.cs-input--lg{--field-h:var(--h-control-lg)}
.cs-select-wrap{position:relative}
.cs-select{appearance:none;-webkit-appearance:none;padding-right:var(--space-10)}
.cs-select-wrap::after{content:"";position:absolute;right:var(--space-4);top:50%;width:20px;height:20px;margin-top:-10px;pointer-events:none;background:var(--ink);-webkit-mask:var(--ic-chevron-down) center/contain no-repeat;mask:var(--ic-chevron-down) center/contain no-repeat}
.cs-input-icon{position:relative}
.cs-input-icon>.cs-i{position:absolute;left:var(--space-4);top:50%;margin-top:-10px;color:var(--ink-muted);pointer-events:none}
.cs-input-icon>.cs-input{padding-left:var(--space-10)}
.cs-check{display:flex;align-items:center;gap:var(--space-3);min-height:40px;cursor:pointer;font:400 15px/22px var(--font-sans)}
.cs-check input{appearance:none;-webkit-appearance:none;flex:none;display:grid;place-content:center;width:22px;height:22px;margin:0;background:var(--surface);border:var(--border-2) solid var(--border-strong);border-radius:6px;cursor:pointer;transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out)}
.cs-check input[type=radio]{border-radius:50%}
.cs-check input::after{content:"";width:14px;height:14px;background:var(--on-primary);-webkit-mask:var(--ic-check) center/contain no-repeat;mask:var(--ic-check) center/contain no-repeat;transform:scale(0);transition:transform var(--duration-fast) var(--ease-spring)}
.cs-check input[type=radio]::after{width:8px;height:8px;border-radius:50%;-webkit-mask:none;mask:none}
.cs-check input:checked{background:var(--primary);border-color:var(--primary)}
.cs-check input:checked::after{transform:scale(1)}
.cs-check input:hover{border-color:var(--primary)}
.cs-check input:disabled{background:var(--disabled-bg);border-color:transparent;cursor:not-allowed}
.cs-check input:disabled~span{color:var(--disabled-ink)}
.cs-check__count{margin-left:auto;color:var(--ink-muted);font-size:13px}
.cs-switch{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:var(--touch-min);cursor:pointer;font:400 15px/22px var(--font-sans)}
.cs-switch input{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:48px;height:28px;margin:0;border-radius:var(--radius-pill);background:var(--surface);border:var(--border-2) solid var(--border-strong);cursor:pointer;transition:background var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out)}
.cs-switch input::before{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--ink);transition:transform var(--duration-base) var(--ease-spring),background var(--duration-base) var(--ease-out)}
.cs-switch input:checked{background:var(--primary);border-color:var(--primary)}
.cs-switch input:checked::before{transform:translateX(20px);background:var(--on-primary)}
.cs-switch input:disabled{opacity:.5;cursor:not-allowed}

/* ---- badge */
.cs-badge{display:inline-flex;align-items:center;gap:var(--space-1);min-height:24px;padding:2px 10px;border-radius:var(--badge-radius);background:var(--primary-subtle);color:var(--primary-strong);font:700 12px/16px var(--font-sans);letter-spacing:.02em;white-space:nowrap}
.cs-badge .cs-i{width:14px;height:14px}
.cs-badge--limited{background:var(--ink);color:var(--ink-inverse)}
.cs-badge--sale{background:var(--accent-subtle);color:var(--accent-strong)}
.cs-badge--ok{background:var(--secondary-subtle);color:var(--secondary-strong)}
.cs-badge--low{background:var(--warning-subtle);color:var(--warning)}
.cs-badge--out{background:var(--disabled-bg);color:var(--ink-muted)}
.cs-badge--error{background:var(--error-subtle);color:var(--error)}
.cs-badge--info{background:var(--info-subtle);color:var(--info)}
.cs-dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}

/* ---- price / rating */
.cs-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-1) var(--space-2)}
.cs-price__now{font:800 22px/28px var(--font-display);font-variant-numeric:tabular-nums}
.cs-price--lg .cs-price__now{font-size:32px;line-height:36px}
.cs-price--sm .cs-price__now{font:700 16px/20px var(--font-display)}
.cs-price__now--sale{color:var(--accent-strong)}
.cs-price__old{font:500 14px/20px var(--font-sans);color:var(--ink-muted);text-decoration:line-through;font-variant-numeric:tabular-nums}
.cs-price__inst{flex-basis:100%;font:500 12px/16px var(--font-sans);color:var(--ink-muted)}
.cs-stars{--r:4.5;display:inline-block;width:80px;height:16px;flex:none;background:linear-gradient(90deg,var(--rating) calc(var(--r)/5*100%),var(--border-strong) 0);-webkit-mask:var(--ic-star) left/16px 16px repeat-x;mask:var(--ic-star) left/16px 16px repeat-x}
.cs-rating{display:inline-flex;align-items:center;gap:var(--space-2);font:600 13px/16px var(--font-sans)}
.cs-rating small{font:500 13px/16px var(--font-sans);color:var(--ink-muted)}

/* ---- product art (marcador: troque por foto ou render reais) */
.cs-art{position:absolute;inset:0;background:var(--art) center 58%/66% no-repeat;transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-slow) var(--ease-out)}
.cs-art--b{opacity:0}

/* ---- product card */
.cs-card{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--surface);border:var(--border-1) solid var(--border);border-radius:var(--card-radius);padding:var(--space-2) var(--space-2) var(--card-pad);gap:var(--card-gap);box-shadow:var(--shadow-1);transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out)}
.cs-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-layer)}
.cs-card__stage{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--stage);border-radius:var(--stage-radius)}
.cs-card__stage::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;pointer-events:none;background:repeating-linear-gradient(to top,var(--layer-line) 0 1px,transparent 1px 6px);-webkit-mask-image:linear-gradient(to top,#000,transparent);mask-image:linear-gradient(to top,#000,transparent)}
.cs-card:hover .cs-art--a:not(:only-child){opacity:0}
.cs-card:hover .cs-art--b{opacity:1}
.cs-card:hover .cs-art--a:only-child{transform:scale(1.04)}
.cs-card__badges{position:absolute;left:var(--space-2);top:var(--space-2);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-1);z-index:var(--z-raised)}
.cs-card__fav{position:absolute;right:var(--space-2);top:var(--space-2);z-index:var(--z-raised)}
.cs-card__quick{position:absolute;left:var(--space-2);right:var(--space-2);bottom:var(--space-2);z-index:var(--z-raised);display:flex;gap:var(--space-2);opacity:0;transform:translateY(8px);transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out)}
.cs-card:hover .cs-card__quick,.cs-card:focus-within .cs-card__quick{opacity:1;transform:none}
@media (hover:none){.cs-card__quick{opacity:1;transform:none;position:static;padding:0 var(--space-2)}.cs-card__stage{margin-bottom:0}}
.cs-card__body{display:flex;flex-direction:column;gap:var(--space-1);padding:0 var(--space-2)}
.cs-card__cat{color:var(--ink-muted)}
.cs-card__title{font:700 18px/24px var(--font-display)}
.cs-card__title a{color:inherit;text-decoration:none}
.cs-card__title a::after{content:"";position:absolute;inset:0;z-index:var(--z-base)}
.cs-card__meta{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-1)}
.cs-card--compact{--card-pad:var(--space-2);--card-gap:var(--space-2)}
.cs-card--compact .cs-card__stage{aspect-ratio:1/1}
.cs-card--compact .cs-card__title{font-size:15px;line-height:20px}
.cs-card--compact .cs-card__quick,.cs-card--compact .cs-card__cat{display:none}
.cs-card--wide{flex-direction:row;align-items:stretch;gap:var(--space-5);padding:var(--space-2) var(--space-5) var(--space-2) var(--space-2)}
.cs-card--wide .cs-card__stage{flex:0 0 32%;aspect-ratio:1/1}
.cs-card--wide .cs-card__body{flex:1;justify-content:center;gap:var(--space-2)}
.cs-card--wide .cs-card__quick{position:static;opacity:1;transform:none;padding:0}
@media (max-width:560px){.cs-card--wide{flex-direction:column;padding:var(--space-2) var(--space-2) var(--space-4)}.cs-card--wide .cs-card__stage{flex:none;width:100%}}
.cs-fav{display:grid;place-items:center;width:var(--touch-min);height:var(--touch-min);border:0;border-radius:50%;background:var(--surface);color:var(--ink);cursor:pointer;box-shadow:var(--shadow-1);transition:transform var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out)}
.cs-fav:hover{background:var(--hover-surface)}
.cs-fav[aria-pressed=true]{color:var(--accent-strong)}
.cs-fav[aria-pressed=true] .cs-i{-webkit-mask-image:var(--ic-heart-fill);mask-image:var(--ic-heart-fill);animation:cs-pop var(--duration-slow) var(--ease-spring)}
@keyframes cs-pop{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:scale(1)}}

/* ---- gallery / variants */
.cs-gallery{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--space-3)}
.cs-gallery__main{position:relative;aspect-ratio:1/1;background:var(--stage);border-radius:var(--radius-xl);overflow:hidden;grid-column:2;grid-row:1}
.cs-gallery__thumbs{display:flex;flex-direction:column;gap:var(--space-2);grid-column:1;grid-row:1}
.cs-thumb{position:relative;width:72px;height:72px;padding:0;overflow:hidden;background:var(--stage);border:var(--border-2) solid transparent;border-radius:var(--radius-sm);cursor:pointer}
.cs-thumb .cs-art{background-size:76%}
.cs-thumb[aria-current=true]{border-color:var(--primary)}
.cs-gallery__count{position:absolute;right:var(--space-3);bottom:var(--space-3);padding:2px 10px;border-radius:var(--radius-pill);background:var(--surface);font:600 12px/16px var(--font-sans);box-shadow:var(--shadow-1)}
@media (max-width:640px){.cs-gallery{grid-template-columns:1fr}.cs-gallery__main{grid-column:1;border-radius:var(--radius-lg)}.cs-gallery__thumbs{grid-column:1;grid-row:2;flex-direction:row;overflow-x:auto}.cs-thumb{flex:none}}
.cs-variants{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.cs-variants legend{padding:0;margin-bottom:var(--space-2);font:600 14px/20px var(--font-sans)}
.cs-variants__row{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.cs-swatch,.cs-opt{position:relative;display:inline-flex}
.cs-swatch input,.cs-opt input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.cs-swatch>span{display:block;width:var(--touch-min);height:var(--touch-min);border-radius:50%;background:var(--c);border:var(--border-1) solid var(--border-strong);box-shadow:inset 0 0 0 3px var(--surface)}
.cs-swatch input:checked+span{border:var(--border-2) solid var(--ink);box-shadow:inset 0 0 0 3px var(--surface),0 0 0 2px var(--surface)}
.cs-swatch input:focus-visible+span,.cs-opt input:focus-visible+span{outline:var(--ring);outline-offset:2px}
.cs-swatch input:disabled+span{opacity:.4;background-image:linear-gradient(135deg,transparent 46%,var(--ink) 47% 53%,transparent 54%)}
.cs-opt>span{display:inline-flex;align-items:center;min-height:var(--touch-min);padding:0 var(--space-4);border:var(--border-2) solid var(--border-strong);border-radius:var(--radius-pill);background:var(--surface);font:600 14px/20px var(--font-sans)}
.cs-opt input:checked+span{border-color:var(--primary);background:var(--primary-subtle);color:var(--primary-strong)}
.cs-opt input:disabled+span{color:var(--disabled-ink);text-decoration:line-through;border-style:dashed;background:transparent}
.cs-qty{display:inline-flex;align-items:center;border:var(--border-2) solid var(--border-strong);border-radius:var(--radius-pill);background:var(--surface)}
.cs-qty button{width:var(--touch-min);height:calc(var(--touch-min) - 4px);border:0;background:none;color:var(--ink);border-radius:var(--radius-pill);cursor:pointer}
.cs-qty button:hover{background:var(--hover-surface)}
.cs-qty output{min-width:28px;text-align:center;font:700 15px/20px var(--font-sans);font-variant-numeric:tabular-nums}
.cs-qty--sm button{width:36px;height:32px}

/* ---- alerts / toast / progress */
.cs-alert{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--info-subtle);color:var(--info);font:600 14px/20px var(--font-sans)}
.cs-alert>.cs-i{margin-top:0}
.cs-alert__text{color:var(--ink);font-weight:400}
.cs-alert__text strong{color:inherit;font-weight:700}
.cs-alert--success{background:var(--success-subtle);color:var(--success)}
.cs-alert--warning{background:var(--warning-subtle);color:var(--warning)}
.cs-alert--error{background:var(--error-subtle);color:var(--error)}
.cs-toast{display:flex;align-items:center;gap:var(--space-3);min-width:280px;max-width:420px;padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--ink);color:var(--ink-inverse);box-shadow:var(--shadow-3);font:500 14px/20px var(--font-sans);animation:cs-toast-in var(--duration-slow) var(--ease-out)}
.cs-toast__icon{color:var(--secondary)}
.cs-toast__msg{flex:1}
.cs-toast .cs-btn{--fg:var(--ink-inverse);--hbg:#ffffff26;--abg:#ffffff40;min-height:var(--h-control-sm)}
.cs-toast--error .cs-toast__icon{color:var(--error)}
@keyframes cs-toast-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cs-progress{--v:60;height:12px;border-radius:var(--radius-pill);background:var(--border);overflow:hidden}
.cs-progress>i{display:block;height:100%;width:calc(var(--v)*1%);border-radius:inherit;background:var(--secondary);transition:width var(--duration-slow) var(--ease-out);background-image:repeating-linear-gradient(to bottom,transparent 0 3px,#ffffff33 3px 4px)}
.cs-progress--primary>i{background-color:var(--primary)}
.cs-benefit{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--secondary-subtle);color:var(--ink);font:500 14px/20px var(--font-sans)}
.cs-benefit strong{color:var(--secondary-strong)}
.cs-skel{display:block;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--hover-surface) 0 35%,var(--active-surface) 50%,var(--hover-surface) 65% 100%) 0 0/300% 100%;animation:cs-shimmer var(--duration-loop) linear infinite}
@keyframes cs-shimmer{to{background-position:-300% 0}}
.cs-loader{display:inline-flex;flex-direction:column-reverse;gap:3px;width:34px}
.cs-loader i{display:block;height:6px;border-radius:3px;background:var(--primary);opacity:.2;animation:cs-layer var(--duration-loop) var(--ease-in-out) infinite}
.cs-loader i:nth-child(2){animation-delay:.18s;width:88%}
.cs-loader i:nth-child(3){animation-delay:.36s;width:70%}
@keyframes cs-layer{0%,100%{opacity:.2}40%,60%{opacity:1}}

/* ---- header / navigation */
.cs-header{position:sticky;top:0;z-index:var(--z-sticky);background:var(--surface);border-bottom:var(--border-1) solid var(--border)}
.cs-promo{background:var(--ink);color:var(--ink-inverse);text-align:center;padding:var(--space-2) var(--space-4);font:600 13px/18px var(--font-sans)}
.cs-header__bar{display:flex;align-items:center;gap:var(--space-3);min-height:68px}
.cs-header__logo{display:flex;align-items:center;flex:none}
.cs-header__logo img{height:44px;width:auto}
.cs-header__search{flex:1;min-width:0;display:none}
.cs-header__actions{display:flex;align-items:center;gap:var(--space-1);margin-left:auto}
.cs-header__menu{display:inline-grid}
.cs-iconbtn{position:relative;display:inline-grid;place-items:center;width:var(--touch-min);height:var(--touch-min);border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer;text-decoration:none;transition:background var(--duration-fast) var(--ease-out)}
.cs-iconbtn:hover{background:var(--hover-surface)}
.cs-iconbtn:active{background:var(--active-surface)}
.cs-iconbtn__n{position:absolute;right:2px;top:2px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--accent);color:var(--on-accent);font:800 11px/18px var(--font-sans);text-align:center}
.cs-nav{display:none;gap:var(--space-1);padding-bottom:var(--space-2)}
.cs-nav a{position:relative;display:inline-flex;align-items:center;gap:var(--space-1);min-height:var(--h-control-sm);padding:0 var(--space-4);border-radius:var(--radius-pill);color:var(--ink);font:700 15px/20px var(--font-sans);text-decoration:none;transition:background var(--duration-fast) var(--ease-out)}
.cs-nav a:hover{background:var(--hover-surface)}
.cs-nav a[aria-current=page]{background:var(--primary-subtle);color:var(--primary-strong)}
.cs-nav .cs-i{width:16px;height:16px}
@media (min-width:1024px){.cs-header__search{display:block;max-width:560px;margin-inline:var(--space-6)}.cs-nav{display:flex}.cs-header__menu{display:none}}
.cs-mega{display:grid;grid-template-columns:repeat(3,1fr) 1.2fr;gap:var(--space-8);padding:var(--space-6) var(--space-8);background:var(--surface-raised);border:var(--border-1) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-2)}
.cs-mega h4{margin-bottom:var(--space-3)}
.cs-mega ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.cs-mega li a{display:block;padding:6px var(--space-2);margin-inline:calc(var(--space-2)*-1);border-radius:var(--radius-sm);color:var(--ink);text-decoration:none;font:500 15px/22px var(--font-sans)}
.cs-mega li a:hover{background:var(--hover-surface)}
.cs-mega__feature{position:relative;min-height:180px;border-radius:var(--radius-md);background:var(--stage);overflow:hidden}
.cs-menu{list-style:none;margin:0;padding:var(--space-2);min-width:220px;background:var(--surface-raised);border:var(--border-1) solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-2)}
.cs-menu a{display:flex;align-items:center;gap:var(--space-3);min-height:40px;padding:0 var(--space-3);border-radius:var(--radius-sm);color:var(--ink);text-decoration:none;font:500 15px/20px var(--font-sans)}
.cs-menu a:hover{background:var(--hover-surface)}
.cs-drawer-nav{display:flex;flex-direction:column;background:var(--surface);width:min(86vw,360px);height:100%;box-shadow:var(--shadow-3)}
.cs-drawer-nav a{display:flex;justify-content:space-between;align-items:center;min-height:var(--h-control-lg);padding:0 var(--space-5);border-bottom:var(--border-1) solid var(--border);color:var(--ink);text-decoration:none;font:700 18px/24px var(--font-display)}
.cs-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);list-style:none;margin:0;padding:0;font:500 14px/20px var(--font-sans);color:var(--ink-muted)}
.cs-crumbs li{display:flex;align-items:center;gap:var(--space-1)}
.cs-crumbs li+li::before{content:"";width:14px;height:14px;background:var(--ink-muted);-webkit-mask:var(--ic-chevron-right) center/contain no-repeat;mask:var(--ic-chevron-right) center/contain no-repeat}
.cs-crumbs a{display:inline-flex;align-items:center;min-height:32px;color:var(--ink-muted);text-underline-offset:3px}
.cs-crumbs a:hover{color:var(--ink)}
.cs-crumbs [aria-current=page]{color:var(--ink);font-weight:700}
.cs-pager{display:flex;align-items:center;justify-content:center;gap:var(--space-1);list-style:none;margin:0;padding:0}
.cs-pager a,.cs-pager span{display:inline-grid;place-items:center;min-width:var(--touch-min);height:var(--touch-min);padding:0 var(--space-2);border-radius:var(--radius-pill);color:var(--ink);text-decoration:none;font:700 15px/20px var(--font-sans);font-variant-numeric:tabular-nums}
.cs-pager a:hover{background:var(--hover-surface)}
.cs-pager [aria-current=page]{background:var(--primary);color:var(--on-primary)}
.cs-pager [aria-disabled=true]{color:var(--disabled-ink);pointer-events:none}
.cs-footer{background:var(--ink);color:var(--ink-inverse);padding-block:var(--space-12) var(--space-8)}
.cs-footer a{color:var(--ink-inverse);text-underline-offset:3px}
.cs-footer__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--space-8)}
.cs-footer h4{margin-bottom:var(--space-3);opacity:.7}
.cs-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-1)}
.cs-footer li a{display:inline-flex;align-items:center;min-height:32px;font:500 15px/20px var(--font-sans)}
.cs-footer__legal{margin-top:var(--space-10);padding-top:var(--space-5);border-top:var(--border-1) solid #ffffff33;display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3);opacity:.8}

/* ---- search / filters */
.cs-suggest{background:var(--surface-raised);border:var(--border-1) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);padding:var(--space-2);overflow:hidden}
.cs-suggest h4{padding:var(--space-2) var(--space-3);color:var(--ink-muted)}
.cs-suggest ul{list-style:none;margin:0;padding:0}
.cs-suggest li{display:flex;align-items:center;gap:var(--space-3);min-height:44px;padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);cursor:pointer;font:500 15px/20px var(--font-sans)}
.cs-suggest li:hover,.cs-suggest li[aria-selected=true]{background:var(--primary-subtle)}
.cs-suggest li .cs-i{color:var(--ink-muted)}
.cs-suggest mark{background:none;color:var(--primary-strong);font-weight:800}
.cs-suggest__thumb{position:relative;flex:none;width:44px;height:44px;border-radius:var(--radius-sm);background:var(--stage);overflow:hidden}
.cs-suggest__thumb .cs-art{background-size:80%}
.cs-chip{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--chip-h);padding:0 var(--space-4);border:var(--border-2) solid var(--border-strong);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);font:600 14px/20px var(--font-sans);cursor:pointer;text-decoration:none;transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out)}
.cs-chip:hover{border-color:var(--ink)}
.cs-chip[aria-pressed=true],.cs-chip--active{background:var(--primary-subtle);border-color:var(--primary);color:var(--primary-strong)}
.cs-chip .cs-i{width:16px;height:16px}
.cs-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.cs-filter{border-bottom:var(--border-1) solid var(--border);padding-block:var(--space-4)}
.cs-filter summary{display:flex;justify-content:space-between;align-items:center;min-height:var(--touch-min);cursor:pointer;list-style:none;font:700 16px/24px var(--font-display)}
.cs-filter summary::-webkit-details-marker{display:none}
.cs-filter summary::after{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:var(--ic-chevron-down) center/contain no-repeat;mask:var(--ic-chevron-down) center/contain no-repeat;transition:transform var(--duration-base) var(--ease-out)}
.cs-filter[open] summary::after{transform:rotate(180deg)}
.cs-filter__body{display:flex;flex-direction:column;gap:2px;padding-top:var(--space-2)}
.cs-listbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;padding-block:var(--space-3)}
.cs-layout{display:grid;gap:var(--space-8);grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){.cs-layout{grid-template-columns:264px minmax(0,1fr)}.cs-layout .cs-grid{--cols:3}}
@media (min-width:1600px){.cs-layout .cs-grid{--cols:4}}
@media (min-width:2200px){.cs-layout .cs-grid{--cols:5}}
.cs-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);max-width:420px;margin-inline:auto;padding:var(--space-10) var(--space-4);text-align:center}
.cs-empty img{width:120px;height:auto}
.cs-collection{position:relative;display:flex;align-items:flex-end;min-height:220px;padding:var(--space-5);border-radius:var(--radius-xl);background:var(--bg-c,var(--primary-subtle));color:var(--ink);text-decoration:none;overflow:hidden;transition:transform var(--duration-base) var(--ease-out)}
.cs-collection:hover{transform:translateY(-3px)}
.cs-collection .cs-art{background-position:right 12% center;background-size:46%;left:auto;width:70%}
.cs-collection__t{position:relative;display:flex;flex-direction:column;gap:2px}

/* ---- overlays */
.cs-scrim{position:relative;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:var(--space-6)}
.cs-modal{position:relative;width:min(100%,560px);background:var(--surface-raised);border-radius:var(--radius-xl);box-shadow:var(--shadow-3);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4);animation:cs-modal-in var(--duration-slow) var(--ease-out)}
.cs-modal__close{position:absolute;right:var(--space-3);top:var(--space-3)}
.cs-modal__foot{display:flex;justify-content:flex-end;gap:var(--space-3);flex-wrap:wrap}
@keyframes cs-modal-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.cs-popover{padding:var(--space-4);min-width:240px;max-width:320px;background:var(--surface-raised);border:var(--border-1) solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-2);font:400 14px/20px var(--font-sans)}
.cs-tip{position:relative;display:inline-block}
.cs-tip__bubble{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:max-content;max-width:240px;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);background:var(--ink);color:var(--ink-inverse);font:500 13px/18px var(--font-sans);opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out);z-index:var(--z-tooltip)}
.cs-tip:hover .cs-tip__bubble,.cs-tip:focus-within .cs-tip__bubble,.cs-tip--open .cs-tip__bubble{opacity:1}
.cs-sheet{display:flex;flex-direction:column;width:min(100%,420px);height:100%;background:var(--surface-raised);box-shadow:var(--shadow-3);animation:cs-sheet-in var(--duration-slow) var(--ease-out)}
@keyframes cs-sheet-in{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.cs-sheet__head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:var(--border-1) solid var(--border)}
.cs-sheet__body{flex:1;overflow:auto;padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4)}
.cs-sheet__foot{padding:var(--space-5);border-top:var(--border-1) solid var(--border);display:flex;flex-direction:column;gap:var(--space-3);background:var(--surface-raised)}
.cs-line{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:var(--space-3);align-items:start}
.cs-line__img{position:relative;width:72px;height:72px;background:var(--stage);border-radius:var(--radius-sm);overflow:hidden}
.cs-line__img .cs-art{background-size:80%}
.cs-line__name{font:700 15px/20px var(--font-sans)}
.cs-line__opts{font:400 13px/18px var(--font-sans);color:var(--ink-muted)}
.cs-line__side{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2)}
.cs-sum{display:flex;flex-direction:column;gap:var(--space-2)}
.cs-sum__row{display:flex;justify-content:space-between;gap:var(--space-4);font:400 15px/22px var(--font-sans);font-variant-numeric:tabular-nums}
.cs-sum__row--total{padding-top:var(--space-3);margin-top:var(--space-1);border-top:var(--border-1) solid var(--border);font:800 20px/28px var(--font-display)}
.cs-sum__row--save{color:var(--secondary-strong);font-weight:600}

/* ---- checkout / account */
.cs-panel{background:var(--surface);border:var(--border-1) solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4);box-shadow:var(--shadow-1)}
.cs-steps{display:flex;gap:var(--space-2);list-style:none;margin:0;padding:0;counter-reset:s;flex-wrap:wrap}
.cs-steps li{display:flex;align-items:center;gap:var(--space-2);font:600 14px/20px var(--font-sans);color:var(--ink-muted)}
.cs-steps li::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:var(--border-2) solid var(--border-strong);font-weight:800}
.cs-steps li+li{margin-left:var(--space-4)}
.cs-steps li[aria-current=step]{color:var(--ink)}
.cs-steps li[aria-current=step]::before{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.cs-steps li[data-done]::before{content:"\2713";background:var(--secondary);border-color:var(--secondary);color:var(--on-secondary)}
.cs-steps li[data-done]{color:var(--secondary-strong)}
.cs-choice{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-4);border:var(--border-2) solid var(--border);border-radius:var(--radius-md);background:var(--surface);cursor:pointer}
.cs-choice:hover{border-color:var(--border-strong)}
.cs-choice:has(input:checked){border-color:var(--primary);background:var(--primary-subtle)}
.cs-choice input{appearance:none;-webkit-appearance:none;margin:2px 0 0;width:22px;height:22px;flex:none;border:var(--border-2) solid var(--border-strong);border-radius:50%;background:var(--surface);cursor:pointer}
.cs-choice input:checked{border-color:var(--primary);background:radial-gradient(var(--primary) 0 42%,var(--surface) 46%)}
.cs-card--wide .cs-card__stage .cs-card__quick{display:none}
.cs-hero__stage{max-height:380px}
.cs-choice b{display:block;font:700 15px/22px var(--font-sans)}
.cs-choice span{font:400 14px/20px var(--font-sans);color:var(--ink-muted)}
.cs-choice:has(input:checked) span{color:var(--ink)}
.cs-timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cs-timeline li{position:relative;display:grid;grid-template-columns:28px 1fr;gap:var(--space-3);padding-bottom:var(--space-5);font:400 14px/20px var(--font-sans)}
.cs-timeline li:last-child{padding-bottom:0}
.cs-timeline li::before{content:"";position:absolute;left:13px;top:28px;bottom:0;width:2px;background:var(--border)}
.cs-timeline li:last-child::before{display:none}
.cs-timeline li[data-s=done]::before{background:var(--secondary)}
.cs-timeline__dot{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:var(--border-2) solid var(--border-strong);background:var(--surface);color:var(--ink-muted)}
.cs-timeline li[data-s=done] .cs-timeline__dot{background:var(--secondary);border-color:var(--secondary);color:var(--on-secondary)}
.cs-timeline li[data-s=current] .cs-timeline__dot{border-color:var(--primary);color:var(--primary)}
.cs-timeline b{display:block;font:700 15px/20px var(--font-sans)}
.cs-timeline span{color:var(--ink-muted)}
.cs-order{display:grid;grid-template-columns:1fr auto;gap:var(--space-2) var(--space-4);align-items:center;padding:var(--space-4);border:var(--border-1) solid var(--border);border-radius:var(--radius-md);background:var(--surface)}
.cs-divider{display:flex;align-items:center;gap:var(--space-3);color:var(--ink-muted);font:600 13px/16px var(--font-sans)}
.cs-divider::before,.cs-divider::after{content:"";flex:1;height:1px;background:var(--border)}
.cs-hero{position:relative;display:grid;gap:var(--space-8);align-items:center;background:var(--primary-subtle);border-radius:var(--radius-xl);padding:var(--space-8) var(--space-6);overflow:hidden}
@media (min-width:1024px){.cs-hero{grid-template-columns:1.1fr .9fr;padding:var(--space-16) var(--space-12)}}
.cs-hero__stage{position:relative;aspect-ratio:1/1;max-height:460px;width:100%;justify-self:center;background:var(--stage);border-radius:var(--radius-xl);overflow:hidden}
.cs-benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-4)}
.cs-benefits>div{display:flex;gap:var(--space-3);align-items:flex-start;font:400 14px/20px var(--font-sans)}
.cs-benefits b{display:block;font:700 15px/20px var(--font-sans)}
.cs-benefits .cs-i{color:var(--primary);margin-top:2px}
.cs-specs{display:grid;grid-template-columns:auto 1fr;gap:var(--space-2) var(--space-6);margin:0;font:400 14px/20px var(--font-sans)}
.cs-specs dt{color:var(--ink-muted)}
.cs-specs dd{margin:0;font-family:var(--font-mono);font-size:13px}
.cs-showcase{padding:var(--space-4)}
.cs-label-sm{font:700 11px/16px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .cs-skel{animation:none}
  .cs-card:hover,.cs-collection:hover{transform:none}
}
.cs-msearch{padding-bottom:var(--space-3)}
@media (min-width:1024px){.cs-msearch{display:none}}
@media (max-width:560px){.qv{grid-template-columns:1fr!important}}