/* ====== OFFERS: Акции (mobile-first, чистая mob-версия, без вмешательства в глобальную тему) ====== */

.offers-page{
  --ofr-card-radius: 14px;
  --ofr-gap: 16px;
  --ofr-card-bg: var(--surface, #fff);
  --ofr-border: color-mix(in srgb, var(--text, #111) 10%, transparent);
}

/* Блок секции и контейнер */

.offers-page .section.hero{
  padding: clamp(20px, 4vw, 40px) 0;
}

.offers-page .container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Хлебные крошки */

.offers-page .breadcrumbs{
  font-size: 13px;
  opacity: .8;
  margin: 0 0 8px;
}

.offers-page .breadcrumbs ol{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.offers-page .breadcrumbs a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

/* Заголовок блока + подзаголовок + фильтры */

.offers-page .section-head h1{
  margin: 6px 0;
  font-size: clamp(22px, 3.4vw, 32px);
}

.offers-page .section-head .sub{
  margin: 0;
  opacity: .85;
}

@media (max-width: 639px){
  .offers-page .section-head{
    display: grid;
    grid-template-areas:
      "title"
      "sub"
      "chips";
    gap: 8px;
  }

  .offers-page .section-head h1{ grid-area: title; }
  .offers-page .section-head .sub{ grid-area: sub; }
  .offers-page .section-head .chips{ grid-area: chips; width: 100%; }
}

/* Чип-фильтры */

.offers-page .chips{
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 8px;
  margin-top: 12px;
}

.offers-page .chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--ofr-border);
  background: color-mix(in srgb, var(--ofr-card-bg) 86%, transparent);
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}

.offers-page .chip.is-active{
  background: color-mix(in srgb, var(--accent, #0c7a43) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent, #0c7a43) 35%, transparent);
}

/* Панель результатов и сортировки */

.offers-page .toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 18px;
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--text, #111) 4%, transparent);
}

.offers-page .results{
  font-size: 14px;
  opacity: .85;
}

.offers-page .sort{
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.offers-page .sort select{
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--ofr-border);
  background: var(--ofr-card-bg);
  padding: 6px 10px;
}

@media (max-width: 639px){
  .offers-page .toolbar{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .offers-page .sort select{
    width: 100%;
  }
}

/* sticky только на планшете и выше */

@media (min-width: 640px){
  .offers-page .toolbar{
    position: sticky;
    top: calc(var(--hdr-h, 64px) + 8px);
    z-index: 12;
    background: color-mix(in srgb, var(--ofr-card-bg) 92%, transparent);
    backdrop-filter: saturate(120%) blur(4px);
  }
}

/* Сетка карточек */

.offers-page .grid{
  display: grid;
  gap: var(--ofr-gap);
  margin-top: 18px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px){
  .offers-page .grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px){
  .offers-page .grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Карточка акции */

.offers-page .card{
  background: var(--ofr-card-bg);
  border: 1px solid var(--ofr-border);
  border-radius: var(--ofr-card-radius);
  padding: 14px;
  box-shadow: 0 6px 14px rgba(0,0,0,.05);
  display: grid;
  align-content: start;
  gap: 8px;
}

.offers-page .card-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.offers-page .card-title{
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.offers-page .badges{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 6px;
  font-size: 12px;
  opacity: .9;
}

.offers-page .badge{
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--ofr-border);
}

.offers-page .meta{
  font-size: 13px;
  color: color-mix(in srgb, var(--text, #111) 55%, transparent);
}

/* Кнопка в карточке */

.offers-page .card .btn{
  height: 34px;
  border-radius: 10px;
  padding: 0 12px;
  border: 1px solid var(--ofr-border);
  background: var(--ofr-card-bg);
  cursor: pointer;
  width: auto;
  align-self: start;
}

.offers-page .card .btn:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--accent, #0c7a43) 45%, transparent);
  outline-offset: 2px;
}

/* Пустое состояние и блок правил */

.offers-page .empty{
  text-align: center;
  padding: 24px 0;
  opacity: .9;
}

.offers-page .rules{
  margin: 26px 0 6px;
}

.offers-page .rules h2{
  font-size: 18px;
  margin: 0 0 8px;
}

.offers-page .rules details{
  border: 1px solid var(--ofr-border);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--ofr-card-bg);
}