* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; padding: 0; }
body {
  color: #F3EFFF;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.4;
  /* Тильный размер фона по умолчанию (высота одного вертикального тайла) */
  --featured-bg-tile-h: 720px;
}

/* Frame around the whole bestsellers block */
.tm-featured-wrapper {
  box-sizing: border-box;
  border: 2px solid #4f463e;
  border-radius: 10px;
  position: relative;
  overflow: hidden; /* ensure clean rounded corners */
  perspective: 800px; /* enable subtle 3D depth for child cards */
}

/* Desktop/default styles remain clean; mobile-specific effects added below */

/* ---------- секция и заголовок ---------- */
.container-bestsellers.basic-grid {
  /* Синхронизируем с уменьшёнными отступами блока категорий */
  padding: 0 26px;
  padding-top: 1rem; /* slightly reduced to match categories heading spacing */
  /* 1) Plain JPG fallback for older Safari/iOS */
  background-image: url('/static/deps/images/bestsellers-carousel-bg.jpg');
  /* 2) Safari-compatible image-set (no type descriptors) */
  background-image: -webkit-image-set(
    url('/static/deps/images/bestsellers-carousel-bg.avif') 1x,
    url('/static/deps/images/bestsellers-carousel-bg.webp') 1x,
    url('/static/deps/images/bestsellers-carousel-bg.jpg') 1x
  );
  /* 3) Standard image-set with type descriptors */
  background-image: image-set(
    url('/static/deps/images/bestsellers-carousel-bg.avif') type('image/avif') 1x,
    url('/static/deps/images/bestsellers-carousel-bg.webp') type('image/webp') 1x,
    url('/static/deps/images/bestsellers-carousel-bg.jpg') type('image/jpeg') 1x
  );

  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  perspective: 900px; /* ensure 3D also applies at grid level */
  position: relative;          /* for overlay */
}

/* Планшеты/мобилки: как в categories-glass.css */
@media (max-width: 991px) {
  .container-bestsellers.basic-grid { padding: 0 clamp(16px, 4vw, 24px); padding-top: 2.8rem; }
}
@media (max-width: 576px) {
  /* Image still fills the rounded wrap on mobile */
}

/* ---------------- Mobile vertical background with seam softening ---------------- */
@media (max-width: 767.98px) {
  /* Переносим фон на wrapper и повторяем вниз */
  .tm-featured-wrapper {
    /* 1) Plain JPG fallback */
    background-image: url('/static/deps/images/bestsellers-carousel-bg-vertical.jpg') !important;
    /* 2) Safari-compatible image-set */
    background-image: -webkit-image-set(
      url('/static/deps/images/bestsellers-carousel-bg-vertical.avif') 1x,
      url('/static/deps/images/bestsellers-carousel-bg-vertical.webp') 1x,
      url('/static/deps/images/bestsellers-carousel-bg-vertical.jpg') 1x
    ) !important;
    /* 3) Standard image-set */
    background-image: image-set(
      url('/static/deps/images/bestsellers-carousel-bg-vertical.avif') type('image/avif') 1x,
      url('/static/deps/images/bestsellers-carousel-bg-vertical.webp') type('image/webp') 1x,
      url('/static/deps/images/bestsellers-carousel-bg-vertical.jpg') type('image/jpeg') 1x
    ) !important;
    background-position: top center !important;
    background-size: 100% auto;
    background-repeat: repeat-y;
  }
  /* Мягкое сглаживание швов и светлая виньетка поверх */
  .tm-featured-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Mirror the same fallback sequence inside overlay */
    background-image: url('/static/deps/images/bestsellers-carousel-bg-vertical.jpg') !important;
    background-image: -webkit-image-set(
      url('/static/deps/images/bestsellers-carousel-bg-vertical.avif') 1x,
      url('/static/deps/images/bestsellers-carousel-bg-vertical.webp') 1x,
      url('/static/deps/images/bestsellers-carousel-bg-vertical.jpg') 1x
    ) !important;
    background-image: image-set(
      url('/static/deps/images/bestsellers-carousel-bg-vertical.avif') type('image/avif') 1x,
      url('/static/deps/images/bestsellers-carousel-bg-vertical.webp') type('image/webp') 1x,
      url('/static/deps/images/bestsellers-carousel-bg-vertical.jpg') type('image/jpeg') 1x
    ) !important;
    background-position: top center !important;
    background-size: 100% auto !important;
    background-repeat: repeat-y !important;
    background-attachment: local;
    filter: blur(20px);
    opacity: 0.30;
    transform: scale(1.04);
    transform-origin: center;
    will-change: filter, transform, opacity;
    pointer-events: none;
    z-index: 1; /* подняли над фоном, под контентом */
  }
  .tm-featured-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1; /* поверх фона, под контентом */
    background:
      radial-gradient(120% 70% at 50% 0%, rgba(255, 242, 200, 0.06), rgba(255, 242, 200, 0) 60%),
      radial-gradient(120% 80% at 50% 100%, rgba(255, 242, 200, 0.05), rgba(255, 242, 200, 0) 60%),
      linear-gradient(180deg, rgba(12, 14, 18, 0.02), rgba(12, 14, 18, 0.06));
    mix-blend-mode: soft-light;
  }

  /* На мобилках фон и оверлей у внутреннего контейнера выключены */
  .container-bestsellers.basic-grid { background: none !important; position: relative; z-index: 2; }
  .container-bestsellers.basic-grid::before { content: none !important; background: none !important; }
}

/* Крупные экраны: чуть меньше паддинги вместо zoom-эффекта */
@media (min-width: 1200px) {
  .container-bestsellers.basic-grid { padding: 40px; }
}

/* Desktop overlay (кремовая вуаль), как было изначально */
.container-bestsellers.basic-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(28, 18, 3, 0.33);
  pointer-events: none;
  z-index: 0;
}

/* Ensure content sits above overlay */
.container-bestsellers.basic-grid > * {
  position: relative;
  z-index: 1;
}

.tm-section-title {
  position: relative;
  text-align: center;
  margin: 0 0 2.2rem;
  padding-bottom: 14px; /* резерв под линию и дополнительный зазор до сетки */
  font-size: 1.8rem;
  font-weight: 700;
  color: #dcc49a;
}

/* Больше воздуха под заголовком на адаптивах — как у категорий */
@media (max-width: 991px) {
  .tm-section-title { margin: 0 0 1.8rem; }
}
@media (max-width: 576px) {
  .tm-section-title { margin: 0 0 1rem; padding-bottom: 10px; }
}

.tm-section-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px; /* линия строго под заголовком, как в блоке категорий */
  height: 2px;
  background: linear-gradient(90deg, #2f2d28, #ab9964, #2f2d28);
}

/* ---------- сетка карточек ---------- */
.tm-featured-grid {
  display: grid;
  gap: 1.5em;
  grid-template-columns: repeat(2, 1fr); /* fallback для мобильных */
  align-items: stretch; /* треки ряда берут высоту самого высокого элемента, остальные растягиваются */
  justify-items: center; /* центрируем карточку внутри ячейки */
  margin-top: 8px;   /* небольшой зазор от подчеркивания заголовка */
  margin-bottom: 3.2rem;
  perspective: 900px; /* ensure 3D also applies at grid level */
}
@media (min-width: 768px) { .tm-featured-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .tm-featured-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .tm-featured-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1400px) { .tm-featured-grid { grid-template-columns: repeat(5, 1fr); } }

/* ---------- карточка — базовый вид ---------- */
.container-bestsellers.basic-grid .tm-featured-grid .tm-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  max-width: 210px; /* чуть уже, чтобы карточка выглядела стройнее */
  /* Раньше была фикс. высота, из-за неё выпадала кнопка. Даем авто-высоту и базовый минимум */
  min-height: 360px; /* визуальный базис */
  height: 100%;      /* растягиваемся до высоты трека (равной высоте самой высокой карточки в ряду) */
  padding: 10px; /* слегка меньше, чтобы сохранить пропорции при сужении */
  background: #3a3740b0;
  border-radius: 2em;
  overflow: visible;
  transition: transform 320ms cubic-bezier(.2,.9,.25,1), box-shadow 220ms ease, filter 180ms ease;
  transform-origin: center;
  will-change: transform;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  /* ---------- ЗДЕСЬ рисуется рамка ---------- */
  box-shadow:
    0 0 0 2px #E6BF5A; /* базово только золотое кольцо, без внешней тени */
}

/* Димим ТОЛЬКО неактивные карточки, когда наведена конкретная карточка */
.container-bestsellers.basic-grid .tm-featured-grid:has(article.tm-product-card:hover) article.tm-product-card:not(:hover) {
  filter: brightness(0.78) contrast(0.98) saturate(0.95);
  /* у неактивных карточек — только контур без свечения */
  box-shadow: 0 0 0 2px #E6BF5A;
}

/* Disable hover highlight on touch/mobile devices */
@media (hover: none), (pointer: coarse) {
  .container-bestsellers.basic-grid .tm-featured-grid:has(article.tm-product-card:hover) article.tm-product-card:not(:hover) {
    filter: none;
    box-shadow: 0 0 0 2px #E6BF5A;
  }
  .container-bestsellers.basic-grid .tm-featured-grid article.tm-product-card:hover,
  .container-bestsellers.basic-grid .tm-featured-grid article.tm-product-card[data-tilt-active] {
    filter: none;
    box-shadow: 0 0 0 2px #E6BF5A;
  }
  .container-bestsellers.basic-grid .tm-featured-grid .tm-product-card:hover .tm-card-img {
    transform: none;
  }
}

/* Наведённая карточка — наоборот светлее и чуть теплее */
.container-bestsellers.basic-grid .tm-featured-grid article.tm-product-card:hover {
  filter: brightness(1.12) contrast(1.05) saturate(1.06);
  /* мягкая кремовая подсветка, чтобы выделить выбранную */
  box-shadow:
    0 10px 24px rgba(0,0,0,0.45),
    0 0 22px rgba(255, 233, 176, 0.45),
    0 0 0 2px #E6BF5A;
}

/* ---------- картинка ---------- */
.container-bestsellers.basic-grid .tm-featured-grid .tm-card-image-wrap {
  width: 100%;
  height: 160px;
  overflow: hidden;
  border-radius: 25px; /* более выражённое скругление рамки */
  background: #222;
  /* Надёжное отсечение для некоторых браузеров с 3D/transform */
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* webkit clipping quirk */
  clip-path: inset(0 round 25px);
}
.container-bestsellers.basic-grid .tm-featured-grid .tm-card-image-wrap picture {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  clip-path: inset(0 round 25px);
}
.container-bestsellers.basic-grid .tm-featured-grid .tm-card-img {
  /* Fill the wrap so border-radius matches perfectly */
  width: 100%;
  height: 100%;
  object-fit: cover; /* canvas already prepared with blur-extend; cover is fine */
  display: block;
  border-radius: inherit; /* match wrap radius (e.g., 25px) */
  clip-path: inset(0 round 25px);
  transition: transform .4s ease;
}
.container-bestsellers.basic-grid .tm-featured-grid .tm-product-card:hover .tm-card-img {
  transform: scale(1.04);
}

/* ---------- информация и кнопка ---------- */
.container-bestsellers.basic-grid .tm-featured-grid .tm-card-info {
  text-align: center;
  padding: 10px 6px;
  color: #F3EFFF;
  /* Позволяем контенту сжиматься внутри фиксированной высоты карточки */
  flex: 1 1 auto;
  min-height: 0;      /* критично: разрешает блоку сжиматься во флекс-контейнере */
  overflow: hidden;   /* предотвращает вылезание внутренностей */
}
.container-bestsellers.basic-grid .tm-featured-grid .tm-card-title {
  margin: 0;
  font-weight: 800;              /* чуть более жирный заголовок */
  font-size: 1.08rem;            /* чуть крупнее для лучшей читабельности */
  line-height: 1.22;
  font-style: italic;
  color: #dac291;
  letter-spacing: .1px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
  margin-bottom: 2px;            /* небольшой отступ от подзаголовка */
}
/* Подзаголовок — краткое описание под названием */
.container-bestsellers.basic-grid .tm-featured-grid .tm-card-subtitle {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.3;
  color: #9C9EA8; /* серый оттенок из палитры проекта */
}
.container-bestsellers.basic-grid .tm-featured-grid .tm-card-price {
  margin-top: 6px;
  color: #E6BF5A;
  font-weight: 800;
  font-size: 1.02rem;
}

.container-bestsellers.basic-grid .tm-featured-grid .tm-card-actions {
  display: flex;
  justify-content: center;
  padding-top: 8px;
  position: relative;
  z-index: 3; /* выше, чем ссылка внутри карточки */
  margin-top: auto; /* прижимаем блок действий к низу карточки */
}

/* Remove link underline and purple coloring inside product cards */
.container-bestsellers.basic-grid .tm-featured-grid .tm-product-card a.tm-product-link,
.container-bestsellers.basic-grid .tm-featured-grid .tm-product-card a.tm-product-link:visited,
.container-bestsellers.basic-grid .tm-featured-grid .tm-product-card a.tm-product-link:hover,
.container-bestsellers.basic-grid .tm-featured-grid .tm-product-card a.tm-product-link:focus {
  text-decoration: none;
  color: inherit;
}

/* 🔽 здесь расширил селекторы: */
.container-bestsellers.basic-grid .tm-featured-grid .add-to-cart,
.container-bestsellers.basic-grid .tm-featured-grid .add-to-cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  min-width: 120px;
  cursor: pointer;

  /* Hand-painted fantasy look */
  font-family: 'Ruslan Display', 'Marck Script', 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: .2px;
  color: #3a2f1f;                 /* тёмный текст на пергаменте */
  text-shadow: none;              /* убираем псевдообъём */

  background: #E8D8B8;            /* ровный пергаментный тон */
  border: 2px solid #ad9550 !important;      /* более контрастное мягкое золото */
  background-clip: padding-box;               /* чтобы фон не перекрывал рамку */
  box-shadow: 0 0 0 1px rgba(173,149,80,0.30), /* внешнее тонкое кольцо ближе к бордеру */
              inset 0 0 0 1px rgba(58,47,31,0.10); /* легкий внутренний штрих для контраста */
  border-radius: 12px;            /* чуть менее «игрушечный» радиус */
  /* сохраняем тонкое внешнее кольцо */

  transition: transform .12s ease,
              background-color .15s ease,
              color .15s ease,
              border-color .15s ease;
}

.container-bestsellers.basic-grid .tm-featured-grid .add-to-cart:hover,
.container-bestsellers.basic-grid .tm-featured-grid .add-to-cart-btn:hover {
  /* сплошная зелёная заливка на hover */
  transform: none;
  background-color: #238B5C; /* even darker green */
  color: #ffffff;            /* высокий контраст */
  border-color: #176E49;     /* ещё темнее рамка */
  box-shadow: none;          /* без теней/свечений */
}

/* pressed */
.container-bestsellers.basic-grid .tm-featured-grid .add-to-cart:active,
.container-bestsellers.basic-grid .tm-featured-grid .add-to-cart-btn:active {
  transform: translateY(0);
  background-color: #DEC895;  /* ещё чуть темнее при нажатии */
  border-color: #8c6f2c !important;          /* актив: заметнее, но в той же гамме */
  box-shadow: 0 0 0 1px rgba(203,179,107,0.30), inset 0 0 0 1px rgba(58,47,31,0.14);
  filter: none;
}

/* focus ring */
.container-bestsellers.basic-grid .tm-featured-grid .add-to-cart:focus-visible,
.container-bestsellers.basic-grid .tm-featured-grid .add-to-cart-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(210,184,121,0.35); /* аккуратное фокус-обводка */
}

/* Повышенная специфичность для рамки внутри блока действий карты */
.container-bestsellers.basic-grid .tm-featured-grid .tm-card-actions .add-to-cart,
.container-bestsellers.basic-grid .tm-featured-grid .tm-card-actions .add-to-cart-btn {
  border: 2px solid #ad9550 !important;
  border-style: solid !important;
  box-shadow: 0 0 0 1px rgba(173,149,80,0.30) !important;
}

.container-bestsellers.basic-grid .tm-featured-grid .tm-card-actions .add-to-cart:hover,
.container-bestsellers.basic-grid .tm-featured-grid .tm-card-actions .add-to-cart-btn:hover {
  /* сплошная зелёная заливка на hover (в зоне действий) */
  transform: none;
  background-color: #238B5C;
  color: #ffffff;
  border-color: #176E49;
  box-shadow: none;
}

/* Out-of-stock (disabled) button: red hover instead of green — home page only */
.container-bestsellers.basic-grid .tm-featured-grid .tm-card-actions .add-to-cart-btn[disabled],
.container-bestsellers.basic-grid .tm-featured-grid .tm-card-actions .add-to-cart-btn[aria-disabled="true"] {
  cursor: not-allowed;
  /* Серый базовый вид для отключённой кнопки */
  background-color: #9E9E9E;   /* neutral gray */
  border-color: #6E6E6E;       /* darker gray border, override stronger rule */
  color: #ffffff;              /* контрастный текст */
  box-shadow: none;            /* без декоративных теней */
}

.container-bestsellers.basic-grid .tm-featured-grid .tm-card-actions .add-to-cart-btn[disabled]:hover,
.container-bestsellers.basic-grid .tm-featured-grid .tm-card-actions .add-to-cart-btn[aria-disabled="true"]:hover {
  background-color: #B73A3A; /* red */
  border-color: #8A2424;
  color: #ffffff;
  box-shadow: none;
}

.container-bestsellers.basic-grid .tm-featured-grid .tm-card-actions .add-to-cart:active,
.container-bestsellers.basic-grid .tm-featured-grid .tm-card-actions .add-to-cart-btn:active {
  border-color: #8c6f2c;
}

/* Ультра-специфичное правило именно для тега button, чтобы перебить любые сбросы */
.container-bestsellers.basic-grid .tm-featured-grid .tm-card-actions button.add-to-cart-btn {
  border: 2px solid #ad9550;
  outline: 1px solid rgba(173,149,80,0.35);
  outline-offset: 0;
  background-clip: padding-box;
}

/* decorative leaf tips removed for a cleaner, hand-painted look */

/* мобильные */
@media (max-width:480px){
  .container-bestsellers.basic-grid .tm-featured-grid .tm-card-image-wrap { height: 120px; }
  .container-bestsellers.basic-grid .tm-featured-grid .tm-product-card { min-height: 260px; padding: 10px; }
}

/* ---------- hover эффект для рамки: только при наведении, без доп. тени (её задаёт правило ниже) ---------- */
.tm-featured-wrapper .container-bestsellers.basic-grid .tm-featured-grid article.tm-product-card:not([data-tilt-active]):hover {
  transform: translateY(-10px) scale(1.05) rotateX(6deg) rotateY(4deg);
  filter: saturate(1.04) contrast(1.02);
  z-index: 5;
}

/* Fallback: ensure effect applies even if other styles override transform */


/* ---------- защитные правила ---------- */
.container-bestsellers.basic-grid .tm-featured-grid .tm-product-card > a,
.container-bestsellers.basic-grid .tm-featured-grid .tm-product-card .tm-card-image-wrap {
  background: transparent;
  border-radius: inherit;
  position: relative;
  z-index: 1;
}

/* Ссылка не должна перекрывать область кнопок действий */
.container-bestsellers.basic-grid .tm-featured-grid .tm-product-card > a.tm-product-link {
  position: relative;
  z-index: 1; /* ниже .tm-card-actions (z-index:3) */
  display: block;
}

/* На всякий случай явно разрешаем события указателя на кнопке */
.container-bestsellers.basic-grid .tm-featured-grid .tm-card-actions .add-to-cart-btn {
  pointer-events: auto;
}

/* Ограничение строк и перенос длинных слов для стабильной высоты */
.container-bestsellers.basic-grid .tm-featured-grid .tm-card-title,
.container-bestsellers.basic-grid .tm-featured-grid .tm-card-subtitle {
  overflow-wrap: anywhere;
}

@media (max-width: 576px) {
  /* Управляемое сжатие текста на мобильных */
  /* Заголовок: без обрезания, адаптивный размер шрифта, не рвать слова */
  .container-bestsellers.basic-grid .tm-featured-grid .tm-card-title {
    display: block;               /* убрать -webkit-box, чтобы не было эллипсиса */
    -webkit-line-clamp: initial;  /* снять ранее возможный кламп */
    overflow: visible;            /* позволяем естественный поток */
    white-space: normal;          /* переносить только по пробелам */
    word-break: keep-all;         /* не разрывать слова */
    overflow-wrap: normal;        /* без аварийных переносов */
    -webkit-hyphens: manual; hyphens: manual;
    font-size: clamp(0.88rem, 3.2vw, 1.02rem);
    line-height: 1.24;
  }
  /* ВАЖНО: субтитр не режем на 2 строки — пусть занимает доступное место */
  .container-bestsellers.basic-grid .tm-featured-grid .tm-card-subtitle {
    display: block;                /* возвращаем блочный поток */
    -webkit-line-clamp: initial;   /* снимаем раннее обрезание */
    font-size: clamp(0.82rem, 3.2vw, 0.95rem);
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: normal;
  }
  /* Делаем секцию инфо флекс-колонкой, субтитр — растяжимый */
  .container-bestsellers.basic-grid .tm-featured-grid .tm-card-info {
    display: flex;
    flex-direction: column;
  }
  .container-bestsellers.basic-grid .tm-featured-grid .tm-card-subtitle { flex: 1 1 auto; }
  .container-bestsellers.basic-grid .tm-featured-grid .tm-card-price {
    font-size: clamp(0.95rem, 3.2vw, 1rem);
  }

  /* Кнопка: убираем фикс. мин.ширину и делаем адаптивной по карточке */
  .container-bestsellers.basic-grid .tm-featured-grid .add-to-cart,
  .container-bestsellers.basic-grid .tm-featured-grid .add-to-cart-btn {
    min-width: 0;                /* переопределяет min-width:120px */
    width: 100%;                 /* на мобиле во всю ширину карточки */
    max-width: 100%;
    min-height: 44px;            /* тач-эргономика */
    padding: clamp(8px, 2.8vw, 12px) clamp(12px, 3.5vw, 16px);
    font-size: clamp(0.9rem, 3.2vw, 1rem);
  }
}

/* Отключаем 3D-наклон/ховер-анимации на тач-устройствах и маленьких экранах */
@media (hover: none), (pointer: coarse), (max-width: 768px) {
  /* карточка: без наклона/масштаба при ховере */
  .tm-featured-wrapper .container-bestsellers.basic-grid .tm-featured-grid article.tm-product-card,
  .tm-featured-wrapper .container-bestsellers.basic-grid .tm-featured-grid article.tm-product-card:hover {
    transform: none !important;
  }
  /* изображение: без параллакса/масштаба при ховере */
  .container-bestsellers.basic-grid .tm-featured-grid .tm-product-card .tm-card-img,
  .container-bestsellers.basic-grid .tm-featured-grid .tm-product-card:hover .tm-card-img {
    transform: none !important;
  }
}