/* Browse — search & results design system
   General Sans · #000–#FFF grayscale · 1px #E5E7EB borders */

:root {
  --ds-white: #FFFFFF;
  --ds-black: #000000;
  --ds-bg: #F9FAFB;
  --ds-soft: #F3F4F6;
  --ds-line: #E5E7EB;
  --ds-muted: #6B7280;
  --ds-deep: #111827;

  --ds-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ds-dur: 300ms;
  --ds-shadow-2: 0 1px 2px rgba(17, 24, 39, 0.08);
}

.ds {
  font-family: 'General Sans', sans-serif;
  color: var(--ds-deep);
  -webkit-font-smoothing: antialiased;
}

/* Header */
.ds-header {
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

/* Inputs */
.ds-input {
  background: var(--ds-bg);
  border: 1px solid var(--ds-line);
  border-radius: 12px;
  color: var(--ds-deep);
  outline: none;
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}
.ds-input::placeholder { color: var(--ds-muted); }
.ds-input:focus {
  background: var(--ds-white);
  border-color: var(--ds-deep);
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.06);
}
.ds-input::-webkit-search-decoration,
.ds-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* Action pills */
.ds-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--ds-line);
  border-radius: 100px;
  background: var(--ds-white);
  color: var(--ds-deep);
  font-size: 14px;
  font-weight: 500;
  transition: transform var(--ds-dur) var(--ds-ease), background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.ds-pill:hover { background: var(--ds-bg); }
.ds-pill:active { transform: scale(0.96); }
.ds-pill.is-active {
  background: var(--ds-black);
  border-color: var(--ds-black);
  color: var(--ds-white);
}
.ds-pill-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 100px;
  background: var(--ds-white);
  color: var(--ds-black);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

/* Sort menu */
.ds-menu {
  background: var(--ds-white);
  border: 1px solid var(--ds-line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06), 0 8px 24px rgba(17, 24, 39, 0.06);
  transform-origin: top left;
}
.ds-menu-item {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 40px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 14px;
  text-align: left;
  color: var(--ds-deep);
}
.ds-menu-item:hover,
.ds-menu-item:focus-visible { background: var(--ds-bg); outline: none; }
.ds-menu-item[aria-checked="true"] { font-weight: 500; }

.ds-pop-enter { transition: opacity 200ms ease, transform var(--ds-dur) var(--ds-ease); }
.ds-pop-leave { transition: opacity 150ms ease, transform 150ms ease; }
.ds-pop-from { opacity: 0; transform: translateY(-4px) scale(0.96); }
.ds-pop-to { opacity: 1; transform: translateY(0) scale(1); }

/* Grid / list segmented toggle */
.ds-segment {
  position: relative;
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--ds-line);
  border-radius: 100px;
  background: var(--ds-soft);
}
.ds-segment > button {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 30px;
  border-radius: 100px;
  transition: color 200ms ease;
}
.ds-segment-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 36px;
  height: 30px;
  border-radius: 100px;
  background: var(--ds-white);
  box-shadow: var(--ds-shadow-2);
  transition: transform var(--ds-dur) var(--ds-ease);
}
.ds-segment-thumb.is-right { transform: translateX(36px); }

/* Product placeholders */
.ds-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-soft);
  border: 1px solid var(--ds-line);
  overflow: hidden;
}
.ds-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--ds-line);
  border-radius: 100px;
  background: var(--ds-white);
  color: var(--ds-deep);
  font-size: 11px;
  font-weight: 500;
}
.ds-card,
.ds-row {
  transition: transform var(--ds-dur) var(--ds-ease), background-color 200ms ease;
}
.ds-card:active { transform: scale(0.98); }
.ds-row:hover { background: var(--ds-bg); }
.ds-row:active { transform: scale(0.99); }

.ds-reveal {
  animation: ds-rise 420ms var(--ds-ease) both;
  animation-delay: calc(var(--i, 0) * 30ms);
}
@keyframes ds-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Shimmer skeleton */
.ds-shimmer {
  background: linear-gradient(90deg, #F3F4F6 0%, #E5E7EB 50%, #F3F4F6 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: 0 0; }
}

/* Filter bottom sheet */
.ds-sheet-root {
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear var(--ds-dur);
}
.ds-sheet-root.is-open {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s;
}
.ds-backdrop {
  background: rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--ds-dur) ease;
}
.ds-sheet-root.is-open .ds-backdrop { opacity: 1; }

.ds-sheet {
  border: 1px solid var(--ds-line);
  border-bottom: 0;
  transform: translateY(100%);
  transition: transform var(--ds-dur) var(--ds-ease);
  will-change: transform;
}
.ds-sheet-root.is-open .ds-sheet { transform: translateY(var(--drag, 0px)); }
.ds-sheet.is-dragging { transition: none; }

.ds-sheet-grab {
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.ds-sheet.is-dragging .ds-sheet-grab { cursor: grabbing; }
.ds-sheet-footer { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

.ds-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--ds-line);
  border-radius: 100px;
  background: var(--ds-white);
  color: var(--ds-deep);
  transition: transform var(--ds-dur) var(--ds-ease), background-color 200ms ease;
}
.ds-icon-btn:hover { background: var(--ds-bg); }
.ds-icon-btn:active { transform: scale(0.92); }

/* Category chips */
.ds-chip {
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--ds-line);
  border-radius: 100px;
  background: var(--ds-white);
  color: var(--ds-deep);
  font-size: 14px;
  font-weight: 500;
  transition: transform var(--ds-dur) var(--ds-ease), background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.ds-chip:hover { background: var(--ds-bg); }
.ds-chip:active { transform: scale(0.95); }
.ds-chip.is-active {
  background: var(--ds-black);
  border-color: var(--ds-black);
  color: var(--ds-white);
}

/* Footer buttons */
.ds-btn {
  height: 48px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 500;
  transition: transform var(--ds-dur) var(--ds-ease), background-color 200ms ease;
}
.ds-btn:active { transform: scale(0.97); }
.ds-btn-secondary {
  border: 1px solid var(--ds-line);
  background: var(--ds-white);
  color: var(--ds-deep);
}
.ds-btn-secondary:hover { background: var(--ds-bg); }
.ds-btn-primary {
  border: 1px solid var(--ds-black);
  background: var(--ds-black);
  color: var(--ds-white);
}
.ds-btn-primary:hover { background: var(--ds-deep); }

/* Dual-thumb price slider */
.ds-range {
  position: relative;
  height: 20px;
  --a: 0;
  --b: 1;
}
.ds-range-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 100px;
  background: var(--ds-line);
}
.ds-range-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(10px + (100% - 20px) * var(--a));
  right: calc(10px + (100% - 20px) * (1 - var(--b)));
  border-radius: inherit;
  background: var(--ds-black);
}
.ds-range input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 20px;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.ds-range input[type="range"].is-top { z-index: 2; }
.ds-range input[type="range"]:focus { outline: none; }
.ds-range input[type="range"]::-webkit-slider-runnable-track { height: 20px; background: transparent; }
.ds-range input[type="range"]::-moz-range-track { height: 20px; background: transparent; }
.ds-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 20px;
  height: 20px;
  border: 1px solid var(--ds-line);
  border-radius: 50%;
  background: var(--ds-white);
  box-shadow: var(--ds-shadow-2);
  cursor: grab;
  transition: transform 200ms var(--ds-ease);
}
.ds-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 1px solid var(--ds-line);
  border-radius: 50%;
  background: var(--ds-white);
  box-shadow: var(--ds-shadow-2);
  cursor: grab;
}
.ds-range input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.1); }
.ds-range input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.12); }
.ds-range input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.12); }

/* Binary toggle switch */
.ds-switch {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  border-radius: 100px;
  background: var(--ds-line);
  transition: background-color 0.2s ease-in-out;
}
.ds-switch.is-on { background: var(--ds-black); }
.ds-switch:focus-visible { outline: 2px solid var(--ds-deep); outline-offset: 2px; }
.ds-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ds-white);
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.15);
  transition: transform 0.2s ease-in-out;
}
.ds-switch.is-on .ds-switch-knob { transform: translateX(20px); }

@media (prefers-reduced-motion: reduce) {
  .ds *,
  .ds *::before,
  .ds *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ds-shimmer { animation: none; }
}