*,
*::before,
*::after {
  box-sizing: border-box;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  cursor: default !important;
}

video {
  cursor: default !important;
}

picture {
  cursor: default !important;
}

input,
textarea,
select,
button {
  font: inherit;
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: "Inter", sans-serif;
  color: rgb(var(--black) / 0.8);
  overflow-y: auto;
  overflow-x: hidden;
  background-color: rgba(173, 173, 173, 0.2);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: 56px; /* Отступ для фиксированного header */
}

/* Предотвращение горизонтального скролла на мобильных */
@media (max-width: 480px) {
  body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  * {
    max-width: 100%;
    box-sizing: border-box;
  }

  img,
  video,
  iframe {
    max-width: 100%;
    height: auto;
  }

  /* Предотвращение переполнения для всех контейнеров */
  .container,
  .wrapper,
  .content,
  .main,
  section,
  article {
    max-width: 100%;
    overflow-x: hidden;
  }
}

:where(ul, ol):where([class]) {
  padding-left: 0;
}

body,
:where(blockquote, figure, fieldset):where([class]) {
  margin: 0;
}

:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl):where([class]) {
  margin-block: 0;
}

:where(dd[class]) {
  margin-left: 0;
}

:where(fieldset[class]) {
  padding: 0;
  border: none;
}

p {
  --paragraphMarginBottom: 24px;
  margin-block: 0;
}

a:where([class]) {
  display: inline-flex;
}

button,
label,
a {
  cursor: pointer;
}

:where([fill]:not([fill="none"], [fill^="url"])) {
  fill: currentColor;
}

:where([stroke]:not([stroke="none"], [stroke^="url"])) {
  stroke: currentColor;
}

:where(table) {
  border-collapse: collapse;
  border-color: currentColor;
}

:root {
  --black: 0 0 0;
  --background-30: rgba(219, 216, 205, 0.3);
  --background-white: rgb(255, 255, 255);
  --input-color: #ccc;
  --red-80: rgb(255, 0, 0);
  --border-radius: 0.3rem;
  --input-height: 1.375rem;
  --padding-x: 1em;
  --transition-duration: 0.2s;
  --accent-color: rgb(131, 131, 131);
}

/* Мобильные устройства от 320px */
@media (max-width: 480px) {
  :root {
    --padding-x: 0.75rem;
  }
}

/* Очень маленькие экраны (320px) */
@media (max-width: 360px) {
  :root {
    --padding-x: 0.5rem;
  }
}

/* Визуально скрытый контент для screen readers */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

a,
button,
input,
textarea,
svg * {
  font-size: 0.875rem;
  color: rgb(var(--black) / 0.8);
  text-decoration: none;
  transition: color var(--transition-duration) ease,
    background-color var(--transition-duration) ease,
    opacity var(--transition-duration) ease,
    fill var(--transition-duration) ease, stroke var(--transition-duration) ease,
    transform 0.2s ease, box-shadow 0.2s ease;
}

/* Микроанимации для кнопок */
button:active,
.btn:active {
  transform: scale(0.98);
}

button:hover,
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Исключение для иконки поиска - убираем белый квадрат и тень */
.search__toggle,
.search__toggle:hover,
.search__toggle:active {
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.search__toggle:hover {
  transform: scale(1.02) !important;
}

.search__toggle svg,
.search__toggle svg * {
  color: rgba(0, 0, 0, 0.8) !important;
  stroke: currentColor !important;
}

ul,
li,
ol,
p {
  font-size: 0.9375rem;
  list-style: none;
  margin: 0;
  padding: 0;
  color: rgb(var(--black) / 0.8);
}

h2 {
  margin: 0;
  padding: 0;
  font-size: 1.0625rem;
  color: rgb(var(--black) / 0.8);
}

h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: 0.938rem;
  color: rgb(var(--black) / 0.8);
}

main {
  flex: 1;
  width: 100%;
}

.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page__main {
  flex: 1;
}

.header {
  max-width: 100%;
  background: var(--background-white);
}

footer {
  /* Фон теперь задается в header.footer.css с темным градиентом */
  position: relative;
  padding-block: 0;
  margin-top: auto;
  flex-shrink: 0;
}

.visually__hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Screen reader only H1 для SEO */
.h1-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==================  C O N T A C T E ================== */
.contacts--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.contacts--row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.contacts--list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}

.contactbtn {
  position: relative;
  box-sizing: border-box;
  width: 10rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius);
  color: var(--black);
  font: 1000 10px/1 system-ui;
  background: linear-gradient(
    90deg,
    rgb(202, 202, 202) 0 26px,
    transparent 26px,
    rgba(0, 0, 0, 0.726)
  );
}

.contactbtn:hover {
  background: linear-gradient(
    90deg,
    rgb(202, 202, 202) 0 26px,
    transparent 26px,
    var(--red-80)
  );
  transform: translateY(-2px);
}

.contactbtn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 26px;
  background: center/18px no-repeat;
}

.contactbtn--telegram::before {
  background-image: url("/assets/images/telegram.svg");
}
.contactbtn--facebook::before {
  background-image: url("/assets/images/facebook.png");
}
.contactbtn--instagram::before {
  background-image: url("/assets/images/instagram.svg");
}
.contactbtn--tiktok::before {
  background-image: url("/assets/images/tiktok.svg");
}
.contactbtn--email::before {
  background-image: url("/assets/images/mail.svg");
}
.contactbtn--phone::before {
  background-image: url("/assets/images/telephone.png");
}
.contactbtn--viber::before {
  background-image: url("/assets/images/viber.svg");
}
.contactbtn--whatsapp::before {
  background-image: url("/assets/images/whatsapp.svg");
}

.single .contacts--row {
  display: flex;
  justify-content: space-around;
}

/* ==================  H O M E - S E C T I O N S ================== */

.home-section {
  padding: 1rem var(--padding-x);
  max-width: 1350px;
  margin-inline: auto;
}

.home__section--head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.home__section--right {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.home__section--more {
  color: var(--accent-color);
}

/* ===== С Т Р Е Л К И ===== */
.home__section--scroller {
  position: relative;
}

.hs__track {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.hs__track::-webkit-scrollbar {
  display: none;
}

.hs__item {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.snap-slider__arrow {
  position: absolute;
  top: 40%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.snap-slider__arrow.is-prev {
  left: 0;
  transform: translate(-50%, -50%);
}
.snap-slider__arrow.is-next {
  right: 0;
  transform: translate(50%, -50%);
}

.snap-slider__arrow::before {
  content: "›";
  font-size: 32px;
  line-height: 1;
}
.snap-slider__arrow.is-prev::before {
  content: "‹";
}

/* ===== P R E T - VECHI & NOU ===== */
.price__old {
  text-decoration: line-through;
  text-decoration-color: #b00020;
  color: #b00020;
  opacity: 0.8;
  margin-right: 8px;
}
.price__new {
  font-weight: 1000;
}

/* ===== T O A T E --> ===== */
.catalog.catalog--no-filters {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 60vh;
  margin-bottom: 2rem;
}

.catalog.catalog--no-filters > .container {
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: var(--padding-x);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.catalog.catalog--no-filters .catalog__content {
  flex: 1;
}

.catalog.catalog--no-filters .listings__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}