@import url('./theme-pearl.css');

/* Самоцвет 6.0.8 — поиск без внутренней рамки и спокойный отклик.
   Этот слой меняет только интерфейс. Облачное хранение не затрагивается. */
:root {
  --v608-ease-out: cubic-bezier(.2, .7, .25, 1);
  --v608-press-ease: cubic-bezier(.2, .8, .3, 1);
}

/* Индикатор фокуса принадлежит округлённому полю целиком.
   Внутренний input не рисует собственный прямоугольник Safari. */
#app .searchbar {
  transition: border-color 160ms ease, box-shadow 160ms ease,
    background-color 160ms ease;
}
#app .searchbar input,
#app .searchbar input:focus,
#app .searchbar input:focus-visible {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  border: 0 !important;
  border-radius: 0;
  outline: none !important;
  outline-offset: 0;
  box-shadow: none !important;
  background: transparent;
  caret-color: #805b36;
}
#app .searchbar input[type="search"]::-webkit-search-decoration,
#app .searchbar input[type="search"]::-webkit-search-results-button,
#app .searchbar input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
#app .searchbar:focus-within {
  border-color: #a27b50;
  box-shadow: 0 0 0 3px #b793671c;
  background-color: #fffdfa;
}
/* Для клавиатуры сохраняется контрастный округлённый индикатор. */
#app.v608-keyboard .searchbar:has(input:focus-visible) {
  border-color: #805b36;
  box-shadow: 0 0 0 2px #805b36;
}

/* Старые слои анимировали всю страницу и карточки при каждой отрисовке.
   Переход экрана теперь запускается один раз из feature608.js. */
#app .scroller > .content.v608-motion,
#app .scroller > .content.v608-motion.v50-page-in,
#app .v608-motion .product,
#app .v608-motion .photo-main {
  animation: none !important;
}

/* CSS :active даёт отклик сразу и не перехватывает касание или прокрутку. */
#app button {
  transition: transform 140ms var(--v608-press-ease),
    background-color 160ms ease, border-color 160ms ease,
    color 160ms ease, box-shadow 180ms ease;
}
#app button:not(:disabled):active {
  transform: scale(.976);
}
#app .iconbtn:not(:disabled):active,
#app .fav:not(:disabled):active,
#app .bag:not(:disabled):active {
  transform: scale(.94);
}
#app .photo-zoom:not(:disabled):active {
  transform: none;
}
#app .nav-item {
  transition: background-color 180ms ease, color 180ms ease,
    transform 140ms var(--v608-press-ease);
}
#app .chip,
#app .cat46-choice,
#app .v50-choice,
#app .size {
  transition: background-color 160ms ease, border-color 160ms ease,
    color 160ms ease, transform 140ms var(--v608-press-ease);
}
#app .product {
  transition: transform 180ms var(--v608-ease-out), box-shadow 180ms ease;
}
#app .toast {
  transition: opacity 180ms ease, transform 220ms var(--v608-ease-out);
}
#app .modalcard {
  animation: v608-dialog-in 200ms var(--v608-ease-out) both;
}
@keyframes v608-dialog-in {
  from { opacity: 0; transform: translateY(8px) scale(.992); }
  to { opacity: 1; transform: none; }
}

@media (hover: hover) {
  #app .product:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px #6a4d3217;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app button,
  #app .searchbar,
  #app .product,
  #app .toast {
    transition: none !important;
  }
  #app .modalcard,
  #app .v608-motion,
  #app .v608-motion * {
    animation: none !important;
  }
  #app button:not(:disabled):active,
  #app .product:hover {
    transform: none;
  }
}