/* Annual subscription offer shared by course pages. Updated 21.10.2026.
   22.10.2026: single price-block standard for the course card (see bottom). */
#price .shb-subscription-offer {
  box-sizing: border-box;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch;
  min-width: 0;
  width: 100%;
  padding: 40px !important;
  overflow: visible !important;
  border: 0 !important;
  border-top: 4px solid #e00800 !important;
  border-radius: 24px !important;
  background: #fff !important;
  color: #0f172a !important;
  box-shadow: 0 14px 36px rgba(30, 27, 20, .08) !important;
  text-align: left !important;
}
#price .shb-subscription-offer::before,
#price .shb-subscription-offer::after { display: none !important; }
#price .shb-subscription-head { position: relative; min-height: 108px; padding-right: 118px; }
#price .shb-subscription-kicker {
  display: block; margin-bottom: 15px; color: #e00800 !important;
  font-size: 12px; font-weight: 800; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase;
}
#price .shb-subscription-offer h3 {
  margin: 0 0 8px !important; color: #0f172a !important;
  font-size: 24px !important; font-weight: 800 !important; line-height: 1.18 !important;
}
#price .shb-subscription-term {
  margin: 0 0 24px !important; color: #64748b !important;
  font-size: 14px !important; line-height: 1.5 !important;
}
#price .shb-subscription-badge {
  box-sizing: border-box; position: absolute; z-index: 2; top: -12px; right: -8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; width: 108px; height: 108px; padding: 8px;
  border: 4px solid #fff; border-radius: 50%; background: #e00800;
  color: #fff; text-align: center; box-shadow: 0 10px 24px rgba(224,8,0,.24);
  transform: rotate(8deg);
}
#price .shb-subscription-badge span,
#price .shb-subscription-badge strong { display: block; color: #fff !important; text-align: center; }
#price .shb-subscription-badge span { font-size: 10px !important; font-weight: 800; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
#price .shb-subscription-badge strong { font-size: 22px !important; font-weight: 800; line-height: 1; white-space: nowrap; }
#price .shb-subscription-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin: 0 0 18px; }
#price .shb-subscription-price strong { color: #0f172a !important; font-size: 36px !important; font-weight: 800; line-height: 1.12; }
#price .shb-subscription-price span { color: #64748b !important; font-size: 14px !important; }
#price .shb-subscription-list-title { margin: 0 0 12px !important; color: #0f172a !important; font-size: 16px !important; font-weight: 700 !important; }
#price .shb-subscription-benefits {
  display: block !important; flex: 0 0 auto !important; margin: 0 0 28px !important;
  padding: 0 0 0 20px !important; list-style: disc outside !important;
}
#price .shb-subscription-benefits li {
  display: list-item !important; margin: 0 0 12px !important; padding: 0 !important;
  color: #334155 !important; font-size: 14px !important; font-weight: 400 !important;
  line-height: 1.55 !important; list-style: disc outside !important;
}
#price .shb-subscription-benefits li::before { display: none !important; }
#price .shb-subscription-cta {
  box-sizing: border-box; display: flex !important; align-items: center; justify-content: center;
  width: 100%; min-height: 52px; margin: 0 !important; padding: 13px 20px !important;
  border: 0 !important; border-radius: 14px !important; background: #e00800 !important;
  color: #fff !important; font-size: 16px !important; font-weight: 700 !important;
  line-height: 1.3 !important; text-align: center !important; text-decoration: none !important;
}
#price .shb-subscription-cta:hover { background: #b80700 !important; }
#price .shb-subscription-cta:focus-visible { outline: 3px solid #0f172a; outline-offset: 3px; }
#price .shb-subscription-note { margin: 12px 0 0 !important; color: #64748b !important; font-size: 12px !important; line-height: 1.5 !important; text-align: center !important; }
/* In a paired offer, the separate course uses green accents. */
#price .shb-course-offer { border-top: 4px solid #649436 !important; }
#price .shb-course-offer .fish-offer-kicker,
#price .shb-course-offer .price-kicker,
#price .shb-course-offer .offer-top > span,
#price .shb-course-offer > span:first-child,
#price .shb-course-offer > div:first-child > span:first-child,
#price .shb-course-offer .bg-slate-100 { color: #496f24 !important; }
#price .shb-course-offer .fish-offer-cta,
#price .shb-course-offer .breakfast-offer-cta,
#price .shb-course-offer .offer-cta,
#price .shb-course-offer .btn-buy,
#price .shb-course-offer .btn-primary,
#price .shb-course-offer .gc-open,
#price .shb-course-offer button[id*="enroll"],
#price .shb-course-offer button[id*="widget"] { background: #649436 !important; border-color: #649436 !important; color: #fff !important; }
#price .shb-course-offer .fish-offer-cta:hover,
#price .shb-course-offer .breakfast-offer-cta:hover,
#price .shb-course-offer .offer-cta:hover,
#price .shb-course-offer .btn-buy:hover,
#price .shb-course-offer .gc-open:hover { background: #496f24 !important; }
@media (max-width: 767px) {
  #price .shb-subscription-offer { padding: 28px 24px !important; }
  #price .shb-subscription-price strong { font-size: 32px !important; }
}
@media (max-width: 420px) {
  #price .shb-subscription-head { padding-right: 99px; }
  #price .shb-subscription-badge { width: 94px; height: 94px; top: -8px; right: -8px; }
  #price .shb-subscription-badge strong { font-size: 19px !important; }
  /* Keep the label inside the circle on narrow phones (21.10.2026). */
  #price .shb-subscription-badge { right: -4px; padding: 6px; }
  #price .shb-subscription-badge span { font-size: 9px !important; letter-spacing: .06em; }
}

/* ===== Price-block standard, 22.10.2026 =====
   One standard for every course page: the course card (.shb-course-offer in a pair
   with the subscription; .shb-price-card on single-course pages) takes the type,
   bullets and spacing of the subscription card above.
   Card 40px padding (28/24 on phones) · kicker 12/1.4 · h3 24/1.18 · subtitle 14/1.5
   · price 36/1.12 (32 on phones) · list title 16 · list 14/1.55 disc, 12px between items
   · last item -> button 28px · button 52px, 16/700 · notes 12/1.5.
   Free height goes below the content, so the button stays 28px under the list. */
#price .shb-subscription-benefits li:last-child { margin-bottom: 0 !important; }
#price :is(.offer-grid, .fish-offer-grid, .breakfast-offer-grid, .price-grid) { align-items: stretch !important; }
/* Pages with a 3-row subgrid course card (soups, dinners, ZOZh): the subscription spans the same rows. */
@media (min-width: 768px) { #price .fish-offer-grid > .shb-subscription-offer { grid-row: 1 / -1; } }
/* Порядок карточек (22.10.2026): слева курс страницы, справа абонемент. grid-row 1/-1 у абонемента иначе ставит его в первую колонку. */
@media (min-width: 768px) { #price .fish-offer-grid > .shb-subscription-offer:not(:only-child) { grid-column: 2; } #price .fish-offer-grid > :not(.shb-subscription-offer) { grid-column: 1; } }
/* Card chrome only for the paired course card; .shb-price-card (single-course pages)
   keeps its page frame and takes the type, list, price, button and payment strip. */
#price .shb-course-offer {
  box-sizing: border-box; position: relative;
  display: flex !important; flex-direction: column !important;
  align-self: stretch !important; height: auto !important; min-width: 0;
  padding: 40px !important; border-radius: 24px !important;
  background: #fff !important; color: #0f172a !important;
  box-shadow: 0 14px 36px rgba(30, 27, 20, .08) !important; text-align: left !important;
}
#price .shb-course-offer { border: 0 !important; border-top: 4px solid #649436 !important; }
#price .shb-course-offer::before,
#price .shb-course-offer::after { display: none !important; }
/* kicker */
#price :is(.shb-course-offer, .shb-price-card) :is(.fish-offer-kicker, .price-kicker, .bread-eyebrow, .offer-top > span:first-child),
#price :is(.shb-course-offer, .shb-price-card) > span:first-child,
#price :is(.shb-course-offer, .shb-price-card) > div:first-child > span:first-child {
  display: block !important; margin: 0 0 15px !important; padding: 0 !important;
  border-radius: 0 !important; background: none !important;
  font-size: 12px !important; font-weight: 800 !important; letter-spacing: .12em !important;
  line-height: 1.4 !important; text-transform: uppercase !important;
}
/* title */
#price :is(.shb-course-offer, .shb-price-card) h3 {
  margin: 0 0 8px !important; color: #0f172a !important;
  font-size: 24px !important; font-weight: 800 !important; line-height: 1.18 !important;
}
/* subtitle / term line */
#price :is(.shb-course-offer, .shb-price-card) :is(h3 + p:not([class*="price"]), .price-unit, .offer-top > p) {
  margin: 0 0 24px !important; color: #64748b !important;
  font-size: 14px !important; font-weight: 400 !important; line-height: 1.5 !important;
}
/* price */
#price :is(.shb-course-offer, .shb-price-card) :is(.fish-offer-price, .offer-price, .price-big, .bread-price-now, .text-4xl) {
  margin: 0 0 18px !important; color: #0f172a !important;
  font-size: 36px !important; font-weight: 800 !important; line-height: 1.12 !important; white-space: nowrap;
}
#price :is(.shb-course-offer, .shb-price-card) :is(.fish-offer-price, .offer-price, .price-big) small { color: #64748b !important; font-size: 14px !important; font-weight: 400 !important; }
#price .shb-course-offer :is(.mb-6:has(> h3), .mb-8:has(> .text-4xl)) { margin-bottom: 0 !important; }
/* list title */
#price :is(.shb-course-offer, .shb-price-card) p:has(+ ul):not(h2 + p) {
  margin: 0 0 12px !important; color: #0f172a !important;
  font-size: 16px !important; font-weight: 700 !important; line-height: 1.5 !important;
}
/* list: dots, 14/1.55, 12px between items, 28px to the button */
#price :is(.shb-course-offer, .shb-price-card) ul {
  display: block !important; flex: 0 0 auto !important; gap: 0 !important;
  margin: 0 0 28px !important; padding: 0 0 0 20px !important; list-style: disc outside !important;
}
#price :is(.shb-course-offer, .shb-price-card) ul > li {
  display: list-item !important; position: static !important;
  margin: 0 0 12px !important; padding: 0 !important;
  color: #334155 !important; font-size: 14px !important; font-weight: 400 !important;
  line-height: 1.55 !important; list-style: disc outside !important;
}
#price :is(.shb-course-offer, .shb-price-card) ul > li:last-child { margin-bottom: 0 !important; }
#price :is(.shb-course-offer, .shb-price-card) ul > li::before { display: none !important; content: none !important; }
#price :is(.shb-course-offer, .shb-price-card) ul > li > svg { display: none !important; }
#price :is(.shb-course-offer, .shb-price-card) ul > li > span { color: inherit !important; font-size: inherit !important; line-height: inherit !important; }
/* actions directly under the list, no pushes or hacks */
#price :is(.shb-course-offer, .shb-price-card) :is(.offer-card-actions, .offer-actions-content, .fish-offer-actions, .breakfast-offer-actions, .price-actions) {
  margin-top: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important;
}
#price :is(.shb-course-offer, .shb-price-card) :is(.offer-cta, .fish-offer-cta, .breakfast-offer-cta, .btn-buy, .bread-enroll-toggle, #enroll-toggle, #show-course-widget) {
  box-sizing: border-box; display: flex !important; align-items: center; justify-content: center;
  width: 100% !important; min-height: 52px !important; padding: 13px 20px !important;
  border: 0 !important; border-radius: 14px !important;
  font-size: 16px !important; font-weight: 700 !important; line-height: 1.3 !important;
  text-align: center !important; transform: none !important;
}
#price .shb-course-offer :is(.offer-cta, .fish-offer-cta, .breakfast-offer-cta, .btn-buy, #enroll-toggle, #show-course-widget) { margin: 0 !important; }
/* price right under the title when a card has no subtitle */
#price .shb-course-offer h3 + :is(.fish-offer-price, .offer-price) { margin-top: 16px !important; }
/* single-course card: list sits under the intro, price row keeps its own spacing */
#price .shb-price-card ul { margin-top: 20px !important; }
#price .shb-price-card .bread-price-now { margin: 0 !important; }
/* payment-in-parts strip */
#price :is(.shb-course-offer, .shb-price-card) :is(.payment-options, .fish-payment-options, .course-payment, .breakfast-payment, .offer-installments, .bread-payment-options) {
  box-sizing: border-box; display: flex !important; flex-direction: row !important; align-items: center !important;
  gap: 14px !important; margin: 12px 0 0 !important; padding: 12px 14px !important;
  border: 0 !important; border-radius: 14px !important; background: #f7f3ec !important;
  color: #334155 !important; font-size: 13px !important; line-height: 1.45 !important; text-align: left !important;
}
#price :is(.shb-course-offer, .shb-price-card) :is(.payment-options, .fish-payment-options, .course-payment, .breakfast-payment, .offer-installments, .bread-payment-options) img { display: block; width: 86px !important; height: auto !important; flex: none !important; margin: 0 !important; }
#price :is(.shb-course-offer, .shb-price-card) :is(.payment-options, .fish-payment-options, .course-payment, .breakfast-payment, .offer-installments, .bread-payment-options) p { margin: 0 !important; color: inherit !important; font-size: inherit !important; line-height: inherit !important; }
/* notes under the button */
#price :is(.shb-course-offer, .shb-price-card) :is(.offer-note, .fish-offer-note, .breakfast-offer-note, .offer-guarantee, .price-after, .price-actions > p) {
  margin: 12px 0 0 !important; color: #64748b !important;
  font-size: 12px !important; font-weight: 400 !important; line-height: 1.5 !important; text-align: center !important;
}
@media (max-width: 767px) {
  #price .shb-course-offer { padding: 28px 24px !important; }
  #price :is(.shb-course-offer, .shb-price-card) :is(.fish-offer-price, .offer-price, .price-big, .bread-price-now, .text-4xl) { font-size: 32px !important; }
}
@media (max-width: 420px) {
  #price :is(.shb-course-offer, .shb-price-card) :is(.payment-options, .fish-payment-options, .course-payment, .breakfast-payment, .offer-installments, .bread-payment-options) { flex-direction: column !important; align-items: flex-start !important; gap: 7px !important; }
  #price :is(.shb-course-offer, .shb-price-card) :is(.payment-options, .fish-payment-options, .course-payment, .breakfast-payment, .offer-installments, .bread-payment-options) img { width: 120px !important; }
}

/* ===== Кнопки пары на одной высоте, 23.10.2026 (решение Алёны) =====
   Desktop/планшет (≥768), две карточки в ряду (они одной высоты): кнопка с подписями под ней
   прижата к низу карточки, свободное место — над кнопкой. Под кнопкой у карточек разный объём
   (у курса «Долями» + примечание, у абонемента одна строка), поэтому /subscription-offer.js
   добавляет разницу нижним полем той карточки, где под кнопкой меньше, — кнопки встают
   на одну линию. Без JS кнопки просто прижаты к низу. Карточки без кнопки (формовки,
   «Как испечь хлеб»: форма прямо в карточке) не затронуты. Пока форма курса раскрыта
   внутри карточки (≥900), прижатие снимается, чтобы кнопка абонемента не уезжала вниз. */
@media (min-width: 768px) {
  #price .shb-subscription-cta { margin-top: auto !important; }
  #price .shb-course-offer > :is(.offer-card-actions, .fish-offer-actions, .breakfast-offer-actions, .price-actions, .offer-cta, .btn-buy, #enroll-toggle, #show-course-widget) { margin-top: auto !important; }
  #price :is(.shb-subscription-offer, .shb-course-offer) { padding-bottom: calc(40px + var(--shb-foot-pad, 0px)) !important; }
  #price:has(.shb-course-offer :is([id$="enroll-panel"], .shb-enroll-popup):not([hidden])) .shb-subscription-cta,
  #price:has(.shb-course-offer :is([id$="enroll-panel"], .shb-enroll-popup):not([hidden])) .shb-course-offer > :is(.offer-card-actions, .fish-offer-actions, .breakfast-offer-actions, .price-actions, .offer-cta, .btn-buy, #enroll-toggle, #show-course-widget) { margin-top: 0 !important; }
}