/* Product-page-only styles (scoped) */
body.products .filters{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

body.products .search{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 220px;
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  background: color-mix(in srgb, var(--surface) 65%, transparent);
  border-radius: 999px;
  padding: .5rem .8rem;
}

body.products .search input{
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 1rem;
}

body.products .sort{
  display: flex;
  align-items: center;
  gap: 8px;
}

body.products .filters .sort{
  display: flex;
  align-items: center;
  gap: 8px;
}

body.products .filters .sort select{
  appearance: none;
  -webkit-appearance: none;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--text);
  padding: .6rem 2.2rem .6rem .9rem;
  font-weight: 900;
  cursor: pointer;
}

body.products .filters .sort:after{
  content: "▾";
  position: absolute;
  inset-inline-start: 16px;
  pointer-events: none;
  color: var(--muted);
  font-weight: 900;
}

body.products .chips{
  flex: 1;
  min-width: 260px;
  flex-wrap: nowrap;
  overflow: auto;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
}

body.products .chips{ min-width: 100%; }

body.products .chip{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  scroll-snap-align: start;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 25%, transparent);
}

body.products .chip .chip-ic{ font-size: 1.05rem; }

body.products .chip[aria-pressed="true"]{
  transform: translateY(-1px);
  box-shadow: var(--ring);
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
}

body.products .chip[data-tone="blue"][aria-pressed="true"]{ background: color-mix(in srgb, #2EC5FF 22%, var(--surface)); border-color: color-mix(in srgb, #2EC5FF 60%, var(--border)); }

body.products .chip[data-tone="indigo"][aria-pressed="true"]{ background: color-mix(in srgb, #1E65FF 18%, var(--surface)); border-color: color-mix(in srgb, #1E65FF 55%, var(--border)); }

body.products .chip[data-tone="orange"][aria-pressed="true"]{ background: color-mix(in srgb, #FFB020 18%, var(--surface)); border-color: color-mix(in srgb, #FFB020 55%, var(--border)); }

body.products .chip[data-tone="pink"][aria-pressed="true"]{ background: color-mix(in srgb, #FF4D9D 16%, var(--surface)); border-color: color-mix(in srgb, #FF4D9D 55%, var(--border)); }

body.products .chip[data-tone="green"][aria-pressed="true"]{ background: color-mix(in srgb, #21C17A 18%, var(--surface)); border-color: color-mix(in srgb, #21C17A 55%, var(--border)); }

body.products .chip[data-tone="violet"][aria-pressed="true"]{ background: color-mix(in srgb, #9B7CFF 16%, var(--surface)); border-color: color-mix(in srgb, #9B7CFF 55%, var(--border)); }

body.products .chip[data-tone="cyan"][aria-pressed="true"]{ background: color-mix(in srgb, #21D4FF 16%, var(--surface)); border-color: color-mix(in srgb, #21D4FF 55%, var(--border)); }

body.products .chip[data-tone="purple"][aria-pressed="true"]{ background: color-mix(in srgb, #B36BFF 16%, var(--surface)); border-color: color-mix(in srgb, #B36BFF 55%, var(--border)); }

body.products .chip[data-tone="teal"][aria-pressed="true"]{ background: color-mix(in srgb, #2EE6D6 16%, var(--surface)); border-color: color-mix(in srgb, #2EE6D6 55%, var(--border)); }

body.products .chip[data-tone="amber"][aria-pressed="true"]{ background: color-mix(in srgb, #FFCF4A 16%, var(--surface)); border-color: color-mix(in srgb, #FFCF4A 55%, var(--border)); }

body.products .chip[data-tone="brown"][aria-pressed="true"]{ background: color-mix(in srgb, #C89A6B 16%, var(--surface)); border-color: color-mix(in srgb, #C89A6B 55%, var(--border)); }

body.products .chip[data-tone="sky"][aria-pressed="true"]{ background: color-mix(in srgb, #5AD4FF 16%, var(--surface)); border-color: color-mix(in srgb, #5AD4FF 55%, var(--border)); }

body.products .product-card{
  position: relative;
  overflow: hidden;
  padding: 16px 16px 14px;
}

body.products .product-card:before{
  content: "";
  position: absolute;
  inset: -2px;
  background: radial-gradient(600px circle at 20% 0%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 55%),
              radial-gradient(500px circle at 90% 25%, color-mix(in srgb, var(--primary-2) 22%, transparent), transparent 55%);
  opacity: .22;
  pointer-events: none;
}

body.products .product-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

body.products .product-title{
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: -.2px;
}

body.products .product-icon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  background: color-mix(in srgb, var(--surface-2) 65%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

body.products .product-icon{ background: radial-gradient(14px circle at 25% 20%, rgba(46,197,255,.65), transparent 60%), color-mix(in srgb, var(--surface-2) 70%, transparent); }

body.products .product-icon{ background: radial-gradient(14px circle at 25% 20%, rgba(30,101,255,.55), transparent 60%), color-mix(in srgb, var(--surface-2) 70%, transparent); }

body.products .product-icon{ background: radial-gradient(14px circle at 25% 20%, rgba(255,176,32,.55), transparent 60%), color-mix(in srgb, var(--surface-2) 70%, transparent); }

body.products .product-icon{ background: radial-gradient(14px circle at 25% 20%, rgba(255,77,157,.55), transparent 60%), color-mix(in srgb, var(--surface-2) 70%, transparent); }

body.products .product-icon{ background: radial-gradient(14px circle at 25% 20%, rgba(33,193,122,.55), transparent 60%), color-mix(in srgb, var(--surface-2) 70%, transparent); }

body.products .product-icon{ background: radial-gradient(14px circle at 25% 20%, rgba(155,124,255,.55), transparent 60%), color-mix(in srgb, var(--surface-2) 70%, transparent); }

body.products .product-icon{ background: radial-gradient(14px circle at 25% 20%, rgba(33,212,255,.55), transparent 60%), color-mix(in srgb, var(--surface-2) 70%, transparent); }

body.products .product-icon{ background: radial-gradient(14px circle at 25% 20%, rgba(179,107,255,.55), transparent 60%), color-mix(in srgb, var(--surface-2) 70%, transparent); }

body.products .product-icon{ background: radial-gradient(14px circle at 25% 20%, rgba(46,230,214,.55), transparent 60%), color-mix(in srgb, var(--surface-2) 70%, transparent); }

body.products .product-icon{ background: radial-gradient(14px circle at 25% 20%, rgba(255,207,74,.55), transparent 60%), color-mix(in srgb, var(--surface-2) 70%, transparent); }

body.products .product-icon{ background: radial-gradient(14px circle at 25% 20%, rgba(200,154,107,.55), transparent 60%), color-mix(in srgb, var(--surface-2) 70%, transparent); }

body.products .product-icon{ background: radial-gradient(14px circle at 25% 20%, rgba(90,212,255,.55), transparent 60%), color-mix(in srgb, var(--surface-2) 70%, transparent); }

body.products .product-desc{ margin: 8px 0 10px; }

body.products .product-prices{
  display: grid;
  gap: 8px;
  margin: 10px 0 12px;
}

body.products .price-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  background: color-mix(in srgb, var(--surface) 65%, transparent);
}

body.products .product-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.products .product-card[data-tone="blue"] .product-icon{ background: radial-gradient(14px circle at 25% 20%, rgba(46,197,255,.65), transparent 60%), color-mix(in srgb, var(--surface-2) 70%, transparent); }

body.products .product-card[data-tone="indigo"] .product-icon{ background: radial-gradient(14px circle at 25% 20%, rgba(30,101,255,.55), transparent 60%), color-mix(in srgb, var(--surface-2) 70%, transparent); }

body.products .product-card[data-tone="orange"] .product-icon{ background: radial-gradient(14px circle at 25% 20%, rgba(255,176,32,.55), transparent 60%), color-mix(in srgb, var(--surface-2) 70%, transparent); }

body.products .product-card[data-tone="pink"] .product-icon{ background: radial-gradient(14px circle at 25% 20%, rgba(255,77,157,.55), transparent 60%), color-mix(in srgb, var(--surface-2) 70%, transparent); }

body.products .product-card[data-tone="green"] .product-icon{ background: radial-gradient(14px circle at 25% 20%, rgba(33,193,122,.55), transparent 60%), color-mix(in srgb, var(--surface-2) 70%, transparent); }

body.products .product-card[data-tone="violet"] .product-icon{ background: radial-gradient(14px circle at 25% 20%, rgba(155,124,255,.55), transparent 60%), color-mix(in srgb, var(--surface-2) 70%, transparent); }

body.products .product-card[data-tone="cyan"] .product-icon{ background: radial-gradient(14px circle at 25% 20%, rgba(33,212,255,.55), transparent 60%), color-mix(in srgb, var(--surface-2) 70%, transparent); }

body.products .product-card[data-tone="purple"] .product-icon{ background: radial-gradient(14px circle at 25% 20%, rgba(179,107,255,.55), transparent 60%), color-mix(in srgb, var(--surface-2) 70%, transparent); }

body.products .product-card[data-tone="teal"] .product-icon{ background: radial-gradient(14px circle at 25% 20%, rgba(46,230,214,.55), transparent 60%), color-mix(in srgb, var(--surface-2) 70%, transparent); }

body.products .product-card[data-tone="amber"] .product-icon{ background: radial-gradient(14px circle at 25% 20%, rgba(255,207,74,.55), transparent 60%), color-mix(in srgb, var(--surface-2) 70%, transparent); }

body.products .product-card[data-tone="brown"] .product-icon{ background: radial-gradient(14px circle at 25% 20%, rgba(200,154,107,.55), transparent 60%), color-mix(in srgb, var(--surface-2) 70%, transparent); }

body.products .product-card[data-tone="sky"] .product-icon{ background: radial-gradient(14px circle at 25% 20%, rgba(90,212,255,.55), transparent 60%), color-mix(in srgb, var(--surface-2) 70%, transparent); }


body.products .filters{ gap: 12px; }
body.products .filters{ position: sticky; top: 76px; z-index: 20; padding: 10px; border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  backdrop-filter: blur(10px);
}
body.products .filters .search{ min-width: 300px; }
body.products .chips{ scrollbar-width: thin; }
body.products .chips{ -webkit-overflow-scrolling: touch; }
body.products .product-card .product-desc{ margin-top: 8px; }
body.products .product-prices{ margin-top: 12px; }
body.products .price-row{
  border-radius: 999px;
  padding: .62rem .75rem;
  background: color-mix(in srgb, var(--surface-2) 65%, transparent);
}
body.products .product-actions{ margin-top: 12px; }