/* =========================================================
 * toko.css  —  Single stylesheet for Toko.ma v1.0
 * Sources: toko-icons.css + toko-redesign-complete.css + inline styles
 * Cache-bust: append ?v=1.0 in HTML (bump version on deploy)
 * ========================================================= */

/* ── Part 1: SVG icon system ─────────────────────────── */
/*
 * Toko.ma — Self-hosted SVG icon system
 * Replaces Font Awesome 6.5 CDN (~450 KB) with only the icons used on the site.
 * Generated: February 2026
 *
 * Usage: <i class="ti ti-search"></i>
 * All icons render as inline SVGs via CSS mask-image.
 * Size controlled by font-size (default 1em).
 */

.ti {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  flex-shrink: 0;
}

/* ── ICONS ─────────────────────────────────────────────────────────────── */

/* search (magnifying glass) */
.ti-search {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
}

/* bars (hamburger menu) */
.ti-bars {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 14.3 32z'/%3E%3C/svg%3E");
}

/* times / xmark */
.ti-times {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E");
}

/* house / home */
.ti-house {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4.1-2.8.1-4.2.1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2.1-2.4.2-3.6.2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9.1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4.1-2.8.1-4.2.1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2.1-2.4.2-3.6.2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9.1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z'/%3E%3C/svg%3E");
}

/* bolt (lightning) */
.ti-bolt {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M349.4 44.6c5.9-13.7 1.5-29.7-10.6-38.5s-28.6-8-39.9 1.8l-256 224c-10 8.8-13.6 22.9-8.9 35.3S50.7 288 64 288H175.8L98.6 467.4c-5.9 13.7-1.5 29.7 10.6 38.5s28.6 8 39.9-1.8l256-224c10-8.8 13.6-22.9 8.9-35.3s-16.6-20.7-30-20.7H272.2L349.4 44.6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M349.4 44.6c5.9-13.7 1.5-29.7-10.6-38.5s-28.6-8-39.9 1.8l-256 224c-10 8.8-13.6 22.9-8.9 35.3S50.7 288 64 288H175.8L98.6 467.4c-5.9 13.7-1.5 29.7 10.6 38.5s28.6 8 39.9-1.8l256-224c10-8.8 13.6-22.9 8.9-35.3s-16.6-20.7-30-20.7H272.2L349.4 44.6z'/%3E%3C/svg%3E");
}

/* eye */
.ti-eye {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z'/%3E%3C/svg%3E");
}

/* chevron-left */
.ti-chevron-left {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z'/%3E%3C/svg%3E");
}

/* chevron-right */
.ti-chevron-right {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E");
}

/* arrow-up */
.ti-arrow-up {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/svg%3E");
}

/* arrow-up-right-from-square (external link) */
.ti-arrow-up-right-from-square {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'/%3E%3C/svg%3E");
}

/* sliders (filter) */
.ti-sliders {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 416c0 17.7 14.3 32 32 32l54.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 448c17.7 0 32-14.3 32-32s-14.3-32-32-32l-246.7 0c-12.3-28.3-40.5-48-73.3-48s-61 19.7-73.3 48L32 384c-17.7 0-32 14.3-32 32zm128 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM320 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32-80c-32.8 0-61 19.7-73.3 48L32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l246.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-54.7 0c-12.3-28.3-40.5-48-73.3-48zM192 128a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm73.3-48C253 51.7 224.8 32 192 32s-61 19.7-73.3 48L32 80C14.3 80 0 94.3 0 112s14.3 32 32 32l86.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 144c17.7 0 32-14.3 32-32s-14.3-32-32-32L265.3 80z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 416c0 17.7 14.3 32 32 32l54.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 448c17.7 0 32-14.3 32-32s-14.3-32-32-32l-246.7 0c-12.3-28.3-40.5-48-73.3-48s-61 19.7-73.3 48L32 384c-17.7 0-32 14.3-32 32zm128 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM320 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32-80c-32.8 0-61 19.7-73.3 48L32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l246.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-54.7 0c-12.3-28.3-40.5-48-73.3-48zM192 128a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm73.3-48C253 51.7 224.8 32 192 32s-61 19.7-73.3 48L32 80C14.3 80 0 94.3 0 112s14.3 32 32 32l86.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 144c17.7 0 32-14.3 32-32s-14.3-32-32-32L265.3 80z'/%3E%3C/svg%3E");
}

/* store */
.ti-store {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M547.6 103.8L490.3 13.1C485.2 5 476.1 0 466.4 0H109.6C99.9 0 90.8 5 85.7 13.1L28.3 103.8c-29.6 46.8-3.4 111.9 51.9 119.4c4 .5 8.1 .8 12.1 .8c26.1 0 49.3-11.4 65.2-29c15.9 17.6 39.1 29 65.2 29c26.1 0 49.3-11.4 65.2-29c15.9 17.6 39.1 29 65.2 29c26.2 0 49.3-11.4 65.2-29c16 17.6 39.1 29 65.2 29c4.1 0 8.1-.3 12.1-.8c55.5-7.4 81.8-72.5 52.1-119.4zM499.7 254.9c0 0-.1 0-.1 0c-5.3 .7-10.7 1.1-16.2 1.1c-12.4 0-24.3-1.9-35.4-5.3V384H128V250.6c-11.2 3.5-23.2 5.4-35.6 5.4c-5.5 0-11-.4-16.3-1.1l-.1 0c-4.1-.6-8.1-1.3-12-2.3V480c0 17.7 14.3 32 32 32H480c17.7 0 32-14.3 32-32V252.6c-4 1-8 1.8-12.3 2.3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M547.6 103.8L490.3 13.1C485.2 5 476.1 0 466.4 0H109.6C99.9 0 90.8 5 85.7 13.1L28.3 103.8c-29.6 46.8-3.4 111.9 51.9 119.4c4 .5 8.1 .8 12.1 .8c26.1 0 49.3-11.4 65.2-29c15.9 17.6 39.1 29 65.2 29c26.1 0 49.3-11.4 65.2-29c15.9 17.6 39.1 29 65.2 29c26.2 0 49.3-11.4 65.2-29c16 17.6 39.1 29 65.2 29c4.1 0 8.1-.3 12.1-.8c55.5-7.4 81.8-72.5 52.1-119.4zM499.7 254.9c0 0-.1 0-.1 0c-5.3 .7-10.7 1.1-16.2 1.1c-12.4 0-24.3-1.9-35.4-5.3V384H128V250.6c-11.2 3.5-23.2 5.4-35.6 5.4c-5.5 0-11-.4-16.3-1.1l-.1 0c-4.1-.6-8.1-1.3-12-2.3V480c0 17.7 14.3 32 32 32H480c17.7 0 32-14.3 32-32V252.6c-4 1-8 1.8-12.3 2.3z'/%3E%3C/svg%3E");
}

/* chart-line */
.ti-chart-line {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M64 64c0-17.7-14.3-32-32-32S0 46.3 0 64V400c0 44.2 35.8 80 80 80H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H80c-8.8 0-16-7.2-16-16V64zm406.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L320 210.7l-57.4-57.4c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L240 221.3l57.4 57.4c12.5 12.5 32.8 12.5 45.3 0l128-128z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M64 64c0-17.7-14.3-32-32-32S0 46.3 0 64V400c0 44.2 35.8 80 80 80H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H80c-8.8 0-16-7.2-16-16V64zm406.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L320 210.7l-57.4-57.4c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L240 221.3l57.4 57.4c12.5 12.5 32.8 12.5 45.3 0l128-128z'/%3E%3C/svg%3E");
}

/* circle-check */
.ti-circle-check {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/svg%3E");
}

/* clock (regular) */
.ti-clock {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 120c0-13.3 10.7-24 24-24s24 10.7 24 24V256c0 8-4 15.5-10.7 20l-96 64c-11 7.4-25.9 4.4-33.3-6.7s-4.4-25.9 6.7-33.3L232 295.4V120z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 120c0-13.3 10.7-24 24-24s24 10.7 24 24V256c0 8-4 15.5-10.7 20l-96 64c-11 7.4-25.9 4.4-33.3-6.7s-4.4-25.9 6.7-33.3L232 295.4V120z'/%3E%3C/svg%3E");
}

/* repeat */
.ti-repeat {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 224c0 17.7 14.3 32 32 32s32-14.3 32-32c0-53 43-96 96-96H320v32c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-9.2-9.2-22.9-11.9-34.9-6.9S320 19.1 320 32V64H160C71.6 64 0 135.6 0 224zm512 64c0-17.7-14.3-32-32-32s-32 14.3-32 32c0 53-43 96-96 96H192V352c0-12.9-7.8-24.6-19.8-29.6s-25.7-2.2-34.9 6.9l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V448H352c88.4 0 160-71.6 160-160z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 224c0 17.7 14.3 32 32 32s32-14.3 32-32c0-53 43-96 96-96H320v32c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-9.2-9.2-22.9-11.9-34.9-6.9S320 19.1 320 32V64H160C71.6 64 0 135.6 0 224zm512 64c0-17.7-14.3-32-32-32s-32 14.3-32 32c0 53-43 96-96 96H192V352c0-12.9-7.8-24.6-19.8-29.6s-25.7-2.2-34.9 6.9l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V448H352c88.4 0 160-71.6 160-160z'/%3E%3C/svg%3E");
}

/* shield-halved */
.ti-shield-halved {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 0c4.6 0 9.2 1 13.4 2.9L457.7 82.8c22 9.3 38.4 31 38.3 57.2c-.5 99.2-41.3 280.7-213.7 363.2c-16.7 8-36.1 8-52.8 0C57.3 420.7 16.5 239.2 16 140c-.1-26.2 16.3-47.9 38.3-57.2L242.7 2.9C246.8 1 251.4 0 256 0zm0 66.8V444.8C394 378 431.1 230.1 432 141.4L256 66.8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 0c4.6 0 9.2 1 13.4 2.9L457.7 82.8c22 9.3 38.4 31 38.3 57.2c-.5 99.2-41.3 280.7-213.7 363.2c-16.7 8-36.1 8-52.8 0C57.3 420.7 16.5 239.2 16 140c-.1-26.2 16.3-47.9 38.3-57.2L242.7 2.9C246.8 1 251.4 0 256 0zm0 66.8V444.8C394 378 431.1 230.1 432 141.4L256 66.8z'/%3E%3C/svg%3E");
}

/* file-lines */
.ti-file-lines {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128h128L256 0zM112 256H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128h128L256 0zM112 256H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16z'/%3E%3C/svg%3E");
}

/* box */
.ti-box {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M50.7 58.5L0 160H208V32H93.7C75.5 32 58.9 42.3 50.7 58.5zM240 32V160H448L397.3 58.5C389.1 42.3 372.5 32 354.3 32H240zM0 192V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V192H0z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M50.7 58.5L0 160H208V32H93.7C75.5 32 58.9 42.3 50.7 58.5zM240 32V160H448L397.3 58.5C389.1 42.3 372.5 32 354.3 32H240zM0 192V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V192H0z'/%3E%3C/svg%3E");
}

/* th-large (grid) */
.ti-th-large {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 80C0 53.5 21.5 32 48 32H192c26.5 0 48 21.5 48 48V224c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80zM272 80c0-26.5 21.5-48 48-48H464c26.5 0 48 21.5 48 48V224c0 26.5-21.5 48-48 48H320c-26.5 0-48-21.5-48-48V80zM0 288c0-26.5 21.5-48 48-48H192c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V288zM272 288c0-26.5 21.5-48 48-48H464c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48H320c-26.5 0-48-21.5-48-48V288z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 80C0 53.5 21.5 32 48 32H192c26.5 0 48 21.5 48 48V224c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80zM272 80c0-26.5 21.5-48 48-48H464c26.5 0 48 21.5 48 48V224c0 26.5-21.5 48-48 48H320c-26.5 0-48-21.5-48-48V80zM0 288c0-26.5 21.5-48 48-48H192c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V288zM272 288c0-26.5 21.5-48 48-48H464c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48H320c-26.5 0-48-21.5-48-48V288z'/%3E%3C/svg%3E");
}

/* circle-exclamation (warning/alert) */
.ti-circle-exclamation {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/svg%3E");
}

/* check (simple checkmark) */
.ti-check {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
}

/* ── CATEGORY ICONS ─────────────────────────────────────────────────────── */

/* mobile / smartphone */
.ti-mobile {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M16 64C16 28.7 44.7 0 80 0H304c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H80c-35.3 0-64-28.7-64-64V64zM144 448c0 8.8 7.2 16 16 16h64c8.8 0 16-7.2 16-16s-7.2-16-16-16H160c-8.8 0-16 7.2-16 16zM304 64H80V384H304V64z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M16 64C16 28.7 44.7 0 80 0H304c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H80c-35.3 0-64-28.7-64-64V64zM144 448c0 8.8 7.2 16 16 16h64c8.8 0 16-7.2 16-16s-7.2-16-16-16H160c-8.8 0-16 7.2-16 16zM304 64H80V384H304V64z'/%3E%3C/svg%3E");
}

/* laptop */
.ti-laptop {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M128 32C92.7 32 64 60.7 64 96V352h64V96H512V352h64V96c0-35.3-28.7-64-64-64H128zM19.2 384C8.6 384 0 392.6 0 403.2C0 445.6 34.4 480 76.8 480H563.2c42.4 0 76.8-34.4 76.8-76.8c0-10.6-8.6-19.2-19.2-19.2H19.2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M128 32C92.7 32 64 60.7 64 96V352h64V96H512V352h64V96c0-35.3-28.7-64-64-64H128zM19.2 384C8.6 384 0 392.6 0 403.2C0 445.6 34.4 480 76.8 480H563.2c42.4 0 76.8-34.4 76.8-76.8c0-10.6-8.6-19.2-19.2-19.2H19.2z'/%3E%3C/svg%3E");
}

/* tv / television */
.ti-tv {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M64 64C28.7 64 0 92.7 0 128V384c0 35.3 28.7 64 64 64H576c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H64zM224 448c0-17.7 14.3-32 32-32H384c17.7 0 32 14.3 32 32v16H512v32H128V464H224V448z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M64 64C28.7 64 0 92.7 0 128V384c0 35.3 28.7 64 64 64H576c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H64zM224 448c0-17.7 14.3-32 32-32H384c17.7 0 32 14.3 32 32v16H512v32H128V464H224V448z'/%3E%3C/svg%3E");
}

/* headphones */
.ti-headphones {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 80C149.9 80 62.4 159.4 49.6 262c9.4-3.8 19.6-6 30.4-6c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48c-44.2 0-80-35.8-80-80V256C0 114.6 114.6 0 256 0S512 114.6 512 256V400c0 44.2-35.8 80-80 80c-26.5 0-48-21.5-48-48V304c0-26.5 21.5-48 48-48c10.8 0 21 2.1 30.4 6C449.6 159.4 362.1 80 256 80z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 80C149.9 80 62.4 159.4 49.6 262c9.4-3.8 19.6-6 30.4-6c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48c-44.2 0-80-35.8-80-80V256C0 114.6 114.6 0 256 0S512 114.6 512 256V400c0 44.2-35.8 80-80 80c-26.5 0-48-21.5-48-48V304c0-26.5 21.5-48 48-48c10.8 0 21 2.1 30.4 6C449.6 159.4 362.1 80 256 80z'/%3E%3C/svg%3E");
}

/* camera */
.ti-camera {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M149.1 64.8L138.7 96H64C28.7 96 0 124.7 0 160V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H373.3L362.9 64.8C356.4 45.2 338.1 32 317.4 32H194.6c-20.7 0-39 13.2-45.5 32.8zM256 384a96 96 0 1 1 0-192 96 96 0 1 1 0 192z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M149.1 64.8L138.7 96H64C28.7 96 0 124.7 0 160V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H373.3L362.9 64.8C356.4 45.2 338.1 32 317.4 32H194.6c-20.7 0-39 13.2-45.5 32.8zM256 384a96 96 0 1 1 0-192 96 96 0 1 1 0 192z'/%3E%3C/svg%3E");
}

/* gamepad */
.ti-gamepad {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M192 64C86 64 0 150 0 256S86 448 192 448H448c106 0 192-86 192-192s-86-192-192-192H192zM496 248c-22.1 0-40-17.9-40-40s17.9-40 40-40s40 17.9 40 40s-17.9 40-40 40zm-24 56c0 22.1-17.9 40-40 40s-40-17.9-40-40s17.9-40 40-40s40 17.9 40 40zM168 200c0-13.3 10.7-24 24-24s24 10.7 24 24v32h32c13.3 0 24 10.7 24 24s-10.7 24-24 24H216v32c0 13.3-10.7 24-24 24s-24-10.7-24-24V280H136c-13.3 0-24-10.7-24-24s10.7-24 24-24h32V200z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M192 64C86 64 0 150 0 256S86 448 192 448H448c106 0 192-86 192-192s-86-192-192-192H192zM496 248c-22.1 0-40-17.9-40-40s17.9-40 40-40s40 17.9 40 40s-17.9 40-40 40zm-24 56c0 22.1-17.9 40-40 40s-40-17.9-40-40s17.9-40 40-40s40 17.9 40 40zM168 200c0-13.3 10.7-24 24-24s24 10.7 24 24v32h32c13.3 0 24 10.7 24 24s-10.7 24-24 24H216v32c0 13.3-10.7 24-24 24s-24-10.7-24-24V280H136c-13.3 0-24-10.7-24-24s10.7-24 24-24h32V200z'/%3E%3C/svg%3E");
}

/* generic fallback icons as simple shapes */
.ti-fridge, .ti-washer, .ti-book, .ti-dumbbell, .ti-baby, .ti-sofa, .ti-tools, .ti-car {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M50.7 58.5L0 160H208V32H93.7C75.5 32 58.9 42.3 50.7 58.5zM240 32V160H448L397.3 58.5C389.1 42.3 372.5 32 354.3 32H240zM0 192V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V192H0z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M50.7 58.5L0 160H208V32H93.7C75.5 32 58.9 42.3 50.7 58.5zM240 32V160H448L397.3 58.5C389.1 42.3 372.5 32 354.3 32H240zM0 192V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V192H0z'/%3E%3C/svg%3E");
}


/* ── Part 2: Design system ───────────────────────────── */


:root {
  --primary-color:   #6354ff;
  --primary-hover:   #4f42d4;
  --primary-light:   #eeebff;
  --primary-mid:     #8b7dff;
  --accent-color:    #FF6B35;
  --accent-hover:    #E55A24;
  --dark-bg:         #1a1a2e;
  --dark-surface:    #252540;
  --dark-border:     #32325a;
  --success-color:   #10B981;
  --error-color:     #EF4444;
  --text-dark:       #1a1a2e;
  --text-gray:       #555577;
  --text-light:      #8888aa;
  --bg-body:         #f2f3f7;
  --bg-white:        #ffffff;
  --bg-light:        #f8f8fc;
  --bg-gray:         #f0f0f8;
  --border-color:    #eaecf0;
  --border-mid:      #d0d5dd;
  --font-primary:    'Poppins', sans-serif;
  --font-secondary:  'Inter', sans-serif;
  --radius-sm:       6px;
  --radius-md:       10px;
  --radius-lg:       16px;
  --radius-xl:       24px;
  --radius-full:     9999px;
  --shadow-sm:       0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:       0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:       0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.04);
  --transition-fast: 150ms ease;
  --transition-base: 280ms ease;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html  { font-size:16px; scroll-behavior:smooth; }
body  { font-family:var(--font-secondary); background:var(--bg-body); color:var(--text-dark); overflow-x:hidden; line-height:1.6; }
a     { text-decoration:none; color:inherit; transition:color var(--transition-fast); }
button{ cursor:pointer; font-family:var(--font-secondary); border:none; }
img   { max-width:100%; display:block; }

.header {
  background: var(--dark-bg);
  position: sticky; top: 0; z-index: 200;
  box-shadow: 0 2px 20px rgba(0,0,0,0.25);
}
.header-top {
  display: flex; align-items: center; gap: 16px;
  max-width: 1320px; margin: 0 auto; padding: 13px 24px;
}
.logo {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-primary); font-size: 22px; font-weight: 800;
  color: #fff; letter-spacing: -0.03em; white-space: nowrap; cursor: pointer;
}
.logo-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-mid));
  box-shadow: 0 0 10px rgba(99,84,255,0.6); flex-shrink: 0;
}
.logo span { color: var(--primary-mid); }
.logo-text { color: #fff; }
.logo-text span { color: var(--primary-mid); }
.logo-text { color: #fff; }
.logo-text span { color: var(--primary-mid); }
.header-search {
  flex: 1; max-width: 560px;
  display: flex; align-items: center;
  background: var(--dark-surface); border: 1px solid var(--dark-border);
  border-radius: var(--radius-md); overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.header-search:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(99,84,255,0.2);
}
.header-search input {
  flex: 1; border: none; outline: none; background: none;
  font-family: var(--font-secondary); font-size: 14px; color: #fff; padding: 10px 16px;
}
.header-search input::placeholder { color: #6666aa; }
.header-search-btn {
  background: var(--primary-color); color: #fff; border: none;
  padding: 10px 20px; font-size: 13px; font-weight: 600;
  font-family: var(--font-primary); white-space: nowrap;
  transition: background var(--transition-fast);
}
.header-search-btn:hover { background: var(--primary-hover); }
@media (max-width: 768px) {
  .header-search-btn {
    padding: 10px 14px;
    font-size: 0;          
    width: auto;
    flex-shrink: 0;
  }
  .header-search-btn::before {
    content: '\f002';        
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 14px;
  }
}
.header-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.header-nav-btn {
  background: none; border: none; color: #aaaacc;
  font-family: var(--font-primary); font-size: 13px; font-weight: 500;
  padding: 8px 14px; border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}
.header-nav-btn:hover { color: #fff; background: var(--dark-surface); }

.header-cats { background: var(--dark-surface); border-top: 1px solid var(--dark-border); }
.header-cats-inner {
  max-width: 1320px; margin: 0 auto; padding: 0 24px;
  display: flex; gap: 2px; overflow-x: auto;
}
.header-cats-inner::-webkit-scrollbar { display: none; }
.cat-nav-btn {
  background: none; border: none; color: #8888cc;
  font-family: var(--font-secondary); font-size: 12px; font-weight: 500;
  padding: 10px 13px; white-space: nowrap;
  border-bottom: 2px solid transparent; transition: all var(--transition-fast);
}
.cat-nav-btn:hover, .cat-nav-btn.active { color: #fff; border-bottom-color: var(--primary-color); }

.hamburger-btn {
  display: none; background: none; border: none; color: #fff;
  font-size: 22px; padding: 6px; cursor: pointer; flex-shrink: 0;
}
.mobile-menu {
  display: none; position: fixed; inset: 0;
  z-index: 500; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
}
.mobile-menu.open { display: block; }
.mobile-menu-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 280px;
  background: var(--dark-bg); border-left: 1px solid var(--dark-border);
  display: flex; flex-direction: column; padding: 24px 20px;
  transform: translateX(100%); transition: transform 0.28s ease; overflow-y: auto;
}
.mobile-menu.open .mobile-menu-panel { transform: translateX(0); }

/* Close button — fixed inside panel at same visual position as the hamburger icon.
   Header-top has padding:13px 24px; hamburger is the last item on the right.
   We position the × at the same top+right offset so muscle memory works. */
.mobile-menu-close {
  position: absolute;
  top: 13px;          /* same top padding as header-top */
  right: 20px;        /* same as panel's own padding */
  background: none; border: none; color: #8888cc;
  font-size: 22px;    /* same as .hamburger-btn font-size */
  padding: 6px;       /* same as .hamburger-btn padding */
  cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.mobile-menu-close:hover { color: #fff; }

/* Logo in the mobile menu — inherits .logo styles (size, font, dot),
   just needs bottom margin and no text-decoration */
.mobile-menu-logo {
  margin-bottom: 24px;
  margin-top: 52px;   /* push below the absolute-positioned close button */
  text-decoration: none;
}
.mobile-menu-link {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-secondary); font-size: 15px; font-weight: 500;
  color: #aaaacc; padding: 13px 0; border: none;
  border-bottom: 1px solid var(--dark-border); background: none;
  text-align: left; cursor: pointer; width: 100%; transition: color var(--transition-fast);
}
.mobile-menu-link i { width: 20px; text-align: center; color: var(--primary-mid); }
.mobile-menu-link:hover { color: #fff; }
.mobile-menu-cats { margin-top: 18px; }
.mobile-menu-cats-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-light); margin-bottom: 10px;
}
.mobile-menu-cat {
  display: block; font-size: 13px; color: #8888cc; padding: 7px 0;
  background: none; border: none; text-align: left; cursor: pointer;
  width: 100%; transition: color var(--transition-fast);
}
.mobile-menu-cat:hover { color: #fff; }

.mobile-bottom-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
  background: var(--dark-bg); border-top: 1px solid var(--dark-border);
  padding: 8px 0 max(8px, env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
}
.mobile-bottom-nav-inner { display: flex; justify-content: space-around; align-items: center; }
.mob-nav-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; color: #8888cc;
  font-family: var(--font-secondary); font-size: 10px; font-weight: 500;
  padding: 4px 16px; transition: color var(--transition-fast); cursor: pointer;
}
.mob-nav-btn i { font-size: 20px; }
.mob-nav-btn:hover, .mob-nav-btn.active { color: var(--primary-mid); }
.mob-nav-btn.share-nav { color: var(--accent-color); }
.mob-nav-btn.share-nav:hover { color: var(--accent-hover); }

.share-bar { display: flex; align-items: center; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.share-btn-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--radius-md);
  font-family: var(--font-secondary); font-size: 12px; font-weight: 600;
  border: none; cursor: pointer; transition: all var(--transition-fast);
}
.share-btn-item i { font-size: 14px; }
.share-btn-item.whatsapp { background: #dcfce7; color: #16a34a; }
.share-btn-item.whatsapp:hover { background: #16a34a; color: #fff; }
.share-btn-item.facebook { background: #dbeafe; color: #1d4ed8; }
.share-btn-item.facebook:hover { background: #1d4ed8; color: #fff; }
.share-btn-item.copy { background: var(--bg-gray); color: var(--text-gray); }
.share-btn-item.copy:hover { background: var(--primary-color); color: #fff; }
.share-label {
  font-family: var(--font-primary); font-size: 12px; font-weight: 700;
  color: var(--text-light); text-transform: uppercase; letter-spacing: 0.07em;
}

.products-grid, .results-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media(max-width:1200px) { .products-grid, .results-grid { grid-template-columns: repeat(3,1fr); } }
@media(max-width:768px)  { .products-grid, .results-grid { grid-template-columns: repeat(2,1fr); gap:12px; } }
@media(max-width:480px)  { .products-grid, .results-grid { grid-template-columns: repeat(2,1fr); gap:10px; } }
.results-grid { grid-template-columns: repeat(3,1fr); }
@media(max-width:1100px) { .results-grid { grid-template-columns: repeat(2,1fr); } }

.product-card-hunt {
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  
  padding: 0;
  height: auto;
  transition: box-shadow 200ms ease, border-color 200ms ease;
}
.product-card-hunt:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
  border-color: #d0d5dd;
}

.hunt-image-wrapper {
  display: block; width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden; background: #f8f9fb;
  position: relative;
  border-bottom: 1px solid #eaecf0;
  border-radius: 0;
  
  order: unset; margin-bottom: 0; padding: 0;
}
.hunt-image-wrapper.loading::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border: 2px solid rgba(99,84,255,0.15);
  border-top-color: var(--primary-color);
  border-radius: 50%; animation: tokoSpin 0.75s linear infinite; z-index: 10;
}
@keyframes tokoSpin { to { transform: rotate(360deg); } }

.hunt-image {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  padding: 10px; opacity: 0;
  transition: opacity 250ms ease;
  mix-blend-mode: normal;
}
.hunt-image.loaded { opacity: 1; }

.product-card-hunt:hover .hunt-image { transform: none; }

.hunt-savings-badge {
  position: absolute; top: 8px; left: 8px; z-index: 5;
  background: #e8fff4; color: #0a7c4e; border: 1px solid #b6ecd6;
  font-family: var(--font-primary); font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 4px; letter-spacing: 0.02em;
}

.hunt-header {
  padding: 10px 12px 6px;
  flex: 1; display: flex; flex-direction: column; gap: 2px;
  
  order: unset; margin-bottom: 0;
  justify-content: flex-start; align-items: flex-start;
}

.hunt-header > div {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 2px; width: 100%;
}
.hunt-title {
  font-family: var(--font-secondary);
  font-size: 13px; font-weight: 500; color: #1a1a2e; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; transition: color 150ms ease;
  
  white-space: normal; text-overflow: unset; flex: unset;
}
.product-card-hunt:hover .hunt-title { color: var(--primary-color); }
.hunt-subtitle {
  font-family: var(--font-secondary); font-size: 11px; font-weight: 400;
  color: #8888aa; white-space: normal; flex-basis: auto; line-height: 1.3;
  text-transform: none; display: block; text-decoration: none;
  transition: color 150ms ease;
}
.hunt-subtitle:hover {
  color: var(--primary-color);
}
a.hunt-subtitle {
  cursor: pointer;
}
a.hunt-subtitle:hover {
  color: var(--primary-color);
}

.hunt-features {
  padding: 6px 12px 8px;
  display: flex; align-items: center;
  justify-content: space-between; gap: 6px;
  order: unset; margin-bottom: 0; flex-wrap: nowrap;
}
.hunt-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: #f0eeff; color: var(--primary-color);
  font-family: var(--font-secondary); font-size: 11px; font-weight: 500;
  padding: 3px 8px; border-radius: 4px; flex-shrink: 0;
}
.hunt-badge i { font-size: 10px; }
.badge-blue   { background: #f0eeff; color: var(--primary-color); }
.badge-orange { background: #fff5f0; color: var(--accent-color); }
.badge-gray   { background: var(--bg-gray); color: var(--text-gray); }
.hunt-actions { display: flex; gap: 4px; align-items: center; }
.hunt-details-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--primary-color); color: #fff;
  font-family: var(--font-secondary); font-size: 11px; font-weight: 600;
  padding: 5px 11px; border-radius: 6px; white-space: nowrap;
  transition: background 150ms ease; width: auto;
}
.hunt-details-btn:hover {
  background: var(--primary-hover); color: #fff;
  transform: none; box-shadow: none;
}

.hunt-footer {
  padding: 8px 12px 11px;
  border-top: 1px solid #f0f0f5; background: #fdfdff;
  
  order: unset; margin-bottom: 0;
  display: block; justify-content: unset; align-items: unset;
}
.hunt-price { flex: unset; }
.price-container {
  display: flex; align-items: flex-start;
  gap: 8px; flex-wrap: wrap;
}

.current-price { display: inline-flex; align-items: flex-start; }
.current-price .price-wrapper {
  display: inline-flex; align-items: flex-start; gap: 3px;
}
.current-price .price-amount {
  font-family: var(--font-primary); font-size: 18px; font-weight: 800;
  color: var(--primary-color); letter-spacing: -0.02em; line-height: 1;
}
.current-price .price-superscript {
  display: flex; flex-direction: column; line-height: 1; padding-top: 1px;
}
.current-price .price-currency {
  font-family: var(--font-primary); font-size: 10px; font-weight: 700;
  color: var(--primary-color); line-height: 1.2;
}
.current-price .price-tax {
  font-size: 8px; color: #9999bb; font-weight: 400; line-height: 1.2;
}

.price-crossed {
  display: inline-flex; align-items: flex-start;
  text-decoration: none; opacity: 1;
  transform: none; transform-origin: unset;
  color: unset; margin-right: 0;
}
.price-crossed::after { display: none; } 
.price-crossed .price-wrapper {
  display: inline-flex; align-items: flex-start; gap: 2px;
}
.price-crossed .price-amount {
  font-family: var(--font-secondary); font-size: 12px; font-weight: 400;
  color: #aaaacc; text-decoration: line-through; line-height: 1;
}
.price-crossed .price-superscript {
  display: flex; flex-direction: column; line-height: 1; padding-top: 1px;
}
.price-crossed .price-currency {
  font-size: 8px; color: #aaaacc; text-decoration: line-through; line-height: 1.2;
}
.price-crossed .price-tax {
  font-size: 7px; color: #aaaacc; text-decoration: line-through; line-height: 1.2;
}

.section-wrap {
  max-width: 1320px; margin: 0 auto; padding: 40px 24px;
}
.section-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;
}
.section-title {
  font-family: var(--font-primary); font-size: 20px; font-weight: 700;
  color: var(--text-dark); letter-spacing: -0.01em;
}
.section-link {
  font-family: var(--font-secondary); font-size: 13px; font-weight: 600;
  color: var(--primary-color); cursor: pointer;
}
.section-link:hover { color: var(--primary-hover); }
.divider { height: 1px; background: var(--border-color); margin: 0 24px; }

.hero {
  background: var(--dark-bg); position: relative; overflow: hidden; padding: 60px 24px 0;
}
.hero-blob1 {
  position: absolute; top: -120px; right: -80px; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(99,84,255,0.12) 0%, transparent 65%); pointer-events: none;
}
.hero-blob2 {
  position: absolute; bottom: -60px; left: 10%; width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(255,107,53,0.07) 0%, transparent 65%); pointer-events: none;
}
.hero-inner {
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.hero-tag {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(99,84,255,0.15); border: 1px solid rgba(99,84,255,0.3);
  color: var(--primary-mid); padding: 6px 14px; border-radius: var(--radius-full);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; margin-bottom: 20px;
}
.hero-tag-pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--primary-mid);
  animation: tokoPulse 2s infinite;
}
@keyframes tokoPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.8)} }
.hero h1 {
  font-family: var(--font-primary); font-size: 46px; font-weight: 800;
  color: #fff; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 16px;
}
.hero h1 em { font-style: normal; color: var(--primary-mid); }
.hero-sub { font-size: 15px; color: #8888bb; line-height: 1.7; margin-bottom: 28px; max-width: 440px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-primary-hero {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-mid));
  color: #fff; border: none; font-family: var(--font-primary);
  font-size: 15px; font-weight: 700; padding: 13px 26px;
  border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(99,84,255,0.4);
  transition: all var(--transition-base); display: inline-flex; align-items: center; gap: 8px;
}
.btn-primary-hero:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(99,84,255,0.55); }
.btn-ghost-hero {
  background: rgba(255,255,255,0.07); color: #cccce0;
  border: 1px solid rgba(255,255,255,0.12); font-family: var(--font-primary);
  font-size: 15px; font-weight: 600; padding: 13px 22px;
  border-radius: var(--radius-lg); transition: all var(--transition-base);
}
.btn-ghost-hero:hover { background: rgba(255,255,255,0.12); color: #fff; }
.hero-stats {
  display: flex; gap: 28px; margin-top: 36px; padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.stat-num { font-family: var(--font-primary); font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.stat-num span { color: var(--primary-mid); }
.stat-label { font-size: 12px; color: #6666aa; margin-top: 2px; }

.hero-visual {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  padding-bottom: 40px; position: relative;
  animation: tokoFloat 6s ease-in-out infinite;
}
@keyframes tokoFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

.hero-card-wrap {
  position: relative;
  padding-top: 40px; 
  width: 100%; max-width: 340px;
}

.hero-savings-badge-float {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%) rotate(-1.5deg);
  background: linear-gradient(135deg, #ff6b35, #ff9a3c); color: #fff;
  font-family: var(--font-primary); font-size: 12px; font-weight: 800;
  padding: 8px 18px; border-radius: 20px; white-space: nowrap;
  box-shadow: 0 4px 20px rgba(255,107,53,0.5);
  z-index: 10; letter-spacing: 0.03em;
}

.hero-mock-card {
  display: block; text-decoration: none; width: 100%;
  border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 24px 64px rgba(0,0,0,0.4), 0 2px 0 rgba(255,255,255,0.06) inset;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hero-mock-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 36px 80px rgba(0,0,0,0.5), 0 2px 0 rgba(255,255,255,0.06) inset;
}

.hero-mock-img {
  width: 100%; aspect-ratio: 4/3; height: auto;
  background: #ffffff;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; position: relative; overflow: hidden;
}
.hero-mock-img::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(99,84,255,0.04) 0%, transparent 55%);
}
.hero-mock-img img {
  max-height: 155px; width: auto; max-width: 100%;
  object-fit: contain; display: block; position: relative; z-index: 1;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.12));
}

.hero-mock-body {
  background: linear-gradient(160deg, #1c1c3d 0%, #13132a 100%);
  padding: 16px 18px 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.hero-mock-name {
  font-family: var(--font-primary); font-size: 13px; font-weight: 700; color: #fff;
  margin-bottom: 2px; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-mock-brand {
  font-size: 10px; color: #6060a0; margin-bottom: 14px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em;
}

.hero-price-chips { display: flex; flex-direction: column; gap: 6px; }
.price-chip {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 11px; border-radius: 8px;
  font-family: var(--font-primary); font-size: 11px; font-weight: 700;
}
.chip-store { font-weight: 600; opacity: 0.85; }
.chip-price { font-weight: 800; }
.price-chip.best { background: rgba(34,197,94,0.14); border: 1px solid rgba(34,197,94,0.28); color: #4ade80; }
.price-chip.mid  { background: rgba(99,84,255,0.14); border: 1px solid rgba(99,84,255,0.25); color: #a09aff; }
.price-chip.high { background: rgba(148,163,184,0.07); border: 1px solid rgba(148,163,184,0.14); color: #60748b; }

.categories-section { background: var(--bg-white); }
.categories-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 12px; }
@media(max-width:768px) { .categories-section { display: none; } .categories-section + .divider { display: none; } }
@media(max-width:1024px) { .categories-grid { grid-template-columns: repeat(4,1fr); } }
@media(max-width:600px)  { .categories-grid { grid-template-columns: repeat(3,1fr); } }
.cat-card {
  background: var(--bg-white); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 18px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer; transition: all var(--transition-base); text-align: center;
}
.cat-card:hover { border-color: var(--primary-color); background: var(--primary-light); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cat-card-icon {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  background: var(--primary-light); display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.cat-card-name { font-family: var(--font-secondary); font-size: 12px; font-weight: 500; color: var(--text-gray); }

.how-section { background: var(--bg-white); padding: 60px 24px; }
.how-inner { max-width: 1320px; margin: 0 auto; }
.how-title { text-align: center; font-family: var(--font-primary); font-size: 30px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 6px; }
.how-sub { text-align: center; font-size: 14px; color: var(--text-light); margin-bottom: 40px; }
.how-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media(max-width:768px) { .how-grid { grid-template-columns: 1fr; } }
.how-step { border: 1.5px solid var(--border-color); border-radius: var(--radius-xl); padding: 28px 22px; text-align: center; transition: all var(--transition-base); }
.how-step:hover { border-color: var(--primary-color); background: var(--primary-light); }
.how-num {
  width: 46px; height: 46px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--primary-color), var(--primary-mid));
  color: #fff; font-family: var(--font-primary); font-size: 20px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px; box-shadow: 0 6px 20px rgba(99,84,255,0.3);
}
.how-step h3 { font-family: var(--font-primary); font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.how-step p  { font-size: 13px; color: var(--text-light); line-height: 1.65; margin: 0; }

.search-page-wrap {
  max-width: 1320px; margin: 0 auto; padding: 24px;
  display: grid; grid-template-columns: 265px 1fr; gap: 24px;
}
@media(max-width:900px) { .search-page-wrap { grid-template-columns: 1fr; } }

.filter-sidebar {
  background: var(--bg-white); border: 1px solid var(--border-color);
  border-radius: var(--radius-xl); padding: 20px;
  align-self: start; position: sticky; top: 76px; box-shadow: var(--shadow-sm);
}
.filter-title {
  font-family: var(--font-primary); font-size: 14px; font-weight: 700;
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;
}
.filter-clear { font-size: 12px; color: var(--primary-color); font-weight: 600; background: none; border: none; cursor: pointer; }
.filter-section { margin-bottom: 22px; }
.filter-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-light); margin-bottom: 10px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip {
  padding: 5px 11px; border-radius: var(--radius-full);
  border: 1.5px solid var(--border-color); background: var(--bg-light);
  font-family: var(--font-secondary); font-size: 12px; font-weight: 500;
  color: var(--text-gray); cursor: pointer; transition: all var(--transition-fast);
}
.filter-chip:hover, .filter-chip.active { background: var(--primary-light); border-color: var(--primary-color); color: var(--primary-color); }
.filter-check { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; color: var(--text-gray); cursor: pointer; }
.filter-check input { accent-color: var(--primary-color); width: 14px; height: 14px; }
.btn-apply {
  width: 100%; margin-top: 6px; padding: 10px;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-mid));
  color: #fff; border: none; border-radius: var(--radius-md);
  font-family: var(--font-primary); font-size: 13px; font-weight: 700;
  box-shadow: 0 4px 14px rgba(99,84,255,0.3); transition: all var(--transition-fast);
}
.btn-apply:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99,84,255,0.45); }

.density-chart { display: flex; align-items: flex-end; gap: 2px; height: 44px; margin-bottom: -2px; position: relative; z-index: 1; }
.density-bar { flex: 1; border-radius: 2px 2px 0 0; transition: background 0.2s, transform 0.15s; transform-origin: bottom; }
.slider-track-container { position: relative; padding: 12px 0 8px; user-select: none; z-index: 2; }
.slider-track-bg { height: 4px; background: var(--border-color); border-radius: 4px; position: relative; }
.slider-track-glow { position: absolute; top: 50%; height: 10px; transform: translateY(-50%); background: linear-gradient(90deg, rgba(99,84,255,0.3), rgba(139,125,255,0.3)); filter: blur(5px); border-radius: 4px; pointer-events: none; }
.slider-track-fill { position: absolute; top: 0; height: 100%; background: linear-gradient(90deg, var(--primary-color), var(--primary-mid)); border-radius: 4px; }
.slider-thumb {
  position: absolute; top: 50%; transform: translate(-50%,-50%);
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg-white); border: 3px solid var(--primary-color);
  box-shadow: 0 0 0 3px rgba(99,84,255,0.15), 0 4px 10px rgba(99,84,255,0.3);
  cursor: grab; z-index: 10; outline: none; transition: transform 0.1s, box-shadow 0.1s;
}
.slider-thumb:hover, .slider-thumb.dragging { transform: translate(-50%,-50%) scale(1.2); box-shadow: 0 0 0 6px rgba(99,84,255,0.2), 0 6px 16px rgba(99,84,255,0.45); }
.slider-thumb.dragging { cursor: grabbing; }
.price-inputs-row { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.price-input-box {
  flex: 1; background: var(--bg-light); border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md); padding: 7px 10px;
  display: flex; flex-direction: column; gap: 1px; transition: border-color var(--transition-fast);
}
.price-input-box:focus-within { border-color: var(--primary-color); background: var(--bg-white); }
.price-input-box label { font-size: 9px; font-weight: 700; color: var(--primary-color); text-transform: uppercase; letter-spacing: 0.1em; }
.price-input-box input { border: none; outline: none; background: none; font-family: var(--font-primary); font-size: 14px; font-weight: 700; color: var(--text-dark); width: 100%; }
.price-sep { color: var(--border-mid); font-size: 14px; font-weight: 600; }

.results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.results-count { font-size: 13px; color: var(--text-light); }
.results-count strong { color: var(--text-dark); font-weight: 700; }
.sort-select {
  padding: 7px 14px;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border-color);
  background: var(--bg-light);
  font-family: var(--font-secondary);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-gray);
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
}
.sort-select:hover, .sort-select:focus {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.show-wrap { max-width: 1320px; margin: 0 auto; padding: 24px; }
.breadcrumb { display: flex; gap: 8px; align-items: center; margin-bottom: 24px; font-size: 13px; color: var(--text-light); }
.breadcrumb a { color: var(--text-gray); font-weight: 500; }
.breadcrumb a:hover { color: var(--primary-color); }
.breadcrumb span { color: var(--border-mid); }
.show-grid { display: grid; grid-template-columns: 440px 1fr; gap: 40px; }
@media(max-width:1000px) { .show-grid { grid-template-columns: 1fr; } }
/* Similar products — 4 col desktop, 2 col mobile */
.similar-products-grid { grid-template-columns: repeat(4,1fr) !important; }
@media(max-width:900px)  { .similar-products-grid { grid-template-columns: repeat(2,1fr) !important; gap:12px; } }
@media(max-width:480px)  { .similar-products-grid { grid-template-columns: repeat(2,1fr) !important; gap:10px; } }
.gallery { display: flex; flex-direction: column; gap: 10px; }
.gallery-main { width: 100%; aspect-ratio: 1/1; background: #ffffff; border: 1px solid var(--border-color); border-radius: var(--radius-xl); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.gallery-main img { width: 85%; height: 85%; object-fit: contain; }
.gallery-thumbs { display: flex; gap: 8px; }
.gallery-thumb { width: 66px; height: 66px; border-radius: var(--radius-md); border: 2px solid var(--border-color); overflow: hidden; background: var(--bg-light); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color var(--transition-fast); }
.gallery-thumb.active { border-color: var(--primary-color); }
.gallery-thumb img { width: 90%; height: 90%; object-fit: contain; }
.show-badges { display: flex; gap: 8px; margin-bottom: 12px; }
.show-badge { padding: 3px 10px; border-radius: var(--radius-sm); font-family: var(--font-primary); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; }
.badge-new   { background: var(--primary-light); color: var(--primary-color); }
.badge-promo { background: #fff1f1; color: var(--error-color); }
.show-title { font-family: var(--font-primary); font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 10px; }
.show-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 14px; }
.stars { color: #fbbf24; }
.show-rating span { color: var(--text-light); font-size: 13px; }
.show-price-box { background: var(--bg-light); border: 1.5px solid var(--border-color); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 18px; }
.show-price-label { font-size: 11px; color: var(--text-light); font-weight: 600; margin-bottom: 4px; }
.show-price-best { font-family: var(--font-primary); font-size: 34px; font-weight: 800; color: var(--primary-color); letter-spacing: -0.03em; display: flex; align-items: baseline; gap: 6px; }
.show-price-best .curr { font-size: 17px; font-weight: 700; }
.show-savings-tag { display: inline-block; background: #ecfdf5; color: #059669; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-sm); margin-top: 7px; }
.stores-title { font-family: var(--font-primary); font-size: 14px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.stores-count { background: var(--primary-light); color: var(--primary-color); padding: 2px 8px; border-radius: var(--radius-full); font-size: 11px; }
.store-row { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1.5px solid var(--border-color); border-radius: var(--radius-lg); margin-bottom: 7px; background: var(--bg-white); transition: all var(--transition-fast); }
.store-row:hover { border-color: var(--primary-color); background: var(--primary-light); }
.store-logo { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--bg-light); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.store-name { font-family: var(--font-primary); font-size: 14px; font-weight: 700; flex: 1; }
.store-delivery { font-size: 12px; color: var(--text-light); }
.store-price-val { font-family: var(--font-primary); font-size: 17px; font-weight: 800; color: var(--text-dark); }
.store-price-val.best { color: var(--primary-color); }
.store-btn { padding: 7px 13px; border-radius: var(--radius-md); font-family: var(--font-primary); font-size: 12px; font-weight: 700; border: 1.5px solid var(--border-color); background: var(--bg-light); color: var(--text-gray); transition: all var(--transition-fast); cursor: pointer; white-space: nowrap; }
.store-btn:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.store-btn.primary { background: linear-gradient(135deg, var(--primary-color), var(--primary-mid)); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(99,84,255,0.3); }
.product-auto-desc {
  font-size: 14px;
  color: var(--text-muted, #8888cc);
  line-height: 1.65;
  margin: 12px 0 16px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  border-left: 3px solid rgba(139,125,255,0.3);
}

/* ── Specs: legacy (keep for any residual references) ─────────────── */
.specs-title { font-family: var(--font-primary); font-size: 14px; font-weight: 700; margin: 18px 0 10px; }
.specs-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.spec-row    { background: var(--bg-light); border-radius: var(--radius-md); padding: 10px 12px; }
.spec-key    { font-size: 10px; color: var(--text-light); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
.spec-val    { font-family: var(--font-primary); font-size: 13px; font-weight: 700; color: var(--text-dark); }

/* ── Specs: professional section ──────────────────────────────────── */
.product-specs-section {
  margin-top: 28px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-white);
}

/* Header */
.specs-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1.5px solid var(--border-color);
  background: var(--bg-light);
}
.specs-section-title {
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.01em;
}
.specs-section-title i {
  color: var(--primary-color);
  font-size: 16px;
}


/* Groups container */
.specs-groups {
  padding: 0 20px 4px;
}

/* Group block */
.specs-group {
  padding: 14px 0 6px;
  border-bottom: 1px solid #f0f0f8;
}
.specs-group:last-child { border-bottom: none; }

.specs-group-title {
  font-family: var(--font-primary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary-color);
  margin-bottom: 10px;
}

.specs-group-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}


/* Individual spec item */
.spec-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--bg-light);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  transition: border-color 0.15s, background 0.15s;
}
.spec-item:hover {
  border-color: rgba(99,84,255,0.15);
  background: #f5f3ff;
}


.spec-item-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-light);
  line-height: 1;
}
.spec-item-icon {
  font-size: 11px;
  color: var(--primary-color);
  opacity: 0.7;
}
.spec-item-value {
  font-family: var(--font-secondary);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.4;
  word-break: break-word;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* Color dots */
.spec-color-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.spec-color-dot {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.spec-color-tag {
  display: inline-flex;
  align-items: center;
  background: var(--bg-gray);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-gray);
}
.spec-color-names {
  font-size: 12px;
  color: var(--text-light);
  font-weight: 500;
}

@media (max-width: 768px) {
  .specs-section-header { padding: 13px 14px; }
  .specs-groups { padding: 0 14px 6px; }
  .specs-section-title { font-size: 14px; }
  .specs-group-body {
    grid-template-columns: 1fr 1fr;
    gap: 5px;
  }
  .specs-group { padding: 12px 0 4px; }
  .specs-group-title { font-size: 9px; margin-bottom: 8px; }
  .spec-item { padding: 8px 10px; }
  .spec-item-label { font-size: 9px; gap: 4px; }
  .spec-item-value { font-size: 12px; }
  .spec-item-icon { font-size: 10px; }
}
@media (max-width: 380px) {
  .specs-group-body { grid-template-columns: 1fr; }
  .spec-item { padding: 8px 10px; }
}

.legal-wrap { max-width: 780px; margin: 0 auto; padding: 48px 24px 80px; }
.legal-header { margin-bottom: 36px; }
.legal-header h1 { font-family: var(--font-primary); font-size: 32px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
.legal-header p { font-size: 14px; color: var(--text-light); line-height: 1.7; margin: 0; }
.legal-updated { display: inline-block; margin-top: 12px; background: var(--primary-light); color: var(--primary-color); padding: 4px 12px; border-radius: var(--radius-sm); font-family: var(--font-primary); font-size: 11px; font-weight: 700; }
.legal-body h2 { font-family: var(--font-primary); font-size: 17px; font-weight: 700; margin: 32px 0 10px; padding-top: 32px; border-top: 1px solid var(--border-color); }
.legal-body h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.legal-body p  { font-size: 14px; line-height: 1.8; color: var(--text-gray); margin-bottom: 12px; }
.legal-body ul { list-style: none; margin-bottom: 14px; }
.legal-body ul li { font-size: 14px; color: var(--text-gray); line-height: 1.8; padding: 4px 0 4px 20px; position: relative; }
.legal-body ul li::before { content: ''; position: absolute; left: 0; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary-color); }
.legal-callout { background: var(--primary-light); border-left: 3px solid var(--primary-color); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 14px 16px; margin: 16px 0; font-size: 14px; color: var(--text-gray); line-height: 1.75; }

footer { background: #1a1a2e; color: #64648a; padding: 48px 0 24px; margin-top: 60px; }
.footer-inner { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.07); margin-bottom: 24px; }
@media(max-width:900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width:600px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand .logo { margin-bottom: 12px; }
.footer-brand p { font-size: 13px; color: #6666aa; line-height: 1.75; max-width: 240px; }
.footer-col h4 { font-family: var(--font-primary); font-size: 12px; font-weight: 600; color: #aaaacc; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; }
.footer-col a { display: block; font-size: 13px; color: #6666aa; margin-bottom: 10px; transition: color var(--transition-fast); }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #44446a; }
.footer-badges { display: flex; gap: 8px; }
.footer-badge { padding: 3px 10px; border-radius: 4px; font-size: 10px; font-weight: 700; background: rgba(99,84,255,0.15); color: var(--primary-mid); letter-spacing: 0.06em; }

@media(max-width:768px) {
  .hamburger-btn           { display: block; }
  .header-nav              { display: none; }
  .header-search           { display: none; }
  .mobile-search-icon-btn  { display: flex; align-items: center; margin-left: auto; }
  .hero-inner              { grid-template-columns: 1fr; gap: 0; }
  .hero                    { padding: 18px 20px 16px; }
  .hero h1                 { font-size: 22px; margin-bottom: 12px; }
  .hero-sub                { display: none; }
  .hero-stats              { display: none; }
  .hero-tag                { margin-bottom: 10px; padding: 4px 10px; font-size: 9px; }
  .hero-visual             { display: none; }
  .show-wrap               { padding-bottom: 90px; }
  .mobile-bottom-nav       { display: block; }
  .share-bar               { display: none; }
  .search-overlay-btn      { padding: 13px 16px; }

  
  .hero                { padding: 18px 20px 16px; }   
  .hero-sub            { display: none; }              
  .hero-stats          { display: none; }              
  .hero-actions        { margin-bottom: 0; }
  .hero h1             { font-size: 22px; margin-bottom: 12px; }
  .hero-tag            { margin-bottom: 10px; padding: 4px 10px; font-size: 9px; }
  .hero-inner          { gap: 0; }
}
@media(max-width:480px) {
  .hero h1       { font-size: 20px; }
  .section-wrap  { padding: 28px 16px; }
}

@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.page-fade { animation: fadeIn 0.3s ease; }

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }

.show-price-best .price-wrapper { display: inline-flex; align-items: flex-start; gap: 4px; }
.show-price-best .price-amount  { font-family: var(--font-primary); font-size: 34px; font-weight: 800; color: var(--primary-color); letter-spacing: -.03em; line-height: 1; }
.show-price-best .price-superscript { display: flex; flex-direction: column; line-height: 1; padding-top: 5px; }
.show-price-best .price-currency    { font-family: var(--font-primary); font-size: 14px; font-weight: 700; color: var(--primary-color); line-height: 1.2; }
.show-price-best .price-tax         { font-size: 10px; color: #7777aa; font-weight: 400; line-height: 1.2; }

.store-price-val .price-wrapper     { display: inline-flex; align-items: flex-start; gap: 3px; }
.store-price-val .price-amount      { font-family: var(--font-primary); font-size: 17px; font-weight: 800; color: var(--text-dark); line-height: 1; }
.store-price-val.best .price-amount { color: var(--primary-color); }
.store-price-val .price-superscript { display: flex; flex-direction: column; line-height: 1; padding-top: 2px; }
.store-price-val .price-currency    { font-size: 9px; font-weight: 700; line-height: 1.2; }
.store-price-val.best .price-currency { color: var(--primary-color); }
.store-price-val .price-tax         { font-size: 7px; color: #9999bb; font-weight: 400; line-height: 1.2; }

.breadcrumb span:last-child { color: var(--text-dark) !important; font-weight: 600; }

.sku-badges-container { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sku-badge {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--border-mid);
  color: var(--text-gray);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  font-family: 'Courier New', monospace;
}

.results-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.results-toolbar-form {
  display: flex;
  gap: 8px;
  align-items: center;
}
.results-toolbar-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
}
.results-count {
  font-size: 13px;
  color: var(--text-light);
  font-family: var(--font-secondary);
}
.results-count strong {
  color: var(--text-dark);
  font-weight: 700;
}
.search-input-bar {
  flex: 1; border: 1.5px solid var(--border-color); border-radius: 8px;
  padding: 10px 14px; font-size: 14px; font-family: var(--font-secondary);
  outline: none; transition: border-color .2s;
}
.search-input-bar:focus { border-color: var(--primary-color); }
.search-submit-btn {
  background: var(--primary-color); color: #fff; border: none;
  border-radius: 8px; padding: 10px 20px; cursor: pointer;
  font-weight: 600; font-size: 13px; font-family: var(--font-primary);
  white-space: nowrap; transition: background .2s;
}
.search-submit-btn:hover { background: var(--primary-hover); }
@media (max-width: 768px) {
  
  .search-input-bar {
    padding: 9px 10px;
    font-size: 13px;
  }
  .search-submit-btn {
    padding: 9px 12px;
    font-size: 0;      
    flex-shrink: 0;
  }
  .search-submit-btn i {
    font-size: 14px;   
  }
  
  .header-search input {
    padding: 9px 10px;
    font-size: 13px;
  }
}

.empty-state {
  text-align: center; padding: 80px 20px;
  background: #fff; border-radius: 16px;
}
.empty-icon   { font-size: 56px; margin-bottom: 16px; }
.empty-state h3 { font-size: 20px; font-family: var(--font-primary); margin-bottom: 8px; }
.empty-state p  { color: var(--text-light); margin-bottom: 24px; font-size: 14px; }

.trust-section { background: var(--bg-light); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.trust-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 20px;
  padding: 8px 0;
}
@media(max-width:900px) { .trust-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:480px) { .trust-grid { grid-template-columns: 1fr; } }
.trust-card {
  background: var(--bg-white); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 22px 20px;
  transition: all var(--transition-base);
}
.trust-card:hover { border-color: var(--primary-color); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.trust-icon {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  background: var(--primary-light); color: var(--primary-color);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; margin-bottom: 14px;
}
.trust-card h3 { font-family: var(--font-primary); font-size: 14px; font-weight: 700; margin-bottom: 7px; }
.trust-card p  { font-size: 13px; color: var(--text-light); line-height: 1.65; margin: 0; }

.brands-section { background: var(--bg-white); }
.brands-grid {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.brand-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-light); border: 1.5px solid var(--border-color);
  border-radius: var(--radius-full); padding: 8px 16px;
  transition: all var(--transition-fast); text-decoration: none;
}
.brand-pill:hover { background: var(--primary-light); border-color: var(--primary-color); }
.brand-pill strong { font-family: var(--font-primary); font-size: 13px; font-weight: 700; color: var(--text-dark); }
.brand-pill span   { font-size: 11px; color: var(--text-light); font-weight: 400; }

.popular-list { display: flex; flex-direction: column; gap: 8px; }
.popular-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-white); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 12px 16px;
  text-decoration: none; transition: all var(--transition-fast);
}
.popular-item:hover { border-color: var(--primary-color); background: var(--primary-light); transform: translateX(3px); }
.popular-rank {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-mid));
  color: #fff; font-family: var(--font-primary); font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.popular-img {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: var(--radius-md);
  background: var(--bg-light); border: 1px solid var(--border-color);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.popular-img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.popular-info { flex: 1; min-width: 0; }
.popular-name { font-family: var(--font-secondary); font-size: 13px; font-weight: 600; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.popular-meta { font-size: 11px; color: var(--text-light); margin-top: 2px; }
.popular-price { font-family: var(--font-primary); font-size: 15px; font-weight: 800; color: var(--primary-color); flex-shrink: 0; }
.popular-cta   { color: var(--text-light); font-size: 12px; flex-shrink: 0; }

.seo-text-section { background: var(--bg-light); border-top: 1px solid var(--border-color); }
.seo-text-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
@media(max-width:768px) { .seo-text-grid { grid-template-columns: 1fr; gap: 24px; } }
.seo-text-grid h2 { font-family: var(--font-primary); font-size: 18px; font-weight: 700; margin-bottom: 12px; letter-spacing: -.01em; }
.seo-text-grid p  { font-size: 14px; color: var(--text-gray); line-height: 1.8; margin-bottom: 10px; }
.seo-text-grid a  { color: var(--primary-color); font-weight: 600; }
.seo-text-grid a:hover { text-decoration: underline; }

.faq-section { background: var(--bg-white); border-top: 1px solid var(--border-color); }
.faq-list { display: flex; flex-direction: column; gap: 8px; max-width: 800px; }
.faq-item {
  border: 1.5px solid var(--border-color); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--bg-white);
  transition: border-color var(--transition-fast);
}
.faq-item[open] { border-color: var(--primary-color); }
.faq-q {
  list-style: none; padding: 16px 20px; cursor: pointer;
  font-family: var(--font-primary); font-size: 14px; font-weight: 600;
  color: var(--text-dark); display: flex; align-items: center; justify-content: space-between;
  gap: 12px; user-select: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after { content: '+'; font-size: 20px; color: var(--primary-color); font-weight: 300; flex-shrink: 0; }
.faq-item[open] .faq-q::after { content: '−'; }
.faq-a { padding: 0 20px 16px; font-size: 13px; color: var(--text-gray); line-height: 1.75; }

.price-slider-wrapper { padding: 4px 0 0; }

.pagination-container { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 32px; flex-wrap: wrap; }
.pagination-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-md);
  border: 1.5px solid var(--border-color); background: var(--bg-white);
  font-family: var(--font-primary); font-size: 13px; font-weight: 600; color: var(--text-gray);
  transition: all var(--transition-fast); text-decoration: none;
}
.pagination-link:hover  { border-color: var(--primary-color); color: var(--primary-color); background: var(--primary-light); }
.pagination-link.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.pagination-info { font-size: 13px; color: var(--text-light); padding: 0 4px; }

.ad-container {
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  overflow: hidden;
  /* Empty containers collapse — JS removes them after load */
}
.ad-container.has-ad {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ad-placeholder {
  font-size: 11px;
  color: var(--text-light);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.seo-intro-block {
  padding: 12px 0 4px;
}
.seo-intro-text {
  font-size: 14px;
  color: var(--text-muted, #8888cc);
  line-height: 1.6;
  margin: 0;
}
.seo-intro-text strong {
  color: var(--text-secondary, #ccc);
  font-weight: 600;
}

.ad-infeed {
  grid-column: 1 / -1;
  min-height: 100px;
}



/* ── SEO Intro Block (category/brand pages) ────────────────────────────── */

.scroll-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-mid));
  color: #fff;
  border: none;
  font-size: 18px;
  box-shadow: 0 6px 20px rgba(99,84,255,0.4);
  cursor: pointer;
  z-index: 390;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
}
.scroll-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.scroll-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(99,84,255,0.5);
}
@media(max-width:768px) {
  .scroll-to-top {
    bottom: 90px;
    right: 20px;
    width: 44px;
    height: 44px;
    font-size: 16px;
  }
}

.lazy-image {
  opacity: 0;
}
.lazy-image.loaded {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.filter-list-scroll {
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}
.filter-list-scroll::-webkit-scrollbar {
  width: 4px;
}
.filter-list-scroll::-webkit-scrollbar-track {
  background: var(--bg-light);
  border-radius: 2px;
}
.filter-list-scroll::-webkit-scrollbar-thumb {
  background: var(--border-mid);
  border-radius: 2px;
}
.filter-list-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
}

.price-manual-input {
  border: none !important;
  outline: none !important;
  background: none !important;
  font-family: var(--font-primary) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
  width: 100% !important;
  padding: 0 !important;
}
.price-manual-input::placeholder {
  color: var(--text-light);
  font-weight: 400;
}

.cat-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  font-size: 14px;
}
.cat-nav-icon i {
  font-size: 14px;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 900px) {
  .search-page-wrap {
    display: block;
    padding: 16px;
  }
  
  .filter-sidebar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    top: auto;
    z-index: 400;
    border-radius: 20px 20px 0 0;
    max-height: 80vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
    padding-bottom: 32px;
  }
  .filter-sidebar.drawer-open {
    transform: translateY(0);
  }
  
  .filter-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 399;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
  }
  .filter-overlay.drawer-open {
    display: block;
  }
}

@media (max-width: 600px) {
  .store-row {
    gap: 8px;
    padding: 10px 8px;
    flex-wrap: nowrap;     
    align-items: center;
  }
  .store-logo {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }
  .store-name {
    font-size: 12px;
    flex: 1;
    min-width: 0;          
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .store-name div {        
    display: none;
  }
  .store-price-val {
    font-size: 13px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .store-btn {
    padding: 6px 9px;
    font-size: 11px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  
  .store-btn .btn-label-long  { display: none; }
  .store-btn .btn-label-short { display: inline; }
}
@media (min-width: 601px) {
  .store-btn .btn-label-long  { display: inline; }
  .store-btn .btn-label-short { display: none; }
}

.breadcrumb {
  flex-wrap: nowrap;               
  overflow-x: auto;                
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;           
  -ms-overflow-style: none;        
  padding-bottom: 4px;
}
.breadcrumb::-webkit-scrollbar { display: none; }
.breadcrumb > * {
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .filter-drawer-handle {
    display: block !important;
  }
}

.mobile-search-icon-btn {
  display: none;
  background: none;
  border: none;
  color: #8888cc;
  font-size: 18px;
  padding: 6px 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s;
}
.mobile-search-icon-btn:hover { color: var(--primary-mid); }

@media (max-width: 768px) {
  
  .mobile-search-icon-btn { display: flex; align-items: center; margin-left: auto; }
  .header-search           { display: none; }
  
  .hamburger-btn           { margin-left: 0; }
  
  .search-overlay-btn {
    padding: 13px 16px;
  }
}

.search-overlay-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 498;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(3px);
}
.search-overlay-backdrop.open { display: block; }

.search-overlay {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 499;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
  
  display: none;
}
.search-overlay.open { transform: translateY(0); }

@media (max-width: 768px) {
  .search-overlay { display: block; }
}

.search-overlay-sheet {
  background: #1a1a2e;
  border-radius: 20px 20px 0 0;
  padding: 0 0 max(24px, env(safe-area-inset-bottom));
  box-shadow: 0 -8px 40px rgba(0,0,0,0.4);
}

.search-overlay-handle {
  width: 40px; height: 4px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  margin: 12px auto 0;
}

.search-overlay-inner {
  padding: 16px 20px 8px;
}

.search-overlay-form {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
}

.search-overlay-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 0 12px;
  gap: 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-overlay-input-wrap:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(99,84,255,0.25);
}

.search-overlay-icon {
  color: #6666aa;
  font-size: 14px;
  flex-shrink: 0;
}

.search-overlay-input-wrap input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: #fff;
  font-size: 15px;
  font-family: var(--font-secondary);
  padding: 13px 0;
}
.search-overlay-input-wrap input::placeholder { color: #5555aa; }

.search-overlay-clear {
  background: none;
  border: none;
  color: #5555aa;
  cursor: pointer;
  padding: 4px;
  font-size: 13px;
  flex-shrink: 0;
  transition: color 0.2s;
}
.search-overlay-clear:hover { color: #fff; }

.search-overlay-btn {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-mid));
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 13px 18px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-primary);
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.search-overlay-btn:hover { opacity: 0.9; }

.search-overlay-cats-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5555aa;
  margin-bottom: 12px;
}

.search-overlay-cats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.search-overlay-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  text-decoration: none;
  color: #aaaacc;
  font-size: 11px;
  font-family: var(--font-secondary);
  text-align: center;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.search-overlay-cat:hover {
  background: rgba(99,84,255,0.15);
  border-color: var(--primary-color);
  color: #fff;
}

.search-overlay-cat-icon {
  font-size: 20px;
  line-height: 1;
}
.search-overlay-cat-icon i {
  font-size: 18px;
  color: var(--primary-mid);
}

.product-card-coming-soon {
  opacity: 0.85;
}
.product-card-coming-soon .hunt-image-wrapper {
  filter: grayscale(20%);
}
.coming-soon-badge {
  background: linear-gradient(135deg, #ff6b35, #ff9a3c) !important;
  color: #fff !important;
}
.badge-coming-soon {
  background: rgba(255,107,53,0.12) !important;
  color: #ff8c42 !important;
  border: 1px solid rgba(255,107,53,0.2);
}
/* ── Newly launched section ─────────────────────────────────────────────── */
.new-launch-badge {
  background: linear-gradient(135deg, var(--primary-color), #8b5cf6) !important;
  color: #fff !important;
  font-weight: 700;
}
.badge-new {
  background: rgba(99,84,255,0.1) !important;
  color: var(--primary-color) !important;
  border: 1px solid rgba(99,84,255,0.2);
}
.product-card-new {
  border-color: rgba(99,84,255,0.15);
}
.product-card-new:hover {
  border-color: var(--primary-color);
  box-shadow: 0 8px 24px rgba(99,84,255,0.12);
}
.store-count-badge {
  font-size: 11px;
  color: var(--text-light);
  font-weight: 500;
  align-self: center;
}

.badge-coming-soon i { color: #ff8c42; }
.coming-soon-price {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 600;
  color: #8888aa;
  font-style: italic;
}



/* =========================================================
   EXTRACTED INLINE STYLES
   All style="" attributes have been converted to classes
   ========================================================= */

/* ── Layout utilities ─────────────────────────────────── */
.prose-wrap           { max-width:860px; margin:0 auto; padding:40px 20px 60px; }
.breadcrumb-spaced    { margin-bottom:24px; }
.show-wrap-flush      { padding-bottom:0; }
.similar-grid-wrap    { margin-top:16px; }

/* ── Prose / legal pages (terms, privacy) ─────────────── */
.prose-heading        { font-size:28px; font-weight:700; color:#1a1a2e; margin-bottom:8px; }
.prose-subline        { color:#888; font-size:13px; margin-bottom:32px; }
.prose-body           { line-height:1.8; color:#374151; font-size:15px; }
.prose-body h2        { font-size:18px; font-weight:600; color:#1a1a2e; margin:28px 0 10px; }

/* ── Product detail ───────────────────────────────────── */
.no-price-notice      { color:#aaa; margin:12px 0; }
.price-group          { margin-bottom:28px; }
.price-group-label    { font-size:13px; font-weight:600; color:#1a1a2e; margin-bottom:12px; }
.best-badge           { font-size:11px; color:#22c55e; margin-top:2px; }
.product-brand-row    { margin-bottom:16px; font-size:13px; color:#888; }
.product-brand-link   { color:#1a1a2e; margin-left:4px; text-decoration:none; cursor:pointer; }
.specs-heading        { margin-top:28px; }
.offer-icon-sm        { font-size:10px; margin-left:4px; }
.offer-icon-xs        { font-size:9px;  margin-left:2px; }

/* ── Index / coming-soon section ─────────────────────── */
.coming-soon-label    { color:#8888bb; font-size:13px; }
.coming-soon-img-wrap { cursor:default; }
.coming-soon-title    { cursor:default; }
.deal-emoji           { font-size:40px; margin-bottom:12px; }
.btn-inline-flex      { display:inline-flex; margin-top:16px; }
.savings-badge-right  { left:auto; right:8px; }
.section-title-spaced { margin-bottom:24px; }

/* ── Search / catalogue ──────────────────────────────── */
.filter-drawer-handle       { display:none; text-align:center; padding:8px 0 4px; cursor:pointer; }
.filter-drawer-pill         { width:40px; height:4px; background:#ddd; border-radius:2px; margin:0 auto 8px; }
.ad-sidebar-rect            { margin-top:20px; }
.ad-search-top              { margin-bottom:20px; }
.ad-search-bottom           { margin-top:40px; }
.ad-product-sidebar         { margin-top:16px; }
.ad-product-bottom          { margin-top:40px; }
.seo-link                   { color:#667eea; }
.seo-link-mr                { color:#667eea; margin-right:8px; }

/* ── Filter chips (static base; active state set by PHP class) ─────── */
.filter-chip {
  display:inline-block; padding:8px 16px;
  background:#f0f0f0; color:#1a1a2e;
  border-radius:20px; text-decoration:none;
  cursor:pointer; transition:all 0.2s; margin:4px 4px 4px 0;
}
.filter-chip.active { background:#667eea; color:#fff; }

.filter-brand-link {
  display:flex; align-items:center; padding:8px 0;
  color:#4b5563; text-decoration:none;
  cursor:pointer; transition:color 0.2s;
}
.filter-brand-link.active { color:#667eea; font-weight:600; }

/* ── SEO text block ──────────────────────────────────── */
.seo-block          { margin-top:48px; padding:32px; background:#f8f9fa; border-radius:12px; border-top:3px solid #667eea; }
.seo-block h2       { font-size:18px; font-weight:600; color:#1a1a2e; margin-bottom:12px; }
.seo-block p        { color:#555; line-height:1.8; font-size:14px; }
.seo-block .tags    { color:#777; font-size:13px; margin-top:10px; }
.seo-block .links   { color:#888; font-size:13px; margin-top:16px; }
.seo-block .links a { color:#667eea; }

/* ── Ad containers ───────────────────────────────────── */
.ad-top    { text-align:center; padding:12px 0; background:#fafafa; border-bottom:1px solid #eee; }
.ad-mid    { text-align:center; padding:16px 24px; max-width:1320px; margin:0 auto; }
.ad-bottom { text-align:center; padding:20px 0; background:#fafafa; border-top:1px solid #eee; }

/* ── Hunt card bare footer (homepage hero card) ──────── */
.hunt-footer-bare,
.price-container.hunt-footer-bare { border-top:none !important; background:transparent !important; padding:0 !important; }

/* ── Empty / no-results ──────────────────────────────── */
.empty-state { text-align:center; padding:40px; color:#999; background:#fff; border-radius:12px; }

/* ── Goto redirect page ──────────────────────────────── */
.goto-page   { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; position:relative; overflow:hidden; background:var(--dark-bg,#0f0f23); font-family:var(--font-primary,'Poppins',sans-serif); }
.goto-blob1  { position:fixed; top:-120px; right:-80px; width:500px; height:500px; background:radial-gradient(circle,rgba(99,84,255,.12) 0%,transparent 65%); pointer-events:none; }
.goto-blob2  { position:fixed; bottom:-60px; left:10%; width:350px; height:350px; background:radial-gradient(circle,rgba(255,107,53,.07) 0%,transparent 65%); pointer-events:none; }
.goto-logo   { position:fixed; top:24px; left:28px; display:flex; align-items:center; gap:8px; font-size:20px; font-weight:800; color:#fff; text-decoration:none; letter-spacing:-.03em; }
.goto-logo .logo-text { color:#fff; }
.goto-logo .logo-text span { color:#8b7dff; }
.goto-card   { background:#16162a; border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:40px 36px; max-width:460px; width:100%; text-align:center; position:relative; z-index:1; animation:goto-slide .4s cubic-bezier(.4,0,.2,1); }
@keyframes goto-slide { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.goto-spinner-wrap { width:64px; height:64px; margin:0 auto 24px; position:relative; }
.goto-ring   { width:64px; height:64px; border:3px solid rgba(255,255,255,.08); border-top:3px solid #6354ff; border-radius:50%; animation:spin .9s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.goto-ring-icon { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:20px; color:#8b7dff; }
.goto-card h1 { font-size:22px; font-weight:700; color:#fff; margin-bottom:8px; letter-spacing:-.02em; }
.goto-card p  { font-size:14px; color:#8888bb; line-height:1.6; margin-bottom:0; }
.goto-countdown { display:inline-flex; align-items:center; gap:8px; background:rgba(99,84,255,.12); border:1px solid rgba(99,84,255,.25); color:#8b7dff; font-size:14px; font-weight:600; padding:8px 18px; border-radius:30px; margin:20px 0 24px; }
.goto-num    { font-size:20px; font-weight:800; min-width:20px; }
.goto-privacy { background:rgba(99,84,255,.07); border:1px solid rgba(99,84,255,.15); border-radius:12px; padding:14px 16px; text-align:left; margin-bottom:24px; }
.goto-privacy-title { font-size:12px; font-weight:700; color:#8b7dff; text-transform:uppercase; letter-spacing:.07em; margin-bottom:5px; display:flex; align-items:center; gap:6px; }
.goto-privacy p { font-size:12px; color:#6666aa; line-height:1.55; }
.goto-btn    { display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,#6354ff,#8b7dff); color:#fff; text-decoration:none; font-size:13px; font-weight:700; padding:11px 22px; border-radius:10px; border:none; cursor:pointer; transition:opacity .2s; width:100%; justify-content:center; }
.goto-btn:hover { opacity:.88; }
.goto-btn-back { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.06); color:#aaaacc; border:1px solid rgba(255,255,255,.08); font-size:13px; font-weight:600; padding:11px 22px; border-radius:10px; text-decoration:none; margin-top:12px; width:100%; justify-content:center; }
.goto-btn-back:hover { background:rgba(255,255,255,.1); color:#fff; }
.goto-error-icon { font-size:48px; margin-bottom:20px; color:#ff6b6b; }
.goto-error-card h1 { color:#ff9a9a; }

/* ── 404 page ────────────────────────────────────────── */
.page-404       { margin:0; padding:0; font-family:'Poppins',sans-serif; background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%); min-height:100vh; display:flex; align-items:center; justify-content:center; }
.container-404  { text-align:center; color:#fff; }
.error-code     { font-size:120px; font-weight:800; margin:0; text-shadow:0 4px 20px rgba(0,0,0,.2); }
.error-message  { font-size:28px; margin:20px 0; font-weight:600; }
.error-desc     { font-size:16px; margin-bottom:40px; opacity:.9; }
.back-btn-404   { display:inline-block; background:#fff; color:#6354ff; padding:12px 32px; border-radius:8px; text-decoration:none; font-weight:600; transition:transform .2s; }
.back-btn-404:hover { transform:translateY(-2px); }


/* ── Product share row ──────────────────────────────────────────── */
.product-share-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 18px 0 20px;
  flex-wrap: wrap;
}
.btn-share-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #25D366;
  color: #fff;
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
  box-shadow: 0 2px 8px rgba(37,211,102,0.30);
}
.btn-share-wa:hover {
  background: #1fb855;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(37,211,102,0.38);
}
.btn-copy-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  background: transparent;
  color: var(--text-gray);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border-color);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-secondary);
}
.btn-copy-link:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: var(--primary-light);
}
.btn-copy-link.copied {
  border-color: var(--success-color);
  color: var(--success-color);
  background: #f0fdf6;
}
.btn-copy-link .copy-done { display: none; }
.btn-copy-link .copy-label { display: inline; }
.btn-copy-link.copied .copy-done { display: inline; }
.btn-copy-link.copied .copy-label { display: none; }

/* ═══════════════════════════════════════════════════════════════
   DEAL OF THE DAY — Homepage section + Dedicated page
   ═══════════════════════════════════════════════════════════════ */

/* ── Homepage section header ───────────────────────────────────── */
.deal-of-day-section { margin-top: 0; }

.dod-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
}
.dod-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.dod-fire-icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}
.dod-title {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 800;
  color: var(--text-dark);
  letter-spacing: -0.02em;
  margin: 0 0 2px;
}
.dod-subtitle {
  font-size: 12px;
  color: var(--text-light);
  margin: 0;
  font-weight: 500;
}
.dod-view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary-color);
  color: #fff;
  font-family: var(--font-secondary);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: var(--radius-lg);
  white-space: nowrap;
  transition: background 0.15s;
  flex-shrink: 0;
}
.dod-view-all:hover { background: var(--primary-hover); color: #fff; }
.dod-view-all i { font-size: 13px; }

/* ── Card overrides for deal cards ─────────────────────────────── */
.product-card-deal {
  border-color: rgba(220, 38, 38, 0.12);
}
.product-card-deal:hover {
  border-color: rgba(220, 38, 38, 0.35);
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.10);
}
.dod-badge {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border-color: rgba(220, 38, 38, 0.25) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}
.dod-saving-badge {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border: 1px solid rgba(220, 38, 38, 0.15) !important;
  font-weight: 700 !important;
}

/* ── Dedicated deals page ──────────────────────────────────────── */

/* Hero — full width dark banner */
.deals-hero {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  padding: 40px 0 36px;
  margin-bottom: 0;
}
.deals-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.deals-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-full);
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.deals-fire { font-size: 14px; }
.deals-hero-title {
  font-family: var(--font-primary);
  font-size: 36px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
  line-height: 1;
}
.deals-hero-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  margin: 0;
  max-width: 420px;
  line-height: 1.5;
}
.deals-hero-stats {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-xl);
  overflow: hidden;
  flex-shrink: 0;
}
.deals-stat {
  padding: 16px 24px;
  text-align: center;
}
.deals-stat-val {
  display: block;
  font-family: var(--font-primary);
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 4px;
}
.deals-stat-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.5);
}
.deals-stat-sep {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.12);
  flex-shrink: 0;
}

/* Sort bar — uses same style as results-toolbar-meta */
.deals-sort-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 14px;
  margin-bottom: 24px;
}
.deals-sort-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.deals-sort-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}
.deals-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-light);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-gray);
  transition: all 0.15s;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.deals-sort-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: var(--primary-light);
}
.deals-sort-btn.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}
.deals-total-count {
  font-size: 13px;
  color: var(--text-light);
  font-weight: 600;
  margin-left: auto;
  white-space: nowrap;
}

/* SEO text */
.deals-seo-block {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
}
.deals-seo-block h2 {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 10px;
}
.deals-seo-block p {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.7;
  margin-bottom: 8px;
  max-width: 760px;
}

/* Mobile */
@media (max-width: 768px) {
  .dod-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .dod-view-all { align-self: flex-start; }
  .deals-hero { padding: 24px 0 20px; }
  .deals-hero-title { font-size: 26px; }
  .deals-hero-inner { flex-direction: column; align-items: flex-start; }
  .deals-hero-stats { width: 100%; }
  .deals-stat { flex: 1; padding: 12px 14px; }
  .deals-stat-val { font-size: 17px; }

}