/* Стеклянные кнопки. Прямой прямоугольник и чёрный выбор не меняются.
   Невыбранная кнопка: полупрозрачная светлая заливка, блик сверху и мягкая тень, без контура.
   Источник приёма: .button-glass на octomatica.ru (rgba-заливка, blur 14px, inset-блик). */
:root {
  --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(236, 236, 234, .62));
  --glass-bg-hover: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(236, 236, 234, .74));
  --glass-bg-press: rgba(222, 222, 216, .78);
  --glass-solid: linear-gradient(180deg, #FAFAF9, #ECECEA);
  --glass-lift: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(11, 11, 11, .05), 0 1px 2px rgba(11, 11, 11, .08), 0 8px 18px -10px rgba(11, 11, 11, .34);
  --glass-lift-hover: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(11, 11, 11, .05), 0 3px 6px rgba(11, 11, 11, .09), 0 14px 26px -12px rgba(11, 11, 11, .4);
  --glass-press: inset 0 1px 3px rgba(11, 11, 11, .16);
  --glass-on: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 14px -8px rgba(11, 11, 11, .5);
  --glass-blur: blur(14px) saturate(1.4);
}

.seg button,
.chips button,
.cats button,
.dock button,
.pv__tool,
.qty,
.x,
.pv__order {
  background: var(--glass-bg);
  box-shadow: var(--glass-lift);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  transition: color var(--dur-state), background var(--dur-state), box-shadow var(--dur-state), transform var(--dur-press) var(--ease-out);
}
.qty button { background: transparent; }

@media (hover: hover) {
  .seg button:not([aria-pressed="true"]):not([aria-current="true"]):not(.is-on):not(:disabled):hover,
  .chips button:not([aria-pressed="true"]):hover,
  .cats button:not([aria-pressed="true"]):hover,
  .pv__tool:not([aria-pressed="true"]):not(:disabled):hover,
  .x:hover,
  .qty button:hover {
    background: var(--glass-bg-hover);
    box-shadow: var(--glass-lift-hover);
    transform: translateY(-1px);
  }
  .qty button:hover { box-shadow: none; }
}

.seg button:not([aria-pressed="true"]):not([aria-current="true"]):not(.is-on):not(:disabled):active,
.chips button:not([aria-pressed="true"]):active,
.cats button:not([aria-pressed="true"]):active,
.dock button:not([aria-current="true"]):active,
.pv__tool:not(:disabled):active,
.x:active,
.qty button:active {
  background: var(--glass-bg-press);
  box-shadow: var(--glass-press);
  transform: translateY(1px) scale(.97);
}

/* Выбор: тот же чёрный прямоугольник, лёгкий блик сверху вместо кольца. */
.seg button[aria-pressed="true"],
.seg button[aria-current="true"],
.seg button.is-on,
.chips button[aria-pressed="true"],
.cats button[aria-pressed="true"],
.dock button[aria-current="true"],
.pv__tool[aria-pressed="true"] {
  color: #fff;
  background: #000;
  box-shadow: var(--glass-on);
}

.seg button:disabled,
.pv__tool:disabled {
  background: rgba(236, 236, 234, .5);
  box-shadow: none;
  color: var(--mute);
  cursor: not-allowed;
}

/* Фокус с клавиатуры: чёрная рамка с белым зазором видна и на стекле, и на чёрном. */
.seg button:focus-visible,
.chips button:focus-visible,
.cats button:focus-visible,
.dock button:focus-visible,
.pv__tool:focus-visible,
.qty button:focus-visible,
.x:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Телефон, нет поддержки blur или просьба убрать прозрачность: плотная заливка без размытия. */
@media (max-width: 1023px), (prefers-reduced-transparency: reduce) {
  .seg button, .chips button, .cats button, .dock button, .pv__tool, .qty, .x, .pv__order {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .seg button:not([aria-pressed="true"]):not([aria-current="true"]):not(.is-on):not(:disabled),
  .chips button:not([aria-pressed="true"]),
  .cats button:not([aria-pressed="true"]),
  .dock button:not([aria-current="true"]),
  .pv__tool:not([aria-pressed="true"]):not(:disabled),
  .qty, .x, .pv__order {
    background: var(--glass-solid);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .seg button:not([aria-pressed="true"]):not([aria-current="true"]):not(.is-on):not(:disabled),
  .chips button:not([aria-pressed="true"]),
  .cats button:not([aria-pressed="true"]),
  .pv__tool:not([aria-pressed="true"]):not(:disabled),
  .qty, .x, .pv__order {
    background: var(--glass-solid);
  }
}
@media (prefers-reduced-motion: reduce) {
  .seg button, .chips button, .cats button, .dock button, .pv__tool, .x, .qty button { transform: none !important; }
}